@dynatrace/strato-components 3.10.1 → 3.11.0

package/charts/flame/flame-graph/FlameGraph.d.ts

@@ -0,0 +1,5 @@
+import type { ChartDatapoint } from '../../core/types/chart-data.js';
+import type { FlameGraphProps } from '../shared/types/flame-chart.js';
+/** @internal */
+export declare function FlameGraph<TData extends ChartDatapoint = ChartDatapoint>({ data, idAccessor, parentIdAccessor, valueAccessor, selfValueAccessor, labelAccessor, sortAccessor, colorPalette, orientation, truncationMode, valueFormatter, currentZoom, seriesActions, height, }: FlameGraphProps<TData>): import("react").JSX.Element;
+//# sourceMappingURL=FlameGraph.d.ts.map

package/charts/flame/flame-graph/FlameGraph.js

@@ -0,0 +1,165 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FlameGraph_exports = {};
+__export(FlameGraph_exports, {
+  FlameGraph: () => FlameGraph
+});
+module.exports = __toCommonJS(FlameGraph_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_Divider = require("../../../layouts/divider/Divider.js");
+var import_OverlayTooltip = require("../../core/components/overlay-tooltip/OverlayTooltip.js");
+var import_ChartVariantContext = require("../../core/context/ChartVariantContext.js");
+var import_XYChartRoot = require("../../xy-chart/XYChartRoot.js");
+var import_constants = require("../shared/constants.js");
+var import_aggregate_spans_to_flame_graph = require("../shared/utils/aggregate-spans-to-flame-graph.js");
+var import_format_flame_value = require("../shared/utils/format-flame-value.js");
+const CROSSHAIR_VARIANT = {
+  crosshair: {
+    horizontalHidden: true,
+    verticalHidden: true,
+    cursor: "default"
+  }
+};
+function FlameGraph({
+  data,
+  idAccessor,
+  parentIdAccessor,
+  valueAccessor,
+  selfValueAccessor,
+  labelAccessor,
+  sortAccessor,
+  colorPalette,
+  orientation = "bottom-up",
+  truncationMode,
+  valueFormatter,
+  currentZoom,
+  seriesActions,
+  height
+}) {
+  const aggregatedData = (0, import_react.useMemo)(
+    () => (0, import_aggregate_spans_to_flame_graph.aggregateSpansToFlameGraph)(
+      data.map((datum, index) => ({
+        ...datum,
+        [import_constants.FLAME_ORIGINAL_IDX]: index
+      })),
+      {
+        idAccessor,
+        parentIdAccessor,
+        labelAccessor,
+        valueAccessor,
+        selfValueAccessor,
+        sortAccessor
+      }
+    ),
+    [
+      data,
+      idAccessor,
+      parentIdAccessor,
+      labelAccessor,
+      valueAccessor,
+      selfValueAccessor,
+      sortAccessor
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartVariantContext.ChartVariantContext.Provider, { value: CROSSHAIR_VARIANT, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_XYChartRoot.XYChart,
+    {
+      data: aggregatedData,
+      truncationMode,
+      height,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_XYChartRoot.XYChart.RectSeries,
+          {
+            x0Accessor: import_constants.XY_DEFAULTS.x0Accessor,
+            x1Accessor: import_constants.XY_DEFAULTS.x1Accessor,
+            y0Accessor: import_constants.DEPTH_FIELD,
+            valueAccessor,
+            colorPalette,
+            _labelAccessor: labelAccessor,
+            xAxisId: import_constants.XY_DEFAULTS.xAxisId,
+            yAxisId: import_constants.XY_DEFAULTS.yAxisId
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_XYChartRoot.XYChart.XAxis,
+          {
+            id: import_constants.XY_DEFAULTS.xAxisId,
+            type: "numerical",
+            position: "top",
+            hidden: true,
+            currentZoom,
+            infiniteZoom: true
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_XYChartRoot.XYChart.YAxis,
+          {
+            id: import_constants.XY_DEFAULTS.yAxisId,
+            type: "categorical",
+            position: "left",
+            hidden: true,
+            reversed: orientation === "bottom-up"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Legend, { hidden: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Toolbar, { hidden: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Tooltip, { children: (payload) => {
+          const datapoint = payload.rectPayload?.datapoint;
+          const label = String(datapoint?.[labelAccessor] ?? "");
+          const childrenCount = Number(
+            datapoint?.[import_constants.CHILDREN_COUNT_FIELD] ?? 0
+          );
+          const totalValue = Number(datapoint?.[valueAccessor] ?? 0);
+          const selfValue = selfValueAccessor !== void 0 ? Number(datapoint?.[selfValueAccessor] ?? 0) : 0;
+          const nonSelfValue = totalValue - selfValue;
+          const subheader = childrenCount > 0 ? `${childrenCount} children with ${nonSelfValue} value` : "";
+          const selfDescription = selfValueAccessor !== void 0 ? `Self value: ${(0, import_format_flame_value.formatFlameValue)(
+            datapoint?.[selfValueAccessor],
+            valueFormatter
+          )}` : void 0;
+          const actions = seriesActions && datapoint ? () => seriesActions(data[datapoint[import_constants.FLAME_ORIGINAL_IDX]]) : void 0;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.ChartTooltip.Header, { header1: label, subheader }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Divider.Divider,
+              {
+                orientation: "horizontal",
+                style: { marginBottom: "4px" }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_OverlayTooltip.ChartTooltip.SeriesItem,
+              {
+                color: `${payload.rectPayload?.color}`,
+                name: "Total",
+                value: (0, import_format_flame_value.formatFlameValue)(
+                  datapoint?.[valueAccessor],
+                  valueFormatter
+                ),
+                description: selfDescription,
+                actions
+              }
+            )
+          ] });
+        } })
+      ]
+    }
+  ) });
+}

package/charts/flame/shared/constants.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Field names attached by flame utilities to each datapoint before handing the
+ * row to XYChart. Kept as constants so accessors passed to XYChart and reads
+ * inside tooltips stay in lockstep.
+ */
+/** Depth of the frame in the call tree (root = 0). */
+export declare const DEPTH_FIELD = "depth";
+/** Index into the original `data` array; used to route tooltip actions back to the caller's row. */
+export declare const FLAME_ORIGINAL_IDX = "__flameOriginalIdx";
+/** Derived span duration: `endAccessor - startAccessor`. */
+export declare const VALUE_FIELD = "__value";
+/** Normalized start: `startAccessor - minTime`. */
+export declare const START_FIELD = "__start";
+/** Normalized end: `endAccessor - minTime`. */
+export declare const END_FIELD = "__end";
+/** Number of direct children of a node in the aggregated flame graph. */
+export declare const CHILDREN_COUNT_FIELD = "childrenCount";
+export declare const XY_DEFAULTS: {
+    readonly x0Accessor: "x0";
+    readonly x1Accessor: "x1";
+    readonly xAxisId: "flame-x-axis";
+    readonly yAxisId: "flame-y-axis";
+};
+//# sourceMappingURL=constants.d.ts.map

package/charts/flame/shared/constants.js

@@ -0,0 +1,40 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var constants_exports = {};
+__export(constants_exports, {
+  CHILDREN_COUNT_FIELD: () => CHILDREN_COUNT_FIELD,
+  DEPTH_FIELD: () => DEPTH_FIELD,
+  END_FIELD: () => END_FIELD,
+  FLAME_ORIGINAL_IDX: () => FLAME_ORIGINAL_IDX,
+  START_FIELD: () => START_FIELD,
+  VALUE_FIELD: () => VALUE_FIELD,
+  XY_DEFAULTS: () => XY_DEFAULTS
+});
+module.exports = __toCommonJS(constants_exports);
+const DEPTH_FIELD = "depth";
+const FLAME_ORIGINAL_IDX = "__flameOriginalIdx";
+const VALUE_FIELD = "__value";
+const START_FIELD = "__start";
+const END_FIELD = "__end";
+const CHILDREN_COUNT_FIELD = "childrenCount";
+const XY_DEFAULTS = {
+  x0Accessor: "x0",
+  x1Accessor: "x1",
+  xAxisId: "flame-x-axis",
+  yAxisId: "flame-y-axis"
+};

package/charts/flame/shared/types/flame-chart.d.ts

@@ -0,0 +1,81 @@
+import type { TruncationMode } from '../../../../typography/text-ellipsis/TextEllipsis.js';
+import type { ChartColorPalette, ChartDatapoint } from '../../../core/types/chart-data.js';
+import type { Formatter } from '../../../core/types/formatter.js';
+import type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js';
+/**
+ * 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<TData extends ChartDatapoint = ChartDatapoint> = {
+    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. Defaults to `String(value)`. */
+    valueFormatter?: Formatter;
+    /**
+     * 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. Numbers are pixels; strings are any valid CSS height.
+     * @defaultValue '300px'
+     */
+    height?: number | string;
+};
+/** @internal */
+export type FlameGraphProps<TData extends ChartDatapoint = ChartDatapoint> = {
+    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. Defaults to `String(value)`. */
+    valueFormatter?: Formatter;
+    /** 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. Numbers are pixels; strings are any valid CSS height.
+     * @defaultValue '300px'
+     */
+    height?: number | string;
+};
+//# sourceMappingURL=flame-chart.d.ts.map

