add models to parse data and options

src/components/Panel.tsx

@@ -1,4 +1,6 @@
 import { DataProcessor } from '../grafana/data_processor';
+import { Options } from '../models/options';
+import { Series } from '../models/series';
 
 import { PanelOptions } from '../types';
 
@@ -14,40 +16,21 @@ interface Props extends PanelProps<PanelOptions> {}
 
 export function Panel({ options, data, width, height, timeZone, timeRange, onChangeTimeRange }: Props) {
   console.log('options', options);
-  console.log('data', data);
+  const series = new Series(data, timeRange).getChartwerkSeries();
-  const processor = new DataProcessor({});
+  console.log('series', series);
-  const seriesList = processor.getSeriesList({
+  const chartwerkOptions = new Options(options).getChartwerkOptions();
-    dataList: data.series,
-    range: timeRange,
-  });
-  const chwSeriesList = updateSeriesListWithChartwerkParams(seriesList);
-  console.log('seriesList', chwSeriesList);
-  let chartContainer = useRef(null);
-  // TODO: use models to parse options and series
 
+  let chartContainer = useRef(null);
   // we request animation frame here because at the moment we need an existing DOM-element at the moment we render the pod
   window.requestAnimationFrame(() => {
     // TODO: pass datapoints
     // TODO: pass options
     // TODO: switch / case pod type
-    const pod = new ChartwerkGaugePod((chartContainer as any).current, chwSeriesList, {
+    const pod = new ChartwerkGaugePod(
-      maxValue: options.gauge.max.value || 0,
+      (chartContainer as any).current,
-      minValue: options.gauge.min.value || 0,
+      series,
-      valueFormatter: (val) => val.toFixed(2),
+      chartwerkOptions
-      defaultColor: 'green',
+    );
-      stops: [
-        {
-          color: 'green',
-          value: 100,
-        },
-        {
-          color: 'orange',
-          value: 140,
-        },
-      ],
-      // @ts-ignore
-      icons: [{ src: 'https://cityhost.ua/upload_img/blog5ef308ea5529c_trash2-01.jpg', position: 'middle', size: 30 }],
-    });
     pod.render();
   });
   return (
@@ -60,14 +43,3 @@ export function Panel({ options, data, width, height, timeZone, timeRange, onCha
     ></div>
   );
 }
-
-function updateSeriesListWithChartwerkParams(series: any[]): any[] {
-  return _.map(series, (serie: any, idx: number) => {
-    return {
-      target: serie.alias,
-      color: serie.color,
-      datapoints: _.map(serie.datapoints, (row) => _.reverse(row)),
-      alias: serie.label,
-    };
-  });
-}

src/models/options.ts

@@ -0,0 +1,27 @@
+import { PanelOptions } from 'types';
+
+// Convert Grafana options into Chartwerk options
+export class Options {
+  constructor(private grafanaOptions: PanelOptions) {}
+
+  public getChartwerkOptions(): any {
+    return {
+      maxValue: this.grafanaOptions.gauge.max.value || 0,
+      minValue: this.grafanaOptions.gauge.min.value || 0,
+      valueFormatter: (val: any) => val.toFixed(2),
+      defaultColor: 'green',
+      stops: [
+        {
+          color: 'green',
+          value: 100,
+        },
+        {
+          color: 'orange',
+          value: 140,
+        },
+      ],
+      // @ts-ignore
+      icons: [{ src: 'https://cityhost.ua/upload_img/blog5ef308ea5529c_trash2-01.jpg', position: 'middle', size: 30 }],
+    };
+  }
+}

src/models/series.ts

@@ -0,0 +1,34 @@
+import { PanelData, TimeRange } from '@grafana/data';
+import { DataProcessor } from '../grafana/data_processor';
+
+import * as _ from 'lodash';
+
+// Convert Grafana options into Chartwerk options
+export class Series {
+  private processor; 
+  private _seriesList;
+
+  constructor(private grafanaData: PanelData, timeRange: TimeRange) {
+    this.processor = new DataProcessor({});
+    const seriesList = this.processor.getSeriesList({
+      dataList: grafanaData.series,
+      range: timeRange,
+    });
+    this._seriesList = this._updateSeriesListWithChartwerkParams(seriesList);
+  }
+
+  public getChartwerkSeries(): any[] {
+    return this._seriesList;
+  }
+
+  private _updateSeriesListWithChartwerkParams(series: any[]): any[] {
+    return _.map(series, (serie: any, idx: number) => {
+      return {
+        target: serie.alias,
+        color: serie.color,
+        datapoints: _.map(serie.datapoints, (row) => _.reverse(row)),
+        alias: serie.label,
+      };
+    });
+  }
+}