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

package/dist/esm/bar/index.js

@@ -1,788 +1,83 @@
 import {
-  ChartLegend,
-  ChartLegendLabel,
-  ChartLegendLabelContentWithIcon,
-  ChartTooltip,
-  ChartTooltipFooter,
-  ChartTooltipHeader,
-  ChartTooltipPortal,
-  ChartTooltipTable,
-  ChartTooltipTitle,
-  GlobalChartStyleOverrides,
-  VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT,
-  transformTimeSeriesTooltipData,
-  verticalBarChartStyles
-} from "../chunk-CDBW4SOR.js";
-
-// src/charts/bar/VerticalBarChart.tsx
-import { memo as memo3 } from "react";
-
-// src/charts/shared/chartBase.tsx
-import Highcharts from "highcharts";
-import { HighchartsReact } from "highcharts-react-official";
-import highchartsAccessibility from "highcharts/modules/accessibility";
-import highchartsAnnotations from "highcharts/modules/annotations";
-import highchartsExporting from "highcharts/modules/exporting";
-import highchartsOfflineExporting from "highcharts/modules/offline-exporting";
-import highchartsExportData from "highcharts/modules/export-data";
+  ChartRenderer,
+  buildAnnotationConfig,
+  buildBaseChartOptions,
+  buildDimensionalAxis,
+  defaultValueAxisLabelFormatter,
+  makeValueAxisLabelFormatter,
+  resolveTooltipTimezone,
+  useSeedsChartSetup
+} from "../chunk-ZXXFRUVF.js";
 import {
-  useCallback,
-  useEffect as useEffect2,
-  useMemo,
-  useRef as useRef2,
-  useState as useState2
-} from "react";
-import { useTheme } from "styled-components";
-import { Box as Box3 } from "@sproutsocial/seeds-react-box";
-
-// src/charts/shared/ChartAnnotationMarkerPortal.tsx
-import { memo, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { Box } from "@sproutsocial/seeds-react-box";
-import { Icon } from "@sproutsocial/seeds-react-icon";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function ChartAnnotationMarker({
-  annotation,
-  lineHeight
-}) {
-  return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 200, children: [
-    annotation.icon ? /* @__PURE__ */ jsx(
-      Box,
-      {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: "20px",
-        height: "20px",
-        bg: "icon.base",
-        borderRadius: "50%",
-        children: /* @__PURE__ */ jsx(Icon, { name: annotation.icon, size: "mini", color: "icon.inverse" })
-      }
-    ) : null,
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        height: `${lineHeight}px`,
-        width: "0.5px",
-        bg: annotation.color ?? "neutral.200"
-      }
-    )
-  ] });
-}
-var MARKER_ATTR = "data-v2-chart-annotation-marker";
-var ChartAnnotationMarkerPortal = memo(
-  function ChartAnnotationMarkerPortal2({
-    annotationLookup,
-    annotationContext,
-    chartContainer,
-    plotHeight
-  }) {
-    const annotationContainers = useRef({});
-    const [, setRenderCount] = useState(0);
-    const forceRender = () => setRenderCount((prev) => prev + 1);
-    useEffect(() => {
-      if (!annotationContext.labels) return;
-      const newContainers = {};
-      const existingAnnotationContainers = chartContainer.querySelectorAll(
-        `div[${MARKER_ATTR}='true']`
-      );
-      existingAnnotationContainers.forEach(
-        (annotation) => annotation.setAttribute(MARKER_ATTR, "false")
-      );
-      annotationContext.labels.forEach((label) => {
-        const labelElement = label.graphic?.div;
-        if (!labelElement) return;
-        labelElement.querySelectorAll(`div[${MARKER_ATTR}]`).forEach((component) => component.remove());
-        const annotationDiv = document.createElement("div");
-        annotationDiv.setAttribute(MARKER_ATTR, "true");
-        labelElement.appendChild(annotationDiv);
-        const xValue = label.options?.point?.x;
-        newContainers[xValue] = annotationDiv;
-      });
-      annotationContainers.current = newContainers;
-      forceRender();
-      requestAnimationFrame(() => {
-        chartContainer.querySelectorAll("div.highcharts-annotation").forEach((annotationDiv) => {
-          const reactAnnotations = annotationDiv.querySelectorAll(
-            `div[${MARKER_ATTR}]`
-          );
-          const hasActiveAnnotations = Array.from(reactAnnotations).some(
-            (div) => div.getAttribute(MARKER_ATTR) === "true"
-          );
-          if (!hasActiveAnnotations) annotationDiv.remove();
-        });
-      });
-    }, [annotationContext.labels, annotationLookup, chartContainer]);
-    return /* @__PURE__ */ jsx(Fragment, { children: Object.entries(annotationContainers.current).map(
-      ([xValue, container]) => {
-        const annotation = annotationLookup.get(Number(xValue));
-        return annotation ? createPortal(
-          /* @__PURE__ */ jsx(
-            ChartAnnotationMarker,
-            {
-              annotation,
-              lineHeight: plotHeight
-            }
-          ),
-          container
-        ) : null;
-      }
-    ) });
-  }
-);
-
-// src/charts/shared/DefaultChartTooltip.tsx
-import { Box as Box2 } from "@sproutsocial/seeds-react-box";
-import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
-import { Text } from "@sproutsocial/seeds-react-text";
-
-// src/charts/shared/formatters/valueFormatter.ts
-import { formatDuration } from "@sproutsocial/seeds-react-duration";
-import { formatNumeral } from "@sproutsocial/seeds-react-numeral";
-function valueFormatter({
-  value,
-  numberFormat = "decimal",
-  currency = "USD",
-  abbreviate = true,
-  percentInput = "decimal",
-  numberLocale,
-  textLocale
-}) {
-  const numberValue = Number(value);
-  if (numberValue === 0) {
-    return formatNumeral({ locale: numberLocale, number: 0 });
-  }
-  if (numberFormat === "duration") {
-    return formatDuration({
-      display: "narrow",
-      locale: textLocale,
-      milliseconds: numberValue
-    });
-  }
-  if (numberFormat === "percent") {
-    const whole = percentInput === "decimal" ? numberValue * 100 : numberValue;
-    return formatNumeral({
-      format: "percent",
-      locale: numberLocale,
-      number: whole
-    });
-  }
-  return formatNumeral({
-    abbreviate,
-    currency,
-    format: numberFormat,
-    locale: numberLocale,
-    number: numberValue
-  });
-}
+  timeSeriesChartStyles
+} from "../chunk-LC3HGWDD.js";
 
