diff --git a/docs/sources/developers/kinds/composable/candlestick/panelcfg/schema-reference.md b/docs/sources/developers/kinds/composable/candlestick/panelcfg/schema-reference.md new file mode 100644 index 00000000000..069acb2533d --- /dev/null +++ b/docs/sources/developers/kinds/composable/candlestick/panelcfg/schema-reference.md @@ -0,0 +1,250 @@ +--- +keywords: + - grafana + - schema +title: CandlestickPanelCfg kind +--- +> Both documentation generation and kinds schemas are in active development and subject to change without prior notice. + +## CandlestickPanelCfg + +#### Maturity: [experimental](../../../maturity/#experimental) +#### Version: 0.0 + + + +| Property | Type | Required | Default | Description | +|-----------------------|---------------------------------------|----------|---------|-------------------------------------------------------------| +| `CandleStyle` | string | **Yes** | | Possible values are: `candles`, `ohlcbars`. | +| `CandlestickColors` | [object](#candlestickcolors) | **Yes** | | | +| `CandlestickFieldMap` | [object](#candlestickfieldmap) | **Yes** | | | +| `ColorStrategy` | string | **Yes** | | Possible values are: `open-close`, `close-close`. | +| `FieldConfig` | [GraphFieldConfig](#graphfieldconfig) | **Yes** | | TODO docs | +| `Options` | [object](#options) | **Yes** | | | +| `VizDisplayMode` | string | **Yes** | | Possible values are: `candles+volume`, `candles`, `volume`. | + +### CandlestickColors + +| Property | Type | Required | Default | Description | +|----------|--------|----------|---------|-------------| +| `down` | string | **Yes** | `red` | | +| `flat` | string | **Yes** | `gray` | | +| `up` | string | **Yes** | `green` | | + +### CandlestickFieldMap + +| Property | Type | Required | Default | Description | +|----------|--------|----------|---------|------------------------------------------------------------------------------| +| `close` | string | No | | Corresponds to the final (end) value of the given period | +| `high` | string | No | | Corresponds to the highest value of the given period | +| `low` | string | No | | Corresponds to the lowest value of the given period | +| `open` | string | No | | Corresponds to the starting value of the given period | +| `volume` | string | No | | Corresponds to the sample count in the given period. (e.g. number of trades) | + +### GraphFieldConfig + +TODO docs + +It extends [LineConfig](#lineconfig) and [FillConfig](#fillconfig) and [PointsConfig](#pointsconfig) and [AxisConfig](#axisconfig) and [BarConfig](#barconfig) and [StackableFieldConfig](#stackablefieldconfig) and [HideableFieldConfig](#hideablefieldconfig). + +| Property | Type | Required | Default | 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))* | +| `barAlignment` | integer | No | | *(Inherited from [BarConfig](#barconfig))*
TODO docs
Possible values are: `-1`, `0`, `1`. | +| `barMaxWidth` | number | No | | *(Inherited from [BarConfig](#barconfig))* | +| `barWidthFactor` | number | No | | *(Inherited from [BarConfig](#barconfig))* | +| `drawStyle` | string | No | | TODO docs
Possible values are: `line`, `bars`, `points`. | +| `fillBelowTo` | string | No | | *(Inherited from [FillConfig](#fillconfig))* | +| `fillColor` | string | No | | *(Inherited from [FillConfig](#fillconfig))* | +| `fillOpacity` | number | No | | *(Inherited from [FillConfig](#fillconfig))* | +| `gradientMode` | string | No | | TODO docs
Possible values are: `none`, `opacity`, `hue`, `scheme`. | +| `hideFrom` | [HideSeriesConfig](#hideseriesconfig) | No | | *(Inherited from [HideableFieldConfig](#hideablefieldconfig))*
TODO docs | +| `lineColor` | string | No | | *(Inherited from [LineConfig](#lineconfig))* | +| `lineInterpolation` | string | No | | *(Inherited from [LineConfig](#lineconfig))*
TODO docs
Possible values are: `linear`, `smooth`, `stepBefore`, `stepAfter`. | +| `lineStyle` | [LineStyle](#linestyle) | No | | *(Inherited from [LineConfig](#lineconfig))*
TODO docs | +| `lineWidth` | number | No | | *(Inherited from [LineConfig](#lineconfig))* | +| `pointColor` | string | No | | *(Inherited from [PointsConfig](#pointsconfig))* | +| `pointSize` | number | No | | *(Inherited from [PointsConfig](#pointsconfig))* | +| `pointSymbol` | string | No | | *(Inherited from [PointsConfig](#pointsconfig))* | +| `scaleDistribution` | [ScaleDistributionConfig](#scaledistributionconfig) | No | | *(Inherited from [AxisConfig](#axisconfig))*
TODO docs | +| `showPoints` | string | No | | *(Inherited from [PointsConfig](#pointsconfig))*
TODO docs
Possible values are: `auto`, `never`, `always`. | +| `spanNulls` | | No | | *(Inherited from [LineConfig](#lineconfig))*
Indicate if null values should be treated as gaps or connected.
When the value is a number, it represents the maximum delta in the
X axis that should be considered connected. For timeseries, this is milliseconds | +| `stacking` | [StackingConfig](#stackingconfig) | No | | *(Inherited from [StackableFieldConfig](#stackablefieldconfig))*
TODO docs | +| `thresholdsStyle` | [GraphThresholdsStyleConfig](#graphthresholdsstyleconfig) | No | | TODO docs | +| `transform` | string | No | | TODO docs
Possible values are: `constant`, `negative-Y`. | + +### AxisConfig + +TODO docs + +| Property | Type | Required | Default | 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 | + +### ScaleDistributionConfig + +TODO docs + +| Property | Type | Required | Default | Description | +|-------------------|--------|----------|---------|--------------------------------------------------------------------------| +| `type` | string | **Yes** | | TODO docs
Possible values are: `linear`, `log`, `ordinal`, `symlog`. | +| `linearThreshold` | number | No | | | +| `log` | number | No | | | + +### BarConfig + +TODO docs + +| Property | Type | Required | Default | Description | +|------------------|---------|----------|---------|----------------------------------------------------| +| `barAlignment` | integer | No | | TODO docs
Possible values are: `-1`, `0`, `1`. | +| `barMaxWidth` | number | No | | | +| `barWidthFactor` | number | No | | | + +### FillConfig + +TODO docs + +| Property | Type | Required | Default | Description | +|---------------|--------|----------|---------|-------------| +| `fillBelowTo` | string | No | | | +| `fillColor` | string | No | | | +| `fillOpacity` | number | No | | | + +### GraphThresholdsStyleConfig + +TODO docs + +| Property | Type | Required | Default | Description | +|----------|--------|----------|---------|-----------------------------------------------------------------------------------------------------------| +| `mode` | string | **Yes** | | TODO docs
Possible values are: `off`, `line`, `dashed`, `area`, `line+area`, `dashed+area`, `series`. | + +### HideSeriesConfig + +TODO docs + +| Property | Type | Required | Default | Description | +|-----------|---------|----------|---------|-------------| +| `legend` | boolean | **Yes** | | | +| `tooltip` | boolean | **Yes** | | | +| `viz` | boolean | **Yes** | | | + +### HideableFieldConfig + +TODO docs + +| Property | Type | Required | Default | Description | +|------------|---------------------------------------|----------|---------|-------------| +| `hideFrom` | [HideSeriesConfig](#hideseriesconfig) | No | | TODO docs | + +### LineConfig + +TODO docs + +| Property | Type | Required | Default | Description | +|---------------------|-------------------------|----------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `lineColor` | string | No | | | +| `lineInterpolation` | string | No | | TODO docs
Possible values are: `linear`, `smooth`, `stepBefore`, `stepAfter`. | +| `lineStyle` | [LineStyle](#linestyle) | No | | TODO docs | +| `lineWidth` | number | No | | | +| `spanNulls` | | No | | Indicate if null values should be treated as gaps or connected.
When the value is a number, it represents the maximum delta in the
X axis that should be considered connected. For timeseries, this is milliseconds | + +### LineStyle + +TODO docs + +| Property | Type | Required | Default | Description | +|----------|----------|----------|---------|--------------------------------------------------------| +| `dash` | number[] | No | | | +| `fill` | string | No | | Possible values are: `solid`, `dash`, `dot`, `square`. | + +### PointsConfig + +TODO docs + +| Property | Type | Required | Default | Description | +|---------------|--------|----------|---------|---------------------------------------------------------------| +| `pointColor` | string | No | | | +| `pointSize` | number | No | | | +| `pointSymbol` | string | No | | | +| `showPoints` | string | No | | TODO docs
Possible values are: `auto`, `never`, `always`. | + +### StackableFieldConfig + +TODO docs + +| Property | Type | Required | Default | Description | +|------------|-----------------------------------|----------|---------|-------------| +| `stacking` | [StackingConfig](#stackingconfig) | No | | TODO docs | + +### StackingConfig + +TODO docs + +| Property | Type | Required | Default | Description | +|----------|--------|----------|---------|-----------------------------------------------------------------| +| `group` | string | No | | | +| `mode` | string | No | | TODO docs
Possible values are: `none`, `normal`, `percent`. | + +### Options + +It extends [OptionsWithLegend](#optionswithlegend). + +| Property | Type | Required | Default | Description | +|--------------------|-----------------------------------------|----------|---------|--------------------------------------------------------------------------| +| `candleStyle` | string | **Yes** | | Sets the style of the candlesticks | +| `colorStrategy` | string | **Yes** | | Sets the color strategy for the candlesticks | +| `colors` | [CandlestickColors](#candlestickcolors) | **Yes** | | | +| `fields` | [object](#fields) | **Yes** | `map[]` | Map fields to appropriate dimension | +| `legend` | [VizLegendOptions](#vizlegendoptions) | **Yes** | | *(Inherited from [OptionsWithLegend](#optionswithlegend))*
TODO docs | +| `mode` | string | **Yes** | | Sets which dimensions are used for the visualization | +| `includeAllFields` | boolean | No | `false` | When enabled, all fields will be sent to the graph | + +### OptionsWithLegend + +TODO docs + +| Property | Type | Required | Default | Description | +|----------|---------------------------------------|----------|---------|-------------| +| `legend` | [VizLegendOptions](#vizlegendoptions) | **Yes** | | TODO docs | + +### VizLegendOptions + +TODO docs + +| Property | Type | Required | Default | Description | +|---------------|----------|----------|---------|-----------------------------------------------------------------------------------------------------------------------------------------| +| `calcs` | string[] | **Yes** | | | +| `displayMode` | string | **Yes** | | TODO docs
Note: "hidden" needs to remain as an option for plugins compatibility
Possible values are: `list`, `table`, `hidden`. | +| `placement` | string | **Yes** | | TODO docs
Possible values are: `bottom`, `right`. | +| `showLegend` | boolean | **Yes** | | | +| `asTable` | boolean | No | | | +| `isVisible` | boolean | No | | | +| `sortBy` | string | No | | | +| `sortDesc` | boolean | No | | | +| `width` | number | No | | | + +### Fields + +Map fields to appropriate dimension + +| Property | Type | Required | Default | Description | +|----------|-----------------------------------|----------|---------|-------------| +| `object` | Possible types are: [](#), [](#). | | | + + diff --git a/docs/sources/developers/kinds/composable/candlestickpanelcfg/schema-reference.md b/docs/sources/developers/kinds/composable/candlestickpanelcfg/schema-reference.md new file mode 100644 index 00000000000..89ef8318712 --- /dev/null +++ b/docs/sources/developers/kinds/composable/candlestickpanelcfg/schema-reference.md @@ -0,0 +1,89 @@ +--- +keywords: + - grafana + - schema +title: CandlestickPanelCfg kind +--- +> Both documentation generation and kinds schemas are in active development and subject to change without prior notice. + +# CandlestickPanelCfg kind + +## Maturity: experimental +## Version: 0.0 + +## Properties + +| Property | Type | Required | Description | +|-----------------------|--------------------------------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `CandleStyle` | string | **Yes** | TODO docs Possible values are: `candles`, `ohlcbars`. | +| `CandlestickColors` | [object](#candlestickcolors) | **Yes** | TODO docs | +| `CandlestickFieldMap` | [object](#candlestickfieldmap) | **Yes** | TODO docs | +| `ColorStrategy` | string | **Yes** | TODO docs
"open-close": up/down color depends on current close vs current open
filled always
"close-close": up/down color depends on current close vs prior close
filled/hollow depends on current close vs current open Possible values are: `open-close`, `close-close`. | +| `PanelFieldConfig` | [object](#panelfieldconfig) | **Yes** | | +| `PanelOptions` | [object](#paneloptions) | **Yes** | | +| `VizDisplayMode` | string | **Yes** | TODO docs Possible values are: `candles+volume`, `candles`, `volume`. | + +## CandlestickColors + +TODO docs + +### Properties + +| Property | Type | Required | Description | +|----------|--------|----------|-------------------| +| `down` | string | **Yes** | Default: `red`. | +| `flat` | string | **Yes** | Default: `gray`. | +| `up` | string | **Yes** | Default: `green`. | + +## CandlestickFieldMap + +TODO docs + +### Properties + +| Property | Type | Required | Description | +|----------|--------|----------|-------------| +| `close` | string | No | | +| `high` | string | No | | +| `low` | string | No | | +| `open` | string | No | | +| `volume` | string | No | | + +## PanelFieldConfig + +| Property | Type | Required | Description | +|----------|------|----------|-------------| + +## PanelOptions + +### Properties + +| Property | Type | Required | Description | +|--------------------|-----------------------------------------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `candleStyle` | string | No | TODO docs Possible values are: `candles`, `ohlcbars`. | +| `colorStrategy` | string | No | TODO docs
"open-close": up/down color depends on current close vs current open
filled always
"close-close": up/down color depends on current close vs prior close
filled/hollow depends on current close vs current open Possible values are: `open-close`, `close-close`. | +| `colors` | [CandlestickColors](#candlestickcolors) | No | TODO docs | +| `fields` | [object](#fields) | No | TODO docs Default: `map[]`. | +| `includeAllFields` | boolean | No | When enabled, all fields will be sent to the graph Default: `false`. | +| `mode` | string | No | TODO docs Possible values are: `candles+volume`, `candles`, `volume`. | + +### CandlestickColors + +TODO docs + +#### Properties + +| Property | Type | Required | Description | +|----------|--------|----------|-------------------| +| `down` | string | **Yes** | Default: `red`. | +| `flat` | string | **Yes** | Default: `gray`. | +| `up` | string | **Yes** | Default: `green`. | + +### fields + +TODO docs +The default value is: `map[]`. +| Property | Type | Required | Description | +|----------|------|----------|-------------| + + diff --git a/packages/grafana-schema/src/raw/composable/candlestick/panelcfg/x/CandlestickPanelCfg_types.gen.ts b/packages/grafana-schema/src/raw/composable/candlestick/panelcfg/x/CandlestickPanelCfg_types.gen.ts new file mode 100644 index 00000000000..c360a8a0e39 --- /dev/null +++ b/packages/grafana-schema/src/raw/composable/candlestick/panelcfg/x/CandlestickPanelCfg_types.gen.ts @@ -0,0 +1,105 @@ +// Code generated - EDITING IS FUTILE. DO NOT EDIT. +// +// Generated by: +// public/app/plugins/gen.go +// Using jennies: +// TSTypesJenny +// LatestMajorsOrXJenny +// PluginEachMajorJenny +// +// Run 'make gen-cue' from repository root to regenerate. + +import * as common from '@grafana/schema'; + +export enum VizDisplayMode { + Candles = 'candles', + CandlesVolume = 'candles+volume', + Volume = 'volume', +} + +export enum CandleStyle { + Candles = 'candles', + OHLCBars = 'ohlcbars', +} + +export enum ColorStrategy { + CloseClose = 'close-close', + OpenClose = 'open-close', +} + +export interface CandlestickFieldMap { + /** + * Corresponds to the final (end) value of the given period + */ + close?: string; + /** + * Corresponds to the highest value of the given period + */ + high?: string; + /** + * Corresponds to the lowest value of the given period + */ + low?: string; + /** + * Corresponds to the starting value of the given period + */ + open?: string; + /** + * Corresponds to the sample count in the given period. (e.g. number of trades) + */ + volume?: string; +} + +export interface CandlestickColors { + down: string; + flat: string; + up: string; +} + +export const defaultCandlestickColors: Partial = { + down: 'red', + flat: 'gray', + up: 'green', +}; + +export interface Options extends common.OptionsWithLegend { + /** + * Sets the style of the candlesticks + */ + candleStyle: CandleStyle; + /** + * Sets the color strategy for the candlesticks + */ + colorStrategy: ColorStrategy; + /** + * Set which colors are used when the price movement is up or down + */ + colors: CandlestickColors; + /** + * Map fields to appropriate dimension + */ + fields: CandlestickFieldMap; + /** + * When enabled, all fields will be sent to the graph + */ + includeAllFields?: boolean; + /** + * Sets which dimensions are used for the visualization + */ + mode: VizDisplayMode; +} + +export const defaultOptions: Partial = { + candleStyle: CandleStyle.Candles, + colorStrategy: ColorStrategy.OpenClose, + colors: { + down: 'red', + up: 'green', + flat: 'gray', + }, + fields: {}, + includeAllFields: false, + mode: VizDisplayMode.CandlesVolume, +}; + +export interface FieldConfig extends common.GraphFieldConfig {} diff --git a/pkg/kindsysreport/codegen/report.json b/pkg/kindsysreport/codegen/report.json index e760dbf9170..d3b2564c01d 100644 --- a/pkg/kindsysreport/codegen/report.json +++ b/pkg/kindsysreport/codegen/report.json @@ -232,6 +232,30 @@ "pluralName": "BarGaugePanelCfgs", "schemaInterface": "PanelCfg" }, + "candlestickpanelcfg": { + "category": "composable", + "codeowners": [ + "grafana/grafana-edge-squad" + ], + "currentVersion": [ + 0, + 0 + ], + "grafanaMaturityCount": 0, + "lineageIsGroup": true, + "links": { + "docs": "https://grafana.com/docs/grafana/next/developers/kinds/composable/candlestickpanelcfg/schema-reference", + "go": "n/a", + "schema": "https://github.com/grafana/grafana/tree/main/public/app/plugins/panel/candlestick/panelcfg.cue", + "ts": "https://github.com/grafana/grafana/tree/main/public/app/plugins/panel/candlestick/panelcfg.gen.ts" + }, + "machineName": "candlestickpanelcfg", + "maturity": "experimental", + "name": "CandlestickPanelCfg", + "pluralMachineName": "candlestickpanelcfgs", + "pluralName": "CandlestickPanelCfgs", + "schemaInterface": "PanelCfg" + }, "cloudwatchdataquery": { "category": "composable", "codeowners": [ @@ -1951,6 +1975,7 @@ "azuremonitordatasourcecfg", "barchartpanelcfg", "bargaugepanelcfg", + "candlestickpanelcfg", "cloudwatchdataquery", "cloudwatchdatasourcecfg", "dashboarddataquery", @@ -2040,6 +2065,8 @@ "annotationslistpanelcfg", "barchartpanelcfg", "bargaugepanelcfg", + "candlestickpanelcfg", + "cloudwatchdataquery", "dashboard", "dashboardlistpanelcfg", "debugpanelcfg", @@ -2145,4 +2172,4 @@ } } } -} \ No newline at end of file +} diff --git a/pkg/plugins/pfs/corelist/corelist_load_gen.go b/pkg/plugins/pfs/corelist/corelist_load_gen.go index 5fed370c450..17cc0782678 100644 --- a/pkg/plugins/pfs/corelist/corelist_load_gen.go +++ b/pkg/plugins/pfs/corelist/corelist_load_gen.go @@ -56,6 +56,7 @@ func corePlugins(rt *thema.Runtime) []pfs.ParsedPlugin { parsePluginOrPanic("public/app/plugins/panel/annolist", "annolist", rt), parsePluginOrPanic("public/app/plugins/panel/barchart", "barchart", rt), parsePluginOrPanic("public/app/plugins/panel/bargauge", "bargauge", rt), + parsePluginOrPanic("public/app/plugins/panel/candlestick", "candlestick", rt), parsePluginOrPanic("public/app/plugins/panel/canvas", "canvas", rt), parsePluginOrPanic("public/app/plugins/panel/dashlist", "dashlist", rt), parsePluginOrPanic("public/app/plugins/panel/datagrid", "datagrid", rt), diff --git a/public/app/plugins/gen.go b/public/app/plugins/gen.go index 81b8329148c..ed8d7bea2a0 100644 --- a/public/app/plugins/gen.go +++ b/public/app/plugins/gen.go @@ -24,7 +24,6 @@ import ( ) var skipPlugins = map[string]bool{ - "candlestick": true, "influxdb": true, // plugin.json fails validation (defaultMatchFormat) "mixed": true, // plugin.json fails validation (mixed) "opentsdb": true, // plugin.json fails validation (defaultMatchFormat) diff --git a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx b/public/app/plugins/panel/candlestick/CandlestickPanel.tsx index a8964f0c6ad..076f9d9a515 100644 --- a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx +++ b/public/app/plugins/panel/candlestick/CandlestickPanel.tsx @@ -21,10 +21,10 @@ import { OutsideRangePlugin } from '../timeseries/plugins/OutsideRangePlugin'; import { ThresholdControlsPlugin } from '../timeseries/plugins/ThresholdControlsPlugin'; import { prepareCandlestickFields } from './fields'; -import { CandlestickOptions, defaultColors, VizDisplayMode } from './models.gen'; +import { Options, defaultCandlestickColors, VizDisplayMode } from './types'; import { drawMarkers, FieldIndices } from './utils'; -interface CandlestickPanelProps extends PanelProps {} +interface CandlestickPanelProps extends PanelProps {} export const CandlestickPanel = ({ data, @@ -76,7 +76,7 @@ export const CandlestickPanel = ({ } const { mode, candleStyle, colorStrategy } = options; - const colors = { ...defaultColors, ...options.colors }; + const colors = { ...defaultCandlestickColors, ...options.colors }; let { open, high, low, close, volume } = fieldMap; // names from matched fields if (open == null || close == null) { diff --git a/public/app/plugins/panel/candlestick/fields.test.ts b/public/app/plugins/panel/candlestick/fields.test.ts index 0cde9a918fb..6692c08cd14 100644 --- a/public/app/plugins/panel/candlestick/fields.test.ts +++ b/public/app/plugins/panel/candlestick/fields.test.ts @@ -1,12 +1,12 @@ import { createTheme, toDataFrame } from '@grafana/data'; import { prepareCandlestickFields } from './fields'; -import { CandlestickOptions, VizDisplayMode } from './models.gen'; +import { Options, VizDisplayMode } from './types'; const theme = createTheme(); describe('Candlestick data', () => { - const options: CandlestickOptions = {} as CandlestickOptions; + const options = {} as Options; it('require a time field', () => { const info = prepareCandlestickFields( @@ -122,10 +122,10 @@ describe('Candlestick data', () => { }); it('will unmap high & low fields in volume-only mode', () => { - const options: CandlestickOptions = { + const options = { mode: VizDisplayMode.Volume, includeAllFields: true, - } as CandlestickOptions; + } as Options; const info = prepareCandlestickFields( [ @@ -184,10 +184,10 @@ describe('Candlestick data', () => { }); it('will unmap volume field in candles-only mode', () => { - const options: CandlestickOptions = { + const options = { mode: VizDisplayMode.Candles, includeAllFields: false, - } as CandlestickOptions; + } as Options; const info = prepareCandlestickFields( [ @@ -246,10 +246,10 @@ describe('Candlestick data', () => { }); it("will not remove open field from frame when it's also mapped to high in volume-only mode", () => { - const options: CandlestickOptions = { + const options = { mode: VizDisplayMode.Volume, includeAllFields: false, - } as CandlestickOptions; + } as Options; const info = prepareCandlestickFields( [ diff --git a/public/app/plugins/panel/candlestick/fields.ts b/public/app/plugins/panel/candlestick/fields.ts index fc6e0cdb51d..c370b953a72 100644 --- a/public/app/plugins/panel/candlestick/fields.ts +++ b/public/app/plugins/panel/candlestick/fields.ts @@ -12,7 +12,7 @@ import { findField } from 'app/features/dimensions'; import { prepareGraphableFields } from '../timeseries/utils'; -import { CandlestickOptions, CandlestickFieldMap, VizDisplayMode } from './models.gen'; +import { Options, CandlestickFieldMap, VizDisplayMode } from './types'; export interface FieldPickerInfo { /** property name */ @@ -96,7 +96,7 @@ function findFieldOrAuto(frame: DataFrame, info: FieldPickerInfo, options: Candl export function prepareCandlestickFields( series: DataFrame[] | undefined, - options: CandlestickOptions, + options: Partial, theme: GrafanaTheme2, timeRange?: TimeRange ): CandlestickData | null { @@ -119,7 +119,7 @@ export function prepareCandlestickFields( const data: CandlestickData = { aligned, frame: aligned, names: {} }; - // Apply same filter as everythign else in timeseries + // Apply same filter as everything else in timeseries const timeSeriesFrames = prepareGraphableFields([aligned], theme, timeRange); if (!timeSeriesFrames) { return null; diff --git a/public/app/plugins/panel/candlestick/models.gen.ts b/public/app/plugins/panel/candlestick/models.gen.ts deleted file mode 100644 index f847e443450..00000000000 --- a/public/app/plugins/panel/candlestick/models.gen.ts +++ /dev/null @@ -1,74 +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 { LegendDisplayMode, OptionsWithLegend } from '@grafana/schema'; - -export const modelVersion = Object.freeze([1, 0]); - -export enum VizDisplayMode { - CandlesVolume = 'candles+volume', - Candles = 'candles', - Volume = 'volume', -} - -export enum CandleStyle { - Candles = 'candles', - OHLCBars = 'ohlcbars', -} - -export enum ColorStrategy { - // up/down color depends on current close vs current open - // filled always - OpenClose = 'open-close', - // up/down color depends on current close vs prior close - // filled/hollow depends on current close vs current open - CloseClose = 'close-close', -} - -export interface CandlestickFieldMap { - open?: string; - high?: string; - low?: string; - close?: string; - volume?: string; -} - -export interface CandlestickColors { - up: string; - down: string; - flat: string; -} - -export const defaultColors: CandlestickColors = { - up: 'green', - down: 'red', - flat: 'gray', -}; - -export interface CandlestickOptions extends OptionsWithLegend { - mode: VizDisplayMode; - candleStyle: CandleStyle; - colorStrategy: ColorStrategy; - fields: CandlestickFieldMap; - colors: CandlestickColors; - - // When enabled, all fields will be sent to the graph - includeAllFields?: boolean; -} - -export const defaultOptions: CandlestickOptions = { - mode: VizDisplayMode.CandlesVolume, - candleStyle: CandleStyle.Candles, - colorStrategy: ColorStrategy.OpenClose, - colors: defaultColors, - fields: {}, - legend: { - displayMode: LegendDisplayMode.List, - showLegend: true, - placement: 'bottom', - calcs: [], - }, - includeAllFields: false, -}; diff --git a/public/app/plugins/panel/candlestick/module.tsx b/public/app/plugins/panel/candlestick/module.tsx index c77ab0e5da9..408a6e774f3 100644 --- a/public/app/plugins/panel/candlestick/module.tsx +++ b/public/app/plugins/panel/candlestick/module.tsx @@ -14,15 +14,8 @@ import { defaultGraphConfig, getGraphFieldConfig } from '../timeseries/config'; import { CandlestickPanel } from './CandlestickPanel'; import { CandlestickData, candlestickFieldsInfo, FieldPickerInfo, prepareCandlestickFields } from './fields'; -import { - defaultColors, - CandlestickOptions, - VizDisplayMode, - ColorStrategy, - defaultOptions, - CandleStyle, -} from './models.gen'; import { CandlestickSuggestionsSupplier } from './suggestions'; +import { defaultCandlestickColors, defaultOptions, Options, VizDisplayMode, ColorStrategy, CandleStyle } from './types'; const modeOptions = [ { label: 'Candles', value: VizDisplayMode.Candles }, @@ -43,7 +36,7 @@ const colorStrategies = [ const numericFieldFilter = (f: Field) => f.type === FieldType.number; function addFieldPicker( - builder: PanelOptionsEditorBuilder, + builder: PanelOptionsEditorBuilder, info: FieldPickerInfo, data: CandlestickData | null ) { @@ -74,7 +67,7 @@ function addFieldPicker( }); } -export const plugin = new PanelPlugin(CandlestickPanel) +export const plugin = new PanelPlugin(CandlestickPanel) .useFieldConfig(getGraphFieldConfig(defaultGraphConfig)) .setPanelOptions((builder, context) => { const opts = context.options ?? defaultOptions; @@ -112,12 +105,12 @@ export const plugin = new PanelPlugin(Cand .addColorPicker({ path: 'colors.up', name: 'Up color', - defaultValue: defaultColors.up, + defaultValue: defaultCandlestickColors.up, }) .addColorPicker({ path: 'colors.down', name: 'Down color', - defaultValue: defaultColors.down, + defaultValue: defaultCandlestickColors.down, }); addFieldPicker(builder, candlestickFieldsInfo.open, info); diff --git a/public/app/plugins/panel/candlestick/panelcfg.cue b/public/app/plugins/panel/candlestick/panelcfg.cue index c60e3ad5ca9..7248454545a 100644 --- a/public/app/plugins/panel/candlestick/panelcfg.cue +++ b/public/app/plugins/panel/candlestick/panelcfg.cue @@ -1,4 +1,4 @@ -// Copyright 2021 Grafana Labs +// Copyright 2023 Grafana Labs // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. @@ -14,23 +14,55 @@ package grafanaplugin +import ( + "github.com/grafana/grafana/packages/grafana-schema/src/common" +) + composableKinds: PanelCfg: { + maturity: "experimental" + lineage: { - seqs: [ - { - schemas: [ - { - Options: { - // anything for now - ... - } @cuetsy(kind="interface") - FieldConfig: { - // anything for now - ... - } @cuetsy(kind="interface") - }, - ] - }, - ] + + seqs: [{ + schemas: [{ + VizDisplayMode: "candles+volume" | "candles" | "volume" @cuetsy(kind="enum", memberNames="CandlesVolume|Candles|Volume") + CandleStyle: "candles" | "ohlcbars" @cuetsy(kind="enum", memberNames="Candles|OHLCBars") + ColorStrategy: "open-close" | "close-close" @cuetsy(kind="enum", memberNames="OpenClose|CloseClose") + CandlestickFieldMap: { + // Corresponds to the starting value of the given period + open?: string + // Corresponds to the highest value of the given period + high?: string + // Corresponds to the lowest value of the given period + low?: string + // Corresponds to the final (end) value of the given period + close?: string + // Corresponds to the sample count in the given period. (e.g. number of trades) + volume?: string + } @cuetsy(kind="interface") + CandlestickColors: { + up: string | *"green" + down: string | *"red" + flat: string | *"gray" + } @cuetsy(kind="interface") + Options: { + common.OptionsWithLegend + + // Sets which dimensions are used for the visualization + mode: VizDisplayMode & (*"candles+volume" | _) + // Sets the style of the candlesticks + candleStyle: CandleStyle & (*"candles" | _) + // Sets the color strategy for the candlesticks + colorStrategy: ColorStrategy & (*"open-close" | _) + // Map fields to appropriate dimension + fields: CandlestickFieldMap | *{} + // Set which colors are used when the price movement is up or down + colors: CandlestickColors | *{down: "red", up: "green", flat: "gray"} + // When enabled, all fields will be sent to the graph + includeAllFields?: bool | *false + } @cuetsy(kind="interface") + FieldConfig: common.GraphFieldConfig & {} @cuetsy(kind="interface") + }] + }] } } diff --git a/public/app/plugins/panel/candlestick/panelcfg.gen.ts b/public/app/plugins/panel/candlestick/panelcfg.gen.ts new file mode 100644 index 00000000000..5fdf83724c6 --- /dev/null +++ b/public/app/plugins/panel/candlestick/panelcfg.gen.ts @@ -0,0 +1,106 @@ +// 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 common from '@grafana/schema'; + +export const PanelCfgModelVersion = Object.freeze([0, 0]); + +export enum VizDisplayMode { + Candles = 'candles', + CandlesVolume = 'candles+volume', + Volume = 'volume', +} + +export enum CandleStyle { + Candles = 'candles', + OHLCBars = 'ohlcbars', +} + +export enum ColorStrategy { + CloseClose = 'close-close', + OpenClose = 'open-close', +} + +export interface CandlestickFieldMap { + /** + * Corresponds to the final (end) value of the given period + */ + close?: string; + /** + * Corresponds to the highest value of the given period + */ + high?: string; + /** + * Corresponds to the lowest value of the given period + */ + low?: string; + /** + * Corresponds to the starting value of the given period + */ + open?: string; + /** + * Corresponds to the sample count in the given period. (e.g. number of trades) + */ + volume?: string; +} + +export interface CandlestickColors { + down: string; + flat: string; + up: string; +} + +export const defaultCandlestickColors: Partial = { + down: 'red', + flat: 'gray', + up: 'green', +}; + +export interface Options extends common.OptionsWithLegend { + /** + * Sets the style of the candlesticks + */ + candleStyle: CandleStyle; + /** + * Sets the color strategy for the candlesticks + */ + colorStrategy: ColorStrategy; + /** + * Set which colors are used when the price movement is up or down + */ + colors: CandlestickColors; + /** + * Map fields to appropriate dimension + */ + fields: CandlestickFieldMap; + /** + * When enabled, all fields will be sent to the graph + */ + includeAllFields?: boolean; + /** + * Sets which dimensions are used for the visualization + */ + mode: VizDisplayMode; +} + +export const defaultOptions: Partial = { + candleStyle: CandleStyle.Candles, + colorStrategy: ColorStrategy.OpenClose, + colors: { + down: 'red', + up: 'green', + flat: 'gray', + }, + fields: {}, + includeAllFields: false, + mode: VizDisplayMode.CandlesVolume, +}; + +export interface FieldConfig extends common.GraphFieldConfig {} diff --git a/public/app/plugins/panel/candlestick/suggestions.ts b/public/app/plugins/panel/candlestick/suggestions.ts index 8ab7caa453a..ce22cc276c5 100644 --- a/public/app/plugins/panel/candlestick/suggestions.ts +++ b/public/app/plugins/panel/candlestick/suggestions.ts @@ -3,7 +3,7 @@ import { config } from '@grafana/runtime'; import { SuggestionName } from 'app/types/suggestions'; import { prepareCandlestickFields } from './fields'; -import { CandlestickOptions, defaultOptions } from './models.gen'; +import { defaultOptions, Options } from './types'; export class CandlestickSuggestionsSupplier { getSuggestionsForData(builder: VisualizationSuggestionsBuilder) { @@ -29,7 +29,7 @@ export class CandlestickSuggestionsSupplier { return; } - const list = builder.getListAppender({ + const list = builder.getListAppender({ name: '', pluginId: 'candlestick', options: {}, diff --git a/public/app/plugins/panel/candlestick/types.ts b/public/app/plugins/panel/candlestick/types.ts new file mode 100644 index 00000000000..5dce27d67fa --- /dev/null +++ b/public/app/plugins/panel/candlestick/types.ts @@ -0,0 +1,37 @@ +import { LegendDisplayMode } from '@grafana/schema'; + +import { + defaultOptions as defaultOptionsBase, + defaultCandlestickColors, + Options, + CandlestickColors, + CandleStyle, + ColorStrategy, + VizDisplayMode, + CandlestickFieldMap, + FieldConfig, + PanelCfgModelVersion, +} from './panelcfg.gen'; + +export const defaultOptions: Partial = { + ...defaultOptionsBase, + // TODO: This should be included in the cue schema in the future. + legend: { + displayMode: LegendDisplayMode.List, + showLegend: true, + placement: 'bottom', + calcs: [], + }, +}; + +export { + Options, + CandlestickColors, + defaultCandlestickColors, + CandleStyle, + ColorStrategy, + VizDisplayMode, + CandlestickFieldMap, + FieldConfig, + PanelCfgModelVersion, +}; diff --git a/public/app/plugins/panel/candlestick/utils.ts b/public/app/plugins/panel/candlestick/utils.ts index a7e942601d2..b0030d0584a 100644 --- a/public/app/plugins/panel/candlestick/utils.ts +++ b/public/app/plugins/panel/candlestick/utils.ts @@ -2,7 +2,7 @@ import uPlot from 'uplot'; import { colorManipulator } from '@grafana/data'; -import { VizDisplayMode, ColorStrategy, CandleStyle } from './models.gen'; +import { VizDisplayMode, ColorStrategy, CandleStyle } from './types'; const { alpha } = colorManipulator;