@fluentui/react-charts 0.0.0-nightly-20260109-0406.1 → 0.0.0-nightly-20260113-0406.1

package/lib-commonjs/components/SankeyChart/useSankeyChartStyles.styles.raw.js

@@ -27,7 +27,9 @@ const sankeyChartClassNames = {
     nodeTextContainer: 'fui-sc__nodeTextContainer',
     toolTip: 'fui-sc__toolTip',
     chartWrapper: 'fui-sc__chartWrapper',
-    chart: 'fui-sc__chart'
+    chart: 'fui-sc__chart',
+    chartTitle: 'fui-sc__chartTitle',
+    svgTooltip: 'fui-sc__svgTooltip'
 };
 const useStyles = (0, _react.makeStyles)({
     root: {
@@ -69,10 +71,17 @@ const useStyles = (0, _react.makeStyles)({
     },
     chart: {
         display: 'block'
+    },
+    chartTitle: (0, _index.getChartTitleStyles)(),
+    svgTooltip: {
+        fill: _reacttheme.tokens.colorNeutralBackground1,
+        [_index.HighContrastSelector]: {
+            fill: 'Canvas'
+        }
     }
 });
 const useSankeyChartStyles = (props)=>{
-    var _props_styles, _props_reflowProps, _props_styles1, _props_styles2;
+    var _props_styles, _props_reflowProps, _props_styles1, _props_styles2, _props_styles3, _props_styles4;
     const baseStyles = useStyles();
     return {
         root: (0, _react.mergeClasses)(sankeyChartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
@@ -81,6 +90,8 @@ const useSankeyChartStyles = (props)=>{
         nodeTextContainer: (0, _react.mergeClasses)(sankeyChartClassNames.nodeTextContainer, baseStyles.nodeTextContainer /*, props.styles?.nodeTextContainer*/ ),
         toolTip: (0, _react.mergeClasses)(sankeyChartClassNames.toolTip, baseStyles.toolTip /*, props.styles?.toolTip*/ ),
         chartWrapper: (0, _react.mergeClasses)(sankeyChartClassNames.chartWrapper, ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapper : '', (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),
-        chart: (0, _react.mergeClasses)(sankeyChartClassNames.chart, baseStyles.chart, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.chart)
+        chart: (0, _react.mergeClasses)(sankeyChartClassNames.chart, baseStyles.chart, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.chart),
+        chartTitle: (0, _react.mergeClasses)(sankeyChartClassNames.chartTitle, baseStyles.chartTitle, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartTitle),
+        svgTooltip: (0, _react.mergeClasses)(sankeyChartClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.svgTooltip)
     };
 };

package/lib-commonjs/components/SankeyChart/useSankeyChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SankeyChart/useSankeyChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SankeyChartProps, SankeyChartStyles } from './SankeyChart.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\nimport { getTooltipStyle } from '../../utilities/index';\n\nexport const sankeyChartClassNames: SlotClassNames<SankeyChartStyles> = {\n  root: 'fui-sc__root',\n  nodes: 'fui-sc__nodes',\n  links: 'fui-sc__links',\n  nodeTextContainer: 'fui-sc__nodeTextContainer',\n  toolTip: 'fui-sc__toolTip',\n  chartWrapper: 'fui-sc__chartWrapper',\n  chart: 'fui-sc__chart',\n};\nconst useStyles = makeStyles({\n  root: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    flexDirection: 'column',\n    overflow: 'hidden',\n    textAlign: 'left',\n  },\n  links: {\n    fill: tokens.colorNeutralBackground1,\n    strokeWidth: '3px',\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  nodes: {\n    fill: '#F5F5F5',\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  toolTip: getTooltipStyle() as GriffelStyle,\n  nodeTextContainer: {\n    '& text': {\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n\n    marginTop: '4px',\n    marginLeft: '8px',\n    marginBottom: '4px',\n    marginRight: '8px',\n  },\n  chartWrapper: {\n    overflow: 'auto',\n  },\n  chart: {\n    display: 'block',\n  },\n});\n\nexport const useSankeyChartStyles = (props: SankeyChartProps): SankeyChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(sankeyChartClassNames.root, baseStyles.root, props.styles?.root),\n    nodes: mergeClasses(sankeyChartClassNames.nodes, baseStyles.nodes /*, props.styles?.nodes*/),\n    links: mergeClasses(sankeyChartClassNames.links, baseStyles.links /*, props.styles?.links*/),\n    nodeTextContainer: mergeClasses(\n      sankeyChartClassNames.nodeTextContainer,\n      baseStyles.nodeTextContainer /*, props.styles?.nodeTextContainer*/,\n    ),\n    toolTip: mergeClasses(sankeyChartClassNames.toolTip, baseStyles.toolTip /*, props.styles?.toolTip*/),\n    chartWrapper: mergeClasses(\n      sankeyChartClassNames.chartWrapper,\n      props.reflowProps?.mode === 'min-width' ? baseStyles.chartWrapper : '',\n      props.styles?.chartWrapper,\n    ),\n    chart: mergeClasses(sankeyChartClassNames.chart, baseStyles.chart, props.styles?.chart),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","getTooltipStyle","sankeyChartClassNames","root","nodes","links","nodeTextContainer","toolTip","chartWrapper","chart","useStyles","body1","display","width","height","flexDirection","overflow","textAlign","fill","colorNeutralBackground1","strokeWidth","marginTop","marginLeft","marginBottom","marginRight","useSankeyChartStyles","props","baseStyles","styles","reflowProps","mode"],"mappings":"AAAA;;;;;;;;;;;;IASaM,qBAAAA;;;wBAqDAuB;eAAAA;;;uBA5D0C,iBAAiB;4BAG/B,wBAAwB;uBAC5B,wBAAwB;AAGtD,8BAAiE;IACtEtB,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,mBAAmB;IACnBC,SAAS;IACTC,cAAc;IACdC,OAAO;AACT,EAAE;AACF,MAAMC,gBAAYd,iBAAAA,EAAW;IAC3BO,MAAM;QACJ,GAAGJ,4BAAAA,CAAiBY,KAAK;QACzBC,SAAS;QACTC,OAAO;QACPC,QAAQ;QACRC,eAAe;QACfC,UAAU;QACVC,WAAW;IACb;IACAZ,OAAO;QACLa,MAAMpB,kBAAAA,CAAOqB,uBAAuB;QACpCC,aAAa;QACb,CAACpB,2BAAAA,CAAqB,EAAE;YACtBkB,MAAM;QACR;IACF;IACAd,OAAO;QACLc,MAAM;QACN,CAAClB,2BAAAA,CAAqB,EAAE;YACtBkB,MAAM;QACR;IACF;IACAX,SAASN,0BAAAA;IACTK,mBAAmB;QACjB,UAAU;YACR,CAACN,2BAAAA,CAAqB,EAAE;gBACtBkB,MAAM;YACR;QACF;QAEAG,WAAW;QACXC,YAAY;QACZC,cAAc;QACdC,aAAa;IACf;IACAhB,cAAc;QACZQ,UAAU;IACZ;IACAP,OAAO;QACLG,SAAS;IACX;AACF;AAEO,6BAA6B,CAACc;QAI+BA,eAU9DA,oBACAA,gBAEiEA;IAhBrE,MAAMC,aAAajB;IAEnB,OAAO;QACLP,UAAMN,mBAAAA,EAAaK,sBAAsBC,IAAI,EAAEwB,WAAWxB,IAAI,EAAA,CAAEuB,gBAAAA,MAAME,MAAAA,AAAM,MAAA,QAAZF,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAcvB,IAAI;QAClFC,WAAOP,mBAAAA,EAAaK,sBAAsBE,KAAK,EAAEuB,WAAWvB,KAAK,CAAC,uBAAuB;QACzFC,WAAOR,mBAAAA,EAAaK,sBAAsBG,KAAK,EAAEsB,WAAWtB,KAAK,CAAC,uBAAuB;QACzFC,uBAAmBT,mBAAAA,EACjBK,sBAAsBI,iBAAiB,EACvCqB,WAAWrB,iBAAiB,CAAC,mCAAmC;QAElEC,SAASV,uBAAAA,EAAaK,sBAAsBK,OAAO,EAAEoB,WAAWpB,OAAO,CAAC,yBAAyB;QACjGC,kBAAcX,mBAAAA,EACZK,sBAAsBM,YAAY,EAClCkB,CAAAA,CAAAA,qBAAAA,MAAMG,WAAAA,AAAW,MAAA,QAAjBH,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmBI,IAAAA,AAAI,MAAK,cAAcH,WAAWnB,YAAY,GAAG,IAAA,CACpEkB,iBAAAA,MAAME,MAAAA,AAAM,MAAA,QAAZF,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAclB,YAAY;QAE5BC,WAAOZ,mBAAAA,EAAaK,sBAAsBO,KAAK,EAAEkB,WAAWlB,KAAK,EAAA,CAAEiB,iBAAAA,MAAME,MAAAA,AAAM,MAAA,QAAZF,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcjB,KAAK;IACxF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/SankeyChart/useSankeyChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SankeyChartProps, SankeyChartStyles } from './SankeyChart.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, getTooltipStyle, getChartTitleStyles } from '../../utilities/index';\n\nexport const sankeyChartClassNames: SlotClassNames<SankeyChartStyles> = {\n  root: 'fui-sc__root',\n  nodes: 'fui-sc__nodes',\n  links: 'fui-sc__links',\n  nodeTextContainer: 'fui-sc__nodeTextContainer',\n  toolTip: 'fui-sc__toolTip',\n  chartWrapper: 'fui-sc__chartWrapper',\n  chart: 'fui-sc__chart',\n  chartTitle: 'fui-sc__chartTitle',\n  svgTooltip: 'fui-sc__svgTooltip',\n};\nconst useStyles = makeStyles({\n  root: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    flexDirection: 'column',\n    overflow: 'hidden',\n    textAlign: 'left',\n  },\n  links: {\n    fill: tokens.colorNeutralBackground1,\n    strokeWidth: '3px',\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  nodes: {\n    fill: '#F5F5F5',\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  toolTip: getTooltipStyle() as GriffelStyle,\n  nodeTextContainer: {\n    '& text': {\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n\n    marginTop: '4px',\n    marginLeft: '8px',\n    marginBottom: '4px',\n    marginRight: '8px',\n  },\n  chartWrapper: {\n    overflow: 'auto',\n  },\n  chart: {\n    display: 'block',\n  },\n  chartTitle: getChartTitleStyles() as GriffelStyle,\n  svgTooltip: {\n    fill: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n});\n\nexport const useSankeyChartStyles = (props: SankeyChartProps): SankeyChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(sankeyChartClassNames.root, baseStyles.root, props.styles?.root),\n    nodes: mergeClasses(sankeyChartClassNames.nodes, baseStyles.nodes /*, props.styles?.nodes*/),\n    links: mergeClasses(sankeyChartClassNames.links, baseStyles.links /*, props.styles?.links*/),\n    nodeTextContainer: mergeClasses(\n      sankeyChartClassNames.nodeTextContainer,\n      baseStyles.nodeTextContainer /*, props.styles?.nodeTextContainer*/,\n    ),\n    toolTip: mergeClasses(sankeyChartClassNames.toolTip, baseStyles.toolTip /*, props.styles?.toolTip*/),\n    chartWrapper: mergeClasses(\n      sankeyChartClassNames.chartWrapper,\n      props.reflowProps?.mode === 'min-width' ? baseStyles.chartWrapper : '',\n      props.styles?.chartWrapper,\n    ),\n    chart: mergeClasses(sankeyChartClassNames.chart, baseStyles.chart, props.styles?.chart),\n    chartTitle: mergeClasses(sankeyChartClassNames.chartTitle, baseStyles.chartTitle, props.styles?.chartTitle),\n    svgTooltip: mergeClasses(sankeyChartClassNames.svgTooltip, baseStyles.svgTooltip, props.styles?.svgTooltip),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","getTooltipStyle","getChartTitleStyles","sankeyChartClassNames","root","nodes","links","nodeTextContainer","toolTip","chartWrapper","chart","chartTitle","svgTooltip","useStyles","body1","display","width","height","flexDirection","overflow","textAlign","fill","colorNeutralBackground1","strokeWidth","marginTop","marginLeft","marginBottom","marginRight","useSankeyChartStyles","props","baseStyles","styles","reflowProps","mode"],"mappings":"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"}

package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.js

@@ -16,6 +16,7 @@ const _useVerticalStackedBarChartStylesstyles = require("./useVerticalStackedBar
 const _d3scale = require("d3-scale");
 const _reactutilities = require("@fluentui/react-utilities");
 const _reacttheme = require("@fluentui/react-theme");
+const _reacttabster = require("@fluentui/react-tabster");
 const _index = require("../../index");
 const _index1 = require("../../utilities/index");
 const _chartutilities = require("@fluentui/chart-utilities");
@@ -34,6 +35,10 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
     const _isRtl = (0, _index1.useRtl)();
     const _createLegendsForLine = (data)=>_getLineLegends(data);
     const _emptyChartId = (0, _reactutilities.useId)('_VSBC_empty');
+    const _arrowNavigationAttributes = (0, _reacttabster.useArrowNavigationGroup)({
+        axis: 'vertical',
+        circular: true
+    });
     let _points = [];
     let _dataset;
     let _xAxisLabels = [];
@@ -163,17 +168,14 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
             clientX = boundingRect.left + boundingRect.width / 2;
             clientY = boundingRect.top + boundingRect.height / 2;
         }
-        if (_getHighlightedLegend().length === 1) {
-            if (_noLegendHighlighted() || _isLegendHighlighted(lineData.legend)) {
-                _updatePosition(clientX, clientY);
-                setPopoverOpen(true);
-                setXCalloutValue(`${lineData.xItem.xAxisPoint}`);
-                setYCalloutValue(`${lineData.yAxisCalloutData || lineData.data || lineData.y}`);
-                setActiveXAxisDataPoint(lineData.xItem.xAxisPoint);
-                setColor(lineData.color);
-            }
-        } else {
-            _onStackHoverFocus(lineData.xItem, event);
+        if (_noLegendHighlighted() || _isLegendHighlighted(lineData.legend)) {
+            _updatePosition(clientX, clientY);
+            setPopoverOpen(true);
+            setXCalloutValue(`${lineData.xItem.xAxisPoint}`);
+            setYCalloutValue(`${lineData.yAxisCalloutData || lineData.data || lineData.y}`);
+            setCalloutLegend(lineData.legend);
+            setActiveXAxisDataPoint(lineData.xItem.xAxisPoint);
+            setColor(lineData.color);
         }
     }
     function _onStackHoverFocus(stack, event) {
@@ -337,19 +339,9 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
         const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
         return props.onRenderCalloutPerStack ? props.onRenderCalloutPerStack(stackCalloutProps) : props.onRenderCalloutPerDataPoint && !_isHavingLines ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps, _renderCallout) : null;
     }
-    function _toFocusWholeStack(_isHavingLines) {
+    function _toFocusWholeStack() {
         const { isCalloutForStack = false } = props;
-        let shouldFocusStackOnly = false;
-        if (_isHavingLines) {
-            if (_getHighlightedLegend().length === 1) {
-                shouldFocusStackOnly = false;
-            } else {
-                shouldFocusStackOnly = true;
-            }
-        } else {
-            shouldFocusStackOnly = isCalloutForStack;
-        }
-        return shouldFocusStackOnly;
+        return isCalloutForStack;
     }
     function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues) {
         let domainNRangeValue;
@@ -455,8 +447,8 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
                 const circleRef = {
                     refElement: null
                 };
-                const noBarsAndLinesActive = circlePoint.xItem.chartData.filter((dataPoint)=>_noLegendHighlighted() || _isLegendHighlighted(dataPoint.legend)).length === 0;
                 const yScaleBandwidthTranslate = !circlePoint.useSecondaryYScale && _yAxisType === _index1.YAxisType.StringAxis ? yScalePrimary.bandwidth() / 2 : 0;
+                const shouldHighlight = _isLegendHighlighted(circlePoint.legend) || _noLegendHighlighted() ? true : false;
                 dots.push(/*#__PURE__*/ _react.createElement("circle", {
                     key: `${index}-${subIndex}-dot`,
                     cx: xScale(circlePoint.xItem.xAxisPoint),
@@ -474,13 +466,11 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
                     ref: (e)=>{
                         circleRef.refElement = e;
                     },
-                    ...noBarsAndLinesActive ? {
-                        tabIndex: !props.hideTooltip ? 0 : undefined,
-                        onFocus: (event)=>_lineFocus(event, circlePoint, circleRef),
-                        onBlur: _handleMouseOut,
-                        role: 'img',
-                        'aria-label': _getAriaLabel(circlePoint.xItem, circlePoint)
-                    } : {}
+                    tabIndex: !props.hideTooltip && shouldHighlight ? 0 : undefined,
+                    onFocus: (event)=>_lineFocus(event, circlePoint, circleRef),
+                    onBlur: _handleMouseOut,
+                    role: "img",
+                    "aria-label": _getAriaLabel(circlePoint.xItem, circlePoint, true)
                 }));
             });
         });
