@react-magma/charts 14.0.0-rc.2 → 14.0.0-rc.4
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 +161 -6
- package/dist/charts.js.map +1 -1
- package/dist/charts.modern.module.js +161 -6
- package/dist/charts.modern.module.js.map +1 -1
- package/dist/charts.umd.js +741 -383
- package/dist/charts.umd.js.map +1 -1
- package/dist/components/CarbonChart/CarbonChart.d.ts +4 -0
- package/dist/hooks/useCarbonModalFocusManagement.d.ts +2 -0
- package/package.json +9 -4
- package/src/components/CarbonChart/CarbonChart.test.js +176 -1
- package/src/components/CarbonChart/CarbonChart.tsx +27 -5
- package/src/hooks/useCarbonModalFocusManagement.ts +173 -0
|
@@ -782,6 +782,148 @@ var curriedTransparentize = /*#__PURE__*/curry
|
|
|
782
782
|
/* ::<number | string, string, string> */
|
|
783
783
|
(transparentize);
|
|
784
784
|
|
|
785
|
+
var FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
|
|
786
|
+
function getFocusableElements(container) {
|
|
787
|
+
return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(function (el) {
|
|
788
|
+
var style = window.getComputedStyle(el);
|
|
789
|
+
return (style.display !== 'none' &&
|
|
790
|
+
style.visibility !== 'hidden' &&
|
|
791
|
+
!el.hasAttribute('disabled'));
|
|
792
|
+
});
|
|
793
|
+
}
|
|
794
|
+
function findVisibleModal(wrapper) {
|
|
795
|
+
var modal = wrapper.querySelector('.cds--modal');
|
|
796
|
+
if (!modal)
|
|
797
|
+
return null;
|
|
798
|
+
var isVisible = modal.getAttribute('aria-modal') === 'true' ||
|
|
799
|
+
modal.style.visibility === 'visible' ||
|
|
800
|
+
modal.classList.contains('is-visible');
|
|
801
|
+
return isVisible ? modal : null;
|
|
802
|
+
}
|
|
803
|
+
function useCarbonModalFocusManagement(wrapperRef) {
|
|
804
|
+
var previouslyFocusedElement = React.useRef(null);
|
|
805
|
+
var keydownHandler = React.useRef(null);
|
|
806
|
+
var focusinHandler = React.useRef(null);
|
|
807
|
+
var currentModal = React.useRef(null);
|
|
808
|
+
React.useEffect(function () {
|
|
809
|
+
var wrapper = wrapperRef.current;
|
|
810
|
+
if (!wrapper)
|
|
811
|
+
return;
|
|
812
|
+
function focusModalCloseButton(modal) {
|
|
813
|
+
var closeButton = modal.querySelector('.cds--modal-close');
|
|
814
|
+
if (closeButton) {
|
|
815
|
+
closeButton.focus();
|
|
816
|
+
}
|
|
817
|
+
else {
|
|
818
|
+
var focusable = getFocusableElements(modal);
|
|
819
|
+
if (focusable.length > 0) {
|
|
820
|
+
focusable[0].focus();
|
|
821
|
+
}
|
|
822
|
+
}
|
|
823
|
+
}
|
|
824
|
+
function handleModalOpen(modal) {
|
|
825
|
+
currentModal.current = modal;
|
|
826
|
+
previouslyFocusedElement.current = document.activeElement;
|
|
827
|
+
// Permanent guard: redirect focus back into modal whenever it escapes
|
|
828
|
+
// (e.g. Carbon's overflow menu returning focus to its trigger).
|
|
829
|
+
focusinHandler.current = function (event) {
|
|
830
|
+
var target = event.target;
|
|
831
|
+
if (!modal.contains(target)) {
|
|
832
|
+
setTimeout(function () {
|
|
833
|
+
if (currentModal.current === modal) {
|
|
834
|
+
focusModalCloseButton(modal);
|
|
835
|
+
}
|
|
836
|
+
}, 0);
|
|
837
|
+
}
|
|
838
|
+
};
|
|
839
|
+
document.addEventListener('focusin', focusinHandler.current);
|
|
840
|
+
var pollAttempts = 0;
|
|
841
|
+
var pollAndFocus = function () {
|
|
842
|
+
if (currentModal.current !== modal)
|
|
843
|
+
return;
|
|
844
|
+
if (modal.contains(document.activeElement))
|
|
845
|
+
return;
|
|
846
|
+
var closeBtn = modal.querySelector('.cds--modal-close');
|
|
847
|
+
if (closeBtn &&
|
|
848
|
+
window.getComputedStyle(closeBtn).visibility !== 'hidden') {
|
|
849
|
+
closeBtn.focus();
|
|
850
|
+
return;
|
|
851
|
+
}
|
|
852
|
+
if (++pollAttempts < 30) {
|
|
853
|
+
requestAnimationFrame(pollAndFocus);
|
|
854
|
+
}
|
|
855
|
+
};
|
|
856
|
+
requestAnimationFrame(pollAndFocus);
|
|
857
|
+
keydownHandler.current = function (event) {
|
|
858
|
+
if (event.key !== 'Tab')
|
|
859
|
+
return;
|
|
860
|
+
var focusable = getFocusableElements(modal);
|
|
861
|
+
if (focusable.length === 0) {
|
|
862
|
+
event.preventDefault();
|
|
863
|
+
return;
|
|
864
|
+
}
|
|
865
|
+
if (focusable.length === 1) {
|
|
866
|
+
event.preventDefault();
|
|
867
|
+
if (focusable[0] !== document.activeElement) {
|
|
868
|
+
focusable[0].focus();
|
|
869
|
+
}
|
|
870
|
+
return;
|
|
871
|
+
}
|
|
872
|
+
var firstItem = focusable[0];
|
|
873
|
+
var lastItem = focusable[focusable.length - 1];
|
|
874
|
+
if (!event.shiftKey && document.activeElement === lastItem) {
|
|
875
|
+
event.preventDefault();
|
|
876
|
+
firstItem.focus();
|
|
877
|
+
}
|
|
878
|
+
else if (event.shiftKey && document.activeElement === firstItem) {
|
|
879
|
+
event.preventDefault();
|
|
880
|
+
lastItem.focus();
|
|
881
|
+
}
|
|
882
|
+
};
|
|
883
|
+
document.addEventListener('keydown', keydownHandler.current);
|
|
884
|
+
}
|
|
885
|
+
function handleModalClose() {
|
|
886
|
+
// Null out currentModal first so any pending setTimeout redirects
|
|
887
|
+
// (scheduled by the focusin guard) see a closed modal and bail out.
|
|
888
|
+
currentModal.current = null;
|
|
889
|
+
if (focusinHandler.current) {
|
|
890
|
+
document.removeEventListener('focusin', focusinHandler.current);
|
|
891
|
+
focusinHandler.current = null;
|
|
892
|
+
}
|
|
893
|
+
if (keydownHandler.current) {
|
|
894
|
+
document.removeEventListener('keydown', keydownHandler.current);
|
|
895
|
+
keydownHandler.current = null;
|
|
896
|
+
}
|
|
897
|
+
if (previouslyFocusedElement.current instanceof HTMLElement) {
|
|
898
|
+
previouslyFocusedElement.current.focus();
|
|
899
|
+
}
|
|
900
|
+
}
|
|
901
|
+
var observer = new MutationObserver(function () {
|
|
902
|
+
var visibleModal = findVisibleModal(wrapper);
|
|
903
|
+
if (visibleModal && !currentModal.current) {
|
|
904
|
+
handleModalOpen(visibleModal);
|
|
905
|
+
}
|
|
906
|
+
else if (!visibleModal && currentModal.current) {
|
|
907
|
+
handleModalClose();
|
|
908
|
+
}
|
|
909
|
+
});
|
|
910
|
+
observer.observe(wrapper, {
|
|
911
|
+
attributes: true,
|
|
912
|
+
attributeFilter: ['class', 'style', 'aria-modal'],
|
|
913
|
+
subtree: true,
|
|
914
|
+
});
|
|
915
|
+
return function () {
|
|
916
|
+
observer.disconnect();
|
|
917
|
+
if (keydownHandler.current) {
|
|
918
|
+
document.removeEventListener('keydown', keydownHandler.current);
|
|
919
|
+
}
|
|
920
|
+
if (focusinHandler.current) {
|
|
921
|
+
document.removeEventListener('focusin', focusinHandler.current);
|
|
922
|
+
}
|
|
923
|
+
};
|
|
924
|
+
}, [wrapperRef]);
|
|
925
|
+
}
|
|
926
|
+
|
|
785
927
|
function styleInject(css, ref) {
|
|
786
928
|
if ( ref === void 0 ) ref = {};
|
|
787
929
|
var insertAt = ref.insertAt;
|
|
@@ -833,7 +975,7 @@ var CarbonChartType;
|
|
|
833
975
|
CarbonChartType["scatter"] = "scatter";
|
|
834
976
|
CarbonChartType["combo"] = "combo";
|
|
835
977
|
})(CarbonChartType || (CarbonChartType = {}));
|
|
836
|
-
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 padding:;\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: ", " !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 padding:;\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"])), function (props) {
|
|
978
|
+
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: ", " !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"])), function (props) {
|
|
837
979
|
return props.isInverse ? props.theme.colors.primary700 : '';
|
|
838
980
|
}, function (props) { return props.theme.colors.neutral700; }, function (props) { return (props.isInverse ? props.theme.colors.neutral100 : ''); }, function (props) { return props.theme.typeScale.size02.fontSize; }, function (props) { return props.theme.spaceScale.spacing02; }, function (props) {
|
|
839
981
|
return props.isInverse
|
|
@@ -987,9 +1129,20 @@ var ChartTheme;
|
|
|
987
1129
|
ChartTheme["G10"] = "g10";
|
|
988
1130
|
})(ChartTheme || (ChartTheme = {}));
|
|
989
1131
|
var CarbonChart = React.forwardRef(function (props, ref) {
|
|
990
|
-
var testId = props.testId, isInverseProp = props.isInverse, type = props.type, dataSet = props.dataSet, options = props.options, rest = __rest(props, ["testId", "isInverse", "type", "dataSet", "options"]);
|
|
1132
|
+
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"]);
|
|
991
1133
|
var theme = React.useContext(ThemeContext);
|
|
992
1134
|
var isInverse = useIsInverse(isInverseProp);
|
|
1135
|
+
var internalRef = React.useRef(null);
|
|
1136
|
+
var mergedRef = React.useCallback(function (node) {
|
|
1137
|
+
internalRef.current = node;
|
|
1138
|
+
if (typeof ref === 'function') {
|
|
1139
|
+
ref(node);
|
|
1140
|
+
}
|
|
1141
|
+
else if (ref) {
|
|
1142
|
+
ref.current = node;
|
|
1143
|
+
}
|
|
1144
|
+
}, [ref]);
|
|
1145
|
+
useCarbonModalFocusManagement(internalRef);
|
|
993
1146
|
var allCharts = {
|
|
994
1147
|
area: AreaChart,
|
|
995
1148
|
areaStacked: StackedAreaChart,
|
|
@@ -1037,12 +1190,14 @@ var CarbonChart = React.forwardRef(function (props, ref) {
|
|
|
1037
1190
|
var ChartType = allCharts[type];
|
|
1038
1191
|
// Adding aria-label to main SVG container
|
|
1039
1192
|
React.useEffect(function () {
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1193
|
+
if (ariaLabel) {
|
|
1194
|
+
document.querySelectorAll('.graph-frame ').forEach(function (div) {
|
|
1195
|
+
div.setAttribute('aria-label', ariaLabel);
|
|
1196
|
+
});
|
|
1197
|
+
}
|
|
1043
1198
|
});
|
|
1044
1199
|
var groupsLength = Object.keys(buildColors()).length;
|
|
1045
|
-
return (React.createElement(CarbonChartWrapper, __assign({ "data-testid": testId, ref:
|
|
1200
|
+
return (React.createElement(CarbonChartWrapper, __assign({ "data-testid": testId, ref: mergedRef, isInverse: isInverse, theme: theme, className: "carbon-chart-wrapper", groupsLength: groupsLength < 6 ? groupsLength : 14 }, rest),
|
|
1046
1201
|
React.createElement(ChartType, { data: dataSet, options: newOptions })));
|
|
1047
1202
|
});
|
|
1048
1203
|
var templateObject_1;
|