@fluentui/react-charts 0.0.0-nightly-20250826-2140.1 → 0.0.0-nightly-20250827-0407.1

package/lib-commonjs/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/**\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,GAyIvD;;CAEC,GACD,WAGC"}
+{"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"}

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

@@ -40,6 +40,10 @@ const linechartClassNames = {
  * Base Styles
  */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     tooltip: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi",
         mc9l5x: "f22iagw",
         Beiy3e4: "f1vx9l62",
         z8tnut: "f17mpqex",
@@ -55,24 +59,34 @@ const linechartClassNames = {
         qhf8xq: "f1euv43f",
         fsow6f: "f17mccla",
         Bhzewxz: "fr6rvge",
-        Bkfmm31: "f5q6cfr",
+        De3pzq: "fxugw4r",
         Beyfa6y: 0,
         Bbmb7ep: 0,
         Btl43ni: 0,
         B7oj6ja: 0,
         Dimara: "fq9zq91",
-        Bkecrkj: "f1aehjj5"
+        Bkecrkj: "f1aehjj5",
+        sj55zd: "f19n0e5"
+    },
+    markerLabel: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi",
+        Bkfmm31: "fhuob2q",
+        jzqdnp: "fdxigdc",
+        a6j6cd: "folz2wl"
     },
     lineBorder: {
         ojy3ng: "f1yuyku4",
         Bpvj6i6: "fdvt8h6"
-    },
-    markerLabel: {
-        Bkfmm31: "fhuob2q",
-        jzqdnp: "fdxigdc"
     }
 }, {
     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);}",
@@ -82,7 +96,7 @@ const linechartClassNames = {
         ".f1euv43f{position:absolute;}",
         ".f17mccla{text-align:center;}",
         ".fr6rvge{top:var(--spacingVerticalNone);}",
-        ".f5q6cfr{fill:var(--colorNeutralBackground1);}",
+        ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
         [
             ".fq9zq91{border-radius:var(--borderRadiusSmall);}",
             {
@@ -90,11 +104,18 @@ const linechartClassNames = {
             }
         ],
         ".f1aehjj5{pointer-events:none;}",
-        ".f1yuyku4{stroke:var(--colorNeutralBackground1);}",
+        ".f19n0e5{color:var(--colorNeutralForeground1);}",
         ".fhuob2q{fill:var(--colorNeutralForeground1);}",
-        ".fdxigdc{text-anchor:middle;}"
+        ".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: "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;}}",
             {

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

@@ -1 +1 @@
-{"version":3,"sources":["useLineChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { HighContrastSelector } 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: {\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        position: 'absolute',\n        textAlign: 'center',\n        top: tokens.spacingVerticalNone,\n        fill: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusSmall,\n        pointerEvents: 'none'\n    },\n    lineBorder: {\n        stroke: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            stroke: 'Canvas'\n        }\n    },\n    markerLabel: {\n        fill: tokens.colorNeutralForeground1,\n        textAnchor: 'middle',\n        selectors: {\n            [HighContrastSelector]: {\n                fill: 'CanvasText'\n            }\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"],"names":["__styles","mergeClasses","shorthands","tokens","HighContrastSelector","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","ojy3ng","Bpvj6i6","jzqdnp","d","p","m","useLineChartStyles","props","baseStyles"],"mappings":";;;;;;;;;;;IAKiBK,mBAAmB;;;sBAmDD;eAAlByC;;;uBAxDoC,gBAAgB;AAK1D,4BAA4B;IACnCxC,OAAO,EAAE,mBAAmB;IAC5BC,UAAU,EAAE,qBAAqB;IACjCC,WAAW,EAAE,uBAAuB;IACpCC,IAAI,EAAE,gBAAgB;IACtBC,KAAK,EAAE,iBAAiB;IACxBC,KAAK,EAAE,iBAAiB;IACxBC,eAAe,EAAE,2BAA2B;IAC5CC,KAAK,EAAE,iBAAiB;IACxBC,kBAAkB,EAAE,8BAA8B;IAClDC,SAAS,EAAE,qBAAqB;IAChCC,UAAU,EAAE,sBAAsB;IAClCC,oBAAoB,EAAE,gCAAgC;IACtDC,WAAW,EAAE,uBAAuB;IACpCC,YAAY,EAAE,wBAAwB;IACtCC,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE,EAAE;IACTC,cAAc,EAAE;AACpB,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGvB,eAAA,EAAA;IAAAM,OAAA,EAAA;QAAAkB,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAhC,UAAA,EAAA;QAAAiC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAjC,WAAA,EAAA;QAAAyB,OAAA,EAAA;QAAAS,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CA2BrB,CAAC;AAGS,4BAA4BE,KAAK,IAAG;IAC3C,MAAMC,UAAU,GAAGzB,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHjB,OAAO,MAAEL,mBAAY,EAACI,mBAAmB,CAACC,OAAO,EAAE0C,UAAU,CAAC1C,OAAO,CAAC,uBAAA,EAA0B,CAAC;QACjGC,UAAU,MAAEN,mBAAY,EAACI,mBAAmB,CAACE,UAAU,EAAEyC,UAAU,CAACzC,UAAU,CAAC,0BAAA,EAA6B,CAAC;QAC7GC,WAAW,MAAEP,mBAAY,EAACI,mBAAmB,CAACG,WAAW,EAAEwC,UAAU,CAACxC,WAAW,CAAC,2BAAA,EAA8B;IACpH,CAAC;AACL,CAAC"}
+{"version":3,"sources":["useLineChartStyles.styles.js"],"sourcesContent":["import { 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"],"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"],"mappings":";;;;;;;;;;;IAMiBM,mBAAmB;;;IAiCnBgD,kBAAkB;;;;uBAvCM,gBAAgB;AAM9C,4BAA4B;IACnC/C,OAAO,EAAE,mBAAmB;IAC5BC,UAAU,EAAE,qBAAqB;IACjCC,WAAW,EAAE,uBAAuB;IACpCC,IAAI,EAAE,gBAAgB;IACtBC,KAAK,EAAE,iBAAiB;IACxBC,KAAK,EAAE,iBAAiB;IACxBC,eAAe,EAAE,2BAA2B;IAC5CC,KAAK,EAAE,iBAAiB;IACxBC,kBAAkB,EAAE,8BAA8B;IAClDC,SAAS,EAAE,qBAAqB;IAChCC,UAAU,EAAE,sBAAsB;IAClCC,oBAAoB,EAAE,gCAAgC;IACtDC,WAAW,EAAE,uBAAuB;IACpCC,YAAY,EAAE,wBAAwB;IACtCC,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE,EAAE;IACTC,cAAc,EAAE;AACpB,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGxB,eAAA,EAAA;IAAAO,OAAA,EAAA;QAAAkB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAApC,WAAA,EAAA;QAAAgB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAkB,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAxC,UAAA,EAAA;QAAAyC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CASrB,CAAC;AAGS,4BAA4BE,KAAK,IAAG;IAC3C,MAAMC,UAAU,GAAGhC,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHjB,OAAO,MAAEN,mBAAY,EAACK,mBAAmB,CAACC,OAAO,EAAEiD,UAAU,CAACjD,OAAO,CAAC,uBAAA,EAA0B,CAAC;QACjGC,UAAU,MAAEP,mBAAY,EAACK,mBAAmB,CAACE,UAAU,EAAEgD,UAAU,CAAChD,UAAU,CAAC,0BAAA,EAA6B,CAAC;QAC7GC,WAAW,MAAER,mBAAY,EAACK,mBAAmB,CAACG,WAAW,EAAE+C,UAAU,CAAC/C,WAAW,CAAC,2BAAA,EAA8B;IACpH,CAAC;AACL,CAAC"}

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

