@sproutsocial/seeds-react-data-viz 0.16.1 → 0.17.0

package/dist/esm/line-area/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/charts/line-area/LineAreaChart.tsx","../../../src/charts/line-area/adapter.ts","../../../src/charts/line-area/styles.ts"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { useSeedsChartSetup, ChartRenderer } from \"../shared/chartBase\";\nimport { buildLineAreaChartOptions } from \"./adapter\";\nimport { LineAreaChartContainer } from \"./styles\";\nimport type { LineAreaChartProps, LineAreaVariant } from \"./types\";\n\nconst AREA_VARIANTS = new Set<LineAreaVariant>([\"area\", \"areaspline\"]);\n\nexport const LineAreaChart = memo(function LineAreaChart(\n  props: LineAreaChartProps\n) {\n  const { colors, patterns } = useSeedsChartSetup({\n    series: props.series,\n    includePatterns: true,\n  });\n  const { options, annotationLookup, tooltipTimezone } = useMemo(\n    () => buildLineAreaChartOptions(props),\n    [props]\n  );\n  const hasOnClick = Boolean(props.onClick);\n\n  return (\n    <LineAreaChartContainer\n      $colors={colors}\n      $patterns={patterns}\n      $hasOnClick={hasOnClick}\n      $isArea={AREA_VARIANTS.has(props.variant)}\n      className={props.className}\n    >\n      <ChartRenderer\n        options={options}\n        series={props.series}\n        colors={colors}\n        tooltip={props.tooltip}\n        annotationLookup={annotationLookup}\n        hasOnClick={hasOnClick}\n        tooltipClickLabel={props.tooltipClickLabel}\n        timezone={tooltipTimezone}\n        invalidNumberLabel={props.invalidNumberLabel}\n        onReady={props.onReady}\n      />\n    </LineAreaChartContainer>\n  );\n});\n","import { buildAnnotationConfig } from \"../shared/annotations\";\nimport type { ChartAnnotationLookup } from \"../shared/annotations\";\nimport type {\n  SeedsChartDataPoint,\n  SeedsChartOptions,\n} from \"../shared/chartBase\";\nimport { buildBaseChartOptions } from \"../shared/baseChartOptions\";\nimport {\n  buildDimensionalAxis,\n  resolveTooltipTimezone,\n} from \"../shared/axisOptions\";\nimport {\n  defaultValueAxisLabelFormatter,\n  makeValueAxisLabelFormatter,\n} from \"../shared/valueAxisLabelFormatter\";\nimport type { ChartDataPoint } from \"../shared/axis\";\nimport type { LineAreaChartProps, LineAreaVariant } from \"./types\";\n\n// `stacking` is meaningful only for filled variants; on `line`/`spline` it's a\n// no-op, so the adapter drops it rather than emitting a misleading option.\nconst AREA_VARIANTS = new Set<LineAreaVariant>([\"area\", \"areaspline\"]);\n\ntype SeriesPoint =\n  | number\n  | null\n  | [number, number | null]\n  | SeedsChartDataPoint;\n\nfunction pointY(point: ChartDataPoint): number | null {\n  if (point === null) return null;\n  if (typeof point === \"number\") return point;\n  if (Array.isArray(point)) return point[1];\n  return point.y;\n}\n\n// Mirrors v1's marker handling: point markers are hidden by default (set on\n// `plotOptions.series`), but an *isolated* non-null point — one with a null (or\n// the chart edge) on both sides — gets a circle marker so a point with no\n// connecting line segment stays visible. Connected points pass through\n// unchanged so the line/area renders dot-free, matching v1 and the designs.\nfunction withIsolatedPointMarkers(\n  data: ReadonlyArray<ChartDataPoint>\n): SeriesPoint[] {\n  return data.map((point, i): SeriesPoint => {\n    if (point === null) return null; // explicit gap\n    if (pointY(point) === null) return point; // tuple/object with null y — a gap\n    const prevY = i === 0 ? null : pointY(data[i - 1]!);\n    const nextY = i === data.length - 1 ? null : pointY(data[i + 1]!);\n    if (prevY !== null || nextY !== null) return point; // connected → no marker\n    const marker = { enabled: true, symbol: \"circle\" as const };\n    if (typeof point === \"number\") return { y: point, marker };\n    if (Array.isArray(point)) return { x: point[0], y: point[1], marker };\n    return { ...point, marker };\n  });\n}\n\nexport function buildLineAreaChartOptions(props: LineAreaChartProps): {\n  options: SeedsChartOptions;\n  annotationLookup: ChartAnnotationLookup | undefined;\n  /** Resolved timezone for the tooltip date formatter; undefined on category axes. */\n  tooltipTimezone: string | undefined;\n} {\n  const tooltipTimezone = resolveTooltipTimezone(props.xAxis, props.timezone);\n  const isStacked = AREA_VARIANTS.has(props.variant) && Boolean(props.stacking);\n  const { annotations, lookup: annotationLookup } = buildAnnotationConfig(\n    props.annotations\n  );\n\n  const options: SeedsChartOptions = {\n    ...buildBaseChartOptions({\n      type: props.variant,\n      description: props.description,\n      valueSuffix: props.valueSuffix,\n      reserveTopMargin: Boolean(annotations),\n      timezone: tooltipTimezone,\n    }),\n    xAxis: buildDimensionalAxis(props.xAxis, tooltipTimezone ?? \"UTC\"),\n    yAxis: {\n      min: props.yAxis?.min,\n      max: props.yAxis?.max,\n      // Anchor the value axis to 0 (like v1/bar/area): line/spline otherwise\n      // auto-scale above 0, which truncates the axis and pushes the annotation\n      // anchor (y: 0) out of range. `soft` still extends for negative data.\n      softMin: 0,\n      softMax: 0,\n      gridLineWidth: props.yAxis?.showGridLines === false ? 0 : 1,\n      title: { text: props.yAxis?.title ?? \"\" },\n      // Zero-config default: abbreviate value-axis ticks (1.20K / 1.20M / 1.20B).\n      labels: {\n        // A declarative `format` drives ticks through the shared valueFormatter;\n        // absent it, the zero-config decimal default (1.20K / 1.20M / 1.20B).\n        formatter: props.yAxis?.format\n          ? makeValueAxisLabelFormatter(props.yAxis.format)\n          : defaultValueAxisLabelFormatter,\n      },\n    },\n    plotOptions: {\n      series: {\n        animation: false,\n        // Hide point markers by default (matching v1 + designs); isolated points\n        // re-enable their own marker via `withIsolatedPointMarkers`.\n        marker: { enabled: false },\n        ...(props.onClick\n          ? {\n              point: {\n                events: {\n                  click: (event) => props.onClick!({ position: event.point.x }),\n                },\n              },\n            }\n          : {}),\n      },\n      // Type-scoped stacking: only the (area) variant stacks. `isStacked` already\n      // guarantees `props.variant` is an area variant here, so the computed key is\n      // always a valid plotOptions slot. Matches bar's per-type placement and keeps\n      // line/spline unstacked.\n      ...(isStacked ? { [props.variant]: { stacking: props.stacking } } : {}),\n    },\n    series: props.series.map((s) => ({\n      type: props.variant,\n      name: s.name,\n      data: withIsolatedPointMarkers(s.data),\n    })),\n    ...(annotations ? { annotations } : {}),\n  };\n\n  return { options, annotationLookup, tooltipTimezone };\n}\n","import styled from \"styled-components\";\nimport { lineChartStyles, areaChartStyles } from \"../../styles/chartStyles\";\nimport type {\n  TypeChartStyleColor,\n  TypeChartStyleHasOnClick,\n  TypeChartStylePattern,\n} from \"../../types\";\n\ntype StyleProps = Readonly<{\n  $colors: ReadonlyArray<TypeChartStyleColor>;\n  $patterns: ReadonlyArray<TypeChartStylePattern>;\n  $hasOnClick: TypeChartStyleHasOnClick;\n  /** `area`/`areaspline` fill below the line; `line`/`spline` show only the stroke. */\n  $isArea: boolean;\n}>;\n\n// Plain styled `div` — not `Box`. Per the DS Tailwind direction, components\n// render semantic elements internally (and accept `className`) rather than\n// depending on the `Box` component. The container background — previously Box's\n// `bg` prop — is set explicitly here.\n//\n// The line/area CSS is still v1's styled-components layer (`chartStyles.ts`);\n// migrating those styles to CSS modules is a tracked clean-up follow-up.\nexport const LineAreaChartContainer = styled.div<StyleProps>`\n  background-color: ${({ theme }) => theme.colors.container.background.base};\n  ${(props) => (props.$isArea ? areaChartStyles : lineChartStyles)}\n`;\n"],"mappings":"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","names":["AREA_VARIANTS","LineAreaChart"]}
+{"version":3,"sources":["../../../src/charts/line-area/LineAreaChart.tsx","../../../src/charts/line-area/adapter.ts","../../../src/charts/line-area/styles.ts"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { useSeedsChartSetup, ChartRenderer } from \"../shared/chartBase\";\nimport { buildLineAreaChartOptions } from \"./adapter\";\nimport { LineAreaChartContainer } from \"./styles\";\nimport type { LineAreaChartProps, LineAreaVariant } from \"./types\";\n\nconst AREA_VARIANTS = new Set<LineAreaVariant>([\"area\", \"areaspline\"]);\n\nexport const LineAreaChart = memo(function LineAreaChart(\n  props: LineAreaChartProps\n) {\n  const { colors, patterns } = useSeedsChartSetup({\n    series: props.series,\n    includePatterns: true,\n  });\n  const { options, annotationLookup, tooltipTimezone } = useMemo(\n    () => buildLineAreaChartOptions(props),\n    [props]\n  );\n  const hasOnClick = Boolean(props.onClick);\n\n  return (\n    <LineAreaChartContainer\n      $colors={colors}\n      $patterns={patterns}\n      $hasOnClick={hasOnClick}\n      $isArea={AREA_VARIANTS.has(props.variant)}\n      className={props.className}\n    >\n      <ChartRenderer\n        options={options}\n        series={props.series}\n        colors={colors}\n        tooltip={props.tooltip}\n        annotationLookup={annotationLookup}\n        hasOnClick={hasOnClick}\n        tooltipClickLabel={props.tooltipClickLabel}\n        timezone={tooltipTimezone}\n        invalidNumberLabel={props.invalidNumberLabel}\n        valueFormat={props.yAxis?.format}\n        onReady={props.onReady}\n      />\n    </LineAreaChartContainer>\n  );\n});\n","import { buildAnnotationConfig } from \"../shared/annotations\";\nimport type { ChartAnnotationLookup } from \"../shared/annotations\";\nimport type {\n  SeedsChartDataPoint,\n  SeedsChartOptions,\n} from \"../shared/chartBase\";\nimport { buildBaseChartOptions } from \"../shared/baseChartOptions\";\nimport {\n  buildDimensionalAxis,\n  resolveTooltipTimezone,\n} from \"../shared/axisOptions\";\nimport {\n  defaultValueAxisLabelFormatter,\n  makeValueAxisLabelFormatter,\n} from \"../shared/valueAxisLabelFormatter\";\nimport type { ChartDataPoint } from \"../shared/axis\";\nimport type { LineAreaChartProps, LineAreaVariant } from \"./types\";\n\n// `stacking` is meaningful only for filled variants; on `line`/`spline` it's a\n// no-op, so the adapter drops it rather than emitting a misleading option.\nconst AREA_VARIANTS = new Set<LineAreaVariant>([\"area\", \"areaspline\"]);\n\ntype SeriesPoint =\n  | number\n  | null\n  | [number, number | null]\n  | SeedsChartDataPoint;\n\nfunction pointY(point: ChartDataPoint): number | null {\n  if (point === null) return null;\n  if (typeof point === \"number\") return point;\n  if (Array.isArray(point)) return point[1];\n  return point.y;\n}\n\n// Mirrors v1's marker handling: point markers are hidden by default (set on\n// `plotOptions.series`), but an *isolated* non-null point — one with a null (or\n// the chart edge) on both sides — gets a circle marker so a point with no\n// connecting line segment stays visible. Connected points pass through\n// unchanged so the line/area renders dot-free, matching v1 and the designs.\nfunction withIsolatedPointMarkers(\n  data: ReadonlyArray<ChartDataPoint>\n): SeriesPoint[] {\n  return data.map((point, i): SeriesPoint => {\n    if (point === null) return null; // explicit gap\n    if (pointY(point) === null) return point; // tuple/object with null y — a gap\n    const prevY = i === 0 ? null : pointY(data[i - 1]!);\n    const nextY = i === data.length - 1 ? null : pointY(data[i + 1]!);\n    if (prevY !== null || nextY !== null) return point; // connected → no marker\n    const marker = { enabled: true, symbol: \"circle\" as const };\n    if (typeof point === \"number\") return { y: point, marker };\n    if (Array.isArray(point)) return { x: point[0], y: point[1], marker };\n    return { ...point, marker };\n  });\n}\n\nexport function buildLineAreaChartOptions(props: LineAreaChartProps): {\n  options: SeedsChartOptions;\n  annotationLookup: ChartAnnotationLookup | undefined;\n  /** Resolved timezone for the tooltip date formatter; undefined on category axes. */\n  tooltipTimezone: string | undefined;\n} {\n  const tooltipTimezone = resolveTooltipTimezone(props.xAxis, props.timezone);\n  const isStacked = AREA_VARIANTS.has(props.variant) && Boolean(props.stacking);\n  const { annotations, lookup: annotationLookup } = buildAnnotationConfig(\n    props.annotations\n  );\n\n  const options: SeedsChartOptions = {\n    ...buildBaseChartOptions({\n      type: props.variant,\n      description: props.description,\n      valueSuffix: props.valueSuffix,\n      reserveTopMargin: Boolean(annotations),\n      timezone: tooltipTimezone,\n    }),\n    xAxis: buildDimensionalAxis(props.xAxis, tooltipTimezone ?? \"UTC\"),\n    yAxis: {\n      min: props.yAxis?.min,\n      max: props.yAxis?.max,\n      // Anchor the value axis to 0 (like v1/bar/area): line/spline otherwise\n      // auto-scale above 0, which truncates the axis and pushes the annotation\n      // anchor (y: 0) out of range. `soft` still extends for negative data.\n      softMin: 0,\n      softMax: 0,\n      gridLineWidth: props.yAxis?.showGridLines === false ? 0 : 1,\n      title: { text: props.yAxis?.title ?? \"\" },\n      // Zero-config default: abbreviate value-axis ticks (1.20K / 1.20M / 1.20B).\n      labels: {\n        // A declarative `format` drives ticks through the shared valueFormatter;\n        // absent it, the zero-config decimal default (1.20K / 1.20M / 1.20B).\n        formatter: props.yAxis?.format\n          ? makeValueAxisLabelFormatter(props.yAxis.format)\n          : defaultValueAxisLabelFormatter,\n      },\n    },\n    plotOptions: {\n      series: {\n        animation: false,\n        // Hide point markers by default (matching v1 + designs); isolated points\n        // re-enable their own marker via `withIsolatedPointMarkers`.\n        marker: { enabled: false },\n        ...(props.onClick\n          ? {\n              point: {\n                events: {\n                  click: (event) => props.onClick!({ position: event.point.x }),\n                },\n              },\n            }\n          : {}),\n      },\n      // Type-scoped stacking: only the (area) variant stacks. `isStacked` already\n      // guarantees `props.variant` is an area variant here, so the computed key is\n      // always a valid plotOptions slot. Matches bar's per-type placement and keeps\n      // line/spline unstacked.\n      ...(isStacked ? { [props.variant]: { stacking: props.stacking } } : {}),\n    },\n    series: props.series.map((s) => ({\n      type: props.variant,\n      name: s.name,\n      data: withIsolatedPointMarkers(s.data),\n    })),\n    ...(annotations ? { annotations } : {}),\n  };\n\n  return { options, annotationLookup, tooltipTimezone };\n}\n","import styled from \"styled-components\";\nimport { lineChartStyles, areaChartStyles } from \"../../styles/chartStyles\";\nimport type {\n  TypeChartStyleColor,\n  TypeChartStyleHasOnClick,\n  TypeChartStylePattern,\n} from \"../../types\";\n\ntype StyleProps = Readonly<{\n  $colors: ReadonlyArray<TypeChartStyleColor>;\n  $patterns: ReadonlyArray<TypeChartStylePattern>;\n  $hasOnClick: TypeChartStyleHasOnClick;\n  /** `area`/`areaspline` fill below the line; `line`/`spline` show only the stroke. */\n  $isArea: boolean;\n}>;\n\n// Plain styled `div` — not `Box`. Per the DS Tailwind direction, components\n// render semantic elements internally (and accept `className`) rather than\n// depending on the `Box` component. The container background — previously Box's\n// `bg` prop — is set explicitly here.\n//\n// The line/area CSS is still v1's styled-components layer (`chartStyles.ts`);\n// migrating those styles to CSS modules is a tracked clean-up follow-up.\nexport const LineAreaChartContainer = styled.div<StyleProps>`\n  background-color: ${({ theme }) => theme.colors.container.background.base};\n  ${(props) => (props.$isArea ? areaChartStyles : lineChartStyles)}\n`;\n"],"mappings":"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","names":["AREA_VARIANTS","LineAreaChart"]}

package/dist/esm/sparkline/index.js

@@ -0,0 +1,123 @@
+import {
+  buildDimensionalAxis,
+  resolveTooltipTimezone
+} from "../chunk-NAKJY5PA.js";
+import {
+  ChartRenderer,
+  buildBaseChartOptions
+} from "../chunk-LPQXJJNT.js";
+import "../chunk-Z4LOM4OZ.js";
+
+// src/charts/sparkline/SparklineChart.tsx
+import { memo } from "react";
+import { useTheme } from "styled-components";
+
+// src/charts/sparkline/adapter.ts
+function highchartsType(variant) {
+  return variant === "bar" ? "column" : "line";
+}
+var SPARKLINE_SERIES_NAME = "sparkline";
+function buildSparklineChartOptions(props) {
+  const type = highchartsType(props.variant);
+  const tooltipTimezone = props.xAxis ? resolveTooltipTimezone(props.xAxis, props.timezone) : void 0;
+  const xAxis = props.xAxis ? {
+    ...buildDimensionalAxis(props.xAxis, tooltipTimezone ?? "UTC"),
+    visible: false
+  } : { type: "linear", visible: false };
+  const base = buildBaseChartOptions({
+    type,
+    description: props.description,
+    valueSuffix: props.valueSuffix,
+    timezone: tooltipTimezone
+  });
+  const options = {
+    ...base,
+    // Zero the outer spacing so the plot fills the (consumer-sized) wrapper.
+    chart: { type, styledMode: true, animation: false, spacing: [0, 0, 0, 0] },
+    xAxis,
+    yAxis: { visible: false },
+    plotOptions: {
+      series: {
+        animation: false,
+        // Decorative micro-chart: no per-point markers on the line.
+        marker: { enabled: false }
+      },
+      // Tight padding so bars read as a compact cluster.
+      column: {
+        pointPadding: 0.05,
+        groupPadding: 0.05,
+        borderWidth: 0,
+        borderRadius: 3
+      }
+    },
+    series: [
+      {
+        type,
+        name: SPARKLINE_SERIES_NAME,
+        data: [...props.data]
+      }
+    ]
+  };
+  return { options, tooltipTimezone };
+}
+
+// src/charts/shared/trend.ts
+function yValue(point) {
+  if (point == null) return null;
+  if (typeof point === "number") return point;
+  if (Array.isArray(point)) return point[1];
+  return point.y;
+}
+function computeTrend(data) {
+  const finite = data.map(yValue).filter((v) => v != null && Number.isFinite(v));
+  if (finite.length < 2) return "neutral";
+  const first = finite[0];
+  const last = finite[finite.length - 1];
+  if (last > first) return "positive";
+  if (last < first) return "negative";
+  return "neutral";
+}
+function resolveTrendColor(theme, trend) {
+  const decorative = theme.colors.container.border.decorative;
+  if (trend === "positive") return decorative.green;
+  if (trend === "negative") return decorative.red;
+  return decorative.neutral;
+}
+
+// src/charts/sparkline/SparklineChart.tsx
+import { jsx } from "react/jsx-runtime";
+var SparklineChart = memo(function SparklineChart2(props) {
+  const theme = useTheme();
+  const trend = computeTrend(props.data);
+  const trendColor = resolveTrendColor(theme, trend);
+  const { options, tooltipTimezone } = buildSparklineChartOptions(props);
+  const className = [
+    "seeds-sparkline",
+    `seeds-sparkline-${props.variant}`,
+    props.className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: { "--seeds-sparkline-color": trendColor },
+      children: /* @__PURE__ */ jsx(
+        ChartRenderer,
+        {
+          options,
+          series: [{ name: SPARKLINE_SERIES_NAME, color: trendColor }],
+          colors: [trendColor],
+          tooltip: props.tooltip,
+          timezone: tooltipTimezone,
+          invalidNumberLabel: props.invalidNumberLabel,
+          hideLegend: true,
+          onReady: props.onReady
+        }
+      )
+    }
+  );
+});
+export {
+  SparklineChart
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/sparkline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/sparkline/SparklineChart.tsx","../../../src/charts/sparkline/adapter.ts","../../../src/charts/shared/trend.ts"],"sourcesContent":["import { memo, type CSSProperties } from \"react\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\nimport { ChartRenderer } from \"../shared/chartBase\";\nimport { buildSparklineChartOptions, SPARKLINE_SERIES_NAME } from \"./adapter\";\nimport { computeTrend, resolveTrendColor } from \"./trend\";\nimport type { SparklineChartProps } from \"./types\";\n\n/**\n * SparklineChart — a compact, axis-less inline micro-chart in a `\"line\"` or\n * `\"bar\"` variant. The whole sparkline is colored by trend (auto-computed from\n * the data): green when rising, red when falling, neutral-gray when flat.\n *\n * Unlike the other v2 chart families this one carries no `styled-components`:\n * the wrapper is a plain `<div>` that accepts `className` (Tailwind sizing), and\n * the Highcharts styling lives in `sparkline.css`. Consumers must import\n * `@sproutsocial/seeds-react-data-viz/sparkline.css` once. The single trend\n * color is resolved from the JS theme and passed down as the\n * `--seeds-sparkline-color` CSS variable, so light/dark works without depending\n * on the theme's CSS-variable stylesheet.\n */\nexport const SparklineChart = memo(function SparklineChart(\n  props: SparklineChartProps\n) {\n  // The active theme resolves the single trend color. We read it directly rather\n  // than via useSeedsChartSetup — the sparkline has no categorical palette or\n  // series-limit concerns, so the hook's series machinery (and its dummy series\n  // input) would be dead weight. ChartRenderer below is itself a styled-\n  // component, so this adds no new dependency; the \"no styled-components\" trait\n  // of this family is about the wrapper being a plain <div> + static CSS.\n  const theme = useTheme() as TypeTheme;\n\n  const trend = computeTrend(props.data);\n  const trendColor = resolveTrendColor(theme, trend);\n\n  const { options, tooltipTimezone } = buildSparklineChartOptions(props);\n\n  const className = [\n    \"seeds-sparkline\",\n    `seeds-sparkline-${props.variant}`,\n    props.className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className={className}\n      style={{ \"--seeds-sparkline-color\": trendColor } as CSSProperties}\n    >\n      <ChartRenderer\n        options={options}\n        series={[{ name: SPARKLINE_SERIES_NAME, color: trendColor }]}\n        colors={[trendColor]}\n        tooltip={props.tooltip}\n        timezone={tooltipTimezone}\n        invalidNumberLabel={props.invalidNumberLabel}\n        hideLegend\n        onReady={props.onReady}\n      />\n    </div>\n  );\n});\n","import type { SeedsChartOptions, SeedsChartType } from \"../shared/chartBase\";\nimport { buildBaseChartOptions } from \"../shared/baseChartOptions\";\nimport {\n  buildDimensionalAxis,\n  resolveTooltipTimezone,\n} from \"../shared/axisOptions\";\nimport type { SparklineChartProps, SparklineVariant } from \"./types\";\n\n// A sparkline line is a `line`; a sparkline bar is a `column` (vertical bars).\nfunction highchartsType(variant: SparklineVariant): SeedsChartType {\n  return variant === \"bar\" ? \"column\" : \"line\";\n}\n\nconst SPARKLINE_SERIES_NAME = \"sparkline\";\n\nexport function buildSparklineChartOptions(props: SparklineChartProps): {\n  options: SeedsChartOptions;\n  /** Resolved timezone for the tooltip date formatter; undefined without a datetime axis. */\n  tooltipTimezone: string | undefined;\n} {\n  const type = highchartsType(props.variant);\n  const tooltipTimezone = props.xAxis\n    ? resolveTooltipTimezone(props.xAxis, props.timezone)\n    : undefined;\n\n  // A configured axis is placed but hidden (labels/line/ticks off). Without one\n  // we fall back to a hidden linear index axis.\n  const xAxis = props.xAxis\n    ? {\n        ...buildDimensionalAxis(props.xAxis, tooltipTimezone ?? \"UTC\"),\n        visible: false,\n      }\n    : { type: \"linear\" as const, visible: false };\n\n  const base = buildBaseChartOptions({\n    type,\n    description: props.description,\n    valueSuffix: props.valueSuffix,\n    timezone: tooltipTimezone,\n  });\n\n  const options: SeedsChartOptions = {\n    ...base,\n    // Zero the outer spacing so the plot fills the (consumer-sized) wrapper.\n    chart: { type, styledMode: true, animation: false, spacing: [0, 0, 0, 0] },\n    xAxis,\n    yAxis: { visible: false },\n    plotOptions: {\n      series: {\n        animation: false,\n        // Decorative micro-chart: no per-point markers on the line.\n        marker: { enabled: false },\n      },\n      // Tight padding so bars read as a compact cluster.\n      column: {\n        pointPadding: 0.05,\n        groupPadding: 0.05,\n        borderWidth: 0,\n        borderRadius: 3,\n      },\n    },\n    series: [\n      {\n        type,\n        name: SPARKLINE_SERIES_NAME,\n        data: [...props.data],\n      },\n    ],\n  };\n\n  return { options, tooltipTimezone };\n}\n\nexport { SPARKLINE_SERIES_NAME };\n","import type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\nimport type { ChartDataPoint } from \"./axis\";\n\n// Family-agnostic trend helpers, shared across chart families. First used by the\n// sparkline (colored entirely by its trend direction); reusable by any chart\n// that wants a sentiment/directional color from a single series (e.g. a\n// sentiment chart).\n\n/**\n * Trend direction derived from a series (first vs. last finite value): rising →\n * `\"positive\"`, falling → `\"negative\"`, flat → `\"neutral\"`.\n */\nexport type Trend = \"positive\" | \"negative\" | \"neutral\";\n\n/** Extract the numeric y-value from a bare number, tuple, or `{ x, y }` point. */\nfunction yValue(point: ChartDataPoint): number | null {\n  if (point == null) return null;\n  if (typeof point === \"number\") return point;\n  if (Array.isArray(point)) return point[1];\n  return point.y;\n}\n\n/**\n * Derive the trend from the series by comparing the first finite value to the\n * last finite value: rising → `\"positive\"`, falling → `\"negative\"`, equal (or\n * fewer than two finite values) → `\"neutral\"`.\n */\nexport function computeTrend(data: ReadonlyArray<ChartDataPoint>): Trend {\n  const finite = data\n    .map(yValue)\n    .filter((v): v is number => v != null && Number.isFinite(v));\n\n  if (finite.length < 2) return \"neutral\";\n\n  const first = finite[0]!;\n  const last = finite[finite.length - 1]!;\n\n  if (last > first) return \"positive\";\n  if (last < first) return \"negative\";\n  return \"neutral\";\n}\n\n/**\n * Resolve the trend to a Seeds decorative highlight/accent color: positive →\n * vibrant green (green-500), negative → vibrant red (red-600), neutral → middle\n * gray (neutral-600). These highlight tones are theme-stable — the same value in\n * light and dark — and are designed to read as accents on either surface.\n */\nexport function resolveTrendColor(theme: TypeTheme, trend: Trend): string {\n  const decorative = theme.colors.container.border.decorative;\n  if (trend === \"positive\") return decorative.green;\n  if (trend === \"negative\") return decorative.red;\n  return decorative.neutral;\n}\n"],"mappings":"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","names":["SparklineChart"]}

package/dist/index.d.mts

@@ -226,6 +226,9 @@ type TypeDonutChartProps = Readonly<{
     } & TypeDonutChartDataItem>) => void;
     tooltipClickLabel?: ReactNode;
 }>;
+/**
+ * @deprecated Use `DonutChart` from `@sproutsocial/seeds-react-data-viz/donut` instead.
+ */
 declare const DonutChart: react.NamedExoticComponent<Readonly<{
     data: ReadonlyArray<TypeDonutChartDataItem>;
     numberLocale: Intl.LocalesArgument;

package/dist/index.d.ts

@@ -226,6 +226,9 @@ type TypeDonutChartProps = Readonly<{
     } & TypeDonutChartDataItem>) => void;
     tooltipClickLabel?: ReactNode;
 }>;
+/**
+ * @deprecated Use `DonutChart` from `@sproutsocial/seeds-react-data-viz/donut` instead.
+ */
 declare const DonutChart: react.NamedExoticComponent<Readonly<{
     data: ReadonlyArray<TypeDonutChartDataItem>;
     numberLocale: Intl.LocalesArgument;