[EPIC] Refactor

[anuveyatsu]

We have a beautiful, clean dashboard system that is reusable and clean and with nice sublibraries which are well document :smile:

Tasks

• [x] (?) Create React Dashboard
• [x] Create var config in city-indicators
• [x] Put datasets into redux and load (i.e. have dp.json and (?) inline data on resources. Do this with data.js if possible
• [x] Iterate through widget list and create DashboardWidget and pass in the view object
  • [x] Create React DashboardWidget which is a container component - does not much for now (stubbed)
  • [x] It binds to element in the page
  • [x] It does nothing much more
• [x] Wire up the DashboardWidget to compile its data and render
  • [x] And Vega widget for now (use v4)

Bonus

• [x] Create DashboardWidget for the "Figure widgets" (i.e. showing a headline number on the left)

Factor out code to a separate repo

• [x] Create a repo /datahq/dashboard-js
• [x] Bundle the app and import in city-indicators

Analysis

Mermaid graph:

graph LR

viz --> demo
import --> demo
core --> demo

What do we want?

• Simple to understand code
• We don't want to have to mess with source data packages to change views ...

Algorithm:

0. [Dashboard set up (either in html of config) - layout + widgets + their data]
1. Widget [Graph with controls] React div with svg etc within it (imagine it as plotly setup). What does the react div need?

2. [Compiled] Data, view spec, metadata e.g. title, source etc [transform? really part of the view spec]

   • might consider a precursor object which is raw data (raw data pointer), transform, view => compiled data

     
     <Widget
     [compiled]data
     viewspec
     metadata

   = [compiled] data package view ...
   [noncompiled] data resource = one issue atm is how do we deal with mulitple data packages

   
   
   * Central "DB" => computing compiled data for each widget

What do we need

• data package loading => data.js
  • => building with browserify
• central db of loaded db => redux with loading (local data package cache)
  • support in data.js for "compiled data"
• Widget <= has most of the intelligence
  • datapackage-render-js
  • graphing library (e.g. pl)

Graph rendering library

• datapackage-render-js
• Library of render widget (very simple)
  • very dumb components

FrictionlessWidget(compiled data package view)
  newspec = renderjs.convertViewSpec(...)
  if this.view.spec.type = plotly {
      new PlotlyChart(newspec, layout etc)
  }

Overall app

var config = {
  widgets: [
    {
      elementId / data-id: ...
      view: {
        metadata:
        resources: rule for creating compiled list of resources. [ { datasetId: ..., resourceId: ..., transform: ...} ]
        specType: 
        viewspec: 
      }
    },
    {

    },
  ]
  datasets: [
    list of data package urls ...
  ]
}

function compileResource(datasetId, resourceId, transform, datasets)

var dash = new Dashboard(config)

Widget
  view
  data [= compiled data]
  metadata

[anuveyatsu]

FIXED - see it live https://london.datahub.io/

[rufuspollock]

@anuveyatsu :clap: :clap: can you provide a bit more detail about e.g. where the new repos are, which README i should look at to understand how it works etc etc :smile:

[anuveyatsu]

@rufuspollock there is a short README in this repo which can help if you want to add a new widget. I think it should give you a sense about how it works but I'll open an issue for adding more information about it :+1: