@react-magma/charts 13.1.1-next.0 → 13.1.1
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 +222 -114
- package/dist/charts.js.map +1 -1
- package/dist/charts.modern.module.js +222 -114
- package/dist/charts.modern.module.js.map +1 -1
- package/dist/charts.umd.js +572 -292
- package/dist/charts.umd.js.map +1 -1
- package/package.json +3 -3
- package/src/components/CarbonChart/CarbonChart.test.js +164 -0
- package/src/components/CarbonChart/CarbonChart.tsx +252 -119
- 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 +1 -1
- 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
package/dist/charts.js
CHANGED
|
@@ -2387,7 +2387,7 @@ function ChartMoreOptionsButton(_a) {
|
|
|
2387
2387
|
var t = useChartToolbarI18n();
|
|
2388
2388
|
var resolvedAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t.moreOptionsAriaLabel;
|
|
2389
2389
|
return (React__namespace.createElement(reactMagmaDom.Dropdown, { isInverse: isInverse },
|
|
2390
|
-
React__namespace.createElement(reactMagmaDom.DropdownButton, { "aria-label": resolvedAriaLabel, icon: icon, variant: reactMagmaDom.ButtonVariant.link }),
|
|
2390
|
+
React__namespace.createElement(reactMagmaDom.DropdownButton, { "aria-label": resolvedAriaLabel, icon: icon, variant: reactMagmaDom.ButtonVariant.link, testId: "chart-more-options-button" }),
|
|
2391
2391
|
React__namespace.createElement(reactMagmaDom.DropdownContent, null, children)));
|
|
2392
2392
|
}
|
|
2393
2393
|
|
|
@@ -2470,7 +2470,7 @@ var FullscreenRoot = styled.div(templateObject_2 || (templateObject_2 = __makeTe
|
|
|
2470
2470
|
? props.theme.colors.primary700
|
|
2471
2471
|
: props.theme.colors.neutral100;
|
|
2472
2472
|
});
|
|
2473
|
-
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: ",
|
|
2473
|
+
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: ",
|
|
2474
2474
|
";\n\n .cds--chart-holder {\n height: 100vh !important;\n }\n }\n\n .cds--data-table thead tr th {\n background: ",
|
|
2475
2475
|
" !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: ",
|
|
2476
2476
|
";\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: ",
|
|
@@ -2500,7 +2500,7 @@ var CarbonChartWrapper = styled.div(templateObject_3 || (templateObject_3 = __ma
|
|
|
2500
2500
|
"\n }\n\n .cds--overflow-menu-options__btn:focus {\n outline-color: ",
|
|
2501
2501
|
";\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: ",
|
|
2502
2502
|
";\n color: ", ";\n }\n\n *:focus {\n outline: 2px solid\n ",
|
|
2503
|
-
" !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 ",
|
|
2503
|
+
" !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 ",
|
|
2504
2504
|
" !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: ",
|
|
2505
2505
|
";\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 ",
|
|
2506
2506
|
" !important;\n }\n\n .cds--btn--primary {\n &:focus {\n outline: 2px solid\n ",
|
|
@@ -2509,7 +2509,8 @@ var CarbonChartWrapper = styled.div(templateObject_3 || (templateObject_3 = __ma
|
|
|
2509
2509
|
";\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 ",
|
|
2510
2510
|
";\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 ",
|
|
2511
2511
|
";\n background: ",
|
|
2512
|
-
" !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 .
|
|
2512
|
+
" !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: ",
|
|
2513
|
+
" !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) {
|
|
2513
2514
|
return props.isInverse
|
|
2514
2515
|
? props.theme.colors.primary700
|
|
2515
2516
|
: props.theme.colors.neutral100;
|
|
@@ -2654,6 +2655,10 @@ var CarbonChartWrapper = styled.div(templateObject_3 || (templateObject_3 = __ma
|
|
|
2654
2655
|
return props.isInverse
|
|
2655
2656
|
? props.theme.colors.primary600
|
|
2656
2657
|
: props.theme.colors.neutral100;
|
|
2658
|
+
}, function (props) {
|
|
2659
|
+
return props.isInverse
|
|
2660
|
+
? props.theme.colors.focusInverse
|
|
2661
|
+
: props.theme.colors.focus;
|
|
2657
2662
|
}, function (props) { return props.theme.typeScale.size02.fontSize; }, function (props) { return (props.isInverse ? props.theme.colors.neutral100 : ''); });
|
|
2658
2663
|
/* Carbon themes
|
|
2659
2664
|
https://github.com/carbon-design-system/carbon-charts/blob/master/packages/core/src/interfaces/enums.ts#L12)
|
|
@@ -2777,77 +2782,107 @@ function downloadImage(wrapperRef, title, format) {
|
|
|
2777
2782
|
return;
|
|
2778
2783
|
var svgRect = svg.getBoundingClientRect();
|
|
2779
2784
|
var legendItems = readLegendItems(wrapper);
|
|
2780
|
-
var
|
|
2781
|
-
|
|
2782
|
-
|
|
2783
|
-
|
|
2784
|
-
|
|
2785
|
-
|
|
2786
|
-
|
|
2787
|
-
|
|
2788
|
-
|
|
2789
|
-
|
|
2790
|
-
|
|
2791
|
-
|
|
2792
|
-
|
|
2793
|
-
|
|
2794
|
-
|
|
2795
|
-
|
|
2796
|
-
var
|
|
2797
|
-
|
|
2798
|
-
|
|
2799
|
-
|
|
2800
|
-
x
|
|
2801
|
-
|
|
2785
|
+
var doWork = function () {
|
|
2786
|
+
var scale = 2;
|
|
2787
|
+
// Measure legend height
|
|
2788
|
+
var tempCanvas = document.createElement('canvas');
|
|
2789
|
+
var tempCtx = tempCanvas.getContext('2d');
|
|
2790
|
+
var fontSize = 13 * scale;
|
|
2791
|
+
var swatchSize = 12 * scale;
|
|
2792
|
+
var gap = 8 * scale;
|
|
2793
|
+
var itemGap = 16 * scale;
|
|
2794
|
+
var paddingX = 16 * scale;
|
|
2795
|
+
var canvasWidth = svgRect.width * scale;
|
|
2796
|
+
var legendHeight = 0;
|
|
2797
|
+
if (legendItems.length > 0 && tempCtx) {
|
|
2798
|
+
tempCtx.font = fontSize + "px sans-serif";
|
|
2799
|
+
var x = paddingX;
|
|
2800
|
+
var rows = 1;
|
|
2801
|
+
for (var _i = 0, legendItems_1 = legendItems; _i < legendItems_1.length; _i++) {
|
|
2802
|
+
var item = legendItems_1[_i];
|
|
2803
|
+
var textWidth = tempCtx.measureText(item.label).width;
|
|
2804
|
+
var itemWidth = swatchSize + gap + textWidth + itemGap;
|
|
2805
|
+
if (x + itemWidth > canvasWidth - paddingX && x > paddingX) {
|
|
2806
|
+
x = paddingX;
|
|
2807
|
+
rows++;
|
|
2808
|
+
}
|
|
2809
|
+
x += itemWidth;
|
|
2802
2810
|
}
|
|
2803
|
-
|
|
2811
|
+
legendHeight = rows * (fontSize + gap) + gap * 2;
|
|
2804
2812
|
}
|
|
2805
|
-
|
|
2806
|
-
|
|
2807
|
-
|
|
2808
|
-
|
|
2809
|
-
|
|
2810
|
-
|
|
2811
|
-
|
|
2812
|
-
|
|
2813
|
-
|
|
2814
|
-
|
|
2815
|
-
|
|
2816
|
-
|
|
2817
|
-
|
|
2818
|
-
|
|
2819
|
-
|
|
2820
|
-
|
|
2821
|
-
|
|
2822
|
-
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
|
|
2827
|
-
|
|
2828
|
-
var ctx = canvas.getContext('2d');
|
|
2829
|
-
if (!ctx)
|
|
2830
|
-
return;
|
|
2831
|
-
ctx.fillStyle = '#ffffff';
|
|
2832
|
-
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
2833
|
-
ctx.drawImage(img, 0, 0, svgRect.width * scale, svgRect.height * scale);
|
|
2834
|
-
URL.revokeObjectURL(url);
|
|
2835
|
-
if (legendItems.length > 0) {
|
|
2836
|
-
drawLegend(ctx, legendItems, svgRect.height * scale + gap, width, scale);
|
|
2837
|
-
}
|
|
2838
|
-
canvas.toBlob(function (blob) {
|
|
2839
|
-
if (!blob)
|
|
2813
|
+
var width = svgRect.width * scale;
|
|
2814
|
+
var height = svgRect.height * scale + legendHeight;
|
|
2815
|
+
var clone = svg.cloneNode(true);
|
|
2816
|
+
clone.setAttribute('width', String(svgRect.width));
|
|
2817
|
+
clone.setAttribute('height', String(svgRect.height));
|
|
2818
|
+
clone.setAttribute('viewBox', "0 0 " + svgRect.width + " " + svgRect.height);
|
|
2819
|
+
clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
|
|
2820
|
+
inlineStyles(svg, clone);
|
|
2821
|
+
var serializer = new XMLSerializer();
|
|
2822
|
+
var svgString = serializer.serializeToString(clone);
|
|
2823
|
+
var svgBlob = new Blob([svgString], {
|
|
2824
|
+
type: 'image/svg+xml;charset=utf-8',
|
|
2825
|
+
});
|
|
2826
|
+
var url = URL.createObjectURL(svgBlob);
|
|
2827
|
+
var mimeType = format === 'jpg' ? 'image/jpeg' : 'image/png';
|
|
2828
|
+
var ext = format === 'jpg' ? 'jpg' : 'png';
|
|
2829
|
+
var img = new Image();
|
|
2830
|
+
img.onload = function () {
|
|
2831
|
+
var canvas = document.createElement('canvas');
|
|
2832
|
+
canvas.width = width;
|
|
2833
|
+
canvas.height = height;
|
|
2834
|
+
var ctx = canvas.getContext('2d');
|
|
2835
|
+
if (!ctx)
|
|
2840
2836
|
return;
|
|
2841
|
-
|
|
2842
|
-
|
|
2843
|
-
|
|
2844
|
-
|
|
2845
|
-
|
|
2846
|
-
|
|
2847
|
-
|
|
2837
|
+
ctx.fillStyle = '#ffffff';
|
|
2838
|
+
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
2839
|
+
ctx.drawImage(img, 0, 0, svgRect.width * scale, svgRect.height * scale);
|
|
2840
|
+
URL.revokeObjectURL(url);
|
|
2841
|
+
if (legendItems.length > 0) {
|
|
2842
|
+
drawLegend(ctx, legendItems, svgRect.height * scale + gap, width, scale);
|
|
2843
|
+
}
|
|
2844
|
+
canvas.toBlob(function (blob) {
|
|
2845
|
+
if (!blob)
|
|
2846
|
+
return;
|
|
2847
|
+
var imgUrl = URL.createObjectURL(blob);
|
|
2848
|
+
var a = document.createElement('a');
|
|
2849
|
+
a.href = imgUrl;
|
|
2850
|
+
a.download = (title || 'chart') + "." + ext;
|
|
2851
|
+
a.click();
|
|
2852
|
+
URL.revokeObjectURL(imgUrl);
|
|
2853
|
+
}, mimeType);
|
|
2854
|
+
};
|
|
2855
|
+
img.onerror = function () { return URL.revokeObjectURL(url); };
|
|
2856
|
+
img.src = url;
|
|
2848
2857
|
};
|
|
2849
|
-
|
|
2858
|
+
// Defer to idle time with a 2-second deadline so it always runs.
|
|
2859
|
+
if (typeof requestIdleCallback === 'function') {
|
|
2860
|
+
requestIdleCallback(doWork, { timeout: 2000 });
|
|
2861
|
+
}
|
|
2862
|
+
else {
|
|
2863
|
+
setTimeout(doWork, 0);
|
|
2864
|
+
}
|
|
2850
2865
|
}
|
|
2866
|
+
var ALL_CHARTS = {
|
|
2867
|
+
area: chartsReact.AreaChart,
|
|
2868
|
+
areaStacked: chartsReact.StackedAreaChart,
|
|
2869
|
+
bar: chartsReact.SimpleBarChart,
|
|
2870
|
+
barGrouped: chartsReact.GroupedBarChart,
|
|
2871
|
+
barStacked: chartsReact.StackedBarChart,
|
|
2872
|
+
donut: chartsReact.DonutChart,
|
|
2873
|
+
line: chartsReact.LineChart,
|
|
2874
|
+
lollipop: chartsReact.LollipopChart,
|
|
2875
|
+
pie: chartsReact.PieChart,
|
|
2876
|
+
radar: chartsReact.RadarChart,
|
|
2877
|
+
boxplot: chartsReact.BoxplotChart,
|
|
2878
|
+
bubble: chartsReact.BubbleChart,
|
|
2879
|
+
bullet: chartsReact.BulletChart,
|
|
2880
|
+
gauge: chartsReact.GaugeChart,
|
|
2881
|
+
histogram: chartsReact.HistogramChart,
|
|
2882
|
+
meter: chartsReact.MeterChart,
|
|
2883
|
+
scatter: chartsReact.ScatterChart,
|
|
2884
|
+
combo: chartsReact.ComboChart,
|
|
2885
|
+
};
|
|
2851
2886
|
function CarbonChartToolbar(_a) {
|
|
2852
2887
|
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;
|
|
2853
2888
|
var t = useChartToolbarI18n();
|
|
@@ -2919,7 +2954,13 @@ var CarbonChart = React__namespace.forwardRef(function (props, ref) {
|
|
|
2919
2954
|
};
|
|
2920
2955
|
document.addEventListener('fullscreenchange', onFullscreenChange);
|
|
2921
2956
|
return function () {
|
|
2922
|
-
|
|
2957
|
+
var _a;
|
|
2958
|
+
document.removeEventListener('fullscreenchange', onFullscreenChange);
|
|
2959
|
+
// Restore height if the component unmounts while in fullscreen.
|
|
2960
|
+
var chartHolder = (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.cds--chart-holder');
|
|
2961
|
+
if (chartHolder && document.fullscreenElement) {
|
|
2962
|
+
chartHolder.style.height = savedHeightRef.current;
|
|
2963
|
+
}
|
|
2923
2964
|
};
|
|
2924
2965
|
}, [fullscreenEnabled]);
|
|
2925
2966
|
var openTableModal = React__namespace.useCallback(function (event) {
|
|
@@ -2928,10 +2969,10 @@ var CarbonChart = React__namespace.forwardRef(function (props, ref) {
|
|
|
2928
2969
|
}, []);
|
|
2929
2970
|
var closeTableModal = React__namespace.useCallback(function () {
|
|
2930
2971
|
setIsTableOpen(false);
|
|
2931
|
-
|
|
2972
|
+
requestAnimationFrame(function () {
|
|
2932
2973
|
var _a;
|
|
2933
2974
|
(_a = lastTableTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
2934
|
-
}
|
|
2975
|
+
});
|
|
2935
2976
|
}, []);
|
|
2936
2977
|
var toggleFullscreen = React__namespace.useCallback(function () {
|
|
2937
2978
|
if (!document.fullscreenElement && internalRef.current) {
|
|
@@ -2950,61 +2991,128 @@ var CarbonChart = React__namespace.forwardRef(function (props, ref) {
|
|
|
2950
2991
|
downloadCsv(dataSet, chartTitle);
|
|
2951
2992
|
}, [dataSet, chartTitle]);
|
|
2952
2993
|
useCarbonModalFocusManagement(internalRef);
|
|
2953
|
-
var
|
|
2954
|
-
area: chartsReact.AreaChart,
|
|
2955
|
-
areaStacked: chartsReact.StackedAreaChart,
|
|
2956
|
-
bar: chartsReact.SimpleBarChart,
|
|
2957
|
-
barGrouped: chartsReact.GroupedBarChart,
|
|
2958
|
-
barStacked: chartsReact.StackedBarChart,
|
|
2959
|
-
donut: chartsReact.DonutChart,
|
|
2960
|
-
line: chartsReact.LineChart,
|
|
2961
|
-
lollipop: chartsReact.LollipopChart,
|
|
2962
|
-
pie: chartsReact.PieChart,
|
|
2963
|
-
radar: chartsReact.RadarChart,
|
|
2964
|
-
boxplot: chartsReact.BoxplotChart,
|
|
2965
|
-
bubble: chartsReact.BubbleChart,
|
|
2966
|
-
bullet: chartsReact.BulletChart,
|
|
2967
|
-
gauge: chartsReact.GaugeChart,
|
|
2968
|
-
histogram: chartsReact.HistogramChart,
|
|
2969
|
-
meter: chartsReact.MeterChart,
|
|
2970
|
-
scatter: chartsReact.ScatterChart,
|
|
2971
|
-
combo: chartsReact.ComboChart,
|
|
2972
|
-
};
|
|
2973
|
-
function buildColors() {
|
|
2994
|
+
var colorScale = React__namespace.useMemo(function () {
|
|
2974
2995
|
var scaleColorsObj = {};
|
|
2975
|
-
var allGroups = dataSet.map(function (item) {
|
|
2976
|
-
return 'group' in item ? item['group'] : null;
|
|
2977
|
-
});
|
|
2978
|
-
var uniqueGroups = allGroups.filter(function (g, index) { return allGroups.indexOf(g) === index; });
|
|
2979
2996
|
var customColors = options.colors || [];
|
|
2980
2997
|
var allColors = __spreadArrays(customColors, theme.chartColors);
|
|
2981
2998
|
var allInverseColors = __spreadArrays(customColors, theme.chartColorsInverse);
|
|
2982
|
-
|
|
2983
|
-
|
|
2984
|
-
|
|
2999
|
+
var allGroups = dataSet.map(function (item) {
|
|
3000
|
+
return 'group' in item ? item['group'] : null;
|
|
3001
|
+
});
|
|
3002
|
+
var uniqueGroups = Array.from(new Set(allGroups));
|
|
3003
|
+
if (uniqueGroups.length <= allColors.length) {
|
|
3004
|
+
for (var i = 0; i < uniqueGroups.length; i++) {
|
|
3005
|
+
var group = uniqueGroups[i];
|
|
3006
|
+
scaleColorsObj[String(group !== null && group !== void 0 ? group : 'null')] = isInverse
|
|
2985
3007
|
? allInverseColors[i]
|
|
2986
|
-
: allColors[i]
|
|
3008
|
+
: allColors[i];
|
|
2987
3009
|
}
|
|
2988
|
-
|
|
2989
|
-
});
|
|
3010
|
+
}
|
|
2990
3011
|
return scaleColorsObj;
|
|
2991
|
-
}
|
|
3012
|
+
}, [
|
|
3013
|
+
dataSet,
|
|
3014
|
+
options,
|
|
3015
|
+
theme.chartColors,
|
|
3016
|
+
theme.chartColorsInverse,
|
|
3017
|
+
isInverse,
|
|
3018
|
+
]);
|
|
2992
3019
|
var newOptions = __assign(__assign(__assign({}, options), { theme: isInverse ? ChartTheme.G100 : ChartTheme.WHITE, color: {
|
|
2993
|
-
scale:
|
|
3020
|
+
scale: colorScale,
|
|
2994
3021
|
}, tooltip: __assign(__assign({}, ((options === null || options === void 0 ? void 0 : options.tooltip) || {})), { truncation: {
|
|
2995
3022
|
type: 'none',
|
|
2996
3023
|
} }) }), (chartToolbar ? { toolbar: { enabled: false } } : {}));
|
|
2997
|
-
var ChartType =
|
|
2998
|
-
|
|
3024
|
+
var ChartType = ALL_CHARTS[type];
|
|
3025
|
+
React__namespace.useEffect(function () {
|
|
3026
|
+
if (!ariaLabel)
|
|
3027
|
+
return;
|
|
3028
|
+
var rafId = requestAnimationFrame(function () {
|
|
3029
|
+
var _a;
|
|
3030
|
+
var svgEl = (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.graph-frame');
|
|
3031
|
+
if (!svgEl)
|
|
3032
|
+
return;
|
|
3033
|
+
svgEl.setAttribute('aria-label', ariaLabel);
|
|
3034
|
+
});
|
|
3035
|
+
return function () { return cancelAnimationFrame(rafId); };
|
|
3036
|
+
}, [ariaLabel]);
|
|
3037
|
+
// Make Carbon Charts data points keyboard-focusable.
|
|
2999
3038
|
React__namespace.useEffect(function () {
|
|
3000
|
-
|
|
3001
|
-
|
|
3002
|
-
|
|
3039
|
+
var wrapper = internalRef.current;
|
|
3040
|
+
if (!wrapper)
|
|
3041
|
+
return;
|
|
3042
|
+
var isDot = function (el) {
|
|
3043
|
+
return el instanceof Element &&
|
|
3044
|
+
el.nodeName.toLowerCase() === 'circle' &&
|
|
3045
|
+
el.classList.contains('dot');
|
|
3046
|
+
};
|
|
3047
|
+
var onFocusIn = function (e) {
|
|
3048
|
+
if (!isDot(e.target))
|
|
3049
|
+
return;
|
|
3050
|
+
var dot = e.target;
|
|
3051
|
+
dot.style.opacity = '1';
|
|
3052
|
+
var _a = dot.getBoundingClientRect(), left = _a.left, top = _a.top, width = _a.width, height = _a.height;
|
|
3053
|
+
var cx = left + width / 2;
|
|
3054
|
+
var cy = top + height / 2;
|
|
3055
|
+
dot.dispatchEvent(new MouseEvent('mouseover', {
|
|
3056
|
+
bubbles: true,
|
|
3057
|
+
clientX: cx,
|
|
3058
|
+
clientY: cy,
|
|
3059
|
+
screenX: cx,
|
|
3060
|
+
screenY: cy,
|
|
3061
|
+
}));
|
|
3062
|
+
dot.dispatchEvent(new MouseEvent('mousemove', {
|
|
3063
|
+
bubbles: true,
|
|
3064
|
+
clientX: cx,
|
|
3065
|
+
clientY: cy,
|
|
3066
|
+
screenX: cx,
|
|
3067
|
+
screenY: cy,
|
|
3068
|
+
}));
|
|
3069
|
+
};
|
|
3070
|
+
var onFocusOut = function (e) {
|
|
3071
|
+
if (!isDot(e.target))
|
|
3072
|
+
return;
|
|
3073
|
+
var dot = e.target;
|
|
3074
|
+
dot.style.opacity = '';
|
|
3075
|
+
dot.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
|
|
3076
|
+
};
|
|
3077
|
+
var onKeyDown = function (e) {
|
|
3078
|
+
if (!isDot(e.target))
|
|
3079
|
+
return;
|
|
3080
|
+
if (e.key !== 'Enter' && e.key !== ' ')
|
|
3081
|
+
return;
|
|
3082
|
+
e.preventDefault();
|
|
3083
|
+
var dot = e.target;
|
|
3084
|
+
var _a = dot.getBoundingClientRect(), left = _a.left, top = _a.top, width = _a.width, height = _a.height;
|
|
3085
|
+
var cx = left + width / 2;
|
|
3086
|
+
var cy = top + height / 2;
|
|
3087
|
+
dot.dispatchEvent(new MouseEvent('click', {
|
|
3088
|
+
bubbles: true,
|
|
3089
|
+
clientX: cx,
|
|
3090
|
+
clientY: cy,
|
|
3091
|
+
}));
|
|
3092
|
+
};
|
|
3093
|
+
var rafId = requestAnimationFrame(function () {
|
|
3094
|
+
wrapper
|
|
3095
|
+
.querySelectorAll('circle.dot')
|
|
3096
|
+
.forEach(function (dot) {
|
|
3097
|
+
if (!dot.hasAttribute('tabindex')) {
|
|
3098
|
+
dot.setAttribute('tabindex', '0');
|
|
3099
|
+
}
|
|
3003
3100
|
});
|
|
3004
|
-
}
|
|
3005
|
-
|
|
3006
|
-
|
|
3101
|
+
});
|
|
3102
|
+
wrapper.addEventListener('focusin', onFocusIn);
|
|
3103
|
+
wrapper.addEventListener('focusout', onFocusOut);
|
|
3104
|
+
wrapper.addEventListener('keydown', onKeyDown);
|
|
3105
|
+
return function () {
|
|
3106
|
+
cancelAnimationFrame(rafId);
|
|
3107
|
+
wrapper.removeEventListener('focusin', onFocusIn);
|
|
3108
|
+
wrapper.removeEventListener('focusout', onFocusOut);
|
|
3109
|
+
wrapper.removeEventListener('keydown', onKeyDown);
|
|
3110
|
+
};
|
|
3111
|
+
}, [type]);
|
|
3112
|
+
var groupsLength = Object.keys(colorScale).length;
|
|
3007
3113
|
var showTable = (chartToolbar === null || chartToolbar === void 0 ? void 0 : chartToolbar.showAsTable) !== false;
|
|
3114
|
+
if (!ChartType)
|
|
3115
|
+
return null;
|
|
3008
3116
|
return (React__namespace.createElement(FullscreenRoot, { ref: mergedRef, isInverse: isInverse, theme: theme },
|
|
3009
3117
|
React__namespace.createElement(CarbonChartWrapper, __assign({ "data-testid": testId, isInverse: isInverse, theme: theme, className: "carbon-chart-wrapper" + (chartToolbar ? ' has-magma-toolbar' : ''), groupsLength: groupsLength < 6 ? groupsLength : 14 }, rest),
|
|
3010
3118
|
React__namespace.createElement(ChartContentWrapper, null,
|