chartwerk
/
grafana-chartwerk-panel
4
0
Fork 0
Code Issues 2 Pull Requests Projects Releases 1 Wiki Activity
Labels Milestones
New Pull Request

Gauge: Additional Metric #3

Merged
rozetko merged 6 commits from gauge-additional-metric into main 9 months ago
Conversation 0 Commits 6 Files Changed 5
5 changed files with 224 additions and 82 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 135
      src/components/Panel.tsx
  2. 38
      src/models/options/gaugeOptions.ts
  3. 69
      src/module.ts
  4. 9
      src/types.ts
  5. 31
      src/utils.ts

135
src/components/Panel.tsx
Unescape View File

@ -4,55 +4,123 @@ import { Series } from '../models/series';
import { BarSeries } from '../models/barSeries';
import { PanelOptions, Pod } from '../types';
import { DataProcessor } from '../grafana/data_processor';
import { formatValue, getGrafanaSeriesList, getLastMetricValue } from '../utils';
import { ChartwerkGaugePod } from '@chartwerk/gauge-pod';
import { ChartwerkBarPod } from '@chartwerk/bar-pod';
import { PanelData, TimeRange, PanelProps } from '@grafana/data';
import { PanelProps } from '@grafana/data';
import { VizLegend } from '@grafana/ui';
import { LegendDisplayMode } from '@grafana/schema';
import React, { useCallback, useRef } from 'react';
import React, { useRef, useEffect, useMemo } from 'react';
import { css } from 'emotion';
import * as _ from 'lodash';
interface Props extends PanelProps<PanelOptions> {}
export function Panel({ options, data, width, height, timeRange, onChangeTimeRange, replaceVariables }: Props) {
const grafanaSeriesList = getGrafanaSeriesList(data, timeRange);
let chartContainer = useRef(null);
const grafanaSeriesList = useMemo(() => getGrafanaSeriesList(data, timeRange), [data, timeRange]);
const podContainerRef = useRef<HTMLDivElement>(null);
const podContainer = useMemo(() => {
const chartClickHandler = (event: React.MouseEvent<HTMLDivElement>) => {
event.preventDefault();
if (options.gauge.link === undefined || options.gauge.link === '') {
return;
}
const link = replaceVariables(options.gauge.link);
window.open(link, '_self');
};
// we request animation frame here because we need an existing DOM-element at the moment we render the pod
window.requestAnimationFrame(() => {
const isLinkActive = options.gauge.link !== undefined && options.gauge.link !== '';
let containerHeight = height;
if (options.visualizationType === Pod.BAR) {
containerHeight = height - 20;
}
if (options.visualizationType === Pod.GAUGE && options.gauge.additionalInfo.display) {
containerHeight = height - options.gauge.additionalInfo.size - 8;
}
return (
<div
ref={podContainerRef}
className={css`
width: ${width}px;
height: ${containerHeight}px;
cursor: ${isLinkActive ? 'pointer' : 'default'};
`}
onClick={chartClickHandler}
></div>
);
}, [width, height, options, replaceVariables]);
useEffect(() => {
let pod;
if (podContainerRef.current === null) {
return;
}
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);
pod = new ChartwerkGaugePod(podContainerRef.current, series, chartwerkGaugeOptions);
break;
case Pod.BAR:
const barSeries = new BarSeries(grafanaSeriesList).getChartwerkSeries();
const chartwerkBarOptions = new BarOptions(grafanaSeriesList, onChangeTimeRange).getChartwerkOptions();
pod = new ChartwerkBarPod((chartContainer as any).current, barSeries, chartwerkBarOptions);
pod = new ChartwerkBarPod(podContainerRef.current, barSeries, chartwerkBarOptions);
break;
default:
throw new Error(`Unknown visualization type: ${options.visualizationType}`);
console.warn(`Unknown visualization type: ${options.visualizationType}`);
return;
}
pod.render();
});
}, [podContainer, grafanaSeriesList, onChangeTimeRange, options]);
const isLinkActive = !_.isEmpty(options.gauge.link);
const chartClickHandler = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
event.preventDefault();
if (!isLinkActive) {
return;
switch (options.visualizationType) {
case Pod.GAUGE:
let additionalInfo;
const additionalInfoConfig = options.gauge.additionalInfo;
if (additionalInfoConfig.display) {
// TODO: move `useMetric` handling to utils, as it's duplicated in gaugeOptions.ts
let value: number | undefined = undefined;
if (!additionalInfoConfig.value?.useMetric) {
value = additionalInfoConfig.value.value;
} else {
if (!_.isEmpty(additionalInfoConfig.value.metricName)) {
const aggregatedValue = getLastMetricValue(
grafanaSeriesList,
additionalInfoConfig.value.metricName,
'Additional Info'
);
value = aggregatedValue !== null ? aggregatedValue : undefined;
}
const link = replaceVariables(options.gauge.link as string);
window.open(link, '_self');
}, [options.gauge.link]);
}
additionalInfo = (
<div
className={css`
width: ${width}px;
height: ${additionalInfoConfig.size + 8}px;
font-size: ${additionalInfoConfig.size}px;
color: ${additionalInfoConfig.color};
display: flex;
justify-content: center;
align-items: center;
`}
>
{additionalInfoConfig.prefix} {value !== undefined ? formatValue(value, additionalInfoConfig) : '-'}
</div>
);
}
return (
<div>
{podContainer}
{additionalInfo && additionalInfo}
</div>
);
case Pod.BAR:
const legendItems = _.map(grafanaSeriesList, (serie) => {
return {
label: serie.alias,
@ -60,29 +128,16 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
yAxis: 1,
};
});
const chartHeight = options.visualizationType !== Pod.GAUGE ? height - 20 : height;
return (
<div>
<div
ref={chartContainer}
className={css`
width: ${width}px;
height: ${chartHeight}px;
cursor: ${isLinkActive ? 'pointer' : 'default'};
`}
onClick={chartClickHandler}
></div>
{options.visualizationType !== Pod.GAUGE && (
{podContainer}
<VizLegend placement={'bottom'} items={legendItems} displayMode={LegendDisplayMode.List} />
)}
</div>
);
}
function getGrafanaSeriesList(grafanaData: PanelData, timeRange: TimeRange): any[] {
const processor = new DataProcessor({});
return processor.getSeriesList({
dataList: grafanaData.series,
range: timeRange,
});
default:
console.warn(`Unknown visualization type: ${options.visualizationType}`);
return <div>This visualization is not supported</div>;
}
}

