IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-24 09:50:29 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Zoltán Bedi 2022-08-18 14:46:36 +02:00 committed by GitHub
parent 329aab7395
commit ea5e58a051
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 188 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
pkg/codegen/pluggen.go
View File

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

40
public/app/plugins/panel/barchart/models.cue
View File

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

65
public/app/plugins/panel/barchart/models.gen.ts
View File

@ -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<PanelOptions> = {
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<PanelFieldConfig> = {
fillOpacity: 80,
gradientMode: GraphGradientMode.None,
gradientMode: ui.GraphGradientMode.None,
lineWidth: 1,
};

6
public/app/plugins/panel/barchart/module.tsx
View File

@ -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({

4
public/app/plugins/panel/barchart/suggestions.ts
View File

@ -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: {

6
public/app/plugins/panel/barchart/utils.test.ts
View File

@ -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',

4
public/app/plugins/panel/barchart/utils.ts
View File

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

2
public/app/plugins/panel/piechart/PieChart.tsx
View File

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

4
public/app/plugins/panel/piechart/PieChartPanel.test.tsx
View File

@ -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: {

4
public/app/plugins/panel/piechart/PieChartPanel.tsx
View File

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

2
public/app/plugins/panel/piechart/migrations.test.ts
View File

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

6
public/app/plugins/panel/piechart/migrations.ts
View File

@ -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) {

56
public/app/plugins/panel/piechart/models.cue Normal file
View File

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

46
public/app/plugins/panel/piechart/models.gen.ts Normal file
View File

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

4
public/app/plugins/panel/piechart/module.tsx
View File

@ -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],

4
public/app/plugins/panel/piechart/suggestions.ts
View File

@ -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: {

40
public/app/plugins/panel/piechart/types.ts
View File

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