@sproutsocial/seeds-react-data-viz 0.7.32 → 0.14.0

package/dist/chunk-VFBZ7FNK.js

@@ -0,0 +1,1154 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/ColorBox/ColorBox.tsx
+var _styledcomponents = require('styled-components'); var _styledcomponents2 = _interopRequireDefault(_styledcomponents);
+var _seedsreactbox = require('@sproutsocial/seeds-react-box');
+
+// ../seeds-react-theme-provider/dist/index.mjs
+var _react = require('react');
+
+
+
+
+var _seedsreacttheme = require('@sproutsocial/seeds-react-theme');
+var _jsxruntime = require('react/jsx-runtime');
+var GlobalTokenStyles = _styledcomponents.createGlobalStyle`
+  :root {
+    --color-container-bg-ai-generated: radial-gradient(
+      circle at bottom left,
+      color-mix(in srgb, #205bc3, transparent 80%) 0%,
+      color-mix(in srgb, #6f5ed3, transparent 80%) 61%,
+      color-mix(in srgb, #f282f5, transparent 80%) 100%
+    ), #f3f4f4;
+  }
+`;
+
+// src/components/ColorBox/ColorBox.tsx
+
+
+var ColorBox = ({
+  display = "inline-block",
+  height = "16px",
+  width = "16px",
+  minWidth = width,
+  borderRadius = "400",
+  ...props
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _seedsreactbox.Box,
+    {
+      ...props,
+      display,
+      height,
+      width,
+      minWidth,
+      borderRadius,
+      css: _styledcomponents.css`
+          cursor: ${(props2) => _optionalChain([props2, 'optionalAccess', _2 => _2.onClick]) ? "pointer" : "default"};
+        `
+    }
+  );
+};
+
+// src/components/ColorBox/DatavizColorBox.tsx
+
+
+var DatavizColorBox = _styledcomponents2.default.call(void 0, ColorBox).attrs(
+  ({ colorIndex }) => ({
+    style: {
+      background: getDatavizColor(colorIndex),
+      opacity: getDatavizOpacity(colorIndex)
+    }
+  })
+)``;
+var getDatavizColor = (colorIndex) => _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[colorIndex % _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST.length] || "";
+var getDatavizOpacity = (colorIndex) => {
+  const opacitySteps = [1, 0.6, 0.4, 0.2];
+  const opacityStep = Math.floor(colorIndex / _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST.length) % opacitySteps.length;
+  return opacitySteps[opacityStep];
+};
+var getDatavizColorWithAlpha = (colorIndex) => {
+  const color = getDatavizColor(colorIndex);
+  const opacity = getDatavizOpacity(colorIndex);
+  if (opacity < 0 || opacity > 1) {
+    return color;
+  }
+  return `${color}${Math.floor(opacity * 255).toString(16).padStart(2, "0")}`;
+};
+
+// src/components/ColorBox/NetworkColorBox.tsx
+var _seedsnetworkcolor = require('@sproutsocial/seeds-networkcolor'); var _seedsnetworkcolor2 = _interopRequireDefault(_seedsnetworkcolor);
+
+var NetworkColorBox = ({
+  networkColor,
+  ...props
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ColorBox, { ...props, bg: _seedsnetworkcolor2.default[networkColor] });
+};
+
+// src/components/ChartLegend/components/ChartLegendLabel.tsx
+
+
+
+var _seedsreacttext = require('@sproutsocial/seeds-react-text');
+
+var StyledBox = _styledcomponents2.default.call(void 0, _seedsreactbox.Box)`
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: theme6 }) => theme6.space[300]};
+`;
+var ChartLegendLabel = _react.memo.call(void 0, 
+  function ChartLegendLabel2({
+    children,
+    color = "#CCC",
+    containerBoxProps = {}
+  }) {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledBox, { ...containerBoxProps, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ColorBox, { bg: color }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { as: "div", fontSize: 200, color: "text.subtext", children })
+    ] });
+  }
+);
+
+// src/components/ChartLegend/ChartLegend.tsx
+
+
+
+
+var ChartLegend = _react.memo.call(void 0, function ChartLegend2({
+  legendLabels,
+  containerBoxProps = {},
+  stacked = false
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _seedsreactbox.Box,
+    {
+      as: "ul",
+      "aria-hidden": "true",
+      display: "flex",
+      justifyContent: "center",
+      flexDirection: stacked ? "column" : "row",
+      flexWrap: "wrap",
+      columnGap: 450,
+      rowGap: 200,
+      m: 0,
+      p: 0,
+      ...containerBoxProps,
+      children: legendLabels.map(({ color, content }, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        ChartLegendLabel,
+        {
+          color: color || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index],
+          containerBoxProps: { as: "li" },
+          children: content
+        },
+        `chart-legend-label-${index}`
+      ))
+    }
+  );
+});
+
+// src/components/ChartTooltip/ChartTooltip.tsx
+
+
+
+
+var StyledBox2 = _styledcomponents2.default.call(void 0, _seedsreactbox.Box)`
+  .Icon,
+  .logo {
+    stroke: none;
+  }
+`;
+var ChartTooltip = _react.memo.call(void 0, function ChartTooltip2({
+  children
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    StyledBox2,
+    {
+      bg: "container.background.base",
+      boxShadow: "medium",
+      border: 500,
+      borderColor: "container.border.base",
+      borderRadius: 500,
+      p: 400,
+      minWidth: 285,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreactbox.Box, { display: "flex", flexDirection: "column", gap: 350, children })
+    }
+  );
+});
+
+// src/components/ChartTooltip/components/ChartTooltipFooter.tsx
+
+
+
+var ChartTooltipFooter = _react.memo.call(void 0, 
+  function ChartTooltipFooter2({ children }) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _seedsreactbox.Box,
+      {
+        borderTop: 500,
+        borderColor: "container.border.base",
+        mx: -400,
+        mb: -200,
+        px: 400,
+        pt: 350,
+        children
+      }
+    );
+  }
+);
+
+// src/components/ChartTooltip/components/ChartTooltipHeader.tsx
+
+
+
+var ChartTooltipHeader = _react.memo.call(void 0, 
+  function ChartTooltipHeader2({ children }) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _seedsreactbox.Box,
+      {
+        borderBottom: 500,
+        borderColor: "container.border.base",
+        mx: -400,
+        mt: -200,
+        px: 400,
+        pb: 350,
+        children
+      }
+    );
+  }
+);
+
+// src/components/ChartTooltip/components/ChartTooltipPortal.tsx
+
+var _reactdom = require('react-dom');
+var generateChartTooltipPortalId = (chartId) => `highcharts-custom-tooltip-${chartId}`;
+var ChartTooltipPortal = _react.memo.call(void 0, 
+  function ChartTooltipPortal2({
+    chart,
+    renderContent
+  }) {
+    const isInitialized = _react.useRef.call(void 0, false);
+    const [node, setNode] = _react.useState.call(void 0, null);
+    const [context, setContext] = _react.useState.call(void 0, null);
+    _react.useEffect.call(void 0, () => {
+      const formatter = function() {
+        if (!isInitialized.current) {
+          isInitialized.current = true;
+          chart.tooltip.refresh.apply(chart.tooltip, [this.point]);
+          chart.tooltip.hide(0);
+        }
+        setContext(this);
+        return `<div id="${generateChartTooltipPortalId(
+          chart.index
+        )}" role='tooltip'></div>`;
+      };
+      chart.update({ tooltip: { formatter } });
+    }, [chart]);
+    _react.useEffect.call(void 0, () => {
+      if (_optionalChain([context, 'optionalAccess', _3 => _3.series, 'optionalAccess', _4 => _4.chart, 'optionalAccess', _5 => _5.tooltip])) {
+        const tooltip = context.series.chart.tooltip;
+        const textElement = tooltip.label.text.element;
+        tooltip.label.box.attr({
+          height: textElement.offsetHeight,
+          width: textElement.offsetWidth
+        });
+        setNode(
+          document.getElementById(generateChartTooltipPortalId(chart.index))
+        );
+      }
+    }, [context, chart.index]);
+    return node && context ? _reactdom.createPortal.call(void 0, renderContent(context), node) : null;
+  }
+);
+
+// src/components/ChartTable/ChartTable.tsx
+
+
+
+var _seedsreacttable = require('@sproutsocial/seeds-react-table');
+
+var StyledSeedsTable = _styledcomponents2.default.call(void 0, _seedsreacttable.Table)`
+  tbody tr:last-child {
+    border-bottom: none;
+  }
+  tr:last-child td,
+  tr:last-child th {
+    padding-bottom: 0;
+  }
+  tr:first-child td,
+  tr:first-child th {
+    padding-top: 0;
+  }
+  tr th {
+    padding-left: 0;
+  }
+  tr td:last-child {
+    padding-right: 0;
+  }
+`;
+var StyledSeedsTableRow = _styledcomponents2.default.call(void 0, _seedsreacttable.Table.TableRow)`
+  ${({ $isAppendedRow, theme: theme6 }) => $isAppendedRow ? `border-top: 2px solid ${theme6.colors.container.border.base}` : ""}
+`;
+var ChartTable = _react.memo.call(void 0, function ChartTable2({
+  rows
+}) {
+  if (!rows || rows.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledSeedsTable, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttable.Table.TableBody, { children: rows.map(({ cells, isAppendedRow }, rowIndex) => {
+    if (!cells || cells.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      StyledSeedsTableRow,
+      {
+        $isAppendedRow: isAppendedRow,
+        children: cells.map(
+          ({ content, align = "left", colSpan = 1 }, cellIndex) => {
+            const uniqueIdentifier = `chart-tooltip-table-cell-${cellIndex}`;
+            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _seedsreacttable.Table.Cell,
+              {
+                id: uniqueIdentifier,
+                scope: cellIndex === 0 ? "row" : void 0,
+                align,
+                colSpan,
+                py: 200,
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text.SmallBodyCopy, { as: "div", children: content })
+              },
+              uniqueIdentifier
+            );
+          }
+        )
+      },
+      `chart-tooltip-table-row-${rowIndex}`
+    );
+  }) }) });
+});
+
+// src/components/ChartTooltip/components/ChartTooltipTable.tsx
+
+
+var ChartTooltipTable = _react.memo.call(void 0, 
+  function ChartTooltipTable2({ rows }) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChartTable, { rows });
+  }
+);
+
+// src/components/ChartTooltip/components/ChartTooltipTitle.tsx
+
+
+
+var ChartTooltipTitle = _react.memo.call(void 0, 
+  function ChartTooltipTitle2({ children }) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text.SmallSubHeadline, { as: "p", children });
+  }
+);
+
+// src/helpers/transformDataToSeries.ts
+var transformDataToSeries = ({
+  data
+}, type) => {
+  const hasCategoricalData = data.some(
+    (series) => series.points.some((point) => typeof point.x === "string")
+  );
+  return data.map((dataItem, dataIndex) => {
+    const points = dataItem.points || [];
+    const dataPoints = points.map((point, pointsIndex) => {
+      let enableMarker = false;
+      const isFirstPoint = pointsIndex === 0;
+      const isLastPoint = pointsIndex === points.length - 1;
+      const previousY = isFirstPoint ? null : points[pointsIndex - 1].y;
+      const nextY = isLastPoint ? null : points[pointsIndex + 1].y;
+      if (isFirstPoint && nextY === null) {
+        enableMarker = true;
+      } else if (isLastPoint && previousY === null) {
+        enableMarker = true;
+      } else if (previousY === null && nextY === null) {
+        enableMarker = true;
+      }
+      return {
+        x: hasCategoricalData ? pointsIndex : point.x,
+        y: point.y,
+        marker: {
+          enabled: enableMarker ? enableMarker : void 0,
+          symbol: enableMarker ? "circle" : void 0
+        },
+        // For categorical data, store the original category name
+        ...hasCategoricalData && { name: point.x }
+      };
+    });
+    return {
+      colorIndex: dataIndex,
+      data: dataPoints,
+      name: dataItem.name,
+      type
+    };
+  });
+};
+
+// src/helpers/transformTimeSeriesTooltipData.ts
+
+var transformTimeSeriesTooltipData = ({
+  context,
+  data
+}) => {
+  return (context.series.chart.series || []).map((series, index) => {
+    const pointIndex = context.point.index;
+    const y = _optionalChain([series, 'optionalAccess', _6 => _6.points, 'optionalAccess', _7 => _7[pointIndex], 'optionalAccess', _8 => _8.y]);
+    return {
+      color: _optionalChain([data, 'access', _9 => _9[index], 'optionalAccess', _10 => _10.styles, 'optionalAccess', _11 => _11.color]) || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index],
+      ..._optionalChain([data, 'access', _12 => _12[index], 'optionalAccess', _13 => _13.icon]) ? { icon: _optionalChain([data, 'access', _14 => _14[index], 'optionalAccess', _15 => _15.icon]) } : {},
+      name: series.name,
+      value: typeof y === "number" ? y : null
+    };
+  });
+};
+
+// src/helpers/yAxisLabelFormatter.ts
+var _seedsreactduration = require('@sproutsocial/seeds-react-duration');
+var _seedsreactnumeral = require('@sproutsocial/seeds-react-numeral');
+var yAxisLabelFormatter = ({
+  numberLocale,
+  textLocale,
+  tickPositions,
+  value,
+  currency = "USD",
+  numberFormat = "decimal"
+}) => {
+  const numberValue = Number(value);
+  if (numberValue === 0) {
+    return _seedsreactnumeral.formatNumeral.call(void 0, {
+      locale: numberLocale,
+      number: numberValue
+    });
+  }
+  if (numberFormat === "duration") {
+    return _seedsreactduration.formatDuration.call(void 0, {
+      display: "narrow",
+      locale: textLocale,
+      milliseconds: numberValue
+    });
+  }
+  const maxValue = tickPositions && tickPositions.length > 0 ? tickPositions[tickPositions.length - 1] : void 0;
+  const abbreviate = typeof maxValue === "number" && maxValue > 9999 ? 1e3 : true;
+  return _seedsreactnumeral.formatNumeral.call(void 0, {
+    abbreviate,
+    currency,
+    format: numberFormat,
+    locale: numberLocale,
+    number: numberValue
+  });
+};
+
+// src/helpers/xAxisLabelFormatter.ts
+var getDatePartsInTimezone = (date, timezone) => {
+  const formatter = new Intl.DateTimeFormat("en-US", {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    timeZone: timezone
+  });
+  const parts = formatter.formatToParts(date);
+  return {
+    day: parseInt(_nullishCoalesce(_optionalChain([parts, 'access', _16 => _16.find, 'call', _17 => _17((p) => p.type === "day"), 'optionalAccess', _18 => _18.value]), () => ( "0")), 10),
+    month: parseInt(_nullishCoalesce(_optionalChain([parts, 'access', _19 => _19.find, 'call', _20 => _20((p) => p.type === "month"), 'optionalAccess', _21 => _21.value]), () => ( "0")), 10),
+    year: parseInt(_nullishCoalesce(_optionalChain([parts, 'access', _22 => _22.find, 'call', _23 => _23((p) => p.type === "year"), 'optionalAccess', _24 => _24.value]), () => ( "0")), 10)
+  };
+};
+var xAxisLabelFormatter = ({
+  textLocale,
+  tickPositions = [],
+  unitName,
+  value,
+  // optional
+  timeFormat = "12",
+  timezone = "UTC"
+}) => {
+  if (typeof value === "string") {
+    return `<span>${value}</span>`;
+  }
+  const tickIndex = tickPositions.indexOf(value);
+  const isFirst = tickIndex === 0;
+  const previousValue = tickPositions[tickIndex - 1];
+  const valueDate = new Date(value);
+  const valueParts = getDatePartsInTimezone(valueDate, timezone);
+  const previousValueDate = previousValue ? new Date(previousValue) : void 0;
+  const previousValueParts = previousValueDate ? getDatePartsInTimezone(previousValueDate, timezone) : void 0;
+  let firstPartOptions = {};
+  let secondPartOptions = {};
+  switch (unitName) {
+    case "hour":
+      firstPartOptions = timeFormat === "24" ? { hour: "numeric", minute: "numeric", hour12: false } : { hour: "numeric" };
+      if (isFirst || valueParts.day !== _optionalChain([previousValueParts, 'optionalAccess', _25 => _25.day])) {
+        secondPartOptions = { day: "numeric", month: "short" };
+      }
+      break;
+    case "day":
+    case "week":
+      firstPartOptions = { day: "numeric" };
+      if (isFirst || valueParts.month !== _optionalChain([previousValueParts, 'optionalAccess', _26 => _26.month])) {
+        secondPartOptions = { month: "short" };
+      }
+      break;
+    case "month":
+      firstPartOptions = { month: "short" };
+      if (isFirst || valueParts.year !== _optionalChain([previousValueParts, 'optionalAccess', _27 => _27.year])) {
+        secondPartOptions = { year: "numeric" };
+      }
+      break;
+    case "year":
+      firstPartOptions = { year: "numeric" };
+      break;
+    default:
+      firstPartOptions = {};
+      break;
+  }
+  const firstPart = new Intl.DateTimeFormat(textLocale, {
+    ...firstPartOptions,
+    timeZone: timezone
+  }).format(valueDate);
+  const secondPart = Object.keys(secondPartOptions).length > 0 ? new Intl.DateTimeFormat(textLocale, {
+    ...secondPartOptions,
+    timeZone: timezone
+  }).format(valueDate) : void 0;
+  return `<span>${firstPart}</span>${secondPart ? `<span>${secondPart}</span>` : ""}`;
+};
+
+// src/helpers/isHourlyTimeData.ts
+function isHourlyTimeData(data) {
+  if (!data.length) return false;
+  const xVals = data.flatMap((series) => series.points.map((p) => p.x));
+  if (!xVals.length) return false;
+  if (xVals.some((x) => typeof x === "string")) return false;
+  const dates = xVals.map((x) => {
+    const d = new Date(x);
+    return `${d.getUTCFullYear()}-${d.getUTCMonth()}-${d.getUTCDate()}`;
+  });
+  const uniqueDates = new Set(dates);
+  if (uniqueDates.size !== 1) return false;
+  return xVals.every((x) => {
+    const d = new Date(x);
+    const hour = d.getUTCHours();
+    const minutes = d.getUTCMinutes();
+    const seconds = d.getUTCSeconds();
+    return hour >= 0 && hour <= 23 && minutes === 0 && seconds === 0;
+  });
+}
+
+// src/helpers/isCategoricalHourData.ts
+function isCategoricalHourData(data) {
+  if (!data.length) return false;
+  const xVals = data.flatMap((series) => series.points.map((p) => p.x));
+  if (!xVals.length) return false;
+  if (xVals.some((x) => typeof x !== "string")) return false;
+  const hour12Pattern = /^\d{1,2} (AM|PM)$/;
+  const hour24Pattern = /^([01]?\d|2[0-3]):([0-5]\d)$/;
+  const stringValues = xVals;
+  const allMatch12Hour = stringValues.every((x) => hour12Pattern.test(x));
+  const allMatch24Hour = stringValues.every((x) => hour24Pattern.test(x));
+  return allMatch12Hour || allMatch24Hour;
+}
+
+// src/helpers/getStorybookRandomColor.ts
+var getStorybookRandomColor = () => {
+  const letters = "0123456789ABCDEF";
+  let color = "#";
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+};
+
+// src/helpers/getStorybookCategoricalData.ts
+var getStorybookCategoricalData = ({
+  showNulls,
+  showNegativeValues,
+  numberOfSeries,
+  yAxisMax,
+  showCustomColors,
+  showDashedLines,
+  categoryType
+}) => {
+  const categoryOptions = {
+    hours: [
+      "12 AM",
+      "1 AM",
+      "2 AM",
+      "3 AM",
+      "4 AM",
+      "5 AM",
+      "6 AM",
+      "7 AM",
+      "8 AM",
+      "9 AM",
+      "10 AM",
+      "11 AM",
+      "12 PM",
+      "1 PM",
+      "2 PM",
+      "3 PM",
+      "4 PM",
+      "5 PM",
+      "6 PM",
+      "7 PM",
+      "8 PM",
+      "9 PM",
+      "10 PM",
+      "11 PM"
+    ],
+    hours24: [
+      "00:00",
+      "01:00",
+      "02:00",
+      "03:00",
+      "04:00",
+      "05:00",
+      "06:00",
+      "07:00",
+      "08:00",
+      "09:00",
+      "10:00",
+      "11:00",
+      "12:00",
+      "13:00",
+      "14:00",
+      "15:00",
+      "16:00",
+      "17:00",
+      "18:00",
+      "19:00",
+      "20:00",
+      "21:00",
+      "22:00",
+      "23:00"
+    ],
+    days: [
+      "Monday",
+      "Tuesday",
+      "Wednesday",
+      "Thursday",
+      "Friday",
+      "Saturday",
+      "Sunday"
+    ],
+    months: [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ],
+    custom: [
+      "Category A",
+      "Category B",
+      "Category C",
+      "Category D",
+      "Category E"
+    ]
+  };
+  const categories = categoryOptions[categoryType];
+  const numberOfPoints = categories.length;
+  return [...Array(numberOfSeries).keys()].map((seriesIndex) => {
+    let nullsArray = [];
+    if (showNulls) {
+      const nullsArrayLength = Math.floor(numberOfPoints / 5);
+      nullsArray = [...Array(nullsArrayLength)].map(
+        () => Math.floor(Math.random() * numberOfPoints)
+      );
+    }
+    return {
+      points: categories.map((category, pointIndex) => {
+        const showNull = nullsArray && nullsArray.length > 0 ? nullsArray.includes(pointIndex) : false;
+        const randomValue = Math.random();
+        const positiveOrNegativeYAxisMax = showNegativeValues ? randomValue < 0.5 ? -yAxisMax : yAxisMax : yAxisMax;
+        return {
+          x: category,
+          y: showNull ? null : Math.floor(randomValue * positiveOrNegativeYAxisMax)
+        };
+      }),
+      name: `Series ${seriesIndex + 1}`,
+      styles: {
+        color: showCustomColors ? getStorybookRandomColor() : void 0,
+        pattern: showDashedLines ? "dashed" : "solid"
+      }
+    };
+  });
+};
+
+// src/helpers/getStorybookSparseTimelineData.ts
+var getStorybookSparseTimelineData = ({
+  showNulls,
+  showNegativeValues,
+  numberOfSeries,
+  yAxisMax,
+  showCustomColors,
+  showDashedLines,
+  numberOfPoints = 5,
+  timeSpanHours = 24
+}) => {
+  const seriesNames = [
+    "Posts Published",
+    "Comments",
+    "Likes",
+    "Shares",
+    "Clicks",
+    "Views",
+    "Saves",
+    "Reposts",
+    "Mentions",
+    "Reactions"
+  ];
+  const baseDate = /* @__PURE__ */ new Date("2024-01-01T00:00:00Z");
+  const timeSpanMs = timeSpanHours * 60 * 60 * 1e3;
+  return [...Array(numberOfSeries).keys()].map((seriesIndex) => {
+    let nullsArray = [];
+    if (showNulls) {
+      const nullsArrayLength = Math.floor(numberOfPoints / 5);
+      nullsArray = [...Array(nullsArrayLength)].map(
+        () => Math.floor(Math.random() * numberOfPoints)
+      );
+    }
+    const timestamps = [...Array(numberOfPoints)].map(() => {
+      const randomOffset = Math.random() * timeSpanMs;
+      return baseDate.getTime() + randomOffset;
+    }).sort((a, b) => a - b);
+    return {
+      points: timestamps.map((timestamp, pointIndex) => {
+        const showNull = nullsArray && nullsArray.length > 0 ? nullsArray.includes(pointIndex) : false;
+        const randomValue = Math.random();
+        const positiveOrNegativeYAxisMax = showNegativeValues ? randomValue < 0.5 ? -yAxisMax : yAxisMax : yAxisMax;
+        return {
+          x: timestamp,
+          y: showNull ? null : Math.floor(randomValue * positiveOrNegativeYAxisMax)
+        };
+      }),
+      name: seriesNames[seriesIndex] || `Series ${seriesIndex + 1}`,
+      styles: {
+        color: showCustomColors ? getStorybookRandomColor() : void 0,
+        pattern: showDashedLines ? "dashed" : "solid"
+      }
+    };
+  });
+};
+
+// src/constants/chartOptions.ts
+var _lodash = require('lodash'); var _lodash2 = _interopRequireDefault(_lodash);
+var baseChartOptions = {
+  chart: {
+    animation: false,
+    styledMode: true
+  },
+  credits: {
+    enabled: false
+  },
+  exporting: {
+    enabled: false,
+    fallbackToExportServer: false
+  },
+  legend: {
+    enabled: false
+  },
+  title: {
+    text: void 0
+  },
+  tooltip: {
+    hideDelay: 0,
+    outside: true,
+    padding: 0,
+    shape: "rect",
+    shared: true,
+    useHTML: true
+  }
+};
+var TIME_SERIES_CHART_HEIGHT = 275;
+var timeSeriesChartOptions = _lodash2.default.merge({}, baseChartOptions, {
+  annotations: [
+    {
+      draggable: "",
+      labelOptions: {
+        useHTML: true,
+        padding: 0
+        // removes "left" property padding created by highcharts so that label is centered
+      }
+    }
+  ],
+  chart: {
+    // events.click is set at the component level because of the optional onClick prop
+    height: TIME_SERIES_CHART_HEIGHT,
+    spacing: [5, 1, 0, 2]
+  },
+  plotOptions: {
+    series: {
+      animation: false,
+      clip: false,
+      marker: {
+        enabled: false,
+        states: {
+          hover: {
+            enabled: false
+          }
+        }
+      }
+    }
+  },
+  xAxis: {
+    crosshair: {
+      zIndex: 3
+    },
+    minPadding: 0,
+    // must be handled dynamically instead of css
+    maxPadding: 0,
+    // must be handled dynamically instead of css
+    type: "datetime",
+    labels: {
+      useHTML: true
+      // formatter is set at the component level because of the required text locale prop
+    }
+  },
+  yAxis: {
+    labels: {
+      useHTML: true
+      // formatter is set at the component level because of the optional yAxisLabelFormatter prop
+    },
+    softMax: 0,
+    softMin: 0,
+    title: {
+      text: void 0
+    },
+    plotLines: [
+      /* Adds a custom plotLine at y=0 to represent the chart baseline.
+        This approach allows full control over the line's appearance (e.g., color, z-index),
+        unlike relying on the default xAxis line, which always renders at the bottom of the chart
+        even when y=0 appears elsewhere (e.g., with negative values).
+      */
+      {
+        className: "y-axis-zero-line",
+        value: 0,
+        zIndex: 3
+        // ensures the line appears over the default y=0 line, which we can't seleect as specifically
+      }
+    ]
+  }
+});
+var lineChartOptions = _lodash2.default.merge({}, timeSeriesChartOptions, {
+  // plotOptions.spline.events.click is set at the component level because of the optional onClick prop
+});
+var areaChartOptions = _lodash2.default.merge({}, timeSeriesChartOptions, {
+  plotOptions: {
+    areaspline: {
+      // events.click is set at the component level because of the optional onClick prop
+      stacking: "normal"
+    }
+  }
+});
+var columnChartOptions = _lodash2.default.merge({}, timeSeriesChartOptions, {
+  plotOptions: {
+    column: {
+      stacking: "normal",
+      pointPadding: 0.25,
+      groupPadding: 0.25,
+      borderRadius: 4
+    }
+  },
+  xAxis: {
+    crosshair: false
+  },
+  yAxis: {
+    plotLines: [
+      {
+        // For stacked column charts with visible borders (e.g., white for contrast),
+        // we raise the zIndex of the y=0 plotLine to ensure it remains visible
+        // and isn't visually covered by overlapping column borders.
+        zIndex: 5
+      }
+    ]
+  }
+});
+var VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT = 10;
+var DONUT_CHART_HALO_SIZE = 10;
+var DONUT_CHART_HEIGHT = 250 + DONUT_CHART_HALO_SIZE * 2;
+var DONUT_CHART_WIDTH = DONUT_CHART_HEIGHT;
+var donutChartOptions = _lodash2.default.merge({}, baseChartOptions, {
+  chart: {
+    height: DONUT_CHART_HEIGHT,
+    spacing: [0, 0, 0, 0]
+  },
+  plotOptions: {
+    pie: {
+      animation: false,
+      borderRadius: 0,
+      // must be handled here instead of css because of path rendering
+      dataLabels: {
+        enabled: false
+      },
+      innerSize: "50%"
+    }
+  }
+});
+
+// src/styles/chartStyles.ts
+
+
+require('highcharts/css/highcharts.css');
+var GlobalChartStyleOverrides = _styledcomponents.createGlobalStyle`
+  // USAGE NOTE:
+  // Put general styles in baseChartStyles instead when possible to avoid excessive global styling.
+  // This global component is only for styles that can't override highcharts defaults when scoped.
+
+  .highcharts-tooltip-container {
+    z-index: 7 !important;
+  }
+  .highcharts-tooltip-box {
+    fill: transparent !important;
+  }
+`;
+var baseChartStyles = _styledcomponents.css`
+  --highcharts-background-color: ${({ theme: theme6 }) => theme6.colors.container.background.base};
+
+  // set color variables and map to each series
+  ${({ $colors }) => $colors.map((color, index) => {
+  const chartColor = color || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index];
+  return `
+				// map colors to custom assigned colors or fallback to default data viz color rotation
+				--highcharts-color-${index}: ${chartColor};
+
+				// highcharts already accounts for 10 series, but if we have more, we need to add them
+				.highcharts-color-${index} {
+					color: var(--highcharts-color-${index});
+					stroke: var(--highcharts-color-${index});
+					fill: var(--highcharts-color-${index});
+				}`;
+}).join("\n")}
+
+  // set overall chart background color
+  .highcharts-background {
+    fill: ${({ theme: theme6 }) => theme6.colors.container.background.base};
+  }
+
+  g.highcharts-annotation-label {
+    display: none;
+  }
+
+  div.highcharts-annotation-label {
+    top: 0 !important;
+    transform: translateX(-50%); // centers the label on the targeted axis point
+    pointer-events: none; // prevents tooltip hover from being interrupted by this element since it renders after on the dom
+  }
+`;
+var timeSeriesChartStyles = _styledcomponents.css`
+  ${baseChartStyles}
+
+  // vertical crosshair styles
+	.highcharts-crosshair {
+    stroke: ${({ theme: theme6 }) => theme6.colors.container.border.decorative.neutral};
+    stroke-width: 1;
+  }
+
+  // axis and gridline styles
+  .highcharts-grid-line {
+    stroke: ${({ theme: theme6 }) => theme6.colors.container.border.base};
+  }
+
+  .highcharts-axis-line {
+    stroke: ${({ theme: theme6 }) => theme6.colors.container.border.base};
+  }
+
+  .highcharts-tick {
+    stroke: none;
+  }
+  .highcharts-xaxis-labels,
+  .highcharts-yaxis-labels {
+    // v1 HTML labels (useHTML: true). v2 SVG label styles live in
+    // charts/shared/styles.ts (axisLabelV2Styles) — don't add v2 rules here.
+    > span {
+      font-family: ${({ theme: theme6 }) => theme6.fontFamily};
+      ${({ theme: theme6 }) => theme6.typography[100]};
+      font-weight: ${({ theme: theme6 }) => theme6.fontWeights.normal};
+      color: ${({ theme: theme6 }) => theme6.colors.text.subtext};
+    }
+  }
+  .highcharts-xaxis-labels {
+    // v1 HTML stacked labels (useHTML: true). v2 SVG stacked-label styles live
+    // in charts/shared/styles.ts (axisLabelV2Styles).
+    > span {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      > span:nth-of-type(2) {
+        font-weight: ${({ theme: theme6 }) => theme6.fontWeights.semibold};
+      }
+    }
+  }
+
+  // we don't want to drop the opacity when another item is hovered
+  .highcharts-series-inactive {
+    opacity: 1;
+  }
+
+  // apply cursor pointer when click functionality is turned on
+  ${({ $hasOnClick }) => $hasOnClick && `
+ 			.highcharts-series,
+ 			.highcharts-point {
+ 				cursor: pointer;
+ 			}
+ 			.highcharts-plot-background,
+ 			.highcharts-crosshair,
+ 			.highcharts-grid-line {
+ 				fill: transparent;
+ 				cursor: pointer;
+ 		}`}
+
+  path.highcharts-plot-line.y-axis-zero-line {
+    stroke: ${({ theme: theme6 }) => theme6.colors.container.border.decorative.neutral};
+  }
+`;
+var lineChartStyles = _styledcomponents.css`
+  ${timeSeriesChartStyles}
+
+  // set the line stroke
+	.highcharts-graph {
+    stroke-width: 3;
+  }
+
+  // dashed line styles
+  ${({ $patterns }) => $patterns.map((pattern, index) => {
+  return pattern === "dashed" ? `
+ 					// highcharts already accounts for 10 series, but if we have more, we need to add them
+ 					.highcharts-series-${index} {
+ 						stroke-dasharray: 2, 8;
+ 					}` : "";
+})}
+`;
+var areaChartStyles = _styledcomponents.css`
+  ${timeSeriesChartStyles}
+
+  // don't need to show a stroke for the line part of each area
+	.highcharts-graph {
+    stroke-width: 0;
+  }
+
+  // fill areas to full opacity
+  .highcharts-area {
+    fill-opacity: 1;
+  }
+`;
+var donutChartStyles = _styledcomponents.css`
+  ${baseChartStyles}
+
+  // remove 250ms fade in/out when hovering over different donut chart slices
+	.highcharts-point {
+    transition: opacity 0s;
+  }
+
+  // remove stroke on donut slices
+  .highcharts-pie-series .highcharts-point {
+    stroke: none;
+  }
+
+  // don't reduce opacity when hovering
+  .highcharts-point-hover {
+    fill-opacity: none;
+  }
+
+  // apply cursor pointer when click functionality is turned on
+  ${({ $hasOnClick }) => $hasOnClick && `
+ 			.highcharts-series,
+ 			.highcharts-point {
+ 				cursor: pointer;
+ 			}
+ 			.highcharts-plot-background,
+ 			.highcharts-crosshair,
+ 			.highcharts-grid-line {
+ 				fill: transparent;
+ 				cursor: pointer;
+ 		}`}
+`;
+
+// src/components/ChartLegend/components/ChartLegendLabelContentWithIcon.tsx
+
+
+
+var ChartLegendLabelContentWithIcon = _react.memo.call(void 0, 
+  function ChartLegendLabelContentWithIcon2({
+    children,
+    icon
+  }) {
+    return icon ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 200, children: [
+      icon,
+      children
+    ] }) : children;
+  }
+);
+
+// src/components/VerticalBarChart/styles.ts
+
+var verticalBarChartStyles = _styledcomponents.css`
+  ${timeSeriesChartStyles}
+
+  /*
+    When the chart container is hovered, reduce the opacity of all columns.
+    Then, for the column that is being hovered, restore its opacity.
+    This gives the effect of fading out the non-hovered columns.
+  */
+  .highcharts-container:hover .highcharts-point {
+    fill-opacity: 0.3;
+  }
+
+  .highcharts-point.column-hover {
+    fill-opacity: 1 !important;
+  }
+`;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.ColorBox = ColorBox; exports.DatavizColorBox = DatavizColorBox; exports.getDatavizColor = getDatavizColor; exports.getDatavizOpacity = getDatavizOpacity; exports.getDatavizColorWithAlpha = getDatavizColorWithAlpha; exports.NetworkColorBox = NetworkColorBox; exports.ChartLegendLabel = ChartLegendLabel; exports.ChartLegend = ChartLegend; exports.ChartLegendLabelContentWithIcon = ChartLegendLabelContentWithIcon; exports.ChartTooltip = ChartTooltip; exports.ChartTooltipFooter = ChartTooltipFooter; exports.ChartTooltipHeader = ChartTooltipHeader; exports.generateChartTooltipPortalId = generateChartTooltipPortalId; exports.ChartTooltipPortal = ChartTooltipPortal; exports.ChartTable = ChartTable; exports.ChartTooltipTable = ChartTooltipTable; exports.ChartTooltipTitle = ChartTooltipTitle; exports.transformDataToSeries = transformDataToSeries; exports.transformTimeSeriesTooltipData = transformTimeSeriesTooltipData; exports.yAxisLabelFormatter = yAxisLabelFormatter; exports.xAxisLabelFormatter = xAxisLabelFormatter; exports.isHourlyTimeData = isHourlyTimeData; exports.isCategoricalHourData = isCategoricalHourData; exports.getStorybookCategoricalData = getStorybookCategoricalData; exports.getStorybookSparseTimelineData = getStorybookSparseTimelineData; exports.baseChartOptions = baseChartOptions; exports.TIME_SERIES_CHART_HEIGHT = TIME_SERIES_CHART_HEIGHT; exports.timeSeriesChartOptions = timeSeriesChartOptions; exports.lineChartOptions = lineChartOptions; exports.areaChartOptions = areaChartOptions; exports.columnChartOptions = columnChartOptions; exports.VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT = VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT; exports.DONUT_CHART_HALO_SIZE = DONUT_CHART_HALO_SIZE; exports.DONUT_CHART_HEIGHT = DONUT_CHART_HEIGHT; exports.DONUT_CHART_WIDTH = DONUT_CHART_WIDTH; exports.donutChartOptions = donutChartOptions; exports.GlobalChartStyleOverrides = GlobalChartStyleOverrides; exports.baseChartStyles = baseChartStyles; exports.timeSeriesChartStyles = timeSeriesChartStyles; exports.lineChartStyles = lineChartStyles; exports.areaChartStyles = areaChartStyles; exports.donutChartStyles = donutChartStyles; exports.verticalBarChartStyles = verticalBarChartStyles;
+//# sourceMappingURL=chunk-VFBZ7FNK.js.map