@fluentui/react-charts 0.0.0-nightly-20251106-0410.1 → 0.0.0-nightly-20251110-0407.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 (223) hide show
  1. package/CHANGELOG.md +31 -13
  2. package/dist/index.d.ts +213 -2
  3. package/lib/AnnotationOnlyChart.js +1 -0
  4. package/lib/AnnotationOnlyChart.js.map +1 -0
  5. package/lib/components/AnnotationOnlyChart/AnnotationOnlyChart.js +208 -0
  6. package/lib/components/AnnotationOnlyChart/AnnotationOnlyChart.js.map +1 -0
  7. package/lib/components/AnnotationOnlyChart/AnnotationOnlyChart.types.js +1 -0
  8. package/lib/components/AnnotationOnlyChart/AnnotationOnlyChart.types.js.map +1 -0
  9. package/lib/components/AnnotationOnlyChart/index.js +2 -0
  10. package/lib/components/AnnotationOnlyChart/index.js.map +1 -0
  11. package/lib/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.js +31 -0
  12. package/lib/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.js.map +1 -0
  13. package/lib/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.raw.js +23 -0
  14. package/lib/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.raw.js.map +1 -0
  15. package/lib/components/AreaChart/useAreaChartStyles.styles.js +3 -1
  16. package/lib/components/AreaChart/useAreaChartStyles.styles.js.map +1 -1
  17. package/lib/components/AreaChart/useAreaChartStyles.styles.raw.js +3 -1
  18. package/lib/components/AreaChart/useAreaChartStyles.styles.raw.js.map +1 -1
  19. package/lib/components/ChartTable/ChartTable.js +3 -1
  20. package/lib/components/ChartTable/ChartTable.js.map +1 -1
  21. package/lib/components/CommonComponents/Annotations/ChartAnnotationLayer.js +617 -0
  22. package/lib/components/CommonComponents/Annotations/ChartAnnotationLayer.js.map +1 -0
  23. package/lib/components/CommonComponents/Annotations/ChartAnnotationLayer.types.js +1 -0
  24. package/lib/components/CommonComponents/Annotations/ChartAnnotationLayer.types.js.map +1 -0
  25. package/lib/components/CommonComponents/Annotations/index.js +2 -0
  26. package/lib/components/CommonComponents/Annotations/index.js.map +1 -0
  27. package/lib/components/CommonComponents/Annotations/useChartAnnotationLayer.styles.js +173 -0
  28. package/lib/components/CommonComponents/Annotations/useChartAnnotationLayer.styles.js.map +1 -0
  29. package/lib/components/CommonComponents/Annotations/useChartAnnotationLayer.styles.raw.js +126 -0
  30. package/lib/components/CommonComponents/Annotations/useChartAnnotationLayer.styles.raw.js.map +1 -0
  31. package/lib/components/CommonComponents/CartesianChart.js +56 -27
  32. package/lib/components/CommonComponents/CartesianChart.js.map +1 -1
  33. package/lib/components/CommonComponents/CartesianChart.types.js.map +1 -1
  34. package/lib/components/CommonComponents/index.js +2 -0
  35. package/lib/components/CommonComponents/index.js.map +1 -1
  36. package/lib/components/CommonComponents/useCartesianChartStyles.styles.js +17 -4
  37. package/lib/components/CommonComponents/useCartesianChartStyles.styles.js.map +1 -1
  38. package/lib/components/CommonComponents/useCartesianChartStyles.styles.raw.js +14 -1
  39. package/lib/components/CommonComponents/useCartesianChartStyles.styles.raw.js.map +1 -1
  40. package/lib/components/DeclarativeChart/DeclarativeChart.js +39 -19
  41. package/lib/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  42. package/lib/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -1
  43. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +571 -6
  44. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  45. package/lib/components/DonutChart/DonutChart.js +12 -7
  46. package/lib/components/DonutChart/DonutChart.js.map +1 -1
  47. package/lib/components/FunnelChart/FunnelChart.js +5 -5
  48. package/lib/components/FunnelChart/FunnelChart.js.map +1 -1
  49. package/lib/components/GanttChart/useGanttChartStyles.styles.js +3 -1
  50. package/lib/components/GanttChart/useGanttChartStyles.styles.js.map +1 -1
  51. package/lib/components/GanttChart/useGanttChartStyles.styles.raw.js +3 -1
  52. package/lib/components/GanttChart/useGanttChartStyles.styles.raw.js.map +1 -1
  53. package/lib/components/GaugeChart/GaugeChart.js +3 -1
  54. package/lib/components/GaugeChart/GaugeChart.js.map +1 -1
  55. package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js +3 -1
  56. package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js.map +1 -1
  57. package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js +3 -1
  58. package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js.map +1 -1
  59. package/lib/components/HeatMapChart/HeatMapChart.js +5 -5
  60. package/lib/components/HeatMapChart/HeatMapChart.js.map +1 -1
  61. package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.js +3 -1
  62. package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.js.map +1 -1
  63. package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js +3 -1
  64. package/lib/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js.map +1 -1
  65. package/lib/components/HorizontalBarChart/HorizontalBarChart.js +3 -1
  66. package/lib/components/HorizontalBarChart/HorizontalBarChart.js.map +1 -1
  67. package/lib/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.js +3 -1
  68. package/lib/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.js.map +1 -1
  69. package/lib/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.raw.js +3 -1
  70. package/lib/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.raw.js.map +1 -1
  71. package/lib/components/Legends/Legends.js +3 -1
  72. package/lib/components/Legends/Legends.js.map +1 -1
  73. package/lib/components/Legends/Legends.types.js.map +1 -1
  74. package/lib/components/LineChart/LineChart.js +5 -4
  75. package/lib/components/LineChart/LineChart.js.map +1 -1
  76. package/lib/components/LineChart/eventAnnotation/Textbox.js.map +1 -1
  77. package/lib/components/LineChart/useLineChartStyles.styles.js +3 -1
  78. package/lib/components/LineChart/useLineChartStyles.styles.js.map +1 -1
  79. package/lib/components/LineChart/useLineChartStyles.styles.raw.js +3 -1
  80. package/lib/components/LineChart/useLineChartStyles.styles.raw.js.map +1 -1
  81. package/lib/components/ResponsiveContainer/ResponsiveContainer.js +1 -1
  82. package/lib/components/ResponsiveContainer/ResponsiveContainer.js.map +1 -1
  83. package/lib/components/SankeyChart/SankeyChart.js +1 -1
  84. package/lib/components/SankeyChart/SankeyChart.js.map +1 -1
  85. package/lib/components/ScatterChart/useScatterChartStyles.styles.js +3 -1
  86. package/lib/components/ScatterChart/useScatterChartStyles.styles.js.map +1 -1
  87. package/lib/components/ScatterChart/useScatterChartStyles.styles.raw.js +3 -1
  88. package/lib/components/ScatterChart/useScatterChartStyles.styles.raw.js.map +1 -1
  89. package/lib/components/VerticalBarChart/VerticalBarChart.js +3 -1
  90. package/lib/components/VerticalBarChart/VerticalBarChart.js.map +1 -1
  91. package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.js +3 -1
  92. package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.js.map +1 -1
  93. package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js +3 -1
  94. package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js.map +1 -1
  95. package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js +12 -4
  96. package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js.map +1 -1
  97. package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js +3 -1
  98. package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js.map +1 -1
  99. package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js +3 -1
  100. package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js.map +1 -1
  101. package/lib/index.js +1 -0
  102. package/lib/index.js.map +1 -1
  103. package/lib/types/ChartAnnotation.js +1 -0
  104. package/lib/types/ChartAnnotation.js.map +1 -0
  105. package/lib/types/index.js +1 -0
  106. package/lib/types/index.js.map +1 -1
  107. package/lib/utilities/FocusableTooltipText.js +1 -1
  108. package/lib/utilities/FocusableTooltipText.js.map +1 -1
  109. package/lib/utilities/SVGTooltipText.js +8 -8
  110. package/lib/utilities/SVGTooltipText.js.map +1 -1
  111. package/lib/utilities/image-export-utils.js +108 -0
  112. package/lib/utilities/image-export-utils.js.map +1 -1
  113. package/lib-commonjs/AnnotationOnlyChart.js +6 -0
  114. package/lib-commonjs/AnnotationOnlyChart.js.map +1 -0
  115. package/lib-commonjs/components/AnnotationOnlyChart/AnnotationOnlyChart.js +219 -0
  116. package/lib-commonjs/components/AnnotationOnlyChart/AnnotationOnlyChart.js.map +1 -0
  117. package/lib-commonjs/components/AnnotationOnlyChart/AnnotationOnlyChart.types.js +6 -0
  118. package/lib-commonjs/components/AnnotationOnlyChart/AnnotationOnlyChart.types.js.map +1 -0
  119. package/lib-commonjs/components/AnnotationOnlyChart/index.js +7 -0
  120. package/lib-commonjs/components/AnnotationOnlyChart/index.js.map +1 -0
  121. package/lib-commonjs/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.js +56 -0
  122. package/lib-commonjs/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.js.map +1 -0
  123. package/lib-commonjs/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.raw.js +33 -0
  124. package/lib-commonjs/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.raw.js.map +1 -0
  125. package/lib-commonjs/components/AreaChart/useAreaChartStyles.styles.js +3 -1
  126. package/lib-commonjs/components/AreaChart/useAreaChartStyles.styles.js.map +1 -1
  127. package/lib-commonjs/components/AreaChart/useAreaChartStyles.styles.raw.js +3 -1
  128. package/lib-commonjs/components/AreaChart/useAreaChartStyles.styles.raw.js.map +1 -1
  129. package/lib-commonjs/components/ChartTable/ChartTable.js +3 -1
  130. package/lib-commonjs/components/ChartTable/ChartTable.js.map +1 -1
  131. package/lib-commonjs/components/CommonComponents/Annotations/ChartAnnotationLayer.js +628 -0
  132. package/lib-commonjs/components/CommonComponents/Annotations/ChartAnnotationLayer.js.map +1 -0
  133. package/lib-commonjs/components/CommonComponents/Annotations/ChartAnnotationLayer.types.js +4 -0
  134. package/lib-commonjs/components/CommonComponents/Annotations/ChartAnnotationLayer.types.js.map +1 -0
  135. package/lib-commonjs/components/CommonComponents/Annotations/index.js +7 -0
  136. package/lib-commonjs/components/CommonComponents/Annotations/index.js.map +1 -0
  137. package/lib-commonjs/components/CommonComponents/Annotations/useChartAnnotationLayer.styles.js +265 -0
  138. package/lib-commonjs/components/CommonComponents/Annotations/useChartAnnotationLayer.styles.js.map +1 -0
  139. package/lib-commonjs/components/CommonComponents/Annotations/useChartAnnotationLayer.styles.raw.js +161 -0
  140. package/lib-commonjs/components/CommonComponents/Annotations/useChartAnnotationLayer.styles.raw.js.map +1 -0
  141. package/lib-commonjs/components/CommonComponents/CartesianChart.js +56 -27
  142. package/lib-commonjs/components/CommonComponents/CartesianChart.js.map +1 -1
  143. package/lib-commonjs/components/CommonComponents/CartesianChart.types.js.map +1 -1
  144. package/lib-commonjs/components/CommonComponents/index.js +2 -0
  145. package/lib-commonjs/components/CommonComponents/index.js.map +1 -1
  146. package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js +16 -2
  147. package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js.map +1 -1
  148. package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.raw.js +14 -1
  149. package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.raw.js.map +1 -1
  150. package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js +38 -18
  151. package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  152. package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -1
  153. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +574 -6
  154. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  155. package/lib-commonjs/components/DonutChart/DonutChart.js +12 -7
  156. package/lib-commonjs/components/DonutChart/DonutChart.js.map +1 -1
  157. package/lib-commonjs/components/FunnelChart/FunnelChart.js +5 -5
  158. package/lib-commonjs/components/FunnelChart/FunnelChart.js.map +1 -1
  159. package/lib-commonjs/components/GanttChart/useGanttChartStyles.styles.js +3 -1
  160. package/lib-commonjs/components/GanttChart/useGanttChartStyles.styles.js.map +1 -1
  161. package/lib-commonjs/components/GanttChart/useGanttChartStyles.styles.raw.js +3 -1
  162. package/lib-commonjs/components/GanttChart/useGanttChartStyles.styles.raw.js.map +1 -1
  163. package/lib-commonjs/components/GaugeChart/GaugeChart.js +3 -1
  164. package/lib-commonjs/components/GaugeChart/GaugeChart.js.map +1 -1
  165. package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js +3 -1
  166. package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js.map +1 -1
  167. package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js +3 -1
  168. package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js.map +1 -1
  169. package/lib-commonjs/components/HeatMapChart/HeatMapChart.js +5 -5
  170. package/lib-commonjs/components/HeatMapChart/HeatMapChart.js.map +1 -1
  171. package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.js +3 -1
  172. package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.js.map +1 -1
  173. package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js +3 -1
  174. package/lib-commonjs/components/HeatMapChart/useHeatMapChartStyles.styles.raw.js.map +1 -1
  175. package/lib-commonjs/components/HorizontalBarChart/HorizontalBarChart.js +3 -1
  176. package/lib-commonjs/components/HorizontalBarChart/HorizontalBarChart.js.map +1 -1
  177. package/lib-commonjs/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.js +3 -1
  178. package/lib-commonjs/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.js.map +1 -1
  179. package/lib-commonjs/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.raw.js +3 -1
  180. package/lib-commonjs/components/HorizontalBarChartWithAxis/useHorizontalBarChartWithAxisStyles.styles.raw.js.map +1 -1
  181. package/lib-commonjs/components/Legends/Legends.js +3 -1
  182. package/lib-commonjs/components/Legends/Legends.js.map +1 -1
  183. package/lib-commonjs/components/Legends/Legends.types.js.map +1 -1
  184. package/lib-commonjs/components/LineChart/LineChart.js +5 -4
  185. package/lib-commonjs/components/LineChart/LineChart.js.map +1 -1
  186. package/lib-commonjs/components/LineChart/eventAnnotation/Textbox.js.map +1 -1
  187. package/lib-commonjs/components/LineChart/useLineChartStyles.styles.js +3 -1
  188. package/lib-commonjs/components/LineChart/useLineChartStyles.styles.js.map +1 -1
  189. package/lib-commonjs/components/LineChart/useLineChartStyles.styles.raw.js +3 -1
  190. package/lib-commonjs/components/LineChart/useLineChartStyles.styles.raw.js.map +1 -1
  191. package/lib-commonjs/components/ResponsiveContainer/ResponsiveContainer.js +1 -1
  192. package/lib-commonjs/components/ResponsiveContainer/ResponsiveContainer.js.map +1 -1
  193. package/lib-commonjs/components/SankeyChart/SankeyChart.js +1 -1
  194. package/lib-commonjs/components/SankeyChart/SankeyChart.js.map +1 -1
  195. package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.js +3 -1
  196. package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.js.map +1 -1
  197. package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.raw.js +3 -1
  198. package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.raw.js.map +1 -1
  199. package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.js +3 -1
  200. package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.js.map +1 -1
  201. package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.js +3 -1
  202. package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.js.map +1 -1
  203. package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js +3 -1
  204. package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js.map +1 -1
  205. package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.js +12 -4
  206. package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.js.map +1 -1
  207. package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js +3 -1
  208. package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js.map +1 -1
  209. package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js +3 -1
  210. package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js.map +1 -1
  211. package/lib-commonjs/index.js +1 -0
  212. package/lib-commonjs/index.js.map +1 -1
  213. package/lib-commonjs/types/ChartAnnotation.js +6 -0
  214. package/lib-commonjs/types/ChartAnnotation.js.map +1 -0
  215. package/lib-commonjs/types/index.js +1 -0
  216. package/lib-commonjs/types/index.js.map +1 -1
  217. package/lib-commonjs/utilities/FocusableTooltipText.js +1 -1
  218. package/lib-commonjs/utilities/FocusableTooltipText.js.map +1 -1
  219. package/lib-commonjs/utilities/SVGTooltipText.js +8 -8
  220. package/lib-commonjs/utilities/SVGTooltipText.js.map +1 -1
  221. package/lib-commonjs/utilities/image-export-utils.js +108 -0
  222. package/lib-commonjs/utilities/image-export-utils.js.map +1 -1
  223. package/package.json +12 -12
