BarChart/PieChart: create/update models.cue (#52988)

* Reverse engineering barchart models.cue from models.gen.ts

* Barchart models.cue and import fixes

* Add models.cue for piechart

* Use single-item syntax to dodge cuetsy bug

* Add some docs

Co-authored-by: sam boyer <sdboyer@grafana.com>

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",

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 docs
-						// TODO this default is a guess based on common devenv values
+						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
+						// This controls whether values are shown on top or to the left of bars.
-						barWidth:   number
+						showValue:  ui.VisibilityMode | *"auto"
-						groupWidth: number
+						// 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
+						// Controls line width of the bars.
-						fillOpacity?:  number
+						lineWidth?:    int32 & >= 0 & <= 10 | *1
-						gradientMode?: ui.GraphGradientMode
+						// 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")
 				},
 			]

public/app/plugins/panel/barchart/models.gen.ts

@@ -1,48 +1,47 @@
-import {
+//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-  OptionsWithLegend,
+// This file is autogenerated. DO NOT EDIT.
-  OptionsWithTextFormatting,
+//
-  OptionsWithTooltip,
+// To regenerate, run "make gen-cue" from the repository root.
-  AxisConfig,
+//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-  VisibilityMode,
-  GraphGradientMode,
-  HideableFieldConfig,
-  StackingMode,
-} from '@grafana/schema';
-import { VizOrientation } from '@grafana/data';
 
-export interface PanelOptions extends OptionsWithLegend, OptionsWithTooltip, OptionsWithTextFormatting {
+import * as ui from '@grafana/schema';
-  xField?: string;
+
-  colorByField?: string;
+export const modelVersion = Object.freeze([0, 0]);
-  orientation: VizOrientation;
+
-  stacking: StackingMode;
+
-  showValue: VisibilityMode;
+export interface PanelOptions extends ui.OptionsWithLegend, ui.OptionsWithTooltip, ui.OptionsWithTextFormatting {
-  barWidth: number;
   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<PanelOptions> = {
-  stacking: StackingMode.None,
+  barRadius: 0,
-  orientation: VizOrientation.Auto,
+  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 {
+export interface PanelFieldConfig extends ui.AxisConfig, ui.HideableFieldConfig {
-  lineWidth?: number; // 0
+  fillOpacity?: number;
-  fillOpacity?: number; // 100
+  gradientMode?: ui.GraphGradientMode;
-  gradientMode?: GraphGradientMode;
+  lineWidth?: number;
 }
 
-export const defaultBarChartFieldConfig: BarChartFieldConfig = {
+export const defaultPanelFieldConfig: Partial<PanelFieldConfig> = {
-  lineWidth: 1,
   fillOpacity: 80,
-  gradientMode: GraphGradientMode.None,
+  gradientMode: ui.GraphGradientMode.None,
+  lineWidth: 1,
 };

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<PanelOptions, BarChartFieldConfig>(BarChartPanel)
+export const plugin = new PanelPlugin<PanelOptions, PanelFieldConfig>(BarChartPanel)
   .useFieldConfig({
     standardOptions: {
       [FieldConfigProperty.Color]: {
@@ -31,7 +31,7 @@ export const plugin = new PanelPlugin<PanelOptions, BarChartFieldConfig>(BarChar
       },
     },
     useCustomConfig: (builder) => {
-      const cfg = defaultBarChartFieldConfig;
+      const cfg = defaultPanelFieldConfig;
 
       builder
         .addSliderInput({

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<PanelOptions, BarChartFieldConfig>({
+    return builder.getListAppender<PanelOptions, PanelFieldConfig>({
       name: SuggestionName.BarChart,
       pluginId: 'barchart',
       options: {

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<BarChartFieldConfig> = {
+  const f1Config: FieldConfig<PanelFieldConfig> = {
     displayName: 'Metric 1',
     decimals: 2,
     unit: 'm/s',
@@ -44,7 +44,7 @@ function mockDataFrame() {
     },
   };
 
-  const f2Config: FieldConfig<BarChartFieldConfig> = {
+  const f2Config: FieldConfig<PanelFieldConfig> = {
     displayName: 'Metric 2',
     decimals: 2,
     unit: 'kWh',

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<BarChartOptionsEX> = ({
 
     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);

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';
 
 /**

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<typeof PieChartPanel>;
 
@@ -166,7 +166,7 @@ const setup = (propsOverrides?: {}) => {
     overrides: [],
   };
 
-  const options: PieChartOptions = {
+  const options: PanelOptions = {
     pieType: PieChartType.Pie,
     displayLabels: [],
     legend: {

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<PieChartOptions> {}
+interface Props extends PanelProps<PanelOptions> {}
 
 /**
  * @beta

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', () => {

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<Partial<PieChartOptions>> | any,
+  panel: PanelModel<Partial<PanelOptions>> | 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) {

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")
+				},
+			]
+		},
+	]
+}

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<PieChartLegendOptions> = {
+  values: [],
+};
+
+export interface PanelOptions extends ui.OptionsWithTooltip, ui.SingleStatBaseOptions {
+  displayLabels: PieChartLabels[];
+  legend: PieChartLegendOptions;
+  pieType: PieChartType;
+}
+
+export const defaultPanelOptions: Partial<PanelOptions> = {
+  displayLabels: [],
+};
+
+export interface PanelFieldConfig extends ui.HideableFieldConfig {}

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<PieChartOptions>(PieChartPanel)
+export const plugin = new PanelPlugin<PanelOptions, PanelFieldConfig>(PieChartPanel)
   .setPanelChangeHandler(PieChartPanelChangedHandler)
   .useFieldConfig({
     disableStandardOptions: [FieldConfigProperty.Thresholds],

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<PieChartOptions, {}>({
+    const list = builder.getListAppender<PanelOptions, {}>({
       name: SuggestionName.PieChart,
       pluginId: 'piechart',
       options: {

public/app/plugins/panel/piechart/types.ts

@@ -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;
-}