-// src/charts/shared/DefaultChartTooltip.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function formatTitle(position, timezone) {
-  if (typeof position === "string") return position;
-  return new Date(position).toLocaleDateString(void 0, {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-    weekday: "long",
-    timeZone: timezone
-  });
-}
-function AnnotationHeader({
-  icon,
-  title,
-  description
-}) {
-  const hasIconOrTitle = Boolean(icon || title);
-  if (!hasIconOrTitle && !description) return null;
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    hasIconOrTitle ? /* @__PURE__ */ jsx2(ChartTooltipHeader, { children: /* @__PURE__ */ jsxs2(Box2, { display: "flex", alignItems: "center", gap: 300, children: [
-      icon ? /* @__PURE__ */ jsx2(Icon2, { name: icon, size: "mini", color: "icon.base" }) : null,
-      title ? /* @__PURE__ */ jsx2(Text, { color: "text.body", fontSize: 200, children: title }) : null
-    ] }) }) : null,
-    description ? /* @__PURE__ */ jsx2(ChartTooltipHeader, { children: /* @__PURE__ */ jsx2(Text, { fontSize: 200, color: "text.subtext", children: description }) }) : null
-  ] });
-}
-function DefaultChartTooltip({
-  data,
-  position,
-  annotation,
-  hasOnClick,
-  tooltipClickLabel,
-  timezone,
-  invalidNumberLabel,
-  valueFormat
-}) {
-  const rows = data.map((d) => ({
-    cells: [
-      {
-        content: /* @__PURE__ */ jsx2(ChartLegendLabel, { color: d.color, children: /* @__PURE__ */ jsx2(Text, { "aria-label": `${d.name}: `, children: d.name }) })
-      },
-      {
-        // Format non-null values through the shared formatter when a
-        // `valueFormat` is supplied. Tooltip values are always full precision
-        // (`abbreviate: false`) — the axis tick scan never applies here (v1
-        // parity: `VerticalBarChartTooltip` passed `abbreviate={false}`).
-        content: /* @__PURE__ */ jsx2(Text, { children: d.value == null ? invalidNumberLabel ?? "\u2014" : valueFormat ? valueFormatter({
-          ...valueFormat,
-          value: d.value,
-          abbreviate: false
-        }) : d.value }),
-        align: "right"
-      }
-    ]
-  }));
-  return /* @__PURE__ */ jsxs2(ChartTooltip, { children: [
-    annotation ? /* @__PURE__ */ jsx2(
-      AnnotationHeader,
-      {
-        icon: annotation.icon,
-        title: annotation.title,
-        description: annotation.description
-      }
-    ) : null,
-    /* @__PURE__ */ jsx2(ChartTooltipTitle, { children: formatTitle(position, timezone) }),
-    /* @__PURE__ */ jsx2(ChartTooltipTable, { rows }),
-    hasOnClick && tooltipClickLabel ? /* @__PURE__ */ jsx2(ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ jsxs2(Box2, { display: "flex", alignItems: "center", gap: 300, children: [
-      /* @__PURE__ */ jsx2(Icon2, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
-      /* @__PURE__ */ jsx2(Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
-    ] }) : tooltipClickLabel }) : null
-  ] });
-}
-
-// src/charts/shared/SeriesLegend.tsx
-import { memo as memo2 } from "react";
-import { Icon as Icon3 } from "@sproutsocial/seeds-react-icon";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var SeriesLegend = memo2(function SeriesLegend2({
-  items
-}) {
-  const labels = items.map((item) => ({
-    content: /* @__PURE__ */ jsx3(
-      ChartLegendLabelContentWithIcon,
-      {
-        icon: item.icon ? /* @__PURE__ */ jsx3(Icon3, { name: item.icon, fixedWidth: true, "aria-hidden": true }) : void 0,
-        children: item.name
-      }
-    ),
-    color: item.color
-  }));
-  return /* @__PURE__ */ jsx3(ChartLegend, { legendLabels: labels });
-});
-
-// src/charts/shared/chartExport.ts
-function defaultFilename(type, now) {
-  const iso = now.toISOString();
-  const stamp = `${iso.slice(0, 10)}-${iso.slice(11, 19).replace(/:/g, "-")}`;
-  return slugify(type ? `chart-${type}-${stamp}` : `chart-${stamp}`);
-}
-function slugify(value) {
-  return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
-}
-
-// src/charts/shared/chartBase.tsx
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-highchartsAccessibility(Highcharts);
-highchartsAnnotations(Highcharts);
-highchartsExporting(Highcharts);
-highchartsOfflineExporting(Highcharts);
-highchartsExportData(Highcharts);
-function useSeedsChartSetup({
-  series,
-  includePatterns = false,
-  seriesLimit,
-  isSeriesLimitOverridden = false,
-  hideSeriesLimitWarning = false,
-  componentName
-}) {
-  const theme = useTheme();
-  const palette = theme.colors.DATAVIZ_COLORS_LIST;
-  const cappedSeries = useMemo(
-    () => seriesLimit !== void 0 && seriesLimit >= 1 && series.length > seriesLimit ? series.slice(0, seriesLimit) : series,
-    [series, seriesLimit]
-  );
-  useEffect2(() => {
-    if (seriesLimit !== void 0 && seriesLimit >= 1 && series.length > seriesLimit && !isSeriesLimitOverridden && !hideSeriesLimitWarning && componentName != null) {
-      console.warn(
-        `${componentName}: Maximum number of series (${seriesLimit}) exceeded. Only the first ${seriesLimit} series will be displayed.`
-      );
-    }
-  }, [
-    series.length,
-    seriesLimit,
-    isSeriesLimitOverridden,
-    hideSeriesLimitWarning,
-    componentName
-  ]);
-  const colors = useMemo(() => {
-    const out = [];
-    const paletteLen = palette.length;
-    for (let i = 0; i < cappedSeries.length; i++) {
-      const s = cappedSeries[i];
-      out.push(s.color ?? palette[i % paletteLen] ?? "");
-    }
-    return out;
-  }, [cappedSeries, palette]);
-  const patterns = useMemo(() => {
-    if (!includePatterns) return [];
-    const out = [];
-    for (let i = 0; i < cappedSeries.length; i++) {
-      const s = cappedSeries[i];
-      out.push(s.pattern ?? "solid");
-    }
-    return out;
-  }, [cappedSeries, includePatterns]);
-  return { theme, colors, patterns, series: cappedSeries };
-}
-function buildExportChartOptions(theme, colors) {
-  const axisOptions = {
-    lineColor: theme.colors.container.border.base,
-    gridLineColor: theme.colors.container.border.base,
-    labels: {
-      style: {
-        color: theme.colors.text.subtext,
-        fontFamily: theme.fontFamily,
-        fontSize: theme.typography[100].fontSize,
-        fontWeight: String(theme.fontWeights.normal)
-      }
-    }
-  };
-  return {
-    chart: {
-      styledMode: false,
-      backgroundColor: theme.colors.container.background.base
-    },
-    // Series without an explicit `color` fall through to this palette by index.
-    colors: [...colors],
-    // The on-screen legend is a React sibling (`SeriesLegend`) outside the chart
-    // SVG, so the export can't capture it. Turn on Highcharts' native legend for
-    // the clone instead, themed to approximate the Seeds `ChartLegend` (centered
-    // row of swatch + `text.subtext` label). It can't reproduce per-series Seeds
-    // icons — those series show colour + name only.
-    legend: {
-      enabled: true,
-      symbolRadius: 4,
-      symbolHeight: 12,
-      symbolWidth: 12,
-      itemStyle: {
-        color: theme.colors.text.subtext,
-        fontFamily: theme.fontFamily,
-        fontSize: theme.typography[200].fontSize,
-        fontWeight: String(theme.fontWeights.normal)
-      }
-    },
-    xAxis: {
-      ...axisOptions,
-      crosshair: {
-        color: theme.colors.container.border.decorative.neutral,
-        width: 1
-      }
-    },
-    // No zero-line: the `y-axis-zero-line` rule in chartStyles is a v1 leftover;
-    // the v2 bar adapter never creates that plotLine.
-    yAxis: axisOptions
-  };
-}
-function createChartExportHandle(chart, getExportChartOptions) {
-  const resolveName = (filename) => filename ?? defaultFilename(chart.options.chart?.type, /* @__PURE__ */ new Date());
-  const exportImage = async (type, filename) => {
-    chart.exportChartLocal(
-      { type, filename: resolveName(filename) },
-      getExportChartOptions()
-    );
-  };
-  return {
-    exportPNG: ({ filename } = {}) => exportImage("image/png", filename),
-    exportSVG: ({ filename } = {}) => exportImage("image/svg+xml", filename),
-    exportPDF: async ({ filename } = {}) => {
-      const { loadPdfExportLibs } = await import("../pdfExportLibs-NWLZH5KL.js");
-      loadPdfExportLibs();
-      await exportImage("application/pdf", filename);
-    },
-    exportCSV: async ({ filename } = {}) => {
-      const exporting = chart.options.exporting ??= {};
-      const previous = exporting.filename;
-      exporting.filename = resolveName(filename);
-      try {
-        chart.downloadCSV();
-      } finally {
-        exporting.filename = previous;
-      }
-    }
-  };
-}
-function ChartRenderer({
-  options,
-  series,
-  colors,
-  tooltip,
-  annotationLookup,
-  hasOnClick,
-  tooltipClickLabel,
-  timezone,
-  invalidNumberLabel,
-  valueFormat,
-  onReady
-}) {
-  const [chart, setChart] = useState2(null);
-  const [plotHeight, setPlotHeight] = useState2(0);
-  const renderTooltip = tooltip ?? DefaultChartTooltip;
-  const theme = useTheme();
-  const exportThemeRef = useRef2({ theme, colors });
-  exportThemeRef.current = { theme, colors };
-  const captureChart = useCallback((chartInstance) => {
-    const forExport = chartInstance.options.chart?.forExport;
-    if (!forExport) {
-      setChart(chartInstance);
-    }
-  }, []);
-  const onReadyRef = useRef2(onReady);
-  onReadyRef.current = onReady;
-  useEffect2(() => {
-    if (!chart) return;
-    onReadyRef.current?.(
-      createChartExportHandle(
-        chart,
-        () => buildExportChartOptions(
-          exportThemeRef.current.theme,
-          exportThemeRef.current.colors
-        )
-      )
-    );
-  }, [chart]);
-  useEffect2(() => {
-    if (!chart) return;
-    setPlotHeight(chart.plotHeight);
-    const unbind = Highcharts.addEvent(chart, "redraw", () => {
-      setPlotHeight(chart.plotHeight);
-    });
-    return () => unbind();
-  }, [chart]);
-  if (series.length === 0) return null;
-  const chartWithAnnotations = chart;
-  const hasRenderedAnnotations = !!chartWithAnnotations?.annotations?.length && !!annotationLookup?.size && plotHeight > 0;
-  const highchartsOptions = {
-    ...options,
-    tooltip: { ...options.tooltip, useHTML: true },
-    // Export stays client-side/offline only. `fallbackToExportServer: false`
-    // stops Highcharts from POSTing chart SVG/data to its public export server
-    // (https://export.highcharts.com/) when a local export fails — our
-    // `useHTML: true` tooltips are a known trigger for offline-rasterization
-    // failure, so this guard is load-bearing, not theoretical. `contextButton`
-    // is disabled because v2 charts expose export only through the `onReady`
-    // handle; programmatic `exportChartLocal` / `downloadCSV` are unaffected.
-    exporting: {
-      fallbackToExportServer: false,
-      buttons: { contextButton: { enabled: false } }
-    }
-  };
-  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
-    /* @__PURE__ */ jsx4(GlobalChartStyleOverrides, {}),
-    /* @__PURE__ */ jsx4(
-      HighchartsReact,
-      {
-        highcharts: Highcharts,
-        options: highchartsOptions,
-        callback: captureChart
-      }
-    ),
-    hasRenderedAnnotations ? /* @__PURE__ */ jsx4(
-      ChartAnnotationMarkerPortal,
-      {
-        annotationLookup,
-        annotationContext: chartWithAnnotations.annotations[0],
-        chartContainer: chartWithAnnotations.container,
-        plotHeight
-      }
-    ) : null,
-    chart ? /* @__PURE__ */ jsx4(
-      ChartTooltipPortal,
-      {
-        chart,
-        renderContent: (context) => {
-          const data = transformTimeSeriesTooltipData({
-            context,
-            data: series.map((s, i) => ({
-              name: s.name,
-              points: [],
-              styles: { color: s.color ?? colors[i] ?? "" }
-            }))
-          }).map((row) => ({
-            color: row.color,
-            name: row.name,
-            value: row.value
-          }));
-          const position = context.x;
-          const resolved = annotationLookup?.get(context.point.x);
-          const annotation = resolved ? {
-            icon: resolved.icon,
-            color: resolved.color,
-            title: resolved.title,
-            description: resolved.description
-          } : void 0;
-          return renderTooltip({
-            data,
-            position,
-            annotation,
-            hasOnClick,
-            tooltipClickLabel,
-            timezone,
-            invalidNumberLabel,
-            valueFormat
-          });
-        }
-      }
-    ) : null,
-    /* @__PURE__ */ jsx4(Box3, { mt: 350, children: /* @__PURE__ */ jsx4(
-      SeriesLegend,
-      {
-        items: series.map((s, i) => ({
-          name: s.name,
-          icon: s.icon,
-          color: s.color ?? colors[i] ?? ""
-        }))
-      }
-    ) })
-  ] });
-}
-
-// src/charts/shared/annotations.ts
-function buildAnnotationConfig(annotations) {
-  if (!annotations?.length) {
-    return { annotations: void 0, lookup: void 0 };
-  }
-  const labels = [];
-  const lookup = /* @__PURE__ */ new Map();
-  for (const annotation of annotations) {
-    const { position } = annotation;
-    labels.push({
-      // Highcharts anchor — always uses `x` regardless of chart orientation.
-      point: { x: position, y: 0, xAxis: 0, yAxis: 0 },
-      // Space (not empty) — Highcharts reverts to its built-in label text on empty string.
-      text: " "
-    });
-    lookup.set(position, annotation);
-  }
-  if (labels.length === 0) {
-    return { annotations: void 0, lookup: void 0 };
-  }
-  return {
-    // `useHTML: true` makes Highcharts attach an HTML `graphic.div` to each
-    // label, which the marker portal needs as its render target. `padding: 0`
-    // removes Highcharts' default left padding so markers stay centered.
-    annotations: [{ labels, labelOptions: { useHTML: true, padding: 0 } }],
-    lookup
-  };
-}
-
-// src/charts/shared/formatters/datetimeFormatter.ts
-var DAY_MS = 864e5;
-var WEEK_MS = 6048e5;
-var MIN_MONTH_MS = 24192e5;
-var MIN_YEAR_MS = 31536e6;
-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(parts.find((p) => p.type === "day")?.value ?? "0", 10),
-    month: parseInt(parts.find((p) => p.type === "month")?.value ?? "0", 10),
-    year: parseInt(parts.find((p) => p.type === "year")?.value ?? "0", 10)
-  };
-};
-var deriveGranularity = (tickPositions) => {
-  if (tickPositions.length < 2) {
-    return "day";
-  }
-  const deltas = [];
-  for (let i = 1; i < tickPositions.length; i++) {
-    const curr = tickPositions[i];
-    const prev = tickPositions[i - 1];
-    if (curr === void 0 || prev === void 0) {
-      continue;
-    }
-    deltas.push(Math.abs(curr - prev));
-  }
-  deltas.sort((a, b) => a - b);
-  const mid = Math.floor(deltas.length / 2);
-  const upper = deltas[mid];
-  const lower = deltas[mid - 1];
-  const median = deltas.length % 2 === 0 && lower !== void 0 ? (lower + upper) / 2 : upper;
-  if (median < DAY_MS) {
-    return "hour";
-  }
-  if (median < WEEK_MS) {
-    return "day";
-  }
-  if (median < MIN_MONTH_MS) {
-    return "week";
-  }
-  if (median < MIN_YEAR_MS) {
-    return "month";
-  }
-  return "year";
-};
-function datetimeFormatter({
-  value,
-  tickPositions = [],
-  // optional
-  timezone = "UTC",
-  timeFormat = "12",
-  textLocale = "en-US"
-}) {
-  if (typeof value === "string" || !Number.isFinite(value)) {
-    return { primary: String(value) };
-  }
-  const granularity = deriveGranularity(tickPositions);
-  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 (granularity) {
-    case "hour":
-      firstPartOptions = timeFormat === "24" ? { hour: "numeric", minute: "numeric", hour12: false } : { hour: "numeric" };
-      if (isFirst || valueParts.day !== previousValueParts?.day) {
-        secondPartOptions = { day: "numeric", month: "short" };
-      }
-      break;
-    case "day":
-    case "week":
-      firstPartOptions = { day: "numeric" };
-      if (isFirst || valueParts.month !== previousValueParts?.month) {
-        secondPartOptions = { month: "short" };
-      }
-      break;
-    case "month":
-      firstPartOptions = { month: "short" };
-      if (isFirst || valueParts.year !== previousValueParts?.year) {
-        secondPartOptions = { year: "numeric" };
-      }
-      break;
-    case "year":
-      firstPartOptions = { year: "numeric" };
-      break;
-    default:
-      firstPartOptions = {};
-      break;
-  }
-  const primary = new Intl.DateTimeFormat(textLocale, {
-    ...firstPartOptions,
-    timeZone: timezone
-  }).format(valueDate);
-  if (Object.keys(secondPartOptions).length > 0) {
-    const secondary = new Intl.DateTimeFormat(textLocale, {
-      ...secondPartOptions,
-      timeZone: timezone
-    }).format(valueDate);
-    return { primary, secondary };
-  }
-  return { primary };
-}
-
-// src/charts/shared/valueAxisLabelFormatter.ts
-import { formatNumeral as formatNumeral2 } from "@sproutsocial/seeds-react-numeral";
-var FIXED_LOCALE = "en-US";
-function deriveAbbreviateFromTicks(context) {
-  const tickPositions = context.axis.tickPositions;
-  const maxValue = tickPositions && tickPositions.length > 0 ? tickPositions[tickPositions.length - 1] : void 0;
-  return typeof maxValue === "number" && maxValue > 9999 ? 1e3 : true;
-}
-function defaultValueAxisLabelFormatter() {
-  const numberValue = Number(this.value);
-  if (numberValue === 0) {
-    return formatNumeral2({ locale: FIXED_LOCALE, number: 0 });
-  }
-  const abbreviate = deriveAbbreviateFromTicks(this);
-  return formatNumeral2({
-    abbreviate,
-    format: "decimal",
-    locale: FIXED_LOCALE,
-    number: numberValue
-  });
-}
-function makeValueAxisLabelFormatter(format) {
-  return function() {
-    const numberValue = Number(this.value);
-    const abbreviate = format.abbreviate === false ? false : deriveAbbreviateFromTicks(this);
-    return valueFormatter({ ...format, value: numberValue, abbreviate });
-  };
-}
+// src/charts/bar/BarChart.tsx
+import { memo } from "react";
 
 // src/charts/bar/adapter.ts
 function highchartsType(direction) {
-  switch (direction) {
-    case "vertical":
-      return "column";
-  }
-}
-function makeDatetimeAxisLabelFormatter(timezone, timeFormat) {
-  return function() {
-    const { primary, secondary } = datetimeFormatter({
-      value: this.value,
-      tickPositions: this.axis.tickPositions ?? [],
-      timezone,
-      timeFormat
-    });
-    return secondary ? `${primary}<br/><span class="hc-axis-label-secondary">${secondary}</span>` : primary;
-  };
-}
-function buildXAxis(xAxis, timezone) {
-  if (xAxis.type === "datetime") {
-    return {
-      type: "datetime",
-      crosshair: xAxis.crosshair,
-      labels: {
-        formatter: makeDatetimeAxisLabelFormatter(timezone, xAxis.timeFormat)
-      }
-    };
-  }
-  return {
-    type: "category",
-    categories: [...xAxis.categories],
-    crosshair: xAxis.crosshair
-  };
+  return direction === "horizontal" ? "bar" : "column";
 }
 function buildBarChartOptions(props, direction, series = props.series) {
   const chartType = highchartsType(direction);
   const isDatetime = props.xAxis.type === "datetime";
-  const tooltipTimezone = isDatetime ? props.timezone ?? "UTC" : void 0;
+  const tooltipTimezone = resolveTooltipTimezone(props.xAxis, props.timezone);
   const { annotations, lookup: annotationLookup } = buildAnnotationConfig(
     props.annotations
   );
+  const barTypeConfig = {
+    // "grouped" maps to omitting `stacking` — Highcharts renders multi-series
+    // columns side-by-side when no stacking is set.
+    ...props.stacking === "grouped" ? {} : { stacking: props.stacking ?? "normal" },
+    // Horizontal bars are height-constrained (fixed chart height ÷ categories),
+    // so the same padding fractions that work for columns produce hairline bars.
+    pointPadding: direction === "horizontal" ? 0.05 : 0.25,
+    groupPadding: direction === "horizontal" ? 0.1 : 0.25,
+    // Fixed bar width on datetime axes. Sparse time-series otherwise size
+    // columns from the (large) gap between points and balloon; this mirrors
+    // v1's `pointWidth: 20` time-series treatment. Dense datetime data may
+    // instead want a `maxPointWidth` cap — revisit when Line/Area land.
+    ...isDatetime ? { pointWidth: 20 } : {},
+    borderRadius: 4,
+    borderWidth: 0,
+    // Pairs with the `:hover` dimming rule in `styles.ts`: while the cursor
+    // is over the chart, all bars dim; these handlers restore opacity for
+    // every bar at the hovered x (so stacked/grouped bars highlight together
+    // rather than just the single hovered bar).
+    point: {
+      events: {
+        click: props.onClick ? (event) => props.onClick({ position: event.point.x }) : void 0,
+        mouseOver: function() {
+          const x = this.x;
+          this.series.chart.series.forEach((s) => {
+            if (s.type !== chartType) return;
+            s.data.forEach((point) => {
+              if (point.x !== x) return;
+              point.graphic?.element?.classList.add("bar-point-hover");
+            });
+          });
+        },
+        mouseOut: function() {
+          this.series.chart.series.forEach((s) => {
+            if (s.type !== chartType) return;
+            s.data.forEach((point) => {
+              point.graphic?.element?.classList.remove("bar-point-hover");
+            });
+          });
+        }
+      }
+    }
+  };
   const options = {
-    chart: {
+    ...buildBaseChartOptions({
       type: chartType,
-      styledMode: true,
-      animation: false,
-      // Leave room above the plot area for marker icons that sit above the chart.
-      ...annotations ? { marginTop: 24 } : {}
-    },
-    accessibility: { description: props.description },
-    title: { text: "" },
-    credits: { enabled: false },
-    legend: { enabled: false },
-    tooltip: {
-      enabled: true,
-      outside: true,
-      padding: 0,
-      shape: "rect",
-      shared: true,
-      hideDelay: 0,
-      valueSuffix: props.valueSuffix
-    },
-    xAxis: buildXAxis(props.xAxis, tooltipTimezone ?? "UTC"),
-    // `timezone` is chart-global in Highcharts (`time.timezone`) and only
-    // meaningful for a datetime axis, so it's omitted otherwise.
-    ...tooltipTimezone ? { time: { timezone: tooltipTimezone } } : {},
+      description: props.description,
+      valueSuffix: props.valueSuffix,
+      reserveTopMargin: Boolean(annotations),
+      timezone: tooltipTimezone
+    }),
+    xAxis: buildDimensionalAxis(props.xAxis, tooltipTimezone ?? "UTC"),
     yAxis: {
       min: props.yAxis?.min,
       max: props.yAxis?.max,
@@ -798,47 +93,7 @@ function buildBarChartOptions(props, direction, series = props.series) {
     },
     plotOptions: {
       series: { animation: false },
-      column: {
-        // "grouped" maps to omitting `stacking` — Highcharts renders multi-series
-        // columns side-by-side when no stacking is set.
-        ...props.stacking === "grouped" ? {} : { stacking: props.stacking ?? "normal" },
-        pointPadding: 0.25,
-        groupPadding: 0.25,
-        // Fixed bar width on datetime axes. Sparse time-series otherwise size
-        // columns from the (large) gap between points and balloon; this mirrors
-        // v1's `pointWidth: 20` time-series treatment. Dense datetime data may
-        // instead want a `maxPointWidth` cap — revisit when Line/Area land.
-        ...isDatetime ? { pointWidth: 20 } : {},
-        borderRadius: 4,
-        borderWidth: 0,
-        // Pairs with the `:hover` dimming rule in `styles.ts`: while the cursor
-        // is over the chart, all bars dim; these handlers restore opacity for
-        // every bar at the hovered x (so stacked/grouped columns highlight
-        // together rather than just the single hovered bar).
-        point: {
-          events: {
-            click: props.onClick ? (event) => props.onClick({ position: event.point.x }) : void 0,
-            mouseOver: function() {
-              const x = this.x;
-              this.series.chart.series.forEach((s) => {
-                if (s.type !== "column") return;
-                s.data.forEach((point) => {
-                  if (point.x !== x) return;
-                  point.graphic?.element?.classList.add("column-hover");
-                });
-              });
-            },
-            mouseOut: function() {
-              this.series.chart.series.forEach((s) => {
-                if (s.type !== "column") return;
-                s.data.forEach((point) => {
-                  point.graphic?.element?.classList.remove("column-hover");
-                });
-              });
-            }
-          }
-        }
-      }
+      [chartType]: barTypeConfig
     },
     series: series.map((s) => ({
       type: chartType,
@@ -852,8 +107,8 @@ function buildBarChartOptions(props, direction, series = props.series) {
 }
 
 // src/charts/bar/styles.ts
-import styled from "styled-components";
-import { Box as Box4 } from "@sproutsocial/seeds-react-box";
+import styled, { css as css2 } from "styled-components";
+import { Box } from "@sproutsocial/seeds-react-box";
 
 // src/charts/shared/styles.ts
 import { css } from "styled-components";
@@ -876,35 +131,54 @@ var axisLabelV2Styles = css`
 `;
 
 // src/charts/bar/styles.ts
-var VerticalBarStyledBox = styled(Box4)`
-  ${verticalBarChartStyles}
+var barFamilyStyles = css2`
+  ${timeSeriesChartStyles}
+
+  /*
+    When the chart container is hovered, dim all bars. Then restore opacity for
+    the hovered bar(s) — flagged with the bar-point-hover class by the adapter —
+    so the non-hovered bars fade out.
+  */
+  .highcharts-container:hover .highcharts-point {
+    fill-opacity: 0.3;
+  }
+
+  .highcharts-point.bar-point-hover {
+    fill-opacity: 1 !important;
+  }
+`;
+var BarStyledBox = styled(Box)`
+  ${barFamilyStyles}
   ${axisLabelV2Styles}
 `;
 
-// src/charts/bar/VerticalBarChart.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var VerticalBarChart = memo3(function VerticalBarChart2(props) {
-  const seriesLimit = props.seriesLimit ?? VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT;
+// src/charts/constants.ts
+var BAR_CHART_DEFAULT_SERIES_LIMIT = 10;
+
+// src/charts/bar/BarChart.tsx
+import { jsx } from "react/jsx-runtime";
+var BarChart = memo(function BarChart2(props) {
+  const seriesLimit = props.seriesLimit ?? BAR_CHART_DEFAULT_SERIES_LIMIT;
   const { colors, series } = useSeedsChartSetup({
     series: props.series,
     seriesLimit,
     isSeriesLimitOverridden: props.seriesLimit !== void 0,
     hideSeriesLimitWarning: props.hideSeriesLimitWarning,
-    componentName: "VerticalBarChart"
+    componentName: "BarChart"
   });
   const { options, annotationLookup, tooltipTimezone } = buildBarChartOptions(
     props,
-    "vertical",
+    props.direction ?? "vertical",
     series
   );
   const hasOnClick = Boolean(props.onClick);
-  return /* @__PURE__ */ jsx5(
-    VerticalBarStyledBox,
+  return /* @__PURE__ */ jsx(
+    BarStyledBox,
     {
       $colors: colors,
       $hasOnClick: hasOnClick,
       bg: "container.background.base",
-      children: /* @__PURE__ */ jsx5(
+      children: /* @__PURE__ */ jsx(
         ChartRenderer,
         {
           options,
@@ -924,6 +198,6 @@ var VerticalBarChart = memo3(function VerticalBarChart2(props) {
   );
 });
 export {
-  VerticalBarChart
+  BarChart
 };
 //# sourceMappingURL=index.js.map