@react-magma/charts 13.0.1 → 13.0.2-next.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 +8 -6
- package/dist/charts.js.map +1 -1
- package/dist/charts.modern.module.js +8 -6
- package/dist/charts.modern.module.js.map +1 -1
- package/dist/charts.umd.js +16 -13
- package/dist/charts.umd.js.map +1 -1
- package/dist/components/CarbonChart/CarbonChart.d.ts +4 -0
- package/package.json +3 -3
- package/src/components/CarbonChart/CarbonChart.tsx +10 -4
package/dist/charts.js
CHANGED
|
@@ -2195,7 +2195,7 @@ exports.CarbonChartType = void 0;
|
|
|
2195
2195
|
CarbonChartType["scatter"] = "scatter";
|
|
2196
2196
|
CarbonChartType["combo"] = "combo";
|
|
2197
2197
|
})(exports.CarbonChartType || (exports.CarbonChartType = {}));
|
|
2198
|
-
var CarbonChartWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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 p,\n div,\n 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
|
|
2198
|
+
var CarbonChartWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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 p,\n div,\n 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 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--data-table thead tr th {\n background: ",
|
|
2199
2199
|
" !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: ",
|
|
2200
2200
|
";\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: ",
|
|
2201
2201
|
";\n .cds--data-table th {\n background: ",
|
|
@@ -2222,7 +2222,7 @@ var CarbonChartWrapper = styled.div(templateObject_1 || (templateObject_1 = __ma
|
|
|
2222
2222
|
"\n )\n drop-shadow(\n 0px -1px 0px\n ",
|
|
2223
2223
|
"\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 ",
|
|
2224
2224
|
"\n }\n\n .cds--overflow-menu-options__btn:focus {\n outline-color: ",
|
|
2225
|
-
";\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
|
|
2225
|
+
";\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: ",
|
|
2226
2226
|
";\n color: ", ";\n }\n\n *:focus {\n outline: 2px solid\n ",
|
|
2227
2227
|
" !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 ",
|
|
2228
2228
|
" !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: ",
|
|
@@ -2386,7 +2386,7 @@ var ChartTheme;
|
|
|
2386
2386
|
ChartTheme["G10"] = "g10";
|
|
2387
2387
|
})(ChartTheme || (ChartTheme = {}));
|
|
2388
2388
|
var CarbonChart = React__namespace.forwardRef(function (props, ref) {
|
|
2389
|
-
var testId = props.testId, isInverseProp = props.isInverse, type = props.type, dataSet = props.dataSet, options = props.options, rest = __rest(props, ["testId", "isInverse", "type", "dataSet", "options"]);
|
|
2389
|
+
var testId = props.testId, isInverseProp = props.isInverse, type = props.type, dataSet = props.dataSet, options = props.options, ariaLabel = props.ariaLabel, rest = __rest(props, ["testId", "isInverse", "type", "dataSet", "options", "ariaLabel"]);
|
|
2390
2390
|
var theme = React__namespace.useContext(reactMagmaDom.ThemeContext);
|
|
2391
2391
|
var isInverse = reactMagmaDom.useIsInverse(isInverseProp);
|
|
2392
2392
|
var allCharts = {
|
|
@@ -2436,9 +2436,11 @@ var CarbonChart = React__namespace.forwardRef(function (props, ref) {
|
|
|
2436
2436
|
var ChartType = allCharts[type];
|
|
2437
2437
|
// Adding aria-label to main SVG container
|
|
2438
2438
|
React__namespace.useEffect(function () {
|
|
2439
|
-
|
|
2440
|
-
|
|
2441
|
-
|
|
2439
|
+
if (ariaLabel) {
|
|
2440
|
+
document.querySelectorAll('.graph-frame ').forEach(function (div) {
|
|
2441
|
+
div.setAttribute('aria-label', ariaLabel);
|
|
2442
|
+
});
|
|
2443
|
+
}
|
|
2442
2444
|
});
|
|
2443
2445
|
var groupsLength = Object.keys(buildColors()).length;
|
|
2444
2446
|
return (React__namespace.createElement(CarbonChartWrapper, __assign({ "data-testid": testId, ref: ref, isInverse: isInverse, theme: theme, className: "carbon-chart-wrapper", groupsLength: groupsLength < 6 ? groupsLength : 14 }, rest),
|