@fluentui/react-charts 0.0.0-nightly-20250819-0407.1 → 0.0.0-nightly-20250820-0406.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (115) hide show
  1. package/CHANGELOG.md +15 -15
  2. package/dist/index.d.ts +9 -1
  3. package/lib/components/AreaChart/AreaChart.js +4 -1
  4. package/lib/components/AreaChart/AreaChart.js.map +1 -1
  5. package/lib/components/AreaChart/useAreaChartStyles.styles.js +2 -1
  6. package/lib/components/AreaChart/useAreaChartStyles.styles.js.map +1 -1
  7. package/lib/components/AreaChart/useAreaChartStyles.styles.raw.js +2 -1
  8. package/lib/components/AreaChart/useAreaChartStyles.styles.raw.js.map +1 -1
  9. package/lib/components/CommonComponents/CartesianChart.js +48 -3
  10. package/lib/components/CommonComponents/CartesianChart.js.map +1 -1
  11. package/lib/components/CommonComponents/CartesianChart.types.js.map +1 -1
  12. package/lib/components/CommonComponents/useCartesianChartStyles.styles.js +13 -0
  13. package/lib/components/CommonComponents/useCartesianChartStyles.styles.js.map +1 -1
  14. package/lib/components/CommonComponents/useCartesianChartStyles.styles.raw.js +12 -0
  15. package/lib/components/CommonComponents/useCartesianChartStyles.styles.raw.js.map +1 -1
  16. package/lib/components/DeclarativeChart/DeclarativeChart.js +175 -120
  17. package/lib/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  18. package/lib/components/DeclarativeChart/PlotlyColorAdapter.js +6 -1
  19. package/lib/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -1
  20. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +293 -44
  21. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  22. package/lib/components/GanttChart/useGanttChartStyles.styles.js +2 -1
  23. package/lib/components/GanttChart/useGanttChartStyles.styles.js.map +1 -1
  24. package/lib/components/GanttChart/useGanttChartStyles.styles.raw.js +2 -1
  25. package/lib/components/GanttChart/useGanttChartStyles.styles.raw.js.map +1 -1
  26. package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js +2 -1
  27. package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js.map +1 -1
  28. package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js +2 -1
  29. package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js.map +1 -1
  30. package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.js +2 -1
  31. package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.js.map +1 -1
  32. package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js +2 -1
  33. package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js.map +1 -1
  34. package/lib/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.js +2 -1
  35. package/lib/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.js.map +1 -1
  36. package/lib/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.raw.js +2 -1
  37. package/lib/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.raw.js.map +1 -1
  38. package/lib/components/LineChart/useLineChartStyles.styles.js +2 -1
  39. package/lib/components/LineChart/useLineChartStyles.styles.js.map +1 -1
  40. package/lib/components/LineChart/useLineChartStyles.styles.raw.js +2 -1
  41. package/lib/components/LineChart/useLineChartStyles.styles.raw.js.map +1 -1
  42. package/lib/components/ScatterChart/ScatterChart.js +47 -30
  43. package/lib/components/ScatterChart/ScatterChart.js.map +1 -1
  44. package/lib/components/ScatterChart/ScatterChart.types.js.map +1 -1
  45. package/lib/components/ScatterChart/useScatterChartStyles.styles.js +21 -4
  46. package/lib/components/ScatterChart/useScatterChartStyles.styles.js.map +1 -1
  47. package/lib/components/ScatterChart/useScatterChartStyles.styles.raw.js +16 -3
  48. package/lib/components/ScatterChart/useScatterChartStyles.styles.raw.js.map +1 -1
  49. package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.js +2 -1
  50. package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.js.map +1 -1
  51. package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js +2 -1
  52. package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js.map +1 -1
  53. package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js +2 -1
  54. package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js.map +1 -1
  55. package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js +2 -1
  56. package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js.map +1 -1
  57. package/lib/utilities/utilities.js +0 -29
  58. package/lib/utilities/utilities.js.map +1 -1
  59. package/lib-commonjs/components/AreaChart/AreaChart.js +4 -1
  60. package/lib-commonjs/components/AreaChart/AreaChart.js.map +1 -1
  61. package/lib-commonjs/components/AreaChart/useAreaChartStyles.styles.js +2 -1
  62. package/lib-commonjs/components/AreaChart/useAreaChartStyles.styles.js.map +1 -1
  63. package/lib-commonjs/components/AreaChart/useAreaChartStyles.styles.raw.js +2 -1
  64. package/lib-commonjs/components/AreaChart/useAreaChartStyles.styles.raw.js.map +1 -1
  65. package/lib-commonjs/components/CommonComponents/CartesianChart.js +48 -3
  66. package/lib-commonjs/components/CommonComponents/CartesianChart.js.map +1 -1
  67. package/lib-commonjs/components/CommonComponents/CartesianChart.types.js.map +1 -1
  68. package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js +13 -0
  69. package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js.map +1 -1
  70. package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.raw.js +12 -0
  71. package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.raw.js.map +1 -1
  72. package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js +171 -118
  73. package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  74. package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js +9 -1
  75. package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -1
  76. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +309 -50
  77. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  78. package/lib-commonjs/components/GanttChart/useGanttChartStyles.styles.js +2 -1
  79. package/lib-commonjs/components/GanttChart/useGanttChartStyles.styles.js.map +1 -1
  80. package/lib-commonjs/components/GanttChart/useGanttChartStyles.styles.raw.js +2 -1
  81. package/lib-commonjs/components/GanttChart/useGanttChartStyles.styles.raw.js.map +1 -1
  82. package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js +2 -1
  83. package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js.map +1 -1
  84. package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js +2 -1
  85. package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js.map +1 -1
  86. package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.js +2 -1
  87. package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.js.map +1 -1
  88. package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js +2 -1
  89. package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js.map +1 -1
  90. package/lib-commonjs/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.js +2 -1
  91. package/lib-commonjs/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.js.map +1 -1
  92. package/lib-commonjs/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.raw.js +2 -1
  93. package/lib-commonjs/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.raw.js.map +1 -1
  94. package/lib-commonjs/components/LineChart/useLineChartStyles.styles.js +2 -1
  95. package/lib-commonjs/components/LineChart/useLineChartStyles.styles.js.map +1 -1
  96. package/lib-commonjs/components/LineChart/useLineChartStyles.styles.raw.js +2 -1
  97. package/lib-commonjs/components/LineChart/useLineChartStyles.styles.raw.js.map +1 -1
  98. package/lib-commonjs/components/ScatterChart/ScatterChart.js +47 -30
  99. package/lib-commonjs/components/ScatterChart/ScatterChart.js.map +1 -1
  100. package/lib-commonjs/components/ScatterChart/ScatterChart.types.js.map +1 -1
  101. package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.js +30 -3
  102. package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.js.map +1 -1
  103. package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.raw.js +15 -2
  104. package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.raw.js.map +1 -1
  105. package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.js +2 -1
  106. package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.js.map +1 -1
  107. package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js +2 -1
  108. package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js.map +1 -1
  109. package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js +2 -1
  110. package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js.map +1 -1
  111. package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js +2 -1
  112. package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js.map +1 -1
  113. package/lib-commonjs/utilities/utilities.js +0 -32
  114. package/lib-commonjs/utilities/utilities.js.map +1 -1
  115. package/package.json +12 -12
@@ -32,7 +32,8 @@ const ganttClassNames = {
32
32
  shapeStyles: '',
33
33
  chartWrapper: '',
34
34
  svgTooltip: '',
35
- chart: ''
35
+ chart: '',
36
+ axisAnnotation: ''
36
37
  };
