import type { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units'; import type { HistogramBin, HistogramSeries, HistogramTooltipVariant, HistogramZoomDomain } from './histogram.js'; import { IntentProps } from '../../../core/slots/Intent/Intent.js'; import type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js'; import type { MaskingProps } from '../../../core/types/masking-props.js'; import type { StylingProps } from '../../../core/types/styling-props.js'; import type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js'; import type { ChartUnit } from '../../core/types/chart-unit.js'; import type { ColorPalette, CustomColorPalette } from '../../core/types/color-palette.js'; import type { ColorRuleProps } from '../../core/types/color-rule.js'; import type { Formatter } from '../../core/types/formatter.js'; import type { ChartInteractionsConfig, ZoomInteractions } from '../../core/types/interactions.js'; import type { LegendProps } from '../../core/types/legend.js'; import type { AxisScaleType, ValueRepresentation } from '../../core/types/scales.js'; import type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js'; import { ChartToolbarConfig, InternalChartToolbarConfig, ToolbarPlacement } from '../../core/types/toolbar.js'; import type { WithId } from '../../core/types/with-id.js'; import type { HistogramAnnotationsConfigProps } from '../components/annotations-histogram/types.js'; import type { SelectProps } from '../slots/Select.js'; import type { HistogramThresholdIndicatorProps } from '../slots/ThresholdIndicator.js'; /** * @public */ export interface HistogramChartProps extends StylingProps, MaskingProps, BehaviorTrackingProps, ZoomInteractions { /** * Data object for the histogram chart */ data: HistogramSeries[]; /** * Chart height. When a number is specified, it's treated as pixels, * otherwise a valid height string is expected. * @defaultValue 300px */ height?: number | string; /** * Chart width. When a number is specified, it's treated as pixels, * otherwise a valid width string is expected. * @defaultValue 100% */ width?: number | string; /** * Actions to be shown in the legend and tooltip actions */ seriesActions?: (series: HistogramSeries, bin: HistogramBin) => SeriesActionsTemplate; /** * Truncation mode to use (start, middle, end) * Applied to all the parts that truncate text. * @defaultValue 'middle' */ truncationMode?: TruncationMode; /** * Color palette to be used for the bar category. * @defaultValue "categorical" */ colorPalette?: ColorPalette | CustomColorPalette; /** Show the loading indicator when truthy. * @defaultValue false */ loading?: boolean; /** * The way values are represented. "absolute" will display the value as it is, and "relative" displays a percentage value considering the other dimensions values within a categories. * @defaultValue "absolute" */ valueRepresentation?: ValueRepresentation; /** * Enables infinite zooming * @defaultValue false */ infiniteZoom?: boolean; } /** * Configuration properties for histogram chart * @public */ export interface HistogramChartConfigProperties extends ZoomInteractions { /** * Chart toolbar configuration */ toolbar?: HistogramChartToolbarProps; /** * Chart interactions configuration * */ interactions?: ChartInteractionsConfig; /** * Chart legend properties */ legend?: HistogramChartLegendProps; /** * Chart X axis properties */ xAxis?: HistogramChartXAxisProps; /** * Chart Y axis properties */ yAxis?: HistogramChartYAxisProps[]; /** * Chart tooltip properties */ tooltip?: HistogramChartTooltipProps; /** * Color palette */ colorPalette?: ColorPalette | CustomColorPalette; /** * The truncation mode to use (start, middle, center) * Applied to all the parts that truncate text. * @defaultValue 'middle' */ truncationMode?: TruncationMode; /** * Chart thresholds indicators configuration */ thresholdIndicators?: HistogramThresholdIndicatorProps[]; /** * Defines if values are absolute or relative * @defaultValue 'absolute' */ valueRepresentation?: ValueRepresentation; /** * Enables infinite zooming */ infiniteZoom?: boolean; colorRules?: ColorRuleProps[]; /** * Download CSV configuration */ downloadCSV?: { enabled?: boolean; }; /** * Toggles Pan */ pan?: { disabled?: boolean; }; /** * Toggles Zoom */ zoom?: { disabled?: boolean; }; } /** * Props for the HistogramChart.Tooltip slot component * @public */ export interface HistogramChartTooltipProps { /** * Whether the tooltip should contain bins from * all series or just the closest one. */ variant?: HistogramTooltipVariant; } /** * @public */ export interface HistogramChartXAxisProps { /** * The max value configuration to display in the axis * @defaultValue 'auto' */ max?: number | 'auto' | 'data-max'; /** * The min value configuration to display in the axis * @defaultValue 'auto' */ min?: number | 'auto' | 'data-min'; /** * The title used for the axis */ label?: string; /** * The scale to be used */ scale?: AxisScaleType; /** * Formatter to be applied for each tick of the axis */ formatter?: Formatter | FormatOptions; /** * The unit for the axis */ unit?: ChartUnit; } /** * @public */ export interface HistogramChartYAxisProps { /** * The max value configuration to display in the axis * @defaultValue 'auto' */ max?: number | 'auto' | 'data-max'; /** * The min value configuration to display in the axis * @defaultValue 'auto' */ min?: number | 'auto' | 'data-min'; /** * The title used for the axis */ label?: string; /** * The scale to be used */ scale?: AxisScaleType; /** * Formatter to be applied for each tick of the axis */ formatter?: Formatter | FormatOptions; /** * The position of the y axis relative to * the histogram chart * @defaultValue 'left' */ position?: 'left' | 'right'; } /** * @internal */ export type HistogramThresholdConfig = HistogramThresholdIndicatorProps; /** * @internal */ export interface HistogramThresholdsConfig { leftThreshold?: WithId[]; rightThreshold?: WithId[]; } /** * @internal */ export interface HistogramChartConfiguration extends ZoomInteractions { /** * Color palette */ colorPalette: ColorPalette | CustomColorPalette; /** * Defines tooltip configuration * */ tooltip: HistogramChartTooltipConfig; /** * Chart toolbar configuration */ toolbar?: HistogramChartToolbarConfig; /** * Chart legend configuration */ legend: HistogramChartLegendConfig; /** * Chart X axis configuration */ xAxis: HistogramChartXAxisConfig; /** * Chart Y axis configuration */ yAxis: HistogramChartYAxisConfig; /** * Truncation mode applied when text overflows */ truncationMode: TruncationMode; /** * Value representation configuration */ valueRepresentation: ValueRepresentation; /** * Annotations configuration */ annotations?: HistogramAnnotationsConfigProps; /** * Chart Interactions configuration */ interactions?: ChartInteractionsConfig; /** * Chart thresholds configuration */ thresholds?: HistogramThresholdsConfig; /** * Enables the infiniteZoom */ infiniteZoom: boolean; /** * Enables and configures select interaction */ select?: SelectProps; colorRules: ColorRuleProps[]; } /** * @internal */ export type HistogramChartTooltipConfig = Required; /** * @public */ export type HistogramChartLegendProps = LegendProps; /** * Props for the ChartToolbar implementation in HistogramChart * @public */ export interface HistogramChartToolbarProps extends ChartToolbarConfig { /** Toggles the toolbar display */ enabled?: boolean; } /** * Internal config for toolbar. Obtained after iterating through slots and ConfigProv * @internal */ export type HistogramChartToolbarConfig = Omit & BehaviorTrackingProps & { intents?: Array; downloadData?: { enabled: boolean; }; enabled?: boolean; placement?: ToolbarPlacement; }; /** * @internal */ export type HistogramChartLegendConfig = HistogramChartLegendProps; /** * @internal */ export interface HistogramChartXAxisConfig extends HistogramChartXAxisProps { scale: AxisScaleType; } /** * @internal */ export interface HistogramChartYAxisConfig { left?: HistogramChartYAxisProps; right?: HistogramChartYAxisProps; } /** * @internal */ export type HistogramSelectConfig = SelectProps; /** @internal */ export interface HistogramChartConfigProps extends ZoomInteractions { toolbar?: HistogramChartToolbarProps; legend?: HistogramChartLegendProps; xAxis?: HistogramChartXAxisProps; yAxis?: HistogramChartYAxisProps; tooltip?: HistogramChartTooltipProps; colorPalette?: ColorPalette | CustomColorPalette; truncationMode?: TruncationMode; valueRepresentation?: ValueRepresentation; infiniteZoom?: boolean; } /** * @internal */ export interface HistogramChartSlots { /** * Chart Toolbar slot */ toolbar: HistogramChartToolbarConfig; /** * Chart legend slot */ legend: HistogramChartLegendProps; /** * Chart X axis slot */ xAxis?: HistogramChartXAxisProps; /** * Chart Y axis slot */ yAxis: HistogramChartYAxisProps[]; /** * Chart tooltip slot */ tooltip: HistogramChartTooltipProps; /** * Chart Annotations slot */ annotations?: HistogramAnnotationsConfigProps; /** * Chart Interactions slot */ interactions?: ChartInteractionsConfig; /** * Chart thresholds slot */ thresholds: HistogramThresholdIndicatorProps[]; /** * ValueRepresentation slot * @defaultValue "absolute" */ valueRepresentation?: ValueRepresentation; /** * Select interaction slot */ select?: HistogramSelectConfig; colorRules: ColorRuleProps[]; /** * Download CSV slot */ downloadCSV?: { enabled?: boolean; }; }