@dynatrace/strato-components 3.6.0 → 3.7.0

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

@@ -1,1259 +0,0 @@
-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 = "line") => () => ({
-  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],
-        showRangeDuration1: 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