Render simulation metrics in front end

[masonlr]

Description

Interactive time series from simulation outputs need to be rendered in the front end application.

Acceptance criteria

• [x] antvis time series renders on frontend view simulation page
• [x] y-axis variable selectable via legend

Out of scope

Implementation notes

• ant.design chart library: https://github.com/antvis/g2
• Angular implementation is https://viserjs.github.io/demo.html

g2 library is directly accessible from ng-alain

<g2-timeline [data]="offlineChartData" [height]="239" [padding]="[0, 0, 0, 0]" [titleMap]="{ y1: 'x variable', y2: 'y variable' }"></g2-timeline>

• API documentation is here: https://antv.alipay.com/zh-cn/g2/3.x/demo/line/basic.html

[masonlr]

Good set of demos are here: https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

It is possible to inject vanilla g2 code via the ts typings that come with @antv/g2.

The appropriate selector is

<g2-chart (render)="render($event)"></g2-chart>

with native-like code implemented in the (render) event.

[masonlr]

@antv/data-set will likely be important for on-the-fly restructuring of JSON data.

const { DataView } = DataSet;

    console.log('Before transform', this.metrics['data']);
    const dv = new DataView().source(this.metrics['data']);
    dv.transform({
      "type": 'fold',
      fields: ['"clockTime_0"', '"courantMax_0"'],
      key: 'type',
      value: 'value',
    });

Before fold:

[
  {"time": 0.00119048, "courantMax_0": 0, "clockTime_0": 0},
  {"time": 0.00258503, "courantMax_0": 0.0000113685, "clockTime_0": 0},
  {"time": 0.00422003, "courantMax_0": 0.0000284738, "clockTime_0": 0},
  {"time": 0.00612753, "courantMax_0": 0.000053846, "clockTime_0": 0},
  {"time": 0.00832115, "courantMax_0": 0.0000903561, "clockTime_0": 0},
  {"time": 0.0109261, "courantMax_0": 0.000140021, "clockTime_0": 0},
]

After fold:

[
  {"time": 0.00119048, "type": "clockTime_0", "value": 0},
  {"time": 0.00119048, "type": "courantMax_0", "value": 0},
  {"time": 0.00258503, "type": "clockTime_0", "value": 0},
  {"time": 0.00258503, "type": "courantMax_0", "value": 0.0000113685},
]