Create a utility function to get data from resources to plotly data format

[EvgeniiaVak]

Acceptance criteria

• [x] There is a function that gets data from resources view property and adds data to plotly spec

Tasks

• [x] Add tests
• [x] Create the function plotlyToPlotly
• [x] Build - yarn build

Analysis

Looking at simpleToPlotly function, we can see that it generates plotly spec that then can be used by Plotly.js library to render a graph:

https://github.com/frictionlessdata/datapackage-render-js/blob/master/lib/view.js#L90-L119

Chart (Plotly) component expects spec to have data and layout properties:

https://github.com/datopian/datapackage-views-js/blob/master/src/Chart.js#L9

You can notice that Plotly also can take config object (read more here https://plot.ly/javascript/configuration-options/). We might want to add it as well for full plotly spec support.

In our plotlyToPlotly function, we should only compile data values into that spec, for example, in my view spec I can have something like this:

{
  ...
  specType: 'plotly',
  spec: {
    data: [{...}, {...}, ...], // we compile "x" and "y" values here
    layout: {...}, // we don't alter it
    config: {...} // we don't alter it
  }
}

where spec.data can have multiple objects and each object is:

{
  group: "field name for X values", // this isn't plotly but our custom property so that we can get values for `x`
  series: "field name for Y values", // this is also our custom property so that we can generate `y` values
  ... // everything else that plotly supports, e.g., "type", "name", "orientation" etc.
}

[anuveyatsu]

@EvgeniiaVak updated analysis section in the issue description.

[EvgeniiaVak]

@anuveyatsu

I think adding group and series inside spec.data will break our own specification and can be avoided:

    {
      "specType": "plotly",
      "resources": ["some-resource-name"],
      "spec": {
        group: "x-or-y-column-name",
        series: ["y-or-x-column-name"],
        data: 
        [
          {
            // plotly data layout props or data 
           // if `x` and `y` are present they will be shadowed `group` and `series`
            "type": "scatter",
            "mode": "lines",
            "name": "Some legend"
          }
        ],
        layout: {...}, // we don't alter it
        config: {...} // we don't alter it
      },
    }

Although this may open some other issues, e.g. series and data lengths should be equal. 🤔 Do you think it is still better to move group and series inside spec.data?

Not related: group does not always correstpond to x values, e.g. in horizontal graphs it corresponds to plotly's y.