@fluentui/react-charts 9.3.17 → 9.3.18

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Legends/useLegendsStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } 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  },\n  legend: {\n    // setting display to flex does not work\n    // display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'left',\n    cursor: 'pointer',\n    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      '&:focus-visible': {\n        outline: `${tokens.strokeWidthThick} solid canvasText`,\n        outlineOffset: `calc(${tokens.strokeWidthThick} * -1)`,\n      },\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    borderLeft: '6px solid transparent',\n    borderRight: '6px solid transparent',\n    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    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      padding: '1px 4px 1px',\n      borderTop: '-2px',\n      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","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","justifyContent","cursor","border","padding","textTransform","minWidth","color","forcedColorAdjust","outline","strokeWidthThick","outlineOffset","content","opacity","marginRight","height","borderLeft","borderRight","borderTop","spacingHorizontalS","caption1","colorNeutralForeground1","position","textAlign","transform","top","left","maxWidth","flex","margin","display","gap","useLegendStyles","props","className","baseStyles","styles"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Legends/useLegendsStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { 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  },\n  legend: {\n    // setting display to flex does not work\n    // display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'left',\n    cursor: 'pointer',\n    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      '&:focus-visible': {\n        outline: `${tokens.strokeWidthThick} solid canvasText`,\n        outlineOffset: `calc(${tokens.strokeWidthThick} * -1)`,\n      },\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    borderLeft: '6px solid transparent',\n    borderRight: '6px solid transparent',\n    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    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      padding: '1px 4px 1px',\n      borderTop: '-2px',\n      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","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","justifyContent","cursor","border","padding","textTransform","minWidth","color","forcedColorAdjust","outline","strokeWidthThick","outlineOffset","content","opacity","marginRight","height","borderLeft","borderRight","borderTop","spacingHorizontalS","caption1","colorNeutralForeground1","position","textAlign","transform","top","left","maxWidth","flex","margin","display","gap","useLegendStyles","props","className","baseStyles","styles"],"mappings":"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"}

package/lib/components/LineChart/LineChart.js

@@ -105,25 +105,25 @@ const PATH_MULTIPLY_SIZE = 2.5;
     let _xAxisScale = '';
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let _yScalePrimary = '';
-    let _circleId = useId('circle');
-    let _lineId = useId('lineID');
-    let _borderId = useId('borderID');
-    let _verticalLine = useId('verticalLine');
-    let _colorFillBarPatternId = useId('colorFillBarPattern');
+    const _circleId = useId('circle');
+    const _lineId = useId('lineID');
+    const _borderId = useId('borderID');
+    const _verticalLine = useId('verticalLine');
+    const _colorFillBarPatternId = useId('colorFillBarPattern');
     let _uniqueCallOutID = '';
-    let _refArray = [];
+    const _refArray = [];
     let margins;
     let eventLabelHeight = 36;
     let lines;
     let _renderedColorFillBars;
     const _colorFillBars = React.useRef([]);
-    let _rectId = useId('containerRectLD');
-    let _staticHighlightCircle = useId('staticHighlightCircle');
-    let _firstRenderOptimization = true;
-    let _emptyChartId = useId('_LineChart_empty');
+    const _rectId = useId('containerRectLD');
+    const _staticHighlightCircle = useId('staticHighlightCircle');
+    const _firstRenderOptimization = true;
+    const _emptyChartId = useId('_LineChart_empty');
     const _colorFillBarId = useId('_colorFillBarId');
     const _isRTL = useRtl();
-    let xAxisCalloutAccessibilityData = {};
+    const xAxisCalloutAccessibilityData = {};
     const { cartesianChartRef, legendsRef: _legendsRef } = useImageExport(props.componentRef, props.hideLegend);
     let _yScaleSecondary;
     props.eventAnnotationProps && props.eventAnnotationProps.labelHeight && (eventLabelHeight = props.eventAnnotationProps.labelHeight);
@@ -1247,17 +1247,17 @@ const PATH_MULTIPLY_SIZE = 2.5;
     }
     const calloutProps = {
         YValueHover: yValueHover,
-        hoverXValue: hoverXValue,
-        YValue: YValue,
+        hoverXValue,
+        YValue,
         legend: legendVal,
         color: lineColor,
         XValue: hoverXValue,
         descriptionMessage: props.getCalloutDescriptionMessage && stackCalloutProps ? props.getCalloutDescriptionMessage(stackCalloutProps) : undefined,
         tabIndex: 0,
-        xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
+        xAxisCalloutAccessibilityData,
         ...props.calloutProps,
-        isPopoverOpen: isPopoverOpen,
-        clickPosition: clickPosition,
+        isPopoverOpen,
+        clickPosition,
         positioning: {
             target: refSelected
         },