@fluentui/react-charts 9.1.9 → 9.2.0

package/lib/components/Legends/useLegendsStyles.styles.raw.js

@@ -0,0 +1,138 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { HighContrastSelector } from '../../utilities/index';
+// Constants needed to create legends using SVG for image export
+export const LEGEND_CONTAINER_MARGIN_TOP = 8;
+export const LEGEND_CONTAINER_MARGIN_START = 12;
+export const LEGEND_PADDING = 8;
+export const LEGEND_HEIGHT = 32;
+export const LEGEND_SHAPE_BORDER = 1;
+const LEGEND_SHAPE_SIZE_WITHOUT_BORDER = 12;
+// SVG strokes are drawn centered around the path, with half of the stroke width extending inward
+// (overlapping the fill area) and half outward. To ensure the filled area maintains its intended size,
+// expand the shape accordingly.
+export const LEGEND_SHAPE_SIZE = LEGEND_SHAPE_SIZE_WITHOUT_BORDER + LEGEND_SHAPE_BORDER;
+export const LEGEND_SHAPE_MARGIN_END = 8;
+export const INACTIVE_LEGEND_TEXT_OPACITY = 0.67;
+/**
+ * @internal
+ */ export const legendClassNames = {
+    root: 'fui-legend__root',
+    legend: 'fui-legend__legend',
+    rect: 'fui-legend__rect',
+    shape: 'fui-legend__shape',
+    triangle: 'fui-legend__triangle',
+    text: 'fui-legend__text',
+    hoverChange: 'fui-legend__hoverChange',
+    resizableArea: 'fui-legend__resizableArea',
+    legendContainer: 'fui-legend__legendContainer',
+    annotation: 'fui-legend__annotation'
+};
+const useStyles = makeStyles({
+    root: {
+        // FIXME: Removing this style allows the legend container in responsive donut chart to resize
+        // properly (horizontally) within a flexbox or grid layout. But it causes vertical resizing issues
+        // in responsive charts where legends consist of multiple words.
+        whiteSpace: 'nowrap',
+        width: '100%',
+        alignItems: 'center',
+        ...shorthands.margin('-8px 0 0 -8px')
+    },
+    legend: {
+        // setting display to flex does not work
+        // display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'left',
+        cursor: 'pointer',
+        ...shorthands.border('none'),
+        padding: `${LEGEND_PADDING}px`,
+        textTransform: 'capitalize',
+        // The default min-width is 64px. Setting it to 0 allows the legend container in responsive
+        // cartesian charts to resize properly within a flexbox or grid layout.
+        minWidth: 0,
+        [HighContrastSelector]: {
+            color: 'WindowText',
+            forcedColorAdjust: 'none'
+        },
+        '&:hover': {
+            [HighContrastSelector]: {
+                color: 'HighlightText',
+                forcedColorAdjust: 'none'
+            }
+        }
+    },
+    rect: {
+        [HighContrastSelector]: {
+            content: 'var(--rect-content-high-contrast)',
+            opacity: 'var(--rect-opacity-high-contrast)'
+        },
+        width: `${LEGEND_SHAPE_SIZE_WITHOUT_BORDER}px`,
+        marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,
+        border: `${LEGEND_SHAPE_BORDER}px solid`
+    },
+    shape: {
+        marginRight: `${LEGEND_SHAPE_MARGIN_END}px`
+    },
+    // TO DO Add props when these styles are used in the component
+    triangle: {
+        width: '0',
+        height: '0',
+        ...shorthands.borderLeft('6px solid transparent'),
+        ...shorthands.borderRight('6px solid transparent'),
+        ...shorthands.borderTop('10.4px solid'),
+        marginRight: tokens.spacingHorizontalS
+    },
+    // TO DO Add props when these styles are used in the component
+    text: {
+        ...typographyStyles.caption1,
+        color: tokens.colorNeutralForeground1,
+        forcedColorAdjust: 'auto'
+    },
+    // TO DO Add props when these styles are used in the component
+    hoverChange: {
+        width: '12px',
+        height: '12px',
+        marginRight: tokens.spacingHorizontalS,
+        ...shorthands.border('1px solid')
+    },
+    resizableArea: {
+        position: 'relative',
+        textAlign: 'left',
+        transform: 'translate(-50%, 0)',
+        top: 'auto',
+        left: '50%',
+        minWidth: '200px',
+        maxWidth: '800px',
+        '::after': {
+            ...shorthands.padding('1px 4px 1px'),
+            ...shorthands.borderTop('-2px'),
+            ...shorthands.borderLeft('-2px')
+        }
+    },
+    legendContainer: {
+        flex: '0 1 auto',
+        margin: '4px'
+    },
+    annotation: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '4px'
+    }
+});
+export const useLegendStyles = (props)=>{
+    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4, _props_styles5, _props_styles6, _props_styles7, _props_styles8, _props_styles9;
+    const { className } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.
+    const baseStyles = useStyles();
+    return {
+        root: mergeClasses(legendClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
+        legend: mergeClasses(legendClassNames.legend, baseStyles.legend, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.legend),
+        rect: mergeClasses(legendClassNames.rect, baseStyles.rect, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.rect),
+        shape: mergeClasses(legendClassNames.shape, baseStyles.shape, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.shape),
+        triangle: mergeClasses(legendClassNames.triangle, baseStyles.triangle, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.triangle),
+        text: mergeClasses(legendClassNames.text, baseStyles.text, (_props_styles5 = props.styles) === null || _props_styles5 === void 0 ? void 0 : _props_styles5.text),
+        hoverChange: mergeClasses(legendClassNames.hoverChange, baseStyles.hoverChange, (_props_styles6 = props.styles) === null || _props_styles6 === void 0 ? void 0 : _props_styles6.hoverChange),
+        resizableArea: mergeClasses(legendClassNames.resizableArea, baseStyles.resizableArea, (_props_styles7 = props.styles) === null || _props_styles7 === void 0 ? void 0 : _props_styles7.resizableArea),
+        legendContainer: mergeClasses(legendClassNames.legendContainer, baseStyles.legendContainer, (_props_styles8 = props.styles) === null || _props_styles8 === void 0 ? void 0 : _props_styles8.legendContainer),
+        annotation: mergeClasses(legendClassNames.annotation, baseStyles.annotation, (_props_styles9 = props.styles) === null || _props_styles9 === void 0 ? void 0 : _props_styles9.annotation)
+    };
+};

package/lib/components/Legends/useLegendsStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Legends/useLegendsStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { LegendsProps, LegendsStyles } from './Legends.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n\n// Constants needed to create legends using SVG for image export\nexport const LEGEND_CONTAINER_MARGIN_TOP = 8;\nexport const LEGEND_CONTAINER_MARGIN_START = 12;\nexport const LEGEND_PADDING = 8;\nexport const LEGEND_HEIGHT = 32;\nexport const LEGEND_SHAPE_BORDER = 1;\nconst LEGEND_SHAPE_SIZE_WITHOUT_BORDER = 12;\n// SVG strokes are drawn centered around the path, with half of the stroke width extending inward\n// (overlapping the fill area) and half outward. To ensure the filled area maintains its intended size,\n// expand the shape accordingly.\nexport const LEGEND_SHAPE_SIZE = LEGEND_SHAPE_SIZE_WITHOUT_BORDER + LEGEND_SHAPE_BORDER;\nexport const LEGEND_SHAPE_MARGIN_END = 8;\nexport const INACTIVE_LEGEND_TEXT_OPACITY = 0.67;\n\n/**\n * @internal\n */\nexport const legendClassNames: SlotClassNames<LegendsStyles> = {\n  root: 'fui-legend__root',\n  legend: 'fui-legend__legend',\n  rect: 'fui-legend__rect',\n  shape: 'fui-legend__shape',\n  triangle: 'fui-legend__triangle',\n  text: 'fui-legend__text',\n  hoverChange: 'fui-legend__hoverChange',\n  resizableArea: 'fui-legend__resizableArea',\n  legendContainer: 'fui-legend__legendContainer',\n  annotation: 'fui-legend__annotation',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    // FIXME: Removing this style allows the legend container in responsive donut chart to resize\n    // properly (horizontally) within a flexbox or grid layout. But it causes vertical resizing issues\n    // in responsive charts where legends consist of multiple words.\n    whiteSpace: 'nowrap',\n    width: '100%',\n    alignItems: 'center',\n    ...shorthands.margin('-8px 0 0 -8px'),\n  },\n  legend: {\n    // setting display to flex does not work\n    // display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'left',\n    cursor: 'pointer',\n    ...shorthands.border('none'),\n    padding: `${LEGEND_PADDING}px`,\n    textTransform: 'capitalize',\n    // The default min-width is 64px. Setting it to 0 allows the legend container in responsive\n    // cartesian charts to resize properly within a flexbox or grid layout.\n    minWidth: 0,\n    [HighContrastSelector]: {\n      color: 'WindowText',\n      forcedColorAdjust: 'none',\n    },\n    '&:hover': {\n      [HighContrastSelector]: {\n        color: 'HighlightText',\n        forcedColorAdjust: 'none',\n      },\n    },\n  },\n  rect: {\n    [HighContrastSelector]: {\n      content: 'var(--rect-content-high-contrast)',\n      opacity: 'var(--rect-opacity-high-contrast)',\n    },\n    width: `${LEGEND_SHAPE_SIZE_WITHOUT_BORDER}px`,\n    marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n    border: `${LEGEND_SHAPE_BORDER}px solid`,\n  },\n  shape: {\n    marginRight: `${LEGEND_SHAPE_MARGIN_END}px`,\n  },\n  // TO DO Add props when these styles are used in the component\n  triangle: {\n    width: '0',\n    height: '0',\n    ...shorthands.borderLeft('6px solid transparent'),\n    ...shorthands.borderRight('6px solid transparent'),\n    ...shorthands.borderTop('10.4px solid'),\n    marginRight: tokens.spacingHorizontalS,\n  },\n  // TO DO Add props when these styles are used in the component\n  text: {\n    ...typographyStyles.caption1,\n    color: tokens.colorNeutralForeground1,\n    forcedColorAdjust: 'auto',\n  },\n  // TO DO Add props when these styles are used in the component\n  hoverChange: {\n    width: '12px',\n    height: '12px',\n    marginRight: tokens.spacingHorizontalS,\n    ...shorthands.border('1px solid'),\n  },\n  resizableArea: {\n    position: 'relative',\n    textAlign: 'left',\n    transform: 'translate(-50%, 0)',\n    top: 'auto',\n    left: '50%',\n    minWidth: '200px',\n    maxWidth: '800px',\n    '::after': {\n      ...shorthands.padding('1px 4px 1px'),\n      ...shorthands.borderTop('-2px'),\n      ...shorthands.borderLeft('-2px'),\n    },\n  },\n  legendContainer: {\n    flex: '0 1 auto',\n    margin: '4px',\n  },\n  annotation: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '4px',\n  },\n});\n\nexport const useLegendStyles = (props: LegendsProps): LegendsStyles => {\n  const { className } = props; // ToDo - width, barHeight is non enumerable. Need to be used inline.\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(legendClassNames.root, baseStyles.root, className, props.styles?.root),\n    legend: mergeClasses(legendClassNames.legend, baseStyles.legend, props.styles?.legend),\n    rect: mergeClasses(legendClassNames.rect, baseStyles.rect, props.styles?.rect),\n    shape: mergeClasses(legendClassNames.shape, baseStyles.shape, props.styles?.shape),\n    triangle: mergeClasses(legendClassNames.triangle, baseStyles.triangle, props.styles?.triangle),\n    text: mergeClasses(legendClassNames.text, baseStyles.text, props.styles?.text),\n    hoverChange: mergeClasses(legendClassNames.hoverChange, baseStyles.hoverChange, props.styles?.hoverChange),\n    resizableArea: mergeClasses(legendClassNames.resizableArea, baseStyles.resizableArea, props.styles?.resizableArea),\n    legendContainer: mergeClasses(\n      legendClassNames.legendContainer,\n      baseStyles.legendContainer,\n      props.styles?.legendContainer,\n    ),\n    annotation: mergeClasses(legendClassNames.annotation, baseStyles.annotation, props.styles?.annotation),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","LEGEND_CONTAINER_MARGIN_TOP","LEGEND_CONTAINER_MARGIN_START","LEGEND_PADDING","LEGEND_HEIGHT","LEGEND_SHAPE_BORDER","LEGEND_SHAPE_SIZE_WITHOUT_BORDER","LEGEND_SHAPE_SIZE","LEGEND_SHAPE_MARGIN_END","INACTIVE_LEGEND_TEXT_OPACITY","legendClassNames","root","legend","rect","shape","triangle","text","hoverChange","resizableArea","legendContainer","annotation","useStyles","whiteSpace","width","alignItems","margin","justifyContent","cursor","border","padding","textTransform","minWidth","color","forcedColorAdjust","content","opacity","marginRight","height","borderLeft","borderRight","borderTop","spacingHorizontalS","caption1","colorNeutralForeground1","position","textAlign","transform","top","left","maxWidth","flex","display","gap","useLegendStyles","props","className","baseStyles","styles"],"mappings":"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"}

package/lib/components/LineChart/LineChart.js

@@ -10,11 +10,12 @@ import { CartesianChart } from '../../index';
 import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
 import { tokens } from '@fluentui/react-theme';
 import { calloutData, ChartTypes, getXAxisType, XAxisTypes, tooltipOfAxislabels, Points, pointTypes, getTypeOfAxis, getNextColor, getColorFromToken, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfNumericForAreaChart, createStringYAxis, useRtl, formatDate, getCurveFactory } from '../../utilities/index';
-var PointSize;
-(function(PointSize) {
+import { toImage } from '../../utilities/image-export-utils';
+var PointSize = /*#__PURE__*/ function(PointSize) {
     PointSize[PointSize["hoverSize"] = 11] = "hoverSize";
     PointSize[PointSize["invisibleSize"] = 1] = "invisibleSize";
-})(PointSize || (PointSize = {}));
+    return PointSize;
+}(PointSize || {});
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const bisect = bisector((d)=>d.x).left;
 const DEFAULT_LINE_STROKE_SIZE = 4;
@@ -117,6 +118,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
     let xAxisCalloutAccessibilityData = {};
     const cartesianChartRef = React.useRef(null);
     let _yScaleSecondary;
+    const _legendsRef = React.useRef(null);
     props.eventAnnotationProps && props.eventAnnotationProps.labelHeight && (eventLabelHeight = props.eventAnnotationProps.labelHeight);
     const [hoverXValue, setHoverXValue] = React.useState('');
     const [activeLegend, setActiveLegend] = React.useState('');
@@ -154,7 +156,11 @@ const PATH_MULTIPLY_SIZE = 2.5;
         var _cartesianChartRef_current;
         var _cartesianChartRef_current_chartContainer;
         return {
-            chartContainer: (_cartesianChartRef_current_chartContainer = (_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) !== null && _cartesianChartRef_current_chartContainer !== void 0 ? _cartesianChartRef_current_chartContainer : null
+            chartContainer: (_cartesianChartRef_current_chartContainer = (_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) !== null && _cartesianChartRef_current_chartContainer !== void 0 ? _cartesianChartRef_current_chartContainer : null,
+            toImage: (opts)=>{
+                var _cartesianChartRef_current, _legendsRef_current;
+                return toImage((_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer, (_legendsRef_current = _legendsRef.current) === null || _legendsRef_current === void 0 ? void 0 : _legendsRef_current.toSVG, _isRTL, opts);
+            }
         };
     }, []);
     function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
@@ -307,7 +313,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
             ...isLegendMultiSelectEnabled && {
                 onLegendHoverCardLeave: _onHoverCardHide
             },
-            ...props.legendProps
+            ...props.legendProps,
+            legendRef: _legendsRef
         });
     }
     function _getBoxWidthOfShape(pointId, pointIndex, isLastPoint) {
@@ -401,7 +408,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                     ref: (e)=>{
                         _refCallback(e, circleId);
                     },
-                    onFocus: ()=>_handleFocus(circleId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
+                    onFocus: (event)=>_handleFocus(event, circleId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
                     onBlur: _handleMouseOut,
                     ..._getClickHandler(_points[i].data[0].onDataPointClick)
                 }));