38
src/models/options/gaugeOptions.ts
Unescape View File

@ -1,8 +1,6 @@
import { PanelOptions, Aggregation, Threshold, Icon, IconPosition, Condition } from 'types';
import { PanelOptions, Threshold, Icon, IconPosition, Condition } from 'types';
import { filterMetricListByAlias, getAggregatedValueFromSerie } from '../../utils';
import { getValueFormat } from '@grafana/data';
import { formatValue, getLastMetricValue } from '../../utils';
import _ from 'lodash';
@ -28,7 +26,7 @@ export class GaugeOptions {
this.minValue = this.grafanaOptions.gauge.min.value;
return;
}
const aggregatedValue = this.getLastValueFromMetrics(this.grafanaOptions.gauge.min.metricName, 'Min');
const aggregatedValue = getLastMetricValue(this.grafanaSeriesList, this.grafanaOptions.gauge.min.metricName, 'Min');
this.minValue = aggregatedValue ? aggregatedValue : undefined;
}
@ -40,7 +38,7 @@ export class GaugeOptions {
this.maxValue = this.grafanaOptions.gauge.max.value;
return;
}
const aggregatedValue = this.getLastValueFromMetrics(this.grafanaOptions.gauge.max.metricName, 'Max');
const aggregatedValue = getLastMetricValue(this.grafanaSeriesList, this.grafanaOptions.gauge.max.metricName, 'Max');
this.maxValue = aggregatedValue ? aggregatedValue : undefined;
}
@ -55,7 +53,7 @@ export class GaugeOptions {
private _setThreshold(threshold: Threshold, idx: number): void {
const value = threshold.useMetric
? this.getLastValueFromMetrics(threshold.metricName, `Threshold ${idx + 1}`)
? getLastMetricValue(this.grafanaSeriesList, threshold.metricName, `Threshold ${idx + 1}`)
: threshold.value;
if (value === null || value === undefined) {
// TODO: may be throw an error
@ -67,12 +65,6 @@ export class GaugeOptions {
});
}
private _valueFormatter(value: number): string {
const suffix = getValueFormat(this.grafanaOptions.gauge.unit)(0)?.suffix || '';
const decimals = _.isNumber(this.grafanaOptions.gauge.decimals) ? this.grafanaOptions.gauge.decimals : 2;
return `${value.toFixed(decimals)} ${suffix}`;
}
private _setIcons(): void {
if (_.isEmpty(this.grafanaOptions.gauge.icons)) {
return;
@ -100,12 +92,16 @@ export class GaugeOptions {
// check each condition and return false if something goes wrong
for (let [conditionIdx, metric] of icon.metrics.entries()) {
const value = this.getLastValueFromMetrics(metric, `Icon ${iconIdx + 1}, Condition ${conditionIdx + 1}`);
const value = getLastMetricValue(
this.grafanaSeriesList,
metric,
`Icon ${iconIdx + 1}, Condition ${conditionIdx + 1}`
);
if (value === null || value === undefined) {
// TODO: may be throw an error
return false;
}
if (!this.checkIconCondition(value, icon.values[conditionIdx], icon.conditions[conditionIdx])) {
if (!this._checkIconCondition(value, icon.values[conditionIdx], icon.conditions[conditionIdx])) {
return false;
}
}
@ -113,7 +109,7 @@ export class GaugeOptions {
return true;
}
private checkIconCondition(metricValue: number, inputValue: number, condition: Condition): boolean {
private _checkIconCondition(metricValue: number, inputValue: number, condition: Condition): boolean {
if (inputValue === undefined || inputValue === null) {
return true;
}
@ -151,7 +147,7 @@ export class GaugeOptions {
return {
maxValue: this.maxValue,
minValue: this.minValue,
valueFormatter: (val: number) => this._valueFormatter(val),
valueFormatter: (val: number) => formatValue(val, this.grafanaOptions.gauge),
defaultColor: this.grafanaOptions.gauge.thresholds.defaultColor,
valueArcBackgroundColor: this.grafanaOptions.gauge.thresholds.arcBackground,
reversed: this.grafanaOptions.gauge.reversed,
@ -160,12 +156,4 @@ export class GaugeOptions {
icons: this.icons,
};
}
getLastValueFromMetrics(metricName: string | undefined, optionName: string): number | null {
// optionName -> helper in Error, mb use option path instead
const filteredSeries = filterMetricListByAlias(this.grafanaSeriesList, metricName, optionName);
const serie = filteredSeries[0];
// Last value for now
return getAggregatedValueFromSerie(serie, Aggregation.LAST);
}
}

69
src/module.ts
Unescape View File

@ -23,14 +23,14 @@ export const plugin = new PanelPlugin<PanelOptions>(Panel).setPanelOptions((buil
label: 'Gauge',
value: Pod.GAUGE,
},
{
label: 'Line',
value: Pod.LINE,
},
{
label: 'Bar',
value: Pod.BAR,
},
{
label: 'Line',
value: Pod.LINE,
},
],
},
})
@ -42,13 +42,72 @@ export const plugin = new PanelPlugin<PanelOptions>(Panel).setPanelOptions((buil
showIf: (config) => config.visualizationType !== Pod.GAUGE,
editor: NotSupportedText as any,
})
.addFieldNamePicker({
name: 'Metric',
path: 'gauge.value.metricName',
category: ['Value'],
showIf: (config) => config.visualizationType === Pod.GAUGE,
})
.addBooleanSwitch({
path: 'gauge.additionalInfo.display',
name: 'Display',
defaultValue: false,
category: ['Additional Info'],
showIf: (config) => config.visualizationType === Pod.GAUGE,
})
.addCustomEditor({
id: 'additionalInfo',
name: 'Value',
path: 'gauge.additionalInfo.value',
category: ['Additional Info'],
defaultValue: { useMetric: false, value: 0 },
showIf: (config) => config.visualizationType === Pod.GAUGE && config.gauge.additionalInfo?.display,
editor: UseMetricEditor as any,
})
.addSliderInput({
path: 'gauge.additionalInfo.size',
defaultValue: 20,
name: 'Size (px)',
settings: {
min: 1,
max: 50,
},
category: ['Additional Info'],
showIf: (config) => config.visualizationType === Pod.GAUGE && config.gauge.additionalInfo?.display,
})
.addTextInput({
path: 'gauge.additionalInfo.prefix',
defaultValue: '',
name: 'Prefix',
category: ['Additional Info'],
showIf: (config) => config.visualizationType === Pod.GAUGE && config.gauge.additionalInfo?.display,
})
.addColorPicker({
path: 'gauge.additionalInfo.color',
defaultValue: 'white',
name: 'Text Color',
category: ['Additional Info'],
showIf: (config) => config.visualizationType === Pod.GAUGE && config.gauge.additionalInfo?.display,
})
.addUnitPicker({
path: 'gauge.additionalInfo.unit',
name: 'Unit',
category: ['Additional Info'],
showIf: (config) => config.visualizationType === Pod.GAUGE && config.gauge.additionalInfo?.display,
})
.addNumberInput({
path: 'gauge.additionalInfo.decimals',
name: 'Decimals',
settings: {
placeholder: 'auto',
min: 0,
max: 5,
},
category: ['Additional Info'],
showIf: (config) => config.visualizationType === Pod.GAUGE && config.gauge.additionalInfo?.display,
})
.addCustomEditor({
id: 'min',
name: 'Min',

9
src/types.ts
Unescape View File

@ -15,6 +15,15 @@ export interface PanelOptions {
decimals?: number;
unit?: string;
link?: string;
additionalInfo: {
display: boolean;
value: ExtremumOptions;
size: number;
color: number;
prefix: string;
unit: string;
decimals: number;
};
};
}

31
src/utils.ts
Unescape View File

@ -1,7 +1,38 @@
import { Aggregation } from './types';
import { DataProcessor } from './grafana/data_processor';
import { PanelData, TimeRange, getValueFormat } from '@grafana/data';
import TimeSeries from 'grafana/app/core/time_series2';
import * as _ from 'lodash';
export function formatValue(value: number, options: { unit?: string; decimals?: number }): string {
const suffix = getValueFormat(options.unit)(0)?.suffix || '';
const decimals = _.isNumber(options.decimals) ? options.decimals : 2;
return `${value.toFixed(decimals)} ${suffix}`;
}
export function getGrafanaSeriesList(grafanaData: PanelData, timeRange: TimeRange): TimeSeries[] {
const processor = new DataProcessor({});
return processor.getSeriesList({
dataList: grafanaData.series,
range: timeRange,
});
}
export function getLastMetricValue(
grafanaSeriesList: TimeSeries[],
metricName: string | undefined,
optionName: string
): number | null {
// optionName -> helper in Error, mb use option path instead
const filteredSeries = filterMetricListByAlias(grafanaSeriesList, metricName, optionName);
const serie = filteredSeries[0];
// Last value for now
return getAggregatedValueFromSerie(serie, Aggregation.LAST);
}
export function filterMetricListByAlias(list: any[], alias: string | undefined, option: string): any[] {
const filteredSeries = _.filter(list, (serie) => serie.alias === alias);
if (filteredSeries.length === 0) {

Write Preview
Loading…
Cancel
Save