IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-16 10:24:54 -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,
VizLegendItem,
} from '@grafana/ui';
import { DataFrame, FieldType, TimeRange } from '@grafana/data';
import { DataFrame, FALLBACK_COLOR, FieldType, TimeRange } from '@grafana/data';
import { preparePlotConfigBuilder } from './utils';
import { TimelineMode, TimelineOptions, TimelineValueAlignment } from './types';
@ -34,6 +34,19 @@ export class TimelineChart extends React.Component<TimelineProps> {
static contextType = PanelContextRoot;
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) => {
this.panelContext = this.context as 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
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;
sync?: () => DashboardCursorSync;
getValueColor?: (frameIdx: number, fieldIdx: number, value: any) => string;
}
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,
alignValue,
mergeValues,
getValueColor,
}) => {
const builder = new UPlotConfigBuilder(timeZone);
@ -81,14 +82,15 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<TimelineOptions> = ({
return !(mode && field.display && mode.startsWith('continuous-'));
};
const getValueColor = (seriesIdx: number, value: any) => {
const getValueColorFn = (seriesIdx: number, value: any) => {
const field = frame.fields[seriesIdx];
if (field.display) {
const disp = field.display(value); // will apply color modes
if (disp.color) {
return disp.color;
}
if (
field.state?.origin?.fieldIndex !== undefined &&
field.state?.origin?.frameIndex !== undefined &&
getValueColor
) {
return getValueColor(field.state?.origin?.frameIndex, field.state?.origin?.fieldIndex, value);
}
return FALLBACK_COLOR;
@ -107,7 +109,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<TimelineOptions> = ({
theme,
label: (seriesIdx) => getFieldDisplayName(frame.fields[seriesIdx], frame),
getFieldConfig: (seriesIdx) => frame.fields[seriesIdx].config.custom,
getValueColor,
getValueColor: getValueColorFn,
getTimeRange,
// hardcoded formatter for state values
formatValue: (seriesIdx, value) => formattedValueToString(frame.fields[seriesIdx].display!(value)),