37
38
  const useGanttChartStyles = (props)=>{
38
39
  return {};
@@ -1 +1 @@
1
- {"version":3,"sources":["useGanttChartStyles.styles.js"],"sourcesContent":["/**\n * @internal\n */ export const ganttClassNames = {\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n tooltip: '',\n axisTitle: '',\n chartTitle: '',\n opacityChangeOnHover: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: ''\n};\n/**\n * Apply styling to the GanttChart component\n */ export const useGanttChartStyles = (props)=>{\n return {};\n};\n"],"names":["ganttClassNames","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","useGanttChartStyles","props"],"mappings":"AAAA;;CAEA,EAAI;;;;;;;;;;;mBAA4B;;;uBAkBI;;;;AAlBzB,MAAMA,kBAAkB;IAC/BC,IAAI,EAAE,EAAE;IACRC,KAAK,EAAE,EAAE;IACTC,KAAK,EAAE,EAAE;IACTC,eAAe,EAAE,EAAE;IACnBC,KAAK,EAAE,EAAE;IACTC,kBAAkB,EAAE,EAAE;IACtBC,OAAO,EAAE,EAAE;IACXC,SAAS,EAAE,EAAE;IACbC,UAAU,EAAE,EAAE;IACdC,oBAAoB,EAAE,EAAE;IACxBC,WAAW,EAAE,EAAE;IACfC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE;AACX,CAAC;AAGU,MAAMC,uBAAuBC,KAAK,IAAG;IAC5C,OAAO,CAAC,CAAC;AACb,CAAC"}
1
+ {"version":3,"sources":["useGanttChartStyles.styles.js"],"sourcesContent":["/**\n * @internal\n */ export const ganttClassNames = {\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n tooltip: '',\n axisTitle: '',\n chartTitle: '',\n opacityChangeOnHover: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: '',\n axisAnnotation: ''\n};\n/**\n * Apply styling to the GanttChart component\n */ export const useGanttChartStyles = (props)=>{\n return {};\n};\n"],"names":["ganttClassNames","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useGanttChartStyles","props"],"mappings":"AAAA;;CAEA,EAAI;;;;;;;;;;;mBAA4B;;;uBAmBI;;;;AAnBzB,MAAMA,kBAAkB;IAC/BC,IAAI,EAAE,EAAE;IACRC,KAAK,EAAE,EAAE;IACTC,KAAK,EAAE,EAAE;IACTC,eAAe,EAAE,EAAE;IACnBC,KAAK,EAAE,EAAE;IACTC,kBAAkB,EAAE,EAAE;IACtBC,OAAO,EAAE,EAAE;IACXC,SAAS,EAAE,EAAE;IACbC,UAAU,EAAE,EAAE;IACdC,oBAAoB,EAAE,EAAE;IACxBC,WAAW,EAAE,EAAE;IACfC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE,EAAE;IACTC,cAAc,EAAE;AACpB,CAAC;AAGU,MAAMC,uBAAuBC,KAAK,IAAG;IAC5C,OAAO,CAAC,CAAC;AACb,CAAC"}
@@ -32,7 +32,8 @@ const ganttClassNames = {
32
32
  shapeStyles: '',
33
33
  chartWrapper: '',
34
34
  svgTooltip: '',
35
- chart: ''
35
+ chart: '',
36
+ axisAnnotation: ''
36
37
  };
37
38
  const useGanttChartStyles = (props)=>{
38
39
  return {};
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/GanttChart/useGanttChartStyles.styles.ts"],"sourcesContent":["import { GanttChartStyles, GanttChartProps } from '../../index';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @internal\n */\nexport const ganttClassNames: SlotClassNames<GanttChartStyles> = {\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n tooltip: '',\n axisTitle: '',\n chartTitle: '',\n opacityChangeOnHover: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: '',\n};\n\n/**\n * Apply styling to the GanttChart component\n */\nexport const useGanttChartStyles = (props: GanttChartProps): GanttChartStyles => {\n return {};\n};\n"],"names":["ganttClassNames","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","useGanttChartStyles","props"],"mappings":"AAGA;;CAEC,GACD;;;;;;;;;;;mBAAaA;;;uBAoBAe;;;;AApBN,MAAMf,kBAAoD;IAC/DC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,SAAS;IACTC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;AACT,EAAE;AAKK,MAAMC,sBAAsB,CAACC;IAClC,OAAO,CAAC;AACV,EAAE"}
1
+ {"version":3,"sources":["../src/components/GanttChart/useGanttChartStyles.styles.ts"],"sourcesContent":["import { GanttChartStyles, GanttChartProps } from '../../index';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @internal\n */\nexport const ganttClassNames: SlotClassNames<GanttChartStyles> = {\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n tooltip: '',\n axisTitle: '',\n chartTitle: '',\n opacityChangeOnHover: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: '',\n axisAnnotation: '',\n};\n\n/**\n * Apply styling to the GanttChart component\n */\nexport const useGanttChartStyles = (props: GanttChartProps): GanttChartStyles => {\n return {};\n};\n"],"names":["ganttClassNames","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useGanttChartStyles","props"],"mappings":"AAGA;;CAEC,GACD;;;;;;;;;;;mBAAaA;;;uBAqBAgB;;;;AArBN,MAAMhB,kBAAoD;IAC/DC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,SAAS;IACTC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAKK,MAAMC,sBAAsB,CAACC;IAClC,OAAO,CAAC;AACV,EAAE"}
@@ -32,7 +32,8 @@ const groupedVerticalBarChartClassNames = {
32
32
  shapeStyles: '',
33
33
  chartWrapper: '',
34
34
  svgTooltip: '',
35
- chart: ''
35
+ chart: '',
36
+ axisAnnotation: ''
36
37
  };
37
38
  const useStyles = /*#__PURE__*/ (0, _react.__styles)({
38
39
  opacityChangeOnHover: {
@@ -1 +1 @@
1
- {"version":3,"sources":["useGroupedVerticalBarChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const groupedVerticalBarChartClassNames = {\n opacityChangeOnHover: 'fui-gvbc**opacityChangeOnHover',\n tooltip: 'fui-gvbc**tooltip',\n barLabel: 'fui-gvbc**barLabel',\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n axisTitle: '',\n chartTitle: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: ''\n};\nconst useStyles = makeStyles({\n opacityChangeOnHover: {\n cursor: 'default'\n },\n tooltip: {\n ...typographyStyles.body1,\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 background: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusSmall,\n pointerEvents: 'none',\n color: tokens.colorNeutralForeground1\n },\n barLabel: {\n ...typographyStyles.caption1Strong,\n fill: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto'\n }\n});\n/**\n * Apply styling to the GroupedVerticalBarChart slots based on the state\n */ export const useGroupedVerticalBarChartStyles_unstable = (props)=>{\n const baseStyles = useStyles();\n return {\n opacityChangeOnHover: mergeClasses(groupedVerticalBarChartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n tooltip: mergeClasses(groupedVerticalBarChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n barLabel: mergeClasses(groupedVerticalBarChartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/ )\n };\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","groupedVerticalBarChartClassNames","opacityChangeOnHover","tooltip","barLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","Bceei9c","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Bgh53k4","B2eet1l","De3pzq","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","Bvjb7m6","d","p","useGroupedVerticalBarChartStyles_unstable","props","baseStyles"],"mappings":";;;;;;;;;;;IAEaK,iCAAiC;;;6CA2CY;;;;uBA7CL,gBAAgB;AAE9D,0CAA0C;IAC7CC,oBAAoB,EAAE,gCAAgC;IACtDC,OAAO,EAAE,mBAAmB;IAC5BC,QAAQ,EAAE,oBAAoB;IAC9BC,IAAI,EAAE,EAAE;IACRC,KAAK,EAAE,EAAE;IACTC,KAAK,EAAE,EAAE;IACTC,eAAe,EAAE,EAAE;IACnBC,KAAK,EAAE,EAAE;IACTC,kBAAkB,EAAE,EAAE;IACtBC,SAAS,EAAE,EAAE;IACbC,UAAU,EAAE,EAAE;IACdC,WAAW,EAAE,EAAE;IACfC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGrB,eAAA,EAAA;IAAAM,oBAAA,EAAA;QAAAgB,OAAA,EAAA;IAAA;IAAAf,OAAA,EAAA;QAAAgB,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,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;QAAAC,MAAA,EAAA;IAAA;IAAA9C,QAAA,EAAA;QAAAe,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAU,OAAA,EAAA;QAAAmB,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAuBjB,CAAC;AAGS,MAAMC,6CAA6CC,KAAK,IAAG;IAClE,MAAMC,UAAU,GAAGvC,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHf,oBAAoB,MAAEL,mBAAY,EAACI,iCAAiC,CAACC,oBAAoB,EAAEsD,UAAU,CAACtD,oBAAoB,CAAC,oCAAA,EAAuC,CAAC;QACnKC,OAAO,MAAEN,mBAAY,EAACI,iCAAiC,CAACE,OAAO,EAAEqD,UAAU,CAACrD,OAAO,CAAC,uBAAA,EAA0B,CAAC;QAC/GC,QAAQ,MAAEP,mBAAY,EAACI,iCAAiC,CAACG,QAAQ,EAAEoD,UAAU,CAACpD,QAAQ,CAAC,wBAAA,EAA2B;IACtH,CAAC;AACL,CAAC"}
1
+ {"version":3,"sources":["useGroupedVerticalBarChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const groupedVerticalBarChartClassNames = {\n opacityChangeOnHover: 'fui-gvbc**opacityChangeOnHover',\n tooltip: 'fui-gvbc**tooltip',\n barLabel: 'fui-gvbc**barLabel',\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n axisTitle: '',\n chartTitle: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: '',\n axisAnnotation: ''\n};\nconst useStyles = makeStyles({\n opacityChangeOnHover: {\n cursor: 'default'\n },\n tooltip: {\n ...typographyStyles.body1,\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 background: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusSmall,\n pointerEvents: 'none',\n color: tokens.colorNeutralForeground1\n },\n barLabel: {\n ...typographyStyles.caption1Strong,\n fill: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto'\n }\n});\n/**\n * Apply styling to the GroupedVerticalBarChart slots based on the state\n */ export const useGroupedVerticalBarChartStyles_unstable = (props)=>{\n const baseStyles = useStyles();\n return {\n opacityChangeOnHover: mergeClasses(groupedVerticalBarChartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n tooltip: mergeClasses(groupedVerticalBarChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n barLabel: mergeClasses(groupedVerticalBarChartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/ )\n };\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","groupedVerticalBarChartClassNames","opacityChangeOnHover","tooltip","barLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","Bceei9c","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Bgh53k4","B2eet1l","De3pzq","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","Bvjb7m6","d","p","useGroupedVerticalBarChartStyles_unstable","props","baseStyles"],"mappings":";;;;;;;;;;;IAEaK,iCAAiC;;;6CA4CY;;;;uBA9CL,gBAAgB;AAE9D,0CAA0C;IAC7CC,oBAAoB,EAAE,gCAAgC;IACtDC,OAAO,EAAE,mBAAmB;IAC5BC,QAAQ,EAAE,oBAAoB;IAC9BC,IAAI,EAAE,EAAE;IACRC,KAAK,EAAE,EAAE;IACTC,KAAK,EAAE,EAAE;IACTC,eAAe,EAAE,EAAE;IACnBC,KAAK,EAAE,EAAE;IACTC,kBAAkB,EAAE,EAAE;IACtBC,SAAS,EAAE,EAAE;IACbC,UAAU,EAAE,EAAE;IACdC,WAAW,EAAE,EAAE;IACfC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE,EAAE;IACTC,cAAc,EAAE;AACpB,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGtB,eAAA,EAAA;IAAAM,oBAAA,EAAA;QAAAiB,OAAA,EAAA;IAAA;IAAAhB,OAAA,EAAA;QAAAiB,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,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;QAAAC,MAAA,EAAA;IAAA;IAAA/C,QAAA,EAAA;QAAAgB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAU,OAAA,EAAA;QAAAmB,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAuBjB,CAAC;AAGS,MAAMC,6CAA6CC,KAAK,IAAG;IAClE,MAAMC,UAAU,GAAGvC,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHhB,oBAAoB,MAAEL,mBAAY,EAACI,iCAAiC,CAACC,oBAAoB,EAAEuD,UAAU,CAACvD,oBAAoB,CAAC,oCAAA,EAAuC,CAAC;QACnKC,OAAO,MAAEN,mBAAY,EAACI,iCAAiC,CAACE,OAAO,EAAEsD,UAAU,CAACtD,OAAO,CAAC,uBAAA,EAA0B,CAAC;QAC/GC,QAAQ,MAAEP,mBAAY,EAACI,iCAAiC,CAACG,QAAQ,EAAEqD,UAAU,CAACrD,QAAQ,CAAC,wBAAA,EAA2B;IACtH,CAAC;AACL,CAAC"}
@@ -33,7 +33,8 @@ const groupedVerticalBarChartClassNames = {
33
33
  shapeStyles: '',
34
34
  chartWrapper: '',
35
35
  svgTooltip: '',
36
- chart: ''
36
+ chart: '',
37
+ axisAnnotation: ''
37
38
  };
38
39
  const useStyles = (0, _react.makeStyles)({
39
40
  opacityChangeOnHover: {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { GroupedVerticalBarChartProps, GroupedVerticalBarChartStyles } from '../../index';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const groupedVerticalBarChartClassNames: SlotClassNames<GroupedVerticalBarChartStyles> = {\n opacityChangeOnHover: 'fui-gvbc**opacityChangeOnHover',\n tooltip: 'fui-gvbc**tooltip',\n barLabel: 'fui-gvbc**barLabel',\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n axisTitle: '',\n chartTitle: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: '',\n};\n\nconst useStyles = makeStyles({\n opacityChangeOnHover: {\n cursor: 'default',\n },\n tooltip: {\n ...typographyStyles.body1,\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, //Check this\n background: tokens.colorNeutralBackground1, //Fill or background\n borderRadius: tokens.borderRadiusSmall,\n pointerEvents: 'none',\n color: tokens.colorNeutralForeground1, //Confirm this\n },\n barLabel: {\n ...typographyStyles.caption1Strong, // Confirm styles\n fill: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto',\n },\n});\n\n/**\n * Apply styling to the GroupedVerticalBarChart slots based on the state\n */\nexport const useGroupedVerticalBarChartStyles_unstable = (\n props: GroupedVerticalBarChartProps,\n): GroupedVerticalBarChartStyles => {\n const baseStyles = useStyles();\n\n return {\n opacityChangeOnHover: mergeClasses(\n groupedVerticalBarChartClassNames.opacityChangeOnHover,\n baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/,\n ),\n tooltip: mergeClasses(groupedVerticalBarChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n barLabel: mergeClasses(groupedVerticalBarChartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/),\n };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","groupedVerticalBarChartClassNames","opacityChangeOnHover","tooltip","barLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","cursor","body1","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","fill","colorNeutralBackground1","background","borderRadius","borderRadiusSmall","pointerEvents","color","colorNeutralForeground1","caption1Strong","forcedColorAdjust","useGroupedVerticalBarChartStyles_unstable","props","baseStyles"],"mappings":";;;;;;;;;;;IAKaK,iCAAAA;;;IA8CAqC,yCAAAA;;;;uBAnDwC,iBAAiB;4BAG7B,wBAAwB;AAE1D,0CAAyF;IAC9FpC,sBAAsB;IACtBC,SAAS;IACTC,UAAU;IACVC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;AACT,EAAE;AAEF,MAAMC,gBAAYrB,iBAAAA,EAAW;IAC3BM,sBAAsB;QACpBgB,QAAQ;IACV;IACAf,SAAS;QACP,GAAGH,4BAAAA,CAAiBmB,KAAK;QACzBC,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,YAAY/B,kBAAAA,CAAO8B,uBAAuB;QAC1CE,cAAchC,kBAAAA,CAAOiC,iBAAiB;QACtCC,eAAe;QACfC,OAAOnC,kBAAAA,CAAOoC,uBAAuB;IACvC;IACA/B,UAAU;QACR,GAAGJ,4BAAAA,CAAiBoC,cAAc;QAClCR,MAAM7B,kBAAAA,CAAOoC,uBAAuB;QACpCE,mBAAmB;IACrB;AACF;AAKO,kDAAkD,CACvDE;IAEA,MAAMC,aAAavB;IAEnB,OAAO;QACLf,0BAAsBL,mBAAAA,EACpBI,kCAAkCC,oBAAoB,EACtDsC,WAAWtC,oBAAoB,CAAC,oCAAoC;QAEtEC,aAASN,mBAAAA,EAAaI,kCAAkCE,OAAO,EAAEqC,WAAWrC,OAAO,CAAC,uBAAuB;QAC3GC,cAAUP,mBAAAA,EAAaI,kCAAkCG,QAAQ,EAAEoC,WAAWpC,QAAQ,CAAC,wBAAwB;IACjH;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { GroupedVerticalBarChartProps, GroupedVerticalBarChartStyles } from '../../index';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const groupedVerticalBarChartClassNames: SlotClassNames<GroupedVerticalBarChartStyles> = {\n opacityChangeOnHover: 'fui-gvbc**opacityChangeOnHover',\n tooltip: 'fui-gvbc**tooltip',\n barLabel: 'fui-gvbc**barLabel',\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n axisTitle: '',\n chartTitle: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: '',\n axisAnnotation: '',\n};\n\nconst useStyles = makeStyles({\n opacityChangeOnHover: {\n cursor: 'default',\n },\n tooltip: {\n ...typographyStyles.body1,\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, //Check this\n background: tokens.colorNeutralBackground1, //Fill or background\n borderRadius: tokens.borderRadiusSmall,\n pointerEvents: 'none',\n color: tokens.colorNeutralForeground1, //Confirm this\n },\n barLabel: {\n ...typographyStyles.caption1Strong, // Confirm styles\n fill: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto',\n },\n});\n\n/**\n * Apply styling to the GroupedVerticalBarChart slots based on the state\n */\nexport const useGroupedVerticalBarChartStyles_unstable = (\n props: GroupedVerticalBarChartProps,\n): GroupedVerticalBarChartStyles => {\n const baseStyles = useStyles();\n\n return {\n opacityChangeOnHover: mergeClasses(\n groupedVerticalBarChartClassNames.opacityChangeOnHover,\n baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/,\n ),\n tooltip: mergeClasses(groupedVerticalBarChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n barLabel: mergeClasses(groupedVerticalBarChartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/),\n };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","groupedVerticalBarChartClassNames","opacityChangeOnHover","tooltip","barLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","cursor","body1","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","fill","colorNeutralBackground1","background","borderRadius","borderRadiusSmall","pointerEvents","color","colorNeutralForeground1","caption1Strong","forcedColorAdjust","useGroupedVerticalBarChartStyles_unstable","props","baseStyles"],"mappings":";;;;;;;;;;;IAKaK,iCAAAA;;;IA+CAsC,yCAAAA;;;;uBApDwC,iBAAiB;4BAG7B,wBAAwB;AAE1D,0CAAyF;IAC9FrC,sBAAsB;IACtBC,SAAS;IACTC,UAAU;IACVC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAEF,MAAMC,gBAAYtB,iBAAAA,EAAW;IAC3BM,sBAAsB;QACpBiB,QAAQ;IACV;IACAhB,SAAS;QACP,GAAGH,4BAAAA,CAAiBoB,KAAK;QACzBC,SAAS;QACTC,eAAe;QACf,GAAGxB,iBAAAA,CAAWyB,OAAO,CAACxB,kBAAAA,CAAOyB,kBAAkB,CAAC;QAChDC,UAAU;QACVC,WAAW;QACXC,KAAK5B,kBAAAA,CAAO6B,mBAAmB;QAC/BC,MAAM9B,kBAAAA,CAAO+B,uBAAuB;QACpCC,YAAYhC,kBAAAA,CAAO+B,uBAAuB;QAC1CE,cAAcjC,kBAAAA,CAAOkC,iBAAiB;QACtCC,eAAe;QACfC,OAAOpC,kBAAAA,CAAOqC,uBAAuB;IACvC;IACAhC,UAAU;QACR,GAAGJ,4BAAAA,CAAiBqC,cAAc;QAClCR,MAAM9B,kBAAAA,CAAOqC,uBAAuB;QACpCE,mBAAmB;IACrB;AACF;AAKO,kDAAkD,CACvDE;IAEA,MAAMC,aAAavB;IAEnB,OAAO;QACLhB,0BAAsBL,mBAAAA,EACpBI,kCAAkCC,oBAAoB,EACtDuC,WAAWvC,oBAAoB,CAAC,oCAAoC;QAEtEC,aAASN,mBAAAA,EAAaI,kCAAkCE,OAAO,EAAEsC,WAAWtC,OAAO,CAAC,uBAAuB;QAC3GC,cAAUP,mBAAAA,EAAaI,kCAAkCG,QAAQ,EAAEqC,WAAWrC,QAAQ,CAAC,wBAAwB;IACjH;AACF,EAAE"}
@@ -33,7 +33,8 @@ const heatmapChartClassNames = {
33
33
  shapeStyles: '',
34
34
  chartWrapper: '',
35
35
  svgTooltip: '',
36
- chart: ''
36
+ chart: '',
37
+ axisAnnotation: ''
37
38
  };
38
39
  const useStyles = /*#__PURE__*/ (0, _react.__styles)({
39
40
  root: {},
@@ -1 +1 @@
1
- {"version":3,"sources":["useHeatMapChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const heatmapChartClassNames = {\n root: 'fui-hmc__root',\n text: 'fui-hmc__text',\n calloutContentRoot: 'fui-hmc__calloutContentRoot',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n tooltip: '',\n axisTitle: '',\n chartTitle: '',\n opacityChangeOnHover: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: ''\n};\nconst useStyles = makeStyles({\n root: {},\n text: {\n ...typographyStyles.body1Strong,\n pointerEvents: 'none'\n },\n calloutContentRoot: {\n maxWidth: '238px'\n }\n});\nexport const useHeatMapChartStyles = (props)=>{\n const baseStyles = useStyles();\n return {\n root: mergeClasses(heatmapChartClassNames.root, baseStyles.root /*, props.styles?.root*/ ),\n text: mergeClasses(heatmapChartClassNames.text, baseStyles.text /*, props.styles?.text*/ ),\n calloutContentRoot: mergeClasses(heatmapChartClassNames.calloutContentRoot, baseStyles.calloutContentRoot /*, props.styles?.calloutContentRoot*/ )\n };\n};\n"],"names":["__styles","mergeClasses","typographyStyles","heatmapChartClassNames","root","text","calloutContentRoot","xAxis","yAxis","legendContainer","hover","descriptionMessage","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Bkecrkj","B2u0y6b","d","useHeatMapChartStyles","props","baseStyles"],"mappings":";;;;;;;;;;;IAEaG,sBAAsB;;;yBA4BD;;;;uBA9BO,gBAAgB;AAElD,+BAA+B;IAClCC,IAAI,EAAE,eAAe;IACrBC,IAAI,EAAE,eAAe;IACrBC,kBAAkB,EAAE,6BAA6B;IACjDC,KAAK,EAAE,EAAE;IACTC,KAAK,EAAE,EAAE;IACTC,eAAe,EAAE,EAAE;IACnBC,KAAK,EAAE,EAAE;IACTC,kBAAkB,EAAE,EAAE;IACtBC,OAAO,EAAE,EAAE;IACXC,SAAS,EAAE,EAAE;IACbC,UAAU,EAAE,EAAE;IACdC,oBAAoB,EAAE,EAAE;IACxBC,WAAW,EAAE,EAAE;IACfC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGpB,eAAA,EAAA;IAAAI,IAAA,EAAA,CAAA;IAAAC,IAAA,EAAA;QAAAgB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAnB,kBAAA,EAAA;QAAAoB,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CASjB,CAAC;AACK,MAAMC,yBAAyBC,KAAK,IAAG;IAC1C,MAAMC,UAAU,GAAGV,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHhB,IAAI,MAAEH,mBAAY,EAACE,sBAAsB,CAACC,IAAI,EAAE0B,UAAU,CAAC1B,IAAI,CAAC,sBAAA,EAAyB,CAAC;QAC1FC,IAAI,MAAEJ,mBAAY,EAACE,sBAAsB,CAACE,IAAI,EAAEyB,UAAU,CAACzB,IAAI,CAAC,sBAAA,EAAyB,CAAC;QAC1FC,kBAAkB,MAAEL,mBAAY,EAACE,sBAAsB,CAACG,kBAAkB,EAAEwB,UAAU,CAACxB,kBAAkB,CAAC,oCAAA,EAAuC;IACrJ,CAAC;AACL,CAAC"}
1
+ {"version":3,"sources":["useHeatMapChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const heatmapChartClassNames = {\n root: 'fui-hmc__root',\n text: 'fui-hmc__text',\n calloutContentRoot: 'fui-hmc__calloutContentRoot',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n tooltip: '',\n axisTitle: '',\n chartTitle: '',\n opacityChangeOnHover: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: '',\n axisAnnotation: ''\n};\nconst useStyles = makeStyles({\n root: {},\n text: {\n ...typographyStyles.body1Strong,\n pointerEvents: 'none'\n },\n calloutContentRoot: {\n maxWidth: '238px'\n }\n});\nexport const useHeatMapChartStyles = (props)=>{\n const baseStyles = useStyles();\n return {\n root: mergeClasses(heatmapChartClassNames.root, baseStyles.root /*, props.styles?.root*/ ),\n text: mergeClasses(heatmapChartClassNames.text, baseStyles.text /*, props.styles?.text*/ ),\n calloutContentRoot: mergeClasses(heatmapChartClassNames.calloutContentRoot, baseStyles.calloutContentRoot /*, props.styles?.calloutContentRoot*/ )\n };\n};\n"],"names":["__styles","mergeClasses","typographyStyles","heatmapChartClassNames","root","text","calloutContentRoot","xAxis","yAxis","legendContainer","hover","descriptionMessage","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Bkecrkj","B2u0y6b","d","useHeatMapChartStyles","props","baseStyles"],"mappings":";;;;;;;;;;;IAEaG,sBAAsB;;;yBA6BD;;;;uBA/BO,gBAAgB;AAElD,+BAA+B;IAClCC,IAAI,EAAE,eAAe;IACrBC,IAAI,EAAE,eAAe;IACrBC,kBAAkB,EAAE,6BAA6B;IACjDC,KAAK,EAAE,EAAE;IACTC,KAAK,EAAE,EAAE;IACTC,eAAe,EAAE,EAAE;IACnBC,KAAK,EAAE,EAAE;IACTC,kBAAkB,EAAE,EAAE;IACtBC,OAAO,EAAE,EAAE;IACXC,SAAS,EAAE,EAAE;IACbC,UAAU,EAAE,EAAE;IACdC,oBAAoB,EAAE,EAAE;IACxBC,WAAW,EAAE,EAAE;IACfC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE,EAAE;IACTC,cAAc,EAAE;AACpB,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGrB,eAAA,EAAA;IAAAI,IAAA,EAAA,CAAA;IAAAC,IAAA,EAAA;QAAAiB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAApB,kBAAA,EAAA;QAAAqB,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CASjB,CAAC;AACK,MAAMC,yBAAyBC,KAAK,IAAG;IAC1C,MAAMC,UAAU,GAAGV,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHjB,IAAI,MAAEH,mBAAY,EAACE,sBAAsB,CAACC,IAAI,EAAE2B,UAAU,CAAC3B,IAAI,CAAC,sBAAA,EAAyB,CAAC;QAC1FC,IAAI,MAAEJ,mBAAY,EAACE,sBAAsB,CAACE,IAAI,EAAE0B,UAAU,CAAC1B,IAAI,CAAC,sBAAA,EAAyB,CAAC;QAC1FC,kBAAkB,MAAEL,mBAAY,EAACE,sBAAsB,CAACG,kBAAkB,EAAEyB,UAAU,CAACzB,kBAAkB,CAAC,oCAAA,EAAuC;IACrJ,CAAC;AACL,CAAC"}
@@ -34,7 +34,8 @@ const heatmapChartClassNames = {
34
34
  shapeStyles: '',
35
35
  chartWrapper: '',
36
36
  svgTooltip: '',
37
- chart: ''
37
+ chart: '',
38
+ axisAnnotation: ''
38
39
  };
39
40
  const useStyles = (0, _react.makeStyles)({
40
41
  root: {},
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/HeatMapChart/useHeatMapChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { HeatMapChartProps, HeatMapChartStyles } from './HeatMapChart.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const heatmapChartClassNames: SlotClassNames<HeatMapChartStyles> = {\n root: 'fui-hmc__root',\n text: 'fui-hmc__text',\n calloutContentRoot: 'fui-hmc__calloutContentRoot',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n tooltip: '',\n axisTitle: '',\n chartTitle: '',\n opacityChangeOnHover: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: '',\n};\nconst useStyles = makeStyles({\n root: {},\n text: {\n ...typographyStyles.body1Strong,\n pointerEvents: 'none',\n },\n calloutContentRoot: {\n maxWidth: '238px',\n },\n});\n\nexport const useHeatMapChartStyles = (props: HeatMapChartProps): HeatMapChartStyles => {\n const baseStyles = useStyles();\n\n return {\n root: mergeClasses(heatmapChartClassNames.root, baseStyles.root /*, props.styles?.root*/),\n text: mergeClasses(heatmapChartClassNames.text, baseStyles.text /*, props.styles?.text*/),\n calloutContentRoot: mergeClasses(\n heatmapChartClassNames.calloutContentRoot,\n baseStyles.calloutContentRoot /*, props.styles?.calloutContentRoot*/,\n ),\n };\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","heatmapChartClassNames","root","text","calloutContentRoot","xAxis","yAxis","legendContainer","hover","descriptionMessage","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","body1Strong","pointerEvents","maxWidth","useHeatMapChartStyles","props","baseStyles"],"mappings":";;;;;;;;;;;IAKaG,sBAAAA;;;yBA6BAqB;;;;uBAlC4B,iBAAiB;4BAGzB,wBAAwB;AAElD,+BAAmE;IACxEpB,MAAM;IACNC,MAAM;IACNC,oBAAoB;IACpBC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,SAAS;IACTC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;AACT,EAAE;AACF,MAAMC,gBAAYpB,iBAAAA,EAAW;IAC3BI,MAAM,CAAC;IACPC,MAAM;QACJ,GAAGH,4BAAAA,CAAiBmB,WAAW;QAC/BC,eAAe;IACjB;IACAhB,oBAAoB;QAClBiB,UAAU;IACZ;AACF;AAEO,MAAMC,wBAAwB,CAACC;IACpC,MAAMC,aAAaN;IAEnB,OAAO;QACLhB,UAAMH,mBAAAA,EAAaE,uBAAuBC,IAAI,EAAEsB,WAAWtB,IAAI,CAAC,sBAAsB;QACtFC,UAAMJ,mBAAAA,EAAaE,uBAAuBE,IAAI,EAAEqB,WAAWrB,IAAI,CAAC,sBAAsB;QACtFC,wBAAoBL,mBAAAA,EAClBE,uBAAuBG,kBAAkB,EACzCoB,WAAWpB,kBAAkB,CAAC,oCAAoC;IAEtE;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/HeatMapChart/useHeatMapChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { HeatMapChartProps, HeatMapChartStyles } from './HeatMapChart.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const heatmapChartClassNames: SlotClassNames<HeatMapChartStyles> = {\n root: 'fui-hmc__root',\n text: 'fui-hmc__text',\n calloutContentRoot: 'fui-hmc__calloutContentRoot',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n tooltip: '',\n axisTitle: '',\n chartTitle: '',\n opacityChangeOnHover: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: '',\n axisAnnotation: '',\n};\nconst useStyles = makeStyles({\n root: {},\n text: {\n ...typographyStyles.body1Strong,\n pointerEvents: 'none',\n },\n calloutContentRoot: {\n maxWidth: '238px',\n },\n});\n\nexport const useHeatMapChartStyles = (props: HeatMapChartProps): HeatMapChartStyles => {\n const baseStyles = useStyles();\n\n return {\n root: mergeClasses(heatmapChartClassNames.root, baseStyles.root /*, props.styles?.root*/),\n text: mergeClasses(heatmapChartClassNames.text, baseStyles.text /*, props.styles?.text*/),\n calloutContentRoot: mergeClasses(\n heatmapChartClassNames.calloutContentRoot,\n baseStyles.calloutContentRoot /*, props.styles?.calloutContentRoot*/,\n ),\n };\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","heatmapChartClassNames","root","text","calloutContentRoot","xAxis","yAxis","legendContainer","hover","descriptionMessage","tooltip","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","body1Strong","pointerEvents","maxWidth","useHeatMapChartStyles","props","baseStyles"],"mappings":";;;;;;;;;;;IAKaG,sBAAAA;;;yBA8BAsB;;;;uBAnC4B,iBAAiB;4BAGzB,wBAAwB;AAElD,+BAAmE;IACxErB,MAAM;IACNC,MAAM;IACNC,oBAAoB;IACpBC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,SAAS;IACTC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AACF,MAAMC,gBAAYrB,iBAAAA,EAAW;IAC3BI,MAAM,CAAC;IACPC,MAAM;QACJ,GAAGH,4BAAAA,CAAiBoB,WAAW;QAC/BC,eAAe;IACjB;IACAjB,oBAAoB;QAClBkB,UAAU;IACZ;AACF;AAEO,MAAMC,wBAAwB,CAACC;IACpC,MAAMC,aAAaN;IAEnB,OAAO;QACLjB,UAAMH,mBAAAA,EAAaE,uBAAuBC,IAAI,EAAEuB,WAAWvB,IAAI,CAAC,sBAAsB;QACtFC,UAAMJ,mBAAAA,EAAaE,uBAAuBE,IAAI,EAAEsB,WAAWtB,IAAI,CAAC,sBAAsB;QACtFC,wBAAoBL,mBAAAA,EAClBE,uBAAuBG,kBAAkB,EACzCqB,WAAWrB,kBAAkB,CAAC,oCAAoC;IAEtE;AACF,EAAE"}
@@ -38,7 +38,8 @@ const hbcWithAxisClassNames = {
38
38
  shapeStyles: '',
39
39
  chartWrapper: '',
40
40
  svgTooltip: '',
41
- chart: ''
41
+ chart: '',
42
+ axisAnnotation: ''
42
43
  };
43
44
  const useStyles = /*#__PURE__*/ (0, _react.__styles)({
44
45
  opacityChangeOnHover: {
@@ -1 +1 @@
1
- {"version":3,"sources":["useHorizontalBarChartWithAxisStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const hbcWithAxisClassNames = {\n opacityChangeOnHover: 'fui-hbcwa__opacityChangeOnHover',\n xAxisTicks: 'fui-hbcwa__xAxisTicks',\n tooltip: 'fui-hbcwa__tooltip',\n chartLabel: '',\n xAxisDomain: '',\n xAxisText: '',\n yAxisDomain: '',\n yAxisTicks: '',\n yAxisText: '',\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n axisTitle: '',\n chartTitle: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: ''\n};\nconst useStyles = makeStyles({\n opacityChangeOnHover: {\n opacity: 0.1\n },\n xAxisTicks: {}\n});\n/**\n * Apply styling to the HorizontalBarChartWithAxis slots based on the state\n */ export const useHorizontalBarChartWithAxisStyles = (props)=>{\n const baseStyles = useStyles();\n return {\n opacityChangeOnHover: mergeClasses(hbcWithAxisClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover),\n xAxisTicks: mergeClasses(hbcWithAxisClassNames.xAxisTicks, baseStyles.xAxisTicks)\n };\n};\n"],"names":["__styles","mergeClasses","hbcWithAxisClassNames","opacityChangeOnHover","xAxisTicks","tooltip","chartLabel","xAxisDomain","xAxisText","yAxisDomain","yAxisTicks","yAxisText","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","abs64n","d","useHorizontalBarChartWithAxisStyles","props","baseStyles"],"mappings":";;;;;;;;;;;IACaE,qBAAqB;;;IA+BjByB,mCAAmC;;;;uBAhCX,gBAAgB;AAClD,8BAA8B;IACjCxB,oBAAoB,EAAE,iCAAiC;IACvDC,UAAU,EAAE,uBAAuB;IACnCC,OAAO,EAAE,oBAAoB;IAC7BC,UAAU,EAAE,EAAE;IACdC,WAAW,EAAE,EAAE;IACfC,SAAS,EAAE,EAAE;IACbC,WAAW,EAAE,EAAE;IACfC,UAAU,EAAE,EAAE;IACdC,SAAS,EAAE,EAAE;IACbC,IAAI,EAAE,EAAE;IACRC,KAAK,EAAE,EAAE;IACTC,KAAK,EAAE,EAAE;IACTC,eAAe,EAAE,EAAE;IACnBC,KAAK,EAAE,EAAE;IACTC,kBAAkB,EAAE,EAAE;IACtBC,SAAS,EAAE,EAAE;IACbC,UAAU,EAAE,EAAE;IACdC,WAAW,EAAE,EAAE;IACfC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGxB,eAAA,EAAA;IAAAG,oBAAA,EAAA;QAAAsB,MAAA,EAAA;IAAA;IAAArB,UAAA,EAAA,CAAA;AAAA,GAAA;IAAAsB,CAAA,EAAA;QAAA;KAAA;AAAA,CAKjB,CAAC;AAGS,6CAA6CE,KAAK,IAAG;IAC5D,MAAMC,UAAU,GAAGL,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHrB,oBAAoB,MAAEF,mBAAY,EAACC,qBAAqB,CAACC,oBAAoB,EAAE0B,UAAU,CAAC1B,oBAAoB,CAAC;QAC/GC,UAAU,MAAEH,mBAAY,EAACC,qBAAqB,CAACE,UAAU,EAAEyB,UAAU,CAACzB,UAAU;IACpF,CAAC;AACL,CAAC"}
1
+ {"version":3,"sources":["useHorizontalBarChartWithAxisStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const hbcWithAxisClassNames = {\n opacityChangeOnHover: 'fui-hbcwa__opacityChangeOnHover',\n xAxisTicks: 'fui-hbcwa__xAxisTicks',\n tooltip: 'fui-hbcwa__tooltip',\n chartLabel: '',\n xAxisDomain: '',\n xAxisText: '',\n yAxisDomain: '',\n yAxisTicks: '',\n yAxisText: '',\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n axisTitle: '',\n chartTitle: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: '',\n axisAnnotation: ''\n};\nconst useStyles = makeStyles({\n opacityChangeOnHover: {\n opacity: 0.1\n },\n xAxisTicks: {}\n});\n/**\n * Apply styling to the HorizontalBarChartWithAxis slots based on the state\n */ export const useHorizontalBarChartWithAxisStyles = (props)=>{\n const baseStyles = useStyles();\n return {\n opacityChangeOnHover: mergeClasses(hbcWithAxisClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover),\n xAxisTicks: mergeClasses(hbcWithAxisClassNames.xAxisTicks, baseStyles.xAxisTicks)\n };\n};\n"],"names":["__styles","mergeClasses","hbcWithAxisClassNames","opacityChangeOnHover","xAxisTicks","tooltip","chartLabel","xAxisDomain","xAxisText","yAxisDomain","yAxisTicks","yAxisText","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","abs64n","d","useHorizontalBarChartWithAxisStyles","props","baseStyles"],"mappings":";;;;;;;;;;;IACaE,qBAAqB;;;uCAgCkB;;;;uBAjCX,gBAAgB;AAClD,8BAA8B;IACjCC,oBAAoB,EAAE,iCAAiC;IACvDC,UAAU,EAAE,uBAAuB;IACnCC,OAAO,EAAE,oBAAoB;IAC7BC,UAAU,EAAE,EAAE;IACdC,WAAW,EAAE,EAAE;IACfC,SAAS,EAAE,EAAE;IACbC,WAAW,EAAE,EAAE;IACfC,UAAU,EAAE,EAAE;IACdC,SAAS,EAAE,EAAE;IACbC,IAAI,EAAE,EAAE;IACRC,KAAK,EAAE,EAAE;IACTC,KAAK,EAAE,EAAE;IACTC,eAAe,EAAE,EAAE;IACnBC,KAAK,EAAE,EAAE;IACTC,kBAAkB,EAAE,EAAE;IACtBC,SAAS,EAAE,EAAE;IACbC,UAAU,EAAE,EAAE;IACdC,WAAW,EAAE,EAAE;IACfC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE,EAAE;IACTC,cAAc,EAAE;AACpB,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGzB,eAAA,EAAA;IAAAG,oBAAA,EAAA;QAAAuB,MAAA,EAAA;IAAA;IAAAtB,UAAA,EAAA,CAAA;AAAA,GAAA;IAAAuB,CAAA,EAAA;QAAA;KAAA;AAAA,CAKjB,CAAC;AAGS,MAAMC,uCAAuCC,KAAK,IAAG;IAC5D,MAAMC,UAAU,GAAGL,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHtB,oBAAoB,MAAEF,mBAAY,EAACC,qBAAqB,CAACC,oBAAoB,EAAE2B,UAAU,CAAC3B,oBAAoB,CAAC;QAC/GC,UAAU,MAAEH,mBAAY,EAACC,qBAAqB,CAACE,UAAU,EAAE0B,UAAU,CAAC1B,UAAU;IACpF,CAAC;AACL,CAAC"}
@@ -38,7 +38,8 @@ const hbcWithAxisClassNames = {
38
38
  shapeStyles: '',
39
39
  chartWrapper: '',
40
40
  svgTooltip: '',
41
- chart: ''
41
+ chart: '',
42
+ axisAnnotation: ''
42
43
  };
43
44
  const useStyles = (0, _react.makeStyles)({
44
45
  opacityChangeOnHover: {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { HorizontalBarChartWithAxisProps, HorizontalBarChartWithAxisStyles } from './index';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const hbcWithAxisClassNames: SlotClassNames<HorizontalBarChartWithAxisStyles> = {\n opacityChangeOnHover: 'fui-hbcwa__opacityChangeOnHover',\n xAxisTicks: 'fui-hbcwa__xAxisTicks',\n tooltip: 'fui-hbcwa__tooltip',\n chartLabel: '',\n xAxisDomain: '',\n xAxisText: '',\n yAxisDomain: '',\n yAxisTicks: '',\n yAxisText: '',\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n axisTitle: '',\n chartTitle: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: '',\n};\n\nconst useStyles = makeStyles({\n opacityChangeOnHover: {\n opacity: 0.1, // supports custom opacity\n },\n\n xAxisTicks: {},\n});\n\n/**\n * Apply styling to the HorizontalBarChartWithAxis slots based on the state\n */\nexport const useHorizontalBarChartWithAxisStyles = (\n props: HorizontalBarChartWithAxisProps,\n): HorizontalBarChartWithAxisStyles => {\n const baseStyles = useStyles();\n\n return {\n opacityChangeOnHover: mergeClasses(hbcWithAxisClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover),\n xAxisTicks: mergeClasses(hbcWithAxisClassNames.xAxisTicks, baseStyles.xAxisTicks),\n };\n};\n"],"names":["makeStyles","mergeClasses","hbcWithAxisClassNames","opacityChangeOnHover","xAxisTicks","tooltip","chartLabel","xAxisDomain","xAxisText","yAxisDomain","yAxisTicks","yAxisText","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","useStyles","opacity","useHorizontalBarChartWithAxisStyles","props","baseStyles"],"mappings":";;;;;;;;;;;IAIaE,qBAAAA;;;uCAmCAwB;eAAAA;;;uBAvC4B,iBAAiB;AAInD,8BAAgF;IACrFvB,sBAAsB;IACtBC,YAAY;IACZC,SAAS;IACTC,YAAY;IACZC,aAAa;IACbC,WAAW;IACXC,aAAa;IACbC,YAAY;IACZC,WAAW;IACXC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;AACT,EAAE;AAEF,MAAMC,gBAAYxB,iBAAAA,EAAW;IAC3BG,sBAAsB;QACpBsB,SAAS;IACX;IAEArB,YAAY,CAAC;AACf;AAKO,4CAA4C,CACjDuB;IAEA,MAAMC,aAAaJ;IAEnB,OAAO;QACLrB,0BAAsBF,mBAAAA,EAAaC,sBAAsBC,oBAAoB,EAAEyB,WAAWzB,oBAAoB;QAC9GC,gBAAYH,mBAAAA,EAAaC,sBAAsBE,UAAU,EAAEwB,WAAWxB,UAAU;IAClF;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { HorizontalBarChartWithAxisProps, HorizontalBarChartWithAxisStyles } from './index';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const hbcWithAxisClassNames: SlotClassNames<HorizontalBarChartWithAxisStyles> = {\n opacityChangeOnHover: 'fui-hbcwa__opacityChangeOnHover',\n xAxisTicks: 'fui-hbcwa__xAxisTicks',\n tooltip: 'fui-hbcwa__tooltip',\n chartLabel: '',\n xAxisDomain: '',\n xAxisText: '',\n yAxisDomain: '',\n yAxisTicks: '',\n yAxisText: '',\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n axisTitle: '',\n chartTitle: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: '',\n axisAnnotation: '',\n};\n\nconst useStyles = makeStyles({\n opacityChangeOnHover: {\n opacity: 0.1, // supports custom opacity\n },\n\n xAxisTicks: {},\n});\n\n/**\n * Apply styling to the HorizontalBarChartWithAxis slots based on the state\n */\nexport const useHorizontalBarChartWithAxisStyles = (\n props: HorizontalBarChartWithAxisProps,\n): HorizontalBarChartWithAxisStyles => {\n const baseStyles = useStyles();\n\n return {\n opacityChangeOnHover: mergeClasses(hbcWithAxisClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover),\n xAxisTicks: mergeClasses(hbcWithAxisClassNames.xAxisTicks, baseStyles.xAxisTicks),\n };\n};\n"],"names":["makeStyles","mergeClasses","hbcWithAxisClassNames","opacityChangeOnHover","xAxisTicks","tooltip","chartLabel","xAxisDomain","xAxisText","yAxisDomain","yAxisTicks","yAxisText","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","opacity","useHorizontalBarChartWithAxisStyles","props","baseStyles"],"mappings":";;;;;;;;;;;IAIaE,qBAAAA;;;uCAoCAyB;eAAAA;;;uBAxC4B,iBAAiB;AAInD,8BAAgF;IACrFxB,sBAAsB;IACtBC,YAAY;IACZC,SAAS;IACTC,YAAY;IACZC,aAAa;IACbC,WAAW;IACXC,aAAa;IACbC,YAAY;IACZC,WAAW;IACXC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAEF,MAAMC,gBAAYzB,iBAAAA,EAAW;IAC3BG,sBAAsB;QACpBuB,SAAS;IACX;IAEAtB,YAAY,CAAC;AACf;AAKO,4CAA4C,CACjDwB;IAEA,MAAMC,aAAaJ;IAEnB,OAAO;QACLtB,0BAAsBF,mBAAAA,EAAaC,sBAAsBC,oBAAoB,EAAE0B,WAAW1B,oBAAoB;QAC9GC,gBAAYH,mBAAAA,EAAaC,sBAAsBE,UAAU,EAAEyB,WAAWzB,UAAU;IAClF;AACF,EAAE"}
@@ -33,7 +33,8 @@ const linechartClassNames = {
33
33
  shapeStyles: 'fui-line__shapeStyles',
34
34
  chartWrapper: 'fui-line__chartWrapper',
35
35
  svgTooltip: '',
36
- chart: ''
36
+ chart: '',
37
+ axisAnnotation: ''
37
38
  };
38
39
  /**
39
40
  * Base Styles
@@ -1 +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};\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","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;;;sBAkDD;;;;uBAvDkB,gBAAgB;AAK1D,4BAA4B;IACnCC,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;AACX,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGtB,eAAA,EAAA;IAAAM,OAAA,EAAA;QAAAiB,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;IAAA/B,UAAA,EAAA;QAAAgC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAhC,WAAA,EAAA;QAAAwB,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,MAAMC,sBAAsBC,KAAK,IAAG;IAC3C,MAAMC,UAAU,GAAGzB,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHhB,OAAO,MAAEL,mBAAY,EAACI,mBAAmB,CAACC,OAAO,EAAEyC,UAAU,CAACzC,OAAO,CAAC,uBAAA,EAA0B,CAAC;QACjGC,UAAU,MAAEN,mBAAY,EAACI,mBAAmB,CAACE,UAAU,EAAEwC,UAAU,CAACxC,UAAU,CAAC,0BAAA,EAA6B,CAAC;QAC7GC,WAAW,MAAEP,mBAAY,EAACI,mBAAmB,CAACG,WAAW,EAAEuC,UAAU,CAACvC,WAAW,CAAC,2BAAA,EAA8B;IACpH,CAAC;AACL,CAAC"}
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"}
@@ -35,7 +35,8 @@ const linechartClassNames = {
35
35
  shapeStyles: 'fui-line__shapeStyles',
36
36
  chartWrapper: 'fui-line__chartWrapper',
37
37
  svgTooltip: '',
38
- chart: ''
38
+ chart: '',
39
+ axisAnnotation: ''
39
40
  };
40
41
  /**
41
42
  * Base Styles
@@ -1 +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};\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","useStyles","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","fill","colorNeutralBackground1","borderRadius","borderRadiusSmall","pointerEvents","stroke","colorNeutralForeground1","textAnchor","selectors","useLineChartStyles","props","baseStyles"],"mappings":";;;;;;;;;;;IASaK,mBAAAA;;;sBAsDAmC;eAAAA;;;uBA/DwC,iBAAiB;4BAC/C,wBAAwB;uBAGV,wBAAwB;AAKtD,4BAA6D;IAClElC,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;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYtB,iBAAAA,EAAW;IAC3BM,SAAS;QACPiB,SAAS;QACTC,eAAe;QACf,GAAGtB,iBAAAA,CAAWuB,OAAO,CAACtB,kBAAAA,CAAOuB,kBAAkB,CAAC;QAChDC,UAAU;QACVC,WAAW;QACXC,KAAK1B,kBAAAA,CAAO2B,mBAAmB;QAC/BC,MAAM5B,kBAAAA,CAAO6B,uBAAuB;QACpCC,cAAc9B,kBAAAA,CAAO+B,iBAAiB;QACtCC,eAAe;IACjB;IACA5B,YAAY;QACV6B,QAAQjC,kBAAAA,CAAO6B,uBAAuB;QACtC,CAAC5B,2BAAAA,CAAqB,EAAE;YACtBgC,QAAQ;QACV;IACF;IACA5B,aAAa;QACXuB,MAAM5B,kBAAAA,CAAOkC,uBAAuB;QACpCC,YAAY;QACZC,WAAW;YACT,CAACnC,2BAAAA,CAAqB,EAAE;gBACtB2B,MAAM;YACR;QACF;IACF;AACF;AAKO,2BAA2B,CAACU;IACjC,MAAMC,aAAapB;IACnB,OAAO;QACLhB,SAASL,uBAAAA,EAAaI,oBAAoBC,OAAO,EAAEoC,WAAWpC,OAAO,CAAC,uBAAuB;QAC7FC,gBAAYN,mBAAAA,EAAaI,oBAAoBE,UAAU,EAAEmC,WAAWnC,UAAU,CAAC,0BAA0B;QACzGC,iBAAaP,mBAAAA,EAAaI,oBAAoBG,WAAW,EAAEkC,WAAWlC,WAAW,CAAC,2BAA2B;IAC/G;AACF,EAAE"}
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"}
@@ -163,21 +163,30 @@ const ScatterChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
163
163
  function _createLegends(data) {
164
164
  const { legendProps } = props;
165
165
  const isLegendMultiSelectEnabled = !!(legendProps && !!legendProps.canSelectMultipleLegends);
166
- const legendDataItems = data.map((point)=>{
167
- const color = point.color;
166
+ const mapLegendToPoints = {};
167
+ data.forEach((point)=>{
168
+ if (point.legend) {
169
+ if (!mapLegendToPoints[point.legend]) {
170
+ mapLegendToPoints[point.legend] = [];
171
+ }
172
+ mapLegendToPoints[point.legend].push(point);
173
+ }
174
+ });
175
+ const legendDataItems = Object.entries(mapLegendToPoints).map(([legendTitle, points])=>{
176
+ const representativePoint = points[0];
168
177
  // mapping data to the format Legends component needs
169
178
  const legend = {
170
- title: point.legend,
171
- color,
179
+ title: legendTitle,
180
+ color: representativePoint.color,
172
181
  onMouseOutAction: ()=>{
173
182
  setActiveLegend('');
174
183
  },
175
184
  hoverAction: ()=>{
176
185
  _handleChartMouseLeave();
177
- setActiveLegend(point.legend);
186
+ setActiveLegend(legendTitle);
178
187
  },
179
- ...point.legendShape && {
180
- shape: point.legendShape
188
+ ...representativePoint.legendShape && {
189
+ shape: representativePoint.legendShape
181
190
  }
182
191
  };
183
192
  return legend;
@@ -215,6 +224,12 @@ const ScatterChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
215
224
  return seriesColor;
216
225
  }
217
226
  }
227
+ function _getRangeForScatterMarkerSize(yScale, yPadding, xMin, xMax, xPadding) {
228
+ const extraXPixels = _isRTL ? _xAxisScale(xMax - xPadding) - _xAxisScale(xMax) : _xAxisScale(xMin + xPadding) - _xAxisScale(xMin);
229
+ const yMin = yScale.domain()[0];
230
+ const extraYPixels = yScale(yMin) - yScale(yMin + yPadding);
231
+ return Math.min(extraXPixels, extraYPixels);
232
+ }
218
233
  function _createPlot(xElement, containerHeight) {
219
234
  const series = [];
220
235
  if (isSelectedLegend) {
@@ -229,36 +244,32 @@ const ScatterChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
229
244
  return (0, _d3array.min)(point.data, (item)=>item.y);
230
245
  });
231
246
  const yPadding = (yMax - yMin) * 0.1;
232
- const yPaddingRange = Math.abs(_yAxisScale(yMin + yPadding) - _yAxisScale(yMin));
233
- let maxMarkerRange = 40;
234
- let xPaddingRange = 0;
247
+ let xPadding = 0;
248
+ let xMin = 0;
249
+ let xMax = 0;
235
250
  if (_xAxisType === _index1.XAxisTypes.StringAxis) {
236
251
  _xBandwidth = _xAxisScale.bandwidth() / 2;
237
- xPaddingRange = _xBandwidth;
238
252
  } else if (_xAxisType === _index1.XAxisTypes.DateAxis) {
239
- const xMin = (0, _d3array.min)(points, (point)=>{
253
+ xMin = (0, _d3array.min)(_points, (point)=>{
240
254
  return (0, _d3array.min)(point.data, (item)=>item.x);
241
- });
242
- const xMax = (0, _d3array.max)(points, (point)=>{
255
+ }).getTime();
256
+ xMax = (0, _d3array.max)(_points, (point)=>{
243
257
  return (0, _d3array.max)(point.data, (item)=>{
244
258
  return item.x;
245
259
  });
246
- });
247
- const xPadding = (xMax.getTime() - xMin.getTime()) * 0.1;
248
- xPaddingRange = Math.abs(_xAxisScale(new Date(xMin.getTime() + xPadding)) - _xAxisScale(xMin));
260
+ }).getTime();
261
+ xPadding = (xMax - xMin) * 0.1;
249
262
  } else {
250
- const xMin = (0, _d3array.min)(points, (point)=>{
263
+ xMin = (0, _d3array.min)(_points, (point)=>{
251
264
  return (0, _d3array.min)(point.data, (item)=>item.x);
252
265
  });
253
- const xMax = (0, _d3array.max)(points, (point)=>{
266
+ xMax = (0, _d3array.max)(_points, (point)=>{
254
267
  return (0, _d3array.max)(point.data, (item)=>{
255
268
  return item.x;
256
269
  });
257
270
  });
258
- const xPadding = (xMax - xMin) * 0.1;
259
- xPaddingRange = Math.abs(_xAxisScale(xMin + xPadding) - _xAxisScale(xMin));
271
+ xPadding = (xMax - xMin) * 0.1;
260
272
  }
261
- maxMarkerRange = Math.min(maxMarkerRange, Math.min(xPaddingRange, yPaddingRange));
262
273
  const maxMarkerSize = (0, _d3array.max)(_points, (point)=>{
263
274
  return (0, _d3array.max)(point.data, (item)=>{
264
275
  return item.markerSize;
@@ -270,20 +281,20 @@ const ScatterChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
270
281
  const seriesColor = _points[i].color;
271
282
  const verticaLineHeight = containerHeight - margins.bottom + 6;
272
283
  for(let j = 0; j < _points[i].data.length; j++){
284
+ var _points_i_data_j;
273
285
  const seriesId = `${_seriesId}_${i}_${j}`;
274
286
  const circleId = `${_circleId}_${i}_${j}`;
275
287
  const { x, y, xAxisCalloutData, xAxisCalloutAccessibilityData } = _points[i].data[j];
276
- let circleRadius = 3.5;
277
288
  const pointMarkerSize = _points[i].data[j].markerSize;
278
- if (pointMarkerSize !== undefined) {
279
- circleRadius = Math.min(pointMarkerSize * maxMarkerRange / maxMarkerSize, pointMarkerSize);
280
- }
289
+ const extraMaxPixels = _xAxisType !== _index1.XAxisTypes.StringAxis ? _getRangeForScatterMarkerSize(_yAxisScale, yPadding, xMin, xMax, xPadding) : 0;
290
+ const circleRadius = pointMarkerSize ? pointMarkerSize * extraMaxPixels / maxMarkerSize : activePoint === circleId ? 6 : 4;
281
291
  const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
282
292
  const currentPointHidden = _points[i].hideNonActiveDots && activePoint !== circleId;
283
- pointsForSeries.push(/*#__PURE__*/ _react.createElement("circle", {
293
+ 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;
294
+ pointsForSeries.push(/*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("circle", {
284
295
  id: circleId,
285
296
  key: circleId,
286
- r: circleRadius,
297
+ r: Math.max(circleRadius, 4),
287
298
  cx: _xAxisScale(x) + _xBandwidth,
288
299
  cy: _yAxisScale(y),
289
300
  "data-is-focusable": isLegendSelected,
@@ -299,7 +310,12 @@ const ScatterChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
299
310
  role: "img",
300
311
  "aria-label": _getAriaLabel(i, j),
301
312
  tabIndex: isLegendSelected ? 0 : undefined
302
- }));
313
+ }), ",", text && /*#__PURE__*/ _react.createElement("text", {
314
+ key: `${circleId}-label`,
315
+ x: _xAxisScale(x) + _xBandwidth,
316
+ y: _yAxisScale(y) + Math.max(circleRadius + 8, 16),
317
+ className: classes.markerLabel
318
+ }, text)));
303
319
  }
304
320
  series.push(/*#__PURE__*/ _react.createElement("g", {
305
321
  key: `series_${i}`,
@@ -426,6 +442,7 @@ const ScatterChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
426
442
  function _isChartEmpty() {
427
443
  return !(props.data && props.data.scatterChartData && props.data.scatterChartData.length > 0 && props.data.scatterChartData.filter((item)=>item.data.length).length > 0);
428
444
  }
445
+ const _getMinMaxofXAxis = _react.useCallback((points, yAxisType)=>_getNumericMinMaxOfY(points, yAxisType), []);
429
446
  const { legendProps, tickValues, tickFormat } = props;
430
447
  _points = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);
431
448
  let points = _points;
@@ -473,7 +490,7 @@ const ScatterChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
473
490
  getmargins: _getMargins,
474
491
  getGraphData: _initializeScatterChartData,
475
492
  xAxisType: _xAxisType,
476
- getMinMaxOfYAxis: _getNumericMinMaxOfY,
493
+ getMinMaxOfYAxis: _getMinMaxofXAxis,
477
494
  getDomainNRangeValues: _getDomainNRangeValues,
478
495
  createYAxis: _index1.createNumericYAxis,
479
496
  createStringYAxis: _index1.createStringYAxis,