Schema: unify bar/point/etc visibility modes (#39378)

This commit is contained in:
Ryan McKinley 2021-09-20 12:25:56 -07:00 committed by GitHub
parent a6fbb8d724
commit ad3c7529b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 76 additions and 93 deletions

View File

@ -1,13 +1,12 @@
package schema
AxisPlacement: "auto" | "top" | "right" | "bottom" | "left" | "hidden" @cuetsy(kind="enum")
PointVisibility: "auto" | "never" | "always" @cuetsy(kind="enum")
VisibilityMode: "auto" | "never" | "always" @cuetsy(kind="enum")
DrawStyle: "line" | "bars" | "points" @cuetsy(kind="enum")
LineInterpolation: "linear" | "smooth" | "stepBefore" | "stepAfter" @cuetsy(kind="enum")
ScaleDistribution: "linear" | "log" @cuetsy(kind="enum")
GraphGradientMode: "none" | "opacity" | "hue" | "scheme" @cuetsy(kind="enum")
StackingMode: "none" | "normal" | "percent" @cuetsy(kind="enum")
BarValueVisibility: "auto" | "never" | "always" @cuetsy(kind="enum")
BarAlignment: -1 | 0 | 1 @cuetsy(kind="enum",memberNames="Before|Center|After")
ScaleOrientation: 0 | 1 @cuetsy(kind="enum",memberNames="Horizontal|Vertical")
ScaleDirection: 1 | 1 | -1 | -1 @cuetsy(kind="enum",memberNames="Up|Right|Down|Left")
@ -33,7 +32,7 @@ FillConfig: {
fillBelowTo?: string
} @cuetsy(kind="interface")
PointsConfig: {
showPoints?: PointVisibility
showPoints?: VisibilityMode
pointSize?: number
pointColor?: string
pointSymbol?: string

View File

@ -11,9 +11,9 @@ export enum AxisPlacement {
Right = 'right',
Top = 'top',
}
export enum PointVisibility {
Always = 'always',
export enum VisibilityMode {
Auto = 'auto',
Always = 'always',
Never = 'never',
}
export enum GraphDrawStyle {
@ -45,12 +45,11 @@ export interface LineStyle {
dash?: number[];
fill?: 'solid' | 'dash' | 'dot' | 'square';
}
export interface PointsConfig {
pointColor?: string;
pointSize?: number;
pointSymbol?: string;
showPoints?: PointVisibility;
showPoints?: VisibilityMode;
}
export interface ScaleDistributionConfig {
log?: number;
@ -71,15 +70,6 @@ export enum BarAlignment {
After = 1,
}
/**
* @alpha
*/
export enum BarValueVisibility {
Auto = 'auto',
Never = 'never',
Always = 'always',
}
/**
* @alpha
*/

View File

@ -18,7 +18,7 @@ import {
GraphFieldConfig,
GraphGradientMode,
LineInterpolation,
PointVisibility,
VisibilityMode,
StackingMode,
} from '@grafana/schema';
@ -48,7 +48,7 @@ function mockDataFrame() {
spanNulls: false,
fillColor: '#ff0000',
fillOpacity: 0.1,
showPoints: PointVisibility.Always,
showPoints: VisibilityMode.Always,
stacking: {
group: 'A',
mode: StackingMode.Normal,
@ -72,7 +72,7 @@ function mockDataFrame() {
barAlignment: BarAlignment.Before,
fillColor: '#ff0000',
fillOpacity: 0.1,
showPoints: PointVisibility.Always,
showPoints: VisibilityMode.Always,
stacking: {
group: 'A',
mode: StackingMode.Normal,
@ -96,7 +96,7 @@ function mockDataFrame() {
spanNulls: false,
fillColor: '#ff0000',
fillOpacity: 0.1,
showPoints: PointVisibility.Always,
showPoints: VisibilityMode.Always,
stacking: {
group: 'B',
mode: StackingMode.Normal,
@ -119,7 +119,7 @@ function mockDataFrame() {
barAlignment: BarAlignment.Before,
fillColor: '#ff0000',
fillOpacity: 0.1,
showPoints: PointVisibility.Always,
showPoints: VisibilityMode.Always,
stacking: {
group: 'B',
mode: StackingMode.Normal,
@ -142,7 +142,7 @@ function mockDataFrame() {
barAlignment: BarAlignment.Before,
fillColor: '#ff0000',
fillOpacity: 0.1,
showPoints: PointVisibility.Always,
showPoints: VisibilityMode.Always,
stacking: {
group: 'B',
mode: StackingMode.None,

View File

@ -13,7 +13,7 @@ import {
AxisPlacement,
GraphDrawStyle,
GraphFieldConfig,
PointVisibility,
VisibilityMode,
ScaleDirection,
ScaleOrientation,
} from '@grafana/schema';
@ -39,7 +39,7 @@ interface State {
const defaultConfig: GraphFieldConfig = {
drawStyle: GraphDrawStyle.Line,
showPoints: PointVisibility.Auto,
showPoints: VisibilityMode.Auto,
axisPlacement: AxisPlacement.Hidden,
};
@ -163,7 +163,7 @@ export class Sparkline extends PureComponent<SparklineProps, State> {
const colorMode = getFieldColorModeForField(field);
const seriesColor = colorMode.getCalculator(field, theme)(0, 0);
const pointsMode =
customConfig.drawStyle === GraphDrawStyle.Points ? PointVisibility.Always : customConfig.showPoints;
customConfig.drawStyle === GraphDrawStyle.Points ? VisibilityMode.Always : customConfig.showPoints;
builder.addSeries({
pxAlign: false,

View File

@ -20,7 +20,7 @@ import {
GraphDrawStyle,
GraphFieldConfig,
GraphTresholdsStyleMode,
PointVisibility,
VisibilityMode,
ScaleDirection,
ScaleOrientation,
} from '@grafana/schema';
@ -31,7 +31,7 @@ const defaultFormatter = (v: any) => (v == null ? '-' : v.toFixed(1));
const defaultConfig: GraphFieldConfig = {
drawStyle: GraphDrawStyle.Line,
showPoints: PointVisibility.Auto,
showPoints: VisibilityMode.Auto,
axisPlacement: AxisPlacement.Auto,
};
@ -154,7 +154,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ sync: DashboardCursor
}
const showPoints =
customConfig.drawStyle === GraphDrawStyle.Points ? PointVisibility.Always : customConfig.showPoints;
customConfig.drawStyle === GraphDrawStyle.Points ? VisibilityMode.Always : customConfig.showPoints;
let pointsFilter: uPlot.Series.Points.Filter = () => null;

View File

@ -6,7 +6,7 @@ import {
GraphGradientMode,
GraphTresholdsStyleMode,
LineInterpolation,
PointVisibility,
VisibilityMode,
StackingMode,
} from '@grafana/schema';
@ -34,10 +34,10 @@ export const graphFieldOptions = {
] as Array<SelectableValue<BarAlignment>>,
showPoints: [
{ label: 'Auto', value: PointVisibility.Auto, description: 'Show points when the density is low' },
{ label: 'Always', value: PointVisibility.Always },
{ label: 'Never', value: PointVisibility.Never },
] as Array<SelectableValue<PointVisibility>>,
{ label: 'Auto', value: VisibilityMode.Auto, description: 'Show points when the density is low' },
{ label: 'Always', value: VisibilityMode.Always },
{ label: 'Never', value: VisibilityMode.Never },
] as Array<SelectableValue<VisibilityMode>>,
axisPlacement: [
{ label: 'Auto', value: AxisPlacement.Auto, description: 'First field on the left, everything else on the right' },

View File

@ -5,7 +5,7 @@ import {
GraphGradientMode,
AxisPlacement,
GraphDrawStyle,
PointVisibility,
VisibilityMode,
ScaleOrientation,
ScaleDirection,
GraphTresholdsStyleMode,
@ -479,7 +479,7 @@ describe('UPlotConfigBuilder', () => {
scaleKey: 'scale-x',
fillOpacity: 50,
gradientMode: GraphGradientMode.Opacity,
showPoints: PointVisibility.Auto,
showPoints: VisibilityMode.Auto,
pointSize: 5,
lineColor: '#0000ff',
lineWidth: 1,
@ -544,7 +544,7 @@ describe('UPlotConfigBuilder', () => {
scaleKey: 'scale-x',
fillOpacity: 50,
gradientMode: GraphGradientMode.Opacity,
showPoints: PointVisibility.Auto,
showPoints: VisibilityMode.Auto,
lineColor: '#0000ff',
lineWidth: 1,
spanNulls: false,
@ -555,7 +555,7 @@ describe('UPlotConfigBuilder', () => {
scaleKey: 'scale-x',
fillOpacity: 50,
gradientMode: GraphGradientMode.Opacity,
showPoints: PointVisibility.Auto,
showPoints: VisibilityMode.Auto,
pointSize: 5,
lineColor: '#00ff00',
lineWidth: 1,
@ -568,7 +568,7 @@ describe('UPlotConfigBuilder', () => {
scaleKey: 'scale-x',
fillOpacity: 50,
gradientMode: GraphGradientMode.Opacity,
showPoints: PointVisibility.Auto,
showPoints: VisibilityMode.Auto,
pointSize: 5,
lineColor: '#ff0000',
lineWidth: 1,

View File

@ -17,7 +17,7 @@ import {
LineConfig,
LineInterpolation,
PointsConfig,
PointVisibility,
VisibilityMode,
} from '@grafana/schema';
import { PlotConfigBuilder } from '../types';
import { getHueGradientFn, getOpacityGradientFn, getScaleGradientFn } from './gradientFills';
@ -118,13 +118,13 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
if (drawStyle === GraphDrawStyle.Points) {
pointsConfig.points!.show = true;
} else {
if (showPoints === PointVisibility.Auto) {
if (showPoints === VisibilityMode.Auto) {
if (drawStyle === GraphDrawStyle.Bars) {
pointsConfig.points!.show = false;
}
} else if (showPoints === PointVisibility.Never) {
} else if (showPoints === VisibilityMode.Never) {
pointsConfig.points!.show = false;
} else if (showPoints === PointVisibility.Always) {
} else if (showPoints === VisibilityMode.Always) {
pointsConfig.points!.show = true;
}
}

View File

@ -7,7 +7,7 @@ export {
GraphDrawStyle as DrawStyle,
// All exports
AxisPlacement,
PointVisibility,
VisibilityMode as PointVisibility,
LineInterpolation,
ScaleDistribution,
GraphGradientMode,
@ -16,7 +16,7 @@ export {
ScaleDistributionConfig,
HideSeriesConfig,
BarAlignment,
BarValueVisibility,
VisibilityMode as BarValueVisibility,
ScaleOrientation,
ScaleDirection,
LineConfig,

View File

@ -3,13 +3,7 @@ import { pointWithin, Quadtree, Rect } from './quadtree';
import { distribute, SPACE_BETWEEN } from './distribute';
import { DataFrame, GrafanaTheme2 } from '@grafana/data';
import { calculateFontSize, PlotTooltipInterpolator } from '@grafana/ui';
import {
StackingMode,
BarValueVisibility,
ScaleDirection,
ScaleOrientation,
VizTextDisplayOptions,
} from '@grafana/schema';
import { StackingMode, VisibilityMode, ScaleDirection, ScaleOrientation, VizTextDisplayOptions } from '@grafana/schema';
import { preparePlotData } from '../../../../../packages/grafana-ui/src/components/uPlot/utils';
const groupDistr = SPACE_BETWEEN;
@ -39,7 +33,7 @@ export interface BarsOptions {
xDir: ScaleDirection;
groupWidth: number;
barWidth: number;
showValue: BarValueVisibility;
showValue: VisibilityMode;
stacking: StackingMode;
rawValue: (seriesIdx: number, valueIdx: number) => number | null;
formatValue: (seriesIdx: number, value: any) => string;
@ -199,7 +193,7 @@ export function getConfig(opts: BarsOptions, theme: GrafanaTheme2) {
// uPlot hook to draw the labels on the bar chart.
const draw = (u: uPlot) => {
if (showValue === BarValueVisibility.Never) {
if (showValue === VisibilityMode.Never) {
return;
}
// pre-cache formatted labels
@ -228,7 +222,7 @@ export function getConfig(opts: BarsOptions, theme: GrafanaTheme2) {
)
);
if (fontSize < VALUE_MIN_FONT_SIZE && showValue !== BarValueVisibility.Always) {
if (fontSize < VALUE_MIN_FONT_SIZE && showValue !== VisibilityMode.Always) {
return;
}
}

View File

@ -29,7 +29,7 @@ Panel: {
orientation: ui.VizOrientation
// TODO this default is a guess based on common devenv values
stacking: ui.StackingMode | *"none"
showValue: ui.BarValueVisibility
showValue: ui.VisibilityMode
barWidth: number
groupWidth: number
}

View File

@ -7,7 +7,7 @@ import {
VizOrientation,
} from '@grafana/data';
import { BarChartPanel } from './BarChartPanel';
import { StackingMode, BarValueVisibility } from '@grafana/schema';
import { StackingMode, VisibilityMode } from '@grafana/schema';
import { graphFieldOptions, commonOptionsBuilder } from '@grafana/ui';
import { BarChartFieldConfig, BarChartOptions, defaultBarChartFieldConfig } from 'app/plugins/panel/barchart/types';
@ -80,12 +80,12 @@ export const plugin = new PanelPlugin<BarChartOptions, BarChartFieldConfig>(BarC
name: 'Show values',
settings: {
options: [
{ value: BarValueVisibility.Auto, label: 'Auto' },
{ value: BarValueVisibility.Always, label: 'Always' },
{ value: BarValueVisibility.Never, label: 'Never' },
{ value: VisibilityMode.Auto, label: 'Auto' },
{ value: VisibilityMode.Always, label: 'Always' },
{ value: VisibilityMode.Never, label: 'Never' },
],
},
defaultValue: BarValueVisibility.Auto,
defaultValue: VisibilityMode.Auto,
})
.addRadio({
path: 'stacking',

View File

@ -3,7 +3,7 @@ import {
OptionsWithTextFormatting,
OptionsWithTooltip,
AxisConfig,
BarValueVisibility,
VisibilityMode,
GraphGradientMode,
HideableFieldConfig,
StackingMode,
@ -16,7 +16,7 @@ import { VizOrientation } from '@grafana/data';
export interface BarChartOptions extends OptionsWithLegend, OptionsWithTooltip, OptionsWithTextFormatting {
orientation: VizOrientation;
stacking: StackingMode;
showValue: BarValueVisibility;
showValue: VisibilityMode;
barWidth: number;
groupWidth: number;
rawValue: (seriesIdx: number, valueIdx: number) => number;

View File

@ -2,7 +2,7 @@ import { prepareGraphableFrames, preparePlotConfigBuilder, preparePlotFrame } fr
import {
LegendDisplayMode,
TooltipDisplayMode,
BarValueVisibility,
VisibilityMode,
GraphGradientMode,
StackingMode,
} from '@grafana/schema';
@ -81,7 +81,7 @@ describe('BarChart utils', () => {
orientation: VizOrientation.Auto,
groupWidth: 20,
barWidth: 2,
showValue: BarValueVisibility.Always,
showValue: VisibilityMode.Always,
legend: {
displayMode: LegendDisplayMode.List,
placement: 'bottom',
@ -111,7 +111,7 @@ describe('BarChart utils', () => {
expect(result).toMatchSnapshot();
});
it.each([BarValueVisibility.Always, BarValueVisibility.Auto])('value visibility', (v) => {
it.each([VisibilityMode.Always, VisibilityMode.Auto])('value visibility', (v) => {
expect(
preparePlotConfigBuilder({
...config,

View File

@ -1,5 +1,5 @@
import React from 'react';
import { LegendDisplayMode, BarValueVisibility } from '@grafana/schema';
import { LegendDisplayMode, VisibilityMode } from '@grafana/schema';
import {
PanelContext,
PanelContextRoot,
@ -22,7 +22,7 @@ export interface TimelineProps
Omit<GraphNGProps, 'prepConfig' | 'propsToDiff' | 'renderLegend'> {
mode: TimelineMode;
rowHeight: number;
showValue: BarValueVisibility;
showValue: VisibilityMode;
alignValue?: TimelineValueAlignment;
colWidth?: number;
legendItems?: VizLegendItem[];

View File

@ -29,7 +29,7 @@ Panel: {
mode?: #TimelineMode
ui.OptionsWithLegend
ui.OptionsWithTooltip
showValue: ui.BarValueVisibility | *"auto"
showValue: ui.VisibilityMode | *"auto"
rowHeight: number | *0.9
colWidth?: number
mergeValues?: bool | *true

View File

@ -1,7 +1,7 @@
import { FieldColorModeId, FieldConfigProperty, PanelPlugin } from '@grafana/data';
import { StateTimelinePanel } from './StateTimelinePanel';
import { TimelineOptions, TimelineFieldConfig, defaultPanelOptions, defaultTimelineFieldConfig } from './types';
import { BarValueVisibility } from '@grafana/schema';
import { VisibilityMode } from '@grafana/schema';
import { commonOptionsBuilder } from '@grafana/ui';
import { timelinePanelChangedHandler } from './migrations';
@ -54,9 +54,9 @@ export const plugin = new PanelPlugin<TimelineOptions, TimelineFieldConfig>(Stat
name: 'Show values',
settings: {
options: [
{ value: BarValueVisibility.Auto, label: 'Auto' },
{ value: BarValueVisibility.Always, label: 'Always' },
{ value: BarValueVisibility.Never, label: 'Never' },
{ value: VisibilityMode.Auto, label: 'Auto' },
{ value: VisibilityMode.Always, label: 'Always' },
{ value: VisibilityMode.Never, label: 'Never' },
],
},
defaultValue: defaultPanelOptions.showValue,

View File

@ -4,7 +4,7 @@ import { pointWithin, Quadtree, Rect } from 'app/plugins/panel/barchart/quadtree
import { distribute, SPACE_BETWEEN } from 'app/plugins/panel/barchart/distribute';
import { TimelineFieldConfig, TimelineMode, TimelineValueAlignment } from './types';
import { GrafanaTheme2, TimeRange } from '@grafana/data';
import { BarValueVisibility } from '@grafana/schema';
import { VisibilityMode } from '@grafana/schema';
import { alpha } from '@grafana/data/src/themes/colorManipulator';
const { round, min, ceil } = Math;
@ -40,7 +40,7 @@ export interface TimelineCoreOptions {
rowHeight: number;
colWidth?: number;
theme: GrafanaTheme2;
showValue: BarValueVisibility;
showValue: VisibilityMode;
isDiscrete: (seriesIdx: number) => boolean;
getValueColor: (seriesIdx: number, value: any) => string;
label: (seriesIdx: number) => string;
@ -288,7 +288,7 @@ export function getConfig(opts: TimelineCoreOptions) {
};
const drawPoints: Series.Points.Show =
formatValue == null || showValue === BarValueVisibility.Never
formatValue == null || showValue === VisibilityMode.Never
? false
: (u, sidx, i0, i1) => {
u.ctx.save();
@ -312,7 +312,7 @@ export function getConfig(opts: TimelineCoreOptions) {
const boxRect = boxRectsBySeries[sidx - 1][ix];
// Todo refine this to better know when to not render text (when values do not fit)
if (!boxRect || (showValue === BarValueVisibility.Auto && boxRect.w < 25)) {
if (!boxRect || (showValue === VisibilityMode.Auto && boxRect.w < 25)) {
continue;
}

View File

@ -1,4 +1,4 @@
import { OptionsWithTooltip, OptionsWithLegend, HideableFieldConfig, BarValueVisibility } from '@grafana/schema';
import { OptionsWithTooltip, OptionsWithLegend, HideableFieldConfig, VisibilityMode } from '@grafana/schema';
/**
* @alpha
@ -6,7 +6,7 @@ import { OptionsWithTooltip, OptionsWithLegend, HideableFieldConfig, BarValueVis
export interface TimelineOptions extends OptionsWithLegend, OptionsWithTooltip {
mode: TimelineMode; // not in the saved model!
showValue: BarValueVisibility;
showValue: VisibilityMode;
rowHeight: number;
// only used for "samples" mode (status-history)
@ -31,7 +31,7 @@ export interface TimelineFieldConfig extends HideableFieldConfig {
* @alpha
*/
export const defaultPanelOptions: Partial<TimelineOptions> = {
showValue: BarValueVisibility.Auto,
showValue: VisibilityMode.Auto,
alignValue: 'left',
mergeValues: true,
rowHeight: 0.9,

View File

@ -25,7 +25,7 @@ Panel: {
PanelOptions: {
ui.OptionsWithLegend
ui.OptionsWithTooltip
showValue: ui.BarValueVisibility
showValue: ui.VisibilityMode
rowHeight: number
colWidth?: number
alignValue: "center" | *"left" | "right"

View File

@ -1,7 +1,7 @@
import { FieldColorModeId, FieldConfigProperty, PanelPlugin } from '@grafana/data';
import { StatusHistoryPanel } from './StatusHistoryPanel';
import { StatusPanelOptions, StatusFieldConfig, defaultStatusFieldConfig } from './types';
import { BarValueVisibility } from '@grafana/schema';
import { VisibilityMode } from '@grafana/schema';
import { commonOptionsBuilder } from '@grafana/ui';
export const plugin = new PanelPlugin<StatusPanelOptions, StatusFieldConfig>(StatusHistoryPanel)
@ -47,12 +47,12 @@ export const plugin = new PanelPlugin<StatusPanelOptions, StatusFieldConfig>(Sta
name: 'Show values',
settings: {
options: [
{ value: BarValueVisibility.Auto, label: 'Auto' },
{ value: BarValueVisibility.Always, label: 'Always' },
{ value: BarValueVisibility.Never, label: 'Never' },
{ value: VisibilityMode.Auto, label: 'Auto' },
{ value: VisibilityMode.Always, label: 'Always' },
{ value: VisibilityMode.Never, label: 'Never' },
],
},
defaultValue: BarValueVisibility.Auto,
defaultValue: VisibilityMode.Auto,
})
.addSliderInput({
path: 'rowHeight',

View File

@ -1,10 +1,10 @@
import { HideableFieldConfig, BarValueVisibility, OptionsWithTooltip, OptionsWithLegend } from '@grafana/schema';
import { HideableFieldConfig, VisibilityMode, OptionsWithTooltip, OptionsWithLegend } from '@grafana/schema';
/**
* @alpha
*/
export interface StatusPanelOptions extends OptionsWithTooltip, OptionsWithLegend {
showValue: BarValueVisibility;
showValue: VisibilityMode;
rowHeight: number;
colWidth?: number;
}

View File

@ -13,7 +13,7 @@ import {
GraphGradientMode,
LineInterpolation,
LineStyle,
PointVisibility,
VisibilityMode,
StackingMode,
GraphTresholdsStyleMode,
} from '@grafana/schema';
@ -174,7 +174,7 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig): SetFieldConfigOption
max: 40,
step: 1,
},
showIf: (c) => c.showPoints !== PointVisibility.Never || c.drawStyle === GraphDrawStyle.Points,
showIf: (c) => c.showPoints !== VisibilityMode.Never || c.drawStyle === GraphDrawStyle.Points,
});
commonOptionsBuilder.addStackingConfig(builder, cfg.stacking, categoryStyles);

View File

@ -22,7 +22,7 @@ import {
GraphTresholdsStyleMode,
LineInterpolation,
LineStyle,
PointVisibility,
VisibilityMode,
ScaleDistribution,
StackingMode,
} from '@grafana/schema';
@ -166,7 +166,7 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour
case 'points':
rule.properties.push({
id: 'custom.showPoints',
value: v ? PointVisibility.Always : PointVisibility.Never,
value: v ? VisibilityMode.Always : VisibilityMode.Never,
});
break;
case 'bars':
@ -260,13 +260,13 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour
graph.drawStyle = angular.bars ? GraphDrawStyle.Bars : angular.lines ? GraphDrawStyle.Line : GraphDrawStyle.Points;
if (angular.points) {
graph.showPoints = PointVisibility.Always;
graph.showPoints = VisibilityMode.Always;
if (isNumber(angular.pointradius)) {
graph.pointSize = 2 + angular.pointradius * 2;
}
} else if (graph.drawStyle !== GraphDrawStyle.Points) {
graph.showPoints = PointVisibility.Never;
graph.showPoints = VisibilityMode.Never;
}
graph.lineWidth = angular.linewidth;