@@ -41,31 +41,13 @@ const linechartClassNames = {
 /**
  * Base Styles
  */ const useStyles = (0, _react.makeStyles)({
-    tooltip: {
-        display: 'flex',
-        flexDirection: 'column',
-        ..._react.shorthands.padding(_reacttheme.tokens.spacingHorizontalS),
-        position: 'absolute',
-        textAlign: 'center',
-        top: _reacttheme.tokens.spacingVerticalNone,
-        fill: _reacttheme.tokens.colorNeutralBackground1,
-        borderRadius: _reacttheme.tokens.borderRadiusSmall,
-        pointerEvents: 'none'
-    },
+    tooltip: (0, _index.getTooltipStyle)(),
+    markerLabel: (0, _index.getMarkerLabelStyle)(),
     lineBorder: {
         stroke: _reacttheme.tokens.colorNeutralBackground1,
         [_index.HighContrastSelector]: {
             stroke: 'Canvas'
         }
-    },
-    markerLabel: {
-        fill: _reacttheme.tokens.colorNeutralForeground1,
-        textAnchor: 'middle',
-        selectors: {
-            [_index.HighContrastSelector]: {
-                fill: 'CanvasText'
-            }
-        }
     }
 });
 const useLineChartStyles = (props)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/LineChart/useLineChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } 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';\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: {\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    position: 'absolute',\n    textAlign: 'center',\n    top: tokens.spacingVerticalNone,\n    fill: tokens.colorNeutralBackground1,\n    borderRadius: tokens.borderRadiusSmall,\n    pointerEvents: 'none',\n  },\n  lineBorder: {\n    stroke: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      stroke: 'Canvas',\n    },\n  },\n  markerLabel: {\n    fill: tokens.colorNeutralForeground1,\n    textAnchor: 'middle',\n    selectors: {\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\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","shorthands","tokens","HighContrastSelector","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","fill","colorNeutralBackground1","borderRadius","borderRadiusSmall","pointerEvents","stroke","colorNeutralForeground1","textAnchor","selectors","useLineChartStyles","props","baseStyles"],"mappings":";;;;;;;;;;;IASaK,mBAAAA;;;sBAuDAoC;;;;uBAhEwC,iBAAiB;4BAC/C,wBAAwB;uBAGV,wBAAwB;AAKtD,4BAA6D;IAClEnC,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,YAAYvB,qBAAAA,EAAW;IAC3BM,SAAS;QACPkB,SAAS;QACTC,eAAe;QACf,GAAGvB,iBAAAA,CAAWwB,OAAO,CAACvB,kBAAAA,CAAOwB,kBAAkB,CAAC;QAChDC,UAAU;QACVC,WAAW;QACXC,KAAK3B,kBAAAA,CAAO4B,mBAAmB;QAC/BC,MAAM7B,kBAAAA,CAAO8B,uBAAuB;QACpCC,cAAc/B,kBAAAA,CAAOgC,iBAAiB;QACtCC,eAAe;IACjB;IACA7B,YAAY;QACV8B,QAAQlC,kBAAAA,CAAO8B,uBAAuB;QACtC,CAAC7B,2BAAAA,CAAqB,EAAE;YACtBiC,QAAQ;QACV;IACF;IACA7B,aAAa;QACXwB,MAAM7B,kBAAAA,CAAOmC,uBAAuB;QACpCC,YAAY;QACZC,WAAW;YACT,CAACpC,2BAAAA,CAAqB,EAAE;gBACtB4B,MAAM;YACR;QACF;IACF;AACF;AAKO,MAAMS,qBAAqB,CAACC;IACjC,MAAMC,aAAapB;IACnB,OAAO;QACLjB,aAASL,mBAAAA,EAAaI,oBAAoBC,OAAO,EAAEqC,WAAWrC,OAAO,CAAC,uBAAuB;QAC7FC,gBAAYN,mBAAAA,EAAaI,oBAAoBE,UAAU,EAAEoC,WAAWpC,UAAU,CAAC,0BAA0B;QACzGC,iBAAaP,mBAAAA,EAAaI,oBAAoBG,WAAW,EAAEmC,WAAWnC,WAAW,CAAC,2BAA2B;IAC/G;AACF,EAAE"}
