How to add new chart type

Purescript

To install purescript I usually do

• Install nvm or nvm-windows
• Install node@5.10.1 (unfortunately we sticked with 0.8.5 purescript and it doesn't work with node@6.*)
• npm install -g bower gulp purescript pulp purescript-psa

Alternatively you can use node@6.* with specific version of purescript

• npm install purescript@node6-0.8.5

To mess around with echarts

• Here is full documentation of echarts 2.* we use in SlamData. Note ChartTypes bullet in left menu.
• Here is repository with low level purescript bindings.
• Echarts library doesn't use commonjs modules, so, we embed it directly through <script> tag.
• Please, look at examples folder and try run them using gulp, replace something etc.

purescript-echarts basically introduces newtypes for any kind of objects from echarts library. Because newtypes are immutable and can't be easily modified (you need unwrap record and then wrap it again) there are default objects for almost everything, e.g. axisLabelDefault, titleDefault etc. When one uses setOptions these newtypes are encoded to json and then sent to echarts setOptioin method.

We use purescript-halogen as our frontend framework

• It's located here
• Please, install it and look through all examples.

purescript-halogen is fancy frp library, it uses abstraction of component almost identical with one from ReactJS, but much more typesafe. Every component has a state, a query algebra, render function and evaluation. Render function takes state and returns html tagged with event listeners. These listeners basically produce streams of Algebra Units, those signals then aggregated and interpreted to underlying monad. We use Aff as underlying monad in SlamData. Evaluation function takes a query and modifies state. Internal halogen's logic updates html when state is updated.

Wrap wrapper

• purescript-halogen can embed external modules (like this). We use purescript-halogen-echarts wrapper, it's here
• Again, please install this library and run examples. Look through code.

A bit about SlamData

• We use concept of card. Card is a whitebox that takes an input and produces output. Inputs and outputs have different fields but the most important one is SlamData.Workspace.Сard.Port.
• Chart card (SlamData.Workspace.Card.Chart) takes ChartOptions as input and produces Blocked as output. That is chart card can't have successors.
• Almost all modules involved in rendering live in SlamData.Workspace.Card.Chart package.
• Available chart types is cases in ADT living here SlamData.Workspace.Card.Chart.ChartType.

How all this stuff works

• Viz card takes an datasource port as input.
• Viz card requests Quasar for sample
• Viz card analyze this sample and decides if it can produce any kind of chart.
• If it's possible Viz presents list of fields filled with options for projections.
• User chooses projections and some other parameters (like label angle)
• Viz sends projections, datasource, selected ChartType and other parameters to Chart card
• Chart card requests Quasar for everything in that datasource.
• Chart projects returned json using projections from Viz card
• Chart does magic to make rows fitting echarts model.
• Chart updates echarts model.

How Viz analyzes json

• Actually there are nice comments in SlamData.Workspace.Chart.Axis :)
• But just for common understanding it tries to build list of axes. These axes could be three different kinds: value, category and time. All these axes are generally lists of possibly missing values. And those values have meaning. Like money, number, percent etc.

How I would add new chart type.

• Make this chart in echarts
• Play with it in purescript-echarts
• Play with it in purescript-halogen-echarts
• See what kind of axes may be used by this chart.
• Add new entry to ChartType
• Handle this options in Viz card (provide additional SlamData.Workspace.Card.Viz.Component.renderChartTypeSelector.
• Modify configure function in same module. (At first I'd handle only one category and value axes)
• Handle new ChartType entry in SlamData.Workspace.Card.ChartOptions.buildOptions_
• Add new module like SlamData.Workspace.Card.ChartOptions.Foo where Foo your chart type.
• Extract, aggregate and make axes fitting purescript-echarts Option
• Add more axes.
• Modify configure again
• Modify Foo module again.