@dynatrace/strato-components 3.1.1 → 3.2.0

package/esm/charts/core/components/overlay-tooltip/_to-be-removed/_TruncationStory.js

@@ -0,0 +1,1259 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { DummyInteractionsOverlay } from "./DummyInteractionsOverlay.js";
+import { useTooltipData } from "./utils.js";
+import { Button } from "../../../../../buttons/button/Button.js";
+import { Flex } from "../../../../../layouts/flex/Flex.js";
+import { OverlayProvider } from "../contexts/OverlayContext.js";
+import { TooltipProvider } from "../contexts/TooltipContext.js";
+import { OverlayTooltip } from "../OverlayTooltip.js";
+const SeriesItemTemplate = (props) => /* @__PURE__ */ jsx(OverlayTooltip.SeriesItem, { ...props });
+const createSeriesItemTemplate = (additionalProps) => {
+  return (props) => /* @__PURE__ */ jsx(OverlayTooltip.SeriesItem, { ...props, ...additionalProps });
+};
+const LONG_HEADER_TEXT = "This is a very long header text that should be truncated after multiple lines when it exceeds the available space in the tooltip container. This is a very long header text that should be truncated after multiple lines when it exceeds the available space in the tooltip container. This is a very long header text that should be truncated after multiple lines when it exceeds the available space in the tooltip container. This is a very long header text that should be truncated after multiple lines when it exceeds the available space in the tooltip container. This is a very long header text that should be truncated after multiple lines when it exceeds the available space in the tooltip container.";
+const LONG_SERIES_NAME = "This is a very long series name that should be truncated with ellipsis when it exceeds the available horizontal space";
+const LONG_VALUE = "200000000000000000000000000000";
+const VERY_LONG_VALUE = "999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999";
+const MODERATE_LONG_VALUE = "123456789012345678901234567890";
+const VALUE_WITH_DECIMALS = "12345678901234567890.12345678901234567890";
+const MULTI_LINE_NAME = [
+  "Series name section one",
+  "Series name section two",
+  LONG_SERIES_NAME
+];
+const VERY_LONG_SERIES_NAME = "This is an extremely long series name that should definitely be truncated because it exceeds the available horizontal space by a significant margin and demonstrates the truncation behavior effectively";
+const VERY_LONG_MULTI_LINE_NAME = [
+  "This is the first part of an extremely long multi-line series name",
+  "that continues in the second part and demonstrates",
+  "how multi-line truncation works with very long content"
+];
+const SHORT_HEADER = "Simple header";
+const getTestValue = (valueLength) => {
+  switch (valueLength) {
+    case "short":
+      return "100";
+    case "moderate":
+      return MODERATE_LONG_VALUE;
+    case "long":
+      return LONG_VALUE;
+    case "very-long":
+      return VERY_LONG_VALUE;
+    default:
+      return "100";
+  }
+};
+const MODERATE_HEADER = "This is a moderately long header that might need truncation in some scenarios but not others";
+const baseSeries = [{ name: "Test Series", color: "#4fd5e0", value: "100" }];
+const createData = (header1, series = baseSeries, geometry = "dot") => () => ({
+  geometry,
+  header1: [header1],
+  series
+});
+const createPinAllHandler = (sub) => () => {
+  sub.forEach((action) => action());
+};
+const usePinAllSetup = () => {
+  const sub = /* @__PURE__ */ new Set();
+  const onClick = createPinAllHandler(sub);
+  return { sub, onClick };
+};
+const chunkArray = (array, size) => {
+  const rows = [];
+  for (let i = 0; i < array.length; i += size) {
+    rows.push(array.slice(i, i + size));
+  }
+  return rows;
+};
+const TogglePinned = (props) => {
+  const isPinned = useRef(false);
+  useEffect(() => {
+    const toggleFn = () => {
+      isPinned.current = !isPinned.current;
+    };
+    props.sub.add(toggleFn);
+    return () => {
+      props.sub.delete(toggleFn);
+    };
+  }, [props.sub]);
+  return null;
+};
+const Content = (props) => /* @__PURE__ */ jsx(OverlayProvider, { children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+  /* @__PURE__ */ jsx(TogglePinned, { sub: props.sub }),
+  /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: props.width || "350px",
+        height: "100%",
+        maxWidth: "100%",
+        maxHeight: "100%",
+        resize: "both",
+        minHeight: props.minHeight || "200px",
+        borderRight: "1px dashed #DDA0DD",
+        overflow: "hidden",
+        position: "relative"
+      },
+      children: /* @__PURE__ */ jsx(DummyInteractionsOverlay, { getData: props.getData, children: props.children })
+    }
+  )
+] }) });
+const TooltipGrid = (props) => {
+  const {
+    sub,
+    items,
+    itemsPerRow = 3,
+    width = "350px",
+    minHeight = "200px"
+  } = props;
+  const rows = chunkArray(items, itemsPerRow);
+  return /* @__PURE__ */ jsx(Fragment, { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx(Flex, { flexDirection: "row", children: row.map((item, itemIndex) => {
+    const key = rowIndex * itemsPerRow + itemIndex;
+    return /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx("h3", { children: item.description }),
+      /* @__PURE__ */ jsx(
+        Content,
+        {
+          sub,
+          width,
+          minHeight,
+          getData: item.data,
+          children: item.template
+        }
+      )
+    ] }, key);
+  }) }, `row-${row[0].description}`)) });
+};
+const HeaderTooltip = ({ maxLines }) => {
+  const { data } = useTooltipData();
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { children: [
+    /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: data.header1, maxLines }),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.SeriesItem,
+      {
+        name: "Short name",
+        value: "100",
+        color: "#4fd5e0"
+      }
+    )
+  ] });
+};
+const SeriesNameTooltip = ({ multiLine }) => {
+  const { data } = useTooltipData();
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { children: [
+    /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: data.header1 }),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.SeriesItem,
+      {
+        name: multiLine ? MULTI_LINE_NAME : LONG_SERIES_NAME,
+        value: "100",
+        color: "#4fd5e0",
+        multiLine
+      }
+    )
+  ] });
+};
+const SeriesValueTooltip = ({ withRelative }) => {
+  const { data } = useTooltipData();
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { children: [
+    /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: data.header1 }),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.SeriesItem,
+      {
+        name: "Short name",
+        value: LONG_VALUE,
+        valueUnit: withRelative ? "ms" : void 0,
+        relativeValue: withRelative ? "100" : void 0,
+        relativeValueUnit: withRelative ? "%" : void 0,
+        color: "#4fd5e0"
+      }
+    )
+  ] });
+};
+const TruncationModeTooltip = ({
+  truncation
+}) => {
+  const { data } = useTooltipData();
+  if (!data.series) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { truncation, children: [
+    /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: data.header1, maxLines: 1 }),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.Series,
+      {
+        activeItem: 0,
+        data: data.series,
+        variant: "shared",
+        seriesItemTemplate: SeriesItemTemplate
+      }
+    )
+  ] });
+};
+const MultiLineTruncationModeTooltip = ({
+  truncation
+}) => {
+  const { data } = useTooltipData();
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { truncation, children: [
+    /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: data.header1, maxLines: 3 }),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.SeriesItem,
+      {
+        name: "Short name",
+        value: "100",
+        color: "#4fd5e0"
+      }
+    )
+  ] });
+};
+const MultiLineWithSubheaderTooltip = ({
+  truncation
+}) => {
+  const { data } = useTooltipData();
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { truncation, children: [
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.Header,
+      {
+        header1: data.header1,
+        subheader: LONG_HEADER_TEXT,
+        maxLines: 2
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.SeriesItem,
+      {
+        name: "Short name",
+        value: "100",
+        color: "#4fd5e0"
+      }
+    )
+  ] });
+};
+const seriesWithRelativeData = [
+  {
+    name: LONG_SERIES_NAME,
+    value: LONG_VALUE,
+    valueUnit: "ms",
+    relativeValue: "15",
+    relativeValueUnit: "%",
+    color: "#4fd5e0"
+  },
+  {
+    name: "Another very long series name that should be truncated",
+    value: "250000000000000000000000000000",
+    valueUnit: "ms",
+    relativeValue: "25",
+    relativeValueUnit: "%",
+    color: "#7dc540"
+  }
+];
+const SeriesWithRelativeTooltip = ({
+  truncation
+}) => {
+  const { data } = useTooltipData();
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { truncation, children: [
+    /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: data.header1, maxLines: 2 }),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.Series,
+      {
+        activeItem: 0,
+        variant: "shared",
+        data: seriesWithRelativeData,
+        seriesItemTemplate: SeriesItemTemplate
+      }
+    )
+  ] });
+};
+const DateRangeWithDurationTooltip = ({
+  truncation
+}) => {
+  const startDate = /* @__PURE__ */ new Date("2024-01-01T00:00:00.000Z");
+  const endDate = /* @__PURE__ */ new Date("2024-01-15T23:59:59.999Z");
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { truncation, children: [
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.Header,
+      {
+        header1: [startDate, endDate],
+        showRangeDuration: true,
+        maxLines: 2
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.SeriesItem,
+      {
+        name: "Short name",
+        value: "100",
+        color: "#4fd5e0"
+      }
+    )
+  ] });
+};
+const SeriesLayoutTooltip = ({
+  truncation,
+  hasHeader = false,
+  hasLongNames = false,
+  hasLongValues = false,
+  hasLongHeader = false
+}) => {
+  const longValues = [
+    {
+      name: "Short",
+      value: "100000000000000000000000000000000000000",
+      color: "#4fd5e0"
+    },
+    {
+      name: "Medium",
+      value: "250000000000000000000000000000000000000.50",
+      color: "#7dc540"
+    },
+    {
+      name: "Another",
+      value: "50000000000000000000000000000000000000.00",
+      color: "#ff6b6b"
+    },
+    {
+      name: "Last one",
+      value: "750000000000000000000000000000000000000.25",
+      color: "#ffd93d"
+    }
+  ];
+  const getSeriesItems = () => {
+    if (hasLongValues) {
+      return longValues;
+    }
+    if (hasLongNames) {
+      return [
+        {
+          name: "This is a moderately long series name that might need truncation",
+          value: "100",
+          color: "#4fd5e0"
+        },
+        {
+          name: "This is an extremely long series name that definitely needs to be truncated because it exceeds the available space by a significant margin",
+          value: "250.5",
+          color: "#7dc540"
+        },
+        { name: "Medium long name", value: "50", color: "#ff6b6b" },
+        {
+          name: "Another quite lengthy series name that will also need truncation",
+          value: "75",
+          color: "#ffd93d"
+        }
+      ];
+    }
+    return [
+      { name: "Short name", value: "100", color: "#4fd5e0" },
+      { name: "Medium length series name", value: "250.5", color: "#7dc540" },
+      { name: "Another name", value: "50", color: "#ff6b6b" }
+    ];
+  };
+  const seriesItems = getSeriesItems();
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { truncation, children: [
+    /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: "Test header", maxLines: 2 }),
+    /* @__PURE__ */ jsx(OverlayTooltip.SeriesHeader, { disabled: !hasHeader }),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.Series,
+      {
+        activeItem: 0,
+        variant: "shared",
+        data: seriesItems,
+        seriesItemTemplate: SeriesItemTemplate
+      }
+    )
+  ] });
+};
+const SeriesHeaderTooltip = ({ longLabels }) => {
+  const { data } = useTooltipData();
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { children: [
+    /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: data.header1 }),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.SeriesHeader,
+      {
+        seriesLabel: longLabels ? "Series details header series details header series details" : "Series",
+        valueLabel: longLabels ? "Value header value header value header" : "Value"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.SeriesItem,
+      {
+        name: "Short name",
+        value: "100",
+        color: "#4fd5e0"
+      }
+    )
+  ] });
+};
+const SERIES_COLORS = ["#4fd5e0", "#7dc540", "#ff6b6b", "#ffd93d", "#a855f7"];
+const MultipleSeriesItemsTooltip = ({
+  truncation,
+  count,
+  longNames = false,
+  longValues = false,
+  hasHeader = false
+}) => {
+  const { data } = useTooltipData();
+  const seriesItems = Array.from({ length: count }, (_, i) => ({
+    name: longNames ? `This is a very long series name that should be truncated - Series ${i + 1}` : `Series ${i + 1}`,
+    value: longValues ? `${(i + 1) * 1e20}` : `${(i + 1) * 100}`,
+    color: SERIES_COLORS[i % SERIES_COLORS.length]
+  }));
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { truncation, children: [
+    /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: data.header1, maxLines: 2 }),
+    hasHeader && /* @__PURE__ */ jsx(OverlayTooltip.SeriesHeader, { seriesLabel: "Series", valueLabel: "Value" }),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.Series,
+      {
+        activeItem: 0,
+        variant: "shared",
+        data: seriesItems,
+        seriesItemTemplate: SeriesItemTemplate
+      }
+    )
+  ] });
+};
+const HeaderMaxLinesTooltip = ({ maxLines }) => {
+  const { data } = useTooltipData();
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { children: [
+    /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: data.header1, maxLines }),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.SeriesItem,
+      {
+        name: "Test Series",
+        value: "100",
+        color: "#4fd5e0"
+      }
+    )
+  ] });
+};
+const SeriesNameTruncationTooltip = ({
+  useMultiLine,
+  useVeryLong
+}) => {
+  const { data } = useTooltipData();
+  const getSeriesName = () => {
+    if (useVeryLong) {
+      return VERY_LONG_SERIES_NAME;
+    }
+    if (useMultiLine) {
+      return VERY_LONG_MULTI_LINE_NAME;
+    }
+    return LONG_SERIES_NAME;
+  };
+  const seriesName = getSeriesName();
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { children: [
+    /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: data.header1 }),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.SeriesItem,
+      {
+        name: seriesName,
+        value: "100",
+        color: "#4fd5e0",
+        multiLine: useMultiLine
+      }
+    )
+  ] });
+};
+const ValueTruncationTooltip = ({
+  valueLength,
+  withRelative,
+  withUnit
+}) => {
+  const { data } = useTooltipData();
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { children: [
+    /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: data.header1 }),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.SeriesItem,
+      {
+        name: "Test Series",
+        value: getTestValue(valueLength),
+        valueUnit: withUnit ? "ms" : void 0,
+        relativeValue: withRelative ? "15" : void 0,
+        relativeValueUnit: withRelative ? "%" : void 0,
+        color: "#4fd5e0"
+      }
+    )
+  ] });
+};
+const TooltipHoverTooltip = ({
+  truncateHeader,
+  truncateSeries,
+  truncateValue
+}) => {
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { children: [
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.Header,
+      {
+        header1: truncateHeader ? LONG_HEADER_TEXT : SHORT_HEADER,
+        maxLines: truncateHeader ? 2 : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.SeriesItem,
+      {
+        name: truncateSeries ? VERY_LONG_SERIES_NAME : "Short name",
+        value: truncateValue ? VERY_LONG_VALUE : "100",
+        color: "#4fd5e0"
+      }
+    )
+  ] });
+};
+const TruncationModesTooltip = ({
+  mode,
+  target
+}) => {
+  const { data } = useTooltipData();
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { truncation: mode, children: [
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.Header,
+      {
+        header1: target === "header" ? LONG_HEADER_TEXT : data.header1,
+        maxLines: target === "header" ? 2 : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.SeriesItem,
+      {
+        name: target === "series" ? VERY_LONG_SERIES_NAME : "Test Series",
+        value: target === "value" ? VERY_LONG_VALUE : "100",
+        color: "#4fd5e0"
+      }
+    )
+  ] });
+};
+const MultiLineSeriesTooltip = ({
+  multiLine = true,
+  lines = 1
+}) => {
+  const { data } = useTooltipData();
+  const multiLineSeriesItems = Array.from({ length: lines }, (_, index) => ({
+    name: [...MULTI_LINE_NAME, `Series ${index + 1}`],
+    value: "100",
+    color: "#4fd5e0",
+    key: index
+  }));
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { children: [
+    /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: data.header1 }),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.Series,
+      {
+        activeItem: 0,
+        variant: "shared",
+        data: multiLineSeriesItems,
+        seriesItemTemplate: createSeriesItemTemplate({ multiLine })
+      }
+    )
+  ] });
+};
+const SeriesHeaderTruncationTooltip = ({
+  longLabels,
+  truncation
+}) => {
+  const { data } = useTooltipData();
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { truncation, children: [
+    /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: data.header1 }),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.SeriesHeader,
+      {
+        seriesLabel: longLabels ? "Very long series header label that needs truncation" : "Series",
+        valueLabel: longLabels ? "Very long value header label that needs truncation" : "Value"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.SeriesItem,
+      {
+        name: "Test Series",
+        value: "100",
+        color: "#4fd5e0"
+      }
+    )
+  ] });
+};
+const ResponsiveTruncationTooltip = ({
+  containerWidth,
+  contentLength
+}) => {
+  const header = contentLength === "long" ? LONG_HEADER_TEXT : MODERATE_HEADER;
+  const seriesName = contentLength === "long" ? VERY_LONG_SERIES_NAME : LONG_SERIES_NAME;
+  const value = contentLength === "long" ? LONG_VALUE : MODERATE_LONG_VALUE;
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { children: [
+    /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: header, maxLines: 2 }),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.SeriesItem,
+      {
+        name: seriesName,
+        value,
+        color: "#4fd5e0"
+      }
+    )
+  ] });
+};
+const EdgeCasesTooltip = ({
+  scenario
+}) => {
+  switch (scenario) {
+    case "all-long": {
+      const allLongData = [
+        {
+          name: VERY_LONG_SERIES_NAME,
+          value: VERY_LONG_VALUE,
+          color: "#4fd5e0"
+        },
+        {
+          name: "Another extremely long series name that definitely needs truncation",
+          value: VERY_LONG_VALUE,
+          color: "#7dc540"
+        }
+      ];
+      return /* @__PURE__ */ jsxs(OverlayTooltip, { children: [
+        /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: LONG_HEADER_TEXT, maxLines: 2 }),
+        /* @__PURE__ */ jsx(
+          OverlayTooltip.Series,
+          {
+            activeItem: 0,
+            variant: "shared",
+            data: allLongData,
+            seriesItemTemplate: (current) => /* @__PURE__ */ jsx(OverlayTooltip.SeriesItem, { ...current })
+          }
+        )
+      ] });
+    }
+    case "mixed-lengths": {
+      const mixedLengthsData = [
+        { name: "Short", value: VERY_LONG_VALUE, color: "#4fd5e0" },
+        { name: VERY_LONG_SERIES_NAME, value: "100", color: "#7dc540" },
+        {
+          name: "Medium length name",
+          value: MODERATE_LONG_VALUE,
+          color: "#ff6b6b"
+        }
+      ];
+      return /* @__PURE__ */ jsxs(OverlayTooltip, { children: [
+        /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: MODERATE_HEADER, maxLines: 2 }),
+        /* @__PURE__ */ jsx(
+          OverlayTooltip.Series,
+          {
+            activeItem: 0,
+            variant: "shared",
+            data: mixedLengthsData,
+            seriesItemTemplate: (current) => /* @__PURE__ */ jsx(OverlayTooltip.SeriesItem, { ...current })
+          }
+        )
+      ] });
+    }
+    case "very-long-multi-line":
+      return /* @__PURE__ */ jsxs(OverlayTooltip, { children: [
+        /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: LONG_HEADER_TEXT, maxLines: 3 }),
+        /* @__PURE__ */ jsx(
+          OverlayTooltip.SeriesItem,
+          {
+            name: VERY_LONG_MULTI_LINE_NAME.join(" / "),
+            value: VERY_LONG_VALUE,
+            color: "#4fd5e0",
+            maxLines: 3
+          }
+        )
+      ] });
+    case "decimal-values": {
+      const decimalValuesData = [
+        {
+          name: "Series with decimals",
+          value: VALUE_WITH_DECIMALS,
+          valueUnit: "ms",
+          color: "#4fd5e0"
+        },
+        {
+          name: "Another decimal series",
+          value: VALUE_WITH_DECIMALS,
+          valueUnit: "ms",
+          relativeValue: "12.5",
+          relativeValueUnit: "%",
+          color: "#7dc540"
+        }
+      ];
+      return /* @__PURE__ */ jsxs(OverlayTooltip, { children: [
+        /* @__PURE__ */ jsx(OverlayTooltip.Header, { header1: "Decimal Values Test" }),
+        /* @__PURE__ */ jsx(
+          OverlayTooltip.Series,
+          {
+            activeItem: 0,
+            variant: "shared",
+            data: decimalValuesData,
+            seriesItemTemplate: (current) => /* @__PURE__ */ jsx(OverlayTooltip.SeriesItem, { ...current })
+          }
+        )
+      ] });
+    }
+    default:
+      return null;
+  }
+};
+const TruncationTestData = [
+  {
+    description: "Header: maxLines=1",
+    data: createData(LONG_HEADER_TEXT),
+    template: /* @__PURE__ */ jsx(HeaderTooltip, { maxLines: 1 })
+  },
+  {
+    description: "Header: maxLines=2",
+    data: createData(LONG_HEADER_TEXT),
+    template: /* @__PURE__ */ jsx(HeaderTooltip, { maxLines: 2 })
+  },
+  {
+    description: "Header: maxLines=3 (default)",
+    data: createData(LONG_HEADER_TEXT),
+    template: /* @__PURE__ */ jsx(HeaderTooltip, { maxLines: 3 })
+  },
+  {
+    description: "Header: maxLines=5",
+    data: createData(LONG_HEADER_TEXT),
+    template: /* @__PURE__ */ jsx(HeaderTooltip, { maxLines: 5 })
+  },
+  {
+    description: "Header: Short text",
+    data: createData("Short header text"),
+    template: /* @__PURE__ */ jsx(HeaderTooltip, {})
+  },
+  {
+    description: "Series: Long name",
+    data: createData("Test", [
+      { name: LONG_SERIES_NAME, color: "#4fd5e0", value: "100" }
+    ]),
+    template: /* @__PURE__ */ jsx(SeriesNameTooltip, {})
+  },
+  {
+    description: "Series: Multi-line name",
+    data: createData("Test", [
+      { name: MULTI_LINE_NAME, color: "#4fd5e0", value: "100" }
+    ]),
+    template: /* @__PURE__ */ jsx(SeriesNameTooltip, { multiLine: true })
+  },
+  {
+    description: "Series: Long value",
+    data: createData("Test", [
+      { name: "Short name", color: "#4fd5e0", value: LONG_VALUE }
+    ]),
+    template: /* @__PURE__ */ jsx(SeriesValueTooltip, {})
+  },
+  {
+    description: "Series: Long value + relative",
+    data: createData("Test", [
+      { name: "Short name", color: "#4fd5e0", value: LONG_VALUE }
+    ]),
+    template: /* @__PURE__ */ jsx(SeriesValueTooltip, { withRelative: true })
+  },
+  {
+    description: "SeriesHeader: Long labels",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(SeriesHeaderTooltip, { longLabels: true })
+  },
+  {
+    description: "SeriesHeader: Short labels",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(SeriesHeaderTooltip, {})
+  }
+];
+const truncationModeSeriesData = [
+  { name: LONG_SERIES_NAME, value: "100", color: "#4fd5e0" },
+  {
+    name: "Another long series name that should be truncated",
+    value: "200",
+    color: "#7dc540"
+  }
+];
+const TruncationModeTestData = [
+  {
+    description: "truncation='end' (default)",
+    data: createData(LONG_HEADER_TEXT, truncationModeSeriesData),
+    template: /* @__PURE__ */ jsx(TruncationModeTooltip, { truncation: "end" })
+  },
+  {
+    description: "truncation='start'",
+    data: createData(LONG_HEADER_TEXT, truncationModeSeriesData),
+    template: /* @__PURE__ */ jsx(TruncationModeTooltip, { truncation: "start" })
+  },
+  {
+    description: "truncation='middle'",
+    data: createData(LONG_HEADER_TEXT, truncationModeSeriesData),
+    template: /* @__PURE__ */ jsx(TruncationModeTooltip, { truncation: "middle" })
+  }
+];
+const MultiLineTruncationModeTestData = [
+  {
+    description: "Multi-line (maxLines=3): truncation='end'",
+    data: createData(LONG_HEADER_TEXT),
+    template: /* @__PURE__ */ jsx(MultiLineTruncationModeTooltip, { truncation: "end" })
+  },
+  {
+    description: "Multi-line (maxLines=3): truncation='start'",
+    data: createData(LONG_HEADER_TEXT),
+    template: /* @__PURE__ */ jsx(MultiLineTruncationModeTooltip, { truncation: "start" })
+  },
+  {
+    description: "Multi-line (maxLines=3): truncation='middle'",
+    data: createData(LONG_HEADER_TEXT),
+    template: /* @__PURE__ */ jsx(MultiLineTruncationModeTooltip, { truncation: "middle" })
+  }
+];
+const MultiLineWithSubheaderTestData = [
+  {
+    description: "Multi-line with subheader: truncation='end'",
+    data: createData(LONG_HEADER_TEXT),
+    template: /* @__PURE__ */ jsx(MultiLineWithSubheaderTooltip, { truncation: "end" })
+  },
+  {
+    description: "Multi-line with subheader: truncation='start'",
+    data: createData(LONG_HEADER_TEXT),
+    template: /* @__PURE__ */ jsx(MultiLineWithSubheaderTooltip, { truncation: "start" })
+  },
+  {
+    description: "Multi-line with subheader: truncation='middle'",
+    data: createData(LONG_HEADER_TEXT),
+    template: /* @__PURE__ */ jsx(MultiLineWithSubheaderTooltip, { truncation: "middle" })
+  }
+];
+const SeriesWithRelativeTestData = [
+  {
+    description: "Series with relative values: truncation='end'",
+    data: createData("Test header"),
+    template: /* @__PURE__ */ jsx(SeriesWithRelativeTooltip, { truncation: "end" })
+  },
+  {
+    description: "Series with relative values: truncation='start'",
+    data: createData("Test header"),
+    template: /* @__PURE__ */ jsx(SeriesWithRelativeTooltip, { truncation: "start" })
+  },
+  {
+    description: "Series with relative values: truncation='middle'",
+    data: createData("Test header"),
+    template: /* @__PURE__ */ jsx(SeriesWithRelativeTooltip, { truncation: "middle" })
+  }
+];
+const DateRangeWithDurationTestData = [
+  {
+    description: "Date range with duration: truncation='end'",
+    data: createData("Test header"),
+    template: /* @__PURE__ */ jsx(DateRangeWithDurationTooltip, { truncation: "end" })
+  },
+  {
+    description: "Date range with duration: truncation='start'",
+    data: createData("Test header"),
+    template: /* @__PURE__ */ jsx(DateRangeWithDurationTooltip, { truncation: "start" })
+  },
+  {
+    description: "Date range with duration: truncation='middle'",
+    data: createData("Test header"),
+    template: /* @__PURE__ */ jsx(DateRangeWithDurationTooltip, { truncation: "middle" })
+  }
+];
+const MultipleSeriesItemsTestData = [
+  {
+    description: "3 series items: short names",
+    data: createData("Test header"),
+    template: /* @__PURE__ */ jsx(MultipleSeriesItemsTooltip, { count: 3 })
+  },
+  {
+    description: "3 series items: long names",
+    data: createData("Test header"),
+    template: /* @__PURE__ */ jsx(MultipleSeriesItemsTooltip, { count: 3, longNames: true })
+  },
+  {
+    description: "3 series items: long values",
+    data: createData("Test header"),
+    template: /* @__PURE__ */ jsx(MultipleSeriesItemsTooltip, { count: 3, longValues: true })
+  },
+  {
+    description: "3 series items: with header",
+    data: createData("Test header"),
+    template: /* @__PURE__ */ jsx(MultipleSeriesItemsTooltip, { count: 3, hasHeader: true })
+  },
+  {
+    description: "5 series items: short names",
+    data: createData("Test header"),
+    template: /* @__PURE__ */ jsx(MultipleSeriesItemsTooltip, { count: 5 })
+  },
+  {
+    description: "5 series items: long names",
+    data: createData("Test header"),
+    template: /* @__PURE__ */ jsx(MultipleSeriesItemsTooltip, { count: 5, longNames: true })
+  },
+  {
+    description: "5 series items: long values",
+    data: createData("Test header"),
+    template: /* @__PURE__ */ jsx(MultipleSeriesItemsTooltip, { count: 5, longValues: true })
+  },
+  {
+    description: "5 series items: with header",
+    data: createData("Test header"),
+    template: /* @__PURE__ */ jsx(MultipleSeriesItemsTooltip, { count: 5, hasHeader: true })
+  },
+  {
+    description: "5 series items: truncation='middle'",
+    data: createData("Test header"),
+    template: /* @__PURE__ */ jsx(MultipleSeriesItemsTooltip, { count: 5, longNames: true, truncation: "middle" })
+  }
+];
+const SeriesLayoutTestData = [
+  {
+    description: "Series with header: truncation='end'",
+    data: createData("Test header"),
+    template: /* @__PURE__ */ jsx(SeriesLayoutTooltip, { truncation: "end", hasHeader: true })
+  },
+  {
+    description: "Series without header: truncation='end' hasHeader='false'",
+    data: createData("Test header"),
+    template: /* @__PURE__ */ jsx(SeriesLayoutTooltip, { truncation: "end", hasHeader: false })
+  },
+  {
+    description: "Long names with header: truncation='middle'",
+    data: createData("Test header"),
+    template: /* @__PURE__ */ jsx(SeriesLayoutTooltip, { truncation: "middle", hasHeader: true, hasLongNames: true })
+  },
+  {
+    description: "Long values without header: truncation='start'",
+    data: createData("Test header"),
+    template: /* @__PURE__ */ jsx(SeriesLayoutTooltip, { truncation: "start", hasLongValues: true })
+  },
+  {
+    description: "Long header labels: truncation='end'",
+    data: createData("Test header"),
+    template: /* @__PURE__ */ jsx(SeriesLayoutTooltip, { truncation: "end", hasHeader: true, hasLongHeader: true })
+  }
+];
+const HeaderMaxLinesTestData = [
+  {
+    description: "AC1: Header maxLines=1 (should truncate)",
+    data: createData(LONG_HEADER_TEXT),
+    template: /* @__PURE__ */ jsx(HeaderMaxLinesTooltip, { maxLines: 1 })
+  },
+  {
+    description: "AC1: Header maxLines=2 (should truncate)",
+    data: createData(LONG_HEADER_TEXT),
+    template: /* @__PURE__ */ jsx(HeaderMaxLinesTooltip, { maxLines: 2 })
+  },
+  {
+    description: "AC1: Header maxLines=3 (should truncate)",
+    data: createData(LONG_HEADER_TEXT),
+    template: /* @__PURE__ */ jsx(HeaderMaxLinesTooltip, { maxLines: 3 })
+  },
+  {
+    description: "AC1: Header maxLines=5 (should not truncate)",
+    data: createData(LONG_HEADER_TEXT),
+    template: /* @__PURE__ */ jsx(HeaderMaxLinesTooltip, { maxLines: 5 })
+  },
+  {
+    description: "AC1: Header short text maxLines=1",
+    data: createData(SHORT_HEADER),
+    template: /* @__PURE__ */ jsx(HeaderMaxLinesTooltip, { maxLines: 1 })
+  }
+];
+const SeriesNameTruncationTestData = [
+  {
+    description: "AC2: Series name truncation (single line)",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(SeriesNameTruncationTooltip, {})
+  },
+  {
+    description: "AC2: Series name truncation (very long)",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(SeriesNameTruncationTooltip, { useVeryLong: true })
+  }
+];
+const ValueTruncationTestData = [
+  {
+    description: "AC3: Value short (no truncation)",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(ValueTruncationTooltip, { valueLength: "short" })
+  },
+  {
+    description: "AC3: Value moderate (should truncate)",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(ValueTruncationTooltip, { valueLength: "moderate" })
+  },
+  {
+    description: "AC3: Value long (should truncate)",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(ValueTruncationTooltip, { valueLength: "long" })
+  },
+  {
+    description: "AC3: Value very long (should truncate)",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(ValueTruncationTooltip, { valueLength: "very-long" })
+  },
+  {
+    description: "AC3: Value with unit (should truncate)",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(ValueTruncationTooltip, { valueLength: "long", withUnit: true })
+  },
+  {
+    description: "AC3: Value with relative (should truncate)",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(ValueTruncationTooltip, { valueLength: "long", withRelative: true })
+  },
+  {
+    description: "AC3: Value with unit + relative (should truncate)",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(ValueTruncationTooltip, { valueLength: "long", withUnit: true, withRelative: true })
+  }
+];
+const TooltipHoverTestData = [
+  {
+    description: "AC4: Hover tooltip (header truncated)",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(TooltipHoverTooltip, { truncateHeader: true })
+  },
+  {
+    description: "AC4: Hover tooltip (series truncated)",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(TooltipHoverTooltip, { truncateSeries: true })
+  },
+  {
+    description: "AC4: Hover tooltip (value truncated)",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(TooltipHoverTooltip, { truncateValue: true })
+  },
+  {
+    description: "AC4: Hover tooltip (all truncated)",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(TooltipHoverTooltip, { truncateHeader: true, truncateSeries: true, truncateValue: true })
+  }
+];
+const TruncationModesTestData = [
+  // AC5: end truncation
+  {
+    description: "AC5: Header truncation=end",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(TruncationModesTooltip, { mode: "end", target: "header" })
+  },
+  {
+    description: "AC5: Series truncation=end",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(TruncationModesTooltip, { mode: "end", target: "series" })
+  },
+  {
+    description: "AC5: Value truncation=end",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(TruncationModesTooltip, { mode: "end", target: "value" })
+  },
+  // AC6: start truncation
+  {
+    description: "AC6: Header truncation=start",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(TruncationModesTooltip, { mode: "start", target: "header" })
+  },
+  {
+    description: "AC6: Series truncation=start",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(TruncationModesTooltip, { mode: "start", target: "series" })
+  },
+  {
+    description: "AC6: Value truncation=start",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(TruncationModesTooltip, { mode: "start", target: "value" })
+  },
+  // AC7: middle truncation
+  {
+    description: "AC7: Header truncation=middle",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(TruncationModesTooltip, { mode: "middle", target: "header" })
+  },
+  {
+    description: "AC7: Series truncation=middle",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(TruncationModesTooltip, { mode: "middle", target: "series" })
+  },
+  {
+    description: "AC7: Value truncation=middle",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(TruncationModesTooltip, { mode: "middle", target: "value" })
+  }
+];
+const MultiLineSeriesTestData = [
+  {
+    description: "AC8: Multi-line series (1 line)",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(MultiLineSeriesTooltip, { lines: 1 })
+  },
+  {
+    description: "AC8: Multi-line series (2 lines)",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(MultiLineSeriesTooltip, { lines: 2 })
+  }
+];
+const SeriesHeaderTruncationTestData = [
+  {
+    description: "AC9: SeriesHeader short labels",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(SeriesHeaderTruncationTooltip, {})
+  },
+  {
+    description: "AC9: SeriesHeader long labels",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(SeriesHeaderTruncationTooltip, { longLabels: true })
+  },
+  {
+    description: "AC9: SeriesHeader truncation=end",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(SeriesHeaderTruncationTooltip, { longLabels: true, truncation: "end" })
+  },
+  {
+    description: "AC9: SeriesHeader truncation=start",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(SeriesHeaderTruncationTooltip, { longLabels: true, truncation: "start" })
+  },
+  {
+    description: "AC9: SeriesHeader truncation=middle",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(SeriesHeaderTruncationTooltip, { longLabels: true, truncation: "middle" })
+  }
+];
+const ResponsiveTruncationTestData = [
+  {
+    description: "AC10: Narrow container + short content",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(
+      ResponsiveTruncationTooltip,
+      {
+        containerWidth: "narrow",
+        contentLength: "short"
+      }
+    )
+  },
+  {
+    description: "AC10: Narrow container + long content",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(
+      ResponsiveTruncationTooltip,
+      {
+        containerWidth: "narrow",
+        contentLength: "long"
+      }
+    )
+  },
+  {
+    description: "AC10: Medium container + short content",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(
+      ResponsiveTruncationTooltip,
+      {
+        containerWidth: "medium",
+        contentLength: "short"
+      }
+    )
+  },
+  {
+    description: "AC10: Medium container + long content",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(
+      ResponsiveTruncationTooltip,
+      {
+        containerWidth: "medium",
+        contentLength: "long"
+      }
+    )
+  },
+  {
+    description: "AC10: Wide container + short content",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(
+      ResponsiveTruncationTooltip,
+      {
+        containerWidth: "wide",
+        contentLength: "short"
+      }
+    )
+  },
+  {
+    description: "AC10: Wide container + long content",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(ResponsiveTruncationTooltip, { containerWidth: "wide", contentLength: "long" })
+  }
+];
+const EdgeCasesTestData = [
+  {
+    description: "Edge case: All content long",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(EdgeCasesTooltip, { scenario: "all-long" })
+  },
+  {
+    description: "Edge case: Mixed lengths",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(EdgeCasesTooltip, { scenario: "mixed-lengths" })
+  },
+  {
+    description: "Edge case: Decimal values",
+    data: createData("Test"),
+    template: /* @__PURE__ */ jsx(EdgeCasesTooltip, { scenario: "decimal-values" })
+  }
+];
+const TruncationStory = () => {
+  const { sub, onClick } = usePinAllSetup();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { onClick, children: "Pin all" }),
+    /* @__PURE__ */ jsx("h2", { children: "Basic truncation tests" }),
+    /* @__PURE__ */ jsx(TooltipGrid, { sub, items: TruncationTestData }),
+    /* @__PURE__ */ jsx("h2", { children: "OverlayTooltip truncation prop" }),
+    /* @__PURE__ */ jsx(TooltipGrid, { sub, items: TruncationModeTestData }),
+    /* @__PURE__ */ jsx("h2", { children: "Multi-line truncation modes" }),
+    /* @__PURE__ */ jsx(TooltipGrid, { sub, items: MultiLineTruncationModeTestData }),
+    /* @__PURE__ */ jsx("h2", { children: "Multi-line with subheader" }),
+    /* @__PURE__ */ jsx(TooltipGrid, { sub, items: MultiLineWithSubheaderTestData }),
+    /* @__PURE__ */ jsx("h2", { children: "Series with relative values" }),
+    /* @__PURE__ */ jsx(TooltipGrid, { sub, items: SeriesWithRelativeTestData }),
+    /* @__PURE__ */ jsx("h2", { children: "Date range with duration" }),
+    /* @__PURE__ */ jsx(TooltipGrid, { sub, items: DateRangeWithDurationTestData }),
+    /* @__PURE__ */ jsx("h2", { children: "Series layout scenarios" }),
+    /* @__PURE__ */ jsx(TooltipGrid, { sub, items: SeriesLayoutTestData }),
+    /* @__PURE__ */ jsx("h2", { children: "Multiple series items (3 and 5)" }),
+    /* @__PURE__ */ jsx(TooltipGrid, { sub, items: MultipleSeriesItemsTestData }),
+    /* @__PURE__ */ jsx("h2", { children: "AC1: Header truncation with maxLines" }),
+    /* @__PURE__ */ jsx(TooltipGrid, { sub, items: HeaderMaxLinesTestData }),
+    /* @__PURE__ */ jsx("h2", { children: "AC2: Series name truncation" }),
+    /* @__PURE__ */ jsx(TooltipGrid, { sub, items: SeriesNameTruncationTestData }),
+    /* @__PURE__ */ jsx("h2", { children: "AC3: Value truncation (50% width constraint)" }),
+    /* @__PURE__ */ jsx(TooltipGrid, { sub, items: ValueTruncationTestData }),
+    /* @__PURE__ */ jsx("h2", { children: "AC4: Tooltip shows full content on hover" }),
+    /* @__PURE__ */ jsx(TooltipGrid, { sub, items: TooltipHoverTestData }),
+    /* @__PURE__ */ jsx("h2", { children: "AC5: Truncation mode 'end'" }),
+    /* @__PURE__ */ jsx(
+      TooltipGrid,
+      {
+        sub,
+        items: TruncationModesTestData.filter(
+          (item) => item.description.includes("AC5")
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("h2", { children: "AC6: Truncation mode 'start'" }),
+    /* @__PURE__ */ jsx(
+      TooltipGrid,
+      {
+        sub,
+        items: TruncationModesTestData.filter(
+          (item) => item.description.includes("AC6")
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("h2", { children: "AC7: Truncation mode 'middle'" }),
+    /* @__PURE__ */ jsx(
+      TooltipGrid,
+      {
+        sub,
+        items: TruncationModesTestData.filter(
+          (item) => item.description.includes("AC7")
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("h2", { children: "AC8: Multi-line series names" }),
+    /* @__PURE__ */ jsx(TooltipGrid, { sub, items: MultiLineSeriesTestData }),
+    /* @__PURE__ */ jsx("h2", { children: "AC9: SeriesHeader truncation" }),
+    /* @__PURE__ */ jsx(TooltipGrid, { sub, items: SeriesHeaderTruncationTestData }),
+    /* @__PURE__ */ jsx("h2", { children: "AC10: Responsive truncation" }),
+    /* @__PURE__ */ jsx(TooltipGrid, { sub, items: ResponsiveTruncationTestData }),
+    /* @__PURE__ */ jsx("h2", { children: "Edge cases and combinations" }),
+    /* @__PURE__ */ jsx(TooltipGrid, { sub, items: EdgeCasesTestData })
+  ] });
+};
+export {
+  TruncationStory
+};
+//# sourceMappingURL=_TruncationStory.js.map