import { DataFrame, FieldColorModeId, FieldConfigProperty, FieldType, PanelPlugin, VizOrientation, } from '@grafana/data'; import { BarChartPanel } from './BarChartPanel'; import { StackingMode, BarValueVisibility, graphFieldOptions, commonOptionsBuilder } from '@grafana/ui'; import { BarChartFieldConfig, BarChartOptions, defaultBarChartFieldConfig } from 'app/plugins/panel/barchart/types'; export const plugin = new PanelPlugin(BarChartPanel) .useFieldConfig({ standardOptions: { [FieldConfigProperty.Color]: { settings: { byValueSupport: false, }, defaultValue: { mode: FieldColorModeId.PaletteClassic, }, }, }, useCustomConfig: (builder) => { const cfg = defaultBarChartFieldConfig; builder .addSliderInput({ path: 'lineWidth', name: 'Line width', defaultValue: cfg.lineWidth, settings: { min: 0, max: 10, step: 1, }, }) .addSliderInput({ path: 'fillOpacity', name: 'Fill opacity', defaultValue: cfg.fillOpacity, settings: { min: 0, max: 100, step: 1, }, }) .addRadio({ path: 'gradientMode', name: 'Gradient mode', defaultValue: graphFieldOptions.fillGradient[0].value, settings: { options: graphFieldOptions.fillGradient, }, }); commonOptionsBuilder.addAxisConfig(builder, cfg, true); commonOptionsBuilder.addHideFrom(builder); }, }) .setPanelOptions((builder) => { builder .addRadio({ path: 'orientation', name: 'Orientation', settings: { options: [ { value: VizOrientation.Auto, label: 'Auto' }, { value: VizOrientation.Horizontal, label: 'Horizontal' }, { value: VizOrientation.Vertical, label: 'Vertical' }, ], }, defaultValue: VizOrientation.Auto, }) .addRadio({ path: 'showValue', name: 'Show values', settings: { options: [ { value: BarValueVisibility.Auto, label: 'Auto' }, { value: BarValueVisibility.Always, label: 'Always' }, { value: BarValueVisibility.Never, label: 'Never' }, ], }, defaultValue: BarValueVisibility.Auto, }) .addSliderInput({ path: 'groupWidth', name: 'Group width', defaultValue: 0.7, settings: { min: 0, max: 1, step: 0.01, }, showIf: (c, data) => { if (c.stacking && c.stacking !== StackingMode.None) { return false; } return countNumberFields(data) !== 1; }, }) .addSliderInput({ path: 'barWidth', name: 'Bar width', defaultValue: 0.97, settings: { min: 0, max: 1, step: 0.01, }, }); commonOptionsBuilder.addTooltipOptions(builder); commonOptionsBuilder.addLegendOptions(builder); commonOptionsBuilder.addTextSizeOptions(builder, false); }); function countNumberFields(data?: DataFrame[]): number { let count = 0; if (data) { for (const frame of data) { for (const field of frame.fields) { if (field.type === FieldType.number) { count++; } } } } return count; }