plotly / react-chart-editor Goto Github PK

We have min and max values from plotSchema. We can pass these though to the widgets. Accept prop overrides.

Plotly to provide their color picker as a default; built in a way that it can be updated later.

This feature requires the color picker to work, which is mainly dependent upon #9.

Similar to photoshop, it would be nice to have a linked editor in which you can specify inches and get pixels. That requires some conversion factor like 72 dpi that's just not as relevant in 2017 as it used to be, but so that we can provide intuitive units for people to work with and since it affects things like font sizes, the photoshop editor is probably a good way to approach it.

Toggle for legend orientation

Widget to toggle horizontal/vertical

Right now <DefaultEditor> computes all the Plotly.js traces and passes those down to <TraceSelector>

Now that we are standardizing on the idea of one-stop shop components that handle all their own craziness we should move the traceOptions handling from DefaultEditor to TraceSelector.

The presence or lack of an attribute value in fullData is enough to hide or show the corresponding field automatically. Visibility of the section headings isn't free. It might be necessary to traverse the config and hide/show them accordingly, depending on whether any specific fields are present or not.

See graph_edit Toolpanel for example

When application logic changes unpackPlotProps is run on every rendered attribute Field. Investigate a way to prevent this from happening. Probably worth starting with the Editor revision number ++

Only transpiling the entry point breaks everything. For an exported component, all source files must be transpiled into lib.

Right now DefaultEditor only support Linear and Log. These could be extra options in a settings panel.

For now we only need something to represent units. So make the prop units

The basic plot size is specified in pixels.

See also: #12 #13 #14 #15.

We now have nested CSS so the bem function isn't as useful. It also requires a number of extra function calls when it's fairly trivial to hardcode strings. Hardcoded strings are easier to search the src code for as well. Searching for CSS strings in src code happens fairly often when debugging an application.

One is in src and the other is in src/lib.

Pick the one that makes most sense.

We can probably use a much simpler abstraction around <input>

Add selector for bar and pie chart types. The menu is not yet graphical, and not yet addressed is the way that the workspace has a fairly loose mapping between chart types displayed in the selector and internal trace types. That is, there is no "area" chart, but the workspace shows an "area" chart type for convenience.

So far I've been sticking with plain CSS. It's the main barrier preventing the color selector from working, so it seems that the time has come to pull in scss from streambed and get a proper scss pipeline hooked up.

Plotly.js and streambed have these tests. Copy one of those.

Create a FontSelector that provides default fonts

Investigate options including https://github.com/documentationjs/documentation

I've been taking a sort of extended BEM approach to the CSS selectors. That is, BEM but prefixed with plotly-editor. The reason is so that you can include the editor on any page and expect it not to conflict with your existing CSS. With SCSS/LESS, the prefix could be centralized into one location, but at the moment this seems adequate.

TO DO: I took a few shortcuts just leaving streambed component class names as-is. They should also be prefixed.

We use this trick in Dropdown and it looks good. Perhaps we can use it for Numeric and others.

Test axes encapsulation and the whole multivalued framework

Text editor to change title content and font.

Depends upon: font selector menu, possibly rich text editor from streambed.

see #54 (comment)

Right now <Section> will hide itself when all of its attr children are not visible. Currently if you put non attr children in a <Section> it will show. However you could make the case that <Info> (for example) should not by default force <Section> to show since it is <Info> about non applicable (and hidden) fields.

We might be able to extend this argument to <MenuPanel> (CogMenu) as well. If CogMenu is always (or almost always) an advanced settings of the base fields in <Section> then it may not make sense to show it.

To resolve this we need to look at all the CogMenus in the workspace and figure out sane defaults.

Only use eslint logical checking (unused vars, duplicate vars, ...) and leave syntactical checks to prettier.

Color selector for title editor.

Opening this for a discussion of i18n, both for this and for the public plotly.js repo.

