@fluentui/react-charts 0.0.0-nightly-20250818-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 (123) hide show
  1. package/CHANGELOG.md +15 -15
  2. package/dist/index.d.ts +65 -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 -112
  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 +315 -55
  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/LineChart.js +30 -9
  39. package/lib/components/LineChart/LineChart.js.map +1 -1
  40. package/lib/components/LineChart/LineChart.types.js.map +1 -1
  41. package/lib/components/LineChart/useLineChartStyles.styles.js +10 -3
  42. package/lib/components/LineChart/useLineChartStyles.styles.js.map +1 -1
  43. package/lib/components/LineChart/useLineChartStyles.styles.raw.js +14 -2
  44. package/lib/components/LineChart/useLineChartStyles.styles.raw.js.map +1 -1
  45. package/lib/components/ScatterChart/ScatterChart.js +54 -37
  46. package/lib/components/ScatterChart/ScatterChart.js.map +1 -1
  47. package/lib/components/ScatterChart/ScatterChart.types.js.map +1 -1
  48. package/lib/components/ScatterChart/useScatterChartStyles.styles.js +21 -4
  49. package/lib/components/ScatterChart/useScatterChartStyles.styles.js.map +1 -1
  50. package/lib/components/ScatterChart/useScatterChartStyles.styles.raw.js +16 -3
  51. package/lib/components/ScatterChart/useScatterChartStyles.styles.raw.js.map +1 -1
  52. package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.js +2 -1
  53. package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.js.map +1 -1
  54. package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js +2 -1
  55. package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js.map +1 -1
  56. package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js +2 -1
  57. package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js.map +1 -1
  58. package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js +2 -1
  59. package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js.map +1 -1
  60. package/lib/types/DataPoint.js.map +1 -1
  61. package/lib/utilities/utilities.js +4 -1
  62. package/lib/utilities/utilities.js.map +1 -1
  63. package/lib-commonjs/components/AreaChart/AreaChart.js +4 -1
  64. package/lib-commonjs/components/AreaChart/AreaChart.js.map +1 -1
  65. package/lib-commonjs/components/AreaChart/useAreaChartStyles.styles.js +2 -1
  66. package/lib-commonjs/components/AreaChart/useAreaChartStyles.styles.js.map +1 -1
  67. package/lib-commonjs/components/AreaChart/useAreaChartStyles.styles.raw.js +2 -1
  68. package/lib-commonjs/components/AreaChart/useAreaChartStyles.styles.raw.js.map +1 -1
  69. package/lib-commonjs/components/CommonComponents/CartesianChart.js +48 -3
  70. package/lib-commonjs/components/CommonComponents/CartesianChart.js.map +1 -1
  71. package/lib-commonjs/components/CommonComponents/CartesianChart.types.js.map +1 -1
  72. package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js +13 -0
  73. package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js.map +1 -1
  74. package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.raw.js +12 -0
  75. package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.raw.js.map +1 -1
  76. package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js +171 -110
  77. package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  78. package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js +9 -1
  79. package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -1
  80. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +331 -61
  81. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  82. package/lib-commonjs/components/GanttChart/useGanttChartStyles.styles.js +2 -1
  83. package/lib-commonjs/components/GanttChart/useGanttChartStyles.styles.js.map +1 -1
  84. package/lib-commonjs/components/GanttChart/useGanttChartStyles.styles.raw.js +2 -1
  85. package/lib-commonjs/components/GanttChart/useGanttChartStyles.styles.raw.js.map +1 -1
  86. package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js +2 -1
  87. package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js.map +1 -1
  88. package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js +2 -1
  89. package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js.map +1 -1
  90. package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.js +2 -1
  91. package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.js.map +1 -1
  92. package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js +2 -1
  93. package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js.map +1 -1
  94. package/lib-commonjs/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.js +2 -1
  95. package/lib-commonjs/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.js.map +1 -1
  96. package/lib-commonjs/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.raw.js +2 -1
  97. package/lib-commonjs/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.raw.js.map +1 -1
  98. package/lib-commonjs/components/LineChart/LineChart.js +30 -9
  99. package/lib-commonjs/components/LineChart/LineChart.js.map +1 -1
  100. package/lib-commonjs/components/LineChart/LineChart.types.js.map +1 -1
  101. package/lib-commonjs/components/LineChart/useLineChartStyles.styles.js +12 -3
  102. package/lib-commonjs/components/LineChart/useLineChartStyles.styles.js.map +1 -1
  103. package/lib-commonjs/components/LineChart/useLineChartStyles.styles.raw.js +14 -2
  104. package/lib-commonjs/components/LineChart/useLineChartStyles.styles.raw.js.map +1 -1
  105. package/lib-commonjs/components/ScatterChart/ScatterChart.js +54 -37
  106. package/lib-commonjs/components/ScatterChart/ScatterChart.js.map +1 -1
  107. package/lib-commonjs/components/ScatterChart/ScatterChart.types.js.map +1 -1
  108. package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.js +30 -3
  109. package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.js.map +1 -1
  110. package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.raw.js +15 -2
  111. package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.raw.js.map +1 -1
  112. package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.js +2 -1
  113. package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.js.map +1 -1
  114. package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js +2 -1
  115. package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js.map +1 -1
  116. package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js +2 -1
  117. package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js.map +1 -1
  118. package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js +2 -1
  119. package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js.map +1 -1
  120. package/lib-commonjs/types/DataPoint.js.map +1 -1
  121. package/lib-commonjs/utilities/utilities.js +1 -0
  122. package/lib-commonjs/utilities/utilities.js.map +1 -1
  123. package/package.json +12 -12
