@automattic/charts 0.50.2 → 0.52.0

package/dist/index.d.ts

@@ -1,20 +1,21 @@
-export { BarChart, BarChartUnresponsive } from './components/bar-chart/index.js';
-export { LineChart, LineChartUnresponsive } from './components/line-chart/index.js';
-export { A as AnnotationStyles, B as BaseChartProps, i as ButtonWithPopover, C as ChartTheme, e as CompleteChartTheme, D as DataPoint, b as DataPointDate, d as DataPointPercentage, G as GradientStop, g as GridProps, L as LeaderboardEntry, M as MultipleDataPointsDate, O as Optional, a as OrientationType, P as PopoverButtonAttributes, j as PopoverElement, h as PopoverElementAttributes, f as ScaleOptions, c as SeriesData, S as SeriesDataOptions, T as ToggleEvent } from './types-4wyyzjot.js';
+export { BarChart, BarChartUnresponsive } from './charts/bar-chart/index.js';
+export { LineChart, LineChartUnresponsive } from './charts/line-chart/index.js';
+export { A as AnnotationStyles, B as BaseChartProps, i as ButtonWithPopover, C as ChartTheme, e as CompleteChartTheme, D as DataPoint, b as DataPointDate, d as DataPointPercentage, G as GradientStop, g as GridProps, L as LeaderboardEntry, M as MultipleDataPointsDate, O as Optional, a as OrientationType, P as PopoverButtonAttributes, j as PopoverElement, h as PopoverElementAttributes, f as ScaleOptions, c as SeriesData, S as SeriesDataOptions, T as ToggleEvent } from './types-BtYG-Fdk.js';
 export { EventHandlerParams, GridStyles, LineStyles } from '@visx/xychart';
 export { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
-export { PieChart, PieChartProps, PieChartUnresponsive } from './components/pie-chart/index.js';
-export { PieSemiCircleChart, PieSemiCircleChartUnresponsive } from './components/pie-semi-circle-chart/index.js';
-export { BarListChart, BarListChartUnresponsive } from './components/bar-list-chart/index.js';
-export { L as LeaderboardChart, a as LeaderboardChartUnresponsive } from './leaderboard-chart-B3dPiEl8.js';
+export { PieChart, PieChartProps, PieChartUnresponsive } from './charts/pie-chart/index.js';
+export { PieSemiCircleChart, PieSemiCircleChartUnresponsive } from './charts/pie-semi-circle-chart/index.js';
+export { BarListChart, BarListChartUnresponsive } from './charts/bar-list-chart/index.js';
+export { L as LeaderboardChart, a as LeaderboardChartUnresponsive } from './leaderboard-chart-Bh8M5JWL.js';
 export { L as Legend } from './legend-jjMmhSg3.js';
 export { LegendValueDisplay, useChartLegendItems } from './components/legend/index.js';
 export { B as BaseLegendItem } from './types-C05PdDJa.js';
-export { ConversionFunnelChart } from './components/conversion-funnel-chart/index.js';
+export { ConversionFunnelChart } from './charts/conversion-funnel-chart/index.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { R as ResponsiveConfig } from './with-responsive-Cp2qnQPo.js';
+import * as react from 'react';
 export { B as BaseTooltip } from './base-tooltip-DOq93wjU.js';
-export { b as GlobalChartsContext, G as GlobalChartsProvider, G as ThemeProvider, d as defaultTheme, j as jetpackTheme, u as useGlobalChartsContext, a as useGlobalChartsTheme, w as wooTheme } from './themes-CNy453Lb.js';
-import 'react';
-import './with-responsive-Cp2qnQPo.js';
+export { b as GlobalChartsContext, G as GlobalChartsProvider, G as ThemeProvider, d as defaultTheme, u as useGlobalChartsContext, a as useGlobalChartsTheme } from './themes-09M-mQE6.js';
 import '@visx/annotation/lib/components/CircleSubject';
 import '@visx/annotation/lib/components/Connector';
 import '@visx/annotation/lib/components/Label';
@@ -25,6 +26,104 @@ import '@visx/scale';
 import '@visx/text/lib/Text';
 import './types-DQNnq5Fr.js';
 import '@visx/shape/lib/shapes/Pie';
-import 'react/jsx-runtime';
 import '@visx/text';
 import '@visx/legend';
+
+type SparklineDataPoint = number;
+type GradientConfig = {
+    /**
+     * Start color for gradient (defaults to color prop)
+     */
+    from?: string;
+    /**
+     * End color for gradient (defaults to theme backgroundColor)
+     */
+    to?: string;
+    /**
+     * Start opacity (0-1)
+     * @default 0.5
+     */
+    fromOpacity?: number;
+    /**
+     * End opacity (0-1)
+     * @default 0.0
+     */
+    toOpacity?: number;
+};
+interface SparklineProps {
+    /**
+     * Array of numeric values to plot
+     * @example [10, 25, 15, 30, 22, 35]
+     */
+    data: SparklineDataPoint[];
+    /**
+     * Width of the sparkline in pixels
+     * @default 100
+     */
+    width?: number;
+    /**
+     * Height of the sparkline in pixels
+     * @default 40
+     */
+    height?: number;
+    /**
+     * Size (used by responsive variant, equivalent to width for square charts)
+     */
+    size?: number;
+    /**
+     * Color for the line stroke (hex or CSS color)
+     * @default Theme color (first color in theme.colors array)
+     */
+    color?: string;
+    /**
+     * Line stroke width in pixels
+     * @default 1
+     */
+    strokeWidth?: number;
+    /**
+     * Whether to render the gradient fill beneath the line
+     * @default true
+     */
+    withGradientFill?: boolean;
+    /**
+     * Gradient configuration for area fill
+     * If not provided, uses color prop with default opacity values
+     */
+    gradient?: GradientConfig;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Chart ID for unique gradient/element identification
+     */
+    chartId?: string;
+    /**
+     * Margin around the chart
+     * @default { top: 2, right: 2, bottom: 2, left: 2 }
+     */
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+}
+
+/**
+ * Sparkline - A minimal line chart for inline data visualization.
+ *
+ * Sparklines are compact charts designed to be embedded inline with text or
+ * displayed in small spaces like table cells or dashboards. They show trends
+ * without axes, labels, or other chart chrome.
+ *
+ * This component is built on top of LineChart with preconfigured settings
+ * for minimal display (no axes, grid, tooltips, or legend).
+ */
+declare const SparklineUnresponsive: react.ForwardRefExoticComponent<SparklineProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Responsive Sparkline chart component
+ */
+declare const Sparkline: ({ resizeDebounceTime, maxWidth, aspectRatio, ...chartProps }: Pick<Partial<SparklineProps>, "width" | "height" | "size"> & Omit<SparklineProps, "width" | "height" | "size"> & ResponsiveConfig) => react_jsx_runtime.JSX.Element;
+
+export { Sparkline, SparklineUnresponsive };

package/dist/index.js

@@ -1,52 +1,202 @@
-import {
-  BarListChart,
-  BarListChartResponsive
-} from "./chunk-EKVLCYHS.js";
-import {
-  ConversionFunnelChartWithProvider
-} from "./chunk-XVMWJANV.js";
-import {
-  LeaderboardChart,
-  LeaderboardChartResponsive
-} from "./chunk-RUG2O62B.js";
 import {
   LineChart,
   LineChartResponsive
-} from "./chunk-6SGGF26Z.js";
+} from "./chunk-AI6GM6HS.js";
 import {
   PieChart,
   PieChartResponsive
-} from "./chunk-6WQWN5BF.js";
+} from "./chunk-IDTLZ7KT.js";
 import {
   PieSemiCircleChart,
   PieSemiCircleChartResponsive
-} from "./chunk-VOWX5TBY.js";
-import "./chunk-3OVXJFQY.js";
-import "./chunk-D3DZT2EK.js";
+} from "./chunk-E6VKSUGP.js";
+import "./chunk-A3AEEGKR.js";
 import "./chunk-NFRB2POF.js";
