@fluentui/react-charts 0.0.0-nightly-20250826-2140.1 → 0.0.0-nightly-20250828-0408.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 (158) hide show
  1. package/CHANGELOG.md +48 -15
  2. package/dist/index.d.ts +15 -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 -2
  6. package/lib/components/AreaChart/useAreaChartStyles.styles.js.map +1 -1
  7. package/lib/components/AreaChart/useAreaChartStyles.styles.raw.js +3 -15
  8. package/lib/components/AreaChart/useAreaChartStyles.styles.raw.js.map +1 -1
  9. package/lib/components/ChartTable/ChartTable.js +87 -6
  10. package/lib/components/ChartTable/ChartTable.js.map +1 -1
  11. package/lib/components/CommonComponents/CartesianChart.js +24 -24
  12. package/lib/components/CommonComponents/CartesianChart.js.map +1 -1
  13. package/lib/components/CommonComponents/useCartesianChartStyles.styles.js +17 -14
  14. package/lib/components/CommonComponents/useCartesianChartStyles.styles.js.map +1 -1
  15. package/lib/components/CommonComponents/useCartesianChartStyles.styles.raw.js +6 -33
  16. package/lib/components/CommonComponents/useCartesianChartStyles.styles.raw.js.map +1 -1
  17. package/lib/components/DeclarativeChart/DeclarativeChart.js +42 -16
  18. package/lib/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  19. package/lib/components/DeclarativeChart/PlotlyColorAdapter.js +20 -1
  20. package/lib/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -1
  21. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +502 -259
  22. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  23. package/lib/components/DonutChart/DonutChart.js +6 -1
  24. package/lib/components/DonutChart/DonutChart.js.map +1 -1
  25. package/lib/components/DonutChart/DonutChart.types.js.map +1 -1
  26. package/lib/components/DonutChart/useDonutChartStyles.styles.js +21 -4
  27. package/lib/components/DonutChart/useDonutChartStyles.styles.js.map +1 -1
  28. package/lib/components/DonutChart/useDonutChartStyles.styles.raw.js +8 -4
  29. package/lib/components/DonutChart/useDonutChartStyles.styles.raw.js.map +1 -1
  30. package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js +23 -4
  31. package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js.map +1 -1
  32. package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js +4 -17
  33. package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js.map +1 -1
  34. package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js +4 -21
  35. package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js.map +1 -1
  36. package/lib/components/HeatMapChart/HeatMapChart.js +175 -114
  37. package/lib/components/HeatMapChart/HeatMapChart.js.map +1 -1
  38. package/lib/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.js +26 -6
  39. package/lib/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.js.map +1 -1
  40. package/lib/components/LineChart/LineChart.js +128 -82
  41. package/lib/components/LineChart/LineChart.js.map +1 -1
  42. package/lib/components/LineChart/LineChart.types.js.map +1 -1
  43. package/lib/components/LineChart/useLineChartStyles.styles.js +23 -10
  44. package/lib/components/LineChart/useLineChartStyles.styles.js.map +1 -1
  45. package/lib/components/LineChart/useLineChartStyles.styles.raw.js +4 -21
  46. package/lib/components/LineChart/useLineChartStyles.styles.raw.js.map +1 -1
  47. package/lib/components/SankeyChart/useSankeyChartStyles.styles.js +12 -25
  48. package/lib/components/SankeyChart/useSankeyChartStyles.styles.js.map +1 -1
  49. package/lib/components/SankeyChart/useSankeyChartStyles.styles.raw.js +2 -12
  50. package/lib/components/SankeyChart/useSankeyChartStyles.styles.raw.js.map +1 -1
  51. package/lib/components/ScatterChart/ScatterChart.js +86 -59
  52. package/lib/components/ScatterChart/ScatterChart.js.map +1 -1
  53. package/lib/components/ScatterChart/ScatterChart.types.js.map +1 -1
  54. package/lib/components/ScatterChart/useScatterChartStyles.styles.js +27 -7
  55. package/lib/components/ScatterChart/useScatterChartStyles.styles.js.map +1 -1
  56. package/lib/components/ScatterChart/useScatterChartStyles.styles.raw.js +8 -14
  57. package/lib/components/ScatterChart/useScatterChartStyles.styles.raw.js.map +1 -1
  58. package/lib/components/VerticalBarChart/VerticalBarChart.js +27 -4
  59. package/lib/components/VerticalBarChart/VerticalBarChart.js.map +1 -1
  60. package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.js +8 -6
  61. package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.js.map +1 -1
  62. package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js +5 -19
  63. package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js.map +1 -1
  64. package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js +61 -44
  65. package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.js.map +1 -1
  66. package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js +7 -6
  67. package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js.map +1 -1
  68. package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js +4 -19
  69. package/lib/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js.map +1 -1
  70. package/lib/utilities/Common.styles.js +47 -0
  71. package/lib/utilities/Common.styles.js.map +1 -0
  72. package/lib/utilities/Common.styles.raw.js +47 -0
  73. package/lib/utilities/Common.styles.raw.js.map +1 -0
  74. package/lib/utilities/SVGTooltipText.js.map +1 -1
  75. package/lib/utilities/index.js +1 -0
  76. package/lib/utilities/index.js.map +1 -1
  77. package/lib/utilities/scatterpolar-utils.js +52 -0
  78. package/lib/utilities/scatterpolar-utils.js.map +1 -0
  79. package/lib/utilities/utilities.js +32 -37
  80. package/lib/utilities/utilities.js.map +1 -1
  81. package/lib-commonjs/components/AreaChart/AreaChart.js +4 -1
  82. package/lib-commonjs/components/AreaChart/AreaChart.js.map +1 -1
  83. package/lib-commonjs/components/AreaChart/useAreaChartStyles.styles.js.map +1 -1
  84. package/lib-commonjs/components/AreaChart/useAreaChartStyles.styles.raw.js +2 -14
  85. package/lib-commonjs/components/AreaChart/useAreaChartStyles.styles.raw.js.map +1 -1
  86. package/lib-commonjs/components/ChartTable/ChartTable.js +87 -6
  87. package/lib-commonjs/components/ChartTable/ChartTable.js.map +1 -1
  88. package/lib-commonjs/components/CommonComponents/CartesianChart.js +24 -24
  89. package/lib-commonjs/components/CommonComponents/CartesianChart.js.map +1 -1
  90. package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js +15 -13
  91. package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js.map +1 -1
  92. package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.raw.js +4 -32
  93. package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.raw.js.map +1 -1
  94. package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js +41 -15
  95. package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  96. package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js +23 -1
  97. package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -1
  98. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +509 -257
  99. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  100. package/lib-commonjs/components/DonutChart/DonutChart.js +6 -1
  101. package/lib-commonjs/components/DonutChart/DonutChart.js.map +1 -1
  102. package/lib-commonjs/components/DonutChart/DonutChart.types.js.map +1 -1
  103. package/lib-commonjs/components/DonutChart/useDonutChartStyles.styles.js +32 -4
  104. package/lib-commonjs/components/DonutChart/useDonutChartStyles.styles.js.map +1 -1
  105. package/lib-commonjs/components/DonutChart/useDonutChartStyles.styles.raw.js +8 -4
  106. package/lib-commonjs/components/DonutChart/useDonutChartStyles.styles.raw.js.map +1 -1
  107. package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js +22 -3
  108. package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js.map +1 -1
  109. package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js +2 -19
  110. package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js.map +1 -1
  111. package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js +3 -20
  112. package/lib-commonjs/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js.map +1 -1
  113. package/lib-commonjs/components/HeatMapChart/HeatMapChart.js +174 -113
  114. package/lib-commonjs/components/HeatMapChart/HeatMapChart.js.map +1 -1
  115. package/lib-commonjs/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.js +25 -5
  116. package/lib-commonjs/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.js.map +1 -1
  117. package/lib-commonjs/components/LineChart/LineChart.js +127 -81
  118. package/lib-commonjs/components/LineChart/LineChart.js.map +1 -1
  119. package/lib-commonjs/components/LineChart/LineChart.types.js.map +1 -1
  120. package/lib-commonjs/components/LineChart/useLineChartStyles.styles.js +30 -9
  121. package/lib-commonjs/components/LineChart/useLineChartStyles.styles.js.map +1 -1
  122. package/lib-commonjs/components/LineChart/useLineChartStyles.styles.raw.js +2 -20
  123. package/lib-commonjs/components/LineChart/useLineChartStyles.styles.raw.js.map +1 -1
  124. package/lib-commonjs/components/SankeyChart/useSankeyChartStyles.styles.js +23 -33
  125. package/lib-commonjs/components/SankeyChart/useSankeyChartStyles.styles.js.map +1 -1
  126. package/lib-commonjs/components/SankeyChart/useSankeyChartStyles.styles.raw.js +1 -12
  127. package/lib-commonjs/components/SankeyChart/useSankeyChartStyles.styles.raw.js.map +1 -1
  128. package/lib-commonjs/components/ScatterChart/ScatterChart.js +85 -58
  129. package/lib-commonjs/components/ScatterChart/ScatterChart.js.map +1 -1
  130. package/lib-commonjs/components/ScatterChart/ScatterChart.types.js.map +1 -1
  131. package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.js +37 -5
  132. package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.js.map +1 -1
  133. package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.raw.js +7 -13
  134. package/lib-commonjs/components/ScatterChart/useScatterChartStyles.styles.raw.js.map +1 -1
  135. package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.js +26 -3
  136. package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.js.map +1 -1
  137. package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.js +5 -3
  138. package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.js.map +1 -1
  139. package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js +3 -17
  140. package/lib-commonjs/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js.map +1 -1
  141. package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.js +60 -43
  142. package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.js.map +1 -1
  143. package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js +5 -3
  144. package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.js.map +1 -1
  145. package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js +3 -18
  146. package/lib-commonjs/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.raw.js.map +1 -1
  147. package/lib-commonjs/utilities/Common.styles.js +71 -0
  148. package/lib-commonjs/utilities/Common.styles.js.map +1 -0
  149. package/lib-commonjs/utilities/Common.styles.raw.js +71 -0
  150. package/lib-commonjs/utilities/Common.styles.raw.js.map +1 -0
  151. package/lib-commonjs/utilities/SVGTooltipText.js.map +1 -1
  152. package/lib-commonjs/utilities/index.js +1 -0
  153. package/lib-commonjs/utilities/index.js.map +1 -1
  154. package/lib-commonjs/utilities/scatterpolar-utils.js +67 -0
  155. package/lib-commonjs/utilities/scatterpolar-utils.js.map +1 -0
  156. package/lib-commonjs/utilities/utilities.js +28 -40
  157. package/lib-commonjs/utilities/utilities.js.map +1 -1
  158. package/package.json +12 -12
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { VerticalStackedBarChartProps, VerticalStackedBarChartStyles } from './VerticalStackedBarChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const verticalstackedbarchartClassNames: SlotClassNames<VerticalStackedBarChartStyles> = {\n opacityChangeOnHover: 'fui-vsbc__opacityChangeOnHover',\n tooltip: 'fui-vsbc__tooltip',\n barLabel: 'fui-vsbc__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,\n borderRadius: tokens.borderRadiusSmall,\n pointerEvents: 'none',\n },\n barLabel: {\n ...typographyStyles.caption1Strong,\n fill: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto',\n },\n});\n\nexport const useVerticalStackedBarChartStyles = (\n props: VerticalStackedBarChartProps,\n): VerticalStackedBarChartStyles => {\n const baseStyles = useStyles();\n\n return {\n opacityChangeOnHover: mergeClasses(\n verticalstackedbarchartClassNames.opacityChangeOnHover,\n baseStyles.opacityChangeOnHover,\n props.href ? 'pointer' : 'default',\n ),\n tooltip: mergeClasses(verticalstackedbarchartClassNames.tooltip, baseStyles.tooltip),\n barLabel: mergeClasses(verticalstackedbarchartClassNames.barLabel, baseStyles.barLabel),\n };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","verticalstackedbarchartClassNames","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","borderRadius","borderRadiusSmall","pointerEvents","caption1Strong","colorNeutralForeground1","forcedColorAdjust","useVerticalStackedBarChartStyles","props","baseStyles","href"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE,OAAO,MAAMC,oCAAmF;IAC9FC,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,YAAYtB,WAAW;IAC3BM,sBAAsB;QACpBiB,QAAQ;IACV;IACAhB,SAAS;QACP,GAAGH,iBAAiBoB,KAAK;QACzBC,SAAS;QACTC,eAAe;QACf,GAAGxB,WAAWyB,OAAO,CAACxB,OAAOyB,kBAAkB,CAAC;QAChDC,UAAU;QACVC,WAAW;QACXC,KAAK5B,OAAO6B,mBAAmB;QAC/BC,MAAM9B,OAAO+B,uBAAuB;QACpCC,cAAchC,OAAOiC,iBAAiB;QACtCC,eAAe;IACjB;IACA7B,UAAU;QACR,GAAGJ,iBAAiBkC,cAAc;QAClCL,MAAM9B,OAAOoC,uBAAuB;QACpCC,mBAAmB;IACrB;AACF;AAEA,OAAO,MAAMC,mCAAmC,CAC9CC;IAEA,MAAMC,aAAarB;IAEnB,OAAO;QACLhB,sBAAsBL,aACpBI,kCAAkCC,oBAAoB,EACtDqC,WAAWrC,oBAAoB,EAC/BoC,MAAME,IAAI,GAAG,YAAY;QAE3BrC,SAASN,aAAaI,kCAAkCE,OAAO,EAAEoC,WAAWpC,OAAO;QACnFC,UAAUP,aAAaI,kCAAkCG,QAAQ,EAAEmC,WAAWnC,QAAQ;IACxF;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/VerticalStackedBarChart/useVerticalStackedBarChartStyles.styles.ts"],"sourcesContent":["import { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { VerticalStackedBarChartProps, VerticalStackedBarChartStyles } from './VerticalStackedBarChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';\n\nexport const verticalstackedbarchartClassNames: SlotClassNames<VerticalStackedBarChartStyles> = {\n opacityChangeOnHover: 'fui-vsbc__opacityChangeOnHover',\n tooltip: 'fui-vsbc__tooltip',\n barLabel: 'fui-vsbc__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: getTooltipStyle() as GriffelStyle,\n barLabel: getBarLabelStyle() as GriffelStyle,\n});\n\nexport const useVerticalStackedBarChartStyles = (\n props: VerticalStackedBarChartProps,\n): VerticalStackedBarChartStyles => {\n const baseStyles = useStyles();\n\n return {\n opacityChangeOnHover: mergeClasses(\n verticalstackedbarchartClassNames.opacityChangeOnHover,\n baseStyles.opacityChangeOnHover,\n props.href ? 'pointer' : 'default',\n ),\n tooltip: mergeClasses(verticalstackedbarchartClassNames.tooltip, baseStyles.tooltip),\n barLabel: mergeClasses(verticalstackedbarchartClassNames.barLabel, baseStyles.barLabel),\n };\n};\n"],"names":["makeStyles","mergeClasses","getBarLabelStyle","getTooltipStyle","verticalstackedbarchartClassNames","opacityChangeOnHover","tooltip","barLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","cursor","useVerticalStackedBarChartStyles","props","baseStyles","href"],"mappings":"AAAA,SAAuBA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAGxE,SAASC,gBAAgB,EAAEC,eAAe,QAAQ,wBAAwB;AAE1E,OAAO,MAAMC,oCAAmF;IAC9FC,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,YAAYrB,WAAW;IAC3BK,sBAAsB;QACpBiB,QAAQ;IACV;IACAhB,SAASH;IACTI,UAAUL;AACZ;AAEA,OAAO,MAAMqB,mCAAmC,CAC9CC;IAEA,MAAMC,aAAaJ;IAEnB,OAAO;QACLhB,sBAAsBJ,aACpBG,kCAAkCC,oBAAoB,EACtDoB,WAAWpB,oBAAoB,EAC/BmB,MAAME,IAAI,GAAG,YAAY;QAE3BpB,SAASL,aAAaG,kCAAkCE,OAAO,EAAEmB,WAAWnB,OAAO;QACnFC,UAAUN,aAAaG,kCAAkCG,QAAQ,EAAEkB,WAAWlB,QAAQ;IACxF;AACF,EAAE"}
@@ -0,0 +1,47 @@
1
+ import { HighContrastSelector } from '../utilities/utilities';
2
+ import { tokens, typographyStyles } from '@fluentui/react-theme';
3
+ import { shorthands } from '@griffel/react';
4
+ export const getTooltipStyle = () => {
5
+ return {
6
+ ...typographyStyles.body1,
7
+ display: 'flex',
8
+ flexDirection: 'column',
9
+ ...shorthands.padding(tokens.spacingHorizontalS),
10
+ position: 'absolute',
11
+ textAlign: 'center',
12
+ top: tokens.spacingVerticalNone,
13
+ backgroundColor: tokens.colorNeutralBackground1,
14
+ borderRadius: tokens.borderRadiusSmall,
15
+ pointerEvents: 'none',
16
+ color: tokens.colorNeutralForeground1
17
+ };
18
+ };
19
+ export const getAxisTitleStyle = () => {
20
+ return {
21
+ ...typographyStyles.caption2Strong,
22
+ fontStyle: 'normal',
23
+ textAlign: 'center',
24
+ color: tokens.colorNeutralForeground2,
25
+ fill: tokens.colorNeutralForeground1,
26
+ [HighContrastSelector]: {
27
+ fill: 'CanvasText'
28
+ }
29
+ };
30
+ };
31
+ export const getBarLabelStyle = () => {
32
+ return {
33
+ ...typographyStyles.caption1Strong,
34
+ fill: tokens.colorNeutralForeground1,
35
+ forcedColorAdjust: 'auto'
36
+ };
37
+ };
38
+ export const getMarkerLabelStyle = () => {
39
+ return {
40
+ ...typographyStyles.body1,
41
+ fill: tokens.colorNeutralForeground1,
42
+ textAnchor: 'middle',
43
+ [HighContrastSelector]: {
44
+ fill: 'CanvasText'
45
+ }
46
+ };
47
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"names":["HighContrastSelector","tokens","typographyStyles","shorthands","getTooltipStyle","body1","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","backgroundColor","colorNeutralBackground1","borderRadius","borderRadiusSmall","pointerEvents","color","colorNeutralForeground1","getAxisTitleStyle","caption2Strong","fontStyle","colorNeutralForeground2","fill","getBarLabelStyle","caption1Strong","forcedColorAdjust","getMarkerLabelStyle","textAnchor"],"sources":["Common.styles.js"],"sourcesContent":["import { HighContrastSelector } from '../utilities/utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\nexport const getTooltipStyle = ()=>{\n return {\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 backgroundColor: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusSmall,\n pointerEvents: 'none',\n color: tokens.colorNeutralForeground1\n };\n};\nexport const getAxisTitleStyle = ()=>{\n return {\n ...typographyStyles.caption2Strong,\n fontStyle: 'normal',\n textAlign: 'center',\n color: tokens.colorNeutralForeground2,\n fill: tokens.colorNeutralForeground1,\n [HighContrastSelector]: {\n fill: 'CanvasText'\n }\n };\n};\nexport const getBarLabelStyle = ()=>{\n return {\n ...typographyStyles.caption1Strong,\n fill: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto'\n };\n};\nexport const getMarkerLabelStyle = ()=>{\n return {\n ...typographyStyles.body1,\n fill: tokens.colorNeutralForeground1,\n textAnchor: 'middle',\n [HighContrastSelector]: {\n fill: 'CanvasText'\n }\n };\n};\n"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,UAAU,QAAQ,gBAAgB;AAC3C,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAI;EAC/B,OAAO;IACH,GAAGF,gBAAgB,CAACG,KAAK;IACzBC,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,QAAQ;IACvB,GAAGJ,UAAU,CAACK,OAAO,CAACP,MAAM,CAACQ,kBAAkB,CAAC;IAChDC,QAAQ,EAAE,UAAU;IACpBC,SAAS,EAAE,QAAQ;IACnBC,GAAG,EAAEX,MAAM,CAACY,mBAAmB;IAC/BC,eAAe,EAAEb,MAAM,CAACc,uBAAuB;IAC/CC,YAAY,EAAEf,MAAM,CAACgB,iBAAiB;IACtCC,aAAa,EAAE,MAAM;IACrBC,KAAK,EAAElB,MAAM,CAACmB;EAClB,CAAC;AACL,CAAC;AACD,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAI;EACjC,OAAO;IACH,GAAGnB,gBAAgB,CAACoB,cAAc;IAClCC,SAAS,EAAE,QAAQ;IACnBZ,SAAS,EAAE,QAAQ;IACnBQ,KAAK,EAAElB,MAAM,CAACuB,uBAAuB;IACrCC,IAAI,EAAExB,MAAM,CAACmB,uBAAuB;IACpC,CAACpB,oBAAoB,GAAG;MACpByB,IAAI,EAAE;IACV;EACJ,CAAC;AACL,CAAC;AACD,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAI;EAChC,OAAO;IACH,GAAGxB,gBAAgB,CAACyB,cAAc;IAClCF,IAAI,EAAExB,MAAM,CAACmB,uBAAuB;IACpCQ,iBAAiB,EAAE;EACvB,CAAC;AACL,CAAC;AACD,OAAO,MAAMC,mBAAmB,GAAGA,CAAA,KAAI;EACnC,OAAO;IACH,GAAG3B,gBAAgB,CAACG,KAAK;IACzBoB,IAAI,EAAExB,MAAM,CAACmB,uBAAuB;IACpCU,UAAU,EAAE,QAAQ;IACpB,CAAC9B,oBAAoB,GAAG;MACpByB,IAAI,EAAE;IACV;EACJ,CAAC;AACL,CAAC","ignoreList":[]}
@@ -0,0 +1,47 @@
1
+ import { HighContrastSelector } from '../utilities/utilities';
2
+ import { tokens, typographyStyles } from '@fluentui/react-theme';
3
+ import { shorthands } from '@griffel/react';
4
+ export const getTooltipStyle = ()=>{
5
+ return {
6
+ ...typographyStyles.body1,
7
+ display: 'flex',
8
+ flexDirection: 'column',
9
+ ...shorthands.padding(tokens.spacingHorizontalS),
10
+ position: 'absolute',
11
+ textAlign: 'center',
12
+ top: tokens.spacingVerticalNone,
13
+ backgroundColor: tokens.colorNeutralBackground1,
14
+ borderRadius: tokens.borderRadiusSmall,
15
+ pointerEvents: 'none',
16
+ color: tokens.colorNeutralForeground1
17
+ };
18
+ };
19
+ export const getAxisTitleStyle = ()=>{
20
+ return {
21
+ ...typographyStyles.caption2Strong,
22
+ fontStyle: 'normal',
23
+ textAlign: 'center',
24
+ color: tokens.colorNeutralForeground2,
25
+ fill: tokens.colorNeutralForeground1,
26
+ [HighContrastSelector]: {
27
+ fill: 'CanvasText'
28
+ }
29
+ };
30
+ };
31
+ export const getBarLabelStyle = ()=>{
32
+ return {
33
+ ...typographyStyles.caption1Strong,
34
+ fill: tokens.colorNeutralForeground1,
35
+ forcedColorAdjust: 'auto'
36
+ };
37
+ };
38
+ export const getMarkerLabelStyle = ()=>{
39
+ return {
40
+ ...typographyStyles.body1,
41
+ fill: tokens.colorNeutralForeground1,
42
+ textAnchor: 'middle',
43
+ [HighContrastSelector]: {
44
+ fill: 'CanvasText'
45
+ }
46
+ };
47
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/utilities/Common.styles.ts"],"sourcesContent":["import { HighContrastSelector } from '../utilities/utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { shorthands } from '@griffel/react';\n\nexport const getTooltipStyle = () => {\n return {\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 backgroundColor: tokens.colorNeutralBackground1,\n borderRadius: tokens.borderRadiusSmall,\n pointerEvents: 'none',\n color: tokens.colorNeutralForeground1,\n };\n};\n\nexport const getAxisTitleStyle = () => {\n return {\n ...typographyStyles.caption2Strong,\n fontStyle: 'normal',\n textAlign: 'center',\n color: tokens.colorNeutralForeground2,\n fill: tokens.colorNeutralForeground1,\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n };\n};\n\nexport const getBarLabelStyle = () => {\n return {\n ...typographyStyles.caption1Strong, // Confirm styles\n fill: tokens.colorNeutralForeground1,\n forcedColorAdjust: 'auto',\n };\n};\n\nexport const getMarkerLabelStyle = () => {\n return {\n ...typographyStyles.body1,\n fill: tokens.colorNeutralForeground1,\n textAnchor: 'middle',\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n };\n};\n"],"names":["HighContrastSelector","tokens","typographyStyles","shorthands","getTooltipStyle","body1","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","backgroundColor","colorNeutralBackground1","borderRadius","borderRadiusSmall","pointerEvents","color","colorNeutralForeground1","getAxisTitleStyle","caption2Strong","fontStyle","colorNeutralForeground2","fill","getBarLabelStyle","caption1Strong","forcedColorAdjust","getMarkerLabelStyle","textAnchor"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,OAAO,MAAMC,kBAAkB;IAC7B,OAAO;QACL,GAAGF,iBAAiBG,KAAK;QACzBC,SAAS;QACTC,eAAe;QACf,GAAGJ,WAAWK,OAAO,CAACP,OAAOQ,kBAAkB,CAAC;QAChDC,UAAU;QACVC,WAAW;QACXC,KAAKX,OAAOY,mBAAmB;QAC/BC,iBAAiBb,OAAOc,uBAAuB;QAC/CC,cAAcf,OAAOgB,iBAAiB;QACtCC,eAAe;QACfC,OAAOlB,OAAOmB,uBAAuB;IACvC;AACF,EAAE;AAEF,OAAO,MAAMC,oBAAoB;IAC/B,OAAO;QACL,GAAGnB,iBAAiBoB,cAAc;QAClCC,WAAW;QACXZ,WAAW;QACXQ,OAAOlB,OAAOuB,uBAAuB;QACrCC,MAAMxB,OAAOmB,uBAAuB;QACpC,CAACpB,qBAAqB,EAAE;YACtByB,MAAM;QACR;IACF;AACF,EAAE;AAEF,OAAO,MAAMC,mBAAmB;IAC9B,OAAO;QACL,GAAGxB,iBAAiByB,cAAc;QAClCF,MAAMxB,OAAOmB,uBAAuB;QACpCQ,mBAAmB;IACrB;AACF,EAAE;AAEF,OAAO,MAAMC,sBAAsB;IACjC,OAAO;QACL,GAAG3B,iBAAiBG,KAAK;QACzBoB,MAAMxB,OAAOmB,uBAAuB;QACpCU,YAAY;QACZ,CAAC9B,qBAAqB,EAAE;YACtByB,MAAM;QACR;IACF;AACF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utilities/SVGTooltipText.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useState, useRef, useEffect, useCallback } from 'react';\nimport { usePortalMountNode } from '@fluentui/react-shared-contexts';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport { Async } from './async-utils';\nimport { KeyCodes } from './KeyCodes';\nimport { useId } from '@fluentui/react-utilities';\n\ninterface SVGTooltipTextProps {\n closeDelay?: number;\n content: string;\n delay?: number;\n tooltipProps?: React.ComponentProps<typeof Tooltip>;\n textProps?: React.SVGAttributes<SVGTextElement>;\n maxWidth?: number;\n maxHeight?: number;\n shouldReceiveFocus?: boolean;\n isTooltipVisibleProp?: boolean;\n wrapContent?: (content: string, id: string, maxWidth: number, maxHeight?: number) => boolean;\n showBackground?: boolean;\n className?: string;\n}\n\nexport const SVGTooltipText: React.FunctionComponent<SVGTooltipTextProps> = React.forwardRef<\n HTMLDivElement,\n SVGTooltipTextProps\n>((props, forwardedRef) => {\n const [isTooltipVisible, setIsTooltipVisible] = useState(false);\n const [isOverflowing, setIsOverflowing] = useState(false);\n const [textWidth, setTextWidth] = useState(0);\n const [textHeight, setTextHeight] = useState(0);\n\n const tooltipHostRef = useRef<SVGTextElement>(null);\n const async = useRef(new Async()).current;\n const dismissTimerId = useRef<number>();\n const openTimerId = useRef<number>();\n const tooltipHostId = useRef(useId('tooltip-host')).current;\n const ignoreNextFocusEvent = useRef(false);\n const portalMountNode = usePortalMountNode();\n const PADDING = 3;\n\n const wrapContentCallback = useCallback(() => {\n if (\n props.content &&\n props.wrapContent &&\n props.wrapContent(props.content, tooltipHostId, props.maxWidth ?? 100, props.maxHeight)\n // ToDo - Specify a correct fallback value here\n ) {\n setIsOverflowing(true);\n } else {\n setIsOverflowing(false);\n }\n }, [props, tooltipHostId]);\n\n const measureText = useCallback((): void => {\n if (tooltipHostRef.current && typeof tooltipHostRef.current.getBBox === 'function') {\n const bbox = tooltipHostRef.current.getBBox();\n setTextWidth(bbox.width);\n setTextHeight(bbox.height);\n }\n }, []);\n\n useEffect(() => {\n wrapContentCallback();\n return () => {\n async.dispose();\n };\n }, [wrapContentCallback, async]);\n\n useEffect(() => {\n wrapContentCallback();\n }, [props.maxWidth, props.maxHeight, wrapContentCallback]);\n\n useEffect(() => {\n if (isTooltipVisible) {\n measureText();\n }\n }, [isTooltipVisible, measureText]);\n\n useEffect(() => {\n // Recalculate text dimensions when content or dimensions change\n measureText();\n }, [props.content, props.textProps, props.maxWidth, props.maxHeight, measureText]);\n\n const hideTooltip = useCallback(() => {\n async.clearTimeout(openTimerId.current!);\n async.clearTimeout(dismissTimerId.current!);\n setIsTooltipVisible(false);\n }, [async]);\n\n const onTooltipMouseEnter = useCallback(\n (ev: React.MouseEvent<SVGElement>) => {\n if (!isOverflowing) {\n return;\n }\n\n if (ev.target && portalMountNode?.contains(ev.target as HTMLElement)) {\n return;\n }\n\n async.clearTimeout(dismissTimerId.current!);\n async.clearTimeout(openTimerId.current!);\n\n if (props.delay !== 0) {\n openTimerId.current = async.setTimeout(() => {\n setIsTooltipVisible(true);\n }, props.delay!);\n } else {\n setIsTooltipVisible(true);\n }\n },\n [isOverflowing, portalMountNode, async, props.delay],\n );\n\n const onTooltipMouseLeave = useCallback(\n (ev: React.MouseEvent<SVGElement>) => {\n async.clearTimeout(dismissTimerId.current!);\n async.clearTimeout(openTimerId.current!);\n\n if (props.closeDelay) {\n dismissTimerId.current = async.setTimeout(() => {\n setIsTooltipVisible(false);\n }, props.closeDelay);\n } else {\n setIsTooltipVisible(false);\n }\n },\n [async, props.closeDelay],\n );\n\n const onTooltipFocus = useCallback(\n (ev: React.FocusEvent<SVGElement>) => {\n if (ignoreNextFocusEvent.current) {\n ignoreNextFocusEvent.current = false;\n return;\n }\n onTooltipMouseEnter(ev as unknown as React.MouseEvent<SVGElement>);\n },\n [onTooltipMouseEnter],\n );\n\n const onTooltipBlur = useCallback(\n (ev: React.FocusEvent<SVGElement>) => {\n ignoreNextFocusEvent.current = document?.activeElement === ev.target;\n dismissTimerId.current = async.setTimeout(() => {\n setIsTooltipVisible(false);\n }, 0);\n },\n [async],\n );\n\n const onTooltipKeyDown = useCallback(\n (ev: React.KeyboardEvent<SVGElement>) => {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n if ((ev.which === KeyCodes.escape || ev.ctrlKey) && isTooltipVisible) {\n hideTooltip();\n ev.stopPropagation();\n }\n },\n [isTooltipVisible, hideTooltip],\n );\n\n const showTooltip =\n (props.isTooltipVisibleProp && isOverflowing && !!props.content) || (isTooltipVisible && !!props.content);\n\n const rectX = (typeof props.textProps?.x === 'number' ? props.textProps.x : 0) - (textWidth ?? 0) / 2 - PADDING;\n const rectY = (typeof props.textProps?.y === 'number' ? props.textProps.y : 0) - (textHeight ?? 0) / 2 - 2 * PADDING;\n\n return (\n <>\n {props.showBackground && (\n <rect\n x={rectX}\n y={rectY}\n width={(textWidth ?? 0) + 2 * PADDING}\n height={(textHeight ?? 0) + PADDING}\n transform={props.textProps?.transform}\n className={props.className}\n />\n )}\n <Tooltip\n relationship=\"description\"\n {...props.tooltipProps}\n withArrow\n content={props.content}\n // targetElement={getTargetElement()} ToDo - This assignment is causing build failure. Needs to be fixed.\n visible={showTooltip}\n >\n <text\n {...props.textProps}\n id={tooltipHostId}\n ref={tooltipHostRef}\n onFocusCapture={onTooltipFocus}\n onBlurCapture={onTooltipBlur}\n onMouseEnter={onTooltipMouseEnter}\n onMouseLeave={onTooltipMouseLeave}\n onKeyDown={onTooltipKeyDown}\n data-is-focusable={props.shouldReceiveFocus && isOverflowing}\n >\n {props.content}\n </text>\n </Tooltip>\n </>\n );\n});\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nSVGTooltipText.defaultProps = {\n delay: 0,\n showBackground: false,\n};\n"],"names":["React","useState","useRef","useEffect","useCallback","usePortalMountNode","Tooltip","Async","KeyCodes","useId","SVGTooltipText","forwardRef","props","forwardedRef","isTooltipVisible","setIsTooltipVisible","isOverflowing","setIsOverflowing","textWidth","setTextWidth","textHeight","setTextHeight","tooltipHostRef","async","current","dismissTimerId","openTimerId","tooltipHostId","ignoreNextFocusEvent","portalMountNode","PADDING","wrapContentCallback","content","wrapContent","maxWidth","maxHeight","measureText","getBBox","bbox","width","height","dispose","textProps","hideTooltip","clearTimeout","onTooltipMouseEnter","ev","target","contains","delay","setTimeout","onTooltipMouseLeave","closeDelay","onTooltipFocus","onTooltipBlur","document","activeElement","onTooltipKeyDown","which","escape","ctrlKey","stopPropagation","showTooltip","isTooltipVisibleProp","rectX","x","rectY","y","showBackground","rect","transform","className","relationship","tooltipProps","withArrow","visible","text","id","ref","onFocusCapture","onBlurCapture","onMouseEnter","onMouseLeave","onKeyDown","data-is-focusable","shouldReceiveFocus","defaultProps"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/utilities/SVGTooltipText.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useState, useRef, useEffect, useCallback } from 'react';\nimport { usePortalMountNode } from '@fluentui/react-shared-contexts';\nimport { Tooltip } from '@fluentui/react-tooltip';\nimport { Async } from './async-utils';\nimport { KeyCodes } from './KeyCodes';\nimport { useId } from '@fluentui/react-utilities';\n\nexport interface SVGTooltipTextProps {\n closeDelay?: number;\n content: string;\n delay?: number;\n tooltipProps?: React.ComponentProps<typeof Tooltip>;\n textProps?: React.SVGAttributes<SVGTextElement>;\n maxWidth?: number;\n maxHeight?: number;\n shouldReceiveFocus?: boolean;\n isTooltipVisibleProp?: boolean;\n wrapContent?: (content: string, id: string, maxWidth: number, maxHeight?: number) => boolean;\n showBackground?: boolean;\n className?: string;\n}\n\nexport const SVGTooltipText: React.FunctionComponent<SVGTooltipTextProps> = React.forwardRef<\n HTMLDivElement,\n SVGTooltipTextProps\n>((props, forwardedRef) => {\n const [isTooltipVisible, setIsTooltipVisible] = useState(false);\n const [isOverflowing, setIsOverflowing] = useState(false);\n const [textWidth, setTextWidth] = useState(0);\n const [textHeight, setTextHeight] = useState(0);\n\n const tooltipHostRef = useRef<SVGTextElement>(null);\n const async = useRef(new Async()).current;\n const dismissTimerId = useRef<number>();\n const openTimerId = useRef<number>();\n const tooltipHostId = useRef(useId('tooltip-host')).current;\n const ignoreNextFocusEvent = useRef(false);\n const portalMountNode = usePortalMountNode();\n const PADDING = 3;\n\n const wrapContentCallback = useCallback(() => {\n if (\n props.content &&\n props.wrapContent &&\n props.wrapContent(props.content, tooltipHostId, props.maxWidth ?? 100, props.maxHeight)\n // ToDo - Specify a correct fallback value here\n ) {\n setIsOverflowing(true);\n } else {\n setIsOverflowing(false);\n }\n }, [props, tooltipHostId]);\n\n const measureText = useCallback((): void => {\n if (tooltipHostRef.current && typeof tooltipHostRef.current.getBBox === 'function') {\n const bbox = tooltipHostRef.current.getBBox();\n setTextWidth(bbox.width);\n setTextHeight(bbox.height);\n }\n }, []);\n\n useEffect(() => {\n wrapContentCallback();\n return () => {\n async.dispose();\n };\n }, [wrapContentCallback, async]);\n\n useEffect(() => {\n wrapContentCallback();\n }, [props.maxWidth, props.maxHeight, wrapContentCallback]);\n\n useEffect(() => {\n if (isTooltipVisible) {\n measureText();\n }\n }, [isTooltipVisible, measureText]);\n\n useEffect(() => {\n // Recalculate text dimensions when content or dimensions change\n measureText();\n }, [props.content, props.textProps, props.maxWidth, props.maxHeight, measureText]);\n\n const hideTooltip = useCallback(() => {\n async.clearTimeout(openTimerId.current!);\n async.clearTimeout(dismissTimerId.current!);\n setIsTooltipVisible(false);\n }, [async]);\n\n const onTooltipMouseEnter = useCallback(\n (ev: React.MouseEvent<SVGElement>) => {\n if (!isOverflowing) {\n return;\n }\n\n if (ev.target && portalMountNode?.contains(ev.target as HTMLElement)) {\n return;\n }\n\n async.clearTimeout(dismissTimerId.current!);\n async.clearTimeout(openTimerId.current!);\n\n if (props.delay !== 0) {\n openTimerId.current = async.setTimeout(() => {\n setIsTooltipVisible(true);\n }, props.delay!);\n } else {\n setIsTooltipVisible(true);\n }\n },\n [isOverflowing, portalMountNode, async, props.delay],\n );\n\n const onTooltipMouseLeave = useCallback(\n (ev: React.MouseEvent<SVGElement>) => {\n async.clearTimeout(dismissTimerId.current!);\n async.clearTimeout(openTimerId.current!);\n\n if (props.closeDelay) {\n dismissTimerId.current = async.setTimeout(() => {\n setIsTooltipVisible(false);\n }, props.closeDelay);\n } else {\n setIsTooltipVisible(false);\n }\n },\n [async, props.closeDelay],\n );\n\n const onTooltipFocus = useCallback(\n (ev: React.FocusEvent<SVGElement>) => {\n if (ignoreNextFocusEvent.current) {\n ignoreNextFocusEvent.current = false;\n return;\n }\n onTooltipMouseEnter(ev as unknown as React.MouseEvent<SVGElement>);\n },\n [onTooltipMouseEnter],\n );\n\n const onTooltipBlur = useCallback(\n (ev: React.FocusEvent<SVGElement>) => {\n ignoreNextFocusEvent.current = document?.activeElement === ev.target;\n dismissTimerId.current = async.setTimeout(() => {\n setIsTooltipVisible(false);\n }, 0);\n },\n [async],\n );\n\n const onTooltipKeyDown = useCallback(\n (ev: React.KeyboardEvent<SVGElement>) => {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n if ((ev.which === KeyCodes.escape || ev.ctrlKey) && isTooltipVisible) {\n hideTooltip();\n ev.stopPropagation();\n }\n },\n [isTooltipVisible, hideTooltip],\n );\n\n const showTooltip =\n (props.isTooltipVisibleProp && isOverflowing && !!props.content) || (isTooltipVisible && !!props.content);\n\n const rectX = (typeof props.textProps?.x === 'number' ? props.textProps.x : 0) - (textWidth ?? 0) / 2 - PADDING;\n const rectY = (typeof props.textProps?.y === 'number' ? props.textProps.y : 0) - (textHeight ?? 0) / 2 - 2 * PADDING;\n\n return (\n <>\n {props.showBackground && (\n <rect\n x={rectX}\n y={rectY}\n width={(textWidth ?? 0) + 2 * PADDING}\n height={(textHeight ?? 0) + PADDING}\n transform={props.textProps?.transform}\n className={props.className}\n />\n )}\n <Tooltip\n relationship=\"description\"\n {...props.tooltipProps}\n withArrow\n content={props.content}\n // targetElement={getTargetElement()} ToDo - This assignment is causing build failure. Needs to be fixed.\n visible={showTooltip}\n >\n <text\n {...props.textProps}\n id={tooltipHostId}\n ref={tooltipHostRef}\n onFocusCapture={onTooltipFocus}\n onBlurCapture={onTooltipBlur}\n onMouseEnter={onTooltipMouseEnter}\n onMouseLeave={onTooltipMouseLeave}\n onKeyDown={onTooltipKeyDown}\n data-is-focusable={props.shouldReceiveFocus && isOverflowing}\n >\n {props.content}\n </text>\n </Tooltip>\n </>\n );\n});\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nSVGTooltipText.defaultProps = {\n delay: 0,\n showBackground: false,\n};\n"],"names":["React","useState","useRef","useEffect","useCallback","usePortalMountNode","Tooltip","Async","KeyCodes","useId","SVGTooltipText","forwardRef","props","forwardedRef","isTooltipVisible","setIsTooltipVisible","isOverflowing","setIsOverflowing","textWidth","setTextWidth","textHeight","setTextHeight","tooltipHostRef","async","current","dismissTimerId","openTimerId","tooltipHostId","ignoreNextFocusEvent","portalMountNode","PADDING","wrapContentCallback","content","wrapContent","maxWidth","maxHeight","measureText","getBBox","bbox","width","height","dispose","textProps","hideTooltip","clearTimeout","onTooltipMouseEnter","ev","target","contains","delay","setTimeout","onTooltipMouseLeave","closeDelay","onTooltipFocus","onTooltipBlur","document","activeElement","onTooltipKeyDown","which","escape","ctrlKey","stopPropagation","showTooltip","isTooltipVisibleProp","rectX","x","rectY","y","showBackground","rect","transform","className","relationship","tooltipProps","withArrow","visible","text","id","ref","onFocusCapture","onBlurCapture","onMouseEnter","onMouseLeave","onKeyDown","data-is-focusable","shouldReceiveFocus","defaultProps"],"mappings":"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"}
@@ -1,3 +1,4 @@
1
1
  export * from './utilities';
2
2
  export * from './colors';
3
3
  export * from './vbc-utils';
4
+ export * from './Common.styles';
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utilities/index.ts"],"sourcesContent":["export * from './utilities';\nexport * from './colors';\nexport * from './vbc-utils';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,WAAW;AACzB,cAAc,cAAc"}
1
+ {"version":3,"sources":["../src/utilities/index.ts"],"sourcesContent":["export * from './utilities';\nexport * from './colors';\nexport * from './vbc-utils';\nexport * from './Common.styles';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,kBAAkB"}
@@ -0,0 +1,52 @@
1
+ import * as React from 'react';
2
+ /**
3
+ * Helper to render categorical labels for scatterpolar charts with improved overlap logic across all series
4
+ * Now places labels at equal angles for all unique texts, regardless of data positions.
5
+ */ export function renderScatterPolarCategoryLabels({ xAxisScale, yAxisScale, className, lineOptions, minPixelGap = 40 }) {
6
+ const maybeLineOptions = extractMaybeLineOptions(lineOptions);
7
+ var _maybeLineOptions_axisLabel;
8
+ // Always use axisLabel from lineOptions to display the labels
9
+ const uniqueTexts = (_maybeLineOptions_axisLabel = maybeLineOptions === null || maybeLineOptions === void 0 ? void 0 : maybeLineOptions.axisLabel) !== null && _maybeLineOptions_axisLabel !== void 0 ? _maybeLineOptions_axisLabel : [];
10
+ // Place labels at equal angles
11
+ const renderedLabels = [];
12
+ const placedPositions = [];
13
+ const labelRadius = 0.7; // You can adjust this value for more/less offset
14
+ const numLabels = uniqueTexts.length;
15
+ // Respect schema or prop rotation and direction (default ccw, 0°)
16
+ const dirMultiplier = (maybeLineOptions === null || maybeLineOptions === void 0 ? void 0 : maybeLineOptions.direction) === 'clockwise' ? -1 : 1;
17
+ var _maybeLineOptions_rotation;
18
+ const rotationRad = ((_maybeLineOptions_rotation = maybeLineOptions === null || maybeLineOptions === void 0 ? void 0 : maybeLineOptions.rotation) !== null && _maybeLineOptions_rotation !== void 0 ? _maybeLineOptions_rotation : 0) * Math.PI / 180;
19
+ uniqueTexts.forEach((text, i)=>{
20
+ const angle = rotationRad + dirMultiplier * (2 * Math.PI / numLabels) * i;
21
+ const originXOffset = (maybeLineOptions === null || maybeLineOptions === void 0 ? void 0 : maybeLineOptions.originXOffset) || 0;
22
+ const x = xAxisScale(labelRadius * Math.cos(angle) - originXOffset / 2);
23
+ const y = yAxisScale(labelRadius * Math.sin(angle));
24
+ // Check distance from all previously placed labels
25
+ const isFarEnough = placedPositions.every((pos)=>Math.sqrt((x - pos.x) ** 2 + (y - pos.y) ** 2) >= minPixelGap);
26
+ if (renderedLabels.length === 0 || isFarEnough) {
27
+ renderedLabels.push(/*#__PURE__*/ React.createElement("text", {
28
+ key: `scatterpolar-label-${text}`,
29
+ x: x,
30
+ y: y,
31
+ className: className,
32
+ textAnchor: "middle",
33
+ alignmentBaseline: "middle",
34
+ opacity: 1
35
+ }, text));
36
+ placedPositions.push({
37
+ x,
38
+ y
39
+ });
40
+ }
41
+ });
42
+ return renderedLabels;
43
+ }
44
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
45
+ export function extractMaybeLineOptions(lineOptions) {
46
+ return lineOptions ? {
47
+ originXOffset: lineOptions.originXOffset,
48
+ direction: lineOptions.direction === 'clockwise' || lineOptions.direction === 'counterclockwise' ? lineOptions.direction : undefined,
49
+ rotation: lineOptions.rotation,
50
+ axisLabel: Array.isArray(lineOptions.axisLabel) ? lineOptions.axisLabel : undefined
51
+ } : undefined;
52
+ }
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/utilities/scatterpolar-utils.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ScaleLinear } from 'd3-scale';\nimport { JSXElement } from '@fluentui/react-utilities';\n\n/**\n * Helper to render categorical labels for scatterpolar charts with improved overlap logic across all series\n * Now places labels at equal angles for all unique texts, regardless of data positions.\n */\nexport function renderScatterPolarCategoryLabels({\n xAxisScale,\n yAxisScale,\n className,\n lineOptions,\n minPixelGap = 40,\n}: {\n xAxisScale: ScaleLinear<number, number>;\n yAxisScale: ScaleLinear<number, number>;\n className: string;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n lineOptions?: any;\n minPixelGap?: number;\n}): JSXElement[] {\n const maybeLineOptions = extractMaybeLineOptions(lineOptions);\n\n // Always use axisLabel from lineOptions to display the labels\n const uniqueTexts: string[] = maybeLineOptions?.axisLabel ?? [];\n\n // Place labels at equal angles\n const renderedLabels: JSXElement[] = [];\n const placedPositions: { x: number; y: number }[] = [];\n const labelRadius = 0.7; // You can adjust this value for more/less offset\n const numLabels = uniqueTexts.length;\n\n // Respect schema or prop rotation and direction (default ccw, 0°)\n const dirMultiplier = maybeLineOptions?.direction === 'clockwise' ? -1 : 1;\n const rotationRad = ((maybeLineOptions?.rotation ?? 0) * Math.PI) / 180;\n\n uniqueTexts.forEach((text, i) => {\n const angle = rotationRad + dirMultiplier * ((2 * Math.PI) / numLabels) * i;\n const originXOffset = maybeLineOptions?.originXOffset || 0;\n const x = xAxisScale(labelRadius * Math.cos(angle) - originXOffset / 2);\n const y = yAxisScale(labelRadius * Math.sin(angle));\n\n // Check distance from all previously placed labels\n const isFarEnough = placedPositions.every(pos => Math.sqrt((x - pos.x) ** 2 + (y - pos.y) ** 2) >= minPixelGap);\n\n if (renderedLabels.length === 0 || isFarEnough) {\n renderedLabels.push(\n <text\n key={`scatterpolar-label-${text}`}\n x={x}\n y={y}\n className={className}\n textAnchor=\"middle\"\n alignmentBaseline=\"middle\"\n opacity={1}\n >\n {text}\n </text>,\n );\n placedPositions.push({ x, y });\n }\n });\n\n return renderedLabels;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function extractMaybeLineOptions(lineOptions: any):\n | {\n originXOffset?: number;\n direction?: 'clockwise' | 'counterclockwise';\n rotation?: number;\n axisLabel?: string[];\n }\n | undefined {\n return lineOptions\n ? {\n originXOffset: lineOptions.originXOffset,\n direction:\n lineOptions.direction === 'clockwise' || lineOptions.direction === 'counterclockwise'\n ? lineOptions.direction\n : undefined,\n rotation: lineOptions.rotation,\n axisLabel: Array.isArray(lineOptions.axisLabel) ? lineOptions.axisLabel : undefined,\n }\n : undefined;\n}\n"],"names":["React","renderScatterPolarCategoryLabels","xAxisScale","yAxisScale","className","lineOptions","minPixelGap","maybeLineOptions","extractMaybeLineOptions","uniqueTexts","axisLabel","renderedLabels","placedPositions","labelRadius","numLabels","length","dirMultiplier","direction","rotationRad","rotation","Math","PI","forEach","text","i","angle","originXOffset","x","cos","y","sin","isFarEnough","every","pos","sqrt","push","key","textAnchor","alignmentBaseline","opacity","undefined","Array","isArray"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B;;;CAGC,GACD,OAAO,SAASC,iCAAiC,EAC/CC,UAAU,EACVC,UAAU,EACVC,SAAS,EACTC,WAAW,EACXC,cAAc,EAAE,EAQjB;IACC,MAAMC,mBAAmBC,wBAAwBH;QAGnBE;IAD9B,8DAA8D;IAC9D,MAAME,cAAwBF,CAAAA,8BAAAA,6BAAAA,uCAAAA,iBAAkBG,SAAS,cAA3BH,yCAAAA,8BAA+B,EAAE;IAE/D,+BAA+B;IAC/B,MAAMI,iBAA+B,EAAE;IACvC,MAAMC,kBAA8C,EAAE;IACtD,MAAMC,cAAc,KAAK,iDAAiD;IAC1E,MAAMC,YAAYL,YAAYM,MAAM;IAEpC,kEAAkE;IAClE,MAAMC,gBAAgBT,CAAAA,6BAAAA,uCAAAA,iBAAkBU,SAAS,MAAK,cAAc,CAAC,IAAI;QACnDV;IAAtB,MAAMW,cAAc,AAAEX,CAAAA,CAAAA,6BAAAA,6BAAAA,uCAAAA,iBAAkBY,QAAQ,cAA1BZ,wCAAAA,6BAA8B,CAAA,IAAKa,KAAKC,EAAE,GAAI;IAEpEZ,YAAYa,OAAO,CAAC,CAACC,MAAMC;QACzB,MAAMC,QAAQP,cAAcF,gBAAiB,CAAA,AAAC,IAAII,KAAKC,EAAE,GAAIP,SAAQ,IAAKU;QAC1E,MAAME,gBAAgBnB,CAAAA,6BAAAA,uCAAAA,iBAAkBmB,aAAa,KAAI;QACzD,MAAMC,IAAIzB,WAAWW,cAAcO,KAAKQ,GAAG,CAACH,SAASC,gBAAgB;QACrE,MAAMG,IAAI1B,WAAWU,cAAcO,KAAKU,GAAG,CAACL;QAE5C,mDAAmD;QACnD,MAAMM,cAAcnB,gBAAgBoB,KAAK,CAACC,CAAAA,MAAOb,KAAKc,IAAI,CAAC,AAACP,CAAAA,IAAIM,IAAIN,CAAC,AAADA,KAAM,IAAI,AAACE,CAAAA,IAAII,IAAIJ,CAAC,AAADA,KAAM,MAAMvB;QAEnG,IAAIK,eAAeI,MAAM,KAAK,KAAKgB,aAAa;YAC9CpB,eAAewB,IAAI,eACjB,oBAACZ;gBACCa,KAAK,CAAC,mBAAmB,EAAEb,MAAM;gBACjCI,GAAGA;gBACHE,GAAGA;gBACHzB,WAAWA;gBACXiC,YAAW;gBACXC,mBAAkB;gBAClBC,SAAS;eAERhB;YAGLX,gBAAgBuB,IAAI,CAAC;gBAAER;gBAAGE;YAAE;QAC9B;IACF;IAEA,OAAOlB;AACT;AAEA,8DAA8D;AAC9D,OAAO,SAASH,wBAAwBH,WAAgB;IAQtD,OAAOA,cACH;QACEqB,eAAerB,YAAYqB,aAAa;QACxCT,WACEZ,YAAYY,SAAS,KAAK,eAAeZ,YAAYY,SAAS,KAAK,qBAC/DZ,YAAYY,SAAS,GACrBuB;QACNrB,UAAUd,YAAYc,QAAQ;QAC9BT,WAAW+B,MAAMC,OAAO,CAACrC,YAAYK,SAAS,IAAIL,YAAYK,SAAS,GAAG8B;IAC5E,IACAA;AACN"}
@@ -851,6 +851,7 @@ export function tooltipOfAxislabels(axistooltipProps) {
851
851
  * @param {boolean} isRTL
852
852
  * @returns {IDomainNRange}
853
853
  */ export function domainRangeOfNumericForAreaChart(points, margins, width, isRTL) {
854
+ const isScatterPolar = isScatterPolarSeries(points);
854
855
  const xMin = d3Min(points, (point)=>{
855
856
  return d3Min(point.data, (item)=>item.x);
856
857
  });
@@ -862,13 +863,13 @@ export function tooltipOfAxislabels(axistooltipProps) {
862
863
  const rStartValue = margins.left;
863
864
  const rEndValue = width - margins.right;
864
865
  return isRTL ? {
865
- dStartValue: xMax,
866
- dEndValue: xMin,
866
+ dStartValue: isScatterPolar ? 1 : xMax,
867
+ dEndValue: isScatterPolar ? -1 : xMin,
867
868
  rStartValue,
868
869
  rEndValue
869
870
  } : {
870
- dStartValue: xMin,
871
- dEndValue: xMax,
871
+ dStartValue: isScatterPolar ? -1 : xMin,
872
+ dEndValue: isScatterPolar ? 1 : xMax,
872
873
  rStartValue,
873
874
  rEndValue
874
875
  };
@@ -882,6 +883,7 @@ export function tooltipOfAxislabels(axistooltipProps) {
882
883
  * @param {boolean} isRTL
883
884
  * @returns {IDomainNRange}
884
885
  */ export function domainRangeOfNumericForScatterChart(points, margins, width, isRTL) {
886
+ const isScatterPolar = isScatterPolarSeries(points);
885
887
  let xMin = d3Min(points, (point)=>{
886
888
  return d3Min(point.data, (item)=>item.x);
887
889
  });
@@ -896,13 +898,13 @@ export function tooltipOfAxislabels(axistooltipProps) {
896
898
  const rStartValue = margins.left;
897
899
  const rEndValue = width - margins.right;
898
900
  return isRTL ? {
899
- dStartValue: xMax,
900
- dEndValue: xMin,
901
+ dStartValue: isScatterPolar ? 1 : xMax,
902
+ dEndValue: isScatterPolar ? -1 : xMin,
901
903
  rStartValue,
902
904
  rEndValue
903
905
  } : {
904
- dStartValue: xMin,
905
- dEndValue: xMax,
906
+ dStartValue: isScatterPolar ? -1 : xMin,
907
+ dEndValue: isScatterPolar ? 1 : xMax,
906
908
  rStartValue,
907
909
  rEndValue
908
910
  };
@@ -1486,35 +1488,6 @@ export function getCurveFactory(curve, defaultFactory = d3CurveLinear) {
1486
1488
  return defaultFactory;
1487
1489
  }
1488
1490
  }
1489
- export function createYAxisForScatterChart(yAxisParams, isRtl, axisData, isIntegralDataset, useSecondaryYScale = false, _supportNegativeData = false, roundedTicks = false) {
1490
- const { yMinMaxValues = {
1491
- startValue: 0,
1492
- endValue: 0
1493
- }, yAxisElement = null, yMaxValue = 0, yMinValue = 0, containerHeight, containerWidth, margins, tickPadding = 12, maxOfYVal = 0, yAxisTickFormat, yAxisTickCount = 4, eventAnnotationProps, eventLabelHeight } = yAxisParams;
1494
- // maxOfYVal coming from only area chart and Grouped vertical bar chart(Calculation done at base file)
1495
- const tempVal = maxOfYVal || yMinMaxValues.endValue;
1496
- const finalYmax = tempVal > yMaxValue ? tempVal : yMaxValue;
1497
- const finalYmin = Math.min(yMinMaxValues.startValue, yMinValue || 0);
1498
- const domainValues = prepareDatapoints(finalYmax, finalYmin, yAxisTickCount, isIntegralDataset, roundedTicks);
1499
- let yMin = finalYmin;
1500
- let yMax = domainValues[domainValues.length - 1];
1501
- const yPadding = (yMax - yMin) * 0.1;
1502
- yMin = yMin - yPadding;
1503
- yMax = yMax + yPadding;
1504
- const yAxisScale = d3ScaleLinear().domain([
1505
- domainValues[0],
1506
- yMax
1507
- ]).range([
1508
- containerHeight - margins.bottom,
1509
- margins.top + (eventAnnotationProps ? eventLabelHeight : 0)
1510
- ]);
1511
- const axis = !isRtl && useSecondaryYScale || isRtl && !useSecondaryYScale ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
1512
- const yAxis = axis.tickPadding(tickPadding).tickValues(domainValues).tickSizeInner(-(containerWidth - margins.left - margins.right));
1513
- yAxisTickFormat ? yAxis.tickFormat(yAxisTickFormat) : yAxis.tickFormat(d3Format('.2~s'));
1514
- yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
1515
- axisData.yAxisDomainValues = domainValues;
1516
- return yAxisScale;
1517
- }
1518
1491
  export const truncateString = (str, maxLength, ellipsis = '...')=>{
1519
1492
  if (str.length <= maxLength) {
1520
1493
  return str;
@@ -1622,3 +1595,25 @@ export const createMeasurementSpan = (text, className, parentElement)=>{
1622
1595
  measurementSpan.textContent = `${text}`;
1623
1596
  return measurementSpan;
1624
1597
  };
1598
+ /**
1599
+ * Utility function to check if an array of points is scatterpolar
1600
+ * @param points - Array of chart points
1601
+ * @returns true if any point has lineOptions.mode as 'scatterpolar'
1602
+ */ export function isScatterPolarSeries(points) {
1603
+ return points.some(// eslint-disable-next-line @typescript-eslint/no-explicit-any
1604
+ (item)=>{
1605
+ var _item_lineOptions;
1606
+ return typeof ((_item_lineOptions = item.lineOptions) === null || _item_lineOptions === void 0 ? void 0 : _item_lineOptions.mode) === 'string' && item.lineOptions.mode === 'scatterpolar';
1607
+ });
1608
+ }
1609
+ /**
1610
+ * Utility function to check if an array of points contains mode as 'text' only
1611
+ * @param points - Array of chart points
1612
+ * @returns true if any point has lineOptions.mode as 'text'
1613
+ */ export function isTextMode(points) {
1614
+ return points.some(// eslint-disable-next-line @typescript-eslint/no-explicit-any
1615
+ (item)=>{
1616
+ var _item_lineOptions;
1617
+ return typeof ((_item_lineOptions = item.lineOptions) === null || _item_lineOptions === void 0 ? void 0 : _item_lineOptions.mode) === 'string' && item.lineOptions.mode === 'text';
1618
+ });
1619
+ }