package/lib-commonjs/components/GanttChart/useGanttChartStyles.styles.js CHANGED
@@ -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 {};
package/lib-commonjs/components/GanttChart/useGanttChartStyles.styles.js.map CHANGED
@@ -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"}
package/lib-commonjs/components/GanttChart/useGanttChartStyles.styles.raw.js CHANGED
@@ -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 {};
package/lib-commonjs/components/GanttChart/useGanttChartStyles.styles.raw.js.map CHANGED
@@ -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"}
package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js CHANGED
@@ -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: {
package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js.map CHANGED
@@ -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"}
package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js CHANGED
@@ -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: {
package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js.map CHANGED
@@ -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"}
package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.js CHANGED
@@ -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: {},
package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.js.map CHANGED
@@ -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"}
package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js CHANGED
@@ -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: {},
package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js.map CHANGED
@@ -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"}
package/lib-commonjs/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.js CHANGED
@@ -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: {
package/lib-commonjs/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.js.map CHANGED
@@ -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"}
package/lib-commonjs/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.raw.js CHANGED
@@ -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: {
package/lib-commonjs/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.raw.js.map CHANGED
@@ -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"}
package/lib-commonjs/components/LineChart/LineChart.js CHANGED
@@ -442,7 +442,8 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
442
442
  const circleId = `${_circleId}_${i}`;
443
443
  const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
444
444
  const currentMarkerSize = _points[i].data[0].markerSize;
445
- pointsForLine.push(/*#__PURE__*/ _react.createElement("circle", {
445
+ var _points_i_data__text;
446
+ pointsForLine.push(/*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("circle", {
446
447
  id: circleId,
447
448
  key: circleId,
448
449
  r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : activePoint === circleId ? 5.5 : 3.5,
@@ -457,7 +458,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
457
458
  strokeWidth: activePoint === circleId ? DEFAULT_LINE_STROKE_SIZE : 0,
458
459
  stroke: activePoint === circleId ? lineColor : '',
459
460
  role: "img",
460
- "aria-label": _getAriaLabel(i, 0),
461
+ "aria-label": (_points_i_data__text = _points[i].data[0].text) !== null && _points_i_data__text !== void 0 ? _points_i_data__text : _getAriaLabel(i, 0),
461
462
  "data-is-focusable": isLegendSelected,
462
463
  ref: (e)=>{
463
464
  _refCallback(e, circleId);
@@ -465,7 +466,13 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
465
466
  onFocus: (event)=>_handleFocus(event, circleId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
466
467
  onBlur: _handleMouseOut,
467
468
  ..._getClickHandler(_points[i].data[0].onDataPointClick)
468
- }));
469
+ }), _points[i].data[0].text && /*#__PURE__*/ _react.createElement("text", {
470
+ key: `${circleId}-label`,
471
+ x: _xAxisScale(x1),
472
+ y: yScale(y1) + Math.max(currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 3.5, 4) + 12,
473
+ className: classes.markerLabel,
474
+ opacity: isLegendSelected ? 1 : 0.1
475
+ }, _points[i].data[0].text)));
469
476
  }
470
477
  let gapIndex = 0;
471
478
  var _points_i_gaps_sort;
@@ -567,7 +574,8 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
567
574
  const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
568
575
  const currentPointHidden = _points[i].hideNonActiveDots && activePoint !== circleId;
569
576
  let currentMarkerSize = _points[i].data[j - 1].markerSize;
570
- pointsForLine.push(((_points_i_lineOptions8 = _points[i].lineOptions) === null || _points_i_lineOptions8 === void 0 ? void 0 : (_points_i_lineOptions_mode = _points_i_lineOptions8.mode) === null || _points_i_lineOptions_mode === void 0 ? void 0 : _points_i_lineOptions_mode.includes('markers')) ? /*#__PURE__*/ _react.createElement("circle", {
577
+ var _points_i_data__text1;
578
+ pointsForLine.push(((_points_i_lineOptions8 = _points[i].lineOptions) === null || _points_i_lineOptions8 === void 0 ? void 0 : (_points_i_lineOptions_mode = _points_i_lineOptions8.mode) === null || _points_i_lineOptions_mode === void 0 ? void 0 : _points_i_lineOptions_mode.includes('markers')) ? /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("circle", {
571
579
  id: circleId,
572
580
  key: circleId,
573
581
  r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
@@ -585,8 +593,14 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
585
593
  stroke: lineColor,
586
594
  strokeWidth: strokeWidth,
587
595
  role: "img",
588
- "aria-label": _getAriaLabel(i, j - 1)
589
- }) : /*#__PURE__*/ _react.createElement("path", {
596
+ "aria-label": (_points_i_data__text1 = _points[i].data[j - 1].text) !== null && _points_i_data__text1 !== void 0 ? _points_i_data__text1 : _getAriaLabel(i, j - 1)
597
+ }), _points[i].data[j - 1].text && /*#__PURE__*/ _react.createElement("text", {
598
+ key: `${circleId}-label`,
599
+ x: _xAxisScale(x1),
600
+ y: yScale(y1) + 12,
601
+ fontSize: 12,
602
+ className: classes.markerLabel
603
+ }, _points[i].data[j - 1].text)) : /*#__PURE__*/ _react.createElement("path", {
590
604
  id: circleId,
591
605
  key: circleId,
592
606
  d: path,
@@ -614,9 +628,10 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
614
628
  path = _getPath(_xAxisScale(x2), yScale(y2), lastCircleId, j, true, _points[i].index);
615
629
  const { xAxisCalloutData: lastCirlceXCallout, xAxisCalloutAccessibilityData: lastCirlceXCalloutAccessibilityData } = _points[i].data[j];
616
630
  currentMarkerSize = _points[i].data[j].markerSize;
631
+ var _points_i_data_j_text;
617
632
  pointsForLine.push(/*#__PURE__*/ _react.createElement(_react.Fragment, {
618
633
  key: `${lastCircleId}_container`
619
- }, ((_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : (_points_i_lineOptions_mode2 = _points_i_lineOptions10.mode) === null || _points_i_lineOptions_mode2 === void 0 ? void 0 : _points_i_lineOptions_mode2.includes('markers')) ? /*#__PURE__*/ _react.createElement("circle", {
634
+ }, ((_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : (_points_i_lineOptions_mode2 = _points_i_lineOptions10.mode) === null || _points_i_lineOptions_mode2 === void 0 ? void 0 : _points_i_lineOptions_mode2.includes('markers')) ? /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("circle", {
620
635
  id: lastCircleId,
621
636
  key: lastCircleId,
622
637
  r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
@@ -634,8 +649,14 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
634
649
  stroke: lineColor,
635
650
  strokeWidth: strokeWidth,
636
651
  role: "img",
637
- "aria-label": _getAriaLabel(i, j)
638
- }) : /*#__PURE__*/ _react.createElement("path", {
652
+ "aria-label": (_points_i_data_j_text = _points[i].data[j].text) !== null && _points_i_data_j_text !== void 0 ? _points_i_data_j_text : _getAriaLabel(i, j)
653
+ }), _points[i].data[j].text && /*#__PURE__*/ _react.createElement("text", {
654
+ key: `${lastCircleId}-label`,
655
+ x: _xAxisScale(x2),
656
+ y: yScale(y2) + 12,
657
+ fontSize: 12,
658
+ className: classes.markerLabel
659
+ }, _points[i].data[j].text)) : /*#__PURE__*/ _react.createElement("path", {
639
660
  id: lastCircleId,
640
661
  key: lastCircleId,
641
662
  d: path,