@dynatrace/strato-components 3.12.1 → 3.13.0

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

@@ -1,26 +1,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { ChartVariantContext } from "../../core/context/ChartVariantContext.js";
+import { useCallback, useMemo, useState } from "react";
+import { iterateSlots } from "./utils/iterate-slots.js";
 import { ColorRule } from "../../core/slots/ColorRule.js";
 import { XYChart } from "../../xy-chart/XYChartRoot.js";
-import { FlameTooltip } from "../shared/components/tooltip/FlameTooltip.js";
 import {
-  CHILDREN_COUNT_FIELD,
   DEPTH_FIELD,
   DISPLAY_NAME_FLAME_GRAPH,
   FLAME_ORIGINAL_IDX,
   XY_DEFAULTS
 } from "../shared/constants.js";
-import { iterateSlots } from "./utils/iterate-slots.js";
+import { DefaultTooltip } from "./components/tooltip/DefaultTooltip.js";
 import { FlameGraphTooltipSlot as Tooltip } from "../shared/slots/Tooltip.js";
 import { aggregateSpansToFlameGraph } from "../shared/utils/aggregate-spans-to-flame-graph.js";
-const CROSSHAIR_VARIANT = {
-  crosshair: {
-    horizontalHidden: true,
-    verticalHidden: true,
-    cursor: "default"
-  }
-};
+import { resolveFlameTooltipContent } from "../shared/utils/resolve-flame-tooltip-content.js";
 const FlameGraphRoot = ({
   data,
   idAccessor,
@@ -36,6 +28,7 @@ const FlameGraphRoot = ({
   currentZoom,
   seriesActions,
   height,
+  __globalActions,
   children
 }) => {
   const aggregatedData = useMemo(
@@ -64,7 +57,19 @@ const FlameGraphRoot = ({
     ]
   );
   const { customTooltipTemplate, colorRules } = iterateSlots(children);
-  return /* @__PURE__ */ jsx(ChartVariantContext.Provider, { value: CROSSHAIR_VARIANT, children: /* @__PURE__ */ jsxs(
+  const [internalZoom, setInternalZoom] = useState(void 0);
+  const effectiveZoom = currentZoom ?? internalZoom;
+  const handleIsolate = useCallback((zoom) => {
+    setInternalZoom(zoom);
+  }, []);
+  const rootValue = useMemo(
+    () => aggregatedData.reduce(
+      (max, d) => Math.max(max, Number(d[valueAccessor] ?? 0)),
+      0
+    ),
+    [aggregatedData, valueAccessor]
+  );
+  return /* @__PURE__ */ jsxs(
     XYChart,
     {
       data: aggregatedData,
@@ -91,8 +96,8 @@ const FlameGraphRoot = ({
             type: "numerical",
             position: "top",
             hidden: true,
-            currentZoom,
-            infiniteZoom: true
+            currentZoom: effectiveZoom,
+            hideCrosshair: true
           }
         ),
         /* @__PURE__ */ jsx(
@@ -102,50 +107,35 @@ const FlameGraphRoot = ({
             type: "categorical",
             position: "left",
             hidden: true,
-            reversed: orientation === "bottom-up"
+            reversed: orientation === "bottom-up",
+            hideCrosshair: true
           }
         ),
         /* @__PURE__ */ jsx(XYChart.Legend, { hidden: true }),
         /* @__PURE__ */ jsx(XYChart.Toolbar, { hidden: true }),
         colorRules,
-        /* @__PURE__ */ jsx(XYChart.Tooltip, { children: (payload) => {
-          const datapoint = payload.rectPayload?.datapoint;
-          if (!datapoint) {
-            return;
-          }
-          if (customTooltipTemplate) {
-            const template = customTooltipTemplate(datapoint);
-            if (template === null) {
-              return null;
-            }
-            if (template) {
-              return template;
-            }
-          }
-          const childrenCount = Number(
-            datapoint?.[CHILDREN_COUNT_FIELD] ?? 0
-          );
-          const totalValue = Number(datapoint?.[valueAccessor] ?? 0);
-          const selfValue = selfValueAccessor !== void 0 ? Number(datapoint?.[selfValueAccessor] ?? 0) : 0;
-          const subheader = childrenCount > 0 ? `${childrenCount} children with ${totalValue - selfValue} value` : "";
-          return /* @__PURE__ */ jsx(
-            FlameTooltip,
+        /* @__PURE__ */ jsx(XYChart.Tooltip, { children: (payload) => resolveFlameTooltipContent(
+          payload,
+          data,
+          customTooltipTemplate,
+          () => /* @__PURE__ */ jsx(
+            DefaultTooltip,
             {
               payload,
               data,
               labelAccessor,
-              valueField: valueAccessor,
-              subheader,
+              valueAccessor,
               selfValueAccessor,
-              selfDescriptionLabel: "Self value",
               valueFormatter,
-              seriesActions
+              seriesActions,
+              rootValue,
+              onIsolate: __globalActions ? handleIsolate : void 0
             }
-          );
-        } })
+          )
+        ) })
       ]
     }
-  ) });
+  );
 };
 const FlameGraph = Object.assign(FlameGraphRoot, {
   Tooltip,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/flame/flame-graph/FlameGraph.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, useMemo } from 'react';\n\nimport { ChartVariantContext } from '../../core/context/ChartVariantContext.js';\nimport { ColorRule } from '../../core/slots/ColorRule.js';\nimport type { ChartDatapoint } from '../../core/types/chart-data.js';\nimport { XYChart } from '../../xy-chart/XYChartRoot.js';\nimport { FlameTooltip } from '../shared/components/tooltip/FlameTooltip.js';\nimport {\n  CHILDREN_COUNT_FIELD,\n  DEPTH_FIELD,\n  DISPLAY_NAME_FLAME_GRAPH,\n  FLAME_ORIGINAL_IDX,\n  XY_DEFAULTS,\n} from '../shared/constants.js';\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { FlameGraphTooltipSlot as Tooltip } from '../shared/slots/Tooltip.js';\nimport type { FlameGraphProps } from '../shared/types/flame-chart.js';\nimport { aggregateSpansToFlameGraph } from '../shared/utils/aggregate-spans-to-flame-graph.js';\n\nconst CROSSHAIR_VARIANT = {\n  crosshair: {\n    horizontalHidden: true,\n    verticalHidden: true,\n    cursor: 'default' as const,\n  },\n};\n\n/**\n * @internal\n */\nexport const FlameGraphRoot = /* @__PURE__ */ <\n  TData extends ChartDatapoint = ChartDatapoint,\n>({\n  data,\n  idAccessor,\n  parentIdAccessor,\n  valueAccessor,\n  selfValueAccessor,\n  labelAccessor,\n  sortAccessor,\n  colorPalette,\n  orientation = 'bottom-up',\n  truncationMode,\n  valueFormatter,\n  currentZoom,\n  seriesActions,\n  height,\n  children,\n}: PropsWithChildren<FlameGraphProps<TData>>) => {\n  const aggregatedData = useMemo(\n    () =>\n      aggregateSpansToFlameGraph(\n        data.map((datum, index) => ({\n          ...datum,\n          [FLAME_ORIGINAL_IDX]: index,\n        })),\n        {\n          idAccessor,\n          parentIdAccessor,\n          labelAccessor,\n          valueAccessor,\n          selfValueAccessor,\n          sortAccessor,\n        },\n      ),\n    [\n      data,\n      idAccessor,\n      parentIdAccessor,\n      labelAccessor,\n      valueAccessor,\n      selfValueAccessor,\n      sortAccessor,\n    ],\n  );\n\n  const { customTooltipTemplate, colorRules } = iterateSlots<TData>(children);\n\n  return (\n    <ChartVariantContext.Provider value={CROSSHAIR_VARIANT}>\n      <XYChart\n        data={aggregatedData}\n        truncationMode={truncationMode}\n        height={height}\n      >\n        <XYChart.RectSeries\n          x0Accessor={XY_DEFAULTS.x0Accessor}\n          x1Accessor={XY_DEFAULTS.x1Accessor}\n          y0Accessor={DEPTH_FIELD}\n          valueAccessor={valueAccessor}\n          colorPalette={colorPalette}\n          _labelAccessor={labelAccessor}\n          xAxisId={XY_DEFAULTS.xAxisId}\n          yAxisId={XY_DEFAULTS.yAxisId}\n        />\n        <XYChart.XAxis\n          id={XY_DEFAULTS.xAxisId}\n          type=\"numerical\"\n          position=\"top\"\n          hidden\n          currentZoom={currentZoom}\n          infiniteZoom\n        />\n        <XYChart.YAxis\n          id={XY_DEFAULTS.yAxisId}\n          type=\"categorical\"\n          position=\"left\"\n          hidden\n          reversed={orientation === 'bottom-up'}\n        />\n        <XYChart.Legend hidden />\n        <XYChart.Toolbar hidden />\n        {colorRules}\n        <XYChart.Tooltip>\n          {(payload) => {\n            const datapoint = payload.rectPayload?.datapoint as\n              | TData\n              | undefined;\n\n            if (!datapoint) {\n              return;\n            }\n\n            if (customTooltipTemplate) {\n              const template = customTooltipTemplate(datapoint);\n\n              if (template === null) {\n                return null;\n              }\n              if (template) {\n                return template;\n              }\n            }\n\n            const childrenCount = Number(\n              datapoint?.[CHILDREN_COUNT_FIELD] ?? 0,\n            );\n            const totalValue = Number(datapoint?.[valueAccessor] ?? 0);\n            const selfValue =\n              selfValueAccessor !== undefined\n                ? Number(datapoint?.[selfValueAccessor] ?? 0)\n                : 0;\n            const subheader =\n              childrenCount > 0\n                ? `${childrenCount} children with ${\n                    totalValue - selfValue\n                  } value`\n                : '';\n\n            return (\n              <FlameTooltip\n                payload={payload}\n                data={data}\n                labelAccessor={labelAccessor}\n                valueField={valueAccessor}\n                subheader={subheader}\n                selfValueAccessor={selfValueAccessor}\n                selfDescriptionLabel=\"Self value\"\n                valueFormatter={valueFormatter}\n                seriesActions={seriesActions}\n              />\n            );\n          }}\n        </XYChart.Tooltip>\n      </XYChart>\n    </ChartVariantContext.Provider>\n  );\n};\n\n/** @internal */\nexport const FlameGraph = Object.assign(FlameGraphRoot, {\n  Tooltip,\n  ColorRule,\n});\n\n(FlameGraph as typeof FlameGraph & { displayName: string }).displayName =\n  DISPLAY_NAME_FLAME_GRAPH;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { type PropsWithChildren, useCallback, useMemo, useState } from 'react';\n\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { ColorRule } from '../../core/slots/ColorRule.js';\nimport type { ChartDatapoint } from '../../core/types/chart-data.js';\nimport { XYChart } from '../../xy-chart/XYChartRoot.js';\nimport {\n  DEPTH_FIELD,\n  DISPLAY_NAME_FLAME_GRAPH,\n  FLAME_ORIGINAL_IDX,\n  XY_DEFAULTS,\n} from '../shared/constants.js';\nimport { DefaultTooltip } from './components/tooltip/DefaultTooltip.js';\nimport { FlameGraphTooltipSlot as Tooltip } from '../shared/slots/Tooltip.js';\nimport type { FlameGraphProps } from '../shared/types/flame-chart.js';\nimport { aggregateSpansToFlameGraph } from '../shared/utils/aggregate-spans-to-flame-graph.js';\nimport { resolveFlameTooltipContent } from '../shared/utils/resolve-flame-tooltip-content.js';\n\n/**\n * @internal\n */\nexport const FlameGraphRoot = /* @__PURE__ */ <\n  TData extends ChartDatapoint = ChartDatapoint,\n>({\n  data,\n  idAccessor,\n  parentIdAccessor,\n  valueAccessor,\n  selfValueAccessor,\n  labelAccessor,\n  sortAccessor,\n  colorPalette,\n  orientation = 'bottom-up',\n  truncationMode,\n  valueFormatter,\n  currentZoom,\n  seriesActions,\n  height,\n  __globalActions,\n  children,\n}: PropsWithChildren<FlameGraphProps<TData>>) => {\n  const aggregatedData = useMemo(\n    () =>\n      aggregateSpansToFlameGraph(\n        data.map((datum, index) => ({\n          ...datum,\n          [FLAME_ORIGINAL_IDX]: index,\n        })),\n        {\n          idAccessor,\n          parentIdAccessor,\n          labelAccessor,\n          valueAccessor,\n          selfValueAccessor,\n          sortAccessor,\n        },\n      ),\n    [\n      data,\n      idAccessor,\n      parentIdAccessor,\n      labelAccessor,\n      valueAccessor,\n      selfValueAccessor,\n      sortAccessor,\n    ],\n  );\n\n  const { customTooltipTemplate, colorRules } = iterateSlots<TData>(children);\n\n  const [internalZoom, setInternalZoom] = useState<\n    [number, number] | undefined\n  >(undefined);\n\n  const effectiveZoom = currentZoom ?? internalZoom;\n\n  //TODO: Remove the internal isolate logic in APPDEV-19294\n  const handleIsolate = useCallback((zoom: [number, number]) => {\n    setInternalZoom(zoom);\n  }, []);\n\n  const rootValue = useMemo(\n    () =>\n      aggregatedData.reduce(\n        (max, d) => Math.max(max, Number(d[valueAccessor] ?? 0)),\n        0,\n      ),\n    [aggregatedData, valueAccessor],\n  );\n\n  return (\n    <XYChart\n      data={aggregatedData}\n      truncationMode={truncationMode}\n      height={height}\n    >\n      <XYChart.RectSeries\n        x0Accessor={XY_DEFAULTS.x0Accessor}\n        x1Accessor={XY_DEFAULTS.x1Accessor}\n        y0Accessor={DEPTH_FIELD}\n        valueAccessor={valueAccessor}\n        colorPalette={colorPalette}\n        _labelAccessor={labelAccessor}\n        xAxisId={XY_DEFAULTS.xAxisId}\n        yAxisId={XY_DEFAULTS.yAxisId}\n      />\n      <XYChart.XAxis\n        id={XY_DEFAULTS.xAxisId}\n        type=\"numerical\"\n        position=\"top\"\n        hidden\n        currentZoom={effectiveZoom}\n        hideCrosshair\n      />\n      <XYChart.YAxis\n        id={XY_DEFAULTS.yAxisId}\n        type=\"categorical\"\n        position=\"left\"\n        hidden\n        reversed={orientation === 'bottom-up'}\n        hideCrosshair\n      />\n      <XYChart.Legend hidden />\n      <XYChart.Toolbar hidden />\n      {colorRules}\n      <XYChart.Tooltip>\n        {(payload) =>\n          resolveFlameTooltipContent(\n            payload,\n            data,\n            customTooltipTemplate,\n            () => (\n              <DefaultTooltip\n                payload={payload}\n                data={data}\n                labelAccessor={labelAccessor}\n                valueAccessor={valueAccessor}\n                selfValueAccessor={selfValueAccessor}\n                valueFormatter={valueFormatter}\n                seriesActions={seriesActions}\n                rootValue={rootValue}\n                onIsolate={__globalActions ? handleIsolate : undefined}\n              />\n            ),\n          )\n        }\n      </XYChart.Tooltip>\n    </XYChart>\n  );\n};\n\n/** @internal */\nexport const FlameGraph = Object.assign(FlameGraphRoot, {\n  Tooltip,\n  ColorRule,\n});\n\n(FlameGraph as typeof FlameGraph & { displayName: string }).displayName =\n  DISPLAY_NAME_FLAME_GRAPH;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/flame/flame-graph/components/tooltip/DefaultTooltip.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { useIntl } from "react-intl";
+import { FLAME_GRAPH_TOOLTIP_MESSAGES } from "./messages.js";
+import { FlameTooltip } from "../../../shared/components/tooltip/FlameTooltip.js";
+import { XY_DEFAULTS } from "../../../shared/constants.js";
+import { buildFlameTooltipBaseData } from "../../../shared/utils/build-tooltip-base-data.js";
+import { formatFlameValue } from "../../../shared/utils/format-flame-value.js";
+function DefaultTooltip({
+  payload,
+  data,
+  labelAccessor,
+  valueAccessor,
+  selfValueAccessor,
+  valueFormatter,
+  seriesActions,
+  rootValue,
+  onIsolate
+}) {
+  const intl = useIntl();
+  const { datapoint, color, label, subheader, actions, selfValue } = buildFlameTooltipBaseData({
+    payload,
+    data,
+    labelAccessor,
+    selfValueAccessor,
+    valueFormatter,
+    seriesActions,
+    intl
+  });
+  const totalValue = Number(datapoint?.[valueAccessor] ?? 0);
+  const toRelativePct = (value) => {
+    if (rootValue <= 0) {
+      return void 0;
+    }
+    return `${Math.round(value / rootValue * 1e3) / 10}%`;
+  };
+  const x0 = Number(datapoint?.[XY_DEFAULTS.x0Accessor] ?? 0);
+  const x1 = Number(datapoint?.[XY_DEFAULTS.x1Accessor] ?? 0);
+  const handleIsolate = onIsolate !== void 0 && datapoint !== void 0 ? () => onIsolate([x0, x1]) : void 0;
+  return /* @__PURE__ */ jsx(
+    FlameTooltip,
+    {
+      label,
+      subheader,
+      color,
+      valueLabel: intl.formatMessage(
+        FLAME_GRAPH_TOOLTIP_MESSAGES.absolutePercentOfTotal
+      ),
+      totalValue: formatFlameValue(totalValue, valueFormatter),
+      totalRelativeValue: toRelativePct(totalValue),
+      selfValue,
+      selfRelativeValue: selfValueAccessor !== void 0 ? toRelativePct(Number(datapoint?.[selfValueAccessor] ?? 0)) : void 0,
+      actions,
+      onIsolate: handleIsolate
+    }
+  );
+}
+export {
+  DefaultTooltip
+};
+//# sourceMappingURL=DefaultTooltip.js.map

package/esm/charts/flame/flame-graph/components/tooltip/DefaultTooltip.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/flame/flame-graph/components/tooltip/DefaultTooltip.tsx"],
+  "sourcesContent": ["import { type ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { FLAME_GRAPH_TOOLTIP_MESSAGES } from './messages.js';\nimport type { ChartDatapoint } from '../../../../core/types/chart-data.js';\nimport type { Formatter } from '../../../../core/types/formatter.js';\nimport type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\nimport type { XYChartTooltipPayload } from '../../../../xy-chart/types/xy-chart.js';\nimport { FlameTooltip } from '../../../shared/components/tooltip/FlameTooltip.js';\nimport { XY_DEFAULTS } from '../../../shared/constants.js';\nimport { buildFlameTooltipBaseData } from '../../../shared/utils/build-tooltip-base-data.js';\nimport { formatFlameValue } from '../../../shared/utils/format-flame-value.js';\n\ninterface DefaultTooltipProps<TData extends ChartDatapoint> {\n  payload: XYChartTooltipPayload;\n  data: readonly TData[];\n  labelAccessor: string;\n  valueAccessor: string;\n  selfValueAccessor?: string;\n  valueFormatter?: Formatter;\n  seriesActions?: (datapoint: TData) => SeriesActionsTemplate;\n  rootValue: number;\n  onIsolate?: (zoom: [number, number]) => void;\n}\n\nexport function DefaultTooltip<TData extends ChartDatapoint>({\n  payload,\n  data,\n  labelAccessor,\n  valueAccessor,\n  selfValueAccessor,\n  valueFormatter,\n  seriesActions,\n  rootValue,\n  onIsolate,\n}: Readonly<DefaultTooltipProps<TData>>): ReactNode {\n  const intl = useIntl();\n  const { datapoint, color, label, subheader, actions, selfValue } =\n    buildFlameTooltipBaseData({\n      payload,\n      data,\n      labelAccessor,\n      selfValueAccessor,\n      valueFormatter,\n      seriesActions,\n      intl,\n    });\n\n  const totalValue = Number(datapoint?.[valueAccessor] ?? 0);\n\n  const toRelativePct = (value: number): string | undefined => {\n    if (rootValue <= 0) {\n      return undefined;\n    }\n    return `${Math.round((value / rootValue) * 1000) / 10}%`;\n  };\n\n  const x0 = Number(datapoint?.[XY_DEFAULTS.x0Accessor] ?? 0);\n  const x1 = Number(datapoint?.[XY_DEFAULTS.x1Accessor] ?? 0);\n  const handleIsolate =\n    onIsolate !== undefined && datapoint !== undefined\n      ? () => onIsolate([x0, x1])\n      : undefined;\n\n  return (\n    <FlameTooltip\n      label={label}\n      subheader={subheader}\n      color={color}\n      valueLabel={intl.formatMessage(\n        FLAME_GRAPH_TOOLTIP_MESSAGES.absolutePercentOfTotal,\n      )}\n      totalValue={formatFlameValue(totalValue, valueFormatter)}\n      totalRelativeValue={toRelativePct(totalValue)}\n      selfValue={selfValue}\n      selfRelativeValue={\n        selfValueAccessor !== undefined\n          ? toRelativePct(Number(datapoint?.[selfValueAccessor] ?? 0))\n          : undefined\n      }\n      actions={actions}\n      onIsolate={handleIsolate}\n    />\n  );\n}\n"],
+  "mappings": "AAiEI;AAhEJ,SAAS,eAAe;AAExB,SAAS,oCAAoC;AAK7C,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,iCAAiC;AAC1C,SAAS,wBAAwB;AAc1B,SAAS,eAA6C;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoD;AAClD,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,WAAW,OAAO,OAAO,WAAW,SAAS,UAAU,IAC7D,0BAA0B;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,QAAM,aAAa,OAAO,YAAY,aAAa,KAAK,CAAC;AAEzD,QAAM,gBAAgB,CAAC,UAAsC;AAC3D,QAAI,aAAa,GAAG;AAClB,aAAO;AAAA,IACT;AACA,WAAO,GAAG,KAAK,MAAO,QAAQ,YAAa,GAAI,IAAI,EAAE;AAAA,EACvD;AAEA,QAAM,KAAK,OAAO,YAAY,YAAY,UAAU,KAAK,CAAC;AAC1D,QAAM,KAAK,OAAO,YAAY,YAAY,UAAU,KAAK,CAAC;AAC1D,QAAM,gBACJ,cAAc,UAAa,cAAc,SACrC,MAAM,UAAU,CAAC,IAAI,EAAE,CAAC,IACxB;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,KAAK;AAAA,QACf,6BAA6B;AAAA,MAC/B;AAAA,MACA,YAAY,iBAAiB,YAAY,cAAc;AAAA,MACvD,oBAAoB,cAAc,UAAU;AAAA,MAC5C;AAAA,MACA,mBACE,sBAAsB,SAClB,cAAc,OAAO,YAAY,iBAAiB,KAAK,CAAC,CAAC,IACzD;AAAA,MAEN;AAAA,MACA,WAAW;AAAA;AAAA,EACb;AAEJ;",
+  "names": []
+}

package/esm/charts/flame/flame-graph/components/tooltip/messages.js

@@ -0,0 +1,12 @@
+import { defineMessages } from "react-intl";
+const FLAME_GRAPH_TOOLTIP_MESSAGES = defineMessages({
+  absolutePercentOfTotal: {
+    id: "51NRusIhLS5ayD70",
+    defaultMessage: "Absolute (% of total)",
+    description: "Value column header in the flame graph tooltip, labelling both absolute values and their percentage of the root value."
+  }
+});
+export {
+  FLAME_GRAPH_TOOLTIP_MESSAGES
+};
+//# sourceMappingURL=messages.js.map

package/esm/charts/flame/flame-graph/components/tooltip/messages.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/flame/flame-graph/components/tooltip/messages.ts"],
+  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\nexport const FLAME_GRAPH_TOOLTIP_MESSAGES = defineMessages({\n  absolutePercentOfTotal: {\n    id: '51NRusIhLS5ayD70',\n    defaultMessage: 'Absolute (% of total)',\n    description:\n      'Value column header in the flame graph tooltip, labelling both absolute values and their percentage of the root value.',\n  },\n});\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAExB,MAAM,+BAA+B,eAAe;AAAA,EACzD,wBAAwB;AAAA,IACtB,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AACF,CAAC;",
+  "names": []
+}

package/esm/charts/flame/flame-graph/utils/iterate-slots.js

@@ -1,21 +1,6 @@
-import { Children } from "react";
-import { isSlot } from "../../../../core/utils/is-slot.js";
-import { ColorRule, isValidColorRule } from "../../../core/slots/ColorRule.js";
 import { FlameGraphTooltipSlot } from "../../shared/slots/Tooltip.js";
-const iterateSlots = (children) => {
-  const slots = {
-    customTooltipTemplate: void 0,
-    colorRules: []
-  };
-  Children.forEach(children, (child) => {
-    if (isSlot(child, FlameGraphTooltipSlot)) {
-      slots.customTooltipTemplate = child.props.children;
-    } else if (isSlot(child, ColorRule) && isValidColorRule(child.props)) {
-      slots.colorRules.push(child);
-    }
-  });
-  return slots;
-};
+import { makeIterateSlots } from "../../shared/utils/make-iterate-slots.js";
+const iterateSlots = makeIterateSlots(FlameGraphTooltipSlot);
 export {
   iterateSlots
 };

package/esm/charts/flame/flame-graph/utils/iterate-slots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/flame/flame-graph/utils/iterate-slots.ts"],
-  "sourcesContent": ["import { Children, type ReactNode } from 'react';\n\nimport { isSlot } from '../../../../core/utils/is-slot.js';\nimport { ColorRule, isValidColorRule } from '../../../core/slots/ColorRule.js';\nimport type { ChartDatapoint } from '../../../core/types/chart-data.js';\nimport { FlameGraphTooltipSlot } from '../../shared/slots/Tooltip.js';\nimport type {\n  CustomTooltipTemplate,\n  Slots,\n} from '../../shared/types/flame-internal.js';\n\nexport const iterateSlots = <TData extends ChartDatapoint = ChartDatapoint>(\n  children: ReactNode,\n): Slots<TData> => {\n  const slots: Slots<TData> = {\n    customTooltipTemplate: undefined,\n    colorRules: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, FlameGraphTooltipSlot)) {\n      slots.customTooltipTemplate = child.props\n        .children as CustomTooltipTemplate<TData>;\n    } else if (isSlot(child, ColorRule) && isValidColorRule(child.props)) {\n      slots.colorRules.push(child);\n    }\n  });\n\n  return slots;\n};\n"],
-  "mappings": "AAAA,SAAS,gBAAgC;AAEzC,SAAS,cAAc;AACvB,SAAS,WAAW,wBAAwB;AAE5C,SAAS,6BAA6B;AAM/B,MAAM,eAAe,CAC1B,aACiB;AACjB,QAAM,QAAsB;AAAA,IAC1B,uBAAuB;AAAA,IACvB,YAAY,CAAC;AAAA,EACf;AAEA,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,OAAO,OAAO,qBAAqB,GAAG;AACxC,YAAM,wBAAwB,MAAM,MACjC;AAAA,IACL,WAAW,OAAO,OAAO,SAAS,KAAK,iBAAiB,MAAM,KAAK,GAAG;AACpE,YAAM,WAAW,KAAK,KAAK;AAAA,IAC7B;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
+  "sourcesContent": ["import { FlameGraphTooltipSlot } from '../../shared/slots/Tooltip.js';\nimport { makeIterateSlots } from '../../shared/utils/make-iterate-slots.js';\n\nexport const iterateSlots = makeIterateSlots(FlameGraphTooltipSlot);\n"],
+  "mappings": "AAAA,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AAE1B,MAAM,eAAe,iBAAiB,qBAAqB;",
   "names": []
 }

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

@@ -1,42 +1,88 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Divider } from "../../../../../layouts/divider/Divider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useIntl } from "react-intl";
+import { ViewIcon } from "@dynatrace/strato-icons";
+import { FLAME_TOOLTIP_MESSAGES } from "./messages.js";
+import {
+  ExternalConfigContext,
+  useExternalConfig
+} from "../../../../core/components/overlay-tooltip/contexts/ExternalConfigContext.js";
 import { ChartTooltip } from "../../../../core/components/overlay-tooltip/OverlayTooltip.js";
-import { FLAME_ORIGINAL_IDX } from "../../constants.js";
-import { formatFlameValue } from "../../utils/format-flame-value.js";
+const FLAME_TOOLTIP_PREFIX = "";
 function FlameTooltip({
-  payload,
-  data,
-  labelAccessor,
-  valueField,
+  label,
   subheader,
-  selfValueAccessor,
-  selfDescriptionLabel = "Self",
-  valueFormatter,
-  seriesActions
+  color,
+  valueLabel,
+  totalValue,
+  totalRelativeValue,
+  selfValue,
+  selfRelativeValue,
+  actions,
+  onIsolate
 }) {
-  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}: ${formatFlameValue(
-    datapoint?.[selfValueAccessor],
-    valueFormatter
-  )}` : void 0;
-  const actions = seriesActions && datapoint ? () => seriesActions(data[datapoint[FLAME_ORIGINAL_IDX]]) : void 0;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ChartTooltip.Header, { header1: label, subheader }),
-    /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", style: { marginBottom: "4px" } }),
+  const intl = useIntl();
+  const externalConfig = useExternalConfig();
+  const contextValue = useMemo(
+    () => ({
+      ...externalConfig,
+      symbolPosition: "left",
+      displayHeaderDivider: true
+    }),
+    [externalConfig]
+  );
+  return /* @__PURE__ */ jsxs(ExternalConfigContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsx(
+      ChartTooltip.Header,
+      {
+        header1: label,
+        label: FLAME_TOOLTIP_PREFIX,
+        subheader
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ChartTooltip.SeriesHeader,
+      {
+        seriesLabel: intl.formatMessage(FLAME_TOOLTIP_MESSAGES.values),
+        valueLabel
+      }
+    ),
     /* @__PURE__ */ jsx(
       ChartTooltip.SeriesItem,
       {
-        color: `${payload.rectPayload?.color}`,
-        name: "Total",
-        value: formatFlameValue(datapoint?.[valueField], valueFormatter),
-        description: selfDescription,
+        color,
+        name: intl.formatMessage(FLAME_TOOLTIP_MESSAGES.total),
+        value: totalValue,
+        relativeValue: totalRelativeValue,
         actions
       }
+    ),
+    selfValue !== void 0 && /* @__PURE__ */ jsx(
+      ChartTooltip.SeriesItem,
+      {
+        color,
+        name: intl.formatMessage(FLAME_TOOLTIP_MESSAGES.self),
+        value: selfValue,
+        relativeValue: selfRelativeValue,
+        actions
+      }
+    ),
+    onIsolate !== void 0 && /* @__PURE__ */ jsx(
+      ChartTooltip.Footer,
+      {
+        actions: [
+          /* @__PURE__ */ jsx(
+            ChartTooltip.Action,
+            {
+              label: intl.formatMessage(FLAME_TOOLTIP_MESSAGES.isolateSegment),
+              icon: /* @__PURE__ */ jsx(ViewIcon, {}),
+              onSelect: onIsolate
+            },
+            "isolate"
+          )
+        ],
+        unpinnedPlaceholderText: void 0
+      }
     )
   ] });
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/flame/shared/components/tooltip/FlameTooltip.tsx"],
-  "sourcesContent": ["import { type ReactNode } from 'react';\n\nimport { Divider } from '../../../../../layouts/divider/Divider.js';\nimport { ChartTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { ChartDatapoint } from '../../../../core/types/chart-data.js';\nimport type { Formatter } from '../../../../core/types/formatter.js';\nimport type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\nimport type { XYChartTooltipPayload } from '../../../../xy-chart/types/xy-chart.js';\nimport { FLAME_ORIGINAL_IDX } from '../../constants.js';\nimport { formatFlameValue } from '../../utils/format-flame-value.js';\n\ninterface FlameTooltipProps<TData extends ChartDatapoint> {\n  payload: XYChartTooltipPayload;\n  data: readonly TData[];\n  labelAccessor: string;\n  valueField: string;\n  subheader?: string;\n  selfValueAccessor?: string;\n  selfDescriptionLabel?: string;\n  valueFormatter?: Formatter;\n  seriesActions?: (datapoint: TData) => SeriesActionsTemplate;\n}\n\nexport function FlameTooltip<TData extends ChartDatapoint>({\n  payload,\n  data,\n  labelAccessor,\n  valueField,\n  subheader,\n  selfValueAccessor,\n  selfDescriptionLabel = 'Self',\n  valueFormatter,\n  seriesActions,\n}: Readonly<FlameTooltipProps<TData>>): ReactNode {\n  const datapoint = payload.rectPayload?.datapoint;\n\n  if (!datapoint) {\n    return null;\n  }\n\n  const rawLabel = datapoint?.[labelAccessor];\n  const label =\n    typeof rawLabel === 'string' ||\n    typeof rawLabel === 'number' ||\n    typeof rawLabel === 'boolean'\n      ? String(rawLabel)\n      : '';\n  const selfDescription =\n    selfValueAccessor !== undefined\n      ? `${selfDescriptionLabel}: ${formatFlameValue(\n          datapoint?.[selfValueAccessor],\n          valueFormatter,\n        )}`\n      : undefined;\n  const actions =\n    seriesActions && datapoint\n      ? () => seriesActions(data[datapoint[FLAME_ORIGINAL_IDX] as number])\n      : undefined;\n\n  return (\n    <>\n      <ChartTooltip.Header header1={label} subheader={subheader} />\n      <Divider orientation=\"horizontal\" style={{ marginBottom: '4px' }} />\n      <ChartTooltip.SeriesItem\n        color={`${payload.rectPayload?.color}`}\n        name=\"Total\"\n        value={formatFlameValue(datapoint?.[valueField], valueFormatter)}\n        description={selfDescription}\n        actions={actions}\n      />\n    </>\n  );\n}\n"],
-  "mappings": "AA4DI,mBACE,KADF;AA1DJ,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAK7B,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AAc1B,SAAS,aAA2C;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB;AAAA,EACA;AACF,GAAkD;AAChD,QAAM,YAAY,QAAQ,aAAa;AAEvC,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,YAAY,aAAa;AAC1C,QAAM,QACJ,OAAO,aAAa,YACpB,OAAO,aAAa,YACpB,OAAO,aAAa,YAChB,OAAO,QAAQ,IACf;AACN,QAAM,kBACJ,sBAAsB,SAClB,GAAG,oBAAoB,KAAK;AAAA,IAC1B,YAAY,iBAAiB;AAAA,IAC7B;AAAA,EACF,CAAC,KACD;AACN,QAAM,UACJ,iBAAiB,YACb,MAAM,cAAc,KAAK,UAAU,kBAAkB,CAAW,CAAC,IACjE;AAEN,SACE,iCACE;AAAA,wBAAC,aAAa,QAAb,EAAoB,SAAS,OAAO,WAAsB;AAAA,IAC3D,oBAAC,WAAQ,aAAY,cAAa,OAAO,EAAE,cAAc,MAAM,GAAG;AAAA,IAClE;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,OAAO,GAAG,QAAQ,aAAa,KAAK;AAAA,QACpC,MAAK;AAAA,QACL,OAAO,iBAAiB,YAAY,UAAU,GAAG,cAAc;AAAA,QAC/D,aAAa;AAAA,QACb;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { type ReactNode, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ViewIcon } from '@dynatrace/strato-icons';\n\nimport { FLAME_TOOLTIP_MESSAGES } from './messages.js';\nimport {\n  ExternalConfigContext,\n  useExternalConfig,\n} from '../../../../core/components/overlay-tooltip/contexts/ExternalConfigContext.js';\nimport { ChartTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\n\nconst FLAME_TOOLTIP_PREFIX = ''; //We don't want X-value labels from XYChart default tooltip\n\ninterface FlameTooltipProps {\n  label: string;\n  subheader?: string;\n  color: string;\n  valueLabel: string;\n  totalValue: string;\n  totalRelativeValue?: string;\n  selfValue?: string;\n  selfRelativeValue?: string;\n  actions?: () => SeriesActionsTemplate;\n  onIsolate?: () => void;\n}\n\nexport function FlameTooltip({\n  label,\n  subheader,\n  color,\n  valueLabel,\n  totalValue,\n  totalRelativeValue,\n  selfValue,\n  selfRelativeValue,\n  actions,\n  onIsolate,\n}: Readonly<FlameTooltipProps>): ReactNode {\n  const intl = useIntl();\n  const externalConfig = useExternalConfig();\n\n  const contextValue = useMemo(\n    () => ({\n      ...externalConfig,\n      symbolPosition: 'left' as const,\n      displayHeaderDivider: true,\n    }),\n    [externalConfig],\n  );\n\n  return (\n    <ExternalConfigContext.Provider value={contextValue}>\n      <ChartTooltip.Header\n        header1={label}\n        label={FLAME_TOOLTIP_PREFIX}\n        subheader={subheader}\n      />\n      <ChartTooltip.SeriesHeader\n        seriesLabel={intl.formatMessage(FLAME_TOOLTIP_MESSAGES.values)}\n        valueLabel={valueLabel}\n      />\n      <ChartTooltip.SeriesItem\n        color={color}\n        name={intl.formatMessage(FLAME_TOOLTIP_MESSAGES.total)}\n        value={totalValue}\n        relativeValue={totalRelativeValue}\n        actions={actions}\n      />\n      {selfValue !== undefined && (\n        <ChartTooltip.SeriesItem\n          color={color}\n          name={intl.formatMessage(FLAME_TOOLTIP_MESSAGES.self)}\n          value={selfValue}\n          relativeValue={selfRelativeValue}\n          actions={actions}\n        />\n      )}\n      {onIsolate !== undefined && (\n        <ChartTooltip.Footer\n          actions={[\n            <ChartTooltip.Action\n              key=\"isolate\"\n              label={intl.formatMessage(FLAME_TOOLTIP_MESSAGES.isolateSegment)}\n              icon={<ViewIcon />}\n              onSelect={onIsolate}\n            />,\n          ]}\n          unpinnedPlaceholderText={undefined}\n        />\n      )}\n    </ExternalConfigContext.Provider>\n  );\n}\n"],
+  "mappings": "AAqDI,SACE,KADF;AArDJ,SAAyB,eAAe;AACxC,SAAS,eAAe;AAExB,SAAS,gBAAgB;AAEzB,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAG7B,MAAM,uBAAuB;AAetB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2C;AACzC,QAAM,OAAO,QAAQ;AACrB,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL,GAAG;AAAA,MACH,gBAAgB;AAAA,MAChB,sBAAsB;AAAA,IACxB;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,qBAAC,sBAAsB,UAAtB,EAA+B,OAAO,cACrC;AAAA;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,SAAS;AAAA,QACT,OAAO;AAAA,QACP;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,aAAa,KAAK,cAAc,uBAAuB,MAAM;AAAA,QAC7D;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC;AAAA,QACA,MAAM,KAAK,cAAc,uBAAuB,KAAK;AAAA,QACrD,OAAO;AAAA,QACP,eAAe;AAAA,QACf;AAAA;AAAA,IACF;AAAA,IACC,cAAc,UACb;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC;AAAA,QACA,MAAM,KAAK,cAAc,uBAAuB,IAAI;AAAA,QACpD,OAAO;AAAA,QACP,eAAe;AAAA,QACf;AAAA;AAAA,IACF;AAAA,IAED,cAAc,UACb;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,SAAS;AAAA,UACP;AAAA,YAAC,aAAa;AAAA,YAAb;AAAA,cAEC,OAAO,KAAK,cAAc,uBAAuB,cAAc;AAAA,cAC/D,MAAM,oBAAC,YAAS;AAAA,cAChB,UAAU;AAAA;AAAA,YAHN;AAAA,UAIN;AAAA,QACF;AAAA,QACA,yBAAyB;AAAA;AAAA,IAC3B;AAAA,KAEJ;AAEJ;",
   "names": []
 }

package/esm/charts/flame/shared/components/tooltip/messages.js

@@ -0,0 +1,32 @@
+import { defineMessages } from "react-intl";
+const FLAME_TOOLTIP_MESSAGES = defineMessages({
+  values: {
+    id: "pZYcJHuudIiUoTQ3",
+    defaultMessage: "Values",
+    description: "Column header label in the flame tooltip."
+  },
+  total: {
+    id: "aqgV26FymxiNNhI0",
+    defaultMessage: "Total",
+    description: "Row label for the total duration/value in the flame tooltip."
+  },
+  self: {
+    id: "PKJV6NXPfso3pkdg",
+    defaultMessage: "Self",
+    description: "Row label for the self (exclusive) duration/value in the flame tooltip."
+  },
+  isolateSegment: {
+    id: "ze9ge3utWHDeoMzu",
+    defaultMessage: "Isolate segment",
+    description: "Footer action label in the flame tooltip that zooms the chart to the selected segment."
+  },
+  children: {
+    id: "pJzqfzmBdDOee48O",
+    defaultMessage: "{count, plural, one {# child} other {# children}}",
+    description: "Subheader in the flame tooltip showing how many children a segment has."
+  }
+});
+export {
+  FLAME_TOOLTIP_MESSAGES
+};
+//# sourceMappingURL=messages.js.map

package/esm/charts/flame/shared/components/tooltip/messages.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/flame/shared/components/tooltip/messages.ts"],
+  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\nexport const FLAME_TOOLTIP_MESSAGES = defineMessages({\n  values: {\n    id: 'pZYcJHuudIiUoTQ3',\n    defaultMessage: 'Values',\n    description: 'Column header label in the flame tooltip.',\n  },\n  total: {\n    id: 'aqgV26FymxiNNhI0',\n    defaultMessage: 'Total',\n    description: 'Row label for the total duration/value in the flame tooltip.',\n  },\n  self: {\n    id: 'PKJV6NXPfso3pkdg',\n    defaultMessage: 'Self',\n    description:\n      'Row label for the self (exclusive) duration/value in the flame tooltip.',\n  },\n  isolateSegment: {\n    id: 'ze9ge3utWHDeoMzu',\n    defaultMessage: 'Isolate segment',\n    description:\n      'Footer action label in the flame tooltip that zooms the chart to the selected segment.',\n  },\n  children: {\n    id: 'pJzqfzmBdDOee48O',\n    defaultMessage: '{count, plural, one {# child} other {# children}}',\n    description:\n      'Subheader in the flame tooltip showing how many children a segment has.',\n  },\n});\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAExB,MAAM,yBAAyB,eAAe;AAAA,EACnD,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AAAA,EACA,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AAAA,EACA,gBAAgB;AAAA,IACd,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AAAA,EACA,UAAU;AAAA,IACR,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AACF,CAAC;",
+  "names": []
+}

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/flame/shared/slots/Tooltip.ts"],
-  "sourcesContent": ["import type { TooltipProps } from '../../../core/slots/Tooltip.js';\nimport type { ChartDatapoint } from '../../../core/types/chart-data.js';\n\n/**\n * @internal\n */\nexport const FlameChartTooltipSlot = function <TData extends ChartDatapoint>(\n  _props: TooltipProps<TData>,\n): null {\n  return null;\n};\nFlameChartTooltipSlot.displayName = 'FlameChart.Tooltip';\n/**\n * @internal\n */\nexport const FlameGraphTooltipSlot = function <TData extends ChartDatapoint>(\n  _props: TooltipProps<TData>,\n): null {\n  return null;\n};\nFlameGraphTooltipSlot.displayName = 'FlameGraph.Tooltip';\n"],
-  "mappings": "AAMO,MAAM,wBAAwB,SACnC,QACM;AACN,SAAO;AACT;AACA,sBAAsB,cAAc;AAI7B,MAAM,wBAAwB,SACnC,QACM;AACN,SAAO;AACT;AACA,sBAAsB,cAAc;",
+  "sourcesContent": ["import type { ChartDatapoint } from '../../../core/types/chart-data.js';\nimport type { FlameTooltipProps } from '../types/flame-internal.js';\n\n/**\n * @internal\n */\nexport const FlameChartTooltipSlot = function <\n  TData extends ChartDatapoint,\n  TPayload extends { datapoint: TData } = { datapoint: TData },\n>(_props: FlameTooltipProps<TData, TPayload>): null {\n  return null;\n};\nFlameChartTooltipSlot.displayName = 'FlameChart.Tooltip';\n/**\n * @internal\n */\nexport const FlameGraphTooltipSlot = function <\n  TData extends ChartDatapoint,\n  TPayload extends { datapoint: TData } = { datapoint: TData },\n>(_props: FlameTooltipProps<TData, TPayload>): null {\n  return null;\n};\nFlameGraphTooltipSlot.displayName = 'FlameGraph.Tooltip';\n"],
+  "mappings": "AAMO,MAAM,wBAAwB,SAGnC,QAAkD;AAClD,SAAO;AACT;AACA,sBAAsB,cAAc;AAI7B,MAAM,wBAAwB,SAGnC,QAAkD;AAClD,SAAO;AACT;AACA,sBAAsB,cAAc;",
   "names": []
 }

package/esm/charts/flame/shared/utils/build-tooltip-base-data.js

@@ -0,0 +1,37 @@
+import { formatFlameValue } from "./format-flame-value.js";
+import { FLAME_TOOLTIP_MESSAGES } from "../components/tooltip/messages.js";
+import { CHILDREN_COUNT_FIELD, FLAME_ORIGINAL_IDX } from "../constants.js";
+function buildFlameTooltipBaseData({
+  payload,
+  data,
+  labelAccessor,
+  selfValueAccessor,
+  valueFormatter,
+  seriesActions,
+  intl
+}) {
+  const datapoint = payload.rectPayload?.datapoint;
+  const color = `${payload.rectPayload?.color}`;
+  const rawLabel = datapoint?.[labelAccessor];
+  const label = typeof rawLabel === "string" || typeof rawLabel === "number" || typeof rawLabel === "boolean" ? String(rawLabel) : "";
+  const childrenCount = Number(datapoint?.[CHILDREN_COUNT_FIELD] ?? 0);
+  const subheader = childrenCount > 0 ? intl.formatMessage(FLAME_TOOLTIP_MESSAGES.children, {
+    count: childrenCount
+  }) : void 0;
+  const originalDatapoint = datapoint !== void 0 ? data[datapoint[FLAME_ORIGINAL_IDX]] : void 0;
+  const actions = seriesActions && originalDatapoint ? () => seriesActions(originalDatapoint) : void 0;
+  const selfValue = selfValueAccessor !== void 0 ? formatFlameValue(datapoint?.[selfValueAccessor], valueFormatter) : void 0;
+  return {
+    datapoint,
+    color,
+    label,
+    subheader,
+    originalDatapoint,
+    actions,
+    selfValue
+  };
+}
+export {
+  buildFlameTooltipBaseData
+};
+//# sourceMappingURL=build-tooltip-base-data.js.map

package/esm/charts/flame/shared/utils/build-tooltip-base-data.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/charts/flame/shared/utils/build-tooltip-base-data.ts"],
+  "sourcesContent": ["import type { IntlShape } from 'react-intl';\n\nimport { formatFlameValue } from './format-flame-value.js';\nimport type { ChartDatapoint } from '../../../core/types/chart-data.js';\nimport type { Formatter } from '../../../core/types/formatter.js';\nimport type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js';\nimport type { XYChartTooltipPayload } from '../../../xy-chart/types/xy-chart.js';\nimport { FLAME_TOOLTIP_MESSAGES } from '../components/tooltip/messages.js';\nimport { CHILDREN_COUNT_FIELD, FLAME_ORIGINAL_IDX } from '../constants.js';\n\ninterface BuildFlameTooltipBaseDataArgs<TData extends ChartDatapoint> {\n  payload: XYChartTooltipPayload;\n  data: readonly TData[];\n  labelAccessor: string;\n  selfValueAccessor?: string;\n  valueFormatter?: Formatter;\n  seriesActions?: (datapoint: TData) => SeriesActionsTemplate;\n  intl: IntlShape;\n}\n\nexport function buildFlameTooltipBaseData<TData extends ChartDatapoint>({\n  payload,\n  data,\n  labelAccessor,\n  selfValueAccessor,\n  valueFormatter,\n  seriesActions,\n  intl,\n}: Readonly<BuildFlameTooltipBaseDataArgs<TData>>) {\n  const datapoint = payload.rectPayload?.datapoint;\n  const color = `${payload.rectPayload?.color}`;\n\n  const rawLabel = datapoint?.[labelAccessor];\n  const label =\n    typeof rawLabel === 'string' ||\n    typeof rawLabel === 'number' ||\n    typeof rawLabel === 'boolean'\n      ? String(rawLabel)\n      : '';\n\n  const childrenCount = Number(datapoint?.[CHILDREN_COUNT_FIELD] ?? 0);\n  const subheader =\n    childrenCount > 0\n      ? intl.formatMessage(FLAME_TOOLTIP_MESSAGES.children, {\n          count: childrenCount,\n        })\n      : undefined;\n\n  const originalDatapoint =\n    datapoint !== undefined\n      ? data[datapoint[FLAME_ORIGINAL_IDX] as number]\n      : undefined;\n\n  const actions =\n    seriesActions && originalDatapoint\n      ? () => seriesActions(originalDatapoint)\n      : undefined;\n\n  const selfValue =\n    selfValueAccessor !== undefined\n      ? formatFlameValue(datapoint?.[selfValueAccessor], valueFormatter)\n      : undefined;\n\n  return {\n    datapoint,\n    color,\n    label,\n    subheader,\n    originalDatapoint,\n    actions,\n    selfValue,\n  };\n}\n"],
+  "mappings": "AAEA,SAAS,wBAAwB;AAKjC,SAAS,8BAA8B;AACvC,SAAS,sBAAsB,0BAA0B;AAYlD,SAAS,0BAAwD;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmD;AACjD,QAAM,YAAY,QAAQ,aAAa;AACvC,QAAM,QAAQ,GAAG,QAAQ,aAAa,KAAK;AAE3C,QAAM,WAAW,YAAY,aAAa;AAC1C,QAAM,QACJ,OAAO,aAAa,YACpB,OAAO,aAAa,YACpB,OAAO,aAAa,YAChB,OAAO,QAAQ,IACf;AAEN,QAAM,gBAAgB,OAAO,YAAY,oBAAoB,KAAK,CAAC;AACnE,QAAM,YACJ,gBAAgB,IACZ,KAAK,cAAc,uBAAuB,UAAU;AAAA,IAClD,OAAO;AAAA,EACT,CAAC,IACD;AAEN,QAAM,oBACJ,cAAc,SACV,KAAK,UAAU,kBAAkB,CAAW,IAC5C;AAEN,QAAM,UACJ,iBAAiB,oBACb,MAAM,cAAc,iBAAiB,IACrC;AAEN,QAAM,YACJ,sBAAsB,SAClB,iBAAiB,YAAY,iBAAiB,GAAG,cAAc,IAC/D;AAEN,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/esm/charts/flame/shared/utils/make-iterate-slots.js

@@ -0,0 +1,21 @@
+import { Children } from "react";
+import { isSlot } from "../../../../core/utils/is-slot.js";
+import { ColorRule, isValidColorRule } from "../../../core/slots/ColorRule.js";
+const makeIterateSlots = (TooltipSlot) => (children) => {
+  const slots = {
+    customTooltipTemplate: void 0,
+    colorRules: []
+  };
+  Children.forEach(children, (child) => {
+    if (isSlot(child, TooltipSlot)) {
+      slots.customTooltipTemplate = child.props.children;
+    } else if (isSlot(child, ColorRule) && isValidColorRule(child.props)) {
+      slots.colorRules.push(child);
+    }
+  });
+  return slots;
+};
+export {
+  makeIterateSlots
+};
+//# sourceMappingURL=make-iterate-slots.js.map

package/esm/charts/flame/shared/utils/make-iterate-slots.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/charts/flame/shared/utils/make-iterate-slots.ts"],
+  "sourcesContent": ["import { Children, type ReactNode } from 'react';\n\nimport { isSlot } from '../../../../core/utils/is-slot.js';\nimport { ColorRule, isValidColorRule } from '../../../core/slots/ColorRule.js';\nimport type { ChartDatapoint } from '../../../core/types/chart-data.js';\nimport type {\n  FlameChartTooltipSlot,\n  FlameGraphTooltipSlot,\n} from '../slots/Tooltip.js';\nimport type { CustomTooltipTemplate, Slots } from '../types/flame-internal.js';\n\ntype TooltipSlot = typeof FlameChartTooltipSlot | typeof FlameGraphTooltipSlot;\n\nexport const makeIterateSlots =\n  (TooltipSlot: TooltipSlot) =>\n  <TData extends ChartDatapoint = ChartDatapoint>(\n    children: ReactNode,\n  ): Slots<TData> => {\n    const slots: Slots<TData> = {\n      customTooltipTemplate: undefined,\n      colorRules: [],\n    };\n\n    Children.forEach(children, (child) => {\n      if (isSlot(child, TooltipSlot)) {\n        slots.customTooltipTemplate = child.props\n          .children as CustomTooltipTemplate<TData>;\n      } else if (isSlot(child, ColorRule) && isValidColorRule(child.props)) {\n        slots.colorRules.push(child);\n      }\n    });\n\n    return slots;\n  };\n"],
+  "mappings": "AAAA,SAAS,gBAAgC;AAEzC,SAAS,cAAc;AACvB,SAAS,WAAW,wBAAwB;AAUrC,MAAM,mBACX,CAAC,gBACD,CACE,aACiB;AACjB,QAAM,QAAsB;AAAA,IAC1B,uBAAuB;AAAA,IACvB,YAAY,CAAC;AAAA,EACf;AAEA,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,OAAO,OAAO,WAAW,GAAG;AAC9B,YAAM,wBAAwB,MAAM,MACjC;AAAA,IACL,WAAW,OAAO,OAAO,SAAS,KAAK,iBAAiB,MAAM,KAAK,GAAG;AACpE,YAAM,WAAW,KAAK,KAAK;AAAA,IAC7B;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
+  "names": []
+}