+import {
+  BarListChart,
+  BarListChartResponsive
+} from "./chunk-DILKZ4MP.js";
 import {
   BarChart,
   BarChartResponsive
-} from "./chunk-PTEEI2QM.js";
-import "./chunk-D3E235JJ.js";
-import {
-  Legend,
-  useChartLegendItems
-} from "./chunk-7OWIZ5S7.js";
+} from "./chunk-GSG54JGM.js";
 import {
   BaseTooltip
 } from "./chunk-5XI443YP.js";
+import {
+  ConversionFunnelChartWithProvider
+} from "./chunk-624IQX64.js";
+import {
+  LeaderboardChart,
+  LeaderboardChartResponsive
+} from "./chunk-S5UDYA4M.js";
+import "./chunk-CEZGL6YP.js";
+import {
+  withResponsive
+} from "./chunk-NONODB3K.js";
+import {
+  Legend,
+  useChartLegendItems
+} from "./chunk-EELV2LG7.js";
 import {
   GlobalChartsContext,
   GlobalChartsProvider,
   defaultTheme,
-  jetpackTheme,
   useGlobalChartsContext,
-  useGlobalChartsTheme,
-  wooTheme
-} from "./chunk-MRCTAUHL.js";
+  useGlobalChartsTheme
+} from "./chunk-ULRFJ3IU.js";
 import "./chunk-7IZD3F7B.js";
 import "./chunk-G3PMV62Z.js";