+{"version":3,"sources":["../src/components/LineChart/useLineChartStyles.styles.ts"],"sourcesContent":["import { 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":";;;;;;;;;;;IAUaM,mBAAAA;;;sBAqCAqB;eAAAA;;;uBA/C0C,iBAAiB;4BACjD,wBAAwB;uBAGV,wBAAwB;AAMtD,4BAA6D;IAClEpB,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,gBAAYxB,iBAAAA,EAAW;IAC3BO,aAASF,sBAAAA;IACTI,iBAAaL,0BAAAA;IACbI,YAAY;QACViB,QAAQvB,kBAAAA,CAAOwB,uBAAuB;QACtC,CAACvB,2BAAAA,CAAqB,EAAE;YACtBsB,QAAQ;QACV;IACF;AACF;AAKO,2BAA2B,CAACG;IACjC,MAAMC,aAAaL;IACnB,OAAO;QACLjB,aAASN,mBAAAA,EAAaK,oBAAoBC,OAAO,EAAEsB,WAAWtB,OAAO,CAAC,uBAAuB;QAC7FC,gBAAYP,mBAAAA,EAAaK,oBAAoBE,UAAU,EAAEqB,WAAWrB,UAAU,CAAC,0BAA0B;QACzGC,iBAAaR,mBAAAA,EAAaK,oBAAoBG,WAAW,EAAEoB,WAAWpB,WAAW,CAAC,2BAA2B;IAC/G;AACF,EAAE"}

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

@@ -56,31 +56,27 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         Bg96gwp: "f1i3iumi",
         mc9l5x: "f22iagw",
         Beiy3e4: "f1vx9l62",
-        Byoj8tv: 0,
-        uwmqm3: 0,
-        z189sj: 0,
-        z8tnut: 0,
-        B0ocmuz: "f1t756mo",
+        z8tnut: "f17mpqex",
+        z189sj: [
+            "f1vdfbxk",
+            "f1f5gg8d"
+        ],
+        Byoj8tv: "fdvome7",
+        uwmqm3: [
+            "f1f5gg8d",
+            "f1vdfbxk"
+        ],
         qhf8xq: "f1euv43f",
         fsow6f: "f17mccla",
-        Bhzewxz: "f113wtx2",
-        Bgh53k4: 0,
-        B2eet1l: 0,
-        De3pzq: 0,
-        Bcmaq0h: 0,
-        gk0gix: 0,
-        B20660r: 0,
-        B8a6bjv: 0,
-        Bpptf2m: 0,
-        e5kdtc: 0,
-        Bkjc3bi: 0,
-        ayd6f0: "fcm7iae",
+        Bhzewxz: "fr6rvge",
+        De3pzq: "fxugw4r",
         Beyfa6y: 0,
         Bbmb7ep: 0,
         Btl43ni: 0,
         B7oj6ja: 0,
-        Dimara: "fl4tsp0",
-        Bkecrkj: "f1aehjj5"
+        Dimara: "fq9zq91",
+        Bkecrkj: "f1aehjj5",
+        sj55zd: "f19n0e5"
     },
     nodeTextContainer: {
         B3gqxw3: "fk6oafs",
@@ -122,28 +118,22 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".f5q6cfr{fill:var(--colorNeutralBackground1);}",
         ".fu2q8de{stroke-width:3px;}",
         ".f1yc5x8p{fill:#F5F5F5;}",
-        [
-            ".f1t756mo{padding:8px;}",
-            {
-                p: -1
-            }
-        ],
+        ".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;}",
-        ".f113wtx2{top:0px;}",
-        [
-            ".fcm7iae{background:var(--colorNeutralBackground1);}",
-            {
-                p: -2
-            }
-        ],
+        ".fr6rvge{top:var(--spacingVerticalNone);}",
+        ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
         [
-            ".fl4tsp0{border-radius:2px;}",
+            ".fq9zq91{border-radius:var(--borderRadiusSmall);}",
             {
                 p: -1
             }
         ],
         ".f1aehjj5{pointer-events:none;}",
+        ".f19n0e5{color:var(--colorNeutralForeground1);}",
         ".fvjh0tl{margin-top:4px;}",
         ".ff9s3yw{margin-left:8px;}",
         ".f1phki43{margin-right:8px;}",

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

@@ -1 +1 @@
-{"version":3,"sources":["useSankeyChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\nexport const sankeyChartClassNames = {\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    },\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: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        padding: '8px',\n        position: 'absolute',\n        textAlign: 'center',\n        top: '0px',\n        background: tokens.colorNeutralBackground1,\n        borderRadius: '2px',\n        pointerEvents: 'none'\n    },\n    nodeTextContainer: {\n        '& text': {\n            [HighContrastSelector]: {\n                fill: 'CanvasText'\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});\nexport const useSankeyChartStyles = (props)=>{\n    var _props_styles, _props_reflowProps, _props_styles1, _props_styles2;\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(sankeyChartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _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(sankeyChartClassNames.nodeTextContainer, baseStyles.nodeTextContainer /*, props.styles?.nodeTextContainer*/ ),\n        toolTip: mergeClasses(sankeyChartClassNames.toolTip, baseStyles.toolTip /*, props.styles?.toolTip*/ ),\n        chartWrapper: 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),\n        chart: mergeClasses(sankeyChartClassNames.chart, baseStyles.chart, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.chart)\n    };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","sankeyChartClassNames","root","nodes","links","nodeTextContainer","toolTip","chartWrapper","chart","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","Bkfmm31","Be5yapy","a6j6cd","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","fsow6f","Bhzewxz","Bgh53k4","B2eet1l","De3pzq","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","B3gqxw3","B6of3ja","Frg6f3","jrapky","t21cq0","d","p","m","useSankeyChartStyles","props","_props_styles","_props_reflowProps","_props_styles1","_props_styles2","baseStyles","styles","reflowProps","mode"],"mappings":";;;;;;;;;;;IAGaK,qBAAqB;;;wBA6DD;eAApBwD;;;uBAhE4B,gBAAgB;AAGlD,8BAA8B;IACjCvD,IAAI,EAAE,cAAc;IACpBC,KAAK,EAAE,eAAe;IACtBC,KAAK,EAAE,eAAe;IACtBC,iBAAiB,EAAE,2BAA2B;IAC9CC,OAAO,EAAE,iBAAiB;IAC1BC,YAAY,EAAE,sBAAsB;IACpCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGb,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAQ,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAhB,KAAA,EAAA;QAAAiB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAApB,KAAA,EAAA;QAAAkB,OAAA,EAAA;QAAAE,MAAA,EAAA;IAAA;IAAAjB,OAAA,EAAA;QAAAI,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAG,OAAA,EAAA;QAAAO,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAA3C,iBAAA,EAAA;QAAA4C,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAA9C,YAAA,EAAA;QAAAW,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAZ,KAAA,EAAA;QAAAM,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAwC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAmDjB,CAAC;AACK,8BAA8BE,KAAK,IAAG;IACzC,IAAIC,aAAa,EAAEC,kBAAkB,EAAEC,cAAc,EAAEC,cAAc;IACrE,MAAMC,UAAU,GAAGtD,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHP,IAAI,MAAEL,mBAAY,EAACI,qBAAqB,CAACC,IAAI,EAAE6D,UAAU,CAAC7D,IAAI,EAAE,CAACyD,aAAa,GAAGD,KAAK,CAACM,MAAAA,AAAM,MAAM,IAAI,IAAIL,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACzD,IAAI,CAAC;QAClKC,KAAK,MAAEN,mBAAY,EAACI,qBAAqB,CAACE,KAAK,EAAE4D,UAAU,CAAC5D,KAAK,CAAC,uBAAA,EAA0B,CAAC;QAC7FC,KAAK,MAAEP,mBAAY,EAACI,qBAAqB,CAACG,KAAK,EAAE2D,UAAU,CAAC3D,KAAK,CAAC,uBAAA,EAA0B,CAAC;QAC7FC,iBAAiB,MAAER,mBAAY,EAACI,qBAAqB,CAACI,iBAAiB,EAAE0D,UAAU,CAAC1D,iBAAiB,CAAC,mCAAA,EAAsC,CAAC;QAC7IC,OAAO,EAAET,uBAAY,EAACI,qBAAqB,CAACK,OAAO,EAAEyD,UAAU,CAACzD,OAAO,CAAC,yBAAA,EAA4B,CAAC;QACrGC,YAAY,MAAEV,mBAAY,EAACI,qBAAqB,CAACM,YAAY,EAAE,AAAC,EAACqD,kBAAkB,GAAGF,KAAK,CAACO,WAAAA,AAAW,MAAM,IAAI,IAAIL,kBAAkB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,kBAAkB,CAACM,IAAAA,AAAI,MAAM,WAAW,GAAGH,UAAU,CAACxD,YAAY,GAAG,EAAE,EAAE,CAACsD,cAAc,GAAGH,KAAK,CAACM,MAAAA,AAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACtD,YAAY,CAAC;QACpVC,KAAK,MAAEX,mBAAY,EAACI,qBAAqB,CAACO,KAAK,EAAEuD,UAAU,CAACvD,KAAK,EAAE,CAACsD,cAAc,GAAGJ,KAAK,CAACM,MAAAA,AAAM,MAAM,IAAI,IAAIF,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACtD,KAAK;IAC5K,CAAC;AACL,CAAC"}
+{"version":3,"sources":["useSankeyChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\nimport { getTooltipStyle } from '../../utilities/index';\nexport const sankeyChartClassNames = {\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    },\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(),\n    nodeTextContainer: {\n        '& text': {\n            [HighContrastSelector]: {\n                fill: 'CanvasText'\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});\nexport const useSankeyChartStyles = (props)=>{\n    var _props_styles, _props_reflowProps, _props_styles1, _props_styles2;\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(sankeyChartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _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(sankeyChartClassNames.nodeTextContainer, baseStyles.nodeTextContainer /*, props.styles?.nodeTextContainer*/ ),\n        toolTip: mergeClasses(sankeyChartClassNames.toolTip, baseStyles.toolTip /*, props.styles?.toolTip*/ ),\n        chartWrapper: 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),\n        chart: mergeClasses(sankeyChartClassNames.chart, baseStyles.chart, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.chart)\n    };\n};\n"],"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","getTooltipStyle","sankeyChartClassNames","root","nodes","links","nodeTextContainer","toolTip","chartWrapper","chart","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","Bkfmm31","Be5yapy","a6j6cd","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","B3gqxw3","B6of3ja","Frg6f3","jrapky","t21cq0","d","p","m","useSankeyChartStyles","props","_props_styles","_props_reflowProps","_props_styles1","_props_styles2","baseStyles","styles","reflowProps","mode"],"mappings":";;;;;;;;;;;IAIaM,qBAAqB;;;wBAkDD;eAApB8C;;;uBAtD4B,gBAAgB;AAIlD,8BAA8B;IACjC7C,IAAI,EAAE,cAAc;IACpBC,KAAK,EAAE,eAAe;IACtBC,KAAK,EAAE,eAAe;IACtBC,iBAAiB,EAAE,2BAA2B;IAC9CC,OAAO,EAAE,iBAAiB;IAC1BC,YAAY,EAAE,sBAAsB;IACpCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGd,eAAA,EAAA;IAAAO,IAAA,EAAA;QAAAQ,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAhB,KAAA,EAAA;QAAAiB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAApB,KAAA,EAAA;QAAAkB,OAAA,EAAA;QAAAE,MAAA,EAAA;IAAA;IAAAjB,OAAA,EAAA;QAAAI,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAG,OAAA,EAAA;QAAAO,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAjC,iBAAA,EAAA;QAAAkC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAApC,YAAA,EAAA;QAAAW,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAZ,KAAA,EAAA;QAAAM,MAAA,EAAA;IAAA;AAAA,GAAA;IAAA8B,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAwCjB,CAAC;AACK,8BAA8BE,KAAK,IAAG;IACzC,IAAIC,aAAa,EAAEC,kBAAkB,EAAEC,cAAc,EAAEC,cAAc;IACrE,MAAMC,UAAU,GAAG5C,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHP,IAAI,EAAEN,uBAAY,EAACK,qBAAqB,CAACC,IAAI,EAAEmD,UAAU,CAACnD,IAAI,EAAE,CAAC+C,aAAa,GAAGD,KAAK,CAACM,MAAAA,AAAM,MAAM,IAAI,IAAIL,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAAC/C,IAAI,CAAC;QAClKC,KAAK,EAAEP,uBAAY,EAACK,qBAAqB,CAACE,KAAK,EAAEkD,UAAU,CAAClD,KAAK,CAAC,uBAAA,EAA0B,CAAC;QAC7FC,KAAK,MAAER,mBAAY,EAACK,qBAAqB,CAACG,KAAK,EAAEiD,UAAU,CAACjD,KAAK,CAAC,uBAAA,EAA0B,CAAC;QAC7FC,iBAAiB,MAAET,mBAAY,EAACK,qBAAqB,CAACI,iBAAiB,EAAEgD,UAAU,CAAChD,iBAAiB,CAAC,mCAAA,EAAsC,CAAC;QAC7IC,OAAO,MAAEV,mBAAY,EAACK,qBAAqB,CAACK,OAAO,EAAE+C,UAAU,CAAC/C,OAAO,CAAC,yBAAA,EAA4B,CAAC;QACrGC,YAAY,MAAEX,mBAAY,EAACK,qBAAqB,CAACM,YAAY,EAAE,CAAC,CAAC2C,kBAAkB,GAAGF,KAAK,CAACO,WAAAA,AAAW,MAAM,IAAI,IAAIL,kBAAkB,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,kBAAkB,CAACM,IAAAA,AAAI,MAAM,WAAW,GAAGH,UAAU,CAAC9C,YAAY,GAAG,EAAE,EAAE,CAAC4C,cAAc,GAAGH,KAAK,CAACM,MAAAA,AAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC5C,YAAY,CAAC;QACpVC,KAAK,MAAEZ,mBAAY,EAACK,qBAAqB,CAACO,KAAK,EAAE6C,UAAU,CAAC7C,KAAK,EAAE,CAAC4C,cAAc,GAAGJ,KAAK,CAACM,MAAAA,AAAM,MAAM,IAAI,IAAIF,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC5C,KAAK;IAC5K,CAAC;AACL,CAAC"}

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

