Merge branch 'bar-pod-vis' into 'main'

Bar pod init

See merge request chartwerk/grafana-chartwerk-panel!8

package.json

@@ -14,7 +14,8 @@
   "author": "CorpGlory Inc.",
   "license": "GPL V3",
   "devDependencies": {
-    "@chartwerk/gauge-pod": "0.6.2",
+    "@chartwerk/gauge-pod": "^0.6.2",
+    "@chartwerk/bar-pod": "^0.6.3",
     "@grafana/data": "latest",
     "@grafana/toolkit": "latest",
     "@grafana/ui": "latest",

src/components/Panel.tsx

@@ -1,11 +1,14 @@
-import { Options } from '../models/options';
+import { GaugeOptions } from '../models/options/gaugeOptions';
+import { BarOptions } from '../models/options/barOptions';
 import { Series } from '../models/series';
+import { BarSeries } from '../models/barSeries';
 
-import { PanelOptions } from '../types';
+import { PanelOptions, Pod } from '../types';
 
 import { DataProcessor } from '../grafana/data_processor';
 
 import { ChartwerkGaugePod } from '@chartwerk/gauge-pod';
+import { ChartwerkBarPod } from '@chartwerk/bar-pod';
 
 import { PanelData, TimeRange, PanelProps } from '@grafana/data';
 
@@ -15,15 +18,29 @@ import * as _ from 'lodash';
 
 interface Props extends PanelProps<PanelOptions> {}
 
-export function Panel({ options, data, width, height, timeZone, timeRange, onChangeTimeRange }: Props) {
+export function Panel({ options, data, width, height, timeRange, onChangeTimeRange }: Props) {
   const grafanaSeriesList = getGrafanaSeriesList(data, timeRange);
-  const series = new Series(grafanaSeriesList, options.gauge.value).getChartwerkSeries();
-  const chartwerkOptions = new Options(grafanaSeriesList, options).getChartwerkOptions();
   let chartContainer = useRef(null);
+
   // we request animation frame here because we need an existing DOM-element at the moment we render the pod
   window.requestAnimationFrame(() => {
-    // TODO: switch / case pod type
-    const pod = new ChartwerkGaugePod((chartContainer as any).current, series, chartwerkOptions);
+    console.log('pod', options.visualizationType);
+    let pod;
+    switch (options.visualizationType) {
+      case Pod.GAUGE:
+        const series = new Series(grafanaSeriesList, options.gauge.value).getChartwerkSeries();
+        const chartwerkGaugeOptions = new GaugeOptions(grafanaSeriesList, options).getChartwerkOptions();
+        pod = new ChartwerkGaugePod((chartContainer as any).current, series, chartwerkGaugeOptions);
+        break;
+      case Pod.BAR:
+        const barSeries = new BarSeries(grafanaSeriesList).getChartwerkSeries();
+        const chartwerkBarOptions = new BarOptions(grafanaSeriesList, onChangeTimeRange).getChartwerkOptions();
+        console.log('data', barSeries, chartwerkBarOptions);
+        pod = new ChartwerkBarPod((chartContainer as any).current, barSeries, chartwerkBarOptions);
+        break;
+      default:
+        throw new Error(`Unknown visualization type: ${options.visualizationType}`);
+    }
     pod.render();
   });
 

src/models/barSeries.ts

@@ -0,0 +1,25 @@
+import * as _ from 'lodash';
+
+// Convert Grafana series into Chartwerk series
+export class BarSeries {
+  private _seriesList;
+
+  constructor(grafanaSeriesList: any) {
+    this._seriesList = this._updateSeriesListWithChartwerkParams(grafanaSeriesList);
+  }
+
+  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(_.clone(row))),
+        alias: serie.label,
+      };
+    });
+  }
+}

src/models/options/barOptions.ts

@@ -0,0 +1,41 @@
+import { AbsoluteTimeRange } from '@grafana/data';
+
+
+// Convert Grafana options into Chartwerk Bar options
+export class BarOptions {
+  constructor(private grafanaSeriesList: any[], private changeTimeRange: (timeRange: AbsoluteTimeRange) => void) {
+    console.log(this.grafanaSeriesList)
+  }
+
+  getChartwerkOptions(): any {
+    return {
+      axis: {
+        x: {
+          format: 'time',
+        },
+        y: {
+          format: 'custom',
+          range: [-100, 100],
+          valueFormatter: (value: any) => {
+            return value + '%';
+          },
+        },
+      },
+      stacked: false,
+      matching: false,
+      zoomEvents: {
+        scroll: { zoom: { isActive: false }, pan: { isActive: false } },
+        mouse: { doubleClick: { isActive: false } },
+      },
+      annotations: [
+        { key: 'm-1', color: 'red' },
+        { key: 'm-2', color: 'green' },
+      ],
+      eventsCallbacks: {
+        zoomIn: (range: any) => {
+          this.changeTimeRange({ from: range[0][0], to: range[0][1] });
+        }
+      },
+    };
+  }
+}

src/models/options/gaugeOptions.ts

@@ -1,13 +1,13 @@
 import { PanelOptions, Aggregation, Threshold, Icon, IconPosition, Condition } from 'types';
 
-import { filterMetricListByAlias, getAggregatedValueFromSerie } from '../utils';
+import { filterMetricListByAlias, getAggregatedValueFromSerie } from '../../utils';
 
 import { getValueFormat } from '@grafana/data';
 
 import _ from 'lodash';
 
 // Convert Grafana options into Chartwerk Gauge options
-export class Options {
+export class GaugeOptions {
   private minValue: number | undefined;
   private maxValue: number | undefined;
   private thresholds: Array<{ value: number; color: string }> = [];

yarn.lock

@@ -902,6 +902,13 @@
   resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.0.tgz#fe364f025ba74f6de6c837a84ef44bdb1d61e68f"
   integrity sha512-mgmE7XBYY/21erpzhexk4Cj1cyTQ9LzvnTxtzM17BJ7ERMNE6W72mQRo0I1Ud8eFJ+RVVIcBNhLFZ3GX4XFz5w==
 
+"@chartwerk/bar-pod@^0.6.3":
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/@chartwerk/bar-pod/-/bar-pod-0.6.3.tgz#e5ef980cd51d59050949124cefc55d20039b5567"
+  integrity sha512-mspgcW3YhCiWQw371+7IOFAonIlrNtX9IhAo1zPOTdXWFHkb5JvcR/hnqhOBAenM2zc7xjZKeih/wkbmIqXjHw==
+  dependencies:
+    "@chartwerk/core" latest
+
 "@chartwerk/core@latest":
   version "0.6.9"
   resolved "https://registry.yarnpkg.com/@chartwerk/core/-/core-0.6.9.tgz#9d63844b5935de8362f6f3440159d85040116c60"
@@ -910,7 +917,7 @@
     d3 "^5.7.2"
     lodash "^4.14.149"
 
-"@chartwerk/gauge-pod@0.6.2":
+"@chartwerk/gauge-pod@^0.6.2":
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/@chartwerk/gauge-pod/-/gauge-pod-0.6.2.tgz#7725394cd65acaaaa81cabb93a0b03e146c10362"
   integrity sha512-L26hsvHCJruxfIJjXBsgcw2vszKMcMYcsXLGLy9Gy02hETpHR1pTKosgXPEpQqvQBRz+5WX+aL3x6yao/Elg/Q==