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

package/dist/esm/index.js

@@ -1,8 +1,9 @@
 // src/components/AreaChart/AreaChart.tsx
-import { memo as memo13 } from "react";
+import { memo as memo14 } from "react";
 import Highcharts from "highcharts";
 import { HighchartsReact } from "highcharts-react-official";
 import highchartsAccessibility from "highcharts/modules/accessibility";
+import highchartsAnnotations from "highcharts/modules/annotations";
 import styled5 from "styled-components";
 import { Box as Box9 } from "@sproutsocial/seeds-react-box";
 
@@ -405,7 +406,8 @@ var AreaChartTooltip = memo12(
     currency = "USD",
     numberFormat = "decimal",
     onClick,
-    tooltipClickLabel
+    tooltipClickLabel,
+    xAnnotationDetails
   }) {
     const rows = data.map(({ color, icon, name, value }) => {
       return {
@@ -460,6 +462,7 @@ var AreaChartTooltip = memo12(
       }
     ] : [];
     return /* @__PURE__ */ jsxs3(ChartTooltip, { children: [
+      xAnnotationDetails ? xAnnotationDetails() : void 0,
       /* @__PURE__ */ jsx13(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
       /* @__PURE__ */ jsx13(
         ChartTooltipTable,
@@ -475,6 +478,65 @@ var AreaChartTooltip = memo12(
   }
 );
 
+// src/components/ChartXAnnotationMarker/components/ChartXAnnotationMarkerPortal.tsx
+import { memo as memo13, useEffect as useEffect2, useState as useState2, useRef as useRef2 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import "highcharts";
+import { Fragment, jsx as jsx14 } from "react/jsx-runtime";
+var ChartXAnnotationMarkerPortal = memo13(
+  function ChartXAnnotationMarkerPortal2({
+    xAnnotations,
+    annotationContext
+  }) {
+    const annotationContainers = useRef2({});
+    const [renderCount, setRenderCount] = useState2(0);
+    const forceRender = () => setRenderCount((prev) => prev + 1);
+    useEffect2(() => {
+      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__ */ jsx14(Fragment, { children: Object.entries(annotationContainers.current).map(
+      ([xValue, container]) => {
+        const annotationComponent = xAnnotations?.[Number(xValue)]?.marker;
+        return annotationComponent ? createPortal2(annotationComponent(), container) : null;
+      }
+    ) });
+  }
+);
+
 // src/helpers/transformDataToSeries.ts
 var transformDataToSeries = ({ data }, type) => {
   return data.map((dataItem, dataIndex) => {
@@ -619,8 +681,7 @@ var yAxisLabelFormatter = ({
 };
 
 // src/hooks/useTimeSeriesChartOptions.ts
-import { useState as useState2, useEffect as useEffect2, useCallback } from "react";
-import "highcharts";
+import { useState as useState3, useCallback, useMemo } from "react";
 
 // src/constants/chartOptions.ts
 import _ from "lodash";
@@ -653,6 +714,16 @@ var baseChartOptions = {
 };
 var TIME_SERIES_CHART_HEIGHT = 275;
 var timeSeriesChartOptions = _.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,
@@ -661,6 +732,7 @@ var timeSeriesChartOptions = _.merge({}, baseChartOptions, {
   plotOptions: {
     series: {
       animation: false,
+      clip: false,
       marker: {
         enabled: false,
         states: {
@@ -730,7 +802,9 @@ var donutChartOptions = _.merge({}, baseChartOptions, {
 });
 
 // src/hooks/useTimeSeriesChartOptions.ts
+import { merge } from "lodash";
 var useTimeSeriesChartOptions = ({
+  xAnnotations,
   data,
   numberLocale,
   seriesType,
@@ -741,15 +815,41 @@ var useTimeSeriesChartOptions = ({
   onClick,
   timeFormat = "12"
 }) => {
-  const [options, setOptions] = useState2(
-    seriesType === "areaspline" ? areaChartOptions : lineChartOptions
-  );
-  const [chart, setChart] = useState2(null);
+  const [chart, setChart] = useState3(null);
   const callback = useCallback((chartInstance) => {
     setChart(chartInstance);
   }, []);
-  useEffect2(() => {
-    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 = useMemo(() => {
+    return merge({}, baseChartOptions2, {
       accessibility: {
         point: {
           descriptionFormatter: function() {
@@ -757,24 +857,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);
           }
         }
       },
@@ -827,6 +923,7 @@ var useTimeSeriesChartOptions = ({
       }
     });
   }, [
+    baseChartOptions2,
     currency,
     data,
     numberFormat,
@@ -835,6 +932,7 @@ var useTimeSeriesChartOptions = ({
     seriesType,
     textLocale,
     timeFormat,
+    xAnnotations,
     yAxisLabelFormatter2
   ]);
   return { options, chart, callback };
@@ -873,9 +971,19 @@ var baseChartStyles = css2`
 }).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 = css2`
   ${baseChartStyles}
@@ -985,16 +1093,17 @@ var donutChartStyles = css2`
 
 // src/components/AreaChart/AreaChart.tsx
 import { theme as theme7 } from "@sproutsocial/seeds-react-theme";
-import { Fragment, jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs4 } from "react/jsx-runtime";
 highchartsAccessibility(Highcharts);
+highchartsAnnotations(Highcharts);
 var StyledBox3 = styled5(Box9)`
   ${areaChartStyles}
 `;
-var AreaChart = memo13(function AreaChart2(props) {
+var AreaChart = memo14(function AreaChart2(props) {
   const { data } = props;
-  return data.length === 0 ? null : /* @__PURE__ */ jsx14(AreaChartWithData, { ...props });
+  return data.length === 0 ? null : /* @__PURE__ */ jsx15(AreaChartWithData, { ...props });
 });
-var AreaChartWithData = memo13(function AreaChartWithData2({
+var AreaChartWithData = memo14(function AreaChartWithData2({
   data,
   invalidNumberLabel,
   numberLocale = "en-us",
@@ -1008,7 +1117,8 @@ var AreaChartWithData = memo13(function AreaChartWithData2({
   yAxisLabelFormatter: yAxisLabelFormatter2,
   onClick,
   tooltipClickLabel,
-  timeFormat = "12"
+  timeFormat = "12",
+  xAnnotations
 }) {
   const { options, chart, callback } = useTimeSeriesChartOptions({
     currency,
@@ -1019,13 +1129,14 @@ var AreaChartWithData = memo13(function AreaChartWithData2({
     textLocale,
     yAxisLabelFormatter: yAxisLabelFormatter2,
     onClick,
-    timeFormat
+    timeFormat,
+    xAnnotations
   });
   const colors = data.map(
     (series, index) => series.styles?.color ?? theme7.colors.DATAVIZ_COLORS_LIST[index]
   );
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
-    /* @__PURE__ */ jsx14(GlobalChartStyleOverrides, {}),
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx15(GlobalChartStyleOverrides, {}),
     /* @__PURE__ */ jsxs4(
       StyledBox3,
       {
@@ -1033,7 +1144,7 @@ var AreaChartWithData = memo13(function AreaChartWithData2({
         $hasOnClick: Boolean(onClick),
         bg: "container.background.base",
         children: [
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15(
             HighchartsReact,
             {
               highcharts: Highcharts,
@@ -1041,7 +1152,14 @@ var AreaChartWithData = memo13(function AreaChartWithData2({
               callback
             }
           ),
-          chart ? /* @__PURE__ */ jsx14(
+          chart && chart.annotations?.length ? /* @__PURE__ */ jsx15(
+            ChartXAnnotationMarkerPortal,
+            {
+              xAnnotations,
+              annotationContext: chart.annotations?.[0]
+            }
+          ) : null,
+          chart ? /* @__PURE__ */ jsx15(
             ChartTooltipPortal,
             {
               chart,
@@ -1052,7 +1170,8 @@ var AreaChartWithData = memo13(function AreaChartWithData2({
                 });
                 const x = context.x;
                 const total = context.total;
-                return tooltip ? tooltip({ data: tooltipData, total, x }) : /* @__PURE__ */ jsx14(
+                const xAnnotationDetails = xAnnotations?.[x]?.details;
+                return tooltip ? tooltip({ data: tooltipData, total, x }) : /* @__PURE__ */ jsx15(
                   AreaChartTooltip,
                   {
                     currency,
@@ -1066,13 +1185,14 @@ var AreaChartWithData = memo13(function AreaChartWithData2({
                     total,
                     x,
                     onClick,
-                    tooltipClickLabel
+                    tooltipClickLabel,
+                    xAnnotationDetails
                   }
                 );
               }
             }
           ) : null,
-          /* @__PURE__ */ jsx14(Box9, { mt: 350, children: /* @__PURE__ */ jsx14(AreaChartLegend, { data }) })
+          /* @__PURE__ */ jsx15(Box9, { mt: 350, children: /* @__PURE__ */ jsx15(AreaChartLegend, { data }) })
         ]
       }
     )
@@ -1080,7 +1200,7 @@ var AreaChartWithData = memo13(function AreaChartWithData2({
 });
 
 // src/components/DonutChart/DonutChart.tsx
-import { memo as memo16, useState as useState3, useEffect as useEffect3, useCallback as useCallback2 } from "react";
+import { memo as memo17, useState as useState4, useEffect as useEffect3, useCallback as useCallback2 } from "react";
 import Highcharts2 from "highcharts";
 import { HighchartsReact as HighchartsReact2 } from "highcharts-react-official";
 import highchartsAccessibility2 from "highcharts/modules/accessibility";
@@ -1088,31 +1208,31 @@ import styled6 from "styled-components";
 import { Box as Box11 } from "@sproutsocial/seeds-react-box";
 
 // src/components/DonutChart/components/DonutChartLegend.tsx
-import { memo as memo14 } from "react";
+import { memo as memo15 } from "react";
 import { theme as theme8 } from "@sproutsocial/seeds-react-theme";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var getDonutChartLegendLabels = ({
   data
 }) => {
   return data.map((slice, index) => ({
-    content: /* @__PURE__ */ jsx15(ChartLegendLabelContentWithIcon, { icon: slice.icon, children: slice.name }),
+    content: /* @__PURE__ */ jsx16(ChartLegendLabelContentWithIcon, { icon: slice.icon, children: slice.name }),
     color: slice.styles?.color || theme8.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
-var DonutChartLegend = memo14(
+var DonutChartLegend = memo15(
   function DonutChartLegend2({ data }) {
-    return /* @__PURE__ */ jsx15(ChartLegend, { legendLabels: getDonutChartLegendLabels({ data }) });
+    return /* @__PURE__ */ jsx16(ChartLegend, { legendLabels: getDonutChartLegendLabels({ data }) });
   }
 );
 
 // src/components/DonutChart/components/DonutChartTooltip.tsx
-import { memo as memo15 } from "react";
+import { memo as memo16 } from "react";
 import { Box as Box10 } from "@sproutsocial/seeds-react-box";
 import { Duration as Duration2 } from "@sproutsocial/seeds-react-duration";
 import { Numeral as Numeral2 } from "@sproutsocial/seeds-react-numeral";
 import { Text as Text5 } from "@sproutsocial/seeds-react-text";
-import { jsx as jsx16, jsxs as jsxs5 } from "react/jsx-runtime";
-var DonutChartTooltip = memo15(
+import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
+var DonutChartTooltip = memo16(
   function DonutChartTooltip2({
     color,
     name,
@@ -1128,11 +1248,11 @@ var DonutChartTooltip = memo15(
       {
         cells: [
           {
-            content: /* @__PURE__ */ jsx16(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx16(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx16(Text5, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ jsx17(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx17(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx17(Text5, { "aria-label": `${name}: `, children: name }) }) })
           },
           {
             content: /* @__PURE__ */ jsxs5(Box10, { display: "inline-flex", alignItems: "center", gap: 350, children: [
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 Numeral2,
                 {
                   number: percent,
@@ -1141,7 +1261,7 @@ var DonutChartTooltip = memo15(
                   locale: numberLocale
                 }
               ),
-              /* @__PURE__ */ jsx16(Text5, { fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx16(Duration2, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(Text5, { fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx17(Duration2, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx17(
                 Numeral2,
                 {
                   abbreviate: false,
@@ -1157,7 +1277,7 @@ var DonutChartTooltip = memo15(
         ]
       }
     ];
-    return /* @__PURE__ */ jsx16(ChartTooltip, { children: /* @__PURE__ */ jsx16(ChartTooltipTable, { rows }) });
+    return /* @__PURE__ */ jsx17(ChartTooltip, { children: /* @__PURE__ */ jsx17(ChartTooltipTable, { rows }) });
   }
 );
 
@@ -1179,16 +1299,16 @@ var transformDonutChartTooltipData = ({
 
 // src/components/DonutChart/DonutChart.tsx
 import { theme as theme10 } from "@sproutsocial/seeds-react-theme";
-import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs6 } from "react/jsx-runtime";
 highchartsAccessibility2(Highcharts2);
 var StyledBox4 = styled6(Box11)`
   ${donutChartStyles}
 `;
-var DonutChart = memo16(function DonutChart2(props) {
+var DonutChart = memo17(function DonutChart2(props) {
   const { data } = props;
-  return data.length === 0 ? null : /* @__PURE__ */ jsx17(DonutChartWithData, { ...props });
+  return data.length === 0 ? null : /* @__PURE__ */ jsx18(DonutChartWithData, { ...props });
 });
-var DonutChartWithData = memo16(
+var DonutChartWithData = memo17(
   function DonutChartWithData2({
     data,
     numberLocale = "en-us",
@@ -1199,8 +1319,8 @@ var DonutChartWithData = memo16(
     numberFormat = "decimal",
     tooltip
   }) {
-    const [options, setOptions] = useState3(donutChartOptions);
-    const [chart, setChart] = useState3(null);
+    const [options, setOptions] = useState4(donutChartOptions);
+    const [chart, setChart] = useState4(null);
     const callback = useCallback2((chartInstance) => {
       setChart(chartInstance);
     }, []);
@@ -1248,10 +1368,10 @@ var DonutChartWithData = memo16(
     const colors = data.map(
       (series, index) => series.styles?.color ?? theme10.colors.DATAVIZ_COLORS_LIST[index] ?? ""
     );
-    return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-      /* @__PURE__ */ jsx17(GlobalChartStyleOverrides, {}),
+    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      /* @__PURE__ */ jsx18(GlobalChartStyleOverrides, {}),
       /* @__PURE__ */ jsxs6(StyledBox4, { $colors: colors, bg: "container.background.base", children: [
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           HighchartsReact2,
           {
             highcharts: Highcharts2,
@@ -1259,13 +1379,13 @@ var DonutChartWithData = memo16(
             callback
           }
         ),
-        chart ? /* @__PURE__ */ jsx17(
+        chart ? /* @__PURE__ */ jsx18(
           ChartTooltipPortal,
           {
             chart,
             renderContent: (context) => {
               const { color, icon, name, percent, value } = transformDonutChartTooltipData({ context, data });
-              return tooltip ? tooltip({ color, icon, name, percent, value }) : /* @__PURE__ */ jsx17(
+              return tooltip ? tooltip({ color, icon, name, percent, value }) : /* @__PURE__ */ jsx18(
                 DonutChartTooltip,
                 {
                   color,
@@ -1282,21 +1402,21 @@ var DonutChartWithData = memo16(
             }
           }
         ) : null,
-        hideLegend ? null : /* @__PURE__ */ jsx17(Box11, { mt: 350, children: /* @__PURE__ */ jsx17(DonutChartLegend, { data }) })
+        hideLegend ? null : /* @__PURE__ */ jsx18(Box11, { mt: 350, children: /* @__PURE__ */ jsx18(DonutChartLegend, { data }) })
       ] })
     ] });
   }
 );
 
 // src/components/DonutChart/components/DonutChartLegendTable.tsx
-import { memo as memo17 } from "react";
+import { memo as memo18 } from "react";
 import { Box as Box12 } from "@sproutsocial/seeds-react-box";
 import { Duration as Duration3 } from "@sproutsocial/seeds-react-duration";
 import { Numeral as Numeral3 } from "@sproutsocial/seeds-react-numeral";
 import { Text as Text6 } from "@sproutsocial/seeds-react-text";
 import { theme as theme11 } from "@sproutsocial/seeds-react-theme";
-import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
-var DonutChartLegendTable = memo17(
+import { jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
+var DonutChartLegendTable = memo18(
   function DonutChartLegendTable2({
     data,
     numberLocale = "en-us",
@@ -1316,11 +1436,11 @@ var DonutChartLegendTable = memo17(
       return {
         cells: [
           {
-            content: /* @__PURE__ */ jsx18(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx18(ChartLegendLabelContentWithIcon, { icon, children: name }) })
+            content: /* @__PURE__ */ jsx19(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx19(ChartLegendLabelContentWithIcon, { icon, children: name }) })
           },
           {
             content: /* @__PURE__ */ jsxs7(Box12, { display: "inline-flex", alignItems: "center", gap: 350, children: [
-              /* @__PURE__ */ jsx18(Text6, { color: "text.body", children: /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsx19(Text6, { color: "text.body", children: /* @__PURE__ */ jsx19(
                 Numeral3,
                 {
                   abbreviate: false,
@@ -1329,7 +1449,7 @@ var DonutChartLegendTable = memo17(
                   number: value / total * 100
                 }
               ) }),
-              /* @__PURE__ */ jsx18(Text6, { color: "text.body", fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx18(Duration3, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsx19(Text6, { color: "text.body", fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx19(Duration3, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx19(
                 Numeral3,
                 {
                   abbreviate: false,
@@ -1349,10 +1469,10 @@ var DonutChartLegendTable = memo17(
       {
         cells: [
           {
-            content: /* @__PURE__ */ jsx18(Text6, { fontWeight: "semibold", color: "text.headline", children: totalLabel })
+            content: /* @__PURE__ */ jsx19(Text6, { fontWeight: "semibold", color: "text.headline", children: totalLabel })
           },
           {
-            content: /* @__PURE__ */ jsx18(Text6, { color: "text.body", fontWeight: "bold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx18(Duration3, { locale: textLocale, milliseconds: total }) : /* @__PURE__ */ jsx18(
+            content: /* @__PURE__ */ jsx19(Text6, { color: "text.body", fontWeight: "bold", children: numberFormat === "duration" ? /* @__PURE__ */ jsx19(Duration3, { locale: textLocale, milliseconds: total }) : /* @__PURE__ */ jsx19(
               Numeral3,
               {
                 abbreviate: false,
@@ -1368,7 +1488,7 @@ var DonutChartLegendTable = memo17(
         isAppendedRow: true
       }
     ];
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       ChartTable,
       {
         rows: [...rows, ...totalRow]
@@ -1378,40 +1498,41 @@ var DonutChartLegendTable = memo17(
 );
 
 // src/components/LineChart/LineChart.tsx
-import { memo as memo20 } from "react";
+import { memo as memo21 } from "react";
 import Highcharts3 from "highcharts";
 import { HighchartsReact as HighchartsReact3 } from "highcharts-react-official";
 import highchartsAccessibility3 from "highcharts/modules/accessibility";
+import highchartsAnnotations2 from "highcharts/modules/annotations";
 import styled7 from "styled-components";
 import { Box as Box14 } from "@sproutsocial/seeds-react-box";
 
 // src/components/LineChart/components/LineChartLegend.tsx
-import { memo as memo18 } from "react";
+import { memo as memo19 } from "react";
 import { theme as theme12 } from "@sproutsocial/seeds-react-theme";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var getLineChartLegendLabels = ({
   data
 }) => {
   return data.map((series, index) => ({
-    content: /* @__PURE__ */ jsx19(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
+    content: /* @__PURE__ */ jsx20(ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
     color: series.styles?.color || theme12.colors.DATAVIZ_COLORS_LIST[index]
   }));
 };
-var LineChartLegend = memo18(
+var LineChartLegend = memo19(
   function LineChartLegend2({ data }) {
-    return /* @__PURE__ */ jsx19(ChartLegend, { legendLabels: getLineChartLegendLabels({ data }) });
+    return /* @__PURE__ */ jsx20(ChartLegend, { legendLabels: getLineChartLegendLabels({ data }) });
   }
 );
 
 // src/components/LineChart/components/LineChartTooltip.tsx
-import { memo as memo19 } from "react";
+import { memo as memo20 } from "react";
 import { Box as Box13 } from "@sproutsocial/seeds-react-box";
 import { Duration as Duration4 } from "@sproutsocial/seeds-react-duration";
 import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
 import { Numeral as Numeral4 } from "@sproutsocial/seeds-react-numeral";
 import { Text as Text7 } from "@sproutsocial/seeds-react-text";
-import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
-var LineChartTooltip = memo19(
+import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
+var LineChartTooltip = memo20(
   function LineChartTooltip2({
     data,
     invalidNumberLabel,
@@ -1423,16 +1544,17 @@ var LineChartTooltip = memo19(
     currency = "USD",
     numberFormat = "decimal",
     onClick,
-    tooltipClickLabel
+    tooltipClickLabel,
+    xAnnotationDetails
   }) {
     const rows = data.map(({ color, icon, name, value }) => {
       return {
         cells: [
           {
-            content: /* @__PURE__ */ jsx20(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx20(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx20(Text7, { "aria-label": `${name}: `, children: name }) }) })
+            content: /* @__PURE__ */ jsx21(ChartLegendLabel, { color, children: /* @__PURE__ */ jsx21(ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ jsx21(Text7, { "aria-label": `${name}: `, children: name }) }) })
           },
           {
-            content: value === null && invalidNumberLabel ? /* @__PURE__ */ jsx20(Text7, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ jsx20(Duration4, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx20(
+            content: value === null && invalidNumberLabel ? /* @__PURE__ */ jsx21(Text7, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ jsx21(Duration4, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ jsx21(
               Numeral4,
               {
                 abbreviate: false,
@@ -1448,11 +1570,12 @@ var LineChartTooltip = memo19(
       };
     });
     return /* @__PURE__ */ jsxs8(ChartTooltip, { children: [
-      /* @__PURE__ */ jsx20(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
-      /* @__PURE__ */ jsx20(ChartTooltipTable, { rows }),
-      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx20(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs8(Box13, { display: "flex", alignItems: "center", gap: 300, children: [
-        /* @__PURE__ */ jsx20(Icon2, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
-        /* @__PURE__ */ jsx20(Text7, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
+      xAnnotationDetails ? xAnnotationDetails() : void 0,
+      /* @__PURE__ */ jsx21(ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
+      /* @__PURE__ */ jsx21(ChartTooltipTable, { rows }),
+      onClick && tooltipClickLabel ? /* @__PURE__ */ jsx21(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs8(Box13, { display: "flex", alignItems: "center", gap: 300, children: [
+        /* @__PURE__ */ jsx21(Icon2, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
+        /* @__PURE__ */ jsx21(Text7, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
       ] }) : tooltipClickLabel }) : null
     ] });
   }
@@ -1460,16 +1583,17 @@ var LineChartTooltip = memo19(
 
 // src/components/LineChart/LineChart.tsx
 import { theme as theme13 } from "@sproutsocial/seeds-react-theme";
-import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
 highchartsAccessibility3(Highcharts3);
+highchartsAnnotations2(Highcharts3);
 var StyledBox5 = styled7(Box14)`
   ${lineChartStyles}
 `;
-var LineChart = memo20(function LineChart2(props) {
+var LineChart = memo21(function LineChart2(props) {
   const { data } = props;
-  return data.length === 0 ? null : /* @__PURE__ */ jsx21(LineChartWithData, { ...props });
+  return data.length === 0 ? null : /* @__PURE__ */ jsx22(LineChartWithData, { ...props });
 });
-var LineChartWithData = memo20(function LineChartWithData2({
+var LineChartWithData = memo21(function LineChartWithData2({
   data,
   invalidNumberLabel,
   numberLocale = "en-us",
@@ -1482,7 +1606,8 @@ var LineChartWithData = memo20(function LineChartWithData2({
   yAxisLabelFormatter: yAxisLabelFormatter2,
   onClick,
   tooltipClickLabel,
-  timeFormat = "12"
+  timeFormat = "12",
+  xAnnotations
 }) {
   const { options, chart, callback } = useTimeSeriesChartOptions({
     currency,
@@ -1493,7 +1618,8 @@ var LineChartWithData = memo20(function LineChartWithData2({
     textLocale,
     yAxisLabelFormatter: yAxisLabelFormatter2,
     onClick,
-    timeFormat
+    timeFormat,
+    xAnnotations
   });
   const { colors, patterns } = data.reduce(
     (acc, item, index) => {
@@ -1508,8 +1634,8 @@ var LineChartWithData = memo20(function LineChartWithData2({
       patterns: []
     }
   );
-  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
-    /* @__PURE__ */ jsx21(GlobalChartStyleOverrides, {}),
+  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    /* @__PURE__ */ jsx22(GlobalChartStyleOverrides, {}),
     /* @__PURE__ */ jsxs9(
       StyledBox5,
       {
@@ -1518,7 +1644,7 @@ var LineChartWithData = memo20(function LineChartWithData2({
         $hasOnClick: Boolean(onClick),
         bg: "container.background.base",
         children: [
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             HighchartsReact3,
             {
               highcharts: Highcharts3,
@@ -1526,7 +1652,14 @@ var LineChartWithData = memo20(function LineChartWithData2({
               callback
             }
           ),
-          chart ? /* @__PURE__ */ jsx21(
+          chart && chart.annotations?.length ? /* @__PURE__ */ jsx22(
+            ChartXAnnotationMarkerPortal,
+            {
+              xAnnotations,
+              annotationContext: chart.annotations?.[0]
+            }
+          ) : null,
+          chart ? /* @__PURE__ */ jsx22(
             ChartTooltipPortal,
             {
               chart,
@@ -1536,7 +1669,8 @@ var LineChartWithData = memo20(function LineChartWithData2({
                   data
                 });
                 const x = context.x;
-                return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ jsx21(
+                const xAnnotationDetails = xAnnotations?.[x]?.details;
+                return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ jsx22(
                   LineChartTooltip,
                   {
                     currency,
@@ -1546,15 +1680,16 @@ var LineChartWithData = memo20(function LineChartWithData2({
                     numberLocale,
                     textLocale,
                     tooltipDateFormatter,
-                    x,
                     onClick,
-                    tooltipClickLabel
+                    tooltipClickLabel,
+                    x,
+                    xAnnotationDetails
                   }
                 );
               }
             }
           ) : null,
-          /* @__PURE__ */ jsx21(Box14, { mt: 350, children: /* @__PURE__ */ jsx21(LineChartLegend, { data }) })
+          /* @__PURE__ */ jsx22(Box14, { mt: 350, children: /* @__PURE__ */ jsx22(LineChartLegend, { data }) })
         ]
       }
     )