@automattic/charts 4.3.0 → 4.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/TOKENS.md +2 -2
  3. package/dist/index.cjs +584 -209
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +4 -0
  6. package/dist/index.d.cts +14 -3
  7. package/dist/index.d.ts +14 -3
  8. package/dist/index.js +585 -210
  9. package/dist/index.js.map +1 -1
  10. package/package.json +2 -2
  11. package/src/charts/bar-chart/bar-chart.tsx +57 -23
  12. package/src/charts/bar-chart/private/band-tooltip.tsx +18 -12
  13. package/src/charts/bar-chart/private/classified-bar-series.tsx +85 -0
  14. package/src/charts/bar-chart/private/comparison-bars-geometry.ts +3 -6
  15. package/src/charts/bar-chart/private/index.ts +1 -0
  16. package/src/charts/bar-chart/private/test/comparison-bars-geometry.test.ts +2 -3
  17. package/src/charts/bar-chart/test/bar-chart.test.tsx +130 -1
  18. package/src/charts/bar-chart/types.ts +5 -1
  19. package/src/charts/geo-chart/geo-chart.tsx +4 -0
  20. package/src/charts/geo-chart/test/geo-chart.test.tsx +8 -0
  21. package/src/charts/geo-chart/types.ts +5 -0
  22. package/src/charts/heatmap-chart/test/heatmap-chart.test.tsx +1 -1
  23. package/src/charts/pie-chart/pie-chart.module.scss +4 -0
  24. package/src/charts/pie-chart/pie-chart.tsx +103 -7
  25. package/src/charts/pie-chart/test/pie-chart.test.tsx +149 -0
  26. package/src/charts/private/chart-layout/chart-layout.tsx +5 -1
  27. package/src/components/tooltip/accessible-tooltip.tsx +40 -4
  28. package/src/components/tooltip/test/accessible-tooltip.test.tsx +82 -5
  29. package/src/providers/chart-context/global-charts-provider.tsx +57 -41
  30. package/src/providers/chart-context/private/catalog-pointers.ts +9 -1
  31. package/src/providers/chart-context/private/palette-generator.ts +305 -0
  32. package/src/providers/chart-context/private/perceptual-color.ts +219 -0
  33. package/src/providers/chart-context/private/series-palette.ts +1 -1
  34. package/src/providers/chart-context/test/chart-context.test.tsx +88 -8
  35. package/src/providers/chart-context/test/global-charts-provider-first-render.test.tsx +27 -0
  36. package/src/providers/chart-context/test/palette-generator.test.ts +181 -0
  37. package/src/providers/chart-context/test/perceptual-color.test.ts +75 -0
  38. package/src/test-utils/zoned-parsing-suite.ts +1 -1
  39. package/src/utils/color-utils.ts +5 -3
  40. package/src/utils/test/date-formatting.test.ts +1 -1
  41. package/src/providers/chart-context/private/get-chart-color.ts +0 -223
