From e1bc3fad83919e9b9837d9215a2eb74da1ac5711 Mon Sep 17 00:00:00 2001 From: Victor Marin <36818606+mdvictor@users.noreply.github.com> Date: Wed, 1 Mar 2023 17:47:21 +0200 Subject: [PATCH] Heatmap: Migrate to CUE (#62173) * IP migrate heatmap to cue * WIP * refactor * change usages and refactor panelcfg * CR modifications and docs * refactor, enable heatmap cue generation, overwrite enum values in types.ts * small refactor * refactor types.ts * cr modifications * docs --- .betterer.results | 3 + .../heatmappanelcfg/schema-reference.md | 229 +++++++++++++++ .../grafana-schema/src/common/common.gen.ts | 38 +++ .../grafana-schema/src/common/heatmap.cue | 21 ++ pkg/kindsys/report.json | 30 +- pkg/plugins/pfs/corelist/corelist_load_gen.go | 1 + .../calculateHeatmap/editor/AxisEditor.tsx | 3 +- .../calculateHeatmap/editor/helper.ts | 4 +- .../calculateHeatmap/heatmap.test.ts | 2 +- .../transformers/calculateHeatmap/heatmap.ts | 8 +- .../calculateHeatmap/models.gen.ts | 24 -- public/app/plugins/gen.go | 1 - .../panel/heatmap/HeatmapHoverView.tsx | 2 +- .../plugins/panel/heatmap/HeatmapPanel.tsx | 2 +- .../app/plugins/panel/heatmap/fields.test.ts | 2 +- public/app/plugins/panel/heatmap/fields.ts | 4 +- .../app/plugins/panel/heatmap/migrations.ts | 8 +- .../app/plugins/panel/heatmap/models.gen.ts | 133 --------- public/app/plugins/panel/heatmap/module.tsx | 11 +- public/app/plugins/panel/heatmap/palettes.ts | 2 +- public/app/plugins/panel/heatmap/panelcfg.cue | 138 ++++++++- .../app/plugins/panel/heatmap/panelcfg.gen.ts | 271 ++++++++++++++++++ .../app/plugins/panel/heatmap/suggestions.ts | 2 +- public/app/plugins/panel/heatmap/types.ts | 17 ++ public/app/plugins/panel/heatmap/utils.ts | 5 +- 25 files changed, 773 insertions(+), 188 deletions(-) create mode 100644 docs/sources/developers/kinds/composable/heatmappanelcfg/schema-reference.md create mode 100644 packages/grafana-schema/src/common/heatmap.cue delete mode 100644 public/app/features/transformers/calculateHeatmap/models.gen.ts delete mode 100644 public/app/plugins/panel/heatmap/models.gen.ts create mode 100644 public/app/plugins/panel/heatmap/panelcfg.gen.ts create mode 100644 public/app/plugins/panel/heatmap/types.ts diff --git a/.betterer.results b/.betterer.results index 85a1ffd7e09..b57002431f4 100644 --- a/.betterer.results +++ b/.betterer.results @@ -6476,6 +6476,9 @@ exports[`better eslint`] = { [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] ], + "public/app/plugins/panel/heatmap/types.ts:5381": [ + [0, 0, 0, "Do not use any type assertions.", "0"] + ], "public/app/plugins/panel/heatmap/utils.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "1"], diff --git a/docs/sources/developers/kinds/composable/heatmappanelcfg/schema-reference.md b/docs/sources/developers/kinds/composable/heatmappanelcfg/schema-reference.md new file mode 100644 index 00000000000..e772ac5789d --- /dev/null +++ b/docs/sources/developers/kinds/composable/heatmappanelcfg/schema-reference.md @@ -0,0 +1,229 @@ +--- +keywords: + - grafana + - schema +title: HeatmapPanelCfg kind +--- +> Both documentation generation and kinds schemas are in active development and subject to change without prior notice. + +## HeatmapPanelCfg + +#### Maturity: [merged](../../../maturity/#merged) +#### Version: 0.0 + + + +| Property | Type | Required | Description | +|-----------------------|--------------------------------|----------|-------------------------------------------------------------------------------------------| +| `CellValues` | [object](#cellvalues) | **Yes** | Controls cell value options | +| `ExemplarConfig` | [object](#exemplarconfig) | **Yes** | Controls exemplar options | +| `FilterValueRange` | [object](#filtervaluerange) | **Yes** | Controls the value filter range | +| `HeatmapColorMode` | string | **Yes** | Controls the color mode of the heatmap
Possible values are: `opacity`, `scheme`. | +| `HeatmapColorOptions` | [object](#heatmapcoloroptions) | **Yes** | Controls various color options | +| `HeatmapColorScale` | string | **Yes** | Controls the color scale of the heatmap
Possible values are: `linear`, `exponential`. | +| `HeatmapLegend` | [object](#heatmaplegend) | **Yes** | Controls legend options | +| `HeatmapTooltip` | [object](#heatmaptooltip) | **Yes** | Controls tooltip options | +| `PanelFieldConfig` | [object](#panelfieldconfig) | **Yes** | | +| `PanelOptions` | [object](#paneloptions) | **Yes** | | +| `RowsHeatmapOptions` | [object](#rowsheatmapoptions) | **Yes** | Controls frame rows options | +| `YAxisConfig` | [object](#yaxisconfig) | **Yes** | Configuration options for the yAxis | + +### CellValues + +Controls cell value options + +| Property | Type | Required | Description | +|------------|--------|----------|-------------------------------------------------| +| `decimals` | number | No | Controls the number of decimals for cell values | +| `unit` | string | No | Controls the cell value unit | + +### ExemplarConfig + +Controls exemplar options + +| Property | Type | Required | Description | +|----------|--------|----------|----------------------------------------| +| `color` | string | **Yes** | Sets the color of the exemplar markers | + +### FilterValueRange + +Controls the value filter range + +| Property | Type | Required | Description | +|----------|--------|----------|--------------------------------------------------------------------------| +| `ge` | number | No | Sets the filter range to values greater than or equal to the given value | +| `le` | number | No | Sets the filter range to values less than or equal to the given value | + +### HeatmapColorOptions + +Controls various color options + +| Property | Type | Required | Description | +|------------|---------|----------|-------------------------------------------------------------------------------------------| +| `exponent` | number | **Yes** | Controls the exponent when scale is set to exponential | +| `fill` | string | **Yes** | Controls the color fill when in opacity mode | +| `reverse` | boolean | **Yes** | Reverses the color scheme | +| `scheme` | string | **Yes** | Controls the color scheme used | +| `steps` | integer | **Yes** | Controls the number of color steps
Constraint: `>=2 & <=128`. | +| `max` | number | No | Sets the maximum value for the color scale | +| `min` | number | No | Sets the minimum value for the color scale | +| `mode` | string | No | Controls the color mode of the heatmap
Possible values are: `opacity`, `scheme`. | +| `scale` | string | No | Controls the color scale of the heatmap
Possible values are: `linear`, `exponential`. | + +### HeatmapLegend + +Controls legend options + +| Property | Type | Required | Description | +|----------|---------|----------|---------------------------------| +| `show` | boolean | **Yes** | Controls if the legend is shown | + +### HeatmapTooltip + +Controls tooltip options + +| Property | Type | Required | Description | +|--------------|---------|----------|----------------------------------------------------------------| +| `show` | boolean | **Yes** | Controls if the tooltip is shown | +| `yHistogram` | boolean | No | Controls if the tooltip shows a histogram of the y-axis values | + +### PanelFieldConfig + +It extends [HideableFieldConfig](#hideablefieldconfig). + +| Property | Type | Required | Description | +|---------------------|-----------------------------------------------------|----------|------------------------------------------------------------------------------| +| `hideFrom` | [HideSeriesConfig](#hideseriesconfig) | No | *(Inherited from [HideableFieldConfig](#hideablefieldconfig))*
TODO docs | +| `scaleDistribution` | [ScaleDistributionConfig](#scaledistributionconfig) | No | TODO docs | + +### HideSeriesConfig + +TODO docs + +| Property | Type | Required | Description | +|-----------|---------|----------|-------------| +| `legend` | boolean | **Yes** | | +| `tooltip` | boolean | **Yes** | | +| `viz` | boolean | **Yes** | | + +### HideableFieldConfig + +TODO docs + +| Property | Type | Required | Description | +|------------|---------------------------------------|----------|-------------| +| `hideFrom` | [HideSeriesConfig](#hideseriesconfig) | No | TODO docs | + +### ScaleDistributionConfig + +TODO docs + +| Property | Type | Required | Description | +|-------------------|--------|----------|--------------------------------------------------------------------------| +| `type` | string | **Yes** | TODO docs
Possible values are: `linear`, `log`, `ordinal`, `symlog`. | +| `linearThreshold` | number | No | | +| `log` | number | No | | + +### PanelOptions + +| Property | Type | Required | Description | +|----------------|---------------------------------------------------------|----------|-----------------------------------------------------------------------------------------------------------------| +| `color` | [object](#color) | **Yes** | Controls the color options Default: `map[exponent:0.5 fill:dark-orange reverse:false scheme:Oranges steps:64]`. | +| `exemplars` | [ExemplarConfig](#exemplarconfig) | **Yes** | Controls exemplar options | +| `legend` | [HeatmapLegend](#heatmaplegend) | **Yes** | Controls legend options | +| `showValue` | string | **Yes** | TODO docs
Possible values are: `auto`, `never`, `always`. | +| `tooltip` | [HeatmapTooltip](#heatmaptooltip) | **Yes** | Controls tooltip options | +| `yAxis` | [YAxisConfig](#yaxisconfig) | **Yes** | Configuration options for the yAxis | +| `calculate` | boolean | No | Controls if the heatmap should be calculated from data Default: `false`. | +| `calculation` | [HeatmapCalculationOptions](#heatmapcalculationoptions) | No | | +| `cellGap` | integer | No | Controls gap between cells Default: `1`.
Constraint: `>=0 & <=25`. | +| `cellRadius` | number | No | Controls cell radius | +| `cellValues` | [object](#cellvalues) | No | Controls cell value unit Default: `map[]`. | +| `filterValues` | [object](#filtervalues) | No | Filters values between a given range Default: `map[le:1e-09]`. | +| `rowsFrame` | [RowsHeatmapOptions](#rowsheatmapoptions) | No | Controls frame rows options | + +### HeatmapCalculationOptions + +| Property | Type | Required | Description | +|------------|-------------------------------------------------------------------|----------|-------------| +| `xBuckets` | [HeatmapCalculationBucketConfig](#heatmapcalculationbucketconfig) | No | | +| `yBuckets` | [HeatmapCalculationBucketConfig](#heatmapcalculationbucketconfig) | No | | + +### HeatmapCalculationBucketConfig + +| Property | Type | Required | Description | +|----------|-----------------------------------------------------|----------|----------------------------------------------------------| +| `mode` | string | No | Possible values are: `size`, `count`. | +| `scale` | [ScaleDistributionConfig](#scaledistributionconfig) | No | TODO docs | +| `value` | string | No | The number of buckets to use for the axis in the heatmap | + +### RowsHeatmapOptions + +Controls frame rows options + +| Property | Type | Required | Description | +|----------|--------|----------|----------------------------------------------------------| +| `layout` | string | No | Possible values are: `le`, `ge`, `unknown`, `auto`. | +| `value` | string | No | Sets the name of the cell when not calculating from data | + +### YAxisConfig + +Configuration options for the yAxis + +It extends [AxisConfig](#axisconfig). + +| Property | Type | Required | Description | +|---------------------|-----------------------------------------------------|----------|-----------------------------------------------------------------------------------------------------------------------------------------| +| `axisCenteredZero` | boolean | No | *(Inherited from [AxisConfig](#axisconfig))* | +| `axisColorMode` | string | No | *(Inherited from [AxisConfig](#axisconfig))*
TODO docs
Possible values are: `text`, `series`. | +| `axisGridShow` | boolean | No | *(Inherited from [AxisConfig](#axisconfig))* | +| `axisLabel` | string | No | *(Inherited from [AxisConfig](#axisconfig))* | +| `axisPlacement` | string | No | *(Inherited from [AxisConfig](#axisconfig))*
TODO docs
Possible values are: `auto`, `top`, `right`, `bottom`, `left`, `hidden`. | +| `axisSoftMax` | number | No | *(Inherited from [AxisConfig](#axisconfig))* | +| `axisSoftMin` | number | No | *(Inherited from [AxisConfig](#axisconfig))* | +| `axisWidth` | number | No | *(Inherited from [AxisConfig](#axisconfig))* | +| `decimals` | number | No | Controls the number of decimals for yAxis values | +| `max` | number | No | Sets the maximum value for the yAxis | +| `min` | number | No | Sets the minimum value for the yAxis | +| `reverse` | boolean | No | Reverses the yAxis | +| `scaleDistribution` | [ScaleDistributionConfig](#scaledistributionconfig) | No | *(Inherited from [AxisConfig](#axisconfig))*
TODO docs | +| `unit` | string | No | Sets the yAxis unit | + +### AxisConfig + +TODO docs + +| Property | Type | Required | Description | +|---------------------|-----------------------------------------------------|----------|----------------------------------------------------------------------------------------| +| `axisCenteredZero` | boolean | No | | +| `axisColorMode` | string | No | TODO docs
Possible values are: `text`, `series`. | +| `axisGridShow` | boolean | No | | +| `axisLabel` | string | No | | +| `axisPlacement` | string | No | TODO docs
Possible values are: `auto`, `top`, `right`, `bottom`, `left`, `hidden`. | +| `axisSoftMax` | number | No | | +| `axisSoftMin` | number | No | | +| `axisWidth` | number | No | | +| `scaleDistribution` | [ScaleDistributionConfig](#scaledistributionconfig) | No | TODO docs | + +### CellValues + +Controls cell value unit + +| Property | Type | Required | Description | +|----------|------|----------|-------------| + +### Color + +Controls the color options + +| Property | Type | Required | Description | +|----------|------|----------|-------------| + +### FilterValues + +Filters values between a given range + +| Property | Type | Required | Description | +|----------|------|----------|-------------| + + diff --git a/packages/grafana-schema/src/common/common.gen.ts b/packages/grafana-schema/src/common/common.gen.ts index e59223cdd7f..c2e59ea3d02 100644 --- a/packages/grafana-schema/src/common/common.gen.ts +++ b/packages/grafana-schema/src/common/common.gen.ts @@ -109,6 +109,33 @@ export enum FrameGeometrySourceMode { Lookup = 'lookup', } +export enum HeatmapCalculationMode { + Count = 'count', + Size = 'size', +} + +export enum HeatmapCellLayout { + auto = 'auto', + ge = 'ge', + le = 'le', + unknown = 'unknown', +} + +export interface HeatmapCalculationBucketConfig { + /** + * Sets the bucket calculation mode + */ + mode?: HeatmapCalculationMode; + /** + * Controls the scale of the buckets + */ + scale?: ScaleDistributionConfig; + /** + * The number of buckets to use for the axis in the heatmap + */ + value?: string; +} + export enum LogsSortOrder { Ascending = 'Ascending', Descending = 'Descending', @@ -702,6 +729,17 @@ export interface FrameGeometrySource { wkt?: string; } +export interface HeatmapCalculationOptions { + /** + * The number of buckets to use for the xAxis in the heatmap + */ + xBuckets?: HeatmapCalculationBucketConfig; + /** + * The number of buckets to use for the yAxis in the heatmap + */ + yBuckets?: HeatmapCalculationBucketConfig; +} + export enum LogsDedupStrategy { exact = 'exact', none = 'none', diff --git a/packages/grafana-schema/src/common/heatmap.cue b/packages/grafana-schema/src/common/heatmap.cue new file mode 100644 index 00000000000..4378169a58e --- /dev/null +++ b/packages/grafana-schema/src/common/heatmap.cue @@ -0,0 +1,21 @@ +package common + +HeatmapCalculationMode: "size" | "count" @cuetsy(kind="enum") + +HeatmapCellLayout: "le" | "ge" | "unknown" | "auto" @cuetsy(kind="enum",memberNames="le|ge|unknown|auto") + +HeatmapCalculationBucketConfig: { + // Sets the bucket calculation mode + mode?: HeatmapCalculationMode + // The number of buckets to use for the axis in the heatmap + value?: string + // Controls the scale of the buckets + scale?: ScaleDistributionConfig +} @cuetsy(kind="interface") + +HeatmapCalculationOptions: { + // The number of buckets to use for the xAxis in the heatmap + xBuckets?: HeatmapCalculationBucketConfig + // The number of buckets to use for the yAxis in the heatmap + yBuckets?: HeatmapCalculationBucketConfig +} @cuetsy(kind="interface") \ No newline at end of file diff --git a/pkg/kindsys/report.json b/pkg/kindsys/report.json index bded12bcef3..4f4268c1d28 100644 --- a/pkg/kindsys/report.json +++ b/pkg/kindsys/report.json @@ -746,6 +746,30 @@ "pluralName": "GraphOldPanelCfgs", "schemaInterface": "PanelCfg" }, + "heatmappanelcfg": { + "category": "composable", + "codeowners": [ + "grafana/dataviz-squad" + ], + "currentVersion": [ + 0, + 0 + ], + "grafanaMaturityCount": 0, + "lineageIsGroup": true, + "links": { + "docs": "https://grafana.com/docs/grafana/next/developers/kinds/composable/heatmappanelcfg/schema-reference", + "go": "n/a", + "schema": "https://github.com/grafana/grafana/tree/main/public/app/plugins/panel/heatmap/panelcfg.cue", + "ts": "https://github.com/grafana/grafana/tree/main/public/app/plugins/panel/heatmap/panelcfg.gen.ts" + }, + "machineName": "heatmappanelcfg", + "maturity": "merged", + "name": "HeatmapPanelCfg", + "pluralMachineName": "heatmappanelcfgs", + "pluralName": "HeatmapPanelCfgs", + "schemaInterface": "PanelCfg" + }, "histogrampanelcfg": { "category": "composable", "codeowners": [ @@ -1920,6 +1944,7 @@ "graphitedataquery", "graphitedatasourcecfg", "grapholdpanelcfg", + "heatmappanelcfg", "histogrampanelcfg", "iconpanelcfg", "jaegerdataquery", @@ -1958,7 +1983,7 @@ "zipkindataquery", "zipkindatasourcecfg" ], - "count": 65 + "count": 66 }, "core": { "name": "core", @@ -2024,13 +2049,14 @@ "alertgroupspanelcfg", "azuremonitordataquery", "cloudwatchdataquery", + "heatmappanelcfg", "playlist", "preferences", "publicdashboard", "serviceaccount", "team" ], - "count": 8 + "count": 9 }, "planned": { "name": "planned", diff --git a/pkg/plugins/pfs/corelist/corelist_load_gen.go b/pkg/plugins/pfs/corelist/corelist_load_gen.go index 69da6c60947..eededc3e61b 100644 --- a/pkg/plugins/pfs/corelist/corelist_load_gen.go +++ b/pkg/plugins/pfs/corelist/corelist_load_gen.go @@ -63,6 +63,7 @@ func corePlugins(rt *thema.Runtime) []pfs.ParsedPlugin { parsePluginOrPanic("public/app/plugins/panel/geomap", "geomap", rt), parsePluginOrPanic("public/app/plugins/panel/gettingstarted", "gettingstarted", rt), parsePluginOrPanic("public/app/plugins/panel/graph", "graph", rt), + parsePluginOrPanic("public/app/plugins/panel/heatmap", "heatmap", rt), parsePluginOrPanic("public/app/plugins/panel/histogram", "histogram", rt), parsePluginOrPanic("public/app/plugins/panel/icon", "icon", rt), parsePluginOrPanic("public/app/plugins/panel/live", "live", rt), diff --git a/public/app/features/transformers/calculateHeatmap/editor/AxisEditor.tsx b/public/app/features/transformers/calculateHeatmap/editor/AxisEditor.tsx index 64b45a5d894..4fbabc0c383 100644 --- a/public/app/features/transformers/calculateHeatmap/editor/AxisEditor.tsx +++ b/public/app/features/transformers/calculateHeatmap/editor/AxisEditor.tsx @@ -1,10 +1,9 @@ import React from 'react'; import { SelectableValue, StandardEditorProps } from '@grafana/data'; +import { HeatmapCalculationBucketConfig, HeatmapCalculationMode } from '@grafana/schema'; import { HorizontalGroup, Input, RadioButtonGroup, ScaleDistribution } from '@grafana/ui'; -import { HeatmapCalculationBucketConfig, HeatmapCalculationMode } from '../models.gen'; - const modeOptions: Array> = [ { label: 'Size', diff --git a/public/app/features/transformers/calculateHeatmap/editor/helper.ts b/public/app/features/transformers/calculateHeatmap/editor/helper.ts index 4498baf9228..707884dbadd 100644 --- a/public/app/features/transformers/calculateHeatmap/editor/helper.ts +++ b/public/app/features/transformers/calculateHeatmap/editor/helper.ts @@ -1,9 +1,7 @@ import { PanelOptionsEditorBuilder } from '@grafana/data'; -import { ScaleDistribution } from '@grafana/schema'; +import { ScaleDistribution, HeatmapCalculationMode, HeatmapCalculationOptions } from '@grafana/schema'; import { ScaleDistributionEditor } from '@grafana/ui/src/options/builder'; -import { HeatmapCalculationMode, HeatmapCalculationOptions } from '../models.gen'; - import { AxisEditor } from './AxisEditor'; export function addHeatmapCalculationOptions( diff --git a/public/app/features/transformers/calculateHeatmap/heatmap.test.ts b/public/app/features/transformers/calculateHeatmap/heatmap.test.ts index bff77a8fcff..968cf120079 100644 --- a/public/app/features/transformers/calculateHeatmap/heatmap.test.ts +++ b/public/app/features/transformers/calculateHeatmap/heatmap.test.ts @@ -1,8 +1,8 @@ import { FieldType } from '@grafana/data'; import { toDataFrame } from '@grafana/data/src/dataframe/processDataFrame'; +import { HeatmapCalculationOptions } from '@grafana/schema'; import { rowsToCellsHeatmap, calculateHeatmapFromData } from './heatmap'; -import { HeatmapCalculationOptions } from './models.gen'; describe('Heatmap transformer', () => { it('calculate heatmap from input data', async () => { diff --git a/public/app/features/transformers/calculateHeatmap/heatmap.ts b/public/app/features/transformers/calculateHeatmap/heatmap.ts index c9cb151c245..9710a644256 100644 --- a/public/app/features/transformers/calculateHeatmap/heatmap.ts +++ b/public/app/features/transformers/calculateHeatmap/heatmap.ts @@ -16,9 +16,13 @@ import { durationToMilliseconds, parseDuration, } from '@grafana/data'; -import { ScaleDistribution } from '@grafana/schema'; +import { + ScaleDistribution, + HeatmapCellLayout, + HeatmapCalculationMode, + HeatmapCalculationOptions, +} from '@grafana/schema'; -import { HeatmapCellLayout, HeatmapCalculationMode, HeatmapCalculationOptions } from './models.gen'; import { niceLinearIncrs, niceTimeIncrs } from './utils'; export interface HeatmapTransformerOptions extends HeatmapCalculationOptions { diff --git a/public/app/features/transformers/calculateHeatmap/models.gen.ts b/public/app/features/transformers/calculateHeatmap/models.gen.ts deleted file mode 100644 index a976ae7712a..00000000000 --- a/public/app/features/transformers/calculateHeatmap/models.gen.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { ScaleDistributionConfig } from '@grafana/schema'; - -export enum HeatmapCalculationMode { - Size = 'size', // When exponential, this is "splitFactor" - Count = 'count', -} - -export const enum HeatmapCellLayout { - le = 'le', - ge = 'ge', - unknown = 'unknown', // unknown - auto = 'auto', // becomes unknown -} - -export interface HeatmapCalculationBucketConfig { - mode?: HeatmapCalculationMode; - value?: string; // number or interval string ie 10s, or log "split" divisor - scale?: ScaleDistributionConfig; -} - -export interface HeatmapCalculationOptions { - xBuckets?: HeatmapCalculationBucketConfig; - yBuckets?: HeatmapCalculationBucketConfig; -} diff --git a/public/app/plugins/gen.go b/public/app/plugins/gen.go index c3bdaefc4b8..e567f0a6d0e 100644 --- a/public/app/plugins/gen.go +++ b/public/app/plugins/gen.go @@ -23,7 +23,6 @@ import ( var skipPlugins = map[string]bool{ "canvas": true, - "heatmap": true, "candlestick": true, "table": true, "timeseries": true, diff --git a/public/app/plugins/panel/heatmap/HeatmapHoverView.tsx b/public/app/plugins/panel/heatmap/HeatmapHoverView.tsx index d0d0f19d179..8ffc5efea14 100644 --- a/public/app/plugins/panel/heatmap/HeatmapHoverView.tsx +++ b/public/app/plugins/panel/heatmap/HeatmapHoverView.tsx @@ -9,10 +9,10 @@ import { LinkModel, TimeRange, } from '@grafana/data'; +import { HeatmapCellLayout } from '@grafana/schema'; import { LinkButton, VerticalGroup } from '@grafana/ui'; import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv'; import { isHeatmapCellsDense, readHeatmapRowsCustomMeta } from 'app/features/transformers/calculateHeatmap/heatmap'; -import { HeatmapCellLayout } from 'app/features/transformers/calculateHeatmap/models.gen'; import { DataHoverView } from '../geomap/components/DataHoverView'; diff --git a/public/app/plugins/panel/heatmap/HeatmapPanel.tsx b/public/app/plugins/panel/heatmap/HeatmapPanel.tsx index 5c80756f07d..5ddeaf7b66a 100644 --- a/public/app/plugins/panel/heatmap/HeatmapPanel.tsx +++ b/public/app/plugins/panel/heatmap/HeatmapPanel.tsx @@ -20,8 +20,8 @@ import { isHeatmapCellsDense, readHeatmapRowsCustomMeta } from 'app/features/tra import { HeatmapHoverView } from './HeatmapHoverView'; import { prepareHeatmapData } from './fields'; -import { PanelOptions } from './models.gen'; import { quantizeScheme } from './palettes'; +import { PanelOptions } from './types'; import { HeatmapHoverEvent, prepConfig } from './utils'; interface HeatmapPanelProps extends PanelProps {} diff --git a/public/app/plugins/panel/heatmap/fields.test.ts b/public/app/plugins/panel/heatmap/fields.test.ts index 7bc2e1b1441..3017df328b2 100644 --- a/public/app/plugins/panel/heatmap/fields.test.ts +++ b/public/app/plugins/panel/heatmap/fields.test.ts @@ -1,6 +1,6 @@ import { createTheme } from '@grafana/data'; -import { PanelOptions } from './models.gen'; +import { PanelOptions } from './types'; const theme = createTheme(); diff --git a/public/app/plugins/panel/heatmap/fields.ts b/public/app/plugins/panel/heatmap/fields.ts index 74f0bf429c0..86bd816a90a 100644 --- a/public/app/plugins/panel/heatmap/fields.ts +++ b/public/app/plugins/panel/heatmap/fields.ts @@ -12,15 +12,15 @@ import { ValueFormatter, ValueLinkConfig, } from '@grafana/data'; +import { HeatmapCellLayout } from '@grafana/schema'; import { calculateHeatmapFromData, isHeatmapCellsDense, readHeatmapRowsCustomMeta, rowsToCellsHeatmap, } from 'app/features/transformers/calculateHeatmap/heatmap'; -import { HeatmapCellLayout } from 'app/features/transformers/calculateHeatmap/models.gen'; -import { CellValues, PanelOptions } from './models.gen'; +import { CellValues, PanelOptions } from './types'; import { boundedMinMax } from './utils'; export interface HeatmapData { diff --git a/public/app/plugins/panel/heatmap/migrations.ts b/public/app/plugins/panel/heatmap/migrations.ts index 7c27f53e04e..b55deb3d3b7 100644 --- a/public/app/plugins/panel/heatmap/migrations.ts +++ b/public/app/plugins/panel/heatmap/migrations.ts @@ -1,13 +1,15 @@ import { FieldConfigSource, PanelModel, PanelTypeChangedHandler } from '@grafana/data'; -import { AxisPlacement, ScaleDistribution, VisibilityMode } from '@grafana/schema'; import { + AxisPlacement, + ScaleDistribution, + VisibilityMode, HeatmapCellLayout, HeatmapCalculationMode, HeatmapCalculationOptions, -} from 'app/features/transformers/calculateHeatmap/models.gen'; +} from '@grafana/schema'; -import { PanelOptions, defaultPanelOptions, HeatmapColorMode } from './models.gen'; import { colorSchemes } from './palettes'; +import { PanelOptions, defaultPanelOptions, HeatmapColorMode } from './types'; /** Called when the version number changes */ export const heatmapMigrationHandler = (panel: PanelModel): Partial => { diff --git a/public/app/plugins/panel/heatmap/models.gen.ts b/public/app/plugins/panel/heatmap/models.gen.ts deleted file mode 100644 index fc52189160d..00000000000 --- a/public/app/plugins/panel/heatmap/models.gen.ts +++ /dev/null @@ -1,133 +0,0 @@ -//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -// NOTE: This file will be auto generated from models.cue -// It is currenty hand written but will serve as the target for cuetsy -//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - -import { AxisConfig, AxisPlacement, HideableFieldConfig, ScaleDistributionConfig, VisibilityMode } from '@grafana/schema'; -import { HeatmapCellLayout, HeatmapCalculationOptions } from 'app/features/transformers/calculateHeatmap/models.gen'; - -export const modelVersion = Object.freeze([1, 0]); - -export enum HeatmapColorMode { - Opacity = 'opacity', - Scheme = 'scheme', -} - -export enum HeatmapColorScale { - Linear = 'linear', - Exponential = 'exponential', -} - -export interface HeatmapColorOptions { - mode: HeatmapColorMode; - scheme: string; // when in scheme mode -- the d3 scheme name - fill: string; // when opacity mode, the target color - scale: HeatmapColorScale; // for opacity mode - exponent: number; // when scale== sqrt - steps: number; // 2-128 - - reverse: boolean; - - // Clamp the colors to the value range - min?: number; - max?: number; -} -export interface YAxisConfig extends AxisConfig { - unit?: string; - reverse?: boolean; - decimals?: number; - // Only used when the axis is not ordinal - min?: number; - max?: number; -} - -export interface CellValues { - unit?: string; - decimals?: number; -} - -export interface FilterValueRange { - le?: number; - ge?: number; -} - -export interface HeatmapTooltip { - show: boolean; - yHistogram?: boolean; -} -export interface HeatmapLegend { - show: boolean; -} - -export interface ExemplarConfig { - color: string; -} - -export interface RowsHeatmapOptions { - value?: string; // value field name - layout?: HeatmapCellLayout; -} - -export interface PanelOptions { - calculate?: boolean; - calculation?: HeatmapCalculationOptions; - - color: HeatmapColorOptions; - filterValues?: FilterValueRange; // was hideZeroBuckets - rowsFrame?: RowsHeatmapOptions; - showValue: VisibilityMode; - - cellGap?: number; // was cardPadding - cellRadius?: number; // was cardRadius (not used, but migrated from angular) - cellValues?: CellValues; - - yAxis: YAxisConfig; - - legend: HeatmapLegend; - - tooltip: HeatmapTooltip; - exemplars: ExemplarConfig; -} - -export const defaultPanelOptions: PanelOptions = { - calculate: false, - color: { - mode: HeatmapColorMode.Scheme, - scheme: 'Oranges', - fill: 'dark-orange', - scale: HeatmapColorScale.Exponential, - reverse: false, - exponent: 0.5, - steps: 64, - }, - rowsFrame: { - layout: HeatmapCellLayout.auto, - }, - yAxis: { - axisPlacement: AxisPlacement.Left, - }, - cellValues: { - - }, - showValue: VisibilityMode.Auto, - tooltip: { - show: true, - yHistogram: false, - }, - legend: { - show: true, - }, - exemplars: { - color: 'rgba(255,0,255,0.7)', - }, - filterValues: { - le: 1e-9, - }, - cellGap: 1, -}; - -export interface PanelFieldConfig extends HideableFieldConfig { - scaleDistribution?: ScaleDistributionConfig; -} - -export const defaultPanelFieldConfig: PanelFieldConfig = {}; diff --git a/public/app/plugins/panel/heatmap/module.tsx b/public/app/plugins/panel/heatmap/module.tsx index 32a9940a031..00586881cca 100644 --- a/public/app/plugins/panel/heatmap/module.tsx +++ b/public/app/plugins/panel/heatmap/module.tsx @@ -2,19 +2,24 @@ import React from 'react'; import { FieldConfigProperty, FieldType, identityOverrideProcessor, PanelData, PanelPlugin } from '@grafana/data'; import { config } from '@grafana/runtime'; -import { AxisPlacement, GraphFieldConfig, ScaleDistribution, ScaleDistributionConfig } from '@grafana/schema'; +import { + AxisPlacement, + GraphFieldConfig, + ScaleDistribution, + ScaleDistributionConfig, + HeatmapCellLayout, +} from '@grafana/schema'; import { addHideFrom, ScaleDistributionEditor } from '@grafana/ui/src/options/builder'; import { ColorScale } from 'app/core/components/ColorScale/ColorScale'; import { addHeatmapCalculationOptions } from 'app/features/transformers/calculateHeatmap/editor/helper'; import { readHeatmapRowsCustomMeta } from 'app/features/transformers/calculateHeatmap/heatmap'; -import { HeatmapCellLayout } from 'app/features/transformers/calculateHeatmap/models.gen'; import { HeatmapPanel } from './HeatmapPanel'; import { prepareHeatmapData } from './fields'; import { heatmapChangedHandler, heatmapMigrationHandler } from './migrations'; -import { PanelOptions, defaultPanelOptions, HeatmapColorMode, HeatmapColorScale } from './models.gen'; import { colorSchemes, quantizeScheme } from './palettes'; import { HeatmapSuggestionsSupplier } from './suggestions'; +import { PanelOptions, defaultPanelOptions, HeatmapColorMode, HeatmapColorScale } from './types'; export const plugin = new PanelPlugin(HeatmapPanel) .useFieldConfig({ diff --git a/public/app/plugins/panel/heatmap/palettes.ts b/public/app/plugins/panel/heatmap/palettes.ts index 0438977dfa5..50b2537d242 100644 --- a/public/app/plugins/panel/heatmap/palettes.ts +++ b/public/app/plugins/panel/heatmap/palettes.ts @@ -4,7 +4,7 @@ import tinycolor from 'tinycolor2'; import { GrafanaTheme2 } from '@grafana/data'; -import { HeatmapColorOptions, defaultPanelOptions, HeatmapColorMode, HeatmapColorScale } from './models.gen'; +import { HeatmapColorOptions, defaultPanelOptions, HeatmapColorMode, HeatmapColorScale } from './types'; // https://observablehq.com/@d3/color-schemes?collection=@d3/d3-scale-chromatic diff --git a/public/app/plugins/panel/heatmap/panelcfg.cue b/public/app/plugins/panel/heatmap/panelcfg.cue index d548b45934f..3e4b5e73638 100644 --- a/public/app/plugins/panel/heatmap/panelcfg.cue +++ b/public/app/plugins/panel/heatmap/panelcfg.cue @@ -14,19 +14,149 @@ package grafanaplugin +import ( + ui "github.com/grafana/grafana/packages/grafana-schema/src/common" +) + composableKinds: PanelCfg: { lineage: { seqs: [ { schemas: [ { + // Controls the color mode of the heatmap + HeatmapColorMode: "opacity" | "scheme" @cuetsy(kind="enum") + // Controls the color scale of the heatmap + HeatmapColorScale: "linear" | "exponential" @cuetsy(kind="enum") + // Controls various color options + HeatmapColorOptions: { + // Sets the color mode + mode?: HeatmapColorMode // TODO: remove optional when https://github.com/grafana/cuetsy/issues/74 is fixed + // Controls the color scheme used + scheme: string + // Controls the color fill when in opacity mode + fill: string + // Controls the color scale + scale?: HeatmapColorScale // TODO: remove optional when https://github.com/grafana/cuetsy/issues/74 is fixed + // Controls the exponent when scale is set to exponential + exponent: float32 + // Controls the number of color steps + steps: uint8 & >=2 & <=128 + // Reverses the color scheme + reverse: bool + // Sets the minimum value for the color scale + min?: float32 + // Sets the maximum value for the color scale + max?: float32 + } @cuetsy(kind="interface") + // Configuration options for the yAxis + YAxisConfig: { + ui.AxisConfig + + // Sets the yAxis unit + unit?: string + // Reverses the yAxis + reverse?: bool + // Controls the number of decimals for yAxis values + decimals?: float32 + // Sets the minimum value for the yAxis + min?: float32 + // Sets the maximum value for the yAxis + max?: float32 + } @cuetsy(kind="interface") + // Controls cell value options + CellValues: { + // Controls the cell value unit + unit?: string + // Controls the number of decimals for cell values + decimals?: float32 + } @cuetsy(kind="interface") + // Controls the value filter range + FilterValueRange: { + // Sets the filter range to values less than or equal to the given value + le?: float32 + // Sets the filter range to values greater than or equal to the given value + ge?: float32 + } @cuetsy(kind="interface") + // Controls tooltip options + HeatmapTooltip: { + // Controls if the tooltip is shown + show: bool + // Controls if the tooltip shows a histogram of the y-axis values + yHistogram?: bool + } @cuetsy(kind="interface") + // Controls legend options + HeatmapLegend: { + // Controls if the legend is shown + show: bool + } @cuetsy(kind="interface") + // Controls exemplar options + ExemplarConfig: { + // Sets the color of the exemplar markers + color: string + } @cuetsy(kind="interface") + // Controls frame rows options + RowsHeatmapOptions: { + // Sets the name of the cell when not calculating from data + value?: string + // Controls tick alignment when not calculating from data + layout?: ui.HeatmapCellLayout + } @cuetsy(kind="interface") PanelOptions: { - // anything for now - ... + // Controls if the heatmap should be calculated from data + calculate?: bool | *false + // Calculation options for the heatmap + calculation?: ui.HeatmapCalculationOptions + // Controls the color options + color: HeatmapColorOptions | *{ + // mode: HeatmapColorMode // TODO: fix after remove when https://github.com/grafana/cuetsy/issues/74 is fixed + scheme: "Oranges" + fill: "dark-orange" + // scale: HeatmapColorScale // TODO: fix after remove when https://github.com/grafana/cuetsy/issues/74 is fixed + reverse: false + exponent: 0.5 + steps: 64 + } + // Filters values between a given range + filterValues?: FilterValueRange | *{ + le: 1e-9 + } + // Controls tick alignment and value name when not calculating from data + rowsFrame?: RowsHeatmapOptions + // | *{ + // layout: ui.HeatmapCellLayout & "auto" // TODO: fix after remove when https://github.com/grafana/cuetsy/issues/74 is fixed + // } + // Controls the display of the value in the cell + showValue: ui.VisibilityMode | *"auto" + // Controls gap between cells + cellGap?: uint8 & >=0 & <=25 | *1 + // Controls cell radius + cellRadius?: float32 + // Controls cell value unit + cellValues?: CellValues | *{} + // Controls yAxis placement + yAxis: YAxisConfig + // | *{ + // axisPlacement: ui.AxisPlacement & "left" // TODO: fix after remove when https://github.com/grafana/cuetsy/issues/74 is fixed + // } + // Controls legend options + legend: HeatmapLegend | *{ + show: true + } + // Controls tooltip options + tooltip: HeatmapTooltip | *{ + show: true + yHistogram: false + } + // Controls exemplar options + exemplars: ExemplarConfig | *{ + color: "rgba(255,0,255,0.7)" + } } @cuetsy(kind="interface") PanelFieldConfig: { - // anything for now - ... + ui.HideableFieldConfig + + scaleDistribution?: ui.ScaleDistributionConfig } @cuetsy(kind="interface") }, ] diff --git a/public/app/plugins/panel/heatmap/panelcfg.gen.ts b/public/app/plugins/panel/heatmap/panelcfg.gen.ts new file mode 100644 index 00000000000..1fe42371a11 --- /dev/null +++ b/public/app/plugins/panel/heatmap/panelcfg.gen.ts @@ -0,0 +1,271 @@ +// Code generated - EDITING IS FUTILE. DO NOT EDIT. +// +// Generated by: +// public/app/plugins/gen.go +// Using jennies: +// TSTypesJenny +// PluginTSTypesJenny +// +// Run 'make gen-cue' from repository root to regenerate. + +import * as ui from '@grafana/schema'; + +export const PanelCfgModelVersion = Object.freeze([0, 0]); + +/** + * Controls the color mode of the heatmap + */ +export enum HeatmapColorMode { + Opacity = 'opacity', + Scheme = 'scheme', +} + +/** + * Controls the color scale of the heatmap + */ +export enum HeatmapColorScale { + Exponential = 'exponential', + Linear = 'linear', +} + +/** + * Controls various color options + */ +export interface HeatmapColorOptions { + /** + * Controls the exponent when scale is set to exponential + */ + exponent: number; + /** + * Controls the color fill when in opacity mode + */ + fill: string; + /** + * Sets the maximum value for the color scale + */ + max?: number; + /** + * Sets the minimum value for the color scale + */ + min?: number; + /** + * Sets the color mode + */ + mode?: HeatmapColorMode; + /** + * Reverses the color scheme + */ + reverse: boolean; + /** + * Controls the color scale + */ + scale?: HeatmapColorScale; + /** + * Controls the color scheme used + */ + scheme: string; + /** + * Controls the number of color steps + */ + steps: number; +} + +/** + * Configuration options for the yAxis + */ +export interface YAxisConfig extends ui.AxisConfig { + /** + * Controls the number of decimals for yAxis values + */ + decimals?: number; + /** + * Sets the maximum value for the yAxis + */ + max?: number; + /** + * Sets the minimum value for the yAxis + */ + min?: number; + /** + * Reverses the yAxis + */ + reverse?: boolean; + /** + * Sets the yAxis unit + */ + unit?: string; +} + +/** + * Controls cell value options + */ +export interface CellValues { + /** + * Controls the number of decimals for cell values + */ + decimals?: number; + /** + * Controls the cell value unit + */ + unit?: string; +} + +/** + * Controls the value filter range + */ +export interface FilterValueRange { + /** + * Sets the filter range to values greater than or equal to the given value + */ + ge?: number; + /** + * Sets the filter range to values less than or equal to the given value + */ + le?: number; +} + +/** + * Controls tooltip options + */ +export interface HeatmapTooltip { + /** + * Controls if the tooltip is shown + */ + show: boolean; + /** + * Controls if the tooltip shows a histogram of the y-axis values + */ + yHistogram?: boolean; +} + +/** + * Controls legend options + */ +export interface HeatmapLegend { + /** + * Controls if the legend is shown + */ + show: boolean; +} + +/** + * Controls exemplar options + */ +export interface ExemplarConfig { + /** + * Sets the color of the exemplar markers + */ + color: string; +} + +/** + * Controls frame rows options + */ +export interface RowsHeatmapOptions { + /** + * Controls tick alignment when not calculating from data + */ + layout?: ui.HeatmapCellLayout; + /** + * Sets the name of the cell when not calculating from data + */ + value?: string; +} + +export interface PanelOptions { + /** + * Controls if the heatmap should be calculated from data + */ + calculate?: boolean; + /** + * Calculation options for the heatmap + */ + calculation?: ui.HeatmapCalculationOptions; + /** + * Controls gap between cells + */ + cellGap?: number; + /** + * Controls cell radius + */ + cellRadius?: number; + /** + * Controls cell value unit + */ + cellValues?: CellValues; + /** + * Controls the color options + */ + color: HeatmapColorOptions; + /** + * Controls exemplar options + */ + exemplars: ExemplarConfig; + /** + * Filters values between a given range + */ + filterValues?: FilterValueRange; + /** + * | *{ + * axisPlacement: ui.AxisPlacement & "left" // TODO: fix after remove when https://github.com/grafana/cuetsy/issues/74 is fixed + * } + * Controls legend options + */ + legend: HeatmapLegend; + /** + * Controls tick alignment and value name when not calculating from data + */ + rowsFrame?: RowsHeatmapOptions; + /** + * | *{ + * layout: ui.HeatmapCellLayout & "auto" // TODO: fix after remove when https://github.com/grafana/cuetsy/issues/74 is fixed + * } + * Controls the display of the value in the cell + */ + showValue: ui.VisibilityMode; + /** + * Controls tooltip options + */ + tooltip: HeatmapTooltip; + /** + * Controls yAxis placement + */ + yAxis: YAxisConfig; +} + +export const defaultPanelOptions: Partial = { + calculate: false, + cellGap: 1, + cellValues: {}, + color: { + /** + * mode: HeatmapColorMode // TODO: fix after remove when https://github.com/grafana/cuetsy/issues/74 is fixed + */ + scheme: 'Oranges', + fill: 'dark-orange', + /** + * scale: HeatmapColorScale // TODO: fix after remove when https://github.com/grafana/cuetsy/issues/74 is fixed + */ + reverse: false, + exponent: 0.5, + steps: 64, + }, + exemplars: { + color: 'rgba(255,0,255,0.7)', + }, + filterValues: { + le: 1e-09, + }, + legend: { + show: true, + }, + showValue: ui.VisibilityMode.Auto, + tooltip: { + show: true, + yHistogram: false, + }, +}; + +export interface PanelFieldConfig extends ui.HideableFieldConfig { + scaleDistribution?: ui.ScaleDistributionConfig; +} diff --git a/public/app/plugins/panel/heatmap/suggestions.ts b/public/app/plugins/panel/heatmap/suggestions.ts index 4600430cd91..57c514f635e 100644 --- a/public/app/plugins/panel/heatmap/suggestions.ts +++ b/public/app/plugins/panel/heatmap/suggestions.ts @@ -2,7 +2,7 @@ import { VisualizationSuggestionsBuilder } from '@grafana/data'; import { config } from '@grafana/runtime'; import { prepareHeatmapData } from './fields'; -import { PanelOptions, defaultPanelOptions } from './models.gen'; +import { PanelOptions, defaultPanelOptions } from './types'; export class HeatmapSuggestionsSupplier { getSuggestionsForData(builder: VisualizationSuggestionsBuilder) { diff --git a/public/app/plugins/panel/heatmap/types.ts b/public/app/plugins/panel/heatmap/types.ts new file mode 100644 index 00000000000..94cc42ed1d2 --- /dev/null +++ b/public/app/plugins/panel/heatmap/types.ts @@ -0,0 +1,17 @@ +export * from './panelcfg.gen'; + +import { AxisPlacement, HeatmapCellLayout } from '@grafana/schema'; + +import { + defaultPanelOptions as defaultPanelOptionsGen, + HeatmapColorMode, + HeatmapColorScale, + PanelOptions, +} from './panelcfg.gen'; + +export const defaultPanelOptions = { + ...defaultPanelOptionsGen, + color: { ...defaultPanelOptionsGen.color, mode: HeatmapColorMode.Scheme, scale: HeatmapColorScale.Exponential }, + yAxis: { ...defaultPanelOptionsGen.yAxis, axisPlacement: AxisPlacement.Left }, + rowsFrame: { ...defaultPanelOptionsGen.rowsFrame, layout: HeatmapCellLayout.auto }, +} as PanelOptions; diff --git a/public/app/plugins/panel/heatmap/utils.ts b/public/app/plugins/panel/heatmap/utils.ts index a016ce64a32..da83e954125 100644 --- a/public/app/plugins/panel/heatmap/utils.ts +++ b/public/app/plugins/panel/heatmap/utils.ts @@ -16,15 +16,14 @@ import { TimeRange, FieldType, } from '@grafana/data'; -import { AxisPlacement, ScaleDirection, ScaleDistribution, ScaleOrientation } from '@grafana/schema'; +import { AxisPlacement, ScaleDirection, ScaleDistribution, ScaleOrientation, HeatmapCellLayout } from '@grafana/schema'; import { UPlotConfigBuilder } from '@grafana/ui'; import { isHeatmapCellsDense, readHeatmapRowsCustomMeta } from 'app/features/transformers/calculateHeatmap/heatmap'; -import { HeatmapCellLayout } from 'app/features/transformers/calculateHeatmap/models.gen'; import { pointWithin, Quadtree, Rect } from '../barchart/quadtree'; import { HeatmapData } from './fields'; -import { PanelFieldConfig, YAxisConfig } from './models.gen'; +import { PanelFieldConfig, YAxisConfig } from './types'; interface PathbuilderOpts { each: (u: uPlot, seriesIdx: number, dataIdx: number, lft: number, top: number, wid: number, hgt: number) => void;