@automattic/charts 1.7.0 → 1.8.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 (37) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/index.cjs +358 -51
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +6 -4
  5. package/dist/index.d.cts +16 -0
  6. package/dist/index.d.ts +16 -0
  7. package/dist/index.js +358 -51
  8. package/dist/index.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/charts/bar-chart/bar-chart.tsx +196 -42
  11. package/src/charts/bar-chart/private/comparison-bars-geometry.ts +70 -0
  12. package/src/charts/bar-chart/private/comparison-bars.tsx +154 -0
  13. package/src/charts/bar-chart/private/comparison-constants.ts +33 -0
  14. package/src/charts/bar-chart/private/index.ts +9 -0
  15. package/src/charts/bar-chart/private/test/comparison-bars-geometry.test.ts +47 -0
  16. package/src/charts/bar-chart/private/test/comparison-bars.test.tsx +183 -0
  17. package/src/charts/bar-chart/private/use-bar-chart-options.ts +46 -5
  18. package/src/charts/bar-chart/test/bar-chart.test.tsx +191 -1
  19. package/src/charts/geo-chart/geo-chart.tsx +5 -9
  20. package/src/charts/pie-chart/pie-chart.module.scss +0 -4
  21. package/src/charts/pie-chart/pie-chart.tsx +3 -8
  22. package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss +0 -5
  23. package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx +3 -8
  24. package/src/charts/private/center/center.module.scss +4 -0
  25. package/src/charts/private/center/center.tsx +33 -0
  26. package/src/charts/private/center/index.ts +2 -0
  27. package/src/charts/private/center/test/center.test.tsx +60 -0
  28. package/src/charts/private/svg-empty-state/svg-empty-state.module.scss +0 -2
  29. package/src/charts/private/svg-empty-state/svg-empty-state.tsx +2 -4
  30. package/src/providers/chart-context/global-charts-provider.tsx +2 -0
  31. package/src/providers/chart-context/test/chart-context.test.tsx +13 -1
  32. package/src/providers/chart-context/themes.ts +8 -0
  33. package/src/providers/chart-context/types.ts +2 -0
  34. package/src/types.ts +16 -0
  35. package/src/utils/get-styles.ts +36 -13
  36. package/src/utils/index.ts +6 -1
  37. package/src/utils/test/get-styles.test.ts +47 -1
package/dist/index.css CHANGED
@@ -72,10 +72,12 @@
72
72
  .a8ccharts-fpNVAq-chart-layout__content svg {
73
73
  display: block;
74
74
  }