package/charts/flame/shared/types/flame-chart.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var flame_chart_exports = {};
+module.exports = __toCommonJS(flame_chart_exports);

package/charts/flame/shared/utils/aggregate-spans-to-flame-graph.d.ts

@@ -0,0 +1,21 @@
+import type { ChartDatapoint } from '../../../core/types/chart-data.js';
+type AggregationAccessors = {
+    idAccessor: string;
+    parentIdAccessor: string;
+    labelAccessor: string;
+    valueAccessor: string;
+    selfValueAccessor?: string;
+    /** Accessor used to sort sibling spans. Defaults to `labelAccessor`. */
+    sortAccessor?: string;
+};
+/**
+ * Converts raw span data into flame graph rows: each span becomes one row with
+ * computed `x0`/`x1` geometry (from inclusive value), depth, and children count.
+ *
+ * Numeric values are parsed once per span and cached on an intermediate node so
+ * the sort comparator and layout pass do not re-run `Number()`. Layout uses an
+ * explicit stack rather than recursion to stay safe on very deep call trees.
+ */
+export declare function aggregateSpansToFlameGraph(spans: ChartDatapoint[], { idAccessor, parentIdAccessor, labelAccessor, valueAccessor, selfValueAccessor, sortAccessor, }: AggregationAccessors): ChartDatapoint[];
+export {};
+//# sourceMappingURL=aggregate-spans-to-flame-graph.d.ts.map

