import type { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units'; import type { TruncationMode } from '../../../../typography/text-ellipsis/TextEllipsis.js'; import type { ChartColorPalette, ChartDatapoint } from '../../../core/types/chart-data.js'; import type { ChartUnit } from '../../../core/types/chart-unit.js'; import type { Formatter } from '../../../core/types/formatter.js'; import type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js'; /** * Span id type used across the flame isolation surface. Matches the * `unknown`-typed ids used internally. * @internal */ export type FlameSpanId = unknown; /** * Imperative handle for FlameChart and FlameGraph. * @internal */ export type FlameRef = { /** * Isolates the span with the given id and its descendants, pushing onto the * same history stack as click-based isolation. No-op when the id is not * present in `data` or when isolation is not enabled. */ isolate: (id: FlameSpanId) => void; }; /** * Renders the flame with the root at the top (`'top-down'`, "icicle") or at the * bottom (`'bottom-up'`, classic flame). * @internal */ export type FlameOrientation = 'top-down' | 'bottom-up'; /** * @internal */ export type FlameChartProps = { data: TData[]; idAccessor: string; parentIdAccessor: string; startAccessor: string; endAccessor: string; selfValueAccessor?: string; labelAccessor: string; colorPalette?: ChartColorPalette; /** * Root at the top (`'top-down'`, "icicle") or bottom (`'bottom-up'`, classic). * @defaultValue 'bottom-up' */ orientation?: FlameOrientation; /** * How each bar's label is truncated when it exceeds the bar width. * @defaultValue 'middle' */ truncationMode?: TruncationMode; /** * Formats a numeric value for display in the tooltip. */ formatter?: Formatter | FormatOptions; /** * Unit of the numeric values. Used for automatic formatting when `formatter` is not provided. * @defaultValue `units.time.millisecond` */ unit?: ChartUnit; /** * Epoch offset to subtract from `startAccessor`/`endAccessor` values so the x-axis * starts at 0. Pass the minimum start time in the dataset. */ minTime?: number; /** * Controlled zoom domain `[start, end]` on the x-axis. */ currentZoom?: [number, number]; /** * Returns the actions to render inside the tooltip series item for a given datapoint. */ seriesActions?: (datapoint: TData) => SeriesActionsTemplate; /** * Chart height. * - Number → pixels. * - `'auto'` → grows to fit all depth levels (no fixed height). * - Other CSS string → passed through as the CSS height value. * @defaultValue 300 */ height?: number | string; /** Show the loading indicator when truthy. * @defaultValue false */ loading?: boolean; /** * Enables the built-in "isolate segment" flow: the tooltip shows an isolate * footer action, activating it filters the chart to the clicked span and its * descendants, and a back/forward navigation appears above the chart so users * can step back toward the original root or re-advance along their isolation * history. The isolate action is disabled on the current isolation root. * When `undefined`/`false`, none of this UI is rendered. * @internal */ __globalActions?: boolean; /** * Called when the user clicks a span or a blank area of the chart. * `datapoint` is the original data item that was clicked, or `undefined` * when the click lands outside any span. `descendants` is the list of all * transitive children of the clicked span in breadth-first order, or an * empty array when clicking a leaf span or a blank area. */ onClick?: (payload: { datapoint: TData; descendants: TData[]; } | { datapoint: undefined; descendants: []; }) => void; }; /** * @internal */ export type FlameGraphProps = { data: TData[]; idAccessor: string; parentIdAccessor: string; valueAccessor: string; selfValueAccessor?: string; labelAccessor: string; /** * Accessor used to sort sibling spans. Defaults to `labelAccessor`. */ sortAccessor?: string; colorPalette?: ChartColorPalette; /** * Root at the top (`'top-down'`, "icicle") or bottom (`'bottom-up'`, classic). * @defaultValue 'bottom-up' */ orientation?: FlameOrientation; /** * How each bar's label is truncated when it exceeds the bar width. * @defaultValue 'middle' */ truncationMode?: TruncationMode; /** * Formats a numeric value for display in the tooltip. */ formatter?: Formatter | FormatOptions; /** * Unit of the numeric values. Used for automatic formatting when `formatter` is not provided. * @defaultValue `units.unspecified.count` */ unit?: ChartUnit; /** * Controlled zoom domain `[start, end]` on the x-axis. */ currentZoom?: [number, number]; /** * Returns the actions to render inside the tooltip series item for a given datapoint. */ seriesActions?: (datapoint: TData) => SeriesActionsTemplate; /** * Chart height. * - Number → pixels. * - `'auto'` → grows to fit all depth levels (no fixed height). * - Other CSS string → passed through as the CSS height value. * @defaultValue 300 */ height?: number | string; /** Show the loading indicator when truthy. * @defaultValue false */ loading?: boolean; /** * Enables the built-in "isolate segment" flow: the tooltip shows an isolate * footer action, activating it filters the chart to the clicked span and its * descendants, and a back/forward navigation appears above the chart so users * can step back toward the original root or re-advance along their isolation * history. The isolate action is disabled on the current isolation root. * When `undefined`/`false`, none of this UI is rendered. * @internal */ __globalActions?: boolean; /** * Called when the user clicks a span or a blank area of the chart. * `datapoint` is the original data item that was clicked, or `undefined` * when the click lands outside any span. `descendants` is the list of all * transitive children of the clicked span in breadth-first order, or an * empty array when clicking a leaf span or a blank area. */ onClick?: (payload: { datapoint: TData; descendants: TData[]; } | { datapoint: undefined; descendants: []; }) => void; }; //# sourceMappingURL=flame-chart.d.ts.map