Browse Source

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

Bar pod init

See merge request chartwerk/grafana-chartwerk-panel!8
pull/2/head
rozetko 2 years ago
parent
commit
300ca7d784
  1. 3
      package.json
  2. 31
      src/components/Panel.tsx
  3. 25
      src/models/barSeries.ts
  4. 41
      src/models/options/barOptions.ts
  5. 4
      src/models/options/gaugeOptions.ts
  6. 9
      yarn.lock

3
package.json

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

31
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 { 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 { DataProcessor } from '../grafana/data_processor';
import { ChartwerkGaugePod } from '@chartwerk/gauge-pod'; import { ChartwerkGaugePod } from '@chartwerk/gauge-pod';
import { ChartwerkBarPod } from '@chartwerk/bar-pod';
import { PanelData, TimeRange, PanelProps } from '@grafana/data'; import { PanelData, TimeRange, PanelProps } from '@grafana/data';
@ -15,15 +18,29 @@ import * as _ from 'lodash';
interface Props extends PanelProps<PanelOptions> {} 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 grafanaSeriesList = getGrafanaSeriesList(data, timeRange);
const series = new Series(grafanaSeriesList, options.gauge.value).getChartwerkSeries();
const chartwerkOptions = new Options(grafanaSeriesList, options).getChartwerkOptions();
let chartContainer = useRef(null); let chartContainer = useRef(null);
// we request animation frame here because we need an existing DOM-element at the moment we render the pod // we request animation frame here because we need an existing DOM-element at the moment we render the pod
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
// TODO: switch / case pod type console.log('pod', options.visualizationType);
const pod = new ChartwerkGaugePod((chartContainer as any).current, series, chartwerkOptions); 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(); pod.render();
}); });

25
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,
};
});
}
}

41
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] });
}
},
};
}
}

4
src/models/options.ts → src/models/options/gaugeOptions.ts

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

9
yarn.lock

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

Loading…
Cancel
Save