import { type ReactNode } from 'react'; import type { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units'; import type { IntentProps } from '../../../core/slots/Intent/Intent.js'; import type { CompactToolbarProps } from '../../core/slots/toolbar/CompactToolbar.js'; import { ColorRuleProps } from '../../core/types/color-rule.js'; import type { Formatter } from '../../core/types/formatter.js'; import type { GaugeChartThresholdIndicatorProps } from '../slots/ThresholdIndicator.js'; import { GaugeChartTooltipProps } from '../slots/Tooltip.js'; /** * @public */ export interface GaugeChartSlotsConfig { thresholdsIndicators: GaugeChartThresholdIndicatorProps[]; colorRules: ColorRuleProps[]; label?: ReactNode; toolbar?: CompactToolbarProps; intents: IntentProps[]; tooltip?: GaugeChartTooltipProps; } /** * @public */ export interface GaugeChartConsumerConfig { /** * Min value for the gauge chart scale. * @defaultValue 0 */ min?: number; /** * Max value for the gauge chart scale. * @defaultValue 100 */ max?: number; /** * Color of the gauge segment. If not provided, it will display a default color. * @defaultValue 'Colors.Charts.Categorical.Color11.Default' */ color?: string; /** * Custom Formatter for the chart */ formatter?: Formatter | FormatOptions; /** * ThresholdIndicator config for the gauge chart scale. */ thresholdsIndicators?: GaugeChartThresholdIndicatorProps[]; /** * Color rules to apply dynamic colors based on the value. */ colorRules?: ColorRuleProps[]; /** * Config for the toolbar. */ toolbar?: CompactToolbarProps; /** * Accessor string to retrieve the value from the data object. */ valueAccessor?: string; /** * Config for the tooltip. */ tooltip?: GaugeChartTooltipProps; /** * Unit to be displayed in the tooltip and the value label. */ unit?: string | Unit; /** Show the loading indicator when truthy. * @defaultValue false */ loading?: boolean; }