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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,7 +1,7 @@
import { FieldColorModeId, FieldConfigProperty, PanelPlugin } from '@grafana/data'; import { FieldColorModeId, FieldConfigProperty, PanelPlugin } from '@grafana/data';
import { StateTimelinePanel } from './StateTimelinePanel'; import { StateTimelinePanel } from './StateTimelinePanel';
import { TimelineOptions, TimelineFieldConfig, defaultPanelOptions, defaultTimelineFieldConfig } from './types'; import { TimelineOptions, TimelineFieldConfig, defaultPanelOptions, defaultTimelineFieldConfig } from './types';
import { BarValueVisibility } from '@grafana/schema'; import { VisibilityMode } from '@grafana/schema';
import { commonOptionsBuilder } from '@grafana/ui'; import { commonOptionsBuilder } from '@grafana/ui';
import { timelinePanelChangedHandler } from './migrations'; import { timelinePanelChangedHandler } from './migrations';
@ -54,9 +54,9 @@ export const plugin = new PanelPlugin<TimelineOptions, TimelineFieldConfig>(Stat
name: 'Show values', name: 'Show values',
settings: { settings: {
options: [ options: [
{ value: BarValueVisibility.Auto, label: 'Auto' }, { value: VisibilityMode.Auto, label: 'Auto' },
{ value: BarValueVisibility.Always, label: 'Always' }, { value: VisibilityMode.Always, label: 'Always' },
{ value: BarValueVisibility.Never, label: 'Never' }, { value: VisibilityMode.Never, label: 'Never' },
], ],
}, },
defaultValue: defaultPanelOptions.showValue, 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 { distribute, SPACE_BETWEEN } from 'app/plugins/panel/barchart/distribute';
import { TimelineFieldConfig, TimelineMode, TimelineValueAlignment } from './types'; import { TimelineFieldConfig, TimelineMode, TimelineValueAlignment } from './types';
import { GrafanaTheme2, TimeRange } from '@grafana/data'; import { GrafanaTheme2, TimeRange } from '@grafana/data';
import { BarValueVisibility } from '@grafana/schema'; import { VisibilityMode } from '@grafana/schema';
import { alpha } from '@grafana/data/src/themes/colorManipulator'; import { alpha } from '@grafana/data/src/themes/colorManipulator';
const { round, min, ceil } = Math; const { round, min, ceil } = Math;
@ -40,7 +40,7 @@ export interface TimelineCoreOptions {
rowHeight: number; rowHeight: number;
colWidth?: number; colWidth?: number;
theme: GrafanaTheme2; theme: GrafanaTheme2;
showValue: BarValueVisibility; showValue: VisibilityMode;
isDiscrete: (seriesIdx: number) => boolean; isDiscrete: (seriesIdx: number) => boolean;
getValueColor: (seriesIdx: number, value: any) => string; getValueColor: (seriesIdx: number, value: any) => string;
label: (seriesIdx: number) => string; label: (seriesIdx: number) => string;
@ -288,7 +288,7 @@ export function getConfig(opts: TimelineCoreOptions) {
}; };
const drawPoints: Series.Points.Show = const drawPoints: Series.Points.Show =
formatValue == null || showValue === BarValueVisibility.Never formatValue == null || showValue === VisibilityMode.Never
? false ? false
: (u, sidx, i0, i1) => { : (u, sidx, i0, i1) => {
u.ctx.save(); u.ctx.save();
@ -312,7 +312,7 @@ export function getConfig(opts: TimelineCoreOptions) {
const boxRect = boxRectsBySeries[sidx - 1][ix]; const boxRect = boxRectsBySeries[sidx - 1][ix];
// Todo refine this to better know when to not render text (when values do not fit) // 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; continue;
} }

View File

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

View File

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

View File

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

View File

@ -13,7 +13,7 @@ import {
GraphGradientMode, GraphGradientMode,
LineInterpolation, LineInterpolation,
LineStyle, LineStyle,
PointVisibility, VisibilityMode,
StackingMode, StackingMode,
GraphTresholdsStyleMode, GraphTresholdsStyleMode,
} from '@grafana/schema'; } from '@grafana/schema';
@ -174,7 +174,7 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig): SetFieldConfigOption
max: 40, max: 40,
step: 1, 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); commonOptionsBuilder.addStackingConfig(builder, cfg.stacking, categoryStyles);

View File

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