There are a few different ways to accomplish this. In semi-pseudocode, the i18n function fundamentally looks like:

function _( key ) {
  if (key in dictionary) {
    return dictionary[key]
  } else {
    return key
  }
}

The input is the string itself, which has pros and cons. The dictionary looks like:

{
  "es": {
    "Trace": "Rastro",
    "Click to toggle visibility": "Haga clic para activar la visibilidad",
    ...etc
  },
  "ru": {
    ...
  }
}

You'd use this like:

_("Trace")

The downside is that "Trace" (nominative) and "Trace" (accusative) have different translations in some languages. If this were the case, you could be more explicit and make nontrivial use of an english dictionary to use keys instead of the strings themselves.

{
  "en": {
    "Trace label in style panel": "Trace"
  },
  "es": {
    "Trace label in style panel": "Rastro",
    "Click to toggle visibility": "Haga clic para activar la visibilidad",
    ...etc
  },
  "ru": {
    ...
  }
}

_("Trace label in the style panel")

Or maybe panels.style.trace or whatever you prefer. It's a bit free-form.

At any rate, you'd pass in a dictionary which would get deep-merged into whatever default dictionaries plotly.js has built in. The fallback is builtin dictionary values or just a pass-through i18n function.

For plotly, the dictionary would be passed through config as, e.g. {"es": {...}} and the desired language would be specified as, e.g "language": "es". As in:

Plotly.plot(gd, {
  data: {...},
  config: {
    language: "es",
    dictionary: {
      es: {
        key: value
      }
    }
  }
})

(locale instead of language? dictionaries, plural? I at least like the idea of being able to pass multiple dictionaries in one parameter so that changing the language would be possible.)

For plotly.js it could also be possible to use Plotly.Register. As in:

Plotly.Register(require('plotly.js/dictionaries/en.json'))
Plotly.Register(require('plotly.js/dictionaries/es.json'))

Plotly.plot(gd, {config: {language: 'es'}})

For react components, the editor would probably receive a dictionary and expose it through context. All components would inherit from a base component that makes the dictionary available so that it's not global and so that the dictionary doesn't need to trickle down through props explicitly. Then instead of importing _, you'd inherit from the base component and have this._(...) automatically available.

/cc @bpostlethwaite @alexcjohnson @etpinard

Area charts for example do not support trace level opacity. See workspace2 info message.

It looks like the latest commit added a lib folder to the lib folder which threw off all the references to common in the components. Also, the PlotlyReactEditor.js file changed from plotly.js-react-editor which broke the reference in index.js

But after fixing all those references, I get the following run-time error:
TypeError: Super expression must either be null or a function, not undefined index.js:35134:113

Legend hide/show config

After the most recent updates, the select controls for selecting trace x, y, and plot type no longer function. clicking and holding one shows the options, but they disappear when you release the mouse so you can't select one. I tried to see if the same behavior happens in the react-lab example, but it no longer compiles because of new referencing issues.

Add pie chart editor options.

Error: Cannot find module '../../src/plotly.js-react-editor.jsx' from '/home/ben/plotly/react-plotly.js-editor/example/src'

or can it be a simple static value?

Is there a case where plotProps is not rerendered when either gd.data or gd.layout or the component plots change?

Font size menu. (To check: Is this a regular select menu? Part of the rich text editor? Both?)

Need to choose a place for this, which may or may not be identical to the workspace panel hierarchy.

Partially complete. See #4. Needs color selector widget and properly hidden section headings (see: #6)

Right now they are always open with no way to fold them up

A panel in the layout section?

Split the actual icon class definitions into their own file that can be nested in the main.scss and remove their plotlyjs_editor prefixes.

I think @fontface still needs to be global scope so that will need to be included in a fonts. Does it need to be global? It didn't work when I tried nesting the whole of _icons.scss but I didn't do much investigation.

Test showing area and line traces and updating area and line traces

Discussion on merits of using Flow type annotations