package/charts/flame/shared/utils/aggregate-spans-to-flame-graph.js

@@ -0,0 +1,114 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var aggregate_spans_to_flame_graph_exports = {};
+__export(aggregate_spans_to_flame_graph_exports, {
+  aggregateSpansToFlameGraph: () => aggregateSpansToFlameGraph
+});
+module.exports = __toCommonJS(aggregate_spans_to_flame_graph_exports);
+var import_constants = require("../constants.js");
+const toFiniteNumber = (raw) => {
+  const n = Number(raw);
+  return Number.isFinite(n) ? n : 0;
+};
+function aggregateSpansToFlameGraph(spans, {
+  idAccessor,
+  parentIdAccessor,
+  labelAccessor,
+  valueAccessor,
+  selfValueAccessor,
+  sortAccessor = labelAccessor
+}) {
+  const spanIds = /* @__PURE__ */ new Set();
+  for (const span of spans) {
+    spanIds.add(span[idAccessor]);
+  }
+  const childrenByParentId = /* @__PURE__ */ new Map();
+  const roots = [];
+  for (const span of spans) {
+    const node = {
+      span,
+      value: toFiniteNumber(span[valueAccessor])
+    };
+    const parentId = span[parentIdAccessor];
+    const isRoot = parentId === null || parentId === void 0 || !spanIds.has(parentId);
+    if (isRoot) {
+      roots.push(node);
+      continue;
+    }
+    const siblings = childrenByParentId.get(parentId);
+    if (siblings) {
+      siblings.push(node);
+    } else {
+      childrenByParentId.set(parentId, [node]);
+    }
+  }
+  const compareBySortAccessor = (a, b) => {
+    const av = a.span[sortAccessor];
+    const bv = b.span[sortAccessor];
+    if (typeof av === "number" && typeof bv === "number") {
+      return av - bv;
+    }
+    return String(av ?? "").localeCompare(String(bv ?? ""));
+  };
+  if (roots.length > 1) {
+    roots.sort(compareBySortAccessor);
+  }
+  for (const siblings of childrenByParentId.values()) {
+    if (siblings.length > 1) {
+      siblings.sort(compareBySortAccessor);
+    }
+  }
+  const result = [];
+  const stack = [];
+  let cursor = 0;
+  for (const root of roots) {
+    stack.push({ node: root, x0: cursor, depth: 0 });
+    cursor += root.value;
+  }
+  stack.reverse();
+  for (let frame = stack.pop(); frame !== void 0; frame = stack.pop()) {
+    const { node, x0, depth } = frame;
+    const { span, value } = node;
+    const children = childrenByParentId.get(span[idAccessor]) ?? [];
+    const row = {
+      ...span,
+      [import_constants.XY_DEFAULTS.x0Accessor]: x0,
+      [import_constants.XY_DEFAULTS.x1Accessor]: x0 + value,
+      [import_constants.DEPTH_FIELD]: depth,
+      [valueAccessor]: value,
+      [import_constants.CHILDREN_COUNT_FIELD]: children.length
+    };
+    if (selfValueAccessor !== void 0) {
+      row[selfValueAccessor] = toFiniteNumber(span[selfValueAccessor]);
+    }
+    result.push(row);
+    if (children.length === 0) {
+      continue;
+    }
+    const frames = new Array(children.length);
+    let childCursor = x0;
+    for (let i = 0; i < children.length; i++) {
+      frames[i] = { node: children[i], x0: childCursor, depth: depth + 1 };
+      childCursor += children[i].value;
+    }
+    for (let i = frames.length - 1; i >= 0; i--) {
+      stack.push(frames[i]);
+    }
+  }
+  return result;
+}