@@ -50,18 +50,7 @@ const useStyles = (0, _react.makeStyles)({
             fill: 'Canvas'
         }
     },
-    toolTip: {
-        ..._reacttheme.typographyStyles.body1,
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '8px',
-        position: 'absolute',
-        textAlign: 'center',
-        top: '0px',
-        background: _reacttheme.tokens.colorNeutralBackground1,
-        borderRadius: '2px',
-        pointerEvents: 'none'
-    },
+    toolTip: (0, _index.getTooltipStyle)(),
     nodeTextContainer: {
         '& text': {
             [_index.HighContrastSelector]: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SankeyChart/useSankeyChartStyles.styles.ts"],"sourcesContent":["import { 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';\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  },\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: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    flexDirection: 'column',\n    padding: '8px',\n    position: 'absolute',\n    textAlign: 'center',\n    top: '0px',\n    background: tokens.colorNeutralBackground1,\n    borderRadius: '2px',\n    pointerEvents: 'none',\n  },\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","sankeyChartClassNames","root","nodes","links","nodeTextContainer","toolTip","chartWrapper","chart","useStyles","body1","display","width","height","flexDirection","overflow","fill","colorNeutralBackground1","strokeWidth","padding","position","textAlign","top","background","borderRadius","pointerEvents","marginTop","marginLeft","marginBottom","marginRight","useSankeyChartStyles","props","baseStyles","styles","reflowProps","mode"],"mappings":";;;;;;;;;;;IAMaK,qBAAAA;;;IA+DA6B,oBAAAA;;;;uBArE4B,iBAAiB;4BAGjB,wBAAwB;uBAC5B,wBAAwB;AAEtD,8BAAiE;IACtE5B,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,mBAAmB;IACnBC,SAAS;IACTC,cAAc;IACdC,OAAO;AACT,EAAE;AACF,MAAMC,YAAYb,qBAAAA,EAAW;IAC3BM,MAAM;QACJ,GAAGH,4BAAAA,CAAiBW,KAAK;QACzBC,SAAS;QACTC,OAAO;QACPC,QAAQ;QACRC,eAAe;QACfC,UAAU;IACZ;IACAX,OAAO;QACLY,MAAMlB,kBAAAA,CAAOmB,uBAAuB;QACpCC,aAAa;QACb,CAAClB,2BAAAA,CAAqB,EAAE;YACtBgB,MAAM;QACR;IACF;IACAb,OAAO;QACLa,MAAM;QACN,CAAChB,2BAAAA,CAAqB,EAAE;YACtBgB,MAAM;QACR;IACF;IACAV,SAAS;QACP,GAAGP,4BAAAA,CAAiBW,KAAK;QACzBC,SAAS;QACTG,eAAe;QACfK,SAAS;QACTC,UAAU;QACVC,WAAW;QACXC,KAAK;QACLC,YAAYzB,kBAAAA,CAAOmB,uBAAuB;QAC1CO,cAAc;QACdC,eAAe;IACjB;IACApB,mBAAmB;QACjB,UAAU;YACR,CAACL,2BAAAA,CAAqB,EAAE;gBACtBgB,MAAM;YACR;QACF;QAEAU,WAAW;QACXC,YAAY;QACZC,cAAc;QACdC,aAAa;IACf;IACAtB,cAAc;QACZQ,UAAU;IACZ;IACAP,OAAO;QACLG,SAAS;IACX;AACF;AAEO,6BAA6B,CAACoB;QAI+BA,eAU9DA,oBACAA,gBAEiEA;IAhBrE,MAAMC,aAAavB;IAEnB,OAAO;QACLP,UAAML,mBAAAA,EAAaI,sBAAsBC,IAAI,EAAE8B,WAAW9B,IAAI,EAAA,AAAE6B,iBAAAA,MAAME,MAAAA,AAAM,MAAA,QAAZF,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAc7B,IAAI;QAClFC,WAAON,mBAAAA,EAAaI,sBAAsBE,KAAK,EAAE6B,WAAW7B,KAAK,CAAC,uBAAuB;QACzFC,WAAOP,mBAAAA,EAAaI,sBAAsBG,KAAK,EAAE4B,WAAW5B,KAAK,CAAC,uBAAuB;QACzFC,mBAAmBR,uBAAAA,EACjBI,sBAAsBI,iBAAiB,EACvC2B,WAAW3B,iBAAiB,CAAC,mCAAmC;QAElEC,aAAST,mBAAAA,EAAaI,sBAAsBK,OAAO,EAAE0B,WAAW1B,OAAO,CAAC,yBAAyB;QACjGC,kBAAcV,mBAAAA,EACZI,sBAAsBM,YAAY,EAClCwB,CAAAA,CAAAA,qBAAAA,MAAMG,WAAAA,AAAW,MAAA,QAAjBH,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmBI,IAAAA,AAAI,MAAK,cAAcH,WAAWzB,YAAY,GAAG,IAAA,CACpEwB,iBAAAA,MAAME,MAAAA,AAAM,MAAA,QAAZF,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcxB,YAAY;QAE5BC,WAAOX,mBAAAA,EAAaI,sBAAsBO,KAAK,EAAEwB,WAAWxB,KAAK,EAAA,CAAEuB,iBAAAA,MAAME,MAAAA,AAAM,MAAA,QAAZF,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcvB,KAAK;IACxF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/SankeyChart/useSankeyChartStyles.styles.ts"],"sourcesContent":["import { 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  },\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","fill","colorNeutralBackground1","strokeWidth","marginTop","marginLeft","marginBottom","marginRight","useSankeyChartStyles","props","baseStyles","styles","reflowProps","mode"],"mappings":";;;;;;;;;;;IAOaM,qBAAAA;;;wBAoDAsB;eAAAA;;;uBA3D0C,iBAAiB;4BAG/B,wBAAwB;uBAC5B,wBAAwB;AAGtD,8BAAiE;IACtErB,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,mBAAmB;IACnBC,SAAS;IACTC,cAAc;IACdC,OAAO;AACT,EAAE;AACF,MAAMC,YAAYd,qBAAAA,EAAW;IAC3BO,MAAM;QACJ,GAAGJ,4BAAAA,CAAiBY,KAAK;QACzBC,SAAS;QACTC,OAAO;QACPC,QAAQ;QACRC,eAAe;QACfC,UAAU;IACZ;IACAX,OAAO;QACLY,MAAMnB,kBAAAA,CAAOoB,uBAAuB;QACpCC,aAAa;QACb,CAACnB,2BAAAA,CAAqB,EAAE;YACtBiB,MAAM;QACR;IACF;IACAb,OAAO;QACLa,MAAM;QACN,CAACjB,2BAAAA,CAAqB,EAAE;YACtBiB,MAAM;QACR;IACF;IACAV,aAASN,sBAAAA;IACTK,mBAAmB;QACjB,UAAU;YACR,CAACN,2BAAAA,CAAqB,EAAE;gBACtBiB,MAAM;YACR;QACF;QAEAG,WAAW;QACXC,YAAY;QACZC,cAAc;QACdC,aAAa;IACf;IACAf,cAAc;QACZQ,UAAU;IACZ;IACAP,OAAO;QACLG,SAAS;IACX;AACF;AAEO,6BAA6B,CAACa;QAI+BA,eAU9DA,oBACAA,gBAEiEA;IAhBrE,MAAMC,aAAahB;IAEnB,OAAO;QACLP,UAAMN,mBAAAA,EAAaK,sBAAsBC,IAAI,EAAEuB,WAAWvB,IAAI,EAAA,CAAEsB,gBAAAA,MAAME,MAAAA,AAAM,MAAA,QAAZF,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAActB,IAAI;QAClFC,WAAOP,mBAAAA,EAAaK,sBAAsBE,KAAK,EAAEsB,WAAWtB,KAAK,CAAC,uBAAuB;QACzFC,WAAOR,mBAAAA,EAAaK,sBAAsBG,KAAK,EAAEqB,WAAWrB,KAAK,CAAC,uBAAuB;QACzFC,uBAAmBT,mBAAAA,EACjBK,sBAAsBI,iBAAiB,EACvCoB,WAAWpB,iBAAiB,CAAC,mCAAmC;QAElEC,aAASV,mBAAAA,EAAaK,sBAAsBK,OAAO,EAAEmB,WAAWnB,OAAO,CAAC,yBAAyB;QACjGC,kBAAcX,mBAAAA,EACZK,sBAAsBM,YAAY,EAClCiB,CAAAA,CAAAA,qBAAAA,MAAMG,WAAAA,AAAW,MAAA,QAAjBH,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmBI,IAAAA,AAAI,MAAK,cAAcH,WAAWlB,YAAY,GAAG,IAAA,CACpEiB,iBAAAA,MAAME,MAAAA,AAAM,MAAA,QAAZF,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcjB,YAAY;QAE5BC,WAAOZ,mBAAAA,EAAaK,sBAAsBO,KAAK,EAAEiB,WAAWjB,KAAK,EAAA,CAAEgB,iBAAAA,MAAME,MAAAA,AAAM,MAAA,QAAZF,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAchB,KAAK;IACxF;AACF,EAAE"}

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

@@ -19,6 +19,7 @@ const _index1 = require("../../utilities/index");
 const _index2 = require("../../index");
 const _reacttheme = require("@fluentui/react-theme");
 const _imageexportutils = require("../../utilities/image-export-utils");
+const _scatterpolarutils = require("../../utilities/scatterpolar-utils");
 const ScatterChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     var _props_legendProps, _props_legendProps1;
     const _circleId = (0, _reactutilities.useId)('circle');
@@ -60,6 +61,8 @@ const ScatterChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     const [isPopoverOpen, setPopoverOpen] = _react.useState(false);
     const [selectedLegends, setSelectedLegends] = _react.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
     const prevSelectedLegendsRef = _react.useRef(undefined);
+    const _isTextMode = _react.useRef(false);
+    const _isScatterPolarRef = _react.useRef(false);
     _react.useEffect(()=>{
         var _props_legendProps, _props_legendProps1;
         if (prevSelectedLegendsRef.current && !(0, _index1.areArraysEqual)(prevSelectedLegendsRef.current, (_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends)) {
@@ -154,6 +157,8 @@ const ScatterChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     function _initializeScatterChartData(xScale, yScale, containerHeight, containerWidth, xElement) {
         _xAxisScale = xScale;
         _yAxisScale = yScale;
+        _isTextMode.current = (0, _index1.isTextMode)(_points);
+        _isScatterPolarRef.current = (0, _index1.isScatterPolarSeries)(_points);
         renderSeries = _createPlot(xElement, containerHeight);
     }
     function _onHoverCardHide() {
@@ -163,21 +168,30 @@ const ScatterChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     function _createLegends(data) {
         const { legendProps } = props;
         const isLegendMultiSelectEnabled = !!(legendProps && !!legendProps.canSelectMultipleLegends);
-        const legendDataItems = data.map((point)=>{
-            const color = point.color;
+        const mapLegendToPoints = {};
+        data.forEach((point)=>{
+            if (point.legend) {
+                if (!mapLegendToPoints[point.legend]) {
+                    mapLegendToPoints[point.legend] = [];
+                }
+                mapLegendToPoints[point.legend].push(point);
+            }
+        });
+        const legendDataItems = Object.entries(mapLegendToPoints).map(([legendTitle, points])=>{
+            const representativePoint = points[0];
             // mapping data to the format Legends component needs
             const legend = {
-                title: point.legend,
-                color,
+                title: legendTitle,
+                color: representativePoint.color,
                 onMouseOutAction: ()=>{
                     setActiveLegend('');
                 },
                 hoverAction: ()=>{
                     _handleChartMouseLeave();
-                    setActiveLegend(point.legend);
+                    setActiveLegend(legendTitle);
                 },
-                ...point.legendShape && {
-                    shape: point.legendShape
+                ...representativePoint.legendShape && {
+                    shape: representativePoint.legendShape
                 }
             };
             return legend;
@@ -215,6 +229,12 @@ const ScatterChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             return seriesColor;
         }
     }
+    function _getRangeForScatterMarkerSize(yScale, yPadding, xMin, xMax, xPadding) {
+        const extraXPixels = _isRTL ? _xAxisScale(xMax - xPadding) - _xAxisScale(xMax) : _xAxisScale(xMin + xPadding) - _xAxisScale(xMin);
+        const yMin = yScale.domain()[0];
+        const extraYPixels = yScale(yMin) - yScale(yMin + yPadding);
+        return Math.min(extraXPixels, extraYPixels);
+    }
     function _createPlot(xElement, containerHeight) {
         const series = [];
         if (isSelectedLegend) {
@@ -229,36 +249,20 @@ const ScatterChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             return (0, _d3array.min)(point.data, (item)=>item.y);
         });
         const yPadding = (yMax - yMin) * 0.1;
-        const yPaddingRange = Math.abs(_yAxisScale(yMin + yPadding) - _yAxisScale(yMin));
-        let maxMarkerRange = 40;
-        let xPaddingRange = 0;
+        let xPadding = 0;
+        let xMin = 0;
+        let xMax = 0;
         if (_xAxisType === _index1.XAxisTypes.StringAxis) {
             _xBandwidth = _xAxisScale.bandwidth() / 2;
-            xPaddingRange = _xBandwidth;
-        } else if (_xAxisType === _index1.XAxisTypes.DateAxis) {
-            const xMin = (0, _d3array.min)(points, (point)=>{
-                return (0, _d3array.min)(point.data, (item)=>item.x);
-            });
-            const xMax = (0, _d3array.max)(points, (point)=>{
-                return (0, _d3array.max)(point.data, (item)=>{
-                    return item.x;
-                });
-            });
-            const xPadding = (xMax.getTime() - xMin.getTime()) * 0.1;
-            xPaddingRange = Math.abs(_xAxisScale(new Date(xMin.getTime() + xPadding)) - _xAxisScale(xMin));
         } else {
-            const xMin = (0, _d3array.min)(points, (point)=>{
-                return (0, _d3array.min)(point.data, (item)=>item.x);
-            });
-            const xMax = (0, _d3array.max)(points, (point)=>{
-                return (0, _d3array.max)(point.data, (item)=>{
-                    return item.x;
-                });
-            });
-            const xPadding = (xMax - xMin) * 0.1;
-            xPaddingRange = Math.abs(_xAxisScale(xMin + xPadding) - _xAxisScale(xMin));
+            const isDate = _xAxisType === _index1.XAxisTypes.DateAxis;
+            const getX = (item)=>isDate ? item.x : item.x;
+            const minVal = (0, _d3array.min)(_points, (point)=>(0, _d3array.min)(point.data, getX));
+            const maxVal = (0, _d3array.max)(_points, (point)=>(0, _d3array.max)(point.data, getX));
+            xMin = isDate ? minVal.getTime() : minVal;
+            xMax = isDate ? maxVal.getTime() : maxVal;
+            xPadding = (xMax - xMin) * 0.1;
         }
-        maxMarkerRange = Math.min(maxMarkerRange, Math.min(xPaddingRange, yPaddingRange));
         const maxMarkerSize = (0, _d3array.max)(_points, (point)=>{
             return (0, _d3array.max)(point.data, (item)=>{
                 return item.markerSize;
@@ -270,35 +274,62 @@ const ScatterChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             const seriesColor = _points[i].color;
             const verticaLineHeight = containerHeight - margins.bottom + 6;
             for(let j = 0; j < _points[i].data.length; j++){
+                var _points_i_data_j;
                 const seriesId = `${_seriesId}_${i}_${j}`;
                 const circleId = `${_circleId}_${i}_${j}`;
                 const { x, y, xAxisCalloutData, xAxisCalloutAccessibilityData } = _points[i].data[j];
-                let circleRadius = 3.5;
                 const pointMarkerSize = _points[i].data[j].markerSize;
-                if (pointMarkerSize !== undefined) {
-                    circleRadius = Math.min(pointMarkerSize * maxMarkerRange / maxMarkerSize, pointMarkerSize);
-                }
+                const extraMaxPixels = _xAxisType !== _index1.XAxisTypes.StringAxis ? _getRangeForScatterMarkerSize(_yAxisScale, yPadding, xMin, xMax, xPadding) : 0;
+                const minPixel = 4;
+                const maxPixel = 16;
+                const circleRadius = pointMarkerSize && maxMarkerSize !== 0 ? _xAxisType !== _index1.XAxisTypes.StringAxis ? pointMarkerSize * extraMaxPixels / maxMarkerSize : minPixel + (pointMarkerSize - minPixel) / (maxMarkerSize - minPixel) * (maxPixel - minPixel) : activePoint === circleId ? 6 : 4;
                 const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
                 const currentPointHidden = _points[i].hideNonActiveDots && activePoint !== circleId;
-                pointsForSeries.push(/*#__PURE__*/ _react.createElement("circle", {
-                    id: circleId,
-                    key: circleId,
-                    r: circleRadius,
-                    cx: _xAxisScale(x) + _xBandwidth,
-                    cy: _yAxisScale(y),
-                    "data-is-focusable": isLegendSelected,
-                    onMouseOver: (event)=>_handleHover(x, y, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event),
-                    onMouseMove: (event)=>_handleHover(x, y, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event),
-                    onMouseOut: _handleMouseOut,
-                    onFocus: (event)=>_handleFocus(event, seriesId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
-                    onBlur: _handleMouseOut,
-                    ..._getClickHandler(_points[i].data[j].onDataPointClick),
-                    opacity: isLegendSelected && !currentPointHidden ? 1 : 0.1,
-                    fill: _getPointFill(seriesColor, circleId, j, false),
-                    stroke: seriesColor,
-                    role: "img",
-                    "aria-label": _getAriaLabel(i, j),
-                    tabIndex: isLegendSelected ? 0 : undefined
+                const text = _points === null || _points === void 0 ? void 0 : (_points_i_data_j = _points[i].data[j]) === null || _points_i_data_j === void 0 ? void 0 : _points_i_data_j.text;
+                if (!_isTextMode.current) {
+                    pointsForSeries.push(/*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("circle", {
+                        id: circleId,
+                        key: circleId,
+                        r: Math.max(circleRadius, 4),
+                        cx: _xAxisScale(x) + _xBandwidth,
+                        cy: _yAxisScale(y),
+                        "data-is-focusable": isLegendSelected,
+                        onMouseOver: (event)=>_handleHover(x, y, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event),
+                        onMouseMove: (event)=>_handleHover(x, y, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event),
+                        onMouseOut: _handleMouseOut,
+                        onFocus: (event)=>_handleFocus(event, seriesId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
+                        onBlur: _handleMouseOut,
+                        ..._getClickHandler(_points[i].data[j].onDataPointClick),
+                        opacity: isLegendSelected && !currentPointHidden ? 1 : 0.1,
+                        fill: _getPointFill(seriesColor, circleId, j, false),
+                        stroke: seriesColor,
+                        role: "img",
+                        "aria-label": _getAriaLabel(i, j),
+                        tabIndex: isLegendSelected ? 0 : undefined
+                    }), ",", text && /*#__PURE__*/ _react.createElement("text", {
+                        key: `${circleId}-label`,
+                        x: _xAxisScale(x) + _xBandwidth,
+                        y: _yAxisScale(y) + Math.max(circleRadius + 12, 16),
+                        className: classes.markerLabel
+                    }, text)));
+                }
+            }
+            if (_isScatterPolarRef.current) {
+                var _points_i;
+                // Render category labels for all series at once to avoid overlap
+                const allSeriesData = _points.map((s)=>({
+                        data: s.data.filter((pt)=>typeof pt.x === 'number' && typeof pt.y === 'number').map((pt)=>({
+                                x: pt.x,
+                                y: pt.y,
+                                text: pt.text
+                            }))
+                    }));
+                pointsForSeries.push(...(0, _scatterpolarutils.renderScatterPolarCategoryLabels)({
+                    allSeriesData,
+                    xAxisScale: _xAxisScale.current,
+                    yAxisScale: _yAxisScale.current,
+                    className: classes.markerLabel || '',
+                    lineOptions: _points === null || _points === void 0 ? void 0 : (_points_i = _points[i]) === null || _points_i === void 0 ? void 0 : _points_i.lineOptions
                 }));
             }
             series.push(/*#__PURE__*/ _react.createElement("g", {
@@ -426,6 +457,7 @@ const ScatterChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     function _isChartEmpty() {
         return !(props.data && props.data.scatterChartData && props.data.scatterChartData.length > 0 && props.data.scatterChartData.filter((item)=>item.data.length).length > 0);
     }
+    const _getMinMaxofXAxis = _react.useCallback((points, yAxisType)=>_getNumericMinMaxOfY(points, yAxisType), []);
     const { legendProps, tickValues, tickFormat } = props;
     _points = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);
     let points = _points;
@@ -437,7 +469,7 @@ const ScatterChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     // reduce computation cost by only creating legendBars
     // if when hideLegend is false.
     // NOTE: they are rendered only when hideLegend is false in CartesianChart.
-    if (!props.hideLegend) {
+    if (!props.hideLegend && !_isTextMode.current) {
         legendBars = _createLegends(_points); // ToDo: Memoize legends to improve performance.
     }
     var _props_culture;
@@ -473,7 +505,7 @@ const ScatterChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         getmargins: _getMargins,
         getGraphData: _initializeScatterChartData,
         xAxisType: _xAxisType,
-        getMinMaxOfYAxis: _getNumericMinMaxOfY,
+        getMinMaxOfYAxis: _getMinMaxofXAxis,
         getDomainNRangeValues: _getDomainNRangeValues,
         createYAxis: _index1.createNumericYAxis,
         createStringYAxis: _index1.createStringYAxis,
@@ -481,6 +513,10 @@ const ScatterChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         enableFirstRenderOptimization: _firstRenderOptimization,
         datasetForXAxisDomain: _xAxisLabels,
         componentRef: cartesianChartRef,
+        ..._isScatterPolarRef.current ? {
+            yMaxValue: 1,
+            yMinValue: -1
+        } : {},
         /* eslint-disable react/jsx-no-bind */ // eslint-disable-next-line react/no-children-prop
         children: (props)=>{
             _xAxisScale = props.xScale;