75
- .a8ccharts-udGPVq-svg-empty-state {
76
- text-align: center;
75
+ .a8ccharts-w3qxlG-center {
77
76
  width: 100%;
78
77
  height: 100%;
78
+ }
79
+ .a8ccharts-udGPVq-svg-empty-state {
80
+ text-align: center;
79
81
  font-size: var(--wpds-typography-font-size-md, 13px);
80
82
  color: var(--wpds-color-fg-content-neutral-weak, #6d6d6d);
81
83
  }
@@ -555,11 +557,11 @@
555
557
  overflow: hidden;
556
558
  }
557
559
 
558
- .a8ccharts-gnszbG-pie-chart--responsive, .a8ccharts-gnszbG-pie-chart__centering {
560
+ .a8ccharts-gnszbG-pie-chart--responsive {
559
561
  width: 100%;
560
562
  height: 100%;
561
563
  }
562
- .a8ccharts-YtTOxW-pie-semi-circle-chart--responsive, .a8ccharts-YtTOxW-pie-semi-circle-chart__centering {
564
+ .a8ccharts-YtTOxW-pie-semi-circle-chart--responsive {
563
565
  width: 100%;
564
566
  height: 100%;
565
567
  }
package/dist/index.d.cts CHANGED
@@ -205,6 +205,15 @@ type SeriesData = {
205
205
  data: DataPointDate[] | DataPoint[];
206
206
  options?: SeriesDataOptions;
207
207
  };
208
+ /**
209
+ * Visual styling for a bar series of a given semantic type (e.g. 'comparison').
210
+ * `widthFactor` is the bar width relative to the primary bar slot (1.5 = 150%);
211
+ * `opacity` sets the shadow translucency.
212
+ */
213
+ type BarStyles = {
214
+ widthFactor?: number;
215
+ opacity?: number;
216
+ };
208
217
  type MultipleDataPointsDate = {
209
218
  label: string;
210
219
  data: DataPointDate[];
@@ -289,6 +298,9 @@ type ChartTheme = {
289
298
  };
290
299
  lineChart?: {
291
300
  lineStyles?: Partial<Record<NonNullable<SeriesDataOptions['type']>, LineStyles$1>>;
301
+ };
302
+ barChart?: {
303
+ barStyles?: Partial<Record<NonNullable<SeriesDataOptions['type']>, BarStyles>>;
292
304
  }; /** Sparkline specific settings */
293
305
  sparkline?: {
294
306
  /** Margin around the sparkline chart */margin?: {
@@ -310,6 +322,9 @@ type CompleteChartTheme = Required<ChartTheme> & {
310
322
  lineChart: {
311
323
  lineStyles: Record<NonNullable<SeriesDataOptions['type']>, LineStyles$1>;
312
324
  };
325
+ barChart: {
326
+ barStyles: Record<NonNullable<SeriesDataOptions['type']>, BarStyles>;
327
+ };
313
328
  legend: Required<NonNullable<ChartTheme['legend']>>;
314
329
  sparkline: Required<NonNullable<ChartTheme['sparkline']>> & {
315
330
  margin: Required<NonNullable<ChartTheme['sparkline']>['margin']>;
@@ -1788,6 +1803,7 @@ type GetElementStylesParams = {
1788
1803
  type ElementStyles = {
1789
1804
  color: string;
1790
1805
  lineStyles: LineStyles$1;
1806
+ barStyles: BarStyles;
1791
1807
  glyph: <Datum extends object>(props: GlyphProps<Datum>) => ReactNode;
1792
1808
  shapeStyles: CSSProperties & LineStyles$1;
1793
1809
  };
package/dist/index.d.ts CHANGED
@@ -205,6 +205,15 @@ type SeriesData = {
205
205
  data: DataPointDate[] | DataPoint[];
206
206
  options?: SeriesDataOptions;
207
207
  };
208
+ /**
209
+ * Visual styling for a bar series of a given semantic type (e.g. 'comparison').
210
+ * `widthFactor` is the bar width relative to the primary bar slot (1.5 = 150%);
211
+ * `opacity` sets the shadow translucency.
212
+ */
213
+ type BarStyles = {
214
+ widthFactor?: number;
215
+ opacity?: number;
216
+ };
208
217
  type MultipleDataPointsDate = {
209
218
  label: string;
210
219
  data: DataPointDate[];
@@ -289,6 +298,9 @@ type ChartTheme = {
289
298
  };
290
299
  lineChart?: {
291
300
  lineStyles?: Partial<Record<NonNullable<SeriesDataOptions['type']>, LineStyles$1>>;
301
+ };
302
+ barChart?: {
303
+ barStyles?: Partial<Record<NonNullable<SeriesDataOptions['type']>, BarStyles>>;
292
304
  }; /** Sparkline specific settings */
293
305
  sparkline?: {
294
306
  /** Margin around the sparkline chart */margin?: {
@@ -310,6 +322,9 @@ type CompleteChartTheme = Required<ChartTheme> & {
310
322
  lineChart: {
311
323
  lineStyles: Record<NonNullable<SeriesDataOptions['type']>, LineStyles$1>;
312
324
  };
325
+ barChart: {
326
+ barStyles: Record<NonNullable<SeriesDataOptions['type']>, BarStyles>;
327
+ };
313
328
  legend: Required<NonNullable<ChartTheme['legend']>>;
314
329
  sparkline: Required<NonNullable<ChartTheme['sparkline']>> & {
315
330
  margin: Required<NonNullable<ChartTheme['sparkline']>['margin']>;
@@ -1788,6 +1803,7 @@ type GetElementStylesParams = {
1788
1803
  type ElementStyles = {
1789
1804
  color: string;
1790
1805
  lineStyles: LineStyles$1;
1806
+ barStyles: BarStyles;
1791
1807
  glyph: <Datum extends object>(props: GlyphProps<Datum>) => ReactNode;
1792
1808
  shapeStyles: CSSProperties & LineStyles$1;
1793
1809
  };