@automattic/charts 1.9.0 → 1.10.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.
- package/CHANGELOG.md +9 -0
- package/dist/index.cjs +99 -20
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +25 -25
- package/dist/index.d.cts +16 -6
- package/dist/index.d.ts +16 -6
- package/dist/index.js +102 -23
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
- package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss +7 -7
- package/src/charts/geo-chart/geo-chart.tsx +148 -3
- package/src/charts/geo-chart/index.ts +1 -1
- package/src/charts/geo-chart/test/geo-chart.test.tsx +122 -2
- package/src/charts/geo-chart/types.ts +11 -0
- package/src/charts/heatmap-chart/heatmap-chart.module.scss +7 -7
- package/src/charts/leaderboard-chart/leaderboard-chart.module.scss +3 -3
- package/src/charts/line-chart/line-chart.module.scss +2 -2
- package/src/charts/private/svg-empty-state/svg-empty-state.module.scss +1 -1
- package/src/charts/private/x-zoom.module.scss +2 -2
- package/src/components/trend-indicator/trend-indicator.module.scss +3 -3
- package/src/index.ts +1 -1
- package/src/providers/chart-context/themes.ts +17 -14
|
@@ -4,7 +4,7 @@ import type { CompleteChartTheme } from '../../types';
|
|
|
4
4
|
* Default theme configuration
|
|
5
5
|
*/
|
|
6
6
|
const defaultTheme: CompleteChartTheme = {
|
|
7
|
-
backgroundColor: 'var(--wpds-color-
|
|
7
|
+
backgroundColor: 'var(--wpds-color-background-surface-neutral-strong, #fff)',
|
|
8
8
|
labelBackgroundColor: 'transparent', // label background color (transparent by default)
|
|
9
9
|
// White label text sits on top of arbitrary series colors, so it has no WPDS
|
|
10
10
|
// content-foreground equivalent and stays hardcoded (tokenization outlier).
|
|
@@ -21,7 +21,7 @@ const defaultTheme: CompleteChartTheme = {
|
|
|
21
21
|
xAxisLineStyles: { stroke: 'var(--wpds-color-stroke-surface-neutral, #dbdbdb)', strokeWidth: 1 },
|
|
22
22
|
legend: {
|
|
23
23
|
labelStyles: {
|
|
24
|
-
color: 'var(--wpds-color-
|
|
24
|
+
color: 'var(--wpds-color-foreground-content-neutral, #1e1e1e)',
|
|
25
25
|
},
|
|
26
26
|
containerStyles: {},
|
|
27
27
|
shapeStyles: [],
|
|
@@ -33,24 +33,27 @@ const defaultTheme: CompleteChartTheme = {
|
|
|
33
33
|
// that `buildChartTheme` injects as an inline style on SVG `<text>`
|
|
34
34
|
// elements for axis labels and ticks. Setting `inherit` lets SVG text
|
|
35
35
|
// pick up the host application's font-family via normal CSS inheritance.
|
|
36
|
-
svgLabelSmall: {
|
|
36
|
+
svgLabelSmall: {
|
|
37
|
+
fill: 'var(--wpds-color-foreground-content-neutral, #1e1e1e)',
|
|
38
|
+
fontFamily: 'inherit',
|
|
39
|
+
},
|
|
37
40
|
svgLabelBig: { fontFamily: 'inherit' },
|
|
38
41
|
annotationStyles: {
|
|
39
42
|
label: {
|
|
40
|
-
anchorLineStroke: 'var(--wpds-color-
|
|
41
|
-
backgroundFill: 'var(--wpds-color-
|
|
43
|
+
anchorLineStroke: 'var(--wpds-color-foreground-content-neutral, #1e1e1e)',
|
|
44
|
+
backgroundFill: 'var(--wpds-color-background-surface-neutral-strong, #fff)',
|
|
42
45
|
},
|
|
43
46
|
connector: {
|
|
44
|
-
stroke: 'var(--wpds-color-
|
|
47
|
+
stroke: 'var(--wpds-color-foreground-content-neutral, #1e1e1e)',
|
|
45
48
|
},
|
|
46
49
|
circleSubject: {
|
|
47
50
|
stroke: 'transparent',
|
|
48
|
-
fill: 'var(--wpds-color-
|
|
51
|
+
fill: 'var(--wpds-color-foreground-content-neutral, #1e1e1e)',
|
|
49
52
|
radius: 5,
|
|
50
53
|
},
|
|
51
54
|
},
|
|
52
55
|
geoChart: {
|
|
53
|
-
featureFillColor: 'var(--wpds-color-
|
|
56
|
+
featureFillColor: 'var(--wpds-color-background-surface-neutral-weak, #f4f4f4)',
|
|
54
57
|
},
|
|
55
58
|
leaderboardChart: {
|
|
56
59
|
rowGap: 12,
|
|
@@ -58,15 +61,15 @@ const defaultTheme: CompleteChartTheme = {
|
|
|
58
61
|
labelSpacing: 'xs',
|
|
59
62
|
// [negative, neutral, positive]
|
|
60
63
|
deltaColors: [
|
|
61
|
-
'var(--wpds-color-
|
|
62
|
-
'var(--wpds-color-
|
|
63
|
-
'var(--wpds-color-
|
|
64
|
+
'var(--wpds-color-foreground-content-error-weak, #cc1818)',
|
|
65
|
+
'var(--wpds-color-foreground-content-neutral-weak, #707070)',
|
|
66
|
+
'var(--wpds-color-foreground-content-success-weak, #008030)',
|
|
64
67
|
],
|
|
65
68
|
},
|
|
66
69
|
conversionFunnelChart: {
|
|
67
|
-
backgroundColor: 'var(--wpds-color-
|
|
68
|
-
positiveChangeColor: 'var(--wpds-color-
|
|
69
|
-
negativeChangeColor: 'var(--wpds-color-
|
|
70
|
+
backgroundColor: 'var(--wpds-color-background-surface-neutral-weak, #f4f4f4)',
|
|
71
|
+
positiveChangeColor: 'var(--wpds-color-foreground-content-success-weak, #008030)',
|
|
72
|
+
negativeChangeColor: 'var(--wpds-color-foreground-content-error-weak, #cc1818)',
|
|
70
73
|
},
|
|
71
74
|
lineChart: {
|
|
72
75
|
lineStyles: {
|