package/dist/index.css CHANGED
@@ -850,6 +850,10 @@
850
850
  .a8ccharts-gnszbG-pie-chart__label-text {
851
851
  fill: var(--a8c-charts-color-label-inverse, #f0f0f0);
852
852
  }
853
+
854
+ .a8ccharts-gnszbG-pie-chart__label-text--on-light {
855
+ fill: var(--a8c-charts-color-label, #1e1e1e);
856
+ }
853
857
  .a8ccharts-YtTOxW-pie-semi-circle-chart__plot {
854
858
  position: relative;
855
859
  }
package/dist/index.d.cts CHANGED
@@ -1068,6 +1068,10 @@ interface BarChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityPr
1068
1068
  tooltipPlacement?: 'auto' | 'beside';
1069
1069
  /** Tooltip top anchor in SVG coordinates; negative offsets are supported. */
1070
1070
  tooltipAnchorTop?: number;
1071
+ /** Inline styles merged over the tooltip box defaults. */
1072
+ tooltipStyle?: CSSProperties;
1073
+ /** CSS class for each primary bar, in addition to visx-bar. */
1074
+ barClassName?: (datum: DataPointDate) => string | undefined;
1071
1075
  orientation?: 'horizontal' | 'vertical';
1072
1076
  withPatterns?: boolean;
1073
1077
  showZeroValues?: boolean;
@@ -1285,6 +1289,11 @@ interface GeoChartProps extends Pick<BaseChartProps, 'className' | 'chartId' | '
1285
1289
  * @default 'countries'
1286
1290
  */
1287
1291
  resolution?: GeoResolution;
1292
+ /**
1293
+ * ISO 3166-1 alpha-2 code of the country whose viewpoint sets the disputed borders
1294
+ * (e.g., 'IN' draws Kashmir as India shows it). Google's default borders apply when omitted.
1295
+ */
1296
+ domain?: string;
1288
1297
  /**
1289
1298
  * Callback fired when Google Charts emits a chart error.
1290
1299
  */
@@ -1710,9 +1719,11 @@ declare const validateHexColor: (hex: unknown) => void;
1710
1719
  */
1711
1720
  declare const hexToRgba: (hex: string, alpha: number) => string;
1712
1721
  /**
1713
- * Calculate the perceptual distance between two HSL colors
1714
- * @param hsl1 - first color in HSL format [h, s, l]
1715
- * @param hsl2 - second color in HSL format [h, s, l]
1722
+ * Weighted Euclidean distance between two HSL colors.
1723
+ *
1724
+ * @deprecated Not perceptual and blind to color vision deficiency, so charts no longer use it; it will be removed in a future major version.
1725
+ * @param hsl1 - first color in HSL format [h, s, l]
1726
+ * @param hsl2 - second color in HSL format [h, s, l]
1716
1727
  * @return distance value (0-100+, lower means more similar)
1717
1728
  */
1718
1729
  declare const getColorDistance: (hsl1: [number, number, number], hsl2: [number, number, number]) => number;
package/dist/index.d.ts CHANGED
@@ -1068,6 +1068,10 @@ interface BarChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityPr
1068
1068
  tooltipPlacement?: 'auto' | 'beside';
1069
1069
  /** Tooltip top anchor in SVG coordinates; negative offsets are supported. */
1070
1070
  tooltipAnchorTop?: number;
1071
+ /** Inline styles merged over the tooltip box defaults. */
1072
+ tooltipStyle?: CSSProperties;
1073
+ /** CSS class for each primary bar, in addition to visx-bar. */
1074
+ barClassName?: (datum: DataPointDate) => string | undefined;
1071
1075
  orientation?: 'horizontal' | 'vertical';
1072
1076
  withPatterns?: boolean;
1073
1077
  showZeroValues?: boolean;
@@ -1285,6 +1289,11 @@ interface GeoChartProps extends Pick<BaseChartProps, 'className' | 'chartId' | '
1285
1289
  * @default 'countries'
1286
1290
  */
1287
1291
  resolution?: GeoResolution;
1292
+ /**
1293
+ * ISO 3166-1 alpha-2 code of the country whose viewpoint sets the disputed borders
1294
+ * (e.g., 'IN' draws Kashmir as India shows it). Google's default borders apply when omitted.
1295
+ */
1296
+ domain?: string;
1288
1297
  /**
1289
1298
  * Callback fired when Google Charts emits a chart error.
1290
1299
  */
@@ -1710,9 +1719,11 @@ declare const validateHexColor: (hex: unknown) => void;
1710
1719
  */
1711
1720
  declare const hexToRgba: (hex: string, alpha: number) => string;
1712
1721
  /**
1713
- * Calculate the perceptual distance between two HSL colors
1714
- * @param hsl1 - first color in HSL format [h, s, l]
1715
- * @param hsl2 - second color in HSL format [h, s, l]
1722
+ * Weighted Euclidean distance between two HSL colors.
1723
+ *
1724
+ * @deprecated Not perceptual and blind to color vision deficiency, so charts no longer use it; it will be removed in a future major version.
1725
+ * @param hsl1 - first color in HSL format [h, s, l]
1726
+ * @param hsl2 - second color in HSL format [h, s, l]
1716
1727
  * @return distance value (0-100+, lower means more similar)
1717
1728
  */
1718
1729
  declare const getColorDistance: (hsl1: [number, number, number], hsl2: [number, number, number]) => number;