@automattic/charts 4.2.0 → 4.4.0

package/dist/index.d.cts

@@ -91,6 +91,7 @@ type ThemeAnnotationStyles = {
 type DataPoint = {
   label: string;
   value: number;
+  /** Per-point fill override for BarChart; other built-in charts ignore it. */
   color?: string;
 };
 /**
@@ -141,6 +142,7 @@ type DataPointDate = {
   dateString?: string;
   value: number | null;
   label?: string;
+  /** Per-point fill override for BarChart; other built-in charts ignore it. */
   color?: string;
 };
 type LeaderboardEntry = {
@@ -573,6 +575,12 @@ type SeriesChartLegendConfig = ChartLegendConfig<SeriesData[]> & {
    * uncollapsed one toggles only its own.
    */
   collapseGroups?: boolean;
+  /**
+   * Append a static, non-interactive item explaining the comparison overlay whenever a series
+   * has `options.type === 'comparison'`. Skipped when that series already has its own item.
+   * Pass a string to replace the default label.
+   */
+  comparisonItem?: boolean | string;
 };
 /**
  * Initial visibility options for charts built from labelled series.
@@ -738,6 +746,8 @@ type BaseLegendItem = {
    * the interactive legend to toggle a whole group's visibility from one item.
    */
   seriesLabels?: string[];
+  /** Set to false for a static item that cannot be toggled or dimmed. */
+  interactive?: boolean;
 };
 //#endregion
 //#region src/components/legend/legend.d.ts
@@ -760,6 +770,12 @@ interface ChartLegendOptions {
    * primary series. Off by default, so every series gets its own item.
    */
   collapseGroups?: boolean;
+  /**
+   * Append a static item explaining the comparison overlay whenever a series has
+   * `options.type === 'comparison'`. Skipped when that series already has its own
+   * item. Pass a string to replace the default label.
+   */
+  comparisonItem?: boolean | string;
 }
 /**
  * Hook to transform chart data into legend items
@@ -928,7 +944,8 @@ interface LineChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityP
 }
 type TooltipDatum = {
   key: string;
-  value: number;
+  /** The series' reading, or null when the bucket has none. */
+  value: number | null;
 };
 //#endregion
 //#region src/charts/area-chart/types.d.ts
@@ -1031,9 +1048,11 @@ type AreaChartResponsiveComponent = React.ForwardRefExoticComponent<AreaChartBas
 declare const AreaChart: AreaChartComponent;
 declare const AreaChartResponsive: AreaChartResponsiveComponent;
 //#endregion
-//#region src/charts/bar-chart/bar-chart.d.ts
+//#region src/charts/bar-chart/types.d.ts
 type BandHighlightSelection = {
   datum: DataPointDate;
+  key: string;
+  index: number;
   x: number;
   y: number;
   width: number;
@@ -1049,6 +1068,10 @@ interface BarChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityPr
   tooltipPlacement?: 'auto' | 'beside';
   /** Tooltip top anchor in SVG coordinates; negative offsets are supported. */
   tooltipAnchorTop?: number;
+  /** Inline styles merged over the tooltip box defaults. */
+  tooltipStyle?: CSSProperties;
+  /** CSS class for each primary bar, in addition to visx-bar. */
+  barClassName?: (datum: DataPointDate) => string | undefined;
   orientation?: 'horizontal' | 'vertical';
   withPatterns?: boolean;
   showZeroValues?: boolean;
@@ -1058,6 +1081,8 @@ interface BarChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityPr
   onBandHighlightChange?: (selection: BandHighlightSelection | null) => void;
   children?: ReactNode;
 }
+//#endregion
+//#region src/charts/bar-chart/bar-chart.d.ts
 type BarChartBaseProps = Optional<BarChartProps, 'width' | 'height' | 'size'>;
 interface BarChartSubComponents {
   Legend: ComponentType<React.ComponentProps<typeof Legend>>;

package/dist/index.d.ts

@@ -91,6 +91,7 @@ type ThemeAnnotationStyles = {
 type DataPoint = {
   label: string;
   value: number;
+  /** Per-point fill override for BarChart; other built-in charts ignore it. */
   color?: string;
 };
 /**
@@ -141,6 +142,7 @@ type DataPointDate = {
   dateString?: string;
   value: number | null;
   label?: string;
+  /** Per-point fill override for BarChart; other built-in charts ignore it. */
   color?: string;
 };
 type LeaderboardEntry = {
@@ -573,6 +575,12 @@ type SeriesChartLegendConfig = ChartLegendConfig<SeriesData[]> & {
    * uncollapsed one toggles only its own.
    */
   collapseGroups?: boolean;
+  /**
+   * Append a static, non-interactive item explaining the comparison overlay whenever a series
+   * has `options.type === 'comparison'`. Skipped when that series already has its own item.
+   * Pass a string to replace the default label.
+   */
+  comparisonItem?: boolean | string;
 };
 /**
  * Initial visibility options for charts built from labelled series.
@@ -738,6 +746,8 @@ type BaseLegendItem = {
    * the interactive legend to toggle a whole group's visibility from one item.
    */
   seriesLabels?: string[];
+  /** Set to false for a static item that cannot be toggled or dimmed. */
+  interactive?: boolean;
 };
 //#endregion
 //#region src/components/legend/legend.d.ts
@@ -760,6 +770,12 @@ interface ChartLegendOptions {
    * primary series. Off by default, so every series gets its own item.
    */
   collapseGroups?: boolean;
+  /**
+   * Append a static item explaining the comparison overlay whenever a series has
+   * `options.type === 'comparison'`. Skipped when that series already has its own
+   * item. Pass a string to replace the default label.
+   */
+  comparisonItem?: boolean | string;
 }
 /**
  * Hook to transform chart data into legend items
@@ -928,7 +944,8 @@ interface LineChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityP
 }
 type TooltipDatum = {
   key: string;
-  value: number;
+  /** The series' reading, or null when the bucket has none. */
+  value: number | null;
 };
 //#endregion
 //#region src/charts/area-chart/types.d.ts
@@ -1031,9 +1048,11 @@ type AreaChartResponsiveComponent = React.ForwardRefExoticComponent<AreaChartBas
 declare const AreaChart: AreaChartComponent;
 declare const AreaChartResponsive: AreaChartResponsiveComponent;
 //#endregion
-//#region src/charts/bar-chart/bar-chart.d.ts
+//#region src/charts/bar-chart/types.d.ts
 type BandHighlightSelection = {
   datum: DataPointDate;
+  key: string;
+  index: number;
   x: number;
   y: number;
   width: number;
@@ -1049,6 +1068,10 @@ interface BarChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityPr
   tooltipPlacement?: 'auto' | 'beside';
   /** Tooltip top anchor in SVG coordinates; negative offsets are supported. */
   tooltipAnchorTop?: number;
+  /** Inline styles merged over the tooltip box defaults. */
+  tooltipStyle?: CSSProperties;
+  /** CSS class for each primary bar, in addition to visx-bar. */
+  barClassName?: (datum: DataPointDate) => string | undefined;
   orientation?: 'horizontal' | 'vertical';
   withPatterns?: boolean;
   showZeroValues?: boolean;
@@ -1058,6 +1081,8 @@ interface BarChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityPr
   onBandHighlightChange?: (selection: BandHighlightSelection | null) => void;
   children?: ReactNode;
 }
+//#endregion
+//#region src/charts/bar-chart/bar-chart.d.ts
 type BarChartBaseProps = Optional<BarChartProps, 'width' | 'height' | 'size'>;
 interface BarChartSubComponents {
   Legend: ComponentType<React.ComponentProps<typeof Legend>>;