@@ -0,0 +1,23 @@
1
+ import { makeStyles } from '@griffel/react';
2
+ import { tokens, typographyStyles } from '@fluentui/react-theme';
3
+ export const useAnnotationOnlyChartStyles = makeStyles({
4
+ root: {
5
+ position: 'relative',
6
+ display: 'flex',
7
+ flexDirection: 'column',
8
+ rowGap: '8px',
9
+ backgroundColor: tokens.colorNeutralBackground1,
10
+ color: tokens.colorNeutralForeground1,
11
+ fontFamily: typographyStyles.body1.fontFamily
12
+ },
13
+ content: {
14
+ position: 'relative',
15
+ flexGrow: 1,
16
+ backgroundColor: 'transparent',
17
+ borderRadius: tokens.borderRadiusMedium,
18
+ boxSizing: 'border-box'
19
+ },
20
+ title: {
21
+ textAlign: 'center'
22
+ }
23
+ });
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.ts"],"sourcesContent":["import { makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const useAnnotationOnlyChartStyles = makeStyles({\n root: {\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n rowGap: '8px',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n fontFamily: typographyStyles.body1.fontFamily,\n },\n content: {\n position: 'relative',\n flexGrow: 1,\n backgroundColor: 'transparent',\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n },\n title: {\n textAlign: 'center',\n },\n});\n"],"names":["makeStyles","tokens","typographyStyles","useAnnotationOnlyChartStyles","root","position","display","flexDirection","rowGap","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","fontFamily","body1","content","flexGrow","borderRadius","borderRadiusMedium","boxSizing","title","textAlign"],"mappings":"AAAA,SAASA,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE,OAAO,MAAMC,+BAA+BH,WAAW;IACrDI,MAAM;QACJC,UAAU;QACVC,SAAS;QACTC,eAAe;QACfC,QAAQ;QACRC,iBAAiBR,OAAOS,uBAAuB;QAC/CC,OAAOV,OAAOW,uBAAuB;QACrCC,YAAYX,iBAAiBY,KAAK,CAACD,UAAU;IAC/C;IACAE,SAAS;QACPV,UAAU;QACVW,UAAU;QACVP,iBAAiB;QACjBQ,cAAchB,OAAOiB,kBAAkB;QACvCC,WAAW;IACb;IACAC,OAAO;QACLC,WAAW;IACb;AACF,GAAG"}
@@ -17,7 +17,9 @@ export const areaChartClassNames = {
17
17
  chartWrapper: '',
18
18
  svgTooltip: '',
19
19
  chart: '',
20
- axisAnnotation: ''
20
+ axisAnnotation: '',
21
+ plotContainer: '',
22
+ annotationLayer: ''
21
23
  };
22
24
  const useStyles = /*#__PURE__*/__styles({
23
25
  tooltip: {
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","getTooltipStyle","areaChartClassNames","tooltip","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","d","p","useAreaChartStyles","props","baseStyles"],"sources":["useAreaChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { getTooltipStyle } from '../../utilities/index';\nexport const areaChartClassNames = {\n tooltip: 'fui-ac__tooltip',\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n axisTitle: '',\n chartTitle: '',\n opacityChangeOnHover: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: '',\n axisAnnotation: ''\n};\nconst useStyles = makeStyles({\n tooltip: getTooltipStyle()\n});\n/**\n * Apply styling to the AreaChart slots based on the state\n */ export const useAreaChartStyles = (props)=>{\n const baseStyles = useStyles();\n return {\n tooltip: mergeClasses(areaChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ )\n };\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,eAAe,QAAQ,uBAAuB;AACvD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,OAAO,EAAE,iBAAiB;EAC1BC,IAAI,EAAE,EAAE;EACRC,KAAK,EAAE,EAAE;EACTC,KAAK,EAAE,EAAE;EACTC,eAAe,EAAE,EAAE;EACnBC,KAAK,EAAE,EAAE;EACTC,kBAAkB,EAAE,EAAE;EACtBC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,EAAE;EACdC,oBAAoB,EAAE,EAAE;EACxBC,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE,EAAE;EAChBC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE;AACpB,CAAC;AACD,MAAMC,SAAS,gBAAGnB,QAAA;EAAAI,OAAA;IAAAgB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAEjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,UAAU,GAAG1B,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHf,OAAO,EAAEH,YAAY,CAACE,mBAAmB,CAACC,OAAO,EAAEyC,UAAU,CAACzC,OAAO,CAAC,yBAA0B;EACpG,CAAC;AACL,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["__styles","mergeClasses","getTooltipStyle","areaChartClassNames","tooltip","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","plotContainer","annotationLayer","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","d","p","useAreaChartStyles","props","baseStyles"],"sources":["useAreaChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { getTooltipStyle } from '../../utilities/index';\nexport const areaChartClassNames = {\n tooltip: 'fui-ac__tooltip',\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n axisTitle: '',\n chartTitle: '',\n opacityChangeOnHover: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: '',\n axisAnnotation: '',\n plotContainer: '',\n annotationLayer: ''\n};\nconst useStyles = makeStyles({\n tooltip: getTooltipStyle()\n});\n/**\n * Apply styling to the AreaChart slots based on the state\n */ export const useAreaChartStyles = (props)=>{\n const baseStyles = useStyles();\n return {\n tooltip: mergeClasses(areaChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ )\n };\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,eAAe,QAAQ,uBAAuB;AACvD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,OAAO,EAAE,iBAAiB;EAC1BC,IAAI,EAAE,EAAE;EACRC,KAAK,EAAE,EAAE;EACTC,KAAK,EAAE,EAAE;EACTC,eAAe,EAAE,EAAE;EACnBC,KAAK,EAAE,EAAE;EACTC,kBAAkB,EAAE,EAAE;EACtBC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,EAAE;EACdC,oBAAoB,EAAE,EAAE;EACxBC,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE,EAAE;EAChBC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE,EAAE;EAClBC,aAAa,EAAE,EAAE;EACjBC,eAAe,EAAE;AACrB,CAAC;AACD,MAAMC,SAAS,gBAAGrB,QAAA;EAAAI,OAAA;IAAAkB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAEjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,UAAU,GAAG1B,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHjB,OAAO,EAAEH,YAAY,CAACE,mBAAmB,CAACC,OAAO,EAAE2C,UAAU,CAAC3C,OAAO,CAAC,yBAA0B;EACpG,CAAC;AACL,CAAC","ignoreList":[]}
@@ -16,7 +16,9 @@ export const areaChartClassNames = {
16
16
  chartWrapper: '',
17
17
  svgTooltip: '',
18
18
  chart: '',
19
- axisAnnotation: ''
19
+ axisAnnotation: '',
20
+ plotContainer: '',
21
+ annotationLayer: ''
20
22
  };
21
23
  const useStyles = makeStyles({
22
24
  tooltip: getTooltipStyle()
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/AreaChart/useAreaChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { AreaChartProps, AreaChartStyles } from './index';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { getTooltipStyle } from '../../utilities/index';\n\nexport const areaChartClassNames: SlotClassNames<AreaChartStyles> = {\n tooltip: 'fui-ac__tooltip',\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n axisTitle: '',\n chartTitle: '',\n opacityChangeOnHover: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: '',\n axisAnnotation: '',\n};\n\nconst useStyles = makeStyles({\n tooltip: getTooltipStyle() as GriffelStyle,\n});\n\n/**\n * Apply styling to the AreaChart slots based on the state\n */\nexport const useAreaChartStyles = (props: AreaChartProps): AreaChartStyles => {\n const baseStyles = useStyles();\n\n return {\n tooltip: mergeClasses(areaChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n };\n};\n"],"names":["makeStyles","mergeClasses","getTooltipStyle","areaChartClassNames","tooltip","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","useAreaChartStyles","props","baseStyles"],"mappings":"AAAA;AAEA,SAAuBA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAGxE,SAASC,eAAe,QAAQ,wBAAwB;AAExD,OAAO,MAAMC,sBAAuD;IAClEC,SAAS;IACTC,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,MAAMC,YAAYnB,WAAW;IAC3BI,SAASF;AACX;AAEA;;CAEC,GACD,OAAO,MAAMkB,qBAAqB,CAACC;IACjC,MAAMC,aAAaH;IAEnB,OAAO;QACLf,SAASH,aAAaE,oBAAoBC,OAAO,EAAEkB,WAAWlB,OAAO,CAAC,uBAAuB;IAC/F;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/AreaChart/useAreaChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { AreaChartProps, AreaChartStyles } from './index';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { getTooltipStyle } from '../../utilities/index';\n\nexport const areaChartClassNames: SlotClassNames<AreaChartStyles> = {\n tooltip: 'fui-ac__tooltip',\n root: '',\n xAxis: '',\n yAxis: '',\n legendContainer: '',\n hover: '',\n descriptionMessage: '',\n axisTitle: '',\n chartTitle: '',\n opacityChangeOnHover: '',\n shapeStyles: '',\n chartWrapper: '',\n svgTooltip: '',\n chart: '',\n axisAnnotation: '',\n plotContainer: '',\n annotationLayer: '',\n};\n\nconst useStyles = makeStyles({\n tooltip: getTooltipStyle() as GriffelStyle,\n});\n\n/**\n * Apply styling to the AreaChart slots based on the state\n */\nexport const useAreaChartStyles = (props: AreaChartProps): AreaChartStyles => {\n const baseStyles = useStyles();\n\n return {\n tooltip: mergeClasses(areaChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n };\n};\n"],"names":["makeStyles","mergeClasses","getTooltipStyle","areaChartClassNames","tooltip","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","plotContainer","annotationLayer","useStyles","useAreaChartStyles","props","baseStyles"],"mappings":"AAAA;AAEA,SAAuBA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAGxE,SAASC,eAAe,QAAQ,wBAAwB;AAExD,OAAO,MAAMC,sBAAuD;IAClEC,SAAS;IACTC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;IAChBC,eAAe;IACfC,iBAAiB;AACnB,EAAE;AAEF,MAAMC,YAAYrB,WAAW;IAC3BI,SAASF;AACX;AAEA;;CAEC,GACD,OAAO,MAAMoB,qBAAqB,CAACC;IACjC,MAAMC,aAAaH;IAEnB,OAAO;QACLjB,SAASH,aAAaE,oBAAoBC,OAAO,EAAEoB,WAAWpB,OAAO,CAAC,uBAAuB;IAC/F;AACF,EAAE"}
@@ -83,7 +83,9 @@ export const ChartTable = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>
83
83
  }
84
84
  }
85
85
  return /*#__PURE__*/ React.createElement("div", {
86
- ref: (el)=>_rootElem.current = el,
86
+ ref: (el)=>{
87
+ _rootElem.current = el;
88
+ },
87
89
  className: classes.root,
88
90
  style: {
89
91
  height: height ? `${height}px` : '650px',
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/ChartTable/ChartTable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChartTableProps } from './ChartTable.types';\nimport { useChartTableStyles } from './useChartTableStyles.styles';\nimport { useRtl } from '../../utilities/utilities';\nimport { ImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\nimport { tokens } from '@fluentui/react-theme';\nimport * as d3 from 'd3-color';\nimport { getColorContrast } from '../../utilities/colors';\nimport { resolveCSSVariables } from '../../utilities/utilities';\n\nfunction invertHexColor(hex: string): string {\n const color = d3.color(hex);\n if (!color) {\n return tokens.colorNeutralForeground1!;\n }\n const rgb = color.rgb();\n return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();\n}\n\nfunction getSafeBackgroundColor(chartContainer: HTMLElement, foreground?: string, background?: string): string {\n const fallbackFg = tokens.colorNeutralForeground1;\n const fallbackBg = tokens.colorNeutralBackground1;\n if (!chartContainer) {\n return fallbackBg;\n }\n\n const resolvedFg = resolveCSSVariables(chartContainer, foreground || fallbackFg);\n const resolvedBg = resolveCSSVariables(chartContainer, background || fallbackBg);\n\n const fg = d3.color(resolvedFg);\n const bg = d3.color(resolvedBg);\n\n if (!fg || !bg) {\n return resolvedBg;\n }\n const contrast = getColorContrast(fg.formatHex(), bg.formatHex());\n if (contrast >= 3) {\n return bg.formatHex();\n }\n\n const invertedBg = invertHexColor(bg.formatHex());\n const invertedContrast = getColorContrast(fg.formatHex(), invertedBg);\n return invertedContrast >= 3 ? invertedBg : fallbackBg;\n}\n\nexport const ChartTable: React.FunctionComponent<ChartTableProps> = React.forwardRef<HTMLDivElement, ChartTableProps>(\n (props, forwardedRef) => {\n const { headers, rows, width, height } = props;\n const _isRTL: boolean = useRtl();\n const _rootElem = React.useRef<HTMLDivElement | null>(null);\n const classes = useChartTableStyles(props);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n chartContainer: _rootElem.current,\n toImage: (opts?: ImageExportOptions): Promise<string> => {\n return toImage(_rootElem.current, undefined, _isRTL, opts);\n },\n }),\n [],\n );\n\n if (!headers || headers.length === 0) {\n return <div>No data available</div>;\n }\n\n const bgColorSet = new Set<string>();\n headers.forEach(header => {\n const bg = header?.style?.backgroundColor;\n const normalized = d3.color(bg || '')?.formatHex();\n if (normalized) {\n bgColorSet.add(normalized);\n }\n });\n let sharedBackgroundColor: string | undefined;\n let useSharedBackground = false;\n\n /*\n If we have only one or two unique background colors, we can consider using a shared background color\n for the table headers. This is to ensure better contrast with the foreground text.\n For size 1, we will consider that as default color if it satisfies the contrast ratio.\n There could also be a scenario where backgroundcolor array is of size 2, for eg: [\"dimsgray\", \"gray\"],\n which will assign 1st column header bg color to dimsgray and rest to gray. so our logic of shared background\n color won't run here. So will consider for size 2 as well.\n For size greater than this, we will consider that user wants different colors and will let color contrast fail\n if any.\n */\n if (bgColorSet.size === 1 || bgColorSet.size === 2) {\n const candidateBg = bgColorSet.size === 1 ? Array.from(bgColorSet)[0] : Array.from(bgColorSet)[1];\n for (const header of headers) {\n const fg = header?.style?.color;\n if (fg && getColorContrast(fg, candidateBg) >= 3) {\n sharedBackgroundColor = candidateBg;\n useSharedBackground = true;\n break;\n }\n }\n }\n\n return (\n <div\n ref={el => (_rootElem.current = el)}\n className={classes.root as string}\n style={{ height: height ? `${height}px` : '650px', overflow: 'hidden' }}\n >\n <svg width={width ?? '100%'} height={height ?? '650px'}>\n <foreignObject x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <div\n style={{\n maxHeight: height ? `${height}px` : '650px',\n overflowY: 'auto',\n overflowX: 'auto',\n }}\n >\n <table\n className={classes.table}\n style={{\n width: width ? `${width}px` : '100%',\n }}\n >\n <thead>\n <tr>\n {headers.map((header, idx) => {\n const style = { ...header?.style };\n const fg = style.color;\n const bg = style.backgroundColor;\n\n if (useSharedBackground) {\n style.backgroundColor = sharedBackgroundColor;\n } else if (fg || bg) {\n style.backgroundColor = getSafeBackgroundColor(_rootElem.current!, fg, bg);\n }\n return (\n <th key={idx} className={classes.headerCell} style={style} tabIndex={0}>\n {header.value}\n </th>\n );\n })}\n </tr>\n </thead>\n {rows && rows.length > 0 && (\n <tbody>\n {rows.map((row, rowIdx) => (\n <tr key={rowIdx}>\n {row.map((cell, colIdx) => {\n const style = { ...cell?.style };\n const fg = style.color;\n const bg = style.backgroundColor;\n if (fg || bg) {\n style.backgroundColor = getSafeBackgroundColor(_rootElem.current!, fg, bg);\n }\n return (\n <td key={colIdx} className={classes.bodyCell} style={style} tabIndex={0}>\n {cell.value}\n </td>\n );\n })}\n </tr>\n ))}\n </tbody>\n )}\n </table>\n </div>\n </foreignObject>\n </svg>\n </div>\n );\n },\n);\n\nChartTable.displayName = 'ChartTable';\n"],"names":["React","useChartTableStyles","useRtl","toImage","tokens","d3","getColorContrast","resolveCSSVariables","invertHexColor","hex","color","colorNeutralForeground1","rgb","r","g","b","formatHex","getSafeBackgroundColor","chartContainer","foreground","background","fallbackFg","fallbackBg","colorNeutralBackground1","resolvedFg","resolvedBg","fg","bg","contrast","invertedBg","invertedContrast","ChartTable","forwardRef","props","forwardedRef","headers","rows","width","height","_isRTL","_rootElem","useRef","classes","useImperativeHandle","componentRef","current","opts","undefined","length","div","bgColorSet","Set","forEach","header","style","backgroundColor","normalized","add","sharedBackgroundColor","useSharedBackground","size","candidateBg","Array","from","ref","el","className","root","overflow","svg","foreignObject","x","y","maxHeight","overflowY","overflowX","table","thead","tr","map","idx","th","key","headerCell","tabIndex","value","tbody","row","rowIdx","cell","colIdx","td","bodyCell","displayName"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/ChartTable/ChartTable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChartTableProps } from './ChartTable.types';\nimport { useChartTableStyles } from './useChartTableStyles.styles';\nimport { useRtl } from '../../utilities/utilities';\nimport { ImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\nimport { tokens } from '@fluentui/react-theme';\nimport * as d3 from 'd3-color';\nimport { getColorContrast } from '../../utilities/colors';\nimport { resolveCSSVariables } from '../../utilities/utilities';\n\nfunction invertHexColor(hex: string): string {\n const color = d3.color(hex);\n if (!color) {\n return tokens.colorNeutralForeground1!;\n }\n const rgb = color.rgb();\n return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();\n}\n\nfunction getSafeBackgroundColor(chartContainer: HTMLElement, foreground?: string, background?: string): string {\n const fallbackFg = tokens.colorNeutralForeground1;\n const fallbackBg = tokens.colorNeutralBackground1;\n if (!chartContainer) {\n return fallbackBg;\n }\n\n const resolvedFg = resolveCSSVariables(chartContainer, foreground || fallbackFg);\n const resolvedBg = resolveCSSVariables(chartContainer, background || fallbackBg);\n\n const fg = d3.color(resolvedFg);\n const bg = d3.color(resolvedBg);\n\n if (!fg || !bg) {\n return resolvedBg;\n }\n const contrast = getColorContrast(fg.formatHex(), bg.formatHex());\n if (contrast >= 3) {\n return bg.formatHex();\n }\n\n const invertedBg = invertHexColor(bg.formatHex());\n const invertedContrast = getColorContrast(fg.formatHex(), invertedBg);\n return invertedContrast >= 3 ? invertedBg : fallbackBg;\n}\n\nexport const ChartTable: React.FunctionComponent<ChartTableProps> = React.forwardRef<HTMLDivElement, ChartTableProps>(\n (props, forwardedRef) => {\n const { headers, rows, width, height } = props;\n const _isRTL: boolean = useRtl();\n const _rootElem = React.useRef<HTMLDivElement | null>(null);\n const classes = useChartTableStyles(props);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n chartContainer: _rootElem.current,\n toImage: (opts?: ImageExportOptions): Promise<string> => {\n return toImage(_rootElem.current, undefined, _isRTL, opts);\n },\n }),\n [],\n );\n\n if (!headers || headers.length === 0) {\n return <div>No data available</div>;\n }\n\n const bgColorSet = new Set<string>();\n headers.forEach(header => {\n const bg = header?.style?.backgroundColor;\n const normalized = d3.color(bg || '')?.formatHex();\n if (normalized) {\n bgColorSet.add(normalized);\n }\n });\n let sharedBackgroundColor: string | undefined;\n let useSharedBackground = false;\n\n /*\n If we have only one or two unique background colors, we can consider using a shared background color\n for the table headers. This is to ensure better contrast with the foreground text.\n For size 1, we will consider that as default color if it satisfies the contrast ratio.\n There could also be a scenario where backgroundcolor array is of size 2, for eg: [\"dimsgray\", \"gray\"],\n which will assign 1st column header bg color to dimsgray and rest to gray. so our logic of shared background\n color won't run here. So will consider for size 2 as well.\n For size greater than this, we will consider that user wants different colors and will let color contrast fail\n if any.\n */\n if (bgColorSet.size === 1 || bgColorSet.size === 2) {\n const candidateBg = bgColorSet.size === 1 ? Array.from(bgColorSet)[0] : Array.from(bgColorSet)[1];\n for (const header of headers) {\n const fg = header?.style?.color;\n if (fg && getColorContrast(fg, candidateBg) >= 3) {\n sharedBackgroundColor = candidateBg;\n useSharedBackground = true;\n break;\n }\n }\n }\n\n return (\n <div\n ref={el => {\n _rootElem.current = el;\n }}\n className={classes.root as string}\n style={{ height: height ? `${height}px` : '650px', overflow: 'hidden' }}\n >\n <svg width={width ?? '100%'} height={height ?? '650px'}>\n <foreignObject x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <div\n style={{\n maxHeight: height ? `${height}px` : '650px',\n overflowY: 'auto',\n overflowX: 'auto',\n }}\n >\n <table\n className={classes.table}\n style={{\n width: width ? `${width}px` : '100%',\n }}\n >\n <thead>\n <tr>\n {headers.map((header, idx) => {\n const style = { ...header?.style };\n const fg = style.color;\n const bg = style.backgroundColor;\n\n if (useSharedBackground) {\n style.backgroundColor = sharedBackgroundColor;\n } else if (fg || bg) {\n style.backgroundColor = getSafeBackgroundColor(_rootElem.current!, fg, bg);\n }\n return (\n <th key={idx} className={classes.headerCell} style={style} tabIndex={0}>\n {header.value}\n </th>\n );\n })}\n </tr>\n </thead>\n {rows && rows.length > 0 && (\n <tbody>\n {rows.map((row, rowIdx) => (\n <tr key={rowIdx}>\n {row.map((cell, colIdx) => {\n const style = { ...cell?.style };\n const fg = style.color;\n const bg = style.backgroundColor;\n if (fg || bg) {\n style.backgroundColor = getSafeBackgroundColor(_rootElem.current!, fg, bg);\n }\n return (\n <td key={colIdx} className={classes.bodyCell} style={style} tabIndex={0}>\n {cell.value}\n </td>\n );\n })}\n </tr>\n ))}\n </tbody>\n )}\n </table>\n </div>\n </foreignObject>\n </svg>\n </div>\n );\n },\n);\n\nChartTable.displayName = 'ChartTable';\n"],"names":["React","useChartTableStyles","useRtl","toImage","tokens","d3","getColorContrast","resolveCSSVariables","invertHexColor","hex","color","colorNeutralForeground1","rgb","r","g","b","formatHex","getSafeBackgroundColor","chartContainer","foreground","background","fallbackFg","fallbackBg","colorNeutralBackground1","resolvedFg","resolvedBg","fg","bg","contrast","invertedBg","invertedContrast","ChartTable","forwardRef","props","forwardedRef","headers","rows","width","height","_isRTL","_rootElem","useRef","classes","useImperativeHandle","componentRef","current","opts","undefined","length","div","bgColorSet","Set","forEach","header","style","backgroundColor","normalized","add","sharedBackgroundColor","useSharedBackground","size","candidateBg","Array","from","ref","el","className","root","overflow","svg","foreignObject","x","y","maxHeight","overflowY","overflowX","table","thead","tr","map","idx","th","key","headerCell","tabIndex","value","tbody","row","rowIdx","cell","colIdx","td","bodyCell","displayName"],"mappings":"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"}