@react-magma/charts 13.1.1-next.0 → 13.2.0-next.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/dist/charts.js +224 -115
- package/dist/charts.js.map +1 -1
- package/dist/charts.modern.module.js +224 -115
- package/dist/charts.modern.module.js.map +1 -1
- package/dist/charts.umd.js +574 -293
- package/dist/charts.umd.js.map +1 -1
- package/dist/components/CarbonChart/CarbonChart.d.ts +5 -0
- package/dist/components/CarbonChart/CarbonChartBar.stories.d.ts +27 -9
- package/package.json +3 -3
- package/src/components/CarbonChart/CarbonChart.test.js +185 -0
- package/src/components/CarbonChart/CarbonChart.tsx +262 -120
- package/src/components/CarbonChart/CarbonChartArea.stories.tsx +1 -1
- package/src/components/CarbonChart/CarbonChartAreaStacked.stories.tsx +1 -1
- package/src/components/CarbonChart/CarbonChartBar.stories.tsx +9 -2
- package/src/components/CarbonChart/CarbonChartBarFloating.stories.tsx +1 -1
- package/src/components/CarbonChart/CarbonChartBarGrouped.stories.tsx +1 -1
- package/src/components/CarbonChart/CarbonChartBarStacked.stories.tsx +1 -1
- package/src/components/CarbonChart/CarbonChartBoxplot.stories.tsx +1 -1
- package/src/components/CarbonChart/CarbonChartBubble.stories.tsx +1 -1
- package/src/components/CarbonChart/CarbonChartBullet.stories.tsx +1 -1
- package/src/components/CarbonChart/CarbonChartCombo.stories.tsx +1 -1
- package/src/components/CarbonChart/CarbonChartDonut.stories.tsx +3 -1
- package/src/components/CarbonChart/CarbonChartGauge.stories.tsx +1 -1
- package/src/components/CarbonChart/CarbonChartHistogram.stories.tsx +1 -1
- package/src/components/CarbonChart/CarbonChartLine.stories.tsx +1 -1
- package/src/components/CarbonChart/CarbonChartLollipop.stories.tsx +1 -1
- package/src/components/CarbonChart/CarbonChartMeter.stories.tsx +1 -1
- package/src/components/CarbonChart/CarbonChartPie.stories.tsx +1 -1
- package/src/components/CarbonChart/CarbonChartRadar.stories.tsx +1 -1
- package/src/components/CarbonChart/CarbonChartScatter.stories.tsx +1 -1
- package/src/components/CarbonChart/CarbonChartSparkline.stories.tsx +1 -1
- package/src/components/CarbonChart/CarbonChartStep.stories.tsx +1 -1
- package/src/components/ChartTable/ChartMoreOptionsButton.tsx +1 -0
- package/dist/components/ChartTable/ChartTable.test.d.ts +0 -1
- /package/src/components/ChartTable/{ChartTable.test.tsx → ChartTable.test.js} +0 -0
|
@@ -2366,7 +2366,7 @@ function ChartMoreOptionsButton(_a) {
|
|
|
2366
2366
|
var t = useChartToolbarI18n();
|
|
2367
2367
|
var resolvedAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t.moreOptionsAriaLabel;
|
|
2368
2368
|
return (React.createElement(Dropdown, { isInverse: isInverse },
|
|
2369
|
-
React.createElement(DropdownButton, { "aria-label": resolvedAriaLabel, icon: icon, variant: ButtonVariant.link }),
|
|
2369
|
+
React.createElement(DropdownButton, { "aria-label": resolvedAriaLabel, icon: icon, variant: ButtonVariant.link, testId: "chart-more-options-button" }),
|
|
2370
2370
|
React.createElement(DropdownContent, null, children)));
|
|
2371
2371
|
}
|
|
2372
2372
|
|
|
@@ -2449,7 +2449,7 @@ var FullscreenRoot = styled.div(templateObject_2 || (templateObject_2 = __makeTe
|
|
|
2449
2449
|
? props.theme.colors.primary700
|
|
2450
2450
|
: props.theme.colors.neutral100;
|
|
2451
2451
|
});
|
|
2452
|
-
var CarbonChartWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n &:fullscreen,\n &:-webkit-full-screen {\n background: ", ";\n\n .cds--chart-holder {\n height: 100vh !important;\n }\n }\n\n .cds--data-table thead tr th {\n background: ", " !important;\n }\n .cds--data-table td,\n .cds--data-table tbody th {\n color: ", ";\n }\n .cds--data-table tbody tr,\n .cds--data-table tbody tr td,\n .cds--data-table tbody tr th {\n color: ", ";\n }\n .cds--data-table tr {\n block-size: 2.5rem;\n }\n\n .cds--cc--tooltip .content-box .datapoint-tooltip p {\n font-size: ", ";\n padding: ", ";\n color: ", ";\n max-width: 142px;\n white-space: normal;\n }\n\n .cds--modal-container {\n clip-path: inset(0% 0% 0% 0% round ", ");\n background: ", ";\n .cds--data-table th {\n background: ", ";\n }\n .cds--data-table td {\n border-top: 1px solid\n ", ";\n border-bottom: 1px solid\n ", ";\n background: ", ";\n }\n .cds--data-table tr:hover td {\n background: ", ";\n }\n }\n\n .chart-holder p,\n .chart-holder div,\n .chart-holder text,\n .cds--cc--axes g.axis .axis-title,\n .cds--cc--title p.title,\n .cds--cc--axes g.axis g.tick text {\n font-family: ", " !important;\n color: ", ";\n }\n\n .cds--cc--axes {\n overflow: visible;\n }\n\n div.cds--cc--legend {\n div.legend-item {\n div.checkbox {\n background: ", ";\n border: none;\n width: ", ";\n height: ", ";\n svg {\n left: 2px;\n position: relative;\n }\n }\n p {\n font-size: ", ";\n margin: 0 ", " 0 0;\n }\n }\n }\n div.cds--cc--legend.has-deactivated-items {\n div.legend-item {\n div.checkbox {\n border: 1px solid\n ", ";\n }\n div.checkbox.active {\n border: 1px solid transparent;\n }\n }\n }\n .chart-holder {\n .cds--cc--axes g.axis g.tick text {\n fill: ", ";\n }\n .cds--cc--axes g.axis path.domain {\n stroke: ", ";\n }\n .cds--cc--grid g.x.grid g.tick line,\n .cds--cc--grid g.y.grid g.tick line {\n stroke: ", ";\n }\n .cds--cc--grid rect.chart-grid-backdrop.stroked {\n stroke: ", ";\n }\n .cds--cc--skeleton .shimmer-effect-lines {\n filter: ", ";\n }\n /* .chart-holder.cds--chart-holder.filled,\n .cds--cc--skeleton rect.chart-skeleton-backdrop,\n .cds--cc--grid rect.chart-grid-backdrop {\n } */\n\n .cds--cc--grid rect.chart-grid-backdrop {\n fill: transparent;\n }\n .cds--cc--scatter circle.dot,\n .cds--cc--scatter circle.dot.hovered {\n padding: 10px;\n }\n .cds--cc--scatter-stacked circle.dot.hovered,\n .cds--cc--scatter-stacked circle.dot.unfilled,\n .cds--cc--scatter circle.dot.unfilled {\n stroke-width: 6px;\n transition: 0.1s all linear;\n }\n .cds--cc--scatter circle.dot {\n filter: drop-shadow(\n 1px 0px 0px\n ", "\n )\n drop-shadow(\n -1px 0px 0px\n ", "\n )\n drop-shadow(\n 0px 1px 0px\n ", "\n )\n drop-shadow(\n 0px -1px 0px\n ", "\n );\n }\n .cds--cc--scatter circle.dot.hovered {\n stroke-width: 0.5em;\n transition: 0.1s all linear;\n filter: drop-shadow(\n 1px 0px 0px\n ", "\n )\n drop-shadow(\n -1px 0px 0px\n ", "\n )\n drop-shadow(\n 0px 1px 0px\n ", "\n )\n drop-shadow(\n 0px -1px 0px\n ", "\n );\n }\n .cds--cc--lollipop circle.dot,\n .cds--cc--lollipop circle.dot.filled,\n .cds--cc--lollipop circle.dot.hovered {\n stroke-width: 15px;\n }\n .cds--cc--scatter-stacked circle.dot,\n .cds--cc--scatter-stacked circle.dot.hovered,\n .cds--cc--scatter-stacked circle.dot.unfilled,\n .cds--cc--scatter circle.dot.unfilled,\n .cds--cc--lollipop circle.dot.filled,\n .cds--cc--lollipop circle.dot,\n .cds--cc--lollipop circle.dot.hovered {\n transition: 0.1s all linear;\n filter: drop-shadow(\n 1px 0px 0px\n ", "\n )\n drop-shadow(\n -1px 0px 0px\n ", "\n )\n drop-shadow(\n 0px 1px 0px\n ", "\n )\n drop-shadow(\n 0px -1px 0px\n ", "\n );\n }\n .cds--cc--lollipop .cds--cc--scatter circle.dot.hovered {\n transition: 0.1s all linear;\n stroke-width: 1.1em;\n }\n\n .cds--cc--tooltip {\n ", "\n }\n\n .cds--overflow-menu-options__btn:focus {\n outline-color: ", ";\n }\n\n .cds--btn {\n min-height: auto;\n display: flex;\n flex: 0 auto;\n align-items: center;\n text-align: center;\n padding: 20px;\n margin: 0;\n line-height: ", ";\n margin: 0;\n min-width: ", ";\n overflow: hidden;\n position: relative;\n right: ", ";\n text-align: center;\n height: 40px;\n font-family: ", ";\n font-size: ", ";\n border-radius: ", ";\n font-weight: 500;\n }\n\n .cds--btn--primary {\n background: ", ";\n color: ", ";\n }\n\n *:focus {\n outline: 2px solid\n ", " !important;\n outline-offset: 0;\n }\n .cds--overflow-menu-options__btn:focus,\n .cds--overflow-menu:focus,\n .cds--overflow-menu__trigger:focus,\n .toolbar-control:focus {\n outline: 2px solid\n ", " !important;\n }\n div.cds--cc--legend.clickable\n div.legend-item:not(.additional):focus\n div.checkbox,\n div.cds--cc--legend.clickable\n div.legend-item:not(.additional):hover\n div.checkbox {\n border: ", ";\n }\n div.cds--cc--legend.clickable\n div.legend-item:not(.additional):hover\n div.checkbox {\n box-shadow: 0 0 0 2px\n ", " !important;\n }\n\n .cds--btn--primary {\n &:focus {\n outline: 2px solid\n ", ";\n }\n outline-offset: 2px;\n border: none;\n box-shadow: none;\n }\n .cds--modal-header {\n background: ", ";\n margin-bottom: 0;\n border-bottom: 1px solid\n ", ";\n }\n .cds--modal-header__heading {\n font-weight: 600;\n }\n\n .cds--modal-close {\n position: absolute;\n top: 0;\n right: 0;\n &:focus {\n outline: 2px solid\n ", ";\n border-color: none;\n }\n outline-offset: 0;\n border: none;\n }\n }\n\n .cds--modal-footer.cds--modal-footer {\n display: flex;\n align-items: center;\n border-top: 1px solid\n ", ";\n background: ", " !important;\n }\n .layout-child.header {\n height: auto !important;\n p {\n text-overflow: inherit;\n overflow: auto;\n white-space: normal;\n }\n }\n\n &.has-magma-toolbar .cds--cc--title p.title {\n visibility: hidden;\n }\n\n svg:not(:root) {\n overflow: visible;\n }\n\n .cds--cc--chart-wrapper text {\n font-size: ", ";\n }\n\n g.center text,\n .pie-label {\n fill: ", ";\n }\n\n // Zoom responsive tweaks\n\n @media screen and (max-width: 760px) {\n .cds--modal-container {\n overflow-y: auto;\n }\n .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content {\n overflow: visible;\n }\n .cds--chart-holder\n .cds--modal\n .cds--modal-container\n .cds--modal-content\n table\n th {\n position: relative;\n }\n }\n"], ["\n &:fullscreen,\n &:-webkit-full-screen {\n background: ",
|
|
2452
|
+
var CarbonChartWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n &:fullscreen,\n &:-webkit-full-screen {\n background: ", ";\n\n .cds--chart-holder {\n height: 100vh !important;\n }\n }\n\n .cds--data-table thead tr th {\n background: ", " !important;\n }\n .cds--data-table td,\n .cds--data-table tbody th {\n color: ", ";\n }\n .cds--data-table tbody tr,\n .cds--data-table tbody tr td,\n .cds--data-table tbody tr th {\n color: ", ";\n }\n .cds--data-table tr {\n block-size: 2.5rem;\n }\n\n .cds--cc--tooltip .content-box .datapoint-tooltip p {\n font-size: ", ";\n padding: ", ";\n color: ", ";\n max-width: 142px;\n white-space: normal;\n }\n\n .cds--modal-container {\n clip-path: inset(0% 0% 0% 0% round ", ");\n background: ", ";\n .cds--data-table th {\n background: ", ";\n }\n .cds--data-table td {\n border-top: 1px solid\n ", ";\n border-bottom: 1px solid\n ", ";\n background: ", ";\n }\n .cds--data-table tr:hover td {\n background: ", ";\n }\n }\n\n .chart-holder p,\n .chart-holder div,\n .chart-holder text,\n .cds--cc--axes g.axis .axis-title,\n .cds--cc--title p.title,\n .cds--cc--axes g.axis g.tick text {\n font-family: ", " !important;\n color: ", ";\n }\n\n .cds--cc--axes {\n overflow: visible;\n }\n\n div.cds--cc--legend {\n div.legend-item {\n div.checkbox {\n background: ", ";\n border: none;\n width: ", ";\n height: ", ";\n svg {\n left: 2px;\n position: relative;\n }\n }\n p {\n font-size: ", ";\n margin: 0 ", " 0 0;\n }\n }\n }\n div.cds--cc--legend.has-deactivated-items {\n div.legend-item {\n div.checkbox {\n border: 1px solid\n ", ";\n }\n div.checkbox.active {\n border: 1px solid transparent;\n }\n }\n }\n .chart-holder {\n .cds--cc--axes g.axis g.tick text {\n fill: ", ";\n }\n .cds--cc--axes g.axis path.domain {\n stroke: ", ";\n }\n .cds--cc--grid g.x.grid g.tick line,\n .cds--cc--grid g.y.grid g.tick line {\n stroke: ", ";\n }\n .cds--cc--grid rect.chart-grid-backdrop.stroked {\n stroke: ", ";\n }\n .cds--cc--skeleton .shimmer-effect-lines {\n filter: ", ";\n }\n /* .chart-holder.cds--chart-holder.filled,\n .cds--cc--skeleton rect.chart-skeleton-backdrop,\n .cds--cc--grid rect.chart-grid-backdrop {\n } */\n\n .cds--cc--grid rect.chart-grid-backdrop {\n fill: transparent;\n }\n .cds--cc--scatter circle.dot,\n .cds--cc--scatter circle.dot.hovered {\n padding: 10px;\n }\n .cds--cc--scatter-stacked circle.dot.hovered,\n .cds--cc--scatter-stacked circle.dot.unfilled,\n .cds--cc--scatter circle.dot.unfilled {\n stroke-width: 6px;\n transition: 0.1s all linear;\n }\n .cds--cc--scatter circle.dot {\n filter: drop-shadow(\n 1px 0px 0px\n ", "\n )\n drop-shadow(\n -1px 0px 0px\n ", "\n )\n drop-shadow(\n 0px 1px 0px\n ", "\n )\n drop-shadow(\n 0px -1px 0px\n ", "\n );\n }\n .cds--cc--scatter circle.dot.hovered {\n stroke-width: 0.5em;\n transition: 0.1s all linear;\n filter: drop-shadow(\n 1px 0px 0px\n ", "\n )\n drop-shadow(\n -1px 0px 0px\n ", "\n )\n drop-shadow(\n 0px 1px 0px\n ", "\n )\n drop-shadow(\n 0px -1px 0px\n ", "\n );\n }\n .cds--cc--lollipop circle.dot,\n .cds--cc--lollipop circle.dot.filled,\n .cds--cc--lollipop circle.dot.hovered {\n stroke-width: 15px;\n }\n .cds--cc--scatter-stacked circle.dot,\n .cds--cc--scatter-stacked circle.dot.hovered,\n .cds--cc--scatter-stacked circle.dot.unfilled,\n .cds--cc--scatter circle.dot.unfilled,\n .cds--cc--lollipop circle.dot.filled,\n .cds--cc--lollipop circle.dot,\n .cds--cc--lollipop circle.dot.hovered {\n transition: 0.1s all linear;\n filter: drop-shadow(\n 1px 0px 0px\n ", "\n )\n drop-shadow(\n -1px 0px 0px\n ", "\n )\n drop-shadow(\n 0px 1px 0px\n ", "\n )\n drop-shadow(\n 0px -1px 0px\n ", "\n );\n }\n .cds--cc--lollipop .cds--cc--scatter circle.dot.hovered {\n transition: 0.1s all linear;\n stroke-width: 1.1em;\n }\n\n .cds--cc--tooltip {\n ", "\n }\n\n .cds--overflow-menu-options__btn:focus {\n outline-color: ", ";\n }\n\n .cds--btn {\n min-height: auto;\n display: flex;\n flex: 0 auto;\n align-items: center;\n text-align: center;\n padding: 20px;\n margin: 0;\n line-height: ", ";\n margin: 0;\n min-width: ", ";\n overflow: hidden;\n position: relative;\n right: ", ";\n text-align: center;\n height: 40px;\n font-family: ", ";\n font-size: ", ";\n border-radius: ", ";\n font-weight: 500;\n }\n\n .cds--btn--primary {\n background: ", ";\n color: ", ";\n }\n\n *:focus {\n outline: 2px solid\n ", " !important;\n outline-offset: 0;\n }\n circle.dot:focus {\n outline: none !important;\n }\n .cds--overflow-menu-options__btn:focus,\n .cds--overflow-menu:focus,\n .cds--overflow-menu__trigger:focus,\n .toolbar-control:focus {\n outline: 2px solid\n ", " !important;\n }\n div.cds--cc--legend.clickable\n div.legend-item:not(.additional):focus\n div.checkbox,\n div.cds--cc--legend.clickable\n div.legend-item:not(.additional):hover\n div.checkbox {\n border: ", ";\n }\n div.cds--cc--legend.clickable\n div.legend-item:not(.additional):hover\n div.checkbox {\n box-shadow: 0 0 0 2px\n ", " !important;\n }\n\n .cds--btn--primary {\n &:focus {\n outline: 2px solid\n ", ";\n }\n outline-offset: 2px;\n border: none;\n box-shadow: none;\n }\n .cds--modal-header {\n background: ", ";\n margin-bottom: 0;\n border-bottom: 1px solid\n ", ";\n }\n .cds--modal-header__heading {\n font-weight: 600;\n }\n\n .cds--modal-close {\n position: absolute;\n top: 0;\n right: 0;\n &:focus {\n outline: 2px solid\n ", ";\n border-color: none;\n }\n outline-offset: 0;\n border: none;\n }\n }\n\n .cds--modal-footer.cds--modal-footer {\n display: flex;\n align-items: center;\n border-top: 1px solid\n ", ";\n background: ", " !important;\n }\n .layout-child.header {\n height: auto !important;\n p {\n text-overflow: inherit;\n overflow: auto;\n white-space: normal;\n }\n }\n\n &.has-magma-toolbar .cds--cc--title p.title {\n visibility: hidden;\n }\n\n svg:not(:root) {\n overflow: visible;\n }\n\n circle.dot:focus {\n outline: none;\n stroke: ", " !important;\n stroke-width: 6px !important;\n stroke-opacity: 1 !important;\n paint-order: stroke fill;\n }\n\n .cds--cc--chart-wrapper text {\n font-size: ", ";\n }\n\n g.center text,\n .pie-label {\n fill: ", ";\n }\n\n // Zoom responsive tweaks\n\n @media screen and (max-width: 760px) {\n .cds--modal-container {\n overflow-y: auto;\n }\n .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content {\n overflow: visible;\n }\n .cds--chart-holder\n .cds--modal\n .cds--modal-container\n .cds--modal-content\n table\n th {\n position: relative;\n }\n }\n"], ["\n &:fullscreen,\n &:-webkit-full-screen {\n background: ",
|
|
2453
2453
|
";\n\n .cds--chart-holder {\n height: 100vh !important;\n }\n }\n\n .cds--data-table thead tr th {\n background: ",
|
|
2454
2454
|
" !important;\n }\n .cds--data-table td,\n .cds--data-table tbody th {\n color: ", ";\n }\n .cds--data-table tbody tr,\n .cds--data-table tbody tr td,\n .cds--data-table tbody tr th {\n color: ", ";\n }\n .cds--data-table tr {\n block-size: 2.5rem;\n }\n\n .cds--cc--tooltip .content-box .datapoint-tooltip p {\n font-size: ", ";\n padding: ", ";\n color: ",
|
|
2455
2455
|
";\n max-width: 142px;\n white-space: normal;\n }\n\n .cds--modal-container {\n clip-path: inset(0% 0% 0% 0% round ", ");\n background: ",
|
|
@@ -2479,7 +2479,7 @@ var CarbonChartWrapper = styled.div(templateObject_3 || (templateObject_3 = __ma
|
|
|
2479
2479
|
"\n }\n\n .cds--overflow-menu-options__btn:focus {\n outline-color: ",
|
|
2480
2480
|
";\n }\n\n .cds--btn {\n min-height: auto;\n display: flex;\n flex: 0 auto;\n align-items: center;\n text-align: center;\n padding: 20px;\n margin: 0;\n line-height: ", ";\n margin: 0;\n min-width: ", ";\n overflow: hidden;\n position: relative;\n right: ", ";\n text-align: center;\n height: 40px;\n font-family: ", ";\n font-size: ", ";\n border-radius: ", ";\n font-weight: 500;\n }\n\n .cds--btn--primary {\n background: ",
|
|
2481
2481
|
";\n color: ", ";\n }\n\n *:focus {\n outline: 2px solid\n ",
|
|
2482
|
-
" !important;\n outline-offset: 0;\n }\n .cds--overflow-menu-options__btn:focus,\n .cds--overflow-menu:focus,\n .cds--overflow-menu__trigger:focus,\n .toolbar-control:focus {\n outline: 2px solid\n ",
|
|
2482
|
+
" !important;\n outline-offset: 0;\n }\n circle.dot:focus {\n outline: none !important;\n }\n .cds--overflow-menu-options__btn:focus,\n .cds--overflow-menu:focus,\n .cds--overflow-menu__trigger:focus,\n .toolbar-control:focus {\n outline: 2px solid\n ",
|
|
2483
2483
|
" !important;\n }\n div.cds--cc--legend.clickable\n div.legend-item:not(.additional):focus\n div.checkbox,\n div.cds--cc--legend.clickable\n div.legend-item:not(.additional):hover\n div.checkbox {\n border: ",
|
|
2484
2484
|
";\n }\n div.cds--cc--legend.clickable\n div.legend-item:not(.additional):hover\n div.checkbox {\n box-shadow: 0 0 0 2px\n ",
|
|
2485
2485
|
" !important;\n }\n\n .cds--btn--primary {\n &:focus {\n outline: 2px solid\n ",
|
|
@@ -2488,7 +2488,8 @@ var CarbonChartWrapper = styled.div(templateObject_3 || (templateObject_3 = __ma
|
|
|
2488
2488
|
";\n }\n .cds--modal-header__heading {\n font-weight: 600;\n }\n\n .cds--modal-close {\n position: absolute;\n top: 0;\n right: 0;\n &:focus {\n outline: 2px solid\n ",
|
|
2489
2489
|
";\n border-color: none;\n }\n outline-offset: 0;\n border: none;\n }\n }\n\n .cds--modal-footer.cds--modal-footer {\n display: flex;\n align-items: center;\n border-top: 1px solid\n ",
|
|
2490
2490
|
";\n background: ",
|
|
2491
|
-
" !important;\n }\n .layout-child.header {\n height: auto !important;\n p {\n text-overflow: inherit;\n overflow: auto;\n white-space: normal;\n }\n }\n\n &.has-magma-toolbar .cds--cc--title p.title {\n visibility: hidden;\n }\n\n svg:not(:root) {\n overflow: visible;\n }\n\n .
|
|
2491
|
+
" !important;\n }\n .layout-child.header {\n height: auto !important;\n p {\n text-overflow: inherit;\n overflow: auto;\n white-space: normal;\n }\n }\n\n &.has-magma-toolbar .cds--cc--title p.title {\n visibility: hidden;\n }\n\n svg:not(:root) {\n overflow: visible;\n }\n\n circle.dot:focus {\n outline: none;\n stroke: ",
|
|
2492
|
+
" !important;\n stroke-width: 6px !important;\n stroke-opacity: 1 !important;\n paint-order: stroke fill;\n }\n\n .cds--cc--chart-wrapper text {\n font-size: ", ";\n }\n\n g.center text,\n .pie-label {\n fill: ", ";\n }\n\n // Zoom responsive tweaks\n\n @media screen and (max-width: 760px) {\n .cds--modal-container {\n overflow-y: auto;\n }\n .cds--chart-holder .cds--modal .cds--modal-container .cds--modal-content {\n overflow: visible;\n }\n .cds--chart-holder\n .cds--modal\n .cds--modal-container\n .cds--modal-content\n table\n th {\n position: relative;\n }\n }\n"])), function (props) {
|
|
2492
2493
|
return props.isInverse
|
|
2493
2494
|
? props.theme.colors.primary700
|
|
2494
2495
|
: props.theme.colors.neutral100;
|
|
@@ -2633,6 +2634,10 @@ var CarbonChartWrapper = styled.div(templateObject_3 || (templateObject_3 = __ma
|
|
|
2633
2634
|
return props.isInverse
|
|
2634
2635
|
? props.theme.colors.primary600
|
|
2635
2636
|
: props.theme.colors.neutral100;
|
|
2637
|
+
}, function (props) {
|
|
2638
|
+
return props.isInverse
|
|
2639
|
+
? props.theme.colors.focusInverse
|
|
2640
|
+
: props.theme.colors.focus;
|
|
2636
2641
|
}, function (props) { return props.theme.typeScale.size02.fontSize; }, function (props) { return (props.isInverse ? props.theme.colors.neutral100 : ''); });
|
|
2637
2642
|
/* Carbon themes
|
|
2638
2643
|
https://github.com/carbon-design-system/carbon-charts/blob/master/packages/core/src/interfaces/enums.ts#L12)
|
|
@@ -2756,78 +2761,109 @@ function downloadImage(wrapperRef, title, format) {
|
|
|
2756
2761
|
return;
|
|
2757
2762
|
var svgRect = svg.getBoundingClientRect();
|
|
2758
2763
|
var legendItems = readLegendItems(wrapper);
|
|
2759
|
-
var
|
|
2760
|
-
|
|
2761
|
-
|
|
2762
|
-
|
|
2763
|
-
|
|
2764
|
-
|
|
2765
|
-
|
|
2766
|
-
|
|
2767
|
-
|
|
2768
|
-
|
|
2769
|
-
|
|
2770
|
-
|
|
2771
|
-
|
|
2772
|
-
|
|
2773
|
-
|
|
2774
|
-
|
|
2775
|
-
var
|
|
2776
|
-
|
|
2777
|
-
|
|
2778
|
-
|
|
2779
|
-
x
|
|
2780
|
-
|
|
2764
|
+
var doWork = function () {
|
|
2765
|
+
var scale = 2;
|
|
2766
|
+
// Measure legend height
|
|
2767
|
+
var tempCanvas = document.createElement('canvas');
|
|
2768
|
+
var tempCtx = tempCanvas.getContext('2d');
|
|
2769
|
+
var fontSize = 13 * scale;
|
|
2770
|
+
var swatchSize = 12 * scale;
|
|
2771
|
+
var gap = 8 * scale;
|
|
2772
|
+
var itemGap = 16 * scale;
|
|
2773
|
+
var paddingX = 16 * scale;
|
|
2774
|
+
var canvasWidth = svgRect.width * scale;
|
|
2775
|
+
var legendHeight = 0;
|
|
2776
|
+
if (legendItems.length > 0 && tempCtx) {
|
|
2777
|
+
tempCtx.font = fontSize + "px sans-serif";
|
|
2778
|
+
var x = paddingX;
|
|
2779
|
+
var rows = 1;
|
|
2780
|
+
for (var _i = 0, legendItems_1 = legendItems; _i < legendItems_1.length; _i++) {
|
|
2781
|
+
var item = legendItems_1[_i];
|
|
2782
|
+
var textWidth = tempCtx.measureText(item.label).width;
|
|
2783
|
+
var itemWidth = swatchSize + gap + textWidth + itemGap;
|
|
2784
|
+
if (x + itemWidth > canvasWidth - paddingX && x > paddingX) {
|
|
2785
|
+
x = paddingX;
|
|
2786
|
+
rows++;
|
|
2787
|
+
}
|
|
2788
|
+
x += itemWidth;
|
|
2781
2789
|
}
|
|
2782
|
-
|
|
2790
|
+
legendHeight = rows * (fontSize + gap) + gap * 2;
|
|
2783
2791
|
}
|
|
2784
|
-
|
|
2785
|
-
|
|
2786
|
-
|
|
2787
|
-
|
|
2788
|
-
|
|
2789
|
-
|
|
2790
|
-
|
|
2791
|
-
|
|
2792
|
-
|
|
2793
|
-
|
|
2794
|
-
|
|
2795
|
-
|
|
2796
|
-
|
|
2797
|
-
|
|
2798
|
-
|
|
2799
|
-
|
|
2800
|
-
|
|
2801
|
-
|
|
2802
|
-
|
|
2803
|
-
|
|
2804
|
-
|
|
2805
|
-
|
|
2806
|
-
|
|
2807
|
-
var ctx = canvas.getContext('2d');
|
|
2808
|
-
if (!ctx)
|
|
2809
|
-
return;
|
|
2810
|
-
ctx.fillStyle = '#ffffff';
|
|
2811
|
-
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
2812
|
-
ctx.drawImage(img, 0, 0, svgRect.width * scale, svgRect.height * scale);
|
|
2813
|
-
URL.revokeObjectURL(url);
|
|
2814
|
-
if (legendItems.length > 0) {
|
|
2815
|
-
drawLegend(ctx, legendItems, svgRect.height * scale + gap, width, scale);
|
|
2816
|
-
}
|
|
2817
|
-
canvas.toBlob(function (blob) {
|
|
2818
|
-
if (!blob)
|
|
2792
|
+
var width = svgRect.width * scale;
|
|
2793
|
+
var height = svgRect.height * scale + legendHeight;
|
|
2794
|
+
var clone = svg.cloneNode(true);
|
|
2795
|
+
clone.setAttribute('width', String(svgRect.width));
|
|
2796
|
+
clone.setAttribute('height', String(svgRect.height));
|
|
2797
|
+
clone.setAttribute('viewBox', "0 0 " + svgRect.width + " " + svgRect.height);
|
|
2798
|
+
clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
|
|
2799
|
+
inlineStyles(svg, clone);
|
|
2800
|
+
var serializer = new XMLSerializer();
|
|
2801
|
+
var svgString = serializer.serializeToString(clone);
|
|
2802
|
+
var svgBlob = new Blob([svgString], {
|
|
2803
|
+
type: 'image/svg+xml;charset=utf-8',
|
|
2804
|
+
});
|
|
2805
|
+
var url = URL.createObjectURL(svgBlob);
|
|
2806
|
+
var mimeType = format === 'jpg' ? 'image/jpeg' : 'image/png';
|
|
2807
|
+
var ext = format === 'jpg' ? 'jpg' : 'png';
|
|
2808
|
+
var img = new Image();
|
|
2809
|
+
img.onload = function () {
|
|
2810
|
+
var canvas = document.createElement('canvas');
|
|
2811
|
+
canvas.width = width;
|
|
2812
|
+
canvas.height = height;
|
|
2813
|
+
var ctx = canvas.getContext('2d');
|
|
2814
|
+
if (!ctx)
|
|
2819
2815
|
return;
|
|
2820
|
-
|
|
2821
|
-
|
|
2822
|
-
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
|
|
2816
|
+
ctx.fillStyle = '#ffffff';
|
|
2817
|
+
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
2818
|
+
ctx.drawImage(img, 0, 0, svgRect.width * scale, svgRect.height * scale);
|
|
2819
|
+
URL.revokeObjectURL(url);
|
|
2820
|
+
if (legendItems.length > 0) {
|
|
2821
|
+
drawLegend(ctx, legendItems, svgRect.height * scale + gap, width, scale);
|
|
2822
|
+
}
|
|
2823
|
+
canvas.toBlob(function (blob) {
|
|
2824
|
+
if (!blob)
|
|
2825
|
+
return;
|
|
2826
|
+
var imgUrl = URL.createObjectURL(blob);
|
|
2827
|
+
var a = document.createElement('a');
|
|
2828
|
+
a.href = imgUrl;
|
|
2829
|
+
a.download = (title || 'chart') + "." + ext;
|
|
2830
|
+
a.click();
|
|
2831
|
+
URL.revokeObjectURL(imgUrl);
|
|
2832
|
+
}, mimeType);
|
|
2833
|
+
};
|
|
2834
|
+
img.onerror = function () { return URL.revokeObjectURL(url); };
|
|
2835
|
+
img.src = url;
|
|
2827
2836
|
};
|
|
2828
|
-
|
|
2837
|
+
// Defer to idle time with a 2-second deadline so it always runs.
|
|
2838
|
+
if (typeof requestIdleCallback === 'function') {
|
|
2839
|
+
requestIdleCallback(doWork, { timeout: 2000 });
|
|
2840
|
+
}
|
|
2841
|
+
else {
|
|
2842
|
+
setTimeout(doWork, 0);
|
|
2843
|
+
}
|
|
2829
2844
|
}
|
|
2845
|
+
var ALL_CHARTS = {
|
|
2846
|
+
area: AreaChart,
|
|
2847
|
+
areaStacked: StackedAreaChart,
|
|
2848
|
+
bar: SimpleBarChart,
|
|
2849
|
+
barGrouped: GroupedBarChart,
|
|
2850
|
+
barStacked: StackedBarChart,
|
|
2851
|
+
donut: DonutChart,
|
|
2852
|
+
line: LineChart$1,
|
|
2853
|
+
lollipop: LollipopChart,
|
|
2854
|
+
pie: PieChart,
|
|
2855
|
+
radar: RadarChart,
|
|
2856
|
+
boxplot: BoxplotChart,
|
|
2857
|
+
bubble: BubbleChart,
|
|
2858
|
+
bullet: BulletChart,
|
|
2859
|
+
gauge: GaugeChart,
|
|
2860
|
+
histogram: HistogramChart,
|
|
2861
|
+
meter: MeterChart,
|
|
2862
|
+
scatter: ScatterChart,
|
|
2863
|
+
combo: ComboChart,
|
|
2864
|
+
};
|
|
2830
2865
|
function CarbonChartToolbar(_a) {
|
|
2866
|
+
var _b;
|
|
2831
2867
|
var config = _a.config, dataSet = _a.dataSet, isInverse = _a.isInverse, isTableOpen = _a.isTableOpen, isFullscreen = _a.isFullscreen, onOpenTable = _a.onOpenTable, onToggleFullscreen = _a.onToggleFullscreen, theme = _a.theme, title = _a.title, wrapperRef = _a.wrapperRef;
|
|
2832
2868
|
var t = useChartToolbarI18n();
|
|
2833
2869
|
var showTable = config.showAsTable !== false;
|
|
@@ -2850,7 +2886,7 @@ function CarbonChartToolbar(_a) {
|
|
|
2850
2886
|
React.createElement(DropdownDivider, null),
|
|
2851
2887
|
config.moreOptions))));
|
|
2852
2888
|
return (React.createElement(ToolbarWrapper, { isFullscreen: isFullscreen, isInverse: isInverse, theme: theme },
|
|
2853
|
-
React.createElement(ChartTitle, { isInverse: isInverse, theme: theme }, resolvedTitle),
|
|
2889
|
+
React.createElement(ChartTitle, { as: "h" + ((_b = config.titleLevel) !== null && _b !== void 0 ? _b : 2), isInverse: isInverse, theme: theme }, resolvedTitle),
|
|
2854
2890
|
React.createElement(ToolbarActions, { theme: theme },
|
|
2855
2891
|
showTable && (React.createElement(ChartTableButton, { ariaLabel: resolvedTitle, icon: React.createElement(TableIcon, { size: 20 }), isInverse: isInverse, isTableOpen: isTableOpen, onClick: onOpenTable })),
|
|
2856
2892
|
showFullscreen && (React.createElement(ChartFullscreenButton, { ariaLabel: (isFullscreen ? 'Exit' : 'View') + " " + resolvedTitle + " full screen", icon: React.createElement(FullscreenIcon, { size: 20 }), exitIcon: React.createElement(FullscreenExitIcon, { size: 20 }), isInverse: isInverse, isFullscreen: isFullscreen, onClick: onToggleFullscreen })),
|
|
@@ -2898,7 +2934,13 @@ var CarbonChart = React.forwardRef(function (props, ref) {
|
|
|
2898
2934
|
};
|
|
2899
2935
|
document.addEventListener('fullscreenchange', onFullscreenChange);
|
|
2900
2936
|
return function () {
|
|
2901
|
-
|
|
2937
|
+
var _a;
|
|
2938
|
+
document.removeEventListener('fullscreenchange', onFullscreenChange);
|
|
2939
|
+
// Restore height if the component unmounts while in fullscreen.
|
|
2940
|
+
var chartHolder = (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.cds--chart-holder');
|
|
2941
|
+
if (chartHolder && document.fullscreenElement) {
|
|
2942
|
+
chartHolder.style.height = savedHeightRef.current;
|
|
2943
|
+
}
|
|
2902
2944
|
};
|
|
2903
2945
|
}, [fullscreenEnabled]);
|
|
2904
2946
|
var openTableModal = React.useCallback(function (event) {
|
|
@@ -2907,10 +2949,10 @@ var CarbonChart = React.forwardRef(function (props, ref) {
|
|
|
2907
2949
|
}, []);
|
|
2908
2950
|
var closeTableModal = React.useCallback(function () {
|
|
2909
2951
|
setIsTableOpen(false);
|
|
2910
|
-
|
|
2952
|
+
requestAnimationFrame(function () {
|
|
2911
2953
|
var _a;
|
|
2912
2954
|
(_a = lastTableTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
2913
|
-
}
|
|
2955
|
+
});
|
|
2914
2956
|
}, []);
|
|
2915
2957
|
var toggleFullscreen = React.useCallback(function () {
|
|
2916
2958
|
if (!document.fullscreenElement && internalRef.current) {
|
|
@@ -2929,61 +2971,128 @@ var CarbonChart = React.forwardRef(function (props, ref) {
|
|
|
2929
2971
|
downloadCsv(dataSet, chartTitle);
|
|
2930
2972
|
}, [dataSet, chartTitle]);
|
|
2931
2973
|
useCarbonModalFocusManagement(internalRef);
|
|
2932
|
-
var
|
|
2933
|
-
area: AreaChart,
|
|
2934
|
-
areaStacked: StackedAreaChart,
|
|
2935
|
-
bar: SimpleBarChart,
|
|
2936
|
-
barGrouped: GroupedBarChart,
|
|
2937
|
-
barStacked: StackedBarChart,
|
|
2938
|
-
donut: DonutChart,
|
|
2939
|
-
line: LineChart$1,
|
|
2940
|
-
lollipop: LollipopChart,
|
|
2941
|
-
pie: PieChart,
|
|
2942
|
-
radar: RadarChart,
|
|
2943
|
-
boxplot: BoxplotChart,
|
|
2944
|
-
bubble: BubbleChart,
|
|
2945
|
-
bullet: BulletChart,
|
|
2946
|
-
gauge: GaugeChart,
|
|
2947
|
-
histogram: HistogramChart,
|
|
2948
|
-
meter: MeterChart,
|
|
2949
|
-
scatter: ScatterChart,
|
|
2950
|
-
combo: ComboChart,
|
|
2951
|
-
};
|
|
2952
|
-
function buildColors() {
|
|
2974
|
+
var colorScale = React.useMemo(function () {
|
|
2953
2975
|
var scaleColorsObj = {};
|
|
2954
|
-
var allGroups = dataSet.map(function (item) {
|
|
2955
|
-
return 'group' in item ? item['group'] : null;
|
|
2956
|
-
});
|
|
2957
|
-
var uniqueGroups = allGroups.filter(function (g, index) { return allGroups.indexOf(g) === index; });
|
|
2958
2976
|
var customColors = options.colors || [];
|
|
2959
2977
|
var allColors = __spreadArrays(customColors, theme.chartColors);
|
|
2960
2978
|
var allInverseColors = __spreadArrays(customColors, theme.chartColorsInverse);
|
|
2961
|
-
|
|
2962
|
-
|
|
2963
|
-
|
|
2979
|
+
var allGroups = dataSet.map(function (item) {
|
|
2980
|
+
return 'group' in item ? item['group'] : null;
|
|
2981
|
+
});
|
|
2982
|
+
var uniqueGroups = Array.from(new Set(allGroups));
|
|
2983
|
+
if (uniqueGroups.length <= allColors.length) {
|
|
2984
|
+
for (var i = 0; i < uniqueGroups.length; i++) {
|
|
2985
|
+
var group = uniqueGroups[i];
|
|
2986
|
+
scaleColorsObj[String(group !== null && group !== void 0 ? group : 'null')] = isInverse
|
|
2964
2987
|
? allInverseColors[i]
|
|
2965
|
-
: allColors[i]
|
|
2988
|
+
: allColors[i];
|
|
2966
2989
|
}
|
|
2967
|
-
|
|
2968
|
-
});
|
|
2990
|
+
}
|
|
2969
2991
|
return scaleColorsObj;
|
|
2970
|
-
}
|
|
2992
|
+
}, [
|
|
2993
|
+
dataSet,
|
|
2994
|
+
options,
|
|
2995
|
+
theme.chartColors,
|
|
2996
|
+
theme.chartColorsInverse,
|
|
2997
|
+
isInverse,
|
|
2998
|
+
]);
|
|
2971
2999
|
var newOptions = __assign(__assign(__assign({}, options), { theme: isInverse ? ChartTheme.G100 : ChartTheme.WHITE, color: {
|
|
2972
|
-
scale:
|
|
3000
|
+
scale: colorScale,
|
|
2973
3001
|
}, tooltip: __assign(__assign({}, ((options === null || options === void 0 ? void 0 : options.tooltip) || {})), { truncation: {
|
|
2974
3002
|
type: 'none',
|
|
2975
3003
|
} }) }), (chartToolbar ? { toolbar: { enabled: false } } : {}));
|
|
2976
|
-
var ChartType =
|
|
2977
|
-
|
|
3004
|
+
var ChartType = ALL_CHARTS[type];
|
|
3005
|
+
React.useEffect(function () {
|
|
3006
|
+
if (!ariaLabel)
|
|
3007
|
+
return;
|
|
3008
|
+
var rafId = requestAnimationFrame(function () {
|
|
3009
|
+
var _a;
|
|
3010
|
+
var svgEl = (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.graph-frame');
|
|
3011
|
+
if (!svgEl)
|
|
3012
|
+
return;
|
|
3013
|
+
svgEl.setAttribute('aria-label', ariaLabel);
|
|
3014
|
+
});
|
|
3015
|
+
return function () { return cancelAnimationFrame(rafId); };
|
|
3016
|
+
}, [ariaLabel]);
|
|
3017
|
+
// Make Carbon Charts data points keyboard-focusable.
|
|
2978
3018
|
React.useEffect(function () {
|
|
2979
|
-
|
|
2980
|
-
|
|
2981
|
-
|
|
3019
|
+
var wrapper = internalRef.current;
|
|
3020
|
+
if (!wrapper)
|
|
3021
|
+
return;
|
|
3022
|
+
var isDot = function (el) {
|
|
3023
|
+
return el instanceof Element &&
|
|
3024
|
+
el.nodeName.toLowerCase() === 'circle' &&
|
|
3025
|
+
el.classList.contains('dot');
|
|
3026
|
+
};
|
|
3027
|
+
var onFocusIn = function (e) {
|
|
3028
|
+
if (!isDot(e.target))
|
|
3029
|
+
return;
|
|
3030
|
+
var dot = e.target;
|
|
3031
|
+
dot.style.opacity = '1';
|
|
3032
|
+
var _a = dot.getBoundingClientRect(), left = _a.left, top = _a.top, width = _a.width, height = _a.height;
|
|
3033
|
+
var cx = left + width / 2;
|
|
3034
|
+
var cy = top + height / 2;
|
|
3035
|
+
dot.dispatchEvent(new MouseEvent('mouseover', {
|
|
3036
|
+
bubbles: true,
|
|
3037
|
+
clientX: cx,
|
|
3038
|
+
clientY: cy,
|
|
3039
|
+
screenX: cx,
|
|
3040
|
+
screenY: cy,
|
|
3041
|
+
}));
|
|
3042
|
+
dot.dispatchEvent(new MouseEvent('mousemove', {
|
|
3043
|
+
bubbles: true,
|
|
3044
|
+
clientX: cx,
|
|
3045
|
+
clientY: cy,
|
|
3046
|
+
screenX: cx,
|
|
3047
|
+
screenY: cy,
|
|
3048
|
+
}));
|
|
3049
|
+
};
|
|
3050
|
+
var onFocusOut = function (e) {
|
|
3051
|
+
if (!isDot(e.target))
|
|
3052
|
+
return;
|
|
3053
|
+
var dot = e.target;
|
|
3054
|
+
dot.style.opacity = '';
|
|
3055
|
+
dot.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
|
|
3056
|
+
};
|
|
3057
|
+
var onKeyDown = function (e) {
|
|
3058
|
+
if (!isDot(e.target))
|
|
3059
|
+
return;
|
|
3060
|
+
if (e.key !== 'Enter' && e.key !== ' ')
|
|
3061
|
+
return;
|
|
3062
|
+
e.preventDefault();
|
|
3063
|
+
var dot = e.target;
|
|
3064
|
+
var _a = dot.getBoundingClientRect(), left = _a.left, top = _a.top, width = _a.width, height = _a.height;
|
|
3065
|
+
var cx = left + width / 2;
|
|
3066
|
+
var cy = top + height / 2;
|
|
3067
|
+
dot.dispatchEvent(new MouseEvent('click', {
|
|
3068
|
+
bubbles: true,
|
|
3069
|
+
clientX: cx,
|
|
3070
|
+
clientY: cy,
|
|
3071
|
+
}));
|
|
3072
|
+
};
|
|
3073
|
+
var rafId = requestAnimationFrame(function () {
|
|
3074
|
+
wrapper
|
|
3075
|
+
.querySelectorAll('circle.dot')
|
|
3076
|
+
.forEach(function (dot) {
|
|
3077
|
+
if (!dot.hasAttribute('tabindex')) {
|
|
3078
|
+
dot.setAttribute('tabindex', '0');
|
|
3079
|
+
}
|
|
2982
3080
|
});
|
|
2983
|
-
}
|
|
2984
|
-
|
|
2985
|
-
|
|
3081
|
+
});
|
|
3082
|
+
wrapper.addEventListener('focusin', onFocusIn);
|
|
3083
|
+
wrapper.addEventListener('focusout', onFocusOut);
|
|
3084
|
+
wrapper.addEventListener('keydown', onKeyDown);
|
|
3085
|
+
return function () {
|
|
3086
|
+
cancelAnimationFrame(rafId);
|
|
3087
|
+
wrapper.removeEventListener('focusin', onFocusIn);
|
|
3088
|
+
wrapper.removeEventListener('focusout', onFocusOut);
|
|
3089
|
+
wrapper.removeEventListener('keydown', onKeyDown);
|
|
3090
|
+
};
|
|
3091
|
+
}, [type]);
|
|
3092
|
+
var groupsLength = Object.keys(colorScale).length;
|
|
2986
3093
|
var showTable = (chartToolbar === null || chartToolbar === void 0 ? void 0 : chartToolbar.showAsTable) !== false;
|
|
3094
|
+
if (!ChartType)
|
|
3095
|
+
return null;
|
|
2987
3096
|
return (React.createElement(FullscreenRoot, { ref: mergedRef, isInverse: isInverse, theme: theme },
|
|
2988
3097
|
React.createElement(CarbonChartWrapper, __assign({ "data-testid": testId, isInverse: isInverse, theme: theme, className: "carbon-chart-wrapper" + (chartToolbar ? ' has-magma-toolbar' : ''), groupsLength: groupsLength < 6 ? groupsLength : 14 }, rest),
|
|
2989
3098
|
React.createElement(ChartContentWrapper, null,
|