@fluentui/react-charts 9.3.5 → 9.3.7

package/lib/components/LineChart/LineChart.types.js

@@ -1,3 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */ /**
+/**
  * {@docCategory LineChart}
  */ export { };

package/lib/components/LineChart/LineChart.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/LineChart/LineChart.types.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport { RenderFunction } from '../../utilities/index';\nimport {\n  ChartProps,\n  LineChartPoints,\n  Margins,\n  Basestate,\n  RefArrayData,\n  CustomizedCalloutData,\n} from '../../types/index';\nimport { EventAnnotation } from '../../types/EventAnnotation';\nimport {\n  CartesianChartProps,\n  CartesianChartStyleProps,\n  CartesianChartStyles,\n  ChildProps,\n} from '../CommonComponents/index';\n\nexport type { ChildProps, LineChartPoints, Margins, Basestate, RefArrayData };\n\n/**\n * Line Chart properties\n * {@docCategory LineChart}\n */\nexport interface LineChartProps extends CartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data: ChartProps;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: LineChartStyles;\n\n  /**\n   * Show event annotation\n   */\n  eventAnnotationProps?: EventsAnnotationProps;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: RenderFunction<CustomizedCalloutData>;\n\n  /**\n   * Define a custom callout renderer for a stack; default is to render per data point\n   */\n  onRenderCalloutPerStack?: RenderFunction<CustomizedCalloutData>;\n\n  /**\n   * Callback for getting callout description message\n   */\n  getCalloutDescriptionMessage?: (calloutDataProps: CustomizedCalloutData) => string | undefined;\n\n  /*\n   * Color fill bars for the chart,\n   */\n  colorFillBars?: ColorFillBarsProps[];\n\n  /**\n   * if this is set to true, then for each line there will be a unique shape assigned to the point,\n   * there are total 8 shapes which are as follow circle, square, triangele, diamond, pyramid,\n   *  hexagon, pentagon and octagon, which will get assigned as respectively, if there are more\n   * than 8 lines in the line chart then it will again start from cicle to octagon.\n   * setting this flag to true will also change the behavior of the points, like for a\n   * line, last point shape and first point shape will be visible all the times, and all\n   * other points will get enlarge only when hovered over them\n   * if set to false default shape will be circle, with the existing behavior\n   * @default false\n   */\n  allowMultipleShapesForPoints?: boolean;\n\n  /*\n   * Optimize line chart rendering for large data set. If this prop is enabled, line chart\n   * can easily render over 10K datapoints with multiple lines smoothly.\n   * This rendering mechanism does not support gaps in lines.\n   */\n  optimizeLargeData?: boolean;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * @default false\n   * The prop used to enable the perf optimization\n   */\n  enablePerfOptimization?: boolean;\n\n  /**\n   * To enable callout for individual line or complete stack.\n   * @default true\n   * @type \\{boolean \\}\n   */\n  isCalloutForStack?: boolean;\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface EventsAnnotationProps {\n  events: EventAnnotation[];\n  strokeColor?: string;\n  labelColor?: string;\n  labelHeight?: number;\n  labelWidth?: number;\n  mergedLabel: (count: number) => string;\n}\n\n/**\n * Line Chart styles\n * {@docCategory LineChart}\n */\nexport interface LineChartStyles extends CartesianChartStyles {\n  /**\n   * styles for line border\n   */\n  lineBorder?: string;\n\n  /**\n   * styles for marker label\n   */\n  markerLabel?: string;\n}\n\n/**\n * Line Chart style properties\n * {@docCategory LineChart}\n */\nexport interface LineChartStyleProps extends CartesianChartStyleProps {}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface ColorFillBarsProps {\n  legend: string;\n  color: string;\n  data: ColorFillBarData[];\n  applyPattern?: boolean;\n  onLegendClick?: (selectedLegend: string | string[] | null) => void | undefined;\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface ColorFillBarData {\n  startX: number | Date;\n  endX: number | Date;\n}\n"],"names":[],"mappings":"AAAA,uDAAuD,GAgJvD;;CAEC,GACD,WAGC"}
+{"version":3,"sources":["../src/components/LineChart/LineChart.types.ts"],"sourcesContent":["import { RenderFunction } from '../../utilities/index';\nimport {\n  ChartProps,\n  LineChartPoints,\n  Margins,\n  Basestate,\n  RefArrayData,\n  CustomizedCalloutData,\n} from '../../types/index';\nimport { EventAnnotation } from '../../types/EventAnnotation';\nimport {\n  CartesianChartProps,\n  CartesianChartStyleProps,\n  CartesianChartStyles,\n  ChildProps,\n} from '../CommonComponents/index';\n\nexport type { ChildProps, LineChartPoints, Margins, Basestate, RefArrayData };\n\n/**\n * Line Chart properties\n * {@docCategory LineChart}\n */\nexport interface LineChartProps extends CartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data: ChartProps;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: LineChartStyles;\n\n  /**\n   * Show event annotation\n   */\n  eventAnnotationProps?: EventsAnnotationProps;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: RenderFunction<CustomizedCalloutData>;\n\n  /**\n   * Define a custom callout renderer for a stack; default is to render per data point\n   */\n  onRenderCalloutPerStack?: RenderFunction<CustomizedCalloutData>;\n\n  /**\n   * Callback for getting callout description message\n   */\n  getCalloutDescriptionMessage?: (calloutDataProps: CustomizedCalloutData) => string | undefined;\n\n  /*\n   * Color fill bars for the chart,\n   */\n  colorFillBars?: ColorFillBarsProps[];\n\n  /**\n   * if this is set to true, then for each line there will be a unique shape assigned to the point,\n   * there are total 8 shapes which are as follow circle, square, triangele, diamond, pyramid,\n   *  hexagon, pentagon and octagon, which will get assigned as respectively, if there are more\n   * than 8 lines in the line chart then it will again start from cicle to octagon.\n   * setting this flag to true will also change the behavior of the points, like for a\n   * line, last point shape and first point shape will be visible all the times, and all\n   * other points will get enlarge only when hovered over them\n   * if set to false default shape will be circle, with the existing behavior\n   * @default false\n   */\n  allowMultipleShapesForPoints?: boolean;\n\n  /*\n   * Optimize line chart rendering for large data set. If this prop is enabled, line chart\n   * can easily render over 10K datapoints with multiple lines smoothly.\n   * This rendering mechanism does not support gaps in lines.\n   */\n  optimizeLargeData?: boolean;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * @default false\n   * The prop used to enable the perf optimization\n   */\n  enablePerfOptimization?: boolean;\n\n  /**\n   * To enable callout for individual line or complete stack.\n   * @default true\n   * @type \\{boolean \\}\n   */\n  isCalloutForStack?: boolean;\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface EventsAnnotationProps {\n  events: EventAnnotation[];\n  strokeColor?: string;\n  labelColor?: string;\n  labelHeight?: number;\n  labelWidth?: number;\n  mergedLabel: (count: number) => string;\n}\n\n/**\n * Line Chart styles\n * {@docCategory LineChart}\n */\nexport interface LineChartStyles extends CartesianChartStyles {\n  /**\n   * styles for line border\n   */\n  lineBorder?: string;\n\n  /**\n   * styles for marker label\n   */\n  markerLabel?: string;\n}\n\n/**\n * Line Chart style properties\n * {@docCategory LineChart}\n */\nexport interface LineChartStyleProps extends CartesianChartStyleProps {}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface ColorFillBarsProps {\n  legend: string;\n  color: string;\n  data: ColorFillBarData[];\n  applyPattern?: boolean;\n  onLegendClick?: (selectedLegend: string | string[] | null) => void | undefined;\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface ColorFillBarData {\n  startX: number | Date;\n  endX: number | Date;\n}\n"],"names":[],"mappings":"AA+IA;;CAEC,GACD,WAGC"}

package/lib/components/LineChart/eventAnnotation/EventAnnotation.js

@@ -56,7 +56,7 @@ function calculateLabels(lineDefs, textWidth, maxX, minX) {
             if (lastX < leftXBoundary) {
                 return [
                     {
-                        x: x,
+                        x,
                         anchor: 'end',
                         aggregatedIdx: [
                             currentIdx
@@ -66,7 +66,7 @@ function calculateLabels(lineDefs, textWidth, maxX, minX) {
             } else if (x + textWidth < maxX) {
                 return [
                     {
-                        x: x,
+                        x,
                         anchor: 'start',
                         aggregatedIdx: [
                             currentIdx
@@ -86,8 +86,7 @@ function calculateLabels(lineDefs, textWidth, maxX, minX) {
     };
     const backtrack = (currentIdx, anchor)=>{
         const bd = anchor === 'end' ? lineDefs[currentIdx].x : lineDefs[currentIdx].x + textWidth;
-        let idx = findIndex(lineDefs, // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (ds)=>ds.x > bd && (ds.x - textWidth >= bd || ds.x + textWidth < maxX), currentIdx + 1);
+        let idx = findIndex(lineDefs, (ds)=>ds.x > bd && (ds.x - textWidth >= bd || ds.x + textWidth < maxX), currentIdx + 1);
         if (idx === -1) {
             idx = lineDefs.length;
         }

package/lib/components/LineChart/eventAnnotation/EventAnnotation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/LineChart/eventAnnotation/EventAnnotation.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ScaleTime } from 'd3-scale';\nimport { tokens } from '@fluentui/react-theme';\nimport { findIndex } from '../../../utilities/index';\nimport { LineDef, LabelLink, LabelDef } from './LabelLink';\nimport { EventsAnnotationProps } from '../LineChart.types';\nimport { getColorFromToken } from '../../../utilities/colors';\n\ninterface IEventsAnnotationExtendProps extends EventsAnnotationProps {\n  scale: ScaleTime<number, number>;\n  chartYBottom: number;\n  chartYTop: number;\n}\n\nexport const EventsAnnotation: React.FunctionComponent<IEventsAnnotationExtendProps> = props => {\n  const textWidth = props.labelWidth ? props.labelWidth : 105;\n  const textY = props.chartYTop - 20;\n  const lineTopY = textY + 7;\n  const textPadding = 5;\n  const lineHeight = 18;\n  const fontSize = '10pt';\n  const axisRange = props.scale.range();\n\n  const lineDefs: LineDef[] = props.events.map(e => ({ ...e, x: props.scale(e.date) }));\n\n  lineDefs.sort((e1, e2) => +e1.date - +e2.date);\n\n  const fill: string | undefined = props.strokeColor\n    ? getColorFromToken(props.strokeColor, false /*ToDo fix */)\n    : tokens.colorNeutralForeground1;\n\n  const lines = uniqBy(lineDefs, x => x.date.toString()).map((x, i) => (\n    <line key={i} x1={x.x} x2={x.x} y1={lineTopY} y2={props.chartYBottom} stroke={fill} strokeDasharray=\"8\" />\n  ));\n\n  const labelLinks = calculateLabels(lineDefs, textWidth + textPadding, axisRange[1], axisRange[0]).map((x, i) => (\n    <LabelLink\n      key={i}\n      {...{\n        lineDefs,\n        labelDef: x,\n        textY,\n        textWidth,\n        textLineHeight: lineHeight,\n        textFontSize: fontSize,\n        textColor: props.labelColor,\n        mergedLabel: props.mergedLabel,\n      }}\n    />\n  ));\n\n  return (\n    <>\n      {lines}\n      {labelLinks}\n    </>\n  );\n};\n\nfunction calculateLabels(lineDefs: LineDef[], textWidth: number, maxX: number, minX: number): LabelDef[] {\n  const calculateLabel = (lastX: number, currentIdx: number): LabelDef[] => {\n    // base case 1\n    if (currentIdx === lineDefs.length) {\n      return [];\n    }\n\n    const { x } = lineDefs[currentIdx];\n    const leftXBoundary = x - textWidth;\n\n    // cannot render on top of other text\n    if (x < lastX) {\n      return [];\n    }\n\n    // base case 2\n    if (currentIdx === lineDefs.length - 1) {\n      if (lastX < leftXBoundary) {\n        return [{ x: x, anchor: 'end', aggregatedIdx: [currentIdx] }];\n      } else if (x + textWidth < maxX) {\n        return [{ x: x, anchor: 'start', aggregatedIdx: [currentIdx] }];\n      }\n\n      return [];\n    }\n\n    if (lastX < leftXBoundary) {\n      // label on left side\n      return backtrack(currentIdx, 'end');\n    } else {\n      // label on right side\n      return backtrack(currentIdx, 'start');\n    }\n  };\n\n  const backtrack = (currentIdx: number, anchor: 'start' | 'end'): LabelDef[] => {\n    const bd = anchor === 'end' ? lineDefs[currentIdx].x : lineDefs[currentIdx].x + textWidth;\n\n    let idx = findIndex(\n      lineDefs,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ds => ds.x > bd && (ds.x - textWidth >= bd || ds.x + textWidth < maxX),\n      currentIdx + 1,\n    );\n    if (idx === -1) {\n      idx = lineDefs.length;\n    }\n\n    const aggregatedIdx: number[] = [];\n    for (let i = currentIdx; i < idx; i++) {\n      aggregatedIdx.push(i);\n    }\n    const next = calculateLabel(bd, idx);\n\n    next.unshift({ x: lineDefs[currentIdx].x, anchor, aggregatedIdx });\n    return next;\n  };\n\n  return calculateLabel(minX, 0);\n}\n\n/** Get unique items of `arr`, comparing based on the result of calling `iteratee` on each item. */\nfunction uniqBy<T>(arr: T[], iteratee: (x: T) => string): T[] {\n  const seen: string[] = [];\n  const result: T[] = [];\n  for (const x of arr) {\n    const comp = iteratee(x);\n    if (seen.indexOf(comp) === -1) {\n      result.push(x);\n      seen.push(comp);\n    }\n  }\n  return result;\n}\n"],"names":["React","tokens","findIndex","LabelLink","getColorFromToken","EventsAnnotation","props","textWidth","labelWidth","textY","chartYTop","lineTopY","textPadding","lineHeight","fontSize","axisRange","scale","range","lineDefs","events","map","e","x","date","sort","e1","e2","fill","strokeColor","colorNeutralForeground1","lines","uniqBy","toString","i","line","key","x1","x2","y1","y2","chartYBottom","stroke","strokeDasharray","labelLinks","calculateLabels","labelDef","textLineHeight","textFontSize","textColor","labelColor","mergedLabel","maxX","minX","calculateLabel","lastX","currentIdx","length","leftXBoundary","anchor","aggregatedIdx","backtrack","bd","idx","ds","push","next","unshift","arr","iteratee","seen","result","comp","indexOf"],"mappings":"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"}
+{"version":3,"sources":["../src/components/LineChart/eventAnnotation/EventAnnotation.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ScaleTime } from 'd3-scale';\nimport { tokens } from '@fluentui/react-theme';\nimport { findIndex } from '../../../utilities/index';\nimport { LineDef, LabelLink, LabelDef } from './LabelLink';\nimport { EventsAnnotationProps } from '../LineChart.types';\nimport { getColorFromToken } from '../../../utilities/colors';\n\ninterface IEventsAnnotationExtendProps extends EventsAnnotationProps {\n  scale: ScaleTime<number, number>;\n  chartYBottom: number;\n  chartYTop: number;\n}\n\nexport const EventsAnnotation: React.FunctionComponent<IEventsAnnotationExtendProps> = props => {\n  const textWidth = props.labelWidth ? props.labelWidth : 105;\n  const textY = props.chartYTop - 20;\n  const lineTopY = textY + 7;\n  const textPadding = 5;\n  const lineHeight = 18;\n  const fontSize = '10pt';\n  const axisRange = props.scale.range();\n\n  const lineDefs: LineDef[] = props.events.map(e => ({ ...e, x: props.scale(e.date) }));\n\n  lineDefs.sort((e1, e2) => +e1.date - +e2.date);\n\n  const fill: string | undefined = props.strokeColor\n    ? getColorFromToken(props.strokeColor, false /*ToDo fix */)\n    : tokens.colorNeutralForeground1;\n\n  const lines = uniqBy(lineDefs, x => x.date.toString()).map((x, i) => (\n    <line key={i} x1={x.x} x2={x.x} y1={lineTopY} y2={props.chartYBottom} stroke={fill} strokeDasharray=\"8\" />\n  ));\n\n  const labelLinks = calculateLabels(lineDefs, textWidth + textPadding, axisRange[1], axisRange[0]).map((x, i) => (\n    <LabelLink\n      key={i}\n      {...{\n        lineDefs,\n        labelDef: x,\n        textY,\n        textWidth,\n        textLineHeight: lineHeight,\n        textFontSize: fontSize,\n        textColor: props.labelColor,\n        mergedLabel: props.mergedLabel,\n      }}\n    />\n  ));\n\n  return (\n    <>\n      {lines}\n      {labelLinks}\n    </>\n  );\n};\n\nfunction calculateLabels(lineDefs: LineDef[], textWidth: number, maxX: number, minX: number): LabelDef[] {\n  const calculateLabel = (lastX: number, currentIdx: number): LabelDef[] => {\n    // base case 1\n    if (currentIdx === lineDefs.length) {\n      return [];\n    }\n\n    const { x } = lineDefs[currentIdx];\n    const leftXBoundary = x - textWidth;\n\n    // cannot render on top of other text\n    if (x < lastX) {\n      return [];\n    }\n\n    // base case 2\n    if (currentIdx === lineDefs.length - 1) {\n      if (lastX < leftXBoundary) {\n        return [{ x, anchor: 'end', aggregatedIdx: [currentIdx] }];\n      } else if (x + textWidth < maxX) {\n        return [{ x, anchor: 'start', aggregatedIdx: [currentIdx] }];\n      }\n\n      return [];\n    }\n\n    if (lastX < leftXBoundary) {\n      // label on left side\n      return backtrack(currentIdx, 'end');\n    } else {\n      // label on right side\n      return backtrack(currentIdx, 'start');\n    }\n  };\n\n  const backtrack = (currentIdx: number, anchor: 'start' | 'end'): LabelDef[] => {\n    const bd = anchor === 'end' ? lineDefs[currentIdx].x : lineDefs[currentIdx].x + textWidth;\n\n    let idx = findIndex(\n      lineDefs,\n      ds => ds.x > bd && (ds.x - textWidth >= bd || ds.x + textWidth < maxX),\n      currentIdx + 1,\n    );\n    if (idx === -1) {\n      idx = lineDefs.length;\n    }\n\n    const aggregatedIdx: number[] = [];\n    for (let i = currentIdx; i < idx; i++) {\n      aggregatedIdx.push(i);\n    }\n    const next = calculateLabel(bd, idx);\n\n    next.unshift({ x: lineDefs[currentIdx].x, anchor, aggregatedIdx });\n    return next;\n  };\n\n  return calculateLabel(minX, 0);\n}\n\n/** Get unique items of `arr`, comparing based on the result of calling `iteratee` on each item. */\nfunction uniqBy<T>(arr: T[], iteratee: (x: T) => string): T[] {\n  const seen: string[] = [];\n  const result: T[] = [];\n  for (const x of arr) {\n    const comp = iteratee(x);\n    if (seen.indexOf(comp) === -1) {\n      result.push(x);\n      seen.push(comp);\n    }\n  }\n  return result;\n}\n"],"names":["React","tokens","findIndex","LabelLink","getColorFromToken","EventsAnnotation","props","textWidth","labelWidth","textY","chartYTop","lineTopY","textPadding","lineHeight","fontSize","axisRange","scale","range","lineDefs","events","map","e","x","date","sort","e1","e2","fill","strokeColor","colorNeutralForeground1","lines","uniqBy","toString","i","line","key","x1","x2","y1","y2","chartYBottom","stroke","strokeDasharray","labelLinks","calculateLabels","labelDef","textLineHeight","textFontSize","textColor","labelColor","mergedLabel","maxX","minX","calculateLabel","lastX","currentIdx","length","leftXBoundary","anchor","aggregatedIdx","backtrack","bd","idx","ds","push","next","unshift","arr","iteratee","seen","result","comp","indexOf"],"mappings":"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"}

package/lib/components/LineChart/useLineChartStyles.styles.js

@@ -24,7 +24,9 @@ export const linechartClassNames = {
   chartWrapper: 'fui-line__chartWrapper',
   svgTooltip: '',
   chart: '',
-  axisAnnotation: ''
+  axisAnnotation: '',
+  plotContainer: '',
+  annotationLayer: ''
 };
 /**
  * Base Styles
@@ -37,10 +39,11 @@ const useStyles = /*#__PURE__*/__styles({
     Bg96gwp: "f1i3iumi",
     mc9l5x: "f22iagw",
     Beiy3e4: "f1vx9l62",
-    z8tnut: "f17mpqex",
-    z189sj: ["f1vdfbxk", "f1f5gg8d"],
-    Byoj8tv: "fdvome7",
-    uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1bnz8pu",
     qhf8xq: "f1euv43f",
     fsow6f: "f17mccla",
     Bhzewxz: "fr6rvge",
@@ -60,19 +63,21 @@ const useStyles = /*#__PURE__*/__styles({
     Bg96gwp: "f1i3iumi",
     Bkfmm31: "fhuob2q",
     jzqdnp: "fdxigdc",
-    a6j6cd: "folz2wl"
+    Bxms50k: "f1yn2ez9"
   },
   lineBorder: {
     ojy3ng: "f1yuyku4",
-    Bpvj6i6: "fdvt8h6"
+    Bj7tp1g: "f1s33jy0"
   }
 }, {
-  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f17mpqex{padding-top:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdvome7{padding-bottom:var(--spacingHorizontalS);}", ".f1euv43f{position:absolute;}", ".f17mccla{text-align:center;}", ".fr6rvge{top:var(--spacingVerticalNone);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
+  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", [".f1bnz8pu{padding:var(--spacingHorizontalS);}", {
+    p: -1
+  }], ".f1euv43f{position:absolute;}", ".f17mccla{text-align:center;}", ".fr6rvge{top:var(--spacingVerticalNone);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
     p: -1
   }], ".f1aehjj5{pointer-events:none;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}", ".fdxigdc{text-anchor:middle;}", ".f1yuyku4{stroke:var(--colorNeutralBackground1);}"],
-  m: [["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.folz2wl{fill:CanvasText;}}", {
+  m: [["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1yn2ez9{fill:CanvasText;}}", {
     m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
-  }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.fdvt8h6{stroke:Canvas;}}", {
+  }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1s33jy0{stroke:Canvas;}}", {
     m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
   }]]
 });

package/lib/components/LineChart/useLineChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","HighContrastSelector","getMarkerLabelStyle","getTooltipStyle","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","Bkfmm31","jzqdnp","a6j6cd","ojy3ng","Bpvj6i6","d","p","m","useLineChartStyles","props","baseStyles"],"sources":["useLineChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\nimport { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';\n/**\n * @internal\n */ export const linechartClassNames = {\n    tooltip: 'fui-line__tooltip',\n    lineBorder: 'fui-line_lineBorder',\n    markerLabel: 'fui-line__markerLabel',\n    root: 'fui-line__root',\n    xAxis: 'fui-line__xAxis',\n    yAxis: 'fui-line__yAxis',\n    legendContainer: 'fui-line__legendContainer',\n    hover: 'fui-line__hover',\n    descriptionMessage: 'fui-line__descriptionMessage',\n    axisTitle: 'fui-line__axisTitle',\n    chartTitle: 'fui-line__chartTitle',\n    opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n    shapeStyles: 'fui-line__shapeStyles',\n    chartWrapper: 'fui-line__chartWrapper',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    tooltip: getTooltipStyle(),\n    markerLabel: getMarkerLabelStyle(),\n    lineBorder: {\n        stroke: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            stroke: 'Canvas'\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useLineChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ ),\n        markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/ )\n    };\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,uBAAuB;AAC5E;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnCC,OAAO,EAAE,mBAAmB;EAC5BC,UAAU,EAAE,qBAAqB;EACjCC,WAAW,EAAE,uBAAuB;EACpCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,iBAAiB;EACxBC,KAAK,EAAE,iBAAiB;EACxBC,eAAe,EAAE,2BAA2B;EAC5CC,KAAK,EAAE,iBAAiB;EACxBC,kBAAkB,EAAE,8BAA8B;EAClDC,SAAS,EAAE,qBAAqB;EAChCC,UAAU,EAAE,sBAAsB;EAClCC,oBAAoB,EAAE,gCAAgC;EACtDC,WAAW,EAAE,uBAAuB;EACpCC,YAAY,EAAE,wBAAwB;EACtCC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE;AACpB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGxB,QAAA;EAAAO,OAAA;IAAAkB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAApC,WAAA;IAAAgB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAkB,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAxC,UAAA;IAAAyC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CASrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,UAAU,GAAGhC,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHjB,OAAO,EAAEN,YAAY,CAACK,mBAAmB,CAACC,OAAO,EAAEiD,UAAU,CAACjD,OAAO,CAAC,yBAA0B,CAAC;IACjGC,UAAU,EAAEP,YAAY,CAACK,mBAAmB,CAACE,UAAU,EAAEgD,UAAU,CAAChD,UAAU,CAAC,4BAA6B,CAAC;IAC7GC,WAAW,EAAER,YAAY,CAACK,mBAAmB,CAACG,WAAW,EAAE+C,UAAU,CAAC/C,WAAW,CAAC,6BAA8B;EACpH,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","HighContrastSelector","getMarkerLabelStyle","getTooltipStyle","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","plotContainer","annotationLayer","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","Bkfmm31","jzqdnp","Bxms50k","ojy3ng","Bj7tp1g","d","p","m","useLineChartStyles","props","baseStyles"],"sources":["useLineChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\nimport { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';\n/**\n * @internal\n */ export const linechartClassNames = {\n    tooltip: 'fui-line__tooltip',\n    lineBorder: 'fui-line_lineBorder',\n    markerLabel: 'fui-line__markerLabel',\n    root: 'fui-line__root',\n    xAxis: 'fui-line__xAxis',\n    yAxis: 'fui-line__yAxis',\n    legendContainer: 'fui-line__legendContainer',\n    hover: 'fui-line__hover',\n    descriptionMessage: 'fui-line__descriptionMessage',\n    axisTitle: 'fui-line__axisTitle',\n    chartTitle: 'fui-line__chartTitle',\n    opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n    shapeStyles: 'fui-line__shapeStyles',\n    chartWrapper: 'fui-line__chartWrapper',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: '',\n    plotContainer: '',\n    annotationLayer: ''\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    tooltip: getTooltipStyle(),\n    markerLabel: getMarkerLabelStyle(),\n    lineBorder: {\n        stroke: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            stroke: 'Canvas'\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useLineChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ ),\n        markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/ )\n    };\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,uBAAuB;AAC5E;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnCC,OAAO,EAAE,mBAAmB;EAC5BC,UAAU,EAAE,qBAAqB;EACjCC,WAAW,EAAE,uBAAuB;EACpCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,iBAAiB;EACxBC,KAAK,EAAE,iBAAiB;EACxBC,eAAe,EAAE,2BAA2B;EAC5CC,KAAK,EAAE,iBAAiB;EACxBC,kBAAkB,EAAE,8BAA8B;EAClDC,SAAS,EAAE,qBAAqB;EAChCC,UAAU,EAAE,sBAAsB;EAClCC,oBAAoB,EAAE,gCAAgC;EACtDC,WAAW,EAAE,uBAAuB;EACpCC,YAAY,EAAE,wBAAwB;EACtCC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE,EAAE;EAClBC,aAAa,EAAE,EAAE;EACjBC,eAAe,EAAE;AACrB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAG1B,QAAA;EAAAO,OAAA;IAAAoB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAvC,WAAA;IAAAkB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAmB,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA3C,UAAA;IAAA4C,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CASrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,UAAU,GAAGjC,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHnB,OAAO,EAAEN,YAAY,CAACK,mBAAmB,CAACC,OAAO,EAAEoD,UAAU,CAACpD,OAAO,CAAC,yBAA0B,CAAC;IACjGC,UAAU,EAAEP,YAAY,CAACK,mBAAmB,CAACE,UAAU,EAAEmD,UAAU,CAACnD,UAAU,CAAC,4BAA6B,CAAC;IAC7GC,WAAW,EAAER,YAAY,CAACK,mBAAmB,CAACG,WAAW,EAAEkD,UAAU,CAAClD,WAAW,CAAC,6BAA8B;EACpH,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/LineChart/useLineChartStyles.styles.raw.js

@@ -22,7 +22,9 @@ import { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';
     chartWrapper: 'fui-line__chartWrapper',
     svgTooltip: '',
     chart: '',
-    axisAnnotation: ''
+    axisAnnotation: '',
+    plotContainer: '',
+    annotationLayer: ''
 };
 /**
  * Base Styles

package/lib/components/LineChart/useLineChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/LineChart/useLineChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { LineChartProps, LineChartStyles } from './LineChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { HighContrastSelector } from '../../utilities/index';\nimport { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const linechartClassNames: SlotClassNames<LineChartStyles> = {\n  tooltip: 'fui-line__tooltip',\n  lineBorder: 'fui-line_lineBorder',\n  markerLabel: 'fui-line__markerLabel',\n  root: 'fui-line__root',\n  xAxis: 'fui-line__xAxis',\n  yAxis: 'fui-line__yAxis',\n  legendContainer: 'fui-line__legendContainer',\n  hover: 'fui-line__hover',\n  descriptionMessage: 'fui-line__descriptionMessage',\n  axisTitle: 'fui-line__axisTitle',\n  chartTitle: 'fui-line__chartTitle',\n  opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n  shapeStyles: 'fui-line__shapeStyles',\n  chartWrapper: 'fui-line__chartWrapper',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  tooltip: getTooltipStyle() as GriffelStyle,\n  markerLabel: getMarkerLabelStyle() as GriffelStyle,\n  lineBorder: {\n    stroke: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      stroke: 'Canvas',\n    },\n  },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useLineChartStyles = (props: LineChartProps): LineChartStyles => {\n  const baseStyles = useStyles();\n  return {\n    tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/),\n    markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","HighContrastSelector","getMarkerLabelStyle","getTooltipStyle","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","stroke","colorNeutralBackground1","useLineChartStyles","props","baseStyles"],"mappings":"AAAA;AAEA,SAAuBA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AACxE,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,wBAAwB;AAE7E;;CAEC,GACD,OAAO,MAAMC,sBAAuD;IAClEC,SAAS;IACTC,YAAY;IACZC,aAAa;IACbC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYxB,WAAW;IAC3BO,SAASF;IACTI,aAAaL;IACbI,YAAY;QACViB,QAAQvB,OAAOwB,uBAAuB;QACtC,CAACvB,qBAAqB,EAAE;YACtBsB,QAAQ;QACV;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,qBAAqB,CAACC;IACjC,MAAMC,aAAaL;IACnB,OAAO;QACLjB,SAASN,aAAaK,oBAAoBC,OAAO,EAAEsB,WAAWtB,OAAO,CAAC,uBAAuB;QAC7FC,YAAYP,aAAaK,oBAAoBE,UAAU,EAAEqB,WAAWrB,UAAU,CAAC,0BAA0B;QACzGC,aAAaR,aAAaK,oBAAoBG,WAAW,EAAEoB,WAAWpB,WAAW,CAAC,2BAA2B;IAC/G;AACF,EAAE"}
+{"version":3,"sources":["../src/components/LineChart/useLineChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { LineChartProps, LineChartStyles } from './LineChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { HighContrastSelector } from '../../utilities/index';\nimport { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const linechartClassNames: SlotClassNames<LineChartStyles> = {\n  tooltip: 'fui-line__tooltip',\n  lineBorder: 'fui-line_lineBorder',\n  markerLabel: 'fui-line__markerLabel',\n  root: 'fui-line__root',\n  xAxis: 'fui-line__xAxis',\n  yAxis: 'fui-line__yAxis',\n  legendContainer: 'fui-line__legendContainer',\n  hover: 'fui-line__hover',\n  descriptionMessage: 'fui-line__descriptionMessage',\n  axisTitle: 'fui-line__axisTitle',\n  chartTitle: 'fui-line__chartTitle',\n  opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n  shapeStyles: 'fui-line__shapeStyles',\n  chartWrapper: 'fui-line__chartWrapper',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n  plotContainer: '',\n  annotationLayer: '',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  tooltip: getTooltipStyle() as GriffelStyle,\n  markerLabel: getMarkerLabelStyle() as GriffelStyle,\n  lineBorder: {\n    stroke: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      stroke: 'Canvas',\n    },\n  },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useLineChartStyles = (props: LineChartProps): LineChartStyles => {\n  const baseStyles = useStyles();\n  return {\n    tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/),\n    markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","HighContrastSelector","getMarkerLabelStyle","getTooltipStyle","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","plotContainer","annotationLayer","useStyles","stroke","colorNeutralBackground1","useLineChartStyles","props","baseStyles"],"mappings":"AAAA;AAEA,SAAuBA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AACxE,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,wBAAwB;AAE7E;;CAEC,GACD,OAAO,MAAMC,sBAAuD;IAClEC,SAAS;IACTC,YAAY;IACZC,aAAa;IACbC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;IAChBC,eAAe;IACfC,iBAAiB;AACnB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAY1B,WAAW;IAC3BO,SAASF;IACTI,aAAaL;IACbI,YAAY;QACVmB,QAAQzB,OAAO0B,uBAAuB;QACtC,CAACzB,qBAAqB,EAAE;YACtBwB,QAAQ;QACV;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,qBAAqB,CAACC;IACjC,MAAMC,aAAaL;IACnB,OAAO;QACLnB,SAASN,aAAaK,oBAAoBC,OAAO,EAAEwB,WAAWxB,OAAO,CAAC,uBAAuB;QAC7FC,YAAYP,aAAaK,oBAAoBE,UAAU,EAAEuB,WAAWvB,UAAU,CAAC,0BAA0B;QACzGC,aAAaR,aAAaK,oBAAoBG,WAAW,EAAEsB,WAAWtB,WAAW,CAAC,2BAA2B;IAC/G;AACF,EAAE"}

package/lib/components/SankeyChart/SankeyChart.js

@@ -11,7 +11,7 @@ import { useSankeyChartStyles } from './useSankeyChartStyles.styles';
 import { ChartPopover } from '../CommonComponents/index';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { format } from '../../utilities/string';
-import { toImage } from '../../utilities/image-export-utils';
+import { useImageExport } from '../../utilities/hooks';
 const PADDING_PERCENTAGE = 0.3;
 const NON_SELECTED_NODE_AND_STREAM_COLOR = '#757575';
 const DEFAULT_NODE_COLORS = [
@@ -430,7 +430,7 @@ function nodeTextColor(state, singleNode) {
 export const SankeyChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     var _props_reflowProps;
     const classes = useSankeyChartStyles(props);
-    const chartContainer = React.useRef(null);
+    const { chartContainerRef: chartContainer } = useImageExport(props.componentRef, true, false);
     const _reqID = React.useRef(undefined);
     const _linkId = useId('link');
     const _chartId = useId('sankeyChart');
@@ -467,12 +467,6 @@ export const SankeyChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=
         x: 0,
         y: 0
     });
-    React.useImperativeHandle(props.componentRef, ()=>({
-            chartContainer: chartContainer.current,
-            toImage: (opts)=>{
-                return toImage(chartContainer.current, undefined, _isRtl, opts);
-            }
-        }), []);
     const _fitParentContainer = React.useCallback(()=>{
         _reqID.current = _window === null || _window === void 0 ? void 0 : _window.requestAnimationFrame(()=>{
             // NOTE: Calls to this method trigger a re-render.
@@ -801,7 +795,7 @@ export const SankeyChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=
     };
     const _fillStreamColors = (singleLink, gradientUrl)=>{
         if (selectedState && selectedLinks.has(singleLink.index)) {
-            return selectedNode ? selectedNode.color : gradientUrl;
+            return singleLink ? singleLink.color : selectedNode ? selectedNode.color : gradientUrl;
         }
     };
     const _fillStreamBorder = (singleLink, gradientUrl)=>{