Add Frictionless views in dataset page

[risenW]

Views on the Frictionless object are rendered on the page ...

Acceptance

• [x] Views specified in a datapackage is correctly compiled and into a frictionless view spec Done See https://github.com/datopian/portal-experiment/pull/5
• [x] Views can be displayed in the dataset page using the appropriate view engine
  • [x] Simple view rendering works
  • [x] Plotly view works e.g. the sample finance-vix gives us a plot like that on https://datahub.io/core/finance-vix
  • [x] Vega view works

Tasks

• [x] Install datapackage-views-js for displaying views
• [x] Create a views component
• [x] Create a Plotly chart Component as shown here https://github.com/datopian/datapackage-views-js/blob/master/src/Chart.js
• [x] Get views from datapackage object
  • [x] Check if views have resources (use it), else add resource to views: see algorithm https://github.com/datopian/frontend-showcase-js/blob/d8918ef6172d394e4bacff4fb8acbd4102fa0ebf/src/index.jsx#L67-L85
  • [x] Compile to spec with datapackage-render
• [x] Pass compiled view to Plotting library
• [x] Show plot in the dataset page

Analysis

How it works

Frictionless Data View (https://specs.frictionlessdata.io/views/) in a Data Package. E.g. this is a simple one:

{
  "id": "Graph",
  "type": "Graph",
  "state": {
    "graphType": "lines",
    "group": "Date",
    "series": [ "VIXClose" ]
  }
}

Convert the view to spec for the charting library.

• First, prepare the view ...
  • Inline resources onto the view compile data inline onto resource in attribute _values
• Then convert the view to relevant spec ... using https://github.com/frictionlessdata/datapackage-render-js
• Display the view using the appropriate library based on spec. (Start with Plotly for now)

graph LR

view --> compiled[Compiled View]
compiled --datapackage-render-js--> plotly[Plotly Spec]
compiled --> vega[Vega Spec]

Algorithm for inlining the data ... - see https://github.com/datopian/frontend-showcase-js/blob/d8918ef6172d394e4bacff4fb8acbd4102fa0ebf/src/index.jsx#L67-L85

• for each resource make sure we inlined all the data for that resource onto a _values attribute on the resource
• if resources is specified on view use that other otherwise use the first resource in the resource array
• replace the item in the resources array on the view with the resource object in the resources array

How it starts

{
  "id": "Graph",
  "type": "Graph",
  "state": {
    "graphType": "lines",
    "group": "Date",
    "series": [ "VIXClose" ]
  }
}

Then becomes

{
  // where the data comes from ...
  "resources": [0],
  "id": "Graph",
  "type": "Graph",
  "state": {
    "graphType": "lines",
    "group": "Date",
    "series": [ "VIXClose" ]
  }
}

Then becomes ...

{
  // where the data comes from ...
  "resources": [
    {
      name: ...
      _values: ...
    }
  ],
  "id": "Graph",
  "type": "Graph",
  "state": {
    "graphType": "lines",
    "group": "Date",
    "series": [ "VIXClose" ]
  }
}

https://github.com/datopian/datapackage-views-js/blob/bb08d2032e/__fixtures__/chart.fixtures.js

What do i want in a library ...

Given a Frictionless Dataset with a Frictionless View like ...

{
  "id": "Graph",
  "type": "Graph",
  "state": {
    "graphType": "lines",
    "group": "Date",
    "series": [ "VIXClose" ]
  }
}

Use the library like this

dpview = ...

out = dpview(...)

PlotlyView