@@ -513,7 +520,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                         onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale),
                         onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale),
                         onMouseOut: _handleMouseOut,
-                        onFocus: ()=>_handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
+                        onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
                         onBlur: _handleMouseOut,
                         ..._getClickHandler(_points[i].data[j - 1].onDataPointClick),
                         opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01,
@@ -541,7 +548,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                             onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale),
                             onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale),
                             onMouseOut: _handleMouseOut,
-                            onFocus: ()=>_handleFocus(lineId, x2, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData),
+                            onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData),
                             onBlur: _handleMouseOut,
                             ..._getClickHandler(_points[i].data[j].onDataPointClick),
                             opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01,
@@ -561,6 +568,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                             width: 0,
                             onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale),
                             onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale),
+                            onFocus: (event)=>_handleFocus(event, circleId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
                             onMouseOut: _handleMouseOut,
                             strokeWidth: 0,
                             focusable: false,
@@ -805,7 +813,13 @@ const PATH_MULTIPLY_SIZE = 2.5;
             setActivePoint('');
         }
     };
-    function _handleFocus(lineId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData) {
+    function _handleFocus(event, lineId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData) {
+        let cx = 0;
+        let cy = 0;
+        const targetRect = event.target.getBoundingClientRect();
+        cx = targetRect.left + targetRect.width / 2;
+        cy = targetRect.top + targetRect.height / 2;
+        updatePosition(cx, cy);
         _uniqueCallOutID = circleId;
         const formattedData = x instanceof Date ? formatDate(x, props.useUTC) : x;
         const xVal = x instanceof Date ? x.getTime() : x;