@@ -747,8 +737,7 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
     const classes = (0, _useVerticalStackedBarChartStylesstyles.useVerticalStackedBarChartStyles)(props);
     function _createBar(xBarScale, yBarScale, containerHeight, xElement) {
         const { barCornerRadius = 0, barMinimumHeight = 0 } = props;
-        const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
-        const shouldFocusWholeStack = _toFocusWholeStack(_isHavingLines);
+        const shouldFocusWholeStack = _toFocusWholeStack();
         if (_xAxisType === _index1.XAxisTypes.StringAxis) {
             _barWidth = (0, _index1.getBarWidth)(props.barWidth, props.maxBarWidth, xBarScale.bandwidth());
         }
@@ -1021,7 +1010,7 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
     if (!_isChartEmpty()) {
         _adjustProps();
         const _isHavingLines = props.data.some((item)=>item.lineData && item.lineData.length > 0);
-        const shouldFocusWholeStack = _toFocusWholeStack(_isHavingLines);
+        const shouldFocusWholeStack = _toFocusWholeStack();
         _dataset = _createDataSetLayer();
         const legendBars = _getLegendData(_points, _createLegendsForLine(props.data));
         const calloutProps = {
@@ -1035,7 +1024,7 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
             ...(0, _index1.getAccessibleDataObject)(callOutAccessibilityData),
             clickPosition: clickPosition,
             isPopoverOpen: isPopoverOpen,
-            isCalloutForStack: props.isCalloutForStack || _isHavingLines && (_noLegendHighlighted() || _getHighlightedLegend().length > 1),
+            isCalloutForStack: shouldFocusWholeStack,
             isCartesian: true,
             customCallout: {
                 customizedCallout: _getCustomizedCallout() !== null ? _getCustomizedCallout() : undefined,
@@ -1080,7 +1069,7 @@ const VerticalStackedBarChart = /*#__PURE__*/ _react.forwardRef((_props, forward
             ],
             getYDomainMargins: _getYDomainMargins,
             /* eslint-disable react/jsx-no-bind */ children: (props)=>{
-                return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("g", null, _bars), /*#__PURE__*/ _react.createElement("g", null, _isHavingLines && _createLines(props.xScale, props.yScalePrimary, props.containerHeight, props.containerWidth, props.yScaleSecondary)));
+                return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("g", _arrowNavigationAttributes, _bars), /*#__PURE__*/ _react.createElement("g", null, _isHavingLines && _createLines(props.xScale, props.yScalePrimary, props.containerHeight, props.containerWidth, props.yScaleSecondary)));
             }
         });
     }