diff --git a/pkg/codegen/pluggen.go b/pkg/codegen/pluggen.go index 8ad0a67d1da..b309f1dcee1 100644 --- a/pkg/codegen/pluggen.go +++ b/pkg/codegen/pluggen.go @@ -37,7 +37,6 @@ var importMap = map[string]string{ // Hard-coded list of paths to skip. Remove a particular file as we're ready // to rely on the TypeScript auto-generated by cuetsy for that particular file. var skipPaths = []string{ - "public/app/plugins/panel/barchart/models.cue", "public/app/plugins/panel/canvas/models.cue", "public/app/plugins/panel/histogram/models.cue", "public/app/plugins/panel/heatmap/models.cue", diff --git a/public/app/plugins/panel/barchart/models.cue b/public/app/plugins/panel/barchart/models.cue index 0e1bbebf459..c2a9a343825 100644 --- a/public/app/plugins/panel/barchart/models.cue +++ b/public/app/plugins/panel/barchart/models.cue @@ -1,4 +1,4 @@ -// Copyright 2021 Grafana Labs +// Copyright 2022 Grafana Labs // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. @@ -24,24 +24,46 @@ Panel: thema.#Lineage & { seqs: [ { schemas: [ + // v0.0 { PanelOptions: { ui.OptionsWithLegend ui.OptionsWithTooltip ui.OptionsWithTextFormatting - orientation: ui.VizOrientation - // TODO this default is a guess based on common devenv values + // TODO docs + xField?: string + // TODO docs + colorByField?: string + // TODO docs + orientation: ui.VizOrientation | *"auto" + // TODO docs + barRadius?: float64 & >= 0 & <= 0.5 | *0 + // TODO docs + xTickLabelRotation: int32 & >= -90 & <= 90 | *0 + // TODO docs + xTickLabelMaxLength: int32 & >= 0 + // TODO docs + // negative values indicate backwards skipping behavior + xTickLabelSpacing?: int32 | *0 + // TODO docs stacking: ui.StackingMode | *"none" - showValue: ui.VisibilityMode - barWidth: number - groupWidth: number + // This controls whether values are shown on top or to the left of bars. + showValue: ui.VisibilityMode | *"auto" + // Controls the width of bars. 1 = Max width, 0 = Min width. + barWidth: float64 & >= 0 & <= 1 | *0.97 + // Controls the width of groups. 1 = max with, 0 = min width. + groupWidth: float64 & >= 0 & <= 1 | *0.7 } @cuetsy(kind="interface") PanelFieldConfig: { ui.AxisConfig ui.HideableFieldConfig - lineWidth?: number - fillOpacity?: number - gradientMode?: ui.GraphGradientMode + // Controls line width of the bars. + lineWidth?: int32 & >= 0 & <= 10 | *1 + // Controls the fill opacity of the bars. + fillOpacity?: int32 & >= 0 & <= 100 | *80 + // Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard color scheme field option. + // Gradient appearance is influenced by the Fill opacity setting. + gradientMode?: ui.GraphGradientMode | *"none" } @cuetsy(kind="interface") }, ] diff --git a/public/app/plugins/panel/barchart/models.gen.ts b/public/app/plugins/panel/barchart/models.gen.ts index 1653e84f877..975c559f432 100644 --- a/public/app/plugins/panel/barchart/models.gen.ts +++ b/public/app/plugins/panel/barchart/models.gen.ts @@ -1,48 +1,47 @@ -import { - OptionsWithLegend, - OptionsWithTextFormatting, - OptionsWithTooltip, - AxisConfig, - VisibilityMode, - GraphGradientMode, - HideableFieldConfig, - StackingMode, -} from '@grafana/schema'; -import { VizOrientation } from '@grafana/data'; +//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +// This file is autogenerated. DO NOT EDIT. +// +// To regenerate, run "make gen-cue" from the repository root. +//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -export interface PanelOptions extends OptionsWithLegend, OptionsWithTooltip, OptionsWithTextFormatting { - xField?: string; - colorByField?: string; - orientation: VizOrientation; - stacking: StackingMode; - showValue: VisibilityMode; - barWidth: number; +import * as ui from '@grafana/schema'; + +export const modelVersion = Object.freeze([0, 0]); + + +export interface PanelOptions extends ui.OptionsWithLegend, ui.OptionsWithTooltip, ui.OptionsWithTextFormatting { barRadius?: number; + barWidth: number; + colorByField?: string; groupWidth: number; - xTickLabelRotation: number; + orientation: ui.VizOrientation; + showValue: ui.VisibilityMode; + stacking: ui.StackingMode; + xField?: string; xTickLabelMaxLength: number; - xTickLabelSpacing?: number; // negative values indicate backwards skipping behavior + xTickLabelRotation: number; + xTickLabelSpacing?: number; } export const defaultPanelOptions: Partial = { - stacking: StackingMode.None, - orientation: VizOrientation.Auto, + barRadius: 0, + barWidth: 0.97, + groupWidth: 0.7, + orientation: ui.VizOrientation.Auto, + showValue: ui.VisibilityMode.Auto, + stacking: ui.StackingMode.None, xTickLabelRotation: 0, xTickLabelSpacing: 0, - showValue: VisibilityMode.Auto, - groupWidth: 0.7, - barWidth: 0.97, - barRadius: 0, }; -export interface BarChartFieldConfig extends AxisConfig, HideableFieldConfig { - lineWidth?: number; // 0 - fillOpacity?: number; // 100 - gradientMode?: GraphGradientMode; +export interface PanelFieldConfig extends ui.AxisConfig, ui.HideableFieldConfig { + fillOpacity?: number; + gradientMode?: ui.GraphGradientMode; + lineWidth?: number; } -export const defaultBarChartFieldConfig: BarChartFieldConfig = { - lineWidth: 1, +export const defaultPanelFieldConfig: Partial = { fillOpacity: 80, - gradientMode: GraphGradientMode.None, + gradientMode: ui.GraphGradientMode.None, + lineWidth: 1, }; diff --git a/public/app/plugins/panel/barchart/module.tsx b/public/app/plugins/panel/barchart/module.tsx index eb663db2334..a371f146499 100644 --- a/public/app/plugins/panel/barchart/module.tsx +++ b/public/app/plugins/panel/barchart/module.tsx @@ -13,11 +13,11 @@ import { graphFieldOptions, commonOptionsBuilder } from '@grafana/ui'; import { BarChartPanel } from './BarChartPanel'; import { TickSpacingEditor } from './TickSpacingEditor'; -import { BarChartFieldConfig, PanelOptions, defaultBarChartFieldConfig, defaultPanelOptions } from './models.gen'; +import { PanelFieldConfig, PanelOptions, defaultPanelFieldConfig, defaultPanelOptions } from './models.gen'; import { BarChartSuggestionsSupplier } from './suggestions'; import { prepareBarChartDisplayValues } from './utils'; -export const plugin = new PanelPlugin(BarChartPanel) +export const plugin = new PanelPlugin(BarChartPanel) .useFieldConfig({ standardOptions: { [FieldConfigProperty.Color]: { @@ -31,7 +31,7 @@ export const plugin = new PanelPlugin(BarChar }, }, useCustomConfig: (builder) => { - const cfg = defaultBarChartFieldConfig; + const cfg = defaultPanelFieldConfig; builder .addSliderInput({ diff --git a/public/app/plugins/panel/barchart/suggestions.ts b/public/app/plugins/panel/barchart/suggestions.ts index eca2ac73995..2781a53589c 100644 --- a/public/app/plugins/panel/barchart/suggestions.ts +++ b/public/app/plugins/panel/barchart/suggestions.ts @@ -2,11 +2,11 @@ import { VisualizationSuggestionsBuilder, VizOrientation } from '@grafana/data'; import { StackingMode, VisibilityMode } from '@grafana/schema'; import { SuggestionName } from 'app/types/suggestions'; -import { BarChartFieldConfig, PanelOptions } from './models.gen'; +import { PanelFieldConfig, PanelOptions } from './models.gen'; export class BarChartSuggestionsSupplier { getListWithDefaults(builder: VisualizationSuggestionsBuilder) { - return builder.getListAppender({ + return builder.getListAppender({ name: SuggestionName.BarChart, pluginId: 'barchart', options: { diff --git a/public/app/plugins/panel/barchart/utils.test.ts b/public/app/plugins/panel/barchart/utils.test.ts index ac4ea565d8a..8590256f7f1 100644 --- a/public/app/plugins/panel/barchart/utils.test.ts +++ b/public/app/plugins/panel/barchart/utils.test.ts @@ -19,7 +19,7 @@ import { SortOrder, } from '@grafana/schema'; -import { BarChartFieldConfig } from './models.gen'; +import { PanelFieldConfig } from './models.gen'; import { BarChartOptionsEX, prepareBarChartDisplayValues, preparePlotConfigBuilder } from './utils'; function mockDataFrame() { @@ -33,7 +33,7 @@ function mockDataFrame() { fields: [{ name: 'ts', type: FieldType.time, values: [1, 2, 4] }], }); - const f1Config: FieldConfig = { + const f1Config: FieldConfig = { displayName: 'Metric 1', decimals: 2, unit: 'm/s', @@ -44,7 +44,7 @@ function mockDataFrame() { }, }; - const f2Config: FieldConfig = { + const f2Config: FieldConfig = { displayName: 'Metric 2', decimals: 2, unit: 'kWh', diff --git a/public/app/plugins/panel/barchart/utils.ts b/public/app/plugins/panel/barchart/utils.ts index 29c894747fb..56c07cb04b3 100644 --- a/public/app/plugins/panel/barchart/utils.ts +++ b/public/app/plugins/panel/barchart/utils.ts @@ -29,7 +29,7 @@ import { getStackingGroups } from '@grafana/ui/src/components/uPlot/utils'; import { findField } from 'app/features/dimensions'; import { BarsOptions, getConfig } from './bars'; -import { BarChartFieldConfig, PanelOptions, defaultBarChartFieldConfig } from './models.gen'; +import { PanelFieldConfig, PanelOptions, defaultPanelFieldConfig } from './models.gen'; import { BarChartDisplayValues, BarChartDisplayWarning } from './types'; function getBarCharScaleOrientation(orientation: VizOrientation) { @@ -166,7 +166,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn = ({ seriesIndex++; - const customConfig: BarChartFieldConfig = { ...defaultBarChartFieldConfig, ...field.config.custom }; + const customConfig: PanelFieldConfig = { ...defaultPanelFieldConfig, ...field.config.custom }; const scaleKey = field.config.unit || FIXED_UNIT; const colorMode = getFieldColorModeForField(field); diff --git a/public/app/plugins/panel/piechart/PieChart.tsx b/public/app/plugins/panel/piechart/PieChart.tsx index 26f448e0280..7cec1b32f2f 100644 --- a/public/app/plugins/panel/piechart/PieChart.tsx +++ b/public/app/plugins/panel/piechart/PieChart.tsx @@ -29,7 +29,7 @@ import { import { getTooltipContainerStyles } from '@grafana/ui/src/themes/mixins'; import { useComponentInstanceId } from '@grafana/ui/src/utils/useComponetInstanceId'; -import { PieChartType, PieChartLabels } from './types'; +import { PieChartType, PieChartLabels } from './models.gen'; import { filterDisplayItems, sumDisplayItemsReducer } from './utils'; /** diff --git a/public/app/plugins/panel/piechart/PieChartPanel.test.tsx b/public/app/plugins/panel/piechart/PieChartPanel.test.tsx index 6fb04623424..787dde97f37 100644 --- a/public/app/plugins/panel/piechart/PieChartPanel.test.tsx +++ b/public/app/plugins/panel/piechart/PieChartPanel.test.tsx @@ -14,7 +14,7 @@ import { import { LegendDisplayMode, SortOrder, TooltipDisplayMode } from '@grafana/schema'; import { PieChartPanel } from './PieChartPanel'; -import { PieChartOptions, PieChartType, PieChartLegendValues } from './types'; +import { PanelOptions, PieChartType, PieChartLegendValues } from './models.gen'; type PieChartPanelProps = ComponentProps; @@ -166,7 +166,7 @@ const setup = (propsOverrides?: {}) => { overrides: [], }; - const options: PieChartOptions = { + const options: PanelOptions = { pieType: PieChartType.Pie, displayLabels: [], legend: { diff --git a/public/app/plugins/panel/piechart/PieChartPanel.tsx b/public/app/plugins/panel/piechart/PieChartPanel.tsx index 59747377ce5..a4f92de212b 100644 --- a/public/app/plugins/panel/piechart/PieChartPanel.tsx +++ b/public/app/plugins/panel/piechart/PieChartPanel.tsx @@ -22,7 +22,7 @@ import { } from '@grafana/ui'; import { PieChart } from './PieChart'; -import { PieChartLegendOptions, PieChartLegendValues, PieChartOptions } from './types'; +import { PieChartLegendOptions, PieChartLegendValues, PanelOptions } from './models.gen'; import { filterDisplayItems, sumDisplayItemsReducer } from './utils'; const defaultLegendOptions: PieChartLegendOptions = { @@ -33,7 +33,7 @@ const defaultLegendOptions: PieChartLegendOptions = { values: [PieChartLegendValues.Percent], }; -interface Props extends PanelProps {} +interface Props extends PanelProps {} /** * @beta diff --git a/public/app/plugins/panel/piechart/migrations.test.ts b/public/app/plugins/panel/piechart/migrations.test.ts index b9ff1741497..82e1718e482 100644 --- a/public/app/plugins/panel/piechart/migrations.test.ts +++ b/public/app/plugins/panel/piechart/migrations.test.ts @@ -1,7 +1,7 @@ import { FieldColorModeId, FieldConfigProperty, FieldMatcherID, PanelModel } from '@grafana/data'; import { PieChartPanelChangedHandler } from './migrations'; -import { PieChartLabels } from './types'; +import { PieChartLabels } from './models.gen'; describe('PieChart -> PieChartV2 migrations', () => { it('only migrates old piechart', () => { diff --git a/public/app/plugins/panel/piechart/migrations.ts b/public/app/plugins/panel/piechart/migrations.ts index 994c73944cf..86af4b938a4 100644 --- a/public/app/plugins/panel/piechart/migrations.ts +++ b/public/app/plugins/panel/piechart/migrations.ts @@ -1,17 +1,17 @@ import { FieldColorModeId, FieldConfigProperty, FieldMatcherID, PanelModel } from '@grafana/data'; import { LegendDisplayMode } from '@grafana/schema'; -import { PieChartOptions, PieChartLabels, PieChartLegendValues, PieChartType } from './types'; +import { PanelOptions, PieChartLabels, PieChartLegendValues, PieChartType } from './models.gen'; export const PieChartPanelChangedHandler = ( - panel: PanelModel> | any, + panel: PanelModel> | any, prevPluginId: string, prevOptions: any ) => { if (prevPluginId === 'grafana-piechart-panel' && prevOptions.angular) { const angular = prevOptions.angular; const overrides = []; - let options: PieChartOptions = panel.options; + let options: PanelOptions = panel.options; // Migrate color overrides for series if (angular.aliasColors) { diff --git a/public/app/plugins/panel/piechart/models.cue b/public/app/plugins/panel/piechart/models.cue new file mode 100644 index 00000000000..cda91be4d7a --- /dev/null +++ b/public/app/plugins/panel/piechart/models.cue @@ -0,0 +1,56 @@ +// Copyright 2022 Grafana Labs +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +package grafanaschema + +import ( + "github.com/grafana/thema" + ui "github.com/grafana/grafana/packages/grafana-schema/src/schema" +) + +Panel: thema.#Lineage & { + name: "piechart" + seqs: [ + { + schemas: [ + // v0.0 + { + // Select the pie chart display style. + PieChartType: "pie" | "donut" @cuetsy(kind="enum") + // Select labels to display on the pie chart. + // - Name - The series or field name. + // - Percent - The percentage of the whole. + // - Value - The raw numerical value. + PieChartLabels: "name" | "value" | "percent" @cuetsy(kind="enum") + // Select values to display in the legend. + // - Percent: The percentage of the whole. + // - Value: The raw numerical value. + PieChartLegendValues: "value" | "percent" @cuetsy(kind="enum") + PieChartLegendOptions: { + ui.VizLegendOptions + values: [...PieChartLegendValues] + } @cuetsy(kind="interface") + PanelOptions: { + ui.OptionsWithTooltip + ui.SingleStatBaseOptions + pieType: PieChartType + displayLabels: [...PieChartLabels] + legend: PieChartLegendOptions + } @cuetsy(kind="interface") + PanelFieldConfig: ui.HideableFieldConfig @cuetsy(kind="interface") + }, + ] + }, + ] +} diff --git a/public/app/plugins/panel/piechart/models.gen.ts b/public/app/plugins/panel/piechart/models.gen.ts new file mode 100644 index 00000000000..4371a091802 --- /dev/null +++ b/public/app/plugins/panel/piechart/models.gen.ts @@ -0,0 +1,46 @@ +//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +// This file is autogenerated. DO NOT EDIT. +// +// To regenerate, run "make gen-cue" from the repository root. +//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +import * as ui from '@grafana/schema'; + +export const modelVersion = Object.freeze([0, 0]); + + +export enum PieChartType { + Donut = 'donut', + Pie = 'pie', +} + +export enum PieChartLabels { + Name = 'name', + Percent = 'percent', + Value = 'value', +} + +export enum PieChartLegendValues { + Percent = 'percent', + Value = 'value', +} + +export interface PieChartLegendOptions extends ui.VizLegendOptions { + values: PieChartLegendValues[]; +} + +export const defaultPieChartLegendOptions: Partial = { + values: [], +}; + +export interface PanelOptions extends ui.OptionsWithTooltip, ui.SingleStatBaseOptions { + displayLabels: PieChartLabels[]; + legend: PieChartLegendOptions; + pieType: PieChartType; +} + +export const defaultPanelOptions: Partial = { + displayLabels: [], +}; + +export interface PanelFieldConfig extends ui.HideableFieldConfig {} diff --git a/public/app/plugins/panel/piechart/module.tsx b/public/app/plugins/panel/piechart/module.tsx index 19984b51964..dd60f40aeb2 100644 --- a/public/app/plugins/panel/piechart/module.tsx +++ b/public/app/plugins/panel/piechart/module.tsx @@ -5,10 +5,10 @@ import { addStandardDataReduceOptions } from '../stat/common'; import { PieChartPanel } from './PieChartPanel'; import { PieChartPanelChangedHandler } from './migrations'; +import { PanelOptions, PanelFieldConfig, PieChartType, PieChartLabels, PieChartLegendValues } from './models.gen'; import { PieChartSuggestionsSupplier } from './suggestions'; -import { PieChartOptions, PieChartType, PieChartLabels, PieChartLegendValues } from './types'; -export const plugin = new PanelPlugin(PieChartPanel) +export const plugin = new PanelPlugin(PieChartPanel) .setPanelChangeHandler(PieChartPanelChangedHandler) .useFieldConfig({ disableStandardOptions: [FieldConfigProperty.Thresholds], diff --git a/public/app/plugins/panel/piechart/suggestions.ts b/public/app/plugins/panel/piechart/suggestions.ts index f26643e3d82..74c7a890a74 100644 --- a/public/app/plugins/panel/piechart/suggestions.ts +++ b/public/app/plugins/panel/piechart/suggestions.ts @@ -1,11 +1,11 @@ import { VisualizationSuggestionsBuilder } from '@grafana/data'; import { SuggestionName } from 'app/types/suggestions'; -import { PieChartLabels, PieChartOptions, PieChartType } from './types'; +import { PieChartLabels, PanelOptions, PieChartType } from './models.gen'; export class PieChartSuggestionsSupplier { getSuggestionsForData(builder: VisualizationSuggestionsBuilder) { - const list = builder.getListAppender({ + const list = builder.getListAppender({ name: SuggestionName.PieChart, pluginId: 'piechart', options: { diff --git a/public/app/plugins/panel/piechart/types.ts b/public/app/plugins/panel/piechart/types.ts deleted file mode 100644 index 4e0a3f48e13..00000000000 --- a/public/app/plugins/panel/piechart/types.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { VizLegendOptions, OptionsWithTooltip } from '@grafana/schema'; -import { SingleStatBaseOptions } from '@grafana/ui'; - -/** - * @beta - */ -export enum PieChartType { - Pie = 'pie', - Donut = 'donut', -} - -/** - * @beta - */ -export enum PieChartLegendValues { - Value = 'value', - Percent = 'percent', -} - -/** - * @beta - */ -export enum PieChartLabels { - Name = 'name', - Value = 'value', - Percent = 'percent', -} - -/** - * @beta - */ -export interface PieChartLegendOptions extends VizLegendOptions { - values: PieChartLegendValues[]; -} - -export interface PieChartOptions extends SingleStatBaseOptions, OptionsWithTooltip { - pieType: PieChartType; - displayLabels: PieChartLabels[]; - legend: PieChartLegendOptions; -}