[Question] Custom Attrs?

[dmossie]

Hey there, I am wondering if it is possible to add custom fields with custom attrs to the react chart editor.

What I am trying to do specifically, is add a new drop down to the Trace Menu. This dropdown will influence the data options for X and Y from our database.

Example:

I noticed the Dropdown and the DataSelector require an attr field. The attr field would be nice to use if it stores the data in the chart, however I do not want it to influence anything on the chart directly.

Is it possible to create custom attrs so that I can add new custom fields to the chart editor?

[nicolaskruchten]

You can add custom fields and widgets, you just can't use the attr prop, otherwise the framework will hide them as they won't be found in _fullData or _fullLayout from plotly.js...

[dmossie]

Hey @nicolaskruchten , thanks for the reply!
I find without the attr prop, the fields will not show up at all.
Example:

            <PlotlySection name={_('TestSection')}>
                <DataSelector label={_('TestSelector')}/>
                <Dropdown
                label={_('TestDropdown')}
                clearable={false}
                options={[
                    { label: _('Auto'), value: 'auto' },
                    { label: _('45'), value: 45 },
                    { label: _('90'), value: 90 },
                    { label: _('135'), value: 135 },
                    { label: _('180'), value: 180 },
                ]}
                />
            </PlotlySection>

I am assuming I can not use these components at all and that I should make my own? This might make sense as I will need an onChange function.

The reason I am asking is it would be nice to keep our components looking the same as plotlys components visually.

Also, is adding your own attr's currently a feature? Or not really meant to be done?

[nicolaskruchten]

Ah, sorry, now that I look at how we've done this in the past, we've not used the exported fields but the widgets and then rewrapped them in <Field> but not called connectToContainer() on them. The resulting component has the <Field> styling but not the visibility rules tied to attr. We had at the time (3 weeks ago, at the office) discussed the idea of exporting the unconnected fields as well as the connected ones for this exact use-case and in fact we should. If you submitted a PR that did just that we'd likely approve it and re-release in a flash :)

To answer your other question: you cannot create your own attrs as those are defined in the plotly.js schema

/cc @VeraZab

[dmossie]

Hey @nicolaskruchten and @VeraZab. I am going to take a shot at implementing this. I am having a few issues though. Is there someone I can contact about this for support?

[nicolaskruchten]

This issue is probably a good place :)

[dmossie]

Ok thank you.

I am having trouble testing these new components I am creating.

I was wondering if someone could help point me in the right direction to easily test these new components to see if they work. What is the go to way to do this at plotly?

Also I did an 'npm install' in the forked repository, and it seems that "canvas": "^1.6.9" is breaking it. It breaks on both windows and linux for me.

[nicolaskruchten]

Yeah we should see if we can remove canvas and just live with the warnings that it's meant to suppress. Those warnings come in the jest tests which are basically the answer to your other question. The various component directories have some test files which you can use as templates, like this one for example: https://github.com/plotly/react-chart-editor/blob/master/src/components/fields/__tests__/CanvasSize-test.js

[dmossie]

Is there a way to test it visually? I am wondering how to see my new components easily in a react chart editor after I have implemented them. Perhaps I need to convert the source code into an npm package some how?

[nicolaskruchten]

I'd recommend adding them to one of the demo apps or creating your own demo app in the same package, even if you don't commit that app.

[bhogan-mitre]

I found the included dev app (with hot reloading) super helpful when working towards a recent PR as well.

[nicolaskruchten]

I think your best bet would indeed be to use the existing dev app if this is what you're trying to do... It's already set up to reference a relative copy of react-chart-editor and has hot-reloading etc. That's probably the advice I should have given you above and I was likely thinking 'dev' when I typed 'demo', sorry!

[dmossie]

Thanks for your help guys, I made a custom drop down and created a pull request.