@sproutsocial/seeds-react-data-viz 0.2.2 → 0.3.0

package/dist/index.js

@@ -72,10 +72,11 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/AreaChart/AreaChart.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_highcharts3 = __toESM(require("highcharts"));
 var import_highcharts_react_official = require("highcharts-react-official");
 var import_accessibility = __toESM(require("highcharts/modules/accessibility"));
+var import_annotations = __toESM(require("highcharts/modules/annotations"));
 var import_styled_components8 = __toESM(require("styled-components"));
 var import_seeds_react_box9 = require("@sproutsocial/seeds-react-box");
 
@@ -478,7 +479,8 @@ var AreaChartTooltip = (0, import_react13.memo)(
     currency = "USD",
     numberFormat = "decimal",
     onClick,
-    tooltipClickLabel
+    tooltipClickLabel,
+    xAnnotationDetails
   }) {
     const rows = data.map(({ color, icon, name, value }) => {
       return {
@@ -533,6 +535,7 @@ var AreaChartTooltip = (0, import_react13.memo)(
       }
     ] : [];
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ChartTooltip, { children: [
+      xAnnotationDetails ? xAnnotationDetails() : void 0,
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         ChartTooltipTable,
@@ -548,6 +551,65 @@ var AreaChartTooltip = (0, import_react13.memo)(
   }
 );
 
+// src/components/ChartXAnnotationMarker/components/ChartXAnnotationMarkerPortal.tsx
+var import_react14 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_highcharts = require("highcharts");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ChartXAnnotationMarkerPortal = (0, import_react14.memo)(
+  function ChartXAnnotationMarkerPortal2({
+    xAnnotations,
+    annotationContext
+  }) {
+    const annotationContainers = (0, import_react14.useRef)({});
+    const [renderCount, setRenderCount] = (0, import_react14.useState)(0);
+    const forceRender = () => setRenderCount((prev) => prev + 1);
+    (0, import_react14.useEffect)(() => {
+      if (annotationContext.labels) {
+        const newContainers = {};
+        const existingAnnotationContainers = document.querySelectorAll(
+          "div[data-annotation-marker='true']"
+        );
+        existingAnnotationContainers.forEach(
+          (annotation) => annotation.setAttribute("data-annotation-marker", "false")
+        );
+        annotationContext.labels.forEach((label) => {
+          const labelElement = label.graphic?.div;
+          if (labelElement) {
+            labelElement.querySelectorAll("div[data-annotation-marker]").forEach((component) => component.remove());
+            const annotationDiv = document.createElement("div");
+            annotationDiv.setAttribute("data-annotation-marker", "true");
+            labelElement.appendChild(annotationDiv);
+            const xValue = label.options?.point?.x;
+            newContainers[xValue] = annotationDiv;
+          }
+        });
+        annotationContainers.current = newContainers;
+        forceRender();
+        requestAnimationFrame(() => {
+          document.querySelectorAll("div.highcharts-annotation").forEach((annotationDiv) => {
+            const reactAnnotations = annotationDiv.querySelectorAll(
+              "div[data-annotation-marker]"
+            );
+            const hasActiveAnnotations = Array.from(reactAnnotations).some(
+              (div) => div.getAttribute("data-annotation-marker") === "true"
+            );
+            if (!hasActiveAnnotations) {
+              annotationDiv.remove();
+            }
+          });
+        });
+      }
+    }, [annotationContext.labels, xAnnotations]);
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: Object.entries(annotationContainers.current).map(
+      ([xValue, container]) => {
+        const annotationComponent = xAnnotations?.[Number(xValue)]?.marker;
+        return annotationComponent ? (0, import_react_dom2.createPortal)(annotationComponent(), container) : null;
+      }
+    ) });
+  }
+);
+
 // src/helpers/transformDataToSeries.ts
 var transformDataToSeries = ({ data }, type) => {
   return data.map((dataItem, dataIndex) => {
@@ -692,8 +754,7 @@ var yAxisLabelFormatter = ({
 };
 
 // src/hooks/useTimeSeriesChartOptions.ts
-var import_react14 = require("react");
-var import_highcharts = require("highcharts");
+var import_react15 = require("react");
 
 // src/constants/chartOptions.ts
 var import_lodash = __toESM(require("lodash"));
@@ -726,6 +787,16 @@ var baseChartOptions = {
 };
 var TIME_SERIES_CHART_HEIGHT = 275;
 var timeSeriesChartOptions = import_lodash.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,
@@ -734,6 +805,7 @@ var timeSeriesChartOptions = import_lodash.default.merge({}, baseChartOptions, {
   plotOptions: {
     series: {
       animation: false,
+      clip: false,
       marker: {
         enabled: false,
         states: {
@@ -803,7 +875,9 @@ var donutChartOptions = import_lodash.default.merge({}, baseChartOptions, {
 });
 
 // src/hooks/useTimeSeriesChartOptions.ts
+var import_lodash2 = require("lodash");
 var useTimeSeriesChartOptions = ({
+  xAnnotations,
   data,
   numberLocale,
   seriesType,
@@ -814,15 +888,41 @@ var useTimeSeriesChartOptions = ({
   onClick,
   timeFormat = "12"
 }) => {
-  const [options, setOptions] = (0, import_react14.useState)(
-    seriesType === "areaspline" ? areaChartOptions : lineChartOptions
-  );
-  const [chart, setChart] = (0, import_react14.useState)(null);
-  const callback = (0, import_react14.useCallback)((chartInstance) => {
+  const [chart, setChart] = (0, import_react15.useState)(null);
+  const callback = (0, import_react15.useCallback)((chartInstance) => {
     setChart(chartInstance);
   }, []);
-  (0, import_react14.useEffect)(() => {
-    setOptions({
+  function attachTooltipEventListeners(series, tooltipId) {
+    const handleFocus = (point) => point.series.chart.tooltip.refresh(point);
+    const handleBlur = (point) => point.series.chart.tooltip.hide(0);
+    series.flatMap((item) => item.data).forEach((point) => {
+      const pointElement = point?.graphic?.element;
+      if (pointElement) {
+        pointElement.setAttribute("aria-describedby", tooltipId);
+        pointElement.addEventListener("focus", () => handleFocus(point));
+        pointElement.addEventListener("blur", () => handleBlur(point));
+      }
+    });
+  }
+  const formattedXAnnotations = (annotations) => {
+    if (annotations) {
+      return Object.entries(annotations).map(([x]) => ({
+        point: {
+          x: Number(x),
+          // Convert key (which is a string) to a number
+          y: 0,
+          xAxis: 0,
+          yAxis: 0
+        },
+        text: " "
+        // space is necessary because empty string reverts to showing default label
+      }));
+    }
+  };
+  const chartMarginTop = xAnnotations ? 24 : null;
+  const baseChartOptions2 = seriesType === "areaspline" ? areaChartOptions : lineChartOptions;
+  const options = (0, import_react15.useMemo)(() => {
+    return (0, import_lodash2.merge)({}, baseChartOptions2, {
       accessibility: {
         point: {
           descriptionFormatter: function() {
@@ -830,24 +930,20 @@ var useTimeSeriesChartOptions = ({
           }
         }
       },
+      annotations: [
+        {
+          labels: xAnnotations ? formattedXAnnotations(xAnnotations) : void 0
+        }
+      ],
       chart: {
+        marginTop: chartMarginTop,
         events: {
           click: onClick ? function() {
             return onClick({ x: this?.hoverPoint?.x });
           } : void 0,
-          render: function() {
-            const allPoints = this.series.flatMap((series) => series.data);
+          load: function() {
             const tooltipId = generateChartTooltipPortalId(this.index);
-            allPoints.forEach((point) => {
-              const pointElement = point?.graphic?.element;
-              pointElement?.setAttribute("aria-describedby", tooltipId);
-              pointElement?.addEventListener("focus", () => {
-                point.series.chart.tooltip.refresh(point);
-              });
-              pointElement?.addEventListener("blur", () => {
-                point.series.chart.tooltip.hide(0);
-              });
-            });
+            attachTooltipEventListeners(this.series, tooltipId);
           }
         }
       },
@@ -900,6 +996,7 @@ var useTimeSeriesChartOptions = ({
       }
     });
   }, [
+    baseChartOptions2,
     currency,
     data,
     numberFormat,
@@ -908,6 +1005,7 @@ var useTimeSeriesChartOptions = ({
     seriesType,
     textLocale,
     timeFormat,
+    xAnnotations,
     yAxisLabelFormatter2
   ]);
   return { options, chart, callback };
@@ -946,9 +1044,19 @@ var baseChartStyles = import_styled_components7.css`
 }).join("\n")}
 
   // set overall chart background color
-	.highcharts-background {
+  .highcharts-background {
     fill: ${({ theme: theme14 }) => theme14.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 = import_styled_components7.css`
   ${baseChartStyles}
@@ -1058,16 +1166,17 @@ var donutChartStyles = import_styled_components7.css`
 
 // src/components/AreaChart/AreaChart.tsx
 var import_seeds_react_theme8 = require("@sproutsocial/seeds-react-theme");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 (0, import_accessibility.default)(import_highcharts3.default);
+(0, import_annotations.default)(import_highcharts3.default);
 var StyledBox3 = (0, import_styled_components8.default)(import_seeds_react_box9.Box)`
   ${areaChartStyles}
 `;
-var AreaChart = (0, import_react15.memo)(function AreaChart2(props) {
+var AreaChart = (0, import_react16.memo)(function AreaChart2(props) {
   const { data } = props;
-  return data.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AreaChartWithData, { ...props });
+  return data.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AreaChartWithData, { ...props });
 });
-var AreaChartWithData = (0, import_react15.memo)(function AreaChartWithData2({
+var AreaChartWithData = (0, import_react16.memo)(function AreaChartWithData2({
   data,
   invalidNumberLabel,
   numberLocale = "en-us",
@@ -1081,7 +1190,8 @@ var AreaChartWithData = (0, import_react15.memo)(function AreaChartWithData2({
   yAxisLabelFormatter: yAxisLabelFormatter2,
   onClick,
   tooltipClickLabel,
-  timeFormat = "12"
+  timeFormat = "12",
+  xAnnotations
 }) {
   const { options, chart, callback } = useTimeSeriesChartOptions({
     currency,
@@ -1092,21 +1202,22 @@ var AreaChartWithData = (0, import_react15.memo)(function AreaChartWithData2({
     textLocale,
     yAxisLabelFormatter: yAxisLabelFormatter2,
     onClick,
-    timeFormat
+    timeFormat,
+    xAnnotations
   });
   const colors = data.map(
     (series, index) => series.styles?.color ?? import_seeds_react_theme8.theme.colors.DATAVIZ_COLORS_LIST[index]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(GlobalChartStyleOverrides, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GlobalChartStyleOverrides, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       StyledBox3,
       {
         $colors: colors,
         $hasOnClick: Boolean(onClick),
         bg: "container.background.base",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             import_highcharts_react_official.HighchartsReact,
             {
               highcharts: import_highcharts3.default,
@@ -1114,7 +1225,14 @@ var AreaChartWithData = (0, import_react15.memo)(function AreaChartWithData2({
               callback
             }
           ),
-          chart ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          chart && chart.annotations?.length ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            ChartXAnnotationMarkerPortal,
+            {
+              xAnnotations,
+              annotationContext: chart.annotations?.[0]
+            }
+          ) : null,
+          chart ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             ChartTooltipPortal,
             {
               chart,
@@ -1125,7 +1243,8 @@ var AreaChartWithData = (0, import_react15.memo)(function AreaChartWithData2({
                 });
                 const x = context.x;
                 const total = context.total;
-                return tooltip ? tooltip({ data: tooltipData, total, x }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                const xAnnotationDetails = xAnnotations?.[x]?.details;
+                return tooltip ? tooltip({ data: tooltipData, total, x }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   AreaChartTooltip,
                   {
                     currency,
@@ -1139,13 +1258,14 @@ var AreaChartWithData = (0, import_react15.memo)(function AreaChartWithData2({
                     total,
                     x,
                     onClick,
-                    tooltipClickLabel
+                    tooltipClickLabel,
+                    xAnnotationDetails
                   }
                 );
               }
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_seeds_react_box9.Box, { mt: 350, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AreaChartLegend, { data }) })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_seeds_react_box9.Box, { mt: 350, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AreaChartLegend, { data }) })
         ]
       }
     )
@@ -1153,7 +1273,7 @@ var AreaChartWithData = (0, import_react15.memo)(function AreaChartWithData2({
 });
 
 // src/components/DonutChart/DonutChart.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_highcharts4 = __toESM(require("highcharts"));
 var import_highcharts_react_official2 = require("highcharts-react-official");
 var import_accessibility2 = __toESM(require("highcharts/modules/accessibility"));
@@ -1161,31 +1281,31 @@ var import_styled_components9 = __toESM(require("styled-components"));
 var import_seeds_react_box11 = require("@sproutsocial/seeds-react-box");
 
 // src/components/DonutChart/components/DonutChartLegend.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_seeds_react_theme9 = require("@sproutsocial/seeds-react-theme");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var getDonutChartLegendLabels = ({
   data
 }) => {
   return data.map((slice, index) => ({
-    content: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChartLegendLabelContentWithIcon, { icon: slice.icon, children: slice.name }),
+    content: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChartLegendLabelContentWithIcon, { icon: slice.icon, children: slice.name }),
     color: slice.styles?.color || import_seeds_react_theme9.theme.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
-var DonutChartLegend = (0, import_react16.memo)(
+var DonutChartLegend = (0, import_react17.memo)(
   function DonutChartLegend2({ data }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChartLegend, { legendLabels: getDonutChartLegendLabels({ data }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChartLegend, { legendLabels: getDonutChartLegendLabels({ data }) });
   }
 );
 
 // src/components/DonutChart/components/DonutChartTooltip.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_seeds_react_box10 = require("@sproutsocial/seeds-react-box");
 var import_seeds_react_duration3 = require("@sproutsocial/seeds-react-duration");
 var import_seeds_react_numeral3 = require("@sproutsocial/seeds-react-numeral");
 var import_seeds_react_text5 = require("@sproutsocial/seeds-react-text");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var DonutChartTooltip = (0, import_react17.memo)(
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var DonutChartTooltip = (0, import_react18.memo)(
   function DonutChartTooltip2({
     color,
     name,
@@ -1201,11 +1321,11 @@ var DonutChartTooltip = (0, import_react17.memo)(
       {
         cells: [
           {
-            content: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChartLegendLabel, { color, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_seeds_react_text5.Text, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChartLegendLabel, { color, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_seeds_react_text5.Text, { "aria-label": `${name}: `, children: name }) }) })
           },
           {
-            content: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_seeds_react_box10.Box, { display: "inline-flex", alignItems: "center", gap: 350, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            content: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_seeds_react_box10.Box, { display: "inline-flex", alignItems: "center", gap: 350, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 import_seeds_react_numeral3.Numeral,
                 {
                   number: percent,
@@ -1214,7 +1334,7 @@ var DonutChartTooltip = (0, import_react17.memo)(
                   locale: numberLocale
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_seeds_react_text5.Text, { fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_seeds_react_duration3.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_seeds_react_text5.Text, { fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_seeds_react_duration3.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 import_seeds_react_numeral3.Numeral,
                 {
                   abbreviate: false,
@@ -1230,7 +1350,7 @@ var DonutChartTooltip = (0, import_react17.memo)(
         ]
       }
     ];
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChartTooltip, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChartTooltipTable, { rows }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChartTooltip, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChartTooltipTable, { rows }) });
   }
 );
 
@@ -1252,16 +1372,16 @@ var transformDonutChartTooltipData = ({
 
 // src/components/DonutChart/DonutChart.tsx
 var import_seeds_react_theme11 = require("@sproutsocial/seeds-react-theme");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 (0, import_accessibility2.default)(import_highcharts4.default);
 var StyledBox4 = (0, import_styled_components9.default)(import_seeds_react_box11.Box)`
   ${donutChartStyles}
 `;
-var DonutChart = (0, import_react18.memo)(function DonutChart2(props) {
+var DonutChart = (0, import_react19.memo)(function DonutChart2(props) {
   const { data } = props;
-  return data.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DonutChartWithData, { ...props });
+  return data.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DonutChartWithData, { ...props });
 });
-var DonutChartWithData = (0, import_react18.memo)(
+var DonutChartWithData = (0, import_react19.memo)(
   function DonutChartWithData2({
     data,
     numberLocale = "en-us",
@@ -1272,12 +1392,12 @@ var DonutChartWithData = (0, import_react18.memo)(
     numberFormat = "decimal",
     tooltip
   }) {
-    const [options, setOptions] = (0, import_react18.useState)(donutChartOptions);
-    const [chart, setChart] = (0, import_react18.useState)(null);
-    const callback = (0, import_react18.useCallback)((chartInstance) => {
+    const [options, setOptions] = (0, import_react19.useState)(donutChartOptions);
+    const [chart, setChart] = (0, import_react19.useState)(null);
+    const callback = (0, import_react19.useCallback)((chartInstance) => {
       setChart(chartInstance);
     }, []);
-    (0, import_react18.useEffect)(() => {
+    (0, import_react19.useEffect)(() => {
       setOptions({
         accessibility: {
           point: {
@@ -1321,10 +1441,10 @@ var DonutChartWithData = (0, import_react18.memo)(
     const colors = data.map(
       (series, index) => series.styles?.color ?? import_seeds_react_theme11.theme.colors.DATAVIZ_COLORS_LIST[index] ?? ""
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(GlobalChartStyleOverrides, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(StyledBox4, { $colors: colors, bg: "container.background.base", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(GlobalChartStyleOverrides, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(StyledBox4, { $colors: colors, bg: "container.background.base", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           import_highcharts_react_official2.HighchartsReact,
           {
             highcharts: import_highcharts4.default,
@@ -1332,13 +1452,13 @@ var DonutChartWithData = (0, import_react18.memo)(
             callback
           }
         ),
-        chart ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        chart ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           ChartTooltipPortal,
           {
             chart,
             renderContent: (context) => {
               const { color, icon, name, percent, value } = transformDonutChartTooltipData({ context, data });
-              return tooltip ? tooltip({ color, icon, name, percent, value }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              return tooltip ? tooltip({ color, icon, name, percent, value }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 DonutChartTooltip,
                 {
                   color,
@@ -1355,21 +1475,21 @@ var DonutChartWithData = (0, import_react18.memo)(
             }
           }
         ) : null,
-        hideLegend ? null : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_seeds_react_box11.Box, { mt: 350, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DonutChartLegend, { data }) })
+        hideLegend ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_seeds_react_box11.Box, { mt: 350, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DonutChartLegend, { data }) })
       ] })
     ] });
   }
 );
 
 // src/components/DonutChart/components/DonutChartLegendTable.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_seeds_react_box12 = require("@sproutsocial/seeds-react-box");
 var import_seeds_react_duration4 = require("@sproutsocial/seeds-react-duration");
 var import_seeds_react_numeral4 = require("@sproutsocial/seeds-react-numeral");
 var import_seeds_react_text6 = require("@sproutsocial/seeds-react-text");
 var import_seeds_react_theme12 = require("@sproutsocial/seeds-react-theme");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var DonutChartLegendTable = (0, import_react19.memo)(
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var DonutChartLegendTable = (0, import_react20.memo)(
   function DonutChartLegendTable2({
     data,
     numberLocale = "en-us",
@@ -1389,11 +1509,11 @@ var DonutChartLegendTable = (0, import_react19.memo)(
       return {
         cells: [
           {
-            content: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChartLegendLabel, { color, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChartLegendLabelContentWithIcon, { icon, children: name }) })
+            content: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChartLegendLabel, { color, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChartLegendLabelContentWithIcon, { icon, children: name }) })
           },
           {
-            content: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_seeds_react_box12.Box, { display: "inline-flex", alignItems: "center", gap: 350, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_seeds_react_text6.Text, { color: "text.body", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            content: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_seeds_react_box12.Box, { display: "inline-flex", alignItems: "center", gap: 350, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_seeds_react_text6.Text, { color: "text.body", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 import_seeds_react_numeral4.Numeral,
                 {
                   abbreviate: false,
@@ -1402,7 +1522,7 @@ var DonutChartLegendTable = (0, import_react19.memo)(
                   number: value / total * 100
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_seeds_react_text6.Text, { color: "text.body", fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_seeds_react_duration4.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_seeds_react_text6.Text, { color: "text.body", fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_seeds_react_duration4.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 import_seeds_react_numeral4.Numeral,
                 {
                   abbreviate: false,
@@ -1422,10 +1542,10 @@ var DonutChartLegendTable = (0, import_react19.memo)(
       {
         cells: [
           {
-            content: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_seeds_react_text6.Text, { fontWeight: "semibold", color: "text.headline", children: totalLabel })
+            content: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_seeds_react_text6.Text, { fontWeight: "semibold", color: "text.headline", children: totalLabel })
           },
           {
-            content: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_seeds_react_text6.Text, { color: "text.body", fontWeight: "bold", children: numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_seeds_react_duration4.Duration, { locale: textLocale, milliseconds: total }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            content: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_seeds_react_text6.Text, { color: "text.body", fontWeight: "bold", children: numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_seeds_react_duration4.Duration, { locale: textLocale, milliseconds: total }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               import_seeds_react_numeral4.Numeral,
               {
                 abbreviate: false,
@@ -1441,7 +1561,7 @@ var DonutChartLegendTable = (0, import_react19.memo)(
         isAppendedRow: true
       }
     ];
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       ChartTable,
       {
         rows: [...rows, ...totalRow]
@@ -1451,40 +1571,41 @@ var DonutChartLegendTable = (0, import_react19.memo)(
 );
 
 // src/components/LineChart/LineChart.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_highcharts5 = __toESM(require("highcharts"));
 var import_highcharts_react_official3 = require("highcharts-react-official");
 var import_accessibility3 = __toESM(require("highcharts/modules/accessibility"));
+var import_annotations2 = __toESM(require("highcharts/modules/annotations"));
 var import_styled_components10 = __toESM(require("styled-components"));
 var import_seeds_react_box14 = require("@sproutsocial/seeds-react-box");
 
 // src/components/LineChart/components/LineChartLegend.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_seeds_react_theme13 = require("@sproutsocial/seeds-react-theme");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var getLineChartLegendLabels = ({
   data
 }) => {
   return data.map((series, index) => ({
-    content: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
+    content: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
     color: series.styles?.color || import_seeds_react_theme13.theme.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
-var LineChartLegend = (0, import_react20.memo)(
+var LineChartLegend = (0, import_react21.memo)(
   function LineChartLegend2({ data }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChartLegend, { legendLabels: getLineChartLegendLabels({ data }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartLegend, { legendLabels: getLineChartLegendLabels({ data }) });
   }
 );
 
 // src/components/LineChart/components/LineChartTooltip.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_seeds_react_box13 = require("@sproutsocial/seeds-react-box");
 var import_seeds_react_duration5 = require("@sproutsocial/seeds-react-duration");
 var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
 var import_seeds_react_numeral5 = require("@sproutsocial/seeds-react-numeral");
 var import_seeds_react_text7 = require("@sproutsocial/seeds-react-text");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var LineChartTooltip = (0, import_react21.memo)(
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var LineChartTooltip = (0, import_react22.memo)(
   function LineChartTooltip2({
     data,
     invalidNumberLabel,
@@ -1496,16 +1617,17 @@ var LineChartTooltip = (0, import_react21.memo)(
     currency = "USD",
     numberFormat = "decimal",
     onClick,
-    tooltipClickLabel
+    tooltipClickLabel,
+    xAnnotationDetails
   }) {
     const rows = data.map(({ color, icon, name, value }) => {
       return {
         cells: [
           {
-            content: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartLegendLabel, { color, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_seeds_react_text7.Text, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChartLegendLabel, { color, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_seeds_react_text7.Text, { "aria-label": `${name}: `, children: name }) }) })
           },
           {
-            content: value === null && invalidNumberLabel ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_seeds_react_text7.Text, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_seeds_react_duration5.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            content: value === null && invalidNumberLabel ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_seeds_react_text7.Text, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_seeds_react_duration5.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               import_seeds_react_numeral5.Numeral,
               {
                 abbreviate: false,
@@ -1520,12 +1642,13 @@ var LineChartTooltip = (0, import_react21.memo)(
         ]
       };
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ChartTooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartTooltipTable, { rows }),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_seeds_react_box13.Box, { display: "flex", alignItems: "center", gap: 300, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_seeds_react_icon2.Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_seeds_react_text7.Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ChartTooltip, { children: [
+      xAnnotationDetails ? xAnnotationDetails() : void 0,
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChartTooltipTable, { rows }),
+      onClick && tooltipClickLabel ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_seeds_react_box13.Box, { display: "flex", alignItems: "center", gap: 300, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_seeds_react_icon2.Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_seeds_react_text7.Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
       ] }) : tooltipClickLabel }) : null
     ] });
   }
@@ -1533,16 +1656,17 @@ var LineChartTooltip = (0, import_react21.memo)(
 
 // src/components/LineChart/LineChart.tsx
 var import_seeds_react_theme14 = require("@sproutsocial/seeds-react-theme");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 (0, import_accessibility3.default)(import_highcharts5.default);
+(0, import_annotations2.default)(import_highcharts5.default);
 var StyledBox5 = (0, import_styled_components10.default)(import_seeds_react_box14.Box)`
   ${lineChartStyles}
 `;
-var LineChart = (0, import_react22.memo)(function LineChart2(props) {
+var LineChart = (0, import_react23.memo)(function LineChart2(props) {
   const { data } = props;
-  return data.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LineChartWithData, { ...props });
+  return data.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LineChartWithData, { ...props });
 });
-var LineChartWithData = (0, import_react22.memo)(function LineChartWithData2({
+var LineChartWithData = (0, import_react23.memo)(function LineChartWithData2({
   data,
   invalidNumberLabel,
   numberLocale = "en-us",
@@ -1555,7 +1679,8 @@ var LineChartWithData = (0, import_react22.memo)(function LineChartWithData2({
   yAxisLabelFormatter: yAxisLabelFormatter2,
   onClick,
   tooltipClickLabel,
-  timeFormat = "12"
+  timeFormat = "12",
+  xAnnotations
 }) {
   const { options, chart, callback } = useTimeSeriesChartOptions({
     currency,
@@ -1566,7 +1691,8 @@ var LineChartWithData = (0, import_react22.memo)(function LineChartWithData2({
     textLocale,
     yAxisLabelFormatter: yAxisLabelFormatter2,
     onClick,
-    timeFormat
+    timeFormat,
+    xAnnotations
   });
   const { colors, patterns } = data.reduce(
     (acc, item, index) => {
@@ -1581,9 +1707,9 @@ var LineChartWithData = (0, import_react22.memo)(function LineChartWithData2({
       patterns: []
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GlobalChartStyleOverrides, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GlobalChartStyleOverrides, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       StyledBox5,
       {
         $colors: colors,
@@ -1591,7 +1717,7 @@ var LineChartWithData = (0, import_react22.memo)(function LineChartWithData2({
         $hasOnClick: Boolean(onClick),
         bg: "container.background.base",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             import_highcharts_react_official3.HighchartsReact,
             {
               highcharts: import_highcharts5.default,
@@ -1599,7 +1725,14 @@ var LineChartWithData = (0, import_react22.memo)(function LineChartWithData2({
               callback
             }
           ),
-          chart ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          chart && chart.annotations?.length ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            ChartXAnnotationMarkerPortal,
+            {
+              xAnnotations,
+              annotationContext: chart.annotations?.[0]
+            }
+          ) : null,
+          chart ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             ChartTooltipPortal,
             {
               chart,
@@ -1609,7 +1742,8 @@ var LineChartWithData = (0, import_react22.memo)(function LineChartWithData2({
                   data
                 });
                 const x = context.x;
-                return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                const xAnnotationDetails = xAnnotations?.[x]?.details;
+                return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   LineChartTooltip,
                   {
                     currency,
@@ -1619,15 +1753,16 @@ var LineChartWithData = (0, import_react22.memo)(function LineChartWithData2({
                     numberLocale,
                     textLocale,
                     tooltipDateFormatter,
-                    x,
                     onClick,
-                    tooltipClickLabel
+                    tooltipClickLabel,
+                    x,
+                    xAnnotationDetails
                   }
                 );
               }
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_seeds_react_box14.Box, { mt: 350, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LineChartLegend, { data }) })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_seeds_react_box14.Box, { mt: 350, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LineChartLegend, { data }) })
         ]
       }
     )