diff --git a/package.json b/package.json index 8c56f20..365a2c0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "grafana-chartwerk-panel", - "version": "0.4.0", + "version": "0.4.1", "description": "Chartwerk Panel", "scripts": { "build": "grafana-toolkit plugin:build", @@ -14,7 +14,8 @@ "author": "CorpGlory Inc.", "license": "GPL V3", "devDependencies": { - "@chartwerk/gauge-pod": "0.4.1", + "@chartwerk/gauge-pod": "0.5.0", + "@chartwerk/bar-pod": "0.5.0", "@grafana/data": "latest", "@grafana/toolkit": "latest", "@grafana/ui": "latest", diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx index 50213a2..c0070cb 100644 --- a/src/components/Panel.tsx +++ b/src/components/Panel.tsx @@ -1,11 +1,12 @@ import { Options } from '../models/options'; import { Series } from '../models/series'; -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'; @@ -16,27 +17,37 @@ import * as _ from 'lodash'; interface Props extends PanelProps {} export function Panel({ options, data, width, height, timeZone, timeRange, onChangeTimeRange }: Props) { - console.log('options', options); + const panelOptions = fillGrafanaOptionsWithDefaults(options); + console.log('panelOptions', panelOptions); const grafanaSeriesList = getGrafanaSeriesList(data, timeRange); - const series = new Series(grafanaSeriesList, options.gauge.value).getChartwerkSeries(); + const series = new Series(grafanaSeriesList, panelOptions.gauge.value).getChartwerkSeries(); console.log('series', series); - const chartwerkOptions = new Options(grafanaSeriesList, options).getChartwerkOptions(); + const chartwerkOptions = new Options(grafanaSeriesList, panelOptions).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); + let pod; + switch (panelOptions.visualizationType) { + case Pod.GAUGE: + pod = new ChartwerkGaugePod((chartContainer as any).current, series, chartwerkOptions); + break; + case Pod.BAR: + pod = new ChartwerkBarPod((chartContainer as any).current, series, chartwerkOptions); + break; + default: + throw new Error(`Unknown visualization type: ${panelOptions.visualizationType}`); + } pod.render(); }); - const isLinkActive = !_.isEmpty(options.gauge.link); + const isLinkActive = !_.isEmpty(panelOptions.gauge.link); const chartClickHandler = (event: React.MouseEvent) => { event.preventDefault(); if (!isLinkActive) { return; } - window.open(options.gauge.link, '_self'); + window.open(panelOptions.gauge.link, '_self'); }; return ( @@ -59,3 +70,22 @@ function getGrafanaSeriesList(grafanaData: PanelData, timeRange: TimeRange): any range: timeRange, }); } + +function fillGrafanaOptionsWithDefaults(options: PanelOptions): PanelOptions { + const defaults = { + gauge: { + min: {}, + max: {}, + value: {}, + valueSize: 20, + reversed: false, + thresholds: { + arcBackground: 'gray', + defaultColor: 'green', + thresholds: [], + }, + icons: [], + }, + }; + return _.defaultsDeep(options, defaults); +} diff --git a/yarn.lock b/yarn.lock index acc72c5..d3c38f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -902,16 +902,27 @@ resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.0.tgz#fe364f025ba74f6de6c837a84ef44bdb1d61e68f" integrity sha512-mgmE7XBYY/21erpzhexk4Cj1cyTQ9LzvnTxtzM17BJ7ERMNE6W72mQRo0I1Ud8eFJ+RVVIcBNhLFZ3GX4XFz5w== -"@chartwerk/core@github:chartwerk/core#a30ca83842247c79969deaaacfc7fb444a60cefb": - version "0.1.0" - resolved "https://codeload.github.com/chartwerk/core/tar.gz/a30ca83842247c79969deaaacfc7fb444a60cefb" +"@chartwerk/bar-pod@0.5.0": + version "0.5.0" + resolved "https://registry.yarnpkg.com/@chartwerk/bar-pod/-/bar-pod-0.5.0.tgz#8550800fa33f2ea49285a3a3a36c04a802d14d9b" + integrity sha512-qZIq0Eq5VDhtcrKusL/gKRRNr4g1tDIRQ0uZd6hGG8LYeT8s5AUG1tYZNNrROutMTKvvaSg56XoQKBY9xvZZaA== + dependencies: + "@chartwerk/core" "^0.5.0" -"@chartwerk/gauge-pod@0.4.1": - version "0.4.1" - resolved "https://registry.yarnpkg.com/@chartwerk/gauge-pod/-/gauge-pod-0.4.1.tgz#ac346d777f72ec855e51f5f7c8c01e12a1e1cb5c" - integrity sha512-Ik6Dr4AJP/L+7YjZVJ9W19ujXXB5/b5A3Qxboi491hrXYlqMrfAx/LoyfDAtSEmGNhK5qpT8XLluzuHVcgTY4g== +"@chartwerk/core@^0.5.0": + version "0.5.0" + resolved "https://registry.yarnpkg.com/@chartwerk/core/-/core-0.5.0.tgz#7d641a5ee3ec9ca588f5b06a0504659113745636" + integrity sha512-YFqBJ8WFb83yZO2VR+XVRSMX3+ErGcGcdHy5aLeLzOqBW09gO7NENdzlCWXQLsGSx+f9RK2GcSTM4z0Q7OEDfA== dependencies: - "@chartwerk/core" "github:chartwerk/core#a30ca83842247c79969deaaacfc7fb444a60cefb" + d3 "^5.7.2" + lodash "^4.14.149" + +"@chartwerk/gauge-pod@0.5.0": + version "0.5.0" + resolved "https://registry.yarnpkg.com/@chartwerk/gauge-pod/-/gauge-pod-0.5.0.tgz#4bf1022b5ae3b9536ef3a5bcb0f872fbd9c685d4" + integrity sha512-x+MK737RB8h3c42GJUZoGDKfOcdtwCP58KLdxctzVzH9b0oHdnEGO+BE5M/EwPuoSq1H5F4DqBg8NCLfIVTlvw== + dependencies: + "@chartwerk/core" "^0.5.0" "@cnakazawa/watch@^1.0.3": version "1.0.4" @@ -4811,6 +4822,43 @@ d3@5.15.0: d3-voronoi "1" d3-zoom "1" +d3@^5.7.2: + version "5.16.0" + resolved "https://registry.yarnpkg.com/d3/-/d3-5.16.0.tgz#9c5e8d3b56403c79d4ed42fbd62f6113f199c877" + integrity sha512-4PL5hHaHwX4m7Zr1UapXW23apo6pexCgdetdJ5kTmADpG/7T9Gkxw0M0tf/pjoB63ezCCm0u5UaFYy2aMt0Mcw== + dependencies: + d3-array "1" + d3-axis "1" + d3-brush "1" + d3-chord "1" + d3-collection "1" + d3-color "1" + d3-contour "1" + d3-dispatch "1" + d3-drag "1" + d3-dsv "1" + d3-ease "1" + d3-fetch "1" + d3-force "1" + d3-format "1" + d3-geo "1" + d3-hierarchy "1" + d3-interpolate "1" + d3-path "1" + d3-polygon "1" + d3-quadtree "1" + d3-random "1" + d3-scale "2" + d3-scale-chromatic "1" + d3-selection "1" + d3-shape "1" + d3-time "1" + d3-time-format "2" + d3-timer "1" + d3-transition "1" + d3-voronoi "1" + d3-zoom "1" + dashdash@^1.12.0: version "1.14.1" resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0" @@ -8030,7 +8078,7 @@ lodash.uniq@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= -lodash@4.17.21, lodash@^4.1.1, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.7.0: +lodash@4.17.21, lodash@^4.1.1, lodash@^4.14.149, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.7.0: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==