@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
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { ComboChart, ScatterChart, MeterChart, HistogramChart, GaugeChart, BulletChart, BubbleChart, BoxplotChart, RadarChart, PieChart, LollipopChart, LineChart, DonutChart, StackedBarChart, GroupedBarChart, SimpleBarChart, StackedAreaChart, AreaChart } from '@carbon/charts-react';
|
|
3
3
|
import styled from '@emotion/styled';
|
|
4
|
-
import { Table, TableHead, TableRow, TableHeaderCell, TableBody, TableCell, I18nContext, Tooltip, IconButton, ButtonVariant, Dropdown, DropdownButton, DropdownContent, ModalSize, ThemeContext, Modal, Button, TypographyVisualStyle, Heading, useIsInverse, DropdownMenuItem, DropdownDivider } from 'react-magma-dom';
|
|
4
|
+
import { Table, TableHead, TableRow, TableHeaderCell, TableBody, TableCell, I18nContext, Tooltip, IconButton, ButtonVariant, Dropdown, DropdownButton, DropdownContent, ModalSize, ThemeContext, Modal, Button, TypographyVisualStyle, Heading, useIsInverse, VisuallyHidden, Announce, DropdownMenuItem, DropdownDivider } from 'react-magma-dom';
|
|
5
5
|
import { TableIcon, FullscreenExitIcon, FullscreenIcon, MoreVertIcon } from 'react-magma-icons';
|
|
6
6
|
|
|
7
7
|
/******************************************************************************
|
|
@@ -983,6 +983,7 @@ var defaults = {
|
|
|
983
983
|
downloadAsJpg: 'Download as JPG',
|
|
984
984
|
downloadAsPng: 'Download as PNG',
|
|
985
985
|
exitFullScreen: 'Exit full screen',
|
|
986
|
+
legendInstructions: 'Checking these checkboxes will update the chart.',
|
|
986
987
|
makeFullScreen: 'Make full screen',
|
|
987
988
|
moreOptionsAriaLabel: 'More options',
|
|
988
989
|
showAsTableTooltip: 'Show as table',
|
|
@@ -993,7 +994,7 @@ var defaults = {
|
|
|
993
994
|
* falling back to English defaults.
|
|
994
995
|
*/
|
|
995
996
|
function useChartToolbarI18n() {
|
|
996
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
997
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
997
998
|
var i18n = React.useContext(I18nContext);
|
|
998
999
|
var toolbar = (_a = i18n.charts) === null || _a === void 0 ? void 0 : _a.toolbar;
|
|
999
1000
|
if (!toolbar)
|
|
@@ -1004,10 +1005,11 @@ function useChartToolbarI18n() {
|
|
|
1004
1005
|
downloadAsJpg: (_d = toolbar.downloadAsJpg) !== null && _d !== void 0 ? _d : defaults.downloadAsJpg,
|
|
1005
1006
|
downloadAsPng: (_e = toolbar.downloadAsPng) !== null && _e !== void 0 ? _e : defaults.downloadAsPng,
|
|
1006
1007
|
exitFullScreen: (_f = toolbar.exitFullScreen) !== null && _f !== void 0 ? _f : defaults.exitFullScreen,
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1008
|
+
legendInstructions: (_g = toolbar.legendInstructions) !== null && _g !== void 0 ? _g : defaults.legendInstructions,
|
|
1009
|
+
makeFullScreen: (_h = toolbar.makeFullScreen) !== null && _h !== void 0 ? _h : defaults.makeFullScreen,
|
|
1010
|
+
moreOptionsAriaLabel: (_j = toolbar.moreOptionsAriaLabel) !== null && _j !== void 0 ? _j : defaults.moreOptionsAriaLabel,
|
|
1011
|
+
showAsTableTooltip: (_k = toolbar.showAsTableTooltip) !== null && _k !== void 0 ? _k : defaults.showAsTableTooltip,
|
|
1012
|
+
tabularRepresentationLabel: (_l = toolbar.tabularRepresentationLabel) !== null && _l !== void 0 ? _l : defaults.tabularRepresentationLabel,
|
|
1011
1013
|
};
|
|
1012
1014
|
}
|
|
1013
1015
|
|
|
@@ -1106,7 +1108,7 @@ var FullscreenRoot = styled.div(templateObject_2 || (templateObject_2 = __makeTe
|
|
|
1106
1108
|
? props.theme.colors.primary700
|
|
1107
1109
|
: props.theme.colors.neutral100;
|
|
1108
1110
|
});
|
|
1109
|
-
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) {
|
|
1111
|
+
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) {
|
|
1110
1112
|
return props.isInverse
|
|
1111
1113
|
? props.theme.colors.primary700
|
|
1112
1114
|
: props.theme.colors.neutral100;
|
|
@@ -1480,7 +1482,9 @@ var CarbonChart = React.forwardRef(function (props, ref) {
|
|
|
1480
1482
|
var internalRef = React.useRef(null);
|
|
1481
1483
|
var _a = React.useState(false), isTableOpen = _a[0], setIsTableOpen = _a[1];
|
|
1482
1484
|
var _b = React.useState(false), isFullscreen = _b[0], setIsFullscreen = _b[1];
|
|
1485
|
+
var _c = React.useState(''), legendAnnouncement = _c[0], setLegendAnnouncement = _c[1];
|
|
1483
1486
|
var lastTableTriggerRef = React.useRef(null);
|
|
1487
|
+
var legendAnnouncedRef = React.useRef(false);
|
|
1484
1488
|
var mergedRef = React.useCallback(function (node) {
|
|
1485
1489
|
internalRef.current = node;
|
|
1486
1490
|
if (typeof ref === 'function') {
|
|
@@ -1541,6 +1545,43 @@ var CarbonChart = React.forwardRef(function (props, ref) {
|
|
|
1541
1545
|
}
|
|
1542
1546
|
}, []);
|
|
1543
1547
|
var chartTitle = options.title || toolbarI18n.defaultTitle;
|
|
1548
|
+
var legendLabel = "".concat(ariaLabel || chartTitle, ". ").concat(toolbarI18n.legendInstructions);
|
|
1549
|
+
React.useEffect(function () {
|
|
1550
|
+
var container = internalRef.current;
|
|
1551
|
+
if (!container)
|
|
1552
|
+
return;
|
|
1553
|
+
var applyListSemantics = function (legend) {
|
|
1554
|
+
legend.removeAttribute('aria-label');
|
|
1555
|
+
legend.setAttribute('role', 'list');
|
|
1556
|
+
legend
|
|
1557
|
+
.querySelectorAll('.legend-item')
|
|
1558
|
+
.forEach(function (item) { return item.setAttribute('role', 'listitem'); });
|
|
1559
|
+
};
|
|
1560
|
+
var wrapLegend = function () {
|
|
1561
|
+
var legend = container.querySelector('.cds--cc--legend');
|
|
1562
|
+
if (!legend)
|
|
1563
|
+
return;
|
|
1564
|
+
applyListSemantics(legend);
|
|
1565
|
+
var parent = legend.parentElement;
|
|
1566
|
+
if ((parent === null || parent === void 0 ? void 0 : parent.tagName) === 'FIELDSET') {
|
|
1567
|
+
var existingCaption = parent.querySelector('legend');
|
|
1568
|
+
if (existingCaption && existingCaption.textContent !== legendLabel) {
|
|
1569
|
+
existingCaption.textContent = legendLabel;
|
|
1570
|
+
}
|
|
1571
|
+
return;
|
|
1572
|
+
}
|
|
1573
|
+
var fieldset = document.createElement('fieldset');
|
|
1574
|
+
var caption = document.createElement('legend');
|
|
1575
|
+
fieldset.className = 'cds--cc--legend-fieldset';
|
|
1576
|
+
caption.textContent = legendLabel;
|
|
1577
|
+
legend.before(fieldset);
|
|
1578
|
+
fieldset.append(caption, legend);
|
|
1579
|
+
};
|
|
1580
|
+
wrapLegend();
|
|
1581
|
+
var observer = new MutationObserver(wrapLegend);
|
|
1582
|
+
observer.observe(container, { childList: true, subtree: true });
|
|
1583
|
+
return function () { return observer.disconnect(); };
|
|
1584
|
+
}, [legendLabel]);
|
|
1544
1585
|
var handleModalDownloadCsv = React.useCallback(function () {
|
|
1545
1586
|
downloadCsv(dataSet, chartTitle);
|
|
1546
1587
|
}, [dataSet, chartTitle]);
|
|
@@ -1590,9 +1631,68 @@ var CarbonChart = React.forwardRef(function (props, ref) {
|
|
|
1590
1631
|
type: 'none',
|
|
1591
1632
|
} }) }), (chartToolbar ? { toolbar: { enabled: false } } : {}));
|
|
1592
1633
|
var ChartType = allCharts[type];
|
|
1634
|
+
React.useEffect(function () {
|
|
1635
|
+
var timer = setTimeout(function () {
|
|
1636
|
+
if (internalRef.current) {
|
|
1637
|
+
internalRef.current
|
|
1638
|
+
.querySelectorAll('g[aria-label]')
|
|
1639
|
+
.forEach(function (g) {
|
|
1640
|
+
var role = g.getAttribute('role');
|
|
1641
|
+
if (!role) {
|
|
1642
|
+
g.setAttribute('role', 'img');
|
|
1643
|
+
}
|
|
1644
|
+
else if (role === 'graphics-object group') {
|
|
1645
|
+
g.setAttribute('role', 'graphics-object');
|
|
1646
|
+
}
|
|
1647
|
+
});
|
|
1648
|
+
}
|
|
1649
|
+
}, 0);
|
|
1650
|
+
return function () { return clearTimeout(timer); };
|
|
1651
|
+
}, [type, dataSet]);
|
|
1652
|
+
React.useEffect(function () {
|
|
1653
|
+
var wrapper = internalRef.current;
|
|
1654
|
+
if (!wrapper)
|
|
1655
|
+
return;
|
|
1656
|
+
var observer = new MutationObserver(function () {
|
|
1657
|
+
var allItems = wrapper.querySelectorAll('.legend-item:not(.additional)');
|
|
1658
|
+
if (allItems.length <= 1)
|
|
1659
|
+
return;
|
|
1660
|
+
var activeLabels = [];
|
|
1661
|
+
allItems.forEach(function (el) {
|
|
1662
|
+
var _a;
|
|
1663
|
+
var checkbox = el.querySelector('.checkbox');
|
|
1664
|
+
var label = el.querySelector('p');
|
|
1665
|
+
if ((checkbox === null || checkbox === void 0 ? void 0 : checkbox.getAttribute('aria-checked')) === 'true' && label) {
|
|
1666
|
+
activeLabels.push(((_a = label.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '');
|
|
1667
|
+
}
|
|
1668
|
+
});
|
|
1669
|
+
if (activeLabels.length === 1) {
|
|
1670
|
+
if (!legendAnnouncedRef.current) {
|
|
1671
|
+
legendAnnouncedRef.current = true;
|
|
1672
|
+
setLegendAnnouncement("Only ".concat(activeLabels[0], " is selected"));
|
|
1673
|
+
}
|
|
1674
|
+
}
|
|
1675
|
+
else if (activeLabels.length === allItems.length) {
|
|
1676
|
+
legendAnnouncedRef.current = false;
|
|
1677
|
+
setLegendAnnouncement('All items selected');
|
|
1678
|
+
}
|
|
1679
|
+
else {
|
|
1680
|
+
legendAnnouncedRef.current = false;
|
|
1681
|
+
setLegendAnnouncement('');
|
|
1682
|
+
}
|
|
1683
|
+
});
|
|
1684
|
+
observer.observe(wrapper, {
|
|
1685
|
+
subtree: true,
|
|
1686
|
+
attributes: true,
|
|
1687
|
+
attributeFilter: ['aria-checked'],
|
|
1688
|
+
});
|
|
1689
|
+
return function () { return observer.disconnect(); };
|
|
1690
|
+
}, [type, dataSet]);
|
|
1593
1691
|
var groupsLength = Object.keys(buildColors()).length;
|
|
1594
1692
|
var showTable = (chartToolbar === null || chartToolbar === void 0 ? void 0 : chartToolbar.showAsTable) !== false;
|
|
1595
1693
|
return (React.createElement(FullscreenRoot, { ref: mergedRef, isInverse: isInverse, theme: theme },
|
|
1694
|
+
React.createElement(VisuallyHidden, null,
|
|
1695
|
+
React.createElement(Announce, null, legendAnnouncement)),
|
|
1596
1696
|
React.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),
|
|
1597
1697
|
React.createElement(ChartContentWrapper, null,
|
|
1598
1698
|
chartToolbar && (React.createElement(CarbonChartToolbar, { config: chartToolbar, dataSet: dataSet, isInverse: isInverse, isTableOpen: isTableOpen, isFullscreen: isFullscreen, onOpenTable: openTableModal, onToggleFullscreen: toggleFullscreen, theme: theme, title: chartTitle, wrapperRef: internalRef })),
|