package/charts/flame/shared/utils/format-flame-value.d.ts

@@ -0,0 +1,9 @@
+import type { Formatter } from '../../../core/types/formatter.js';
+/**
+ * Tooltip-friendly stringifier for flame values. When a `Formatter` is provided,
+ * the raw value is coerced to a number (missing values become `0`) and handed
+ * to it. Without a formatter, the value is stringified (missing values become
+ * an empty string) — matching the tooltip conventions used by the other charts.
+ */
+export declare function formatFlameValue(value: unknown, formatter?: Formatter): string;
+//# sourceMappingURL=format-flame-value.d.ts.map

package/charts/flame/shared/utils/format-flame-value.js

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var format_flame_value_exports = {};
+__export(format_flame_value_exports, {
+  formatFlameValue: () => formatFlameValue
+});
+module.exports = __toCommonJS(format_flame_value_exports);
+function formatFlameValue(value, formatter) {
+  if (formatter) {
+    return formatter(Number(value ?? 0));
+  }
+  return String(value ?? "");
+}

package/charts/flame/shared/utils/order-spans-hierarchically.d.ts

@@ -0,0 +1,20 @@
+import type { ChartDatapoint } from '../../../core/types/chart-data.js';
+type OrderingAccessors = {
+    spanIdAccessor: string;
+    parentIdAccessor: string;
+    x0Accessor: string;
+    x1Accessor: string;
+};
+/**
+ * Traverses the span forest in DFS pre-order (parent before children, siblings
+ * sorted by `x0` with original index as tie-breaker) and returns a flat list
+ * where each span carries its `depth`. Zero-width spans are widened by 1 so
+ * they remain paintable on the canvas.
+ *
+ * Numeric x0/x1 are parsed once per span and cached on the internal `Entry`,
+ * so the sort comparator does not re-run `Number()` at every comparison.
+ * Traversal is iterative to avoid stack overflows on deep flame graphs.
+ */
+export declare function orderSpansHierarchically(spans: ChartDatapoint[], { spanIdAccessor, parentIdAccessor, x0Accessor, x1Accessor, }: OrderingAccessors): ChartDatapoint[];
+export {};
+//# sourceMappingURL=order-spans-hierarchically.d.ts.map

package/charts/flame/shared/utils/order-spans-hierarchically.js

@@ -0,0 +1,81 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var order_spans_hierarchically_exports = {};
+__export(order_spans_hierarchically_exports, {
+  orderSpansHierarchically: () => orderSpansHierarchically
+});
+module.exports = __toCommonJS(order_spans_hierarchically_exports);
+var import_constants = require("../constants.js");
+function orderSpansHierarchically(spans, {
+  spanIdAccessor,
+  parentIdAccessor,
+  x0Accessor,
+  x1Accessor
+}) {
+  const spanIds = /* @__PURE__ */ new Set();
+  for (const span of spans) {
+    spanIds.add(span[spanIdAccessor]);
+  }
+  const childrenMap = /* @__PURE__ */ new Map();
+  const roots = [];
+  for (let index = 0; index < spans.length; index++) {
+    const span = spans[index];
+    const entry = {
+      span,
+      index,
+      x0: Number(span[x0Accessor])
+    };
+    const parentId = span[parentIdAccessor];
+    const isRoot = parentId === null || parentId === void 0 || !spanIds.has(parentId);
+    if (isRoot) {
+      roots.push(entry);
+      continue;
+    }
+    const siblings = childrenMap.get(parentId);
+    if (siblings) {
+      siblings.push(entry);
+    } else {
+      childrenMap.set(parentId, [entry]);
+    }
+  }
+  const byX0AndIndex = (a, b) => a.x0 - b.x0 || a.index - b.index;
+  roots.sort(byX0AndIndex);
+  for (const children of childrenMap.values()) {
+    children.sort(byX0AndIndex);
+  }
+  const result = [];
+  const stack = [];
+  for (let i = roots.length - 1; i >= 0; i--) {
+    stack.push({ span: roots[i].span, depth: 0 });
+  }
+  for (let frame = stack.pop(); frame !== void 0; frame = stack.pop()) {
+    const { span, depth } = frame;
+    const x0 = Number(span[x0Accessor]);
+    const x1 = Number(span[x1Accessor]);
+    const widened = x0 === x1 ? { [x1Accessor]: x1 + 1 } : void 0;
+    result.push({ ...span, ...widened, [import_constants.DEPTH_FIELD]: depth });
+    const children = childrenMap.get(span[spanIdAccessor]);
+    if (!children) {
+      continue;
+    }
+    for (let i = children.length - 1; i >= 0; i--) {
+      stack.push({ span: children[i].span, depth: depth + 1 });
+    }
+  }
+  return result;
+}

package/charts/gantt-chart/GanttChartLine.css

@@ -1,4 +1,4 @@
-._1pk2ed10-3-10-1 {
+._1pk2ed10-3-11-0 {
   height: 100%;
   width: 100%;
 }

package/charts/gantt-chart/GanttChartLine.sty.js

@@ -21,4 +21,4 @@ __export(GanttChartLine_css_exports, {
 });
 module.exports = __toCommonJS(GanttChartLine_css_exports);
 var import_GanttChartLine_css_ts_vanilla = require("./GanttChartLine.css");
-var wrapper = "_1pk2ed10-3-10-1";
+var wrapper = "_1pk2ed10-3-11-0";

package/charts/gantt-chart/components/GanttChartLineRenderer.css

@@ -1,4 +1,4 @@
-._mnxak30-3-10-1 {
+._mnxak30-3-11-0 {
   height: 100%;
   display: flex;
   justify-content: center;

package/charts/gantt-chart/components/GanttChartLineRenderer.sty.js

@@ -21,4 +21,4 @@ __export(GanttChartLineRenderer_css_exports, {
 });
 module.exports = __toCommonJS(GanttChartLineRenderer_css_exports);
 var import_GanttChartLineRenderer_css_ts_vanilla = require("./GanttChartLineRenderer.css");
-var svgWrapperCSS = "_mnxak30-3-10-1";
+var svgWrapperCSS = "_mnxak30-3-11-0";

package/charts/gantt-chart/components/tooltip/GanttChartTooltip.css

@@ -1,4 +1,4 @@
-._1v8s3xl0-3-10-1._1v8s3xl0-3-10-1 {
+._1v8s3xl0-3-11-0._1v8s3xl0-3-11-0 {
   max-height: initial;
   min-width: 160px;
   max-width: 320px;

package/charts/gantt-chart/components/tooltip/GanttChartTooltip.sty.js

@@ -21,4 +21,4 @@ __export(GanttChartTooltip_css_exports, {
 });
 module.exports = __toCommonJS(GanttChartTooltip_css_exports);
 var import_GanttChartTooltip_css_ts_vanilla = require("./GanttChartTooltip.css");
-var ganttChartTooltipCSS = "_1v8s3xl0-3-10-1";
+var ganttChartTooltipCSS = "_1v8s3xl0-3-11-0";

package/charts/gauge/components/GaugeChartLayout/GaugeChartLayout.css

@@ -1,4 +1,4 @@
-._ezp7cy0-3-10-1 {
+._ezp7cy0-3-11-0 {
   width: 100%;
   height: 100%;
   container-type: size;

package/charts/gauge/components/GaugeChartLayout/GaugeChartLayout.sty.js

@@ -21,4 +21,4 @@ __export(GaugeChartLayout_css_exports, {
 });
 module.exports = __toCommonJS(GaugeChartLayout_css_exports);
 var import_GaugeChartLayout_css_ts_vanilla = require("./GaugeChartLayout.css");
-var layoutContainer = "_ezp7cy0-3-10-1";
+var layoutContainer = "_ezp7cy0-3-11-0";