+
+// src/charts/sparkline/sparkline.tsx
+import clsx from "clsx";
+import { useMemo, forwardRef } from "react";
+
+// src/charts/sparkline/sparkline.module.scss
+var sparkline_module_default = {
+  "sparkline": "a8ccharts-o-3Z8B",
+  "sparkline--empty": "a8ccharts-CbLbcd"
+};
+
+// src/charts/sparkline/sparkline.tsx
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_WIDTH = 100;
+var DEFAULT_HEIGHT = 40;
+var transformToSeriesData = (data, color, strokeWidth) => {
+  const baseDate = new Date(2e3, 0, 1);
+  return [
+    {
+      label: "sparkline",
+      data: data.map((value, index) => ({
+        date: new Date(baseDate.getTime() + index * 864e5),
+        // Add days
+        value
+      })),
+      options: {
+        stroke: color,
+        seriesLineStyle: strokeWidth ? { strokeWidth } : void 0
+      }
+    }
+  ];
+};
+var SparklineComponent = forwardRef(
+  ({
+    data,
+    width = DEFAULT_WIDTH,
+    height = DEFAULT_HEIGHT,
+    color,
+    strokeWidth: strokeWidthProp,
+    withGradientFill = true,
+    gradient,
+    className,
+    chartId,
+    margin: marginProp
+  }, ref) => {
+    const theme = useGlobalChartsTheme();
+    const themeStrokeWidth = theme.sparkline?.strokeWidth ?? 1.5;
+    const strokeWidth = strokeWidthProp ?? themeStrokeWidth;
+    const seriesData = useMemo(() => {
+      if (!data || data.length === 0) {
+        return [];
+      }
+      return transformToSeriesData(data, color, strokeWidth);
+    }, [data, color, strokeWidth]);
+    const finalMargin = useMemo(() => {
+      const themeMargin = theme.sparkline?.margin ?? { top: 2, right: 2, bottom: 2, left: 2 };
+      const margin = marginProp ?? themeMargin;
+      return {
+        ...themeMargin,
+        ...margin
+      };
+    }, [marginProp, theme.sparkline?.margin]);
+    const seriesWithGradient = useMemo(() => {
+      if (!gradient || seriesData.length === 0) {
+        return seriesData;
+      }
+      return seriesData.map((series) => ({
+        ...series,
+        options: {
+          ...series.options,
+          gradient: {
+            from: gradient.from || color || "#000000",
+            to: gradient.to || "#ffffff",
+            fromOpacity: gradient.fromOpacity ?? 0.5,
+            toOpacity: gradient.toOpacity ?? 0
+          }
+        }
+      }));
+    }, [seriesData, gradient, color]);
+    if (!data || data.length === 0) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: clsx(
+            "sparkline",
+            sparkline_module_default.sparkline,
+            sparkline_module_default["sparkline--empty"],
+            className
+          ),
+          style: { width, height },
+          "data-testid": "sparkline-empty"
+        }
+      );
+    }
+    if (data.length === 1) {
+      const cx = width / 2;
+      const cy = height / 2;
+      const resolvedColor = color || "#000000";
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: clsx(
+            "sparkline",
+            sparkline_module_default.sparkline,
+            sparkline_module_default["sparkline--single-point"],
+            className
+          ),
+          style: { width, height },
+          "data-testid": "sparkline-single-point",
+          children: /* @__PURE__ */ jsx("svg", { width, height, "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx, cy, r: strokeWidth * 1.5, fill: resolvedColor }) })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx("sparkline", sparkline_module_default.sparkline, className),
+        "data-testid": "sparkline",
+        children: /* @__PURE__ */ jsx(
+          LineChart,
+          {
+            data: seriesWithGradient,
+            width,
+            height,
+            margin: finalMargin,
+            chartId,
+            withGradientFill,
+            withTooltips: false,
+            showLegend: false,
+            gridVisibility: "none",
+            options: {
+              axis: {
+                x: { display: false },
+                y: { display: false }
+              }
+            },
+            curveType: "monotone"
+          }
+        )
+      }
+    );
+  }
+);
+SparklineComponent.displayName = "SparklineComponent";
+var SparklineUnresponsive = SparklineComponent;
+SparklineUnresponsive.displayName = "SparklineUnresponsive";
+var Sparkline = withResponsive(SparklineUnresponsive);
 export {
   BarChartResponsive as BarChart,
   BarChart as BarChartUnresponsive,
@@ -65,12 +215,12 @@ export {
   PieChart as PieChartUnresponsive,
   PieSemiCircleChartResponsive as PieSemiCircleChart,
   PieSemiCircleChart as PieSemiCircleChartUnresponsive,
+  Sparkline,
+  SparklineUnresponsive,
   GlobalChartsProvider as ThemeProvider,
   defaultTheme,
-  jetpackTheme,
   useChartLegendItems,
   useGlobalChartsContext,
-  useGlobalChartsTheme,
-  wooTheme
+  useGlobalChartsTheme
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"sources":["../src/charts/sparkline/sparkline.tsx","../src/charts/sparkline/sparkline.module.scss"],"sourcesContent":["import clsx from 'clsx';\nimport { useMemo, forwardRef } from 'react';\nimport { useGlobalChartsTheme } from '../../providers';\nimport { LineChartUnresponsive } from '../line-chart';\nimport { withResponsive } from '../private/with-responsive';\nimport styles from './sparkline.module.scss';\nimport type { SparklineProps } from './types';\nimport type { SeriesData } from '../../types';\n\nconst DEFAULT_WIDTH = 100;\nconst DEFAULT_HEIGHT = 40;\n\n/**\n * Transforms a simple number array into SeriesData format for LineChart.\n * Uses index-based dates to create a linear x-axis.\n *\n * @param data        - Array of numeric values to plot\n * @param color       - Optional color for the line stroke\n * @param strokeWidth - Optional stroke width for the line\n * @return SeriesData array suitable for LineChart\n */\nconst transformToSeriesData = (\n\tdata: number[],\n\tcolor?: string,\n\tstrokeWidth?: number\n): SeriesData[] => {\n\t// Use a fixed base date and increment by index to create linear spacing\n\tconst baseDate = new Date( 2000, 0, 1 );\n\n\treturn [\n\t\t{\n\t\t\tlabel: 'sparkline',\n\t\t\tdata: data.map( ( value, index ) => ( {\n\t\t\t\tdate: new Date( baseDate.getTime() + index * 86400000 ), // Add days\n\t\t\t\tvalue,\n\t\t\t} ) ),\n\t\t\toptions: {\n\t\t\t\tstroke: color,\n\t\t\t\tseriesLineStyle: strokeWidth ? { strokeWidth } : undefined,\n\t\t\t},\n\t\t},\n\t];\n};\n\nconst SparklineComponent = forwardRef< HTMLDivElement, SparklineProps >(\n\t(\n\t\t{\n\t\t\tdata,\n\t\t\twidth = DEFAULT_WIDTH,\n\t\t\theight = DEFAULT_HEIGHT,\n\t\t\tcolor,\n\t\t\tstrokeWidth: strokeWidthProp,\n\t\t\twithGradientFill = true,\n\t\t\tgradient,\n\t\t\tclassName,\n\t\t\tchartId,\n\t\t\tmargin: marginProp,\n\t\t},\n\t\tref\n\t) => {\n\t\tconst theme = useGlobalChartsTheme();\n\n\t\t// Get theme defaults for sparkline\n\t\tconst themeStrokeWidth = theme.sparkline?.strokeWidth ?? 1.5;\n\n\t\t// Use prop values or fall back to theme defaults\n\t\tconst strokeWidth = strokeWidthProp ?? themeStrokeWidth;\n\n\t\t// Transform number[] to SeriesData[] for LineChart\n\t\tconst seriesData = useMemo( () => {\n\t\t\tif ( ! data || data.length === 0 ) {\n\t\t\t\treturn [];\n\t\t\t}\n\t\t\treturn transformToSeriesData( data, color, strokeWidth );\n\t\t}, [ data, color, strokeWidth ] );\n\n\t\t// Merge margins with theme defaults\n\t\tconst finalMargin = useMemo( () => {\n\t\t\tconst themeMargin = theme.sparkline?.margin ?? { top: 2, right: 2, bottom: 2, left: 2 };\n\t\t\tconst margin = marginProp ?? themeMargin;\n\t\t\treturn {\n\t\t\t\t...themeMargin,\n\t\t\t\t...margin,\n\t\t\t};\n\t\t}, [ marginProp, theme.sparkline?.margin ] );\n\n\t\t// Build gradient options for the series if custom gradient is provided\n\t\t// Note: This must be called before any early returns to follow React hooks rules\n\t\tconst seriesWithGradient = useMemo( () => {\n\t\t\tif ( ! gradient || seriesData.length === 0 ) {\n\t\t\t\treturn seriesData;\n\t\t\t}\n\n\t\t\treturn seriesData.map( series => ( {\n\t\t\t\t...series,\n\t\t\t\toptions: {\n\t\t\t\t\t...series.options,\n\t\t\t\t\tgradient: {\n\t\t\t\t\t\tfrom: gradient.from || color || '#000000',\n\t\t\t\t\t\tto: gradient.to || '#ffffff',\n\t\t\t\t\t\tfromOpacity: gradient.fromOpacity ?? 0.5,\n\t\t\t\t\t\ttoOpacity: gradient.toOpacity ?? 0.0,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t} ) );\n\t\t}, [ seriesData, gradient, color ] );\n\n\t\t// Handle empty data\n\t\tif ( ! data || data.length === 0 ) {\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'sparkline',\n\t\t\t\t\t\tstyles.sparkline,\n\t\t\t\t\t\tstyles[ 'sparkline--empty' ],\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ { width, height } }\n\t\t\t\t\tdata-testid=\"sparkline-empty\"\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\t// Handle single data point - render a simple dot\n\t\tif ( data.length === 1 ) {\n\t\t\tconst cx = width / 2;\n\t\t\tconst cy = height / 2;\n\t\t\tconst resolvedColor = color || '#000000';\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'sparkline',\n\t\t\t\t\t\tstyles.sparkline,\n\t\t\t\t\t\tstyles[ 'sparkline--single-point' ],\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ { width, height } }\n\t\t\t\t\tdata-testid=\"sparkline-single-point\"\n\t\t\t\t>\n\t\t\t\t\t<svg width={ width } height={ height } aria-hidden=\"true\">\n\t\t\t\t\t\t<circle cx={ cx } cy={ cy } r={ strokeWidth * 1.5 } fill={ resolvedColor } />\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ clsx( 'sparkline', styles.sparkline, className ) }\n\t\t\t\tdata-testid=\"sparkline\"\n\t\t\t>\n\t\t\t\t<LineChartUnresponsive\n\t\t\t\t\tdata={ seriesWithGradient }\n\t\t\t\t\twidth={ width }\n\t\t\t\t\theight={ height }\n\t\t\t\t\tmargin={ finalMargin }\n\t\t\t\t\tchartId={ chartId }\n\t\t\t\t\twithGradientFill={ withGradientFill }\n\t\t\t\t\twithTooltips={ false }\n\t\t\t\t\tshowLegend={ false }\n\t\t\t\t\tgridVisibility=\"none\"\n\t\t\t\t\toptions={ {\n\t\t\t\t\t\taxis: {\n\t\t\t\t\t\t\tx: { display: false },\n\t\t\t\t\t\t\ty: { display: false },\n\t\t\t\t\t\t},\n\t\t\t\t\t} }\n\t\t\t\t\tcurveType=\"monotone\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n);\n\nSparklineComponent.displayName = 'SparklineComponent';\n\n/**\n * Sparkline - A minimal line chart for inline data visualization.\n *\n * Sparklines are compact charts designed to be embedded inline with text or\n * displayed in small spaces like table cells or dashboards. They show trends\n * without axes, labels, or other chart chrome.\n *\n * This component is built on top of LineChart with preconfigured settings\n * for minimal display (no axes, grid, tooltips, or legend).\n */\nconst SparklineUnresponsive = SparklineComponent;\n\nSparklineUnresponsive.displayName = 'SparklineUnresponsive';\n\n/**\n * Responsive Sparkline chart component\n */\nconst Sparkline = withResponsive< SparklineProps >( SparklineUnresponsive );\n\nexport { Sparkline as default, SparklineUnresponsive };\n","import 'css-chunk:src/charts/sparkline/sparkline.module.scss';export default {\n  \"sparkline\": \"a8ccharts-o-3Z8B\",\n  \"sparkline--empty\": \"a8ccharts-CbLbcd\"\n};"],"mappings":"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","names":[]}

package/dist/{leaderboard-chart-BlBexVz4.d.cts → leaderboard-chart-Bf7z7SoM.d.cts}

@@ -3,7 +3,7 @@ import { R as ResponsiveConfig } from './with-responsive-Cp2qnQPo.cjs';
 import * as react from 'react';
 import { ReactNode, FC } from 'react';
 import { a as BaseLegendProps, B as BaseLegendItem } from './types-C05PdDJa.cjs';
-import { B as BaseChartProps, L as LeaderboardEntry } from './types-4wyyzjot.cjs';
+import { B as BaseChartProps, L as LeaderboardEntry } from './types-BtYG-Fdk.cjs';
 
 interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, 'className' | 'data' | 'showLegend' | 'legendOrientation' | 'legendPosition' | 'legendAlignment' | 'legendShape' | 'chartId' | 'width' | 'height' | 'size' | 'legendInteractive' | 'animation'> {
     /**

package/dist/{leaderboard-chart-B3dPiEl8.d.ts → leaderboard-chart-Bh8M5JWL.d.ts}

@@ -3,7 +3,7 @@ import { R as ResponsiveConfig } from './with-responsive-Cp2qnQPo.js';
 import * as react from 'react';
 import { ReactNode, FC } from 'react';
 import { a as BaseLegendProps, B as BaseLegendItem } from './types-C05PdDJa.js';
-import { B as BaseChartProps, L as LeaderboardEntry } from './types-4wyyzjot.js';
+import { B as BaseChartProps, L as LeaderboardEntry } from './types-BtYG-Fdk.js';
 
 interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, 'className' | 'data' | 'showLegend' | 'legendOrientation' | 'legendPosition' | 'legendAlignment' | 'legendShape' | 'chartId' | 'width' | 'height' | 'size' | 'legendInteractive' | 'animation'> {
     /**

package/dist/providers/index.cjs

@@ -6,9 +6,7 @@
 
 
 
-
-
-var _chunkN4ZDNOPYcjs = require('../chunk-N4ZDNOPY.cjs');
+var _chunk44EBMDFIcjs = require('../chunk-44EBMDFI.cjs');
 require('../chunk-FI5B6KSH.cjs');
 require('../chunk-EMMSS5I5.cjs');
 
@@ -19,7 +17,5 @@ require('../chunk-EMMSS5I5.cjs');
 
 
 
-
-
-exports.GlobalChartsContext = _chunkN4ZDNOPYcjs.GlobalChartsContext; exports.GlobalChartsProvider = _chunkN4ZDNOPYcjs.GlobalChartsProvider; exports.defaultTheme = _chunkN4ZDNOPYcjs.defaultTheme; exports.jetpackTheme = _chunkN4ZDNOPYcjs.jetpackTheme; exports.useChartId = _chunkN4ZDNOPYcjs.useChartId; exports.useChartRegistration = _chunkN4ZDNOPYcjs.useChartRegistration; exports.useGlobalChartsContext = _chunkN4ZDNOPYcjs.useGlobalChartsContext; exports.useGlobalChartsTheme = _chunkN4ZDNOPYcjs.useGlobalChartsTheme; exports.wooTheme = _chunkN4ZDNOPYcjs.wooTheme;
+exports.GlobalChartsContext = _chunk44EBMDFIcjs.GlobalChartsContext; exports.GlobalChartsProvider = _chunk44EBMDFIcjs.GlobalChartsProvider; exports.defaultTheme = _chunk44EBMDFIcjs.defaultTheme; exports.useChartId = _chunk44EBMDFIcjs.useChartId; exports.useChartRegistration = _chunk44EBMDFIcjs.useChartRegistration; exports.useGlobalChartsContext = _chunk44EBMDFIcjs.useGlobalChartsContext; exports.useGlobalChartsTheme = _chunk44EBMDFIcjs.useGlobalChartsTheme;
 //# sourceMappingURL=index.cjs.map

package/dist/providers/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/providers/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,ojBAAC","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/providers/index.cjs"}
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/providers/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACF,8cAAC","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/providers/index.cjs"}

package/dist/providers/index.d.cts

@@ -1,7 +1,7 @@
-export { C as ChartRegistration, E as ElementStyles, e as GetElementStylesParams, b as GlobalChartsContext, c as GlobalChartsContextValue, G as GlobalChartsProvider, d as defaultTheme, j as jetpackTheme, u as useGlobalChartsContext, a as useGlobalChartsTheme, w as wooTheme } from '../themes-Dv70Dz7B.cjs';
+export { C as ChartRegistration, E as ElementStyles, e as GetElementStylesParams, b as GlobalChartsContext, c as GlobalChartsContextValue, G as GlobalChartsProvider, d as defaultTheme, u as useGlobalChartsContext, a as useGlobalChartsTheme } from '../themes-DYhtyXtJ.cjs';
 import { B as BaseLegendItem } from '../types-C05PdDJa.cjs';
 import 'react';
-import '../types-4wyyzjot.cjs';
+import '../types-BtYG-Fdk.cjs';
 import '@visx/annotation/lib/components/CircleSubject';
 import '@visx/annotation/lib/components/Connector';
 import '@visx/annotation/lib/components/Label';

package/dist/providers/index.d.ts

@@ -1,7 +1,7 @@
-export { C as ChartRegistration, E as ElementStyles, e as GetElementStylesParams, b as GlobalChartsContext, c as GlobalChartsContextValue, G as GlobalChartsProvider, d as defaultTheme, j as jetpackTheme, u as useGlobalChartsContext, a as useGlobalChartsTheme, w as wooTheme } from '../themes-CNy453Lb.js';
+export { C as ChartRegistration, E as ElementStyles, e as GetElementStylesParams, b as GlobalChartsContext, c as GlobalChartsContextValue, G as GlobalChartsProvider, d as defaultTheme, u as useGlobalChartsContext, a as useGlobalChartsTheme } from '../themes-09M-mQE6.js';
 import { B as BaseLegendItem } from '../types-C05PdDJa.js';
 import 'react';
-import '../types-4wyyzjot.js';
+import '../types-BtYG-Fdk.js';
 import '@visx/annotation/lib/components/CircleSubject';
 import '@visx/annotation/lib/components/Connector';
 import '@visx/annotation/lib/components/Label';

package/dist/providers/index.js

@@ -2,24 +2,20 @@ import {
   GlobalChartsContext,
   GlobalChartsProvider,
   defaultTheme,
-  jetpackTheme,
   useChartId,
   useChartRegistration,
   useGlobalChartsContext,
-  useGlobalChartsTheme,
-  wooTheme
-} from "../chunk-MRCTAUHL.js";
+  useGlobalChartsTheme
+} from "../chunk-ULRFJ3IU.js";
 import "../chunk-7IZD3F7B.js";
 import "../chunk-G3PMV62Z.js";
 export {
   GlobalChartsContext,
   GlobalChartsProvider,
   defaultTheme,
-  jetpackTheme,
   useChartId,
   useChartRegistration,
   useGlobalChartsContext,
-  useGlobalChartsTheme,
-  wooTheme
+  useGlobalChartsTheme
 };
 //# sourceMappingURL=index.js.map

package/dist/{themes-CNy453Lb.d.ts → themes-09M-mQE6.d.ts}

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, CSSProperties, FC } from 'react';
-import { e as CompleteChartTheme, c as SeriesData, d as DataPointPercentage, C as ChartTheme } from './types-4wyyzjot.js';
+import { e as CompleteChartTheme, c as SeriesData, d as DataPointPercentage, C as ChartTheme } from './types-BtYG-Fdk.js';
 import { B as BaseLegendItem } from './types-C05PdDJa.js';
 import { LegendShape } from '@visx/legend/lib/types';
 import { LineStyles, GlyphProps } from '@visx/xychart';
@@ -54,13 +54,5 @@ declare const useGlobalChartsTheme: () => CompleteChartTheme;
  * Default theme configuration
  */
 declare const defaultTheme: CompleteChartTheme;
-/**
- * Jetpack theme configuration
- */
-declare const jetpackTheme: ChartTheme;
-/**
- * Woo theme configuration
- */
-declare const wooTheme: ChartTheme;
 
-export { type ChartRegistration as C, type ElementStyles as E, GlobalChartsProvider as G, useGlobalChartsTheme as a, GlobalChartsContext as b, type GlobalChartsContextValue as c, defaultTheme as d, type GetElementStylesParams as e, jetpackTheme as j, useGlobalChartsContext as u, wooTheme as w };
+export { type ChartRegistration as C, type ElementStyles as E, GlobalChartsProvider as G, useGlobalChartsTheme as a, GlobalChartsContext as b, type GlobalChartsContextValue as c, defaultTheme as d, type GetElementStylesParams as e, useGlobalChartsContext as u };

package/dist/{themes-Dv70Dz7B.d.cts → themes-DYhtyXtJ.d.cts}

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, CSSProperties, FC } from 'react';
-import { e as CompleteChartTheme, c as SeriesData, d as DataPointPercentage, C as ChartTheme } from './types-4wyyzjot.cjs';
+import { e as CompleteChartTheme, c as SeriesData, d as DataPointPercentage, C as ChartTheme } from './types-BtYG-Fdk.cjs';
 import { B as BaseLegendItem } from './types-C05PdDJa.cjs';
 import { LegendShape } from '@visx/legend/lib/types';
 import { LineStyles, GlyphProps } from '@visx/xychart';
@@ -54,13 +54,5 @@ declare const useGlobalChartsTheme: () => CompleteChartTheme;
  * Default theme configuration
  */
 declare const defaultTheme: CompleteChartTheme;
-/**
- * Jetpack theme configuration
- */
-declare const jetpackTheme: ChartTheme;
-/**
- * Woo theme configuration
- */
-declare const wooTheme: ChartTheme;
 
-export { type ChartRegistration as C, type ElementStyles as E, GlobalChartsProvider as G, useGlobalChartsTheme as a, GlobalChartsContext as b, type GlobalChartsContextValue as c, defaultTheme as d, type GetElementStylesParams as e, jetpackTheme as j, useGlobalChartsContext as u, wooTheme as w };
+export { type ChartRegistration as C, type ElementStyles as E, GlobalChartsProvider as G, useGlobalChartsTheme as a, GlobalChartsContext as b, type GlobalChartsContextValue as c, defaultTheme as d, type GetElementStylesParams as e, useGlobalChartsContext as u };

package/dist/{types-4wyyzjot.d.cts → types-BtYG-Fdk.d.cts}

@@ -198,6 +198,18 @@ type ChartTheme = {
     lineChart?: {
         lineStyles?: Partial<Record<NonNullable<SeriesDataOptions['type']>, LineStyles>>;
     };
+    /** Sparkline specific settings */
+    sparkline?: {
+        /** Margin around the sparkline chart */
+        margin?: {
+            top?: number;
+            right?: number;
+            bottom?: number;
+            left?: number;
+        };
+        /** Stroke width for the sparkline line */
+        strokeWidth?: number;
+    };
 };
 /**
  * Theme configuration with all properties guaranteed to be defined.
@@ -209,6 +221,9 @@ type CompleteChartTheme = Required<ChartTheme> & {
     lineChart: {
         lineStyles: Record<NonNullable<SeriesDataOptions['type']>, LineStyles>;
     };
+    sparkline: Required<NonNullable<ChartTheme['sparkline']>> & {
+        margin: Required<NonNullable<ChartTheme['sparkline']>['margin']>;
+    };
 };
 declare type AxisOptions = {
     orientation?: OrientationType;
@@ -218,6 +233,10 @@ declare type AxisOptions = {
     labelClassName?: string;
     tickClassName?: string;
     tickFormat?: TickFormatter<ScaleInput<AxisScale>>;
+    /**
+     * Whether to display this axis. Defaults to true.
+     */
+    display?: boolean;
     /**
      * For more control over rendering or to add event handlers to datum, pass a function as children.
      */

package/dist/{types-4wyyzjot.d.ts → types-BtYG-Fdk.d.ts}

@@ -198,6 +198,18 @@ type ChartTheme = {
     lineChart?: {
         lineStyles?: Partial<Record<NonNullable<SeriesDataOptions['type']>, LineStyles>>;
     };
+    /** Sparkline specific settings */
+    sparkline?: {
+        /** Margin around the sparkline chart */
+        margin?: {
+            top?: number;
+            right?: number;
+            bottom?: number;
+            left?: number;
+        };
+        /** Stroke width for the sparkline line */
+        strokeWidth?: number;
+    };
 };
 /**
  * Theme configuration with all properties guaranteed to be defined.
@@ -209,6 +221,9 @@ type CompleteChartTheme = Required<ChartTheme> & {
     lineChart: {
         lineStyles: Record<NonNullable<SeriesDataOptions['type']>, LineStyles>;
     };
+    sparkline: Required<NonNullable<ChartTheme['sparkline']>> & {
+        margin: Required<NonNullable<ChartTheme['sparkline']>['margin']>;
+    };
 };
 declare type AxisOptions = {
     orientation?: OrientationType;
@@ -218,6 +233,10 @@ declare type AxisOptions = {
     labelClassName?: string;
     tickClassName?: string;
     tickFormat?: TickFormatter<ScaleInput<AxisScale>>;
+    /**
+     * Whether to display this axis. Defaults to true.
+     */
+    display?: boolean;
     /**
      * For more control over rendering or to add event handlers to datum, pass a function as children.
      */

package/dist/utils/index.d.cts

@@ -1,7 +1,7 @@
 export { M as MetricValueType, f as formatMetricValue } from '../format-metric-value-MXm5DtQ_.cjs';
 import { TickFormatter } from '@visx/axis';
 import { AnyD3Scale, ScaleInput } from '@visx/scale';
-import { c as SeriesData, C as ChartTheme, e as CompleteChartTheme } from '../types-4wyyzjot.cjs';
+import { c as SeriesData, C as ChartTheme, e as CompleteChartTheme } from '../types-BtYG-Fdk.cjs';
 import { LegendShape } from '@visx/legend/lib/types';
 import { LineStyles } from '@visx/xychart';
 import '@visx/annotation/lib/components/CircleSubject';

package/dist/utils/index.d.ts

@@ -1,7 +1,7 @@
 export { M as MetricValueType, f as formatMetricValue } from '../format-metric-value-MXm5DtQ_.js';
 import { TickFormatter } from '@visx/axis';
 import { AnyD3Scale, ScaleInput } from '@visx/scale';
-import { c as SeriesData, C as ChartTheme, e as CompleteChartTheme } from '../types-4wyyzjot.js';
+import { c as SeriesData, C as ChartTheme, e as CompleteChartTheme } from '../types-BtYG-Fdk.js';
 import { LegendShape } from '@visx/legend/lib/types';
 import { LineStyles } from '@visx/xychart';
 import '@visx/annotation/lib/components/CircleSubject';