@react-magma/charts 15.0.0-rc.1 → 15.0.0-rc.3
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 +106 -6
- package/dist/charts.js.map +1 -1
- package/dist/charts.modern.module.js +107 -7
- package/dist/charts.modern.module.js.map +1 -1
- package/dist/charts.umd.js +270 -13
- package/dist/charts.umd.js.map +1 -1
- package/dist/components/ChartTable/chartToolbarI18n.d.ts +1 -0
- package/package.json +1 -1
- package/src/components/CarbonChart/CarbonChart.test.js +142 -4
- package/src/components/CarbonChart/CarbonChart.tsx +142 -0
- package/src/components/ChartTable/chartToolbarI18n.ts +4 -0
package/dist/charts.js
CHANGED
|
@@ -1004,6 +1004,7 @@ var defaults = {
|
|
|
1004
1004
|
downloadAsJpg: 'Download as JPG',
|
|
1005
1005
|
downloadAsPng: 'Download as PNG',
|
|
1006
1006
|
exitFullScreen: 'Exit full screen',
|
|
1007
|
+
legendInstructions: 'Checking these checkboxes will update the chart.',
|
|
1007
1008
|
makeFullScreen: 'Make full screen',
|
|
1008
1009
|
moreOptionsAriaLabel: 'More options',
|
|
1009
1010
|
showAsTableTooltip: 'Show as table',
|
|
@@ -1014,7 +1015,7 @@ var defaults = {
|
|
|
1014
1015
|
* falling back to English defaults.
|
|
1015
1016
|
*/
|
|
1016
1017
|
function useChartToolbarI18n() {
|
|
1017
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
1018
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
1018
1019
|
var i18n = React__namespace.useContext(reactMagmaDom.I18nContext);
|
|
1019
1020
|
var toolbar = (_a = i18n.charts) === null || _a === void 0 ? void 0 : _a.toolbar;
|
|
1020
1021
|
if (!toolbar)
|
|
@@ -1025,10 +1026,11 @@ function useChartToolbarI18n() {
|
|
|
1025
1026
|
downloadAsJpg: (_d = toolbar.downloadAsJpg) !== null && _d !== void 0 ? _d : defaults.downloadAsJpg,
|
|
1026
1027
|
downloadAsPng: (_e = toolbar.downloadAsPng) !== null && _e !== void 0 ? _e : defaults.downloadAsPng,
|
|
1027
1028
|
exitFullScreen: (_f = toolbar.exitFullScreen) !== null && _f !== void 0 ? _f : defaults.exitFullScreen,
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1029
|
+
legendInstructions: (_g = toolbar.legendInstructions) !== null && _g !== void 0 ? _g : defaults.legendInstructions,
|
|
1030
|
+
makeFullScreen: (_h = toolbar.makeFullScreen) !== null && _h !== void 0 ? _h : defaults.makeFullScreen,
|
|
1031
|
+
moreOptionsAriaLabel: (_j = toolbar.moreOptionsAriaLabel) !== null && _j !== void 0 ? _j : defaults.moreOptionsAriaLabel,
|
|
1032
|
+
showAsTableTooltip: (_k = toolbar.showAsTableTooltip) !== null && _k !== void 0 ? _k : defaults.showAsTableTooltip,
|
|
1033
|
+
tabularRepresentationLabel: (_l = toolbar.tabularRepresentationLabel) !== null && _l !== void 0 ? _l : defaults.tabularRepresentationLabel,
|
|
1032
1034
|
};
|
|
1033
1035
|
}
|
|
1034
1036
|
|
|
@@ -1127,7 +1129,7 @@ var FullscreenRoot = styled.div(templateObject_2 || (templateObject_2 = __makeTe
|
|
|
1127
1129
|
? props.theme.colors.primary700
|
|
1128
1130
|
: props.theme.colors.neutral100;
|
|
1129
1131
|
});
|
|
1130
|
-
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: ", ";\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"])), function (props) {
|
|
1132
|
+
var CarbonChartWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n .cds--cc--legend-fieldset {\n border: 0;\n margin: 0;\n min-inline-size: 0;\n padding: 0;\n }\n\n .cds--cc--legend-fieldset > legend {\n clip: rect(1px, 1px, 1px, 1px);\n height: 1px;\n overflow: hidden;\n position: absolute;\n top: auto;\n white-space: nowrap;\n width: 1px;\n }\n\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 .cds--cc--legend-fieldset {\n border: 0;\n margin: 0;\n min-inline-size: 0;\n padding: 0;\n }\n\n .cds--cc--legend-fieldset > legend {\n clip: rect(1px, 1px, 1px, 1px);\n height: 1px;\n overflow: hidden;\n position: absolute;\n top: auto;\n white-space: nowrap;\n width: 1px;\n }\n\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"])), function (props) {
|
|
1131
1133
|
return props.isInverse
|
|
1132
1134
|
? props.theme.colors.primary700
|
|
1133
1135
|
: props.theme.colors.neutral100;
|
|
@@ -1501,7 +1503,9 @@ var CarbonChart = React__namespace.forwardRef(function (props, ref) {
|
|
|
1501
1503
|
var internalRef = React__namespace.useRef(null);
|
|
1502
1504
|
var _a = React__namespace.useState(false), isTableOpen = _a[0], setIsTableOpen = _a[1];
|
|
1503
1505
|
var _b = React__namespace.useState(false), isFullscreen = _b[0], setIsFullscreen = _b[1];
|
|
1506
|
+
var _c = React__namespace.useState(''), legendAnnouncement = _c[0], setLegendAnnouncement = _c[1];
|
|
1504
1507
|
var lastTableTriggerRef = React__namespace.useRef(null);
|
|
1508
|
+
var legendAnnouncedRef = React__namespace.useRef(false);
|
|
1505
1509
|
var mergedRef = React__namespace.useCallback(function (node) {
|
|
1506
1510
|
internalRef.current = node;
|
|
1507
1511
|
if (typeof ref === 'function') {
|
|
@@ -1562,6 +1566,43 @@ var CarbonChart = React__namespace.forwardRef(function (props, ref) {
|
|
|
1562
1566
|
}
|
|
1563
1567
|
}, []);
|
|
1564
1568
|
var chartTitle = options.title || toolbarI18n.defaultTitle;
|
|
1569
|
+
var legendLabel = "".concat(ariaLabel || chartTitle, ". ").concat(toolbarI18n.legendInstructions);
|
|
1570
|
+
React__namespace.useEffect(function () {
|
|
1571
|
+
var container = internalRef.current;
|
|
1572
|
+
if (!container)
|
|
1573
|
+
return;
|
|
1574
|
+
var applyListSemantics = function (legend) {
|
|
1575
|
+
legend.removeAttribute('aria-label');
|
|
1576
|
+
legend.setAttribute('role', 'list');
|
|
1577
|
+
legend
|
|
1578
|
+
.querySelectorAll('.legend-item')
|
|
1579
|
+
.forEach(function (item) { return item.setAttribute('role', 'listitem'); });
|
|
1580
|
+
};
|
|
1581
|
+
var wrapLegend = function () {
|
|
1582
|
+
var legend = container.querySelector('.cds--cc--legend');
|
|
1583
|
+
if (!legend)
|
|
1584
|
+
return;
|
|
1585
|
+
applyListSemantics(legend);
|
|
1586
|
+
var parent = legend.parentElement;
|
|
1587
|
+
if ((parent === null || parent === void 0 ? void 0 : parent.tagName) === 'FIELDSET') {
|
|
1588
|
+
var existingCaption = parent.querySelector('legend');
|
|
1589
|
+
if (existingCaption && existingCaption.textContent !== legendLabel) {
|
|
1590
|
+
existingCaption.textContent = legendLabel;
|
|
1591
|
+
}
|
|
1592
|
+
return;
|
|
1593
|
+
}
|
|
1594
|
+
var fieldset = document.createElement('fieldset');
|
|
1595
|
+
var caption = document.createElement('legend');
|
|
1596
|
+
fieldset.className = 'cds--cc--legend-fieldset';
|
|
1597
|
+
caption.textContent = legendLabel;
|
|
1598
|
+
legend.before(fieldset);
|
|
1599
|
+
fieldset.append(caption, legend);
|
|
1600
|
+
};
|
|
1601
|
+
wrapLegend();
|
|
1602
|
+
var observer = new MutationObserver(wrapLegend);
|
|
1603
|
+
observer.observe(container, { childList: true, subtree: true });
|
|
1604
|
+
return function () { return observer.disconnect(); };
|
|
1605
|
+
}, [legendLabel]);
|
|
1565
1606
|
var handleModalDownloadCsv = React__namespace.useCallback(function () {
|
|
1566
1607
|
downloadCsv(dataSet, chartTitle);
|
|
1567
1608
|
}, [dataSet, chartTitle]);
|
|
@@ -1611,9 +1652,68 @@ var CarbonChart = React__namespace.forwardRef(function (props, ref) {
|
|
|
1611
1652
|
type: 'none',
|
|
1612
1653
|
} }) }), (chartToolbar ? { toolbar: { enabled: false } } : {}));
|
|
1613
1654
|
var ChartType = allCharts[type];
|
|
1655
|
+
React__namespace.useEffect(function () {
|
|
1656
|
+
var timer = setTimeout(function () {
|
|
1657
|
+
if (internalRef.current) {
|
|
1658
|
+
internalRef.current
|
|
1659
|
+
.querySelectorAll('g[aria-label]')
|
|
1660
|
+
.forEach(function (g) {
|
|
1661
|
+
var role = g.getAttribute('role');
|
|
1662
|
+
if (!role) {
|
|
1663
|
+
g.setAttribute('role', 'img');
|
|
1664
|
+
}
|
|
1665
|
+
else if (role === 'graphics-object group') {
|
|
1666
|
+
g.setAttribute('role', 'graphics-object');
|
|
1667
|
+
}
|
|
1668
|
+
});
|
|
1669
|
+
}
|
|
1670
|
+
}, 0);
|
|
1671
|
+
return function () { return clearTimeout(timer); };
|
|
1672
|
+
}, [type, dataSet]);
|
|
1673
|
+
React__namespace.useEffect(function () {
|
|
1674
|
+
var wrapper = internalRef.current;
|
|
1675
|
+
if (!wrapper)
|
|
1676
|
+
return;
|
|
1677
|
+
var observer = new MutationObserver(function () {
|
|
1678
|
+
var allItems = wrapper.querySelectorAll('.legend-item:not(.additional)');
|
|
1679
|
+
if (allItems.length <= 1)
|
|
1680
|
+
return;
|
|
1681
|
+
var activeLabels = [];
|
|
1682
|
+
allItems.forEach(function (el) {
|
|
1683
|
+
var _a;
|
|
1684
|
+
var checkbox = el.querySelector('.checkbox');
|
|
1685
|
+
var label = el.querySelector('p');
|
|
1686
|
+
if ((checkbox === null || checkbox === void 0 ? void 0 : checkbox.getAttribute('aria-checked')) === 'true' && label) {
|
|
1687
|
+
activeLabels.push(((_a = label.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '');
|
|
1688
|
+
}
|
|
1689
|
+
});
|
|
1690
|
+
if (activeLabels.length === 1) {
|
|
1691
|
+
if (!legendAnnouncedRef.current) {
|
|
1692
|
+
legendAnnouncedRef.current = true;
|
|
1693
|
+
setLegendAnnouncement("Only ".concat(activeLabels[0], " is selected"));
|
|
1694
|
+
}
|
|
1695
|
+
}
|
|
1696
|
+
else if (activeLabels.length === allItems.length) {
|
|
1697
|
+
legendAnnouncedRef.current = false;
|
|
1698
|
+
setLegendAnnouncement('All items selected');
|
|
1699
|
+
}
|
|
1700
|
+
else {
|
|
1701
|
+
legendAnnouncedRef.current = false;
|
|
1702
|
+
setLegendAnnouncement('');
|
|
1703
|
+
}
|
|
1704
|
+
});
|
|
1705
|
+
observer.observe(wrapper, {
|
|
1706
|
+
subtree: true,
|
|
1707
|
+
attributes: true,
|
|
1708
|
+
attributeFilter: ['aria-checked'],
|
|
1709
|
+
});
|
|
1710
|
+
return function () { return observer.disconnect(); };
|
|
1711
|
+
}, [type, dataSet]);
|
|
1614
1712
|
var groupsLength = Object.keys(buildColors()).length;
|
|
1615
1713
|
var showTable = (chartToolbar === null || chartToolbar === void 0 ? void 0 : chartToolbar.showAsTable) !== false;
|
|
1616
1714
|
return (React__namespace.createElement(FullscreenRoot, { ref: mergedRef, isInverse: isInverse, theme: theme },
|
|
1715
|
+
React__namespace.createElement(reactMagmaDom.VisuallyHidden, null,
|
|
1716
|
+
React__namespace.createElement(reactMagmaDom.Announce, null, legendAnnouncement)),
|
|
1617
1717
|
React__namespace.createElement(CarbonChartWrapper, __assign({ "data-testid": testId, isInverse: isInverse, theme: theme, className: "carbon-chart-wrapper".concat(chartToolbar ? ' has-magma-toolbar' : ''), groupsLength: groupsLength < 6 ? groupsLength : 14, role: "region", "aria-label": ariaLabel || chartTitle, "aria-roledescription": "chart" }, rest),
|
|
1618
1718
|
React__namespace.createElement(ChartContentWrapper, null,
|
|
1619
1719
|
chartToolbar && (React__namespace.createElement(CarbonChartToolbar, { config: chartToolbar, dataSet: dataSet, isInverse: isInverse, isTableOpen: isTableOpen, isFullscreen: isFullscreen, onOpenTable: openTableModal, onToggleFullscreen: toggleFullscreen, theme: theme, title: chartTitle, wrapperRef: internalRef })),
|