@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
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [1.10.0] - 2026-07-09
|
|
9
|
+
### Added
|
|
10
|
+
- Add GeoChart error reporting. [#50251]
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
- Update package dependencies. [#49272]
|
|
14
|
+
- Update WPDS design tokens to the @wordpress/theme 0.16/0.17 names and migrate the Storybook decorator to the public ThemeProvider export (see https://github.com/WordPress/gutenberg/blob/trunk/packages/theme/CHANGELOG.md#0160-2026-06-24 ). [#49272]
|
|
15
|
+
|
|
8
16
|
## [1.9.0] - 2026-07-06
|
|
9
17
|
### Added
|
|
10
18
|
- Add HeatmapChart for matrix and calendar/contribution-style data, with a compact mode and a composition color-scale legend. [#50065]
|
|
@@ -904,6 +912,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
904
912
|
- Fixed lints following ESLint rule changes for TS [#40584]
|
|
905
913
|
- Fixing a bug in Chart storybook data. [#40640]
|
|
906
914
|
|
|
915
|
+
[1.10.0]: https://github.com/Automattic/charts/compare/v1.9.0...v1.10.0
|
|
907
916
|
[1.9.0]: https://github.com/Automattic/charts/compare/v1.8.1...v1.9.0
|
|
908
917
|
[1.8.1]: https://github.com/Automattic/charts/compare/v1.8.0...v1.8.1
|
|
909
918
|
[1.8.0]: https://github.com/Automattic/charts/compare/v1.7.0...v1.8.0
|
package/dist/index.cjs
CHANGED
|
@@ -710,7 +710,7 @@ const getChartColor = (index, colorCache) => {
|
|
|
710
710
|
* Default theme configuration
|
|
711
711
|
*/
|
|
712
712
|
const defaultTheme = {
|
|
713
|
-
backgroundColor: "var(--wpds-color-
|
|
713
|
+
backgroundColor: "var(--wpds-color-background-surface-neutral-strong, #fff)",
|
|
714
714
|
labelBackgroundColor: "transparent",
|
|
715
715
|
labelTextColor: "#FFFFFF",
|
|
716
716
|
colors: [
|
|
@@ -736,44 +736,44 @@ const defaultTheme = {
|
|
|
736
736
|
strokeWidth: 1
|
|
737
737
|
},
|
|
738
738
|
legend: {
|
|
739
|
-
labelStyles: { color: "var(--wpds-color-
|
|
739
|
+
labelStyles: { color: "var(--wpds-color-foreground-content-neutral, #1e1e1e)" },
|
|
740
740
|
containerStyles: {},
|
|
741
741
|
shapeStyles: []
|
|
742
742
|
},
|
|
743
743
|
seriesLineStyles: [],
|
|
744
744
|
glyphs: [],
|
|
745
745
|
svgLabelSmall: {
|
|
746
|
-
fill: "var(--wpds-color-
|
|
746
|
+
fill: "var(--wpds-color-foreground-content-neutral, #1e1e1e)",
|
|
747
747
|
fontFamily: "inherit"
|
|
748
748
|
},
|
|
749
749
|
svgLabelBig: { fontFamily: "inherit" },
|
|
750
750
|
annotationStyles: {
|
|
751
751
|
label: {
|
|
752
|
-
anchorLineStroke: "var(--wpds-color-
|
|
753
|
-
backgroundFill: "var(--wpds-color-
|
|
752
|
+
anchorLineStroke: "var(--wpds-color-foreground-content-neutral, #1e1e1e)",
|
|
753
|
+
backgroundFill: "var(--wpds-color-background-surface-neutral-strong, #fff)"
|
|
754
754
|
},
|
|
755
|
-
connector: { stroke: "var(--wpds-color-
|
|
755
|
+
connector: { stroke: "var(--wpds-color-foreground-content-neutral, #1e1e1e)" },
|
|
756
756
|
circleSubject: {
|
|
757
757
|
stroke: "transparent",
|
|
758
|
-
fill: "var(--wpds-color-
|
|
758
|
+
fill: "var(--wpds-color-foreground-content-neutral, #1e1e1e)",
|
|
759
759
|
radius: 5
|
|
760
760
|
}
|
|
761
761
|
},
|
|
762
|
-
geoChart: { featureFillColor: "var(--wpds-color-
|
|
762
|
+
geoChart: { featureFillColor: "var(--wpds-color-background-surface-neutral-weak, #f4f4f4)" },
|
|
763
763
|
leaderboardChart: {
|
|
764
764
|
rowGap: 12,
|
|
765
765
|
columnGap: 4,
|
|
766
766
|
labelSpacing: "xs",
|
|
767
767
|
deltaColors: [
|
|
768
|
-
"var(--wpds-color-
|
|
769
|
-
"var(--wpds-color-
|
|
770
|
-
"var(--wpds-color-
|
|
768
|
+
"var(--wpds-color-foreground-content-error-weak, #cc1818)",
|
|
769
|
+
"var(--wpds-color-foreground-content-neutral-weak, #707070)",
|
|
770
|
+
"var(--wpds-color-foreground-content-success-weak, #008030)"
|
|
771
771
|
]
|
|
772
772
|
},
|
|
773
773
|
conversionFunnelChart: {
|
|
774
|
-
backgroundColor: "var(--wpds-color-
|
|
775
|
-
positiveChangeColor: "var(--wpds-color-
|
|
776
|
-
negativeChangeColor: "var(--wpds-color-
|
|
774
|
+
backgroundColor: "var(--wpds-color-background-surface-neutral-weak, #f4f4f4)",
|
|
775
|
+
positiveChangeColor: "var(--wpds-color-foreground-content-success-weak, #008030)",
|
|
776
|
+
negativeChangeColor: "var(--wpds-color-foreground-content-error-weak, #cc1818)"
|
|
777
777
|
},
|
|
778
778
|
lineChart: { lineStyles: { comparison: {
|
|
779
779
|
strokeDasharray: "4 4",
|
|
@@ -1896,7 +1896,7 @@ function useRender(params) {
|
|
|
1896
1896
|
return useRenderElement(params.defaultTagName ?? "div", params, params);
|
|
1897
1897
|
}
|
|
1898
1898
|
//#endregion
|
|
1899
|
-
//#region ../../../node_modules/.pnpm/@wordpress+ui@0.
|
|
1899
|
+
//#region ../../../node_modules/.pnpm/@wordpress+ui@0.17.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/ui/build-module/stack/stack.mjs
|
|
1900
1900
|
var STYLE_HASH_ATTRIBUTE$1 = "data-wp-hash";
|
|
1901
1901
|
function getRuntime$1() {
|
|
1902
1902
|
const globalScope = globalThis;
|
|
@@ -1952,7 +1952,7 @@ function registerStyle$1(hash, css) {
|
|
|
1952
1952
|
runtime.styles.set(hash, css);
|
|
1953
1953
|
for (const targetDocument of runtime.documents.keys()) injectStyle$1(targetDocument, hash, css);
|
|
1954
1954
|
}
|
|
1955
|
-
if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle$1("
|
|
1955
|
+
if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle$1("32aba35fe1", "@layer wp-ui{@layer utilities, components, compositions, overrides;@layer components{._19ce0419607e1896__stack{display:flex}}}");
|
|
1956
1956
|
var style_default$1 = { "stack": "_19ce0419607e1896__stack" };
|
|
1957
1957
|
var gapTokens = {
|
|
1958
1958
|
xs: "var(--wpds-dimension-gap-xs, 4px)",
|
|
@@ -1980,7 +1980,7 @@ var Stack = (0, react$1.forwardRef)(function Stack2({ direction, gap, align, jus
|
|
|
1980
1980
|
});
|
|
1981
1981
|
});
|
|
1982
1982
|
//#endregion
|
|
1983
|
-
//#region ../../../node_modules/.pnpm/@wordpress+ui@0.
|
|
1983
|
+
//#region ../../../node_modules/.pnpm/@wordpress+ui@0.17.0_@types+react@18.3.28_date-fns@4.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/ui/build-module/text/text.mjs
|
|
1984
1984
|
var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
|
|
1985
1985
|
function getRuntime() {
|
|
1986
1986
|
const globalScope = globalThis;
|
|
@@ -2036,7 +2036,7 @@ function registerStyle(hash, css) {
|
|
|
2036
2036
|
runtime.styles.set(hash, css);
|
|
2037
2037
|
for (const targetDocument of runtime.documents.keys()) injectStyle(targetDocument, hash, css);
|
|
2038
2038
|
}
|
|
2039
|
-
if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle("
|
|
2039
|
+
if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle("0c5702ddca", "@layer wp-ui{@layer utilities, components, compositions, overrides;@layer components{._83ed8a8da5dd50ea__text{margin:0}._14437cfb77831647__heading-2xl{--_gcd-heading-font-size:var(--wpds-typography-font-size-2xl,32px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-2xl,32px);--_gcd-p-line-height:var(--wpds-typography-line-height-2xl,40px);font-size:var(--wpds-typography-font-size-2xl,32px);line-height:var(--wpds-typography-line-height-2xl,40px)}._14437cfb77831647__heading-2xl,._3c78b7fa9b4072dd__heading-xl{font-family:var(--wpds-typography-font-family-heading,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-weight:var(--wpds-typography-font-weight-medium,499)}._3c78b7fa9b4072dd__heading-xl{--_gcd-heading-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-p-line-height:var(--wpds-typography-line-height-md,24px);font-size:var(--wpds-typography-font-size-xl,20px);line-height:var(--wpds-typography-line-height-md,24px)}.aa58f227716bcde2__heading-lg{--_gcd-heading-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-p-line-height:var(--wpds-typography-line-height-sm,20px);font-size:var(--wpds-typography-font-size-lg,15px)}.aa58f227716bcde2__heading-lg,.fc4da56d8dfe52c4__heading-md{font-family:var(--wpds-typography-font-family-heading,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-weight:var(--wpds-typography-font-weight-medium,499);line-height:var(--wpds-typography-line-height-sm,20px)}.fc4da56d8dfe52c4__heading-md{--_gcd-heading-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-p-line-height:var(--wpds-typography-line-height-sm,20px);font-size:var(--wpds-typography-font-size-md,13px)}.a9b78c7c82e8dff7__heading-sm{--_gcd-heading-font-size:var(--wpds-typography-font-size-xs,11px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-xs,11px);--_gcd-p-line-height:var(--wpds-typography-line-height-xs,16px);font-family:var(--wpds-typography-font-family-heading,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-size:var(--wpds-typography-font-size-xs,11px);font-weight:var(--wpds-typography-font-weight-medium,499);line-height:var(--wpds-typography-line-height-xs,16px);text-transform:uppercase}._305ff559e52180d5__body-xl{--_gcd-heading-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-regular,400);--_gcd-p-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-p-line-height:var(--wpds-typography-line-height-xl,32px);font-size:var(--wpds-typography-font-size-xl,20px);line-height:var(--wpds-typography-line-height-xl,32px)}._305ff559e52180d5__body-xl,.ca1aa3fc2029e958__body-lg{font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-weight:var(--wpds-typography-font-weight-regular,400)}.ca1aa3fc2029e958__body-lg{--_gcd-heading-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-regular,400);--_gcd-p-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-p-line-height:var(--wpds-typography-line-height-md,24px);font-size:var(--wpds-typography-font-size-lg,15px);line-height:var(--wpds-typography-line-height-md,24px)}._131101940be12424__body-md{--_gcd-heading-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-regular,400);--_gcd-p-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-p-line-height:var(--wpds-typography-line-height-sm,20px);font-size:var(--wpds-typography-font-size-md,13px);line-height:var(--wpds-typography-line-height-sm,20px)}._0e8d87a42c1f75fa__body-sm,._131101940be12424__body-md{font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\"Segoe UI\",\"Roboto\",\"Oxygen-Sans\",\"Ubuntu\",\"Cantarell\",\"Helvetica Neue\",sans-serif);font-weight:var(--wpds-typography-font-weight-regular,400)}._0e8d87a42c1f75fa__body-sm{--_gcd-heading-font-size:var(--wpds-typography-font-size-sm,12px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-regular,400);--_gcd-p-font-size:var(--wpds-typography-font-size-sm,12px);--_gcd-p-line-height:var(--wpds-typography-line-height-xs,16px);font-size:var(--wpds-typography-font-size-sm,12px);line-height:var(--wpds-typography-line-height-xs,16px)}}}");
|
|
2040
2040
|
var style_default = {
|
|
2041
2041
|
"text": "_83ed8a8da5dd50ea__text",
|
|
2042
2042
|
"heading-2xl": "_14437cfb77831647__heading-2xl",
|
|
@@ -2049,7 +2049,7 @@ var style_default = {
|
|
|
2049
2049
|
"body-md": "_131101940be12424__body-md",
|
|
2050
2050
|
"body-sm": "_0e8d87a42c1f75fa__body-sm"
|
|
2051
2051
|
};
|
|
2052
|
-
if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle("
|
|
2052
|
+
if (typeof process === "undefined" || process.env.NODE_ENV !== "test") registerStyle("d390e935a7", "._6defc79820e382c6__button{box-sizing:var(--_gcd-button-box-sizing,border-box);font-family:var(--_gcd-button-font-family,inherit);font-size:var(--_gcd-button-font-size,inherit);font-weight:var(--_gcd-button-font-weight,inherit)}.d2cff2e5dea83bd1__input{box-sizing:var(--_gcd-input-box-sizing,border-box);font-family:var(--_gcd-input-font-family,inherit);font-size:var(--_gcd-input-font-size,inherit);font-weight:var(--_gcd-input-font-weight,inherit);margin:var(--_gcd-input-margin,0);&:is(textarea,[type=text],[type=password],[type=color],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=search],[type=tel],[type=time],[type=url],[type=week]){background-color:var(--_gcd-input-background-color,transparent);border:var(--_gcd-input-border,none);border-radius:var(--_gcd-input-border-radius,0);box-shadow:var(--_gcd-input-box-shadow,0 0 0 transparent);color:var(--_gcd-input-color,var(--wpds-color-foreground-interactive-neutral,#1e1e1e));&:focus{border-color:var(--_gcd-input-border-color-focus,var(--wp-admin-theme-color));box-shadow:var(--_gcd-input-box-shadow-focus,none);outline:var(--_gcd-input-outline-focus,none)}&:disabled{background:var(--_gcd-input-background-disabled,transparent);border-color:var(--_gcd-input-border-color-disabled,transparent);box-shadow:var(--_gcd-input-box-shadow-disabled,none);color:var(--_gcd-input-color-disabled,var(--wpds-color-foreground-interactive-neutral-disabled,#8d8d8d))}&::placeholder{color:var(--_gcd-input-placeholder-color,var(--wpds-color-foreground-interactive-neutral-disabled,#8d8d8d))}}&:is(textarea,[type=text],[type=password],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=search],[type=tel],[type=time],[type=url],[type=week]){line-height:var(--_gcd-input-line-height,inherit);min-height:var(--_gcd-input-min-height,auto);padding:var(--_gcd-input-padding,0)}}._547d86373d02e108__textarea{box-sizing:var(--_gcd-textarea-box-sizing,border-box);overflow:var(--_gcd-textarea-overflow,auto);resize:var(--_gcd-textarea-resize,block)}._8c15fd0ed9f28ba4__div{outline:var(--_gcd-div-outline,0 solid transparent)}p._43cec3e1eec1066d__p{font-size:var(--_gcd-p-font-size,13px);line-height:var(--_gcd-p-line-height,1.5);margin:var(--_gcd-p-margin,0)}:is(h1,h2,h3,h4,h5,h6).e97669c6d9a38497__heading{color:var(--_gcd-heading-color,var(--wpds-color-foreground-content-neutral,#1e1e1e));font-size:var(--_gcd-heading-font-size,inherit);font-weight:var(--_gcd-heading-font-weight,var(--wpds-typography-font-weight-medium,499));margin:var(--_gcd-heading-margin,0)}._2c0831b0499dbd6e__a,._2c0831b0499dbd6e__a:is(:hover,:focus,:active){border-radius:var(--_gcd-a-border-radius,0);box-shadow:var(--_gcd-a-box-shadow,none);color:var(--_gcd-a-color,inherit);outline:var(--_gcd-a-outline,0 solid transparent);transition:var(--_gcd-a-transition,none)}");
|
|
2053
2053
|
var global_css_defense_default = {
|
|
2054
2054
|
"button": "_6defc79820e382c6__button",
|
|
2055
2055
|
"input": "d2cff2e5dea83bd1__input",
|
|
@@ -5675,6 +5675,51 @@ const GEO_CHART_PACKAGES = [
|
|
|
5675
5675
|
"controls",
|
|
5676
5676
|
"geochart"
|
|
5677
5677
|
];
|
|
5678
|
+
const GOOGLE_CHARTS_ERROR_ID_PREFIX = "google-visualization-errors-";
|
|
5679
|
+
const GOOGLE_CHARTS_ERROR_WRAPPER_INFIX = "-all-";
|
|
5680
|
+
/**
|
|
5681
|
+
* Collects Google Charts error elements rendered inside a chart container.
|
|
5682
|
+
*
|
|
5683
|
+
* @param container - The chart container element to scan.
|
|
5684
|
+
* @return Errors found in the container, one per error span.
|
|
5685
|
+
*/
|
|
5686
|
+
function collectRenderedGeoChartErrors(container) {
|
|
5687
|
+
const elements = container.querySelectorAll(`[id^="${GOOGLE_CHARTS_ERROR_ID_PREFIX}"]`);
|
|
5688
|
+
return Array.from(elements).filter((element) => !element.id.includes(GOOGLE_CHARTS_ERROR_WRAPPER_INFIX)).map((element) => ({
|
|
5689
|
+
id: element.id,
|
|
5690
|
+
message: element.textContent?.trim() ?? ""
|
|
5691
|
+
})).filter((error) => error.message.length > 0);
|
|
5692
|
+
}
|
|
5693
|
+
/**
|
|
5694
|
+
* Whether a node added to the chart container is — or contains — a Google
|
|
5695
|
+
* Charts error element. Also matches text appended into an existing error
|
|
5696
|
+
* span, in case Google fills the message after inserting the element.
|
|
5697
|
+
*
|
|
5698
|
+
* @param node - The added DOM node to inspect.
|
|
5699
|
+
* @return Whether the node involves a Google Charts error element.
|
|
5700
|
+
*/
|
|
5701
|
+
function involvesGeoChartErrorElement(node) {
|
|
5702
|
+
if (node.nodeType === Node.TEXT_NODE) return !!node.parentElement?.id.startsWith(GOOGLE_CHARTS_ERROR_ID_PREFIX);
|
|
5703
|
+
if (!(node instanceof HTMLElement)) return false;
|
|
5704
|
+
return node.id.startsWith(GOOGLE_CHARTS_ERROR_ID_PREFIX) || node.querySelector(`[id^="${GOOGLE_CHARTS_ERROR_ID_PREFIX}"]`) !== null;
|
|
5705
|
+
}
|
|
5706
|
+
/**
|
|
5707
|
+
* Normalizes the raw Google Charts error event into the GeoChart error shape.
|
|
5708
|
+
*
|
|
5709
|
+
* @param eventArgs - Error event payload from react-google-charts.
|
|
5710
|
+
* @return Normalized GeoChart error.
|
|
5711
|
+
*/
|
|
5712
|
+
function normalizeGeoChartError(eventArgs) {
|
|
5713
|
+
const payload = Array.isArray(eventArgs) ? eventArgs[0] : eventArgs;
|
|
5714
|
+
if (!payload || typeof payload !== "object") return {};
|
|
5715
|
+
const { id, message, detailedMessage, options } = payload;
|
|
5716
|
+
return {
|
|
5717
|
+
...typeof id === "string" && { id },
|
|
5718
|
+
...typeof message === "string" && { message },
|
|
5719
|
+
...typeof detailedMessage === "string" && { detailedMessage },
|
|
5720
|
+
...options && typeof options === "object" && !Array.isArray(options) && { options }
|
|
5721
|
+
};
|
|
5722
|
+
}
|
|
5678
5723
|
/**
|
|
5679
5724
|
* Renders a geographical chart using Google Charts GeoChart to visualize data.
|
|
5680
5725
|
*
|
|
@@ -5690,12 +5735,35 @@ const GEO_CHART_PACKAGES = [
|
|
|
5690
5735
|
* @param props.height - Height of the chart in pixels
|
|
5691
5736
|
* @param props.region - Region to display ('world', 'US', or ISO 3166-1 alpha-2 code)
|
|
5692
5737
|
* @param props.resolution - Resolution level ('countries', 'provinces', or 'metros')
|
|
5738
|
+
* @param props.onError - Optional callback for Google Charts errors
|
|
5693
5739
|
* @param props.className - Additional CSS class name for the chart container
|
|
5694
5740
|
* @param props.renderPlaceholder - Optional render function for the loading placeholder
|
|
5695
5741
|
* @return A React component displaying an interactive map with data visualization
|
|
5696
5742
|
*/
|
|
5697
|
-
const GeoChartInternal = ({ className, data, width, height, region = "world", resolution = "countries", renderPlaceholder }) => {
|
|
5743
|
+
const GeoChartInternal = ({ className, data, width, height, region = "world", resolution = "countries", onError, renderPlaceholder }) => {
|
|
5698
5744
|
const { getElementStyles, theme: { geoChart: { featureFillColor }, backgroundColor } } = useGlobalChartsContext();
|
|
5745
|
+
const containerRef = (0, react$1.useRef)(null);
|
|
5746
|
+
const reportedErrorIdsRef = (0, react$1.useRef)(/* @__PURE__ */ new Set());
|
|
5747
|
+
(0, react$1.useEffect)(() => {
|
|
5748
|
+
const container = containerRef.current;
|
|
5749
|
+
if (!onError || !container || typeof MutationObserver === "undefined") return;
|
|
5750
|
+
const reportRenderedErrors = () => {
|
|
5751
|
+
for (const error of collectRenderedGeoChartErrors(container)) {
|
|
5752
|
+
if (reportedErrorIdsRef.current.has(error.id)) continue;
|
|
5753
|
+
reportedErrorIdsRef.current.add(error.id);
|
|
5754
|
+
onError(error);
|
|
5755
|
+
}
|
|
5756
|
+
};
|
|
5757
|
+
const observer = new MutationObserver((records) => {
|
|
5758
|
+
if (records.some((record) => Array.from(record.addedNodes).some(involvesGeoChartErrorElement))) reportRenderedErrors();
|
|
5759
|
+
});
|
|
5760
|
+
observer.observe(container, {
|
|
5761
|
+
childList: true,
|
|
5762
|
+
subtree: true
|
|
5763
|
+
});
|
|
5764
|
+
reportRenderedErrors();
|
|
5765
|
+
return () => observer.disconnect();
|
|
5766
|
+
}, [onError]);
|
|
5699
5767
|
const loadingPlaceholder = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Center, {
|
|
5700
5768
|
className: (0, clsx.default)("geo-chart", geo_chart_module_default.container, className),
|
|
5701
5769
|
style: {
|
|
@@ -5754,7 +5822,17 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
|
|
|
5754
5822
|
defaultFillColorHex,
|
|
5755
5823
|
sanitizedData.hasHtmlTooltips
|
|
5756
5824
|
]);
|
|
5825
|
+
const chartEvents = (0, react$1.useMemo)(() => {
|
|
5826
|
+
if (!onError) return;
|
|
5827
|
+
return [{
|
|
5828
|
+
eventName: "error",
|
|
5829
|
+
callback: ({ eventArgs }) => {
|
|
5830
|
+
onError(normalizeGeoChartError(eventArgs));
|
|
5831
|
+
}
|
|
5832
|
+
}];
|
|
5833
|
+
}, [onError]);
|
|
5757
5834
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Center, {
|
|
5835
|
+
ref: containerRef,
|
|
5758
5836
|
className: (0, clsx.default)("geo-chart", geo_chart_module_default.container, className),
|
|
5759
5837
|
style: {
|
|
5760
5838
|
width,
|
|
@@ -5768,6 +5846,7 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
|
|
|
5768
5846
|
height,
|
|
5769
5847
|
data: sanitizedData.data,
|
|
5770
5848
|
options,
|
|
5849
|
+
chartEvents,
|
|
5771
5850
|
loader: loadingPlaceholder
|
|
5772
5851
|
})
|
|
5773
5852
|
});
|