import type { ConnectorOptions as ComponentConnectorOptions, Options as ComponentOptions } from '../Component'; import type CSSObject from '../../../Core/Renderer/CSSObject'; import type { FormulaType } from './KPIComponent'; import type { Options as HighchartsOptions } from '../../Plugins/HighchartsTypes'; import type { OptionsEntry as SyncOptionsEntry, OptionsRecord as SyncOptionsRecord, RawOptionsRecord as SyncRawOptionsRecord } from '../Sync/Sync'; export interface Options extends ComponentOptions { columnId: string; /** * Connector options */ connector?: ComponentConnectorOptions; /** * A full set of chart options applied into KPI chart that is displayed * below the value. * * Some of the chart options are already set, you can find them in {@link KPIComponent.defaultChartOptions} * * [Highcharts API](https://api.highcharts.com/highcharts/) */ chartOptions?: HighchartsOptions; style?: CSSObject; /** * The threshold declares the value when color is applied * (according to the `thresholdColors`). * * Try it: * * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/kpi-component/threshold/ | Set a threshold} * */ threshold?: number | Array; /** * Array of two colors strings that are applied when threshold is * achieved. * * Try it: * * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/kpi-component/threshold/ | Threshold colors} * */ thresholdColors?: Array; type: 'KPI'; /** * The value that is displayed in KPI component. */ value?: number | string; /** * The minimal value of the font size, that KPI component should have. */ minFontSize: number; /** * The KPI's component subtitle. This can be used both to display * a subtitle below the main title. */ subtitle?: string | SubtitleOptions; /** * Sync options for the component. */ syncHandlers?: SyncOptionsRecord; /** * A format string for the value text. * * Try it: * * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/kpi-component/value-format/ | Add a value format} * */ valueFormat?: string; /** * Callback function to format the text of the value from scratch. */ valueFormatter?: ValueFormatterCallbackFunction; /** * This option allows user to toggle the KPI value connection with the * chart and set the specific point for the connection. * * Linking is enabled by default for the first point of the first * series. * * Try it: * * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/kpi-component/linked-value-to | Linking KPI value to a specific point} * * @example * ```js * linkedValueTo: { * seriesIndex: 1, * pointIndex: 2 * } * ``` */ linkedValueTo: LinkedValueToOptions; /** * Defines which elements should be synced. * ``` * Example: * { * extremes: true * } * ``` * Try it: * * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/demo/sync-extremes/ | Extremes Sync } * */ sync?: SyncOptions; /** * Sets the formula method key for the KPI component value or the callback * function (updates the value internally). * * If not declared, the KPI component displays the last column value. * * Try it: * * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/kpi-component/formula/ | KPI value formula} * */ formula?: FormulaType | FormulaCallbackFunction; } /** * Options for linking KPI value to the chart point. * * Try it: * * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/kpi-component/linked-value-to | Linking KPI value to a specific point} */ export interface LinkedValueToOptions { /** * Enable or disable linking KPI value to a point on the chart. * * @default true */ enabled?: boolean; /** * Index of the point that is to receiving the KPI value as its Y. * * @default 0 */ pointIndex?: number; /** * Index of the series with the point receiving the KPI value. * * @default 0 */ seriesIndex?: number; } /** * Sync options available for the KPI component. * * Example: * ``` * { * extremes: true * } * ``` */ export interface SyncOptions extends SyncRawOptionsRecord { /** * Extremes sync is available for Highcharts, KPI, Grid and * Navigator components. Sets a common range of displayed data. For the * KPI Component sets the last value. * * Try it: * * {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/demo/sync-extremes/ | Extremes Sync } * * @default false */ extremes?: boolean | SyncOptionsEntry; } export default Options;