IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fixes state timeline and status history colors when pallet is used (#45765)

Browse Source 
Co-authored-by: Victor Marin <victor.marin@grafana.com>

Co-authored-by: Victor Marin <victor.marin@grafana.com>
This commit is contained in:
Dominik Prokop 2022-02-24 00:38:49 -08:00 committed by GitHub
parent f9701d78b1
commit 1dff00a7b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/app/plugins/panel/state-timeline/TimelineChart.tsx
View File

@ -10,7 +10,7 @@ import {
VizLegend, VizLegend,
VizLegendItem, VizLegendItem,
} from '@grafana/ui'; } from '@grafana/ui';
import { DataFrame, FieldType, TimeRange } from '@grafana/data'; import { DataFrame, FALLBACK_COLOR, FieldType, TimeRange } from '@grafana/data';
import { preparePlotConfigBuilder } from './utils'; import { preparePlotConfigBuilder } from './utils';
import { TimelineMode, TimelineOptions, TimelineValueAlignment } from './types'; import { TimelineMode, TimelineOptions, TimelineValueAlignment } from './types';
@ -34,6 +34,19 @@ export class TimelineChart extends React.Component<TimelineProps> {
static contextType = PanelContextRoot; static contextType = PanelContextRoot;
panelContext: PanelContext = {} as PanelContext; panelContext: PanelContext = {} as PanelContext;
getValueColor = (frameIdx: number, fieldIdx: number, value: any) => {
const field = this.props.frames[frameIdx].fields[fieldIdx];
if (field.display) {
const disp = field.display(value); // will apply color modes
if (disp.color) {
return disp.color;
}
}
return FALLBACK_COLOR;
};
prepConfig = (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => { prepConfig = (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => {
this.panelContext = this.context as PanelContext; this.panelContext = this.context as PanelContext;
const { eventBus, sync } = this.panelContext; const { eventBus, sync } = this.panelContext;
@ -48,6 +61,7 @@ export class TimelineChart extends React.Component<TimelineProps> {
// When there is only one row, use the full space // When there is only one row, use the full space
rowHeight: alignedFrame.fields.length > 2 ? this.props.rowHeight : 1, rowHeight: alignedFrame.fields.length > 2 ? this.props.rowHeight : 1,
getValueColor: this.getValueColor,
}); });
}; };

1
public/app/plugins/panel/state-timeline/types.ts
View File

@ -18,6 +18,7 @@ export interface TimelineOptions extends OptionsWithLegend, OptionsWithTooltip {
alignValue?: TimelineValueAlignment; alignValue?: TimelineValueAlignment;
sync?: () => DashboardCursorSync; sync?: () => DashboardCursorSync;
getValueColor?: (frameIdx: number, fieldIdx: number, value: any) => string;
} }
export type TimelineValueAlignment = 'center' | 'left' | 'right'; export type TimelineValueAlignment = 'center' | 'left' | 'right';

16
public/app/plugins/panel/state-timeline/utils.ts
View File

@ -70,6 +70,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<TimelineOptions> = ({
showValue, showValue,
alignValue, alignValue,
mergeValues, mergeValues,
getValueColor,
}) => { }) => {
const builder = new UPlotConfigBuilder(timeZone); const builder = new UPlotConfigBuilder(timeZone);
@ -81,14 +82,15 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<TimelineOptions> = ({
return !(mode && field.display && mode.startsWith('continuous-')); return !(mode && field.display && mode.startsWith('continuous-'));
}; };
const getValueColor = (seriesIdx: number, value: any) => { const getValueColorFn = (seriesIdx: number, value: any) => {
const field = frame.fields[seriesIdx]; const field = frame.fields[seriesIdx];
if (field.display) { if (
const disp = field.display(value); // will apply color modes field.state?.origin?.fieldIndex !== undefined &&
if (disp.color) { field.state?.origin?.frameIndex !== undefined &&
return disp.color; getValueColor
} ) {
return getValueColor(field.state?.origin?.frameIndex, field.state?.origin?.fieldIndex, value);
} }
return FALLBACK_COLOR; return FALLBACK_COLOR;
@ -107,7 +109,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<TimelineOptions> = ({
theme, theme,
label: (seriesIdx) => getFieldDisplayName(frame.fields[seriesIdx], frame), label: (seriesIdx) => getFieldDisplayName(frame.fields[seriesIdx], frame),
getFieldConfig: (seriesIdx) => frame.fields[seriesIdx].config.custom, getFieldConfig: (seriesIdx) => frame.fields[seriesIdx].config.custom,
getValueColor, getValueColor: getValueColorFn,
getTimeRange, getTimeRange,
// hardcoded formatter for state values // hardcoded formatter for state values
formatValue: (seriesIdx, value) => formattedValueToString(frame.fields[seriesIdx].display!(value)), formatValue: (seriesIdx, value) => formattedValueToString(frame.fields[seriesIdx].display!(value)),