@dynatrace/strato-components 3.11.2 → 3.12.0

package/charts/core/slots/Tooltip.d.ts

@@ -1,11 +1,15 @@
 import type { ReactNode } from 'react';
+import type { ChartDatapoint } from '../types/chart-data.js';
 /**
- * @public
+ * @internal
  */
-export type TooltipProps = {
+export type TooltipProps<TData extends ChartDatapoint = ChartDatapoint> = {
     hidden?: boolean;
-    children?: (payload: Record<string, unknown>) => ReactNode;
+    children?: (payload: TData) => ReactNode;
 };
+/**
+ * @internal
+ */
 export declare const Tooltip: <T extends TooltipProps>(prefix: string) => {
     (props: T): null;
     displayName: string;

package/charts/core/typographyStyles.css

@@ -1,3 +1,3 @@
-._18u8ey50-3-11-2 {
+._18u8ey50-3-12-0 {
   font-feature-settings: 'ss01';
 }

package/charts/core/typographyStyles.sty.js

@@ -21,4 +21,4 @@ __export(typographyStyles_css_exports, {
 });
 module.exports = __toCommonJS(typographyStyles_css_exports);
 var import_typographyStyles_css_ts_vanilla = require("./typographyStyles.css");
-var replaceSlashedZero = "_18u8ey50-3-11-2";
+var replaceSlashedZero = "_18u8ey50-3-12-0";

package/charts/flame/flame-chart/FlameChart.d.ts

@@ -1,5 +1,19 @@
+import { type PropsWithChildren } from 'react';
 import type { ChartDatapoint } from '../../core/types/chart-data.js';
 import type { FlameChartProps } from '../shared/types/flame-chart.js';
+/**
+ * @internal
+ */
+export declare const FlameChartRoot: <TData extends ChartDatapoint = ChartDatapoint>({ data, idAccessor, parentIdAccessor, startAccessor, endAccessor, selfValueAccessor, labelAccessor, colorPalette, orientation, truncationMode, valueFormatter, minTime, currentZoom, seriesActions, height, children, }: PropsWithChildren<FlameChartProps<TData>>) => import("react").JSX.Element;
 /** @internal */
-export declare function FlameChart<TData extends ChartDatapoint = ChartDatapoint>({ data, idAccessor, parentIdAccessor, startAccessor, endAccessor, selfValueAccessor, labelAccessor, colorPalette, orientation, truncationMode, valueFormatter, minTime, currentZoom, seriesActions, height, }: FlameChartProps<TData>): import("react").JSX.Element;
+export declare const FlameChart: (<TData extends ChartDatapoint = ChartDatapoint>({ data, idAccessor, parentIdAccessor, startAccessor, endAccessor, selfValueAccessor, labelAccessor, colorPalette, orientation, truncationMode, valueFormatter, minTime, currentZoom, seriesActions, height, children, }: PropsWithChildren<FlameChartProps<TData>>) => import("react").JSX.Element) & {
+    Tooltip: {
+        <TData extends ChartDatapoint>(_props: import("../../index.js")._GenericChartTooltipProps<TData>): null;
+        displayName: string;
+    };
+    ColorRule: {
+        (_props: import("../../index.js").ColorRuleProps): null;
+        displayName: string;
+    };
+};
 //# sourceMappingURL=FlameChart.d.ts.map

package/charts/flame/flame-chart/FlameChart.js

@@ -17,23 +17,25 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var FlameChart_exports = {};
 __export(FlameChart_exports, {
-  FlameChart: () => FlameChart
+  FlameChart: () => FlameChart,
+  FlameChartRoot: () => FlameChartRoot
 });
 module.exports = __toCommonJS(FlameChart_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_units = require("@dynatrace-sdk/units");
-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_ColorRule = require("../../core/slots/ColorRule.js");
 var import_XYChartRoot = require("../../xy-chart/XYChartRoot.js");
+var import_FlameTooltip = require("../shared/components/tooltip/FlameTooltip.js");
 var import_constants = require("../shared/constants.js");
-var import_format_flame_value = require("../shared/utils/format-flame-value.js");
+var import_iterate_slots = require("./utils/iterate-slots.js");
+var import_Tooltip = require("../shared/slots/Tooltip.js");
 var import_order_spans_hierarchically = require("../shared/utils/order-spans-hierarchically.js");
 const CROSSHAIR_VARIANT = {
   crosshair: { horizontalHidden: true, cursor: "default" }
 };
-function FlameChart({
+const FlameChartRoot = ({
   data,
   idAccessor,
   parentIdAccessor,
@@ -48,8 +50,9 @@ function FlameChart({
   minTime,
   currentZoom,
   seriesActions,
-  height
-}) {
+  height,
+  children
+}) => {
   const orderedData = (0, import_react.useMemo)(() => {
     const withIndex = data.map((datum, index) => ({
       ...datum,
@@ -83,6 +86,7 @@ function FlameChart({
     const offset = minTime ?? 0;
     return [currentZoom[0] - offset, currentZoom[1] - offset];
   }, [currentZoom, minTime]);
+  const { customTooltipTemplate, colorRules } = (0, import_iterate_slots.iterateSlots)(children);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartVariantContext.ChartVariantContext.Provider, { value: CROSSHAIR_VARIANT, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_XYChartRoot.XYChart,
     {
@@ -108,7 +112,7 @@ function FlameChart({
           {
             id: import_constants.XY_DEFAULTS.xAxisId,
             type: "numerical",
-            position: "top",
+            position: orientation === "bottom-up" ? "bottom" : "top",
             formatter: { input: import_units.units.time.millisecond },
             currentZoom: normalizedZoom,
             infiniteZoom: true
@@ -126,39 +130,40 @@ function FlameChart({
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Legend, { hidden: true }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Toolbar, { hidden: true }),
+        colorRules,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Tooltip, { children: (payload) => {
           const datapoint = payload.rectPayload?.datapoint;
-          const label = String(datapoint?.[labelAccessor] ?? "");
-          const selfDescription = selfValueAccessor !== void 0 ? `Self: ${(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 }),
-            /* @__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?.[import_constants.VALUE_FIELD],
-                  valueFormatter
-                ),
-                description: selfDescription,
-                actions
-              }
-            )
-          ] });
+          if (!datapoint) {
+            return;
+          }
+          if (customTooltipTemplate) {
+            const template = customTooltipTemplate(datapoint);
+            if (template === null) {
+              return null;
+            }
+            if (template) {
+              return template;
+            }
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_FlameTooltip.FlameTooltip,
+            {
+              payload,
+              data,
+              labelAccessor,
+              valueField: import_constants.VALUE_FIELD,
+              selfValueAccessor,
+              valueFormatter,
+              seriesActions
+            }
+          );
         } })
       ]
     }
   ) });
-}
+};
+const FlameChart = Object.assign(FlameChartRoot, {
+  Tooltip: import_Tooltip.FlameChartTooltipSlot,
+  ColorRule: import_ColorRule.ColorRule
+});
+FlameChart.displayName = import_constants.DISPLAY_NAME_FLAME_CHART;

package/charts/flame/flame-chart/utils/iterate-slots.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from 'react';
+import type { ChartDatapoint } from '../../../core/types/chart-data.js';
+import type { Slots } from '../../shared/types/flame-internal.js';
+export declare const iterateSlots: <TData extends ChartDatapoint = ChartDatapoint>(children: ReactNode) => Slots<TData>;
+//# sourceMappingURL=iterate-slots.d.ts.map

package/charts/flame/flame-chart/utils/iterate-slots.js

@@ -0,0 +1,37 @@
+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 iterate_slots_exports = {};
+__export(iterate_slots_exports, {
+  iterateSlots: () => iterateSlots
+});
+module.exports = __toCommonJS(iterate_slots_exports);
+var import_react = require("react");
+var import_is_slot = require("../../../../core/utils/is-slot.js");
+var import_ColorRule = require("../../../core/slots/ColorRule.js");
+var import_Tooltip = require("../../shared/slots/Tooltip.js");
+const iterateSlots = (children) => {
+  const slots = { customTooltipTemplate: void 0, colorRules: [] };
+  import_react.Children.forEach(children, (child) => {
+    if ((0, import_is_slot.isSlot)(child, import_Tooltip.FlameChartTooltipSlot)) {
+      slots.customTooltipTemplate = child.props.children;
+    } else if ((0, import_is_slot.isSlot)(child, import_ColorRule.ColorRule) && (0, import_ColorRule.isValidColorRule)(child.props)) {
+      slots.colorRules.push(child);
+    }
+  });
+  return slots;
+};

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

@@ -1,5 +1,19 @@
+import { type PropsWithChildren } from 'react';
 import type { ChartDatapoint } from '../../core/types/chart-data.js';
 import type { FlameGraphProps } from '../shared/types/flame-chart.js';
+/**
+ * @internal
+ */
+export declare const FlameGraphRoot: <TData extends ChartDatapoint = ChartDatapoint>({ data, idAccessor, parentIdAccessor, valueAccessor, selfValueAccessor, labelAccessor, sortAccessor, colorPalette, orientation, truncationMode, valueFormatter, currentZoom, seriesActions, height, children, }: PropsWithChildren<FlameGraphProps<TData>>) => import("react").JSX.Element;
 /** @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;
+export declare const FlameGraph: (<TData extends ChartDatapoint = ChartDatapoint>({ data, idAccessor, parentIdAccessor, valueAccessor, selfValueAccessor, labelAccessor, sortAccessor, colorPalette, orientation, truncationMode, valueFormatter, currentZoom, seriesActions, height, children, }: PropsWithChildren<FlameGraphProps<TData>>) => import("react").JSX.Element) & {
+    Tooltip: {
+        <TData extends ChartDatapoint>(_props: import("../../index.js")._GenericChartTooltipProps<TData>): null;
+        displayName: string;
+    };
+    ColorRule: {
+        (_props: import("../../index.js").ColorRuleProps): null;
+        displayName: string;
+    };
+};
 //# sourceMappingURL=FlameGraph.d.ts.map

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

@@ -17,18 +17,20 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var FlameGraph_exports = {};
 __export(FlameGraph_exports, {
-  FlameGraph: () => FlameGraph
+  FlameGraph: () => FlameGraph,
+  FlameGraphRoot: () => FlameGraphRoot
 });
 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_ColorRule = require("../../core/slots/ColorRule.js");
 var import_XYChartRoot = require("../../xy-chart/XYChartRoot.js");
+var import_FlameTooltip = require("../shared/components/tooltip/FlameTooltip.js");
 var import_constants = require("../shared/constants.js");
+var import_iterate_slots = require("./utils/iterate-slots.js");
+var import_Tooltip = require("../shared/slots/Tooltip.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,
@@ -36,7 +38,7 @@ const CROSSHAIR_VARIANT = {
     cursor: "default"
   }
 };
-function FlameGraph({
+const FlameGraphRoot = ({
   data,
   idAccessor,
   parentIdAccessor,
@@ -50,8 +52,9 @@ function FlameGraph({
   valueFormatter,
   currentZoom,
   seriesActions,
-  height
-}) {
+  height,
+  children
+}) => {
   const aggregatedData = (0, import_react.useMemo)(
     () => (0, import_aggregate_spans_to_flame_graph.aggregateSpansToFlameGraph)(
       data.map((datum, index) => ({
@@ -77,6 +80,7 @@ function FlameGraph({
       sortAccessor
     ]
   );
+  const { customTooltipTemplate, colorRules } = (0, import_iterate_slots.iterateSlots)(children);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartVariantContext.ChartVariantContext.Provider, { value: CROSSHAIR_VARIANT, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_XYChartRoot.XYChart,
     {
@@ -120,46 +124,48 @@ function FlameGraph({
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Legend, { hidden: true }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Toolbar, { hidden: true }),
+        colorRules,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Tooltip, { children: (payload) => {
           const datapoint = payload.rectPayload?.datapoint;
-          const label = String(datapoint?.[labelAccessor] ?? "");
+          if (!datapoint) {
+            return;
+          }
+          if (customTooltipTemplate) {
+            const template = customTooltipTemplate(datapoint);
+            if (template === null) {
+              return null;
+            }
+            if (template) {
+              return template;
+            }
+          }
           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
-              }
-            )
-          ] });
+          const subheader = childrenCount > 0 ? `${childrenCount} children with ${totalValue - selfValue} value` : "";
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_FlameTooltip.FlameTooltip,
+            {
+              payload,
+              data,
+              labelAccessor,
+              valueField: valueAccessor,
+              subheader,
+              selfValueAccessor,
+              selfDescriptionLabel: "Self value",
+              valueFormatter,
+              seriesActions
+            }
+          );
         } })
       ]
     }
   ) });
-}
+};
+const FlameGraph = Object.assign(FlameGraphRoot, {
+  Tooltip: import_Tooltip.FlameGraphTooltipSlot,
+  ColorRule: import_ColorRule.ColorRule
+});
+FlameGraph.displayName = import_constants.DISPLAY_NAME_FLAME_GRAPH;

package/charts/flame/flame-graph/utils/iterate-slots.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from 'react';
+import type { ChartDatapoint } from '../../../core/types/chart-data.js';
+import type { Slots } from '../../shared/types/flame-internal.js';
+export declare const iterateSlots: <TData extends ChartDatapoint = ChartDatapoint>(children: ReactNode) => Slots<TData>;
+//# sourceMappingURL=iterate-slots.d.ts.map

package/charts/flame/flame-graph/utils/iterate-slots.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 iterate_slots_exports = {};
+__export(iterate_slots_exports, {
+  iterateSlots: () => iterateSlots
+});
+module.exports = __toCommonJS(iterate_slots_exports);
+var import_react = require("react");
+var import_is_slot = require("../../../../core/utils/is-slot.js");
+var import_ColorRule = require("../../../core/slots/ColorRule.js");
+var import_Tooltip = require("../../shared/slots/Tooltip.js");
+const iterateSlots = (children) => {
+  const slots = {
+    customTooltipTemplate: void 0,
+    colorRules: []
+  };
+  import_react.Children.forEach(children, (child) => {
+    if ((0, import_is_slot.isSlot)(child, import_Tooltip.FlameGraphTooltipSlot)) {
+      slots.customTooltipTemplate = child.props.children;
+    } else if ((0, import_is_slot.isSlot)(child, import_ColorRule.ColorRule) && (0, import_ColorRule.isValidColorRule)(child.props)) {
+      slots.colorRules.push(child);
+    }
+  });
+  return slots;
+};

package/charts/flame/shared/components/tooltip/FlameTooltip.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+import type { 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';
+import type { XYChartTooltipPayload } from '../../../../xy-chart/types/xy-chart.js';
+interface FlameTooltipProps<TData extends ChartDatapoint> {
+    payload: XYChartTooltipPayload;
+    data: readonly TData[];
+    labelAccessor: string;
+    valueField: string;
+    subheader?: string;
+    selfValueAccessor?: string;
+    selfDescriptionLabel?: string;
+    valueFormatter?: Formatter;
+    seriesActions?: (datapoint: TData) => SeriesActionsTemplate;
+}
+export declare function FlameTooltip<TData extends ChartDatapoint>({ payload, data, labelAccessor, valueField, subheader, selfValueAccessor, selfDescriptionLabel, valueFormatter, seriesActions, }: Readonly<FlameTooltipProps<TData>>): ReactNode;
+export {};
+//# sourceMappingURL=FlameTooltip.d.ts.map

package/charts/flame/shared/components/tooltip/FlameTooltip.js

@@ -0,0 +1,64 @@
+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 FlameTooltip_exports = {};
+__export(FlameTooltip_exports, {
+  FlameTooltip: () => FlameTooltip
+});
+module.exports = __toCommonJS(FlameTooltip_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_Divider = require("../../../../../layouts/divider/Divider.js");
+var import_OverlayTooltip = require("../../../../core/components/overlay-tooltip/OverlayTooltip.js");
+var import_constants = require("../../constants.js");
+var import_format_flame_value = require("../../utils/format-flame-value.js");
+function FlameTooltip({
+  payload,
+  data,
+  labelAccessor,
+  valueField,
+  subheader,
+  selfValueAccessor,
+  selfDescriptionLabel = "Self",
+  valueFormatter,
+  seriesActions
+}) {
+  const datapoint = payload.rectPayload?.datapoint;
+  if (!datapoint) {
+    return null;
+  }
+  const rawLabel = datapoint?.[labelAccessor];
+  const label = typeof rawLabel === "string" || typeof rawLabel === "number" || typeof rawLabel === "boolean" ? String(rawLabel) : "";
+  const selfDescription = selfValueAccessor !== void 0 ? `${selfDescriptionLabel}: ${(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?.[valueField], valueFormatter),
+        description: selfDescription,
+        actions
+      }
+    )
+  ] });
+}

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

@@ -21,4 +21,6 @@ export declare const XY_DEFAULTS: {
     readonly xAxisId: "flame-x-axis";
     readonly yAxisId: "flame-y-axis";
 };
+export declare const DISPLAY_NAME_FLAME_CHART = "FlameChart";
+export declare const DISPLAY_NAME_FLAME_GRAPH = "FlameGraph";
 //# sourceMappingURL=constants.d.ts.map

package/charts/flame/shared/constants.js

@@ -19,6 +19,8 @@ var constants_exports = {};
 __export(constants_exports, {
   CHILDREN_COUNT_FIELD: () => CHILDREN_COUNT_FIELD,
   DEPTH_FIELD: () => DEPTH_FIELD,
+  DISPLAY_NAME_FLAME_CHART: () => DISPLAY_NAME_FLAME_CHART,
+  DISPLAY_NAME_FLAME_GRAPH: () => DISPLAY_NAME_FLAME_GRAPH,
   END_FIELD: () => END_FIELD,
   FLAME_ORIGINAL_IDX: () => FLAME_ORIGINAL_IDX,
   START_FIELD: () => START_FIELD,
@@ -38,3 +40,5 @@ const XY_DEFAULTS = {
   xAxisId: "flame-x-axis",
   yAxisId: "flame-y-axis"
 };
+const DISPLAY_NAME_FLAME_CHART = "FlameChart";
+const DISPLAY_NAME_FLAME_GRAPH = "FlameGraph";

package/charts/flame/shared/slots/Tooltip.d.ts

@@ -0,0 +1,17 @@
+import type { TooltipProps } from '../../../core/slots/Tooltip.js';
+import type { ChartDatapoint } from '../../../core/types/chart-data.js';
+/**
+ * @internal
+ */
+export declare const FlameChartTooltipSlot: {
+    <TData extends ChartDatapoint>(_props: TooltipProps<TData>): null;
+    displayName: string;
+};
+/**
+ * @internal
+ */
+export declare const FlameGraphTooltipSlot: {
+    <TData extends ChartDatapoint>(_props: TooltipProps<TData>): null;
+    displayName: string;
+};
+//# sourceMappingURL=Tooltip.d.ts.map

package/charts/flame/shared/slots/Tooltip.js

@@ -0,0 +1,31 @@
+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 Tooltip_exports = {};
+__export(Tooltip_exports, {
+  FlameChartTooltipSlot: () => FlameChartTooltipSlot,
+  FlameGraphTooltipSlot: () => FlameGraphTooltipSlot
+});
+module.exports = __toCommonJS(Tooltip_exports);
+const FlameChartTooltipSlot = function(_props) {
+  return null;
+};
+FlameChartTooltipSlot.displayName = "FlameChart.Tooltip";
+const FlameGraphTooltipSlot = function(_props) {
+  return null;
+};
+FlameGraphTooltipSlot.displayName = "FlameGraph.Tooltip";

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

@@ -0,0 +1,15 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { ChartDatapoint } from '../../../core/types/chart-data.js';
+import type { ColorRuleProps } from '../../../core/types/color-rule.js';
+/**
+ * @internal
+ */
+export type CustomTooltipTemplate<TData extends ChartDatapoint> = (datapoint: TData) => ReactNode;
+/**
+ * @internal
+ */
+export type Slots<TData extends ChartDatapoint> = {
+    customTooltipTemplate: CustomTooltipTemplate<TData> | undefined;
+    colorRules: ReactElement<ColorRuleProps>[];
+};
+//# sourceMappingURL=flame-internal.d.ts.map

package/charts/flame/shared/types/flame-internal.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_internal_exports = {};
+module.exports = __toCommonJS(flame_internal_exports);

package/charts/gantt-chart/GanttChartLine.css

@@ -1,4 +1,4 @@
-._1pk2ed10-3-11-2 {
+._1pk2ed10-3-12-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-11-2";
+var wrapper = "_1pk2ed10-3-12-0";

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

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