From 07bb1392f1e7e3a30f66467d8c2b72b1c6ad3e20 Mon Sep 17 00:00:00 2001 From: rozetko Date: Fri, 15 Jul 2022 18:54:34 +0300 Subject: [PATCH] merge master --- README.md | 35 ++++++++++++++++++++-- package.json | 6 ++-- src/components/Panel.tsx | 2 -- src/components/editors/UseMetricEditor.tsx | 10 +++---- src/grafana/data_processor.ts | 13 ++------ src/models/options/gaugeOptions.ts | 10 +++++-- src/models/series.ts | 11 +++++-- src/module.ts | 3 +- src/plugin.json | 10 +++++-- yarn.lock | 28 ++++++++--------- 10 files changed, 81 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index 8cb519f..8424396 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,35 @@ - Bar Chart (coming soon) - Gauge: dynamic thresholds and min / max - Gauge: conditional icons displaying +- Gauge: reversed direction + +## How to use + +1. Create a new panel and select Chartwerk as the visualization +2. Add queries with unique aliases +3. Go to the Options Tab and setup panel: + - Choose visualization type + - Select metric in the Value -> Metric dropdown (by default, the first metric is used) + +## Demo + +see [demo](https://grafana.corpglory.com/d/8vGyMypGz/demo-home?orgId=4) + +## Options [Gauge] + +- Visualization: + - Pod: option to select chart type +- Value: + - Metric: select metric query from dropdown +- Extemum: + - Min: + - type number for static minimum value OR + - enable "Use metric" toggle switch to select metric as minimun + - default value: 0 + - Max: + - type number for static maximum OR + - enable "Use metric" toggle switch to select metric as maximum + - default value: maximum of metric query ## Installation @@ -27,13 +56,13 @@ - Download Chartwerk panel ``` -wget https://gitlab.com/chartwerk/grafana-chartwerk-panel/uploads/117d957cd20276826cd092becb62dd30/corpglory-chartwerk-panel-0.4.0.zip +wget https://gitlab.com/chartwerk/grafana-chartwerk-panel/uploads/2284215a4dc8fb3bde1fd3b51bd99d3e/corpglory-chartwerk-panel-0.5.0.zip ``` - Unpack downloaded files ``` -unzip -u corpglory-chartwerk-panel-0.4.0.zip -d corpglory-chartwerk-panel +unzip -u corpglory-chartwerk-panel-0.4.1.zip -d corpglory-chartwerk-panel ``` - Restart grafana-server @@ -51,6 +80,6 @@ You can install Chartwerk panel to Grafana in Docker passing it as environment v ```bash docker run \ -p 3000:3000 \ - -e "GF_INSTALL_PLUGINS=https://gitlab.com/chartwerk/grafana-chartwerk-panel/uploads/117d957cd20276826cd092becb62dd30/corpglory-chartwerk-panel-0.4.0.zip;corpglory-chartwerk-panel" \ + -e "GF_INSTALL_PLUGINS=https://gitlab.com/chartwerk/grafana-chartwerk-panel/uploads/2284215a4dc8fb3bde1fd3b51bd99d3e/corpglory-chartwerk-panel-0.5.0.zip;corpglory-chartwerk-panel" \ grafana/grafana ``` diff --git a/package.json b/package.json index 365a2c0..5ad0aee 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "grafana-chartwerk-panel", - "version": "0.4.1", + "version": "0.5.0", "description": "Chartwerk Panel", "scripts": { "build": "grafana-toolkit plugin:build", @@ -14,8 +14,8 @@ "author": "CorpGlory Inc.", "license": "GPL V3", "devDependencies": { - "@chartwerk/gauge-pod": "0.5.0", - "@chartwerk/bar-pod": "0.5.0", + "@chartwerk/gauge-pod": "^0.6.2", + "@chartwerk/bar-pod": "^0.6.2", "@grafana/data": "latest", "@grafana/toolkit": "latest", "@grafana/ui": "latest", diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx index 8d98fff..481bf56 100644 --- a/src/components/Panel.tsx +++ b/src/components/Panel.tsx @@ -19,9 +19,7 @@ import * as _ from 'lodash'; interface Props extends PanelProps {} export function Panel({ options, data, width, height, timeZone, timeRange, onChangeTimeRange }: Props) { - console.log('panelOptions', options); const grafanaSeriesList = getGrafanaSeriesList(data, timeRange); - 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(() => { diff --git a/src/components/editors/UseMetricEditor.tsx b/src/components/editors/UseMetricEditor.tsx index 4018e26..d35b375 100644 --- a/src/components/editors/UseMetricEditor.tsx +++ b/src/components/editors/UseMetricEditor.tsx @@ -18,7 +18,7 @@ const fieldNamePickerSettings = { } as any; export function UseMetricEditor({ onChange, value, context }: StandardEditorProps) { - const config = value; + let config: UseMetricConfig = value; const onFieldChange = (field: keyof UseMetricConfig, value: any) => { // @ts-ignore @@ -31,22 +31,22 @@ export function UseMetricEditor({ onChange, value, context }: StandardEditorProp onFieldChange('useMetric', (evt.target as any).checked)} /> - {config.useMetric ? ( + {config?.useMetric ? ( onFieldChange('metricName', newVal)} item={fieldNamePickerSettings} /> ) : ( onFieldChange('value', (evt.target as any).value)} /> diff --git a/src/grafana/data_processor.ts b/src/grafana/data_processor.ts index 530bb6b..2be8ab0 100644 --- a/src/grafana/data_processor.ts +++ b/src/grafana/data_processor.ts @@ -2,16 +2,7 @@ import { applyNullInsertThreshold } from './null_insert'; import { find } from 'lodash'; -import { - DataFrame, - dateTime, - Field, - FieldType, - getColorForTheme, - getFieldDisplayName, - getTimeField, - TimeRange, -} from '@grafana/data'; +import { DataFrame, dateTime, Field, FieldType, getFieldDisplayName, getTimeField, TimeRange } from '@grafana/data'; import { colors } from '@grafana/ui'; import config from 'grafana/app/core/config'; import TimeSeries from 'grafana/app/core/time_series2'; @@ -91,7 +82,7 @@ export class DataProcessor { const series = new TimeSeries({ datapoints: datapoints || [], alias: alias, - color: getColorForTheme(color, config.theme), + color: config.theme.visualization.getColorByName(color), unit: field.config ? field.config.unit : undefined, dataFrameIndex, fieldIndex, diff --git a/src/models/options/gaugeOptions.ts b/src/models/options/gaugeOptions.ts index 6f7f4ec..5bc4698 100644 --- a/src/models/options/gaugeOptions.ts +++ b/src/models/options/gaugeOptions.ts @@ -21,7 +21,10 @@ export class GaugeOptions { } private _setMin(): void { - if (!this.grafanaOptions.gauge.min.useMetric) { + if (!this.grafanaOptions.gauge.min) { + throw new Error(`Min Config is not selected: [See options: Extremum -> Min]`); + } + if (!this.grafanaOptions.gauge.min?.useMetric) { this.minValue = this.grafanaOptions.gauge.min.value; return; } @@ -30,7 +33,10 @@ export class GaugeOptions { } private _setMax(): void { - if (!this.grafanaOptions.gauge.max.useMetric) { + if (!this.grafanaOptions.gauge.max) { + throw new Error(`Max Config is not selected: [See options: Extremum -> Max]`); + } + if (!this.grafanaOptions.gauge.max?.useMetric) { this.maxValue = this.grafanaOptions.gauge.max.value; return; } diff --git a/src/models/series.ts b/src/models/series.ts index 3155a82..d426763 100644 --- a/src/models/series.ts +++ b/src/models/series.ts @@ -9,9 +9,14 @@ export class Series { private _seriesList; private _selectedSerieName; - constructor(grafanaSeriesList: any, private gaugeValueOptions: ValueOptions) { - if (_.isEmpty(this.gaugeValueOptions.metricName)) { - throw new Error(`Value: metric is not selected. [See options: Value -> Metric]`); + constructor(grafanaSeriesList: any[], private gaugeValueOptions: ValueOptions) { + if (_.isEmpty(grafanaSeriesList)) { + throw new Error(`No metrics has been provided`); + } + if (_.isEmpty(this.gaugeValueOptions?.metricName)) { + const serie = _.first(grafanaSeriesList); + this._seriesList = this._updateSeriesListWithChartwerkParams([serie]); + return; } this._selectedSerieName = this.gaugeValueOptions.metricName; diff --git a/src/module.ts b/src/module.ts index a67da81..de92132 100644 --- a/src/module.ts +++ b/src/module.ts @@ -49,12 +49,12 @@ export const plugin = new PanelPlugin(Panel).setPanelOptions((buil category: ['Value'], showIf: (config) => config.visualizationType === Pod.GAUGE, }) - // TODO: defaults? .addCustomEditor({ id: 'min', name: 'Min', path: 'gauge.min', category: ['Extremum'], + defaultValue: { useMetric: false, value: 0 }, showIf: (config) => config.visualizationType === Pod.GAUGE, editor: UseMetricEditor as any, }) @@ -63,6 +63,7 @@ export const plugin = new PanelPlugin(Panel).setPanelOptions((buil name: 'Max', path: 'gauge.max', category: ['Extremum'], + defaultValue: { useMetric: false }, showIf: (config) => config.visualizationType === Pod.GAUGE, editor: UseMetricEditor as any, }) diff --git a/src/plugin.json b/src/plugin.json index a5440c2..56e2a86 100644 --- a/src/plugin.json +++ b/src/plugin.json @@ -4,7 +4,7 @@ "name": "Chartwerk", "id": "corpglory-chartwerk-panel", "info": { - "description": "", + "description": "Chartwerk panel with extended chart customization", "author": { "name": "CorpGlory Inc.", "url": "https://corpglory.com" @@ -17,11 +17,15 @@ "links": [ { "name": "Website", - "url": "https://gitlab.com/chartwerk/grafana-chartwerk-panel" + "url": "https://chartwerk.io/" }, { "name": "License", "url": "https://gitlab.com/chartwerk/grafana-chartwerk-panel/blob/main/LICENSE" + }, + { + "name": "Gitlab", + "url": "https://gitlab.com/chartwerk/grafana-chartwerk-panel/" } ], "screenshots": [ @@ -34,7 +38,7 @@ "updated": "%TODAY%" }, "dependencies": { - "grafanaDependency": ">=7.0.0", + "grafanaDependency": ">=8.3.0", "plugins": [] } } diff --git a/yarn.lock b/yarn.lock index d3c38f8..45d6183 100644 --- a/yarn.lock +++ b/yarn.lock @@ -902,27 +902,27 @@ resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.0.tgz#fe364f025ba74f6de6c837a84ef44bdb1d61e68f" integrity sha512-mgmE7XBYY/21erpzhexk4Cj1cyTQ9LzvnTxtzM17BJ7ERMNE6W72mQRo0I1Ud8eFJ+RVVIcBNhLFZ3GX4XFz5w== -"@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== +"@chartwerk/bar-pod@^0.6.2": + version "0.6.2" + resolved "https://registry.yarnpkg.com/@chartwerk/bar-pod/-/bar-pod-0.6.2.tgz#780089eed241795ff964639f38305cd2fa7a89d6" + integrity sha512-2cmuHjdNRo3230oLI1ZRjLANLKfuI5f299WcBAL0eP/6DF5NB8TNV+WrA/Lw+bt9ySop/CtIFEswKhD3Sy+0dA== dependencies: - "@chartwerk/core" "^0.5.0" + "@chartwerk/core" latest -"@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== +"@chartwerk/core@latest": + version "0.6.9" + resolved "https://registry.yarnpkg.com/@chartwerk/core/-/core-0.6.9.tgz#9d63844b5935de8362f6f3440159d85040116c60" + integrity sha512-9vv1LDAoR64iS2Nxdc2YqCmWNEf3tC2bULk20K8KFA6oVQmA1imdgFJSUv4cvm7Y9VVtPxlL1wDzIjGiLzeVcw== dependencies: 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== +"@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== dependencies: - "@chartwerk/core" "^0.5.0" + "@chartwerk/core" latest "@cnakazawa/watch@^1.0.3": version "1.0.4"