@fluentui/react-charting 5.24.4 → 5.24.5

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 (78) hide show
  1. package/CHANGELOG.json +40 -1
  2. package/CHANGELOG.md +15 -2
  3. package/config/tests.js +0 -12
  4. package/dist/react-charting.d.ts +4 -0
  5. package/dist/react-charting.js +1 -1
  6. package/dist/react-charting.min.js +1 -1
  7. package/etc/react-charting.api.md +1 -0
  8. package/lib/components/CommonComponents/CartesianChart.base.js +12 -11
  9. package/lib/components/CommonComponents/CartesianChart.base.js.map +1 -1
  10. package/lib/components/CommonComponents/CartesianChart.styles.js +41 -37
  11. package/lib/components/CommonComponents/CartesianChart.styles.js.map +1 -1
  12. package/lib/components/DeclarativeChart/DeclarativeChart.js +38 -16
  13. package/lib/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  14. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.d.ts +13 -3
  15. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +215 -139
  16. package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  17. package/lib/components/DonutChart/DonutChart.base.js +1 -0
  18. package/lib/components/DonutChart/DonutChart.base.js.map +1 -1
  19. package/lib/components/DonutChart/DonutChart.styles.js +18 -0
  20. package/lib/components/DonutChart/DonutChart.styles.js.map +1 -1
  21. package/lib/components/DonutChart/DonutChart.types.d.ts +4 -0
  22. package/lib/components/DonutChart/DonutChart.types.js.map +1 -1
  23. package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js +3 -1
  24. package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js.map +1 -1
  25. package/lib/components/VerticalBarChart/VerticalBarChart.base.js +3 -1
  26. package/lib/components/VerticalBarChart/VerticalBarChart.base.js.map +1 -1
  27. package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js +3 -1
  28. package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js.map +1 -1
  29. package/lib/utilities/SVGTooltipText.js +3 -3
  30. package/lib/utilities/SVGTooltipText.js.map +1 -1
  31. package/lib-amd/components/CommonComponents/CartesianChart.base.js +12 -11
  32. package/lib-amd/components/CommonComponents/CartesianChart.base.js.map +1 -1
  33. package/lib-amd/components/CommonComponents/CartesianChart.styles.js +41 -37
  34. package/lib-amd/components/CommonComponents/CartesianChart.styles.js.map +1 -1
  35. package/lib-amd/components/DeclarativeChart/DeclarativeChart.js +37 -15
  36. package/lib-amd/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  37. package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.d.ts +13 -3
  38. package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js +216 -139
  39. package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  40. package/lib-amd/components/DonutChart/DonutChart.base.js +1 -0
  41. package/lib-amd/components/DonutChart/DonutChart.base.js.map +1 -1
  42. package/lib-amd/components/DonutChart/DonutChart.styles.js +17 -1
  43. package/lib-amd/components/DonutChart/DonutChart.styles.js.map +1 -1
  44. package/lib-amd/components/DonutChart/DonutChart.types.d.ts +4 -0
  45. package/lib-amd/components/DonutChart/DonutChart.types.js.map +1 -1
  46. package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js +3 -1
  47. package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js.map +1 -1
  48. package/lib-amd/components/VerticalBarChart/VerticalBarChart.base.js +3 -1
  49. package/lib-amd/components/VerticalBarChart/VerticalBarChart.base.js.map +1 -1
  50. package/lib-amd/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js +3 -1
  51. package/lib-amd/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js.map +1 -1
  52. package/lib-amd/utilities/SVGTooltipText.js +3 -3
  53. package/lib-amd/utilities/SVGTooltipText.js.map +1 -1
  54. package/lib-commonjs/components/CommonComponents/CartesianChart.base.js +12 -11
  55. package/lib-commonjs/components/CommonComponents/CartesianChart.base.js.map +1 -1
  56. package/lib-commonjs/components/CommonComponents/CartesianChart.styles.js +41 -37
  57. package/lib-commonjs/components/CommonComponents/CartesianChart.styles.js.map +1 -1
  58. package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js +37 -15
  59. package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
  60. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.d.ts +13 -3
  61. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +216 -139
  62. package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
  63. package/lib-commonjs/components/DonutChart/DonutChart.base.js +1 -0
  64. package/lib-commonjs/components/DonutChart/DonutChart.base.js.map +1 -1
  65. package/lib-commonjs/components/DonutChart/DonutChart.styles.js +18 -0
  66. package/lib-commonjs/components/DonutChart/DonutChart.styles.js.map +1 -1
  67. package/lib-commonjs/components/DonutChart/DonutChart.types.d.ts +4 -0
  68. package/lib-commonjs/components/DonutChart/DonutChart.types.js.map +1 -1
  69. package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js +3 -1
  70. package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js.map +1 -1
  71. package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.base.js +3 -1
  72. package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.base.js.map +1 -1
  73. package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js +3 -1
  74. package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js.map +1 -1
  75. package/lib-commonjs/utilities/SVGTooltipText.js +3 -3
  76. package/lib-commonjs/utilities/SVGTooltipText.js.map +1 -1
  77. package/package.json +2 -2
  78. package/src/components/DonutChart/DonutChart.types.ts +5 -0
package/lib-amd/components/CommonComponents/CartesianChart.styles.js CHANGED
@@ -4,8 +4,8 @@ define(["require", "exports", "tslib", "@fluentui/react/lib/Styling", "@fluentui
4
4
  exports.getStyles = void 0;
5
5
  var isIE11Var = (0, react_1.isIE11)();
6
6
  var getStyles = function (props) {
7
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
8
- var className = props.className, theme = props.theme, isRtl = props.isRtl, shouldHighlight = props.shouldHighlight, href = props.href, _l = props.lineColor, lineColor = _l === void 0 ? 'transparent' : _l, toDrawShape = props.toDrawShape, enableReflow = props.enableReflow;
7
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
8
+ var className = props.className, theme = props.theme, isRtl = props.isRtl, shouldHighlight = props.shouldHighlight, href = props.href, _m = props.lineColor, lineColor = _m === void 0 ? 'transparent' : _m, toDrawShape = props.toDrawShape, enableReflow = props.enableReflow;
9
9
  var fonts = theme.fonts;
10
10
  return {
11
11
  root: [
@@ -37,14 +37,18 @@ define(["require", "exports", "tslib", "@fluentui/react/lib/Styling", "@fluentui
37
37
  ],
38
38
  axisAnnotation: [
39
39
  theme.fonts.small,
40
- {
41
- textAlign: 'center',
42
- fontWeight: Styling_1.FontWeights.semibold,
43
- fontStyle: 'normal',
44
- lineHeight: Styling_1.FontSizes.medium,
45
- color: react_1.NeutralColors.gray160,
46
- fill: theme.semanticColors.bodyText,
47
- },
40
+ (_b = {
41
+ textAlign: 'center',
42
+ fontWeight: Styling_1.FontWeights.semibold,
43
+ fontStyle: 'normal',
44
+ lineHeight: Styling_1.FontSizes.medium,
45
+ color: react_1.NeutralColors.gray160,
46
+ fill: theme.semanticColors.bodyText
47
+ },
48
+ _b[Styling_1.HighContrastSelector] = {
49
+ fill: 'CanvasText',
50
+ },
51
+ _b),
48
52
  ],
49
53
  xAxis: {
50
54
  selectors: {
@@ -53,23 +57,23 @@ define(["require", "exports", "tslib", "@fluentui/react/lib/Styling", "@fluentui
53
57
  {
54
58
  fill: theme.semanticColors.bodyText,
55
59
  fontWeight: '600',
56
- selectors: (_b = {},
57
- _b[Styling_1.HighContrastSelector] = {
60
+ selectors: (_c = {},
61
+ _c[Styling_1.HighContrastSelector] = {
58
62
  fill: 'CanvasText',
59
63
  },
60
- _b),
64
+ _c),
61
65
  },
62
66
  ],
63
67
  line: {
64
68
  opacity: 0.2,
65
69
  stroke: theme.semanticColors.bodyText,
66
70
  width: '1px',
67
- selectors: (_c = {},
68
- _c[Styling_1.HighContrastSelector] = {
71
+ selectors: (_d = {},
72
+ _d[Styling_1.HighContrastSelector] = {
69
73
  opacity: 0.1,
70
74
  stroke: 'CanvasText',
71
75
  },
72
- _c),
76
+ _d),
73
77
  },
74
78
  path: {
75
79
  display: 'none',
@@ -83,11 +87,11 @@ define(["require", "exports", "tslib", "@fluentui/react/lib/Styling", "@fluentui
83
87
  {
84
88
  fill: theme.semanticColors.bodyText,
85
89
  fontWeight: '600',
86
- selectors: (_d = {},
87
- _d[Styling_1.HighContrastSelector] = {
90
+ selectors: (_e = {},
91
+ _e[Styling_1.HighContrastSelector] = {
88
92
  fill: 'CanvasText',
89
93
  },
90
- _d),
94
+ _e),
91
95
  },
92
96
  ],
93
97
  path: {
@@ -96,12 +100,12 @@ define(["require", "exports", "tslib", "@fluentui/react/lib/Styling", "@fluentui
96
100
  line: {
97
101
  opacity: 0.2,
98
102
  stroke: theme.semanticColors.bodyText,
99
- selectors: (_e = {},
100
- _e[Styling_1.HighContrastSelector] = {
103
+ selectors: (_f = {},
104
+ _f[Styling_1.HighContrastSelector] = {
101
105
  opacity: 0.1,
102
106
  stroke: 'CanvasText',
103
107
  },
104
- _e),
108
+ _f),
105
109
  },
106
110
  g: [
107
111
  isRtl &&
@@ -145,11 +149,11 @@ define(["require", "exports", "tslib", "@fluentui/react/lib/Styling", "@fluentui
145
149
  color: theme.semanticColors.bodyText,
146
150
  },
147
151
  !toDrawShape && {
148
- selectors: (_f = {},
149
- _f[Styling_1.HighContrastSelector] = {
152
+ selectors: (_g = {},
153
+ _g[Styling_1.HighContrastSelector] = {
150
154
  forcedColorAdjust: 'none',
151
155
  },
152
- _f),
156
+ _g),
153
157
  borderLeft: "4px solid ".concat(lineColor),
154
158
  paddingLeft: '8px',
155
159
  },
@@ -160,26 +164,26 @@ define(["require", "exports", "tslib", "@fluentui/react/lib/Styling", "@fluentui
160
164
  shapeStyles: {
161
165
  marginRight: '8px',
162
166
  },
163
- calloutlegendText: tslib_1.__assign(tslib_1.__assign({}, fonts.small), { lineHeight: '16px', selectors: (_g = {},
164
- _g[Styling_1.HighContrastSelector] = {
167
+ calloutlegendText: tslib_1.__assign(tslib_1.__assign({}, fonts.small), { lineHeight: '16px', selectors: (_h = {},
168
+ _h[Styling_1.HighContrastSelector] = {
165
169
  color: 'CanvasText',
166
170
  },
167
- _g), color: theme.semanticColors.bodySubtext }),
171
+ _h), color: theme.semanticColors.bodySubtext }),
168
172
  calloutContentY: [
169
- tslib_1.__assign(tslib_1.__assign({}, fonts.mediumPlus), { fontWeight: 'bold', lineHeight: '22px', selectors: (_h = {},
170
- _h[Styling_1.HighContrastSelector] = {
173
+ tslib_1.__assign(tslib_1.__assign({}, fonts.mediumPlus), { fontWeight: 'bold', lineHeight: '22px', selectors: (_j = {},
174
+ _j[Styling_1.HighContrastSelector] = {
171
175
  color: 'CanvasText',
172
176
  },
173
- _h) }),
177
+ _j) }),
174
178
  ],
175
179
  descriptionMessage: [
176
180
  theme.fonts.small,
177
181
  {
178
- selectors: (_j = {},
179
- _j[Styling_1.HighContrastSelector] = {
182
+ selectors: (_k = {},
183
+ _k[Styling_1.HighContrastSelector] = {
180
184
  color: 'CanvasText',
181
185
  },
182
- _j),
186
+ _k),
183
187
  color: theme.semanticColors.bodyText,
184
188
  marginTop: '10px',
185
189
  paddingTop: '10px',
@@ -187,13 +191,13 @@ define(["require", "exports", "tslib", "@fluentui/react/lib/Styling", "@fluentui
187
191
  },
188
192
  ],
189
193
  tooltip: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none' }),
190
- svgTooltip: (_k = {
194
+ svgTooltip: (_l = {
191
195
  fill: theme.semanticColors.bodyBackground
192
196
  },
193
- _k[Styling_1.HighContrastSelector] = {
197
+ _l[Styling_1.HighContrastSelector] = {
194
198
  fill: 'Canvas',
195
199
  },
196
- _k),
200
+ _l),
197
201
  };
198
202
  };
199
203
  exports.getStyles = getStyles;
package/lib-amd/components/CommonComponents/CartesianChart.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CartesianChart.styles.js","sourceRoot":"../src/","sources":["components/CommonComponents/CartesianChart.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { ICartesianChartStyleProps, ICartesianChartStyles } from './CartesianChart.types';\nimport { FontSizes, FontWeights, HighContrastSelector } from '@fluentui/react/lib/Styling';\nimport { NeutralColors, isIE11 } from '@fluentui/react';\n\nconst isIE11Var: boolean = isIE11();\n\nexport const getStyles = (props: ICartesianChartStyleProps): ICartesianChartStyles => {\n const {\n className,\n theme,\n isRtl,\n shouldHighlight,\n href,\n lineColor = 'transparent',\n toDrawShape,\n enableReflow,\n } = props;\n const { fonts } = theme!;\n return {\n root: [\n theme.fonts.medium,\n {\n display: 'flex',\n width: '100%',\n height: '100%',\n flexDirection: 'column',\n overflow: 'hidden',\n },\n className,\n ],\n chartWrapper: {\n ...(enableReflow ? { overflow: 'auto' } : {}),\n },\n axisTitle: [\n theme.fonts.xSmall,\n {\n textAlign: 'center',\n fontWeight: FontWeights.semibold,\n fontStyle: 'normal',\n lineHeight: FontSizes.medium,\n color: NeutralColors.gray160,\n fill: theme.semanticColors.bodyText,\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n ],\n axisAnnotation: [\n theme.fonts.small,\n {\n textAlign: 'center',\n fontWeight: FontWeights.semibold,\n fontStyle: 'normal',\n lineHeight: FontSizes.medium,\n color: NeutralColors.gray160,\n fill: theme.semanticColors.bodyText,\n },\n ],\n xAxis: {\n selectors: {\n text: [\n theme.fonts.tiny,\n {\n fill: theme.semanticColors.bodyText,\n fontWeight: '600',\n selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n },\n ],\n line: {\n opacity: 0.2,\n stroke: theme.semanticColors.bodyText,\n width: '1px',\n selectors: {\n [HighContrastSelector]: {\n opacity: 0.1,\n stroke: 'CanvasText',\n },\n },\n },\n path: {\n display: 'none',\n },\n },\n },\n yAxis: {\n selectors: {\n text: [\n theme.fonts.tiny,\n {\n fill: theme.semanticColors.bodyText,\n fontWeight: '600',\n selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n },\n ],\n path: {\n display: 'none',\n },\n line: {\n opacity: 0.2,\n stroke: theme.semanticColors.bodyText,\n selectors: {\n [HighContrastSelector]: {\n opacity: 0.1,\n stroke: 'CanvasText',\n },\n },\n },\n g: [\n isRtl &&\n !isIE11Var && {\n textAnchor: 'end',\n },\n ],\n },\n },\n\n opacityChangeOnHover: {\n opacity: shouldHighlight ? '' : '0.1',\n cursor: href ? 'pointer' : 'default',\n },\n\n legendContainer: [\n {\n marginTop: '8px',\n marginLeft: '20px',\n },\n ],\n calloutContentRoot: [\n {\n display: 'grid',\n overflow: 'hidden',\n padding: '11px 16px 10px 16px',\n backgroundColor: theme.semanticColors.bodyBackground,\n backgroundBlendMode: 'normal, luminosity',\n },\n ],\n calloutDateTimeContainer: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n },\n calloutContentX: [\n {\n ...fonts.small,\n lineHeight: '16px',\n opacity: '0.85',\n color: theme.semanticColors.bodySubtext,\n },\n ],\n calloutBlockContainer: [\n theme.fonts.mediumPlus,\n {\n marginTop: '13px',\n color: theme.semanticColors.bodyText,\n },\n !toDrawShape && {\n selectors: {\n [HighContrastSelector]: {\n forcedColorAdjust: 'none',\n },\n },\n borderLeft: `4px solid ${lineColor}`,\n paddingLeft: '8px',\n },\n toDrawShape && {\n display: 'flex',\n },\n ],\n shapeStyles: {\n marginRight: '8px',\n },\n calloutlegendText: {\n ...fonts.small,\n lineHeight: '16px',\n selectors: {\n [HighContrastSelector]: {\n color: 'CanvasText',\n },\n },\n color: theme.semanticColors.bodySubtext,\n },\n calloutContentY: [\n {\n ...fonts.mediumPlus,\n fontWeight: 'bold',\n lineHeight: '22px',\n selectors: {\n [HighContrastSelector]: {\n color: 'CanvasText',\n },\n },\n },\n ],\n descriptionMessage: [\n theme.fonts.small,\n {\n selectors: {\n [HighContrastSelector]: {\n color: 'CanvasText',\n },\n },\n color: theme.semanticColors.bodyText,\n marginTop: '10px',\n paddingTop: '10px',\n borderTop: `1px solid ${theme.semanticColors.menuDivider}`,\n },\n ],\n tooltip: {\n ...theme.fonts.medium,\n display: 'flex',\n flexDirection: 'column',\n padding: '8px',\n position: 'absolute',\n textAlign: 'center',\n top: '0px',\n background: theme.semanticColors.bodyBackground,\n borderRadius: '2px',\n pointerEvents: 'none',\n },\n svgTooltip: {\n fill: theme.semanticColors.bodyBackground,\n [HighContrastSelector]: {\n fill: 'Canvas',\n },\n },\n };\n};\n"]}
1
+ {"version":3,"file":"CartesianChart.styles.js","sourceRoot":"../src/","sources":["components/CommonComponents/CartesianChart.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { ICartesianChartStyleProps, ICartesianChartStyles } from './CartesianChart.types';\nimport { FontSizes, FontWeights, HighContrastSelector } from '@fluentui/react/lib/Styling';\nimport { NeutralColors, isIE11 } from '@fluentui/react';\n\nconst isIE11Var: boolean = isIE11();\n\nexport const getStyles = (props: ICartesianChartStyleProps): ICartesianChartStyles => {\n const {\n className,\n theme,\n isRtl,\n shouldHighlight,\n href,\n lineColor = 'transparent',\n toDrawShape,\n enableReflow,\n } = props;\n const { fonts } = theme!;\n return {\n root: [\n theme.fonts.medium,\n {\n display: 'flex',\n width: '100%',\n height: '100%',\n flexDirection: 'column',\n overflow: 'hidden',\n },\n className,\n ],\n chartWrapper: {\n ...(enableReflow ? { overflow: 'auto' } : {}),\n },\n axisTitle: [\n theme.fonts.xSmall,\n {\n textAlign: 'center',\n fontWeight: FontWeights.semibold,\n fontStyle: 'normal',\n lineHeight: FontSizes.medium,\n color: NeutralColors.gray160,\n fill: theme.semanticColors.bodyText,\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n ],\n axisAnnotation: [\n theme.fonts.small,\n {\n textAlign: 'center',\n fontWeight: FontWeights.semibold,\n fontStyle: 'normal',\n lineHeight: FontSizes.medium,\n color: NeutralColors.gray160,\n fill: theme.semanticColors.bodyText,\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n ],\n xAxis: {\n selectors: {\n text: [\n theme.fonts.tiny,\n {\n fill: theme.semanticColors.bodyText,\n fontWeight: '600',\n selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n },\n ],\n line: {\n opacity: 0.2,\n stroke: theme.semanticColors.bodyText,\n width: '1px',\n selectors: {\n [HighContrastSelector]: {\n opacity: 0.1,\n stroke: 'CanvasText',\n },\n },\n },\n path: {\n display: 'none',\n },\n },\n },\n yAxis: {\n selectors: {\n text: [\n theme.fonts.tiny,\n {\n fill: theme.semanticColors.bodyText,\n fontWeight: '600',\n selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n },\n ],\n path: {\n display: 'none',\n },\n line: {\n opacity: 0.2,\n stroke: theme.semanticColors.bodyText,\n selectors: {\n [HighContrastSelector]: {\n opacity: 0.1,\n stroke: 'CanvasText',\n },\n },\n },\n g: [\n isRtl &&\n !isIE11Var && {\n textAnchor: 'end',\n },\n ],\n },\n },\n\n opacityChangeOnHover: {\n opacity: shouldHighlight ? '' : '0.1',\n cursor: href ? 'pointer' : 'default',\n },\n\n legendContainer: [\n {\n marginTop: '8px',\n marginLeft: '20px',\n },\n ],\n calloutContentRoot: [\n {\n display: 'grid',\n overflow: 'hidden',\n padding: '11px 16px 10px 16px',\n backgroundColor: theme.semanticColors.bodyBackground,\n backgroundBlendMode: 'normal, luminosity',\n },\n ],\n calloutDateTimeContainer: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n },\n calloutContentX: [\n {\n ...fonts.small,\n lineHeight: '16px',\n opacity: '0.85',\n color: theme.semanticColors.bodySubtext,\n },\n ],\n calloutBlockContainer: [\n theme.fonts.mediumPlus,\n {\n marginTop: '13px',\n color: theme.semanticColors.bodyText,\n },\n !toDrawShape && {\n selectors: {\n [HighContrastSelector]: {\n forcedColorAdjust: 'none',\n },\n },\n borderLeft: `4px solid ${lineColor}`,\n paddingLeft: '8px',\n },\n toDrawShape && {\n display: 'flex',\n },\n ],\n shapeStyles: {\n marginRight: '8px',\n },\n calloutlegendText: {\n ...fonts.small,\n lineHeight: '16px',\n selectors: {\n [HighContrastSelector]: {\n color: 'CanvasText',\n },\n },\n color: theme.semanticColors.bodySubtext,\n },\n calloutContentY: [\n {\n ...fonts.mediumPlus,\n fontWeight: 'bold',\n lineHeight: '22px',\n selectors: {\n [HighContrastSelector]: {\n color: 'CanvasText',\n },\n },\n },\n ],\n descriptionMessage: [\n theme.fonts.small,\n {\n selectors: {\n [HighContrastSelector]: {\n color: 'CanvasText',\n },\n },\n color: theme.semanticColors.bodyText,\n marginTop: '10px',\n paddingTop: '10px',\n borderTop: `1px solid ${theme.semanticColors.menuDivider}`,\n },\n ],\n tooltip: {\n ...theme.fonts.medium,\n display: 'flex',\n flexDirection: 'column',\n padding: '8px',\n position: 'absolute',\n textAlign: 'center',\n top: '0px',\n background: theme.semanticColors.bodyBackground,\n borderRadius: '2px',\n pointerEvents: 'none',\n },\n svgTooltip: {\n fill: theme.semanticColors.bodyBackground,\n [HighContrastSelector]: {\n fill: 'Canvas',\n },\n },\n };\n};\n"]}
package/lib-amd/components/DeclarativeChart/DeclarativeChart.js CHANGED
@@ -123,8 +123,11 @@ define(["require", "exports", "tslib", "react", "@fluentui/react", "../DonutChar
123
123
  catch (error) {
124
124
  throw new Error("Failed to decode plotly schema: ".concat(error));
125
125
  }
126
- var plotlyInputWithValidData = tslib_1.__assign(tslib_1.__assign({}, plotlyInput), { data: chart.validTracesInfo.map(function (trace) { return plotlyInput.data[trace[0]]; }) });
127
- var validTracesFilteredIndex = chart.validTracesInfo.map(function (trace, index) { return [index, trace[1]]; });
126
+ var plotlyInputWithValidData = tslib_1.__assign(tslib_1.__assign({}, plotlyInput), { data: chart.validTracesInfo.map(function (trace) { return plotlyInput.data[trace.index]; }) });
127
+ var validTracesFilteredIndex = chart.validTracesInfo.map(function (trace, index) { return ({
128
+ index: index,
129
+ type: trace.type,
130
+ }); });
128
131
  var selectedLegends = plotlySchema.selectedLegends;
129
132
  var colorMap = useColorMapping();
130
133
  var theme = (0, react_1.useTheme)();
@@ -183,23 +186,42 @@ define(["require", "exports", "tslib", "react", "@fluentui/react", "../DonutChar
183
186
  var cartesianProjection = (0, PlotlySchemaAdapter_1.projectPolarToCartesian)(plotlyInputWithValidData);
184
187
  plotlyInputWithValidData.data = cartesianProjection.data;
185
188
  validTracesFilteredIndex.forEach(function (trace, index) {
186
- if (trace[1] === 'scatterpolar') {
187
- validTracesFilteredIndex[index][1] = 'line'; // Change type to line for rendering
189
+ if (trace.type === 'scatterpolar') {
190
+ validTracesFilteredIndex[index].type = 'line'; // Change type to line for rendering
188
191
  }
189
192
  });
190
193
  }
191
194
  var groupedTraces = {};
195
+ var nonCartesianTraceCount = 0;
192
196
  plotlyInputWithValidData.data.forEach(function (trace, index) {
193
197
  var _a;
194
- var xAxisKey = (_a = trace.xaxis) !== null && _a !== void 0 ? _a : DEFAULT_XAXIS;
195
- if (!groupedTraces[xAxisKey]) {
196
- groupedTraces[xAxisKey] = [];
198
+ var traceKey = '';
199
+ if ((0, PlotlySchemaAdapter_1.isNonPlotType)(chart.validTracesInfo[index].type)) {
200
+ traceKey = "".concat(PlotlySchemaAdapter_1.NON_PLOT_KEY_PREFIX).concat(nonCartesianTraceCount + 1);
201
+ nonCartesianTraceCount++;
197
202
  }
198
- groupedTraces[xAxisKey].push(index);
203
+ else {
204
+ traceKey = (_a = trace.xaxis) !== null && _a !== void 0 ? _a : DEFAULT_XAXIS;
205
+ }
206
+ if (!groupedTraces[traceKey]) {
207
+ groupedTraces[traceKey] = [];
208
+ }
209
+ groupedTraces[traceKey].push(index);
199
210
  });
200
211
  isMultiPlot.current = Object.keys(groupedTraces).length > 1;
201
- var gridProperties = (0, PlotlySchemaAdapter_1.getGridProperties)(plotlyInputWithValidData.layout, isMultiPlot.current);
202
- var allupLegendsProps = (0, PlotlySchemaAdapter_1.getAllupLegendsProps)(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme);
212
+ var gridProperties = (0, PlotlySchemaAdapter_1.getGridProperties)(plotlyInputWithValidData, isMultiPlot.current, chart.validTracesInfo);
213
+ // Render only one plot if the grid properties cannot determine positioning of multiple plots.
214
+ if (isMultiPlot.current &&
215
+ gridProperties.templateRows === PlotlySchemaAdapter_1.SINGLE_REPEAT &&
216
+ gridProperties.templateColumns === PlotlySchemaAdapter_1.SINGLE_REPEAT) {
217
+ Object.keys(groupedTraces).forEach(function (key, index) {
218
+ if (index > 0) {
219
+ delete groupedTraces[key];
220
+ }
221
+ });
222
+ isMultiPlot.current = false;
223
+ }
224
+ var allupLegendsProps = (0, PlotlySchemaAdapter_1.getAllupLegendsProps)(plotlyInputWithValidData, colorMap, props.colorwayType, chart.validTracesInfo, isDarkTheme);
203
225
  // map through the grouped traces and render the appropriate chart
204
226
  return (React.createElement(React.Fragment, null,
205
227
  React.createElement("div", { style: {
@@ -210,12 +232,12 @@ define(["require", "exports", "tslib", "react", "@fluentui/react", "../DonutChar
210
232
  var _b, _c, _d;
211
233
  var xAxisKey = _a[0], index = _a[1];
212
234
  var plotlyInputForGroup = tslib_1.__assign(tslib_1.__assign({}, plotlyInputWithValidData), { data: index.map(function (idx) { return plotlyInputWithValidData.data[idx]; }) });
213
- var filteredTracesInfo = validTracesFilteredIndex.filter(function (trace) { return index.includes(trace[0]); });
214
- var chartType = validTracesFilteredIndex.some(function (trace) { return trace[1] === FALLBACK_TYPE; }) || chart.type === FALLBACK_TYPE
235
+ var filteredTracesInfo = validTracesFilteredIndex.filter(function (trace) { return index.includes(trace.index); });
236
+ var chartType = validTracesFilteredIndex.some(function (trace) { return trace.type === FALLBACK_TYPE; }) || chart.type === FALLBACK_TYPE
215
237
  ? FALLBACK_TYPE
216
- : filteredTracesInfo[0][1];
217
- if (validTracesFilteredIndex.some(function (trace) { return trace[1] === 'line'; }) &&
218
- validTracesFilteredIndex.some(function (trace) { return trace[1] === 'scatter'; })) {
238
+ : filteredTracesInfo[0].type;
239
+ if (validTracesFilteredIndex.some(function (trace) { return trace.type === 'line'; }) &&
240
+ validTracesFilteredIndex.some(function (trace) { return trace.type === 'scatter'; })) {
219
241
  chartType = 'line';
220
242
  }
221
243
  var chartEntry = chartMap[chartType];
package/lib-amd/components/DeclarativeChart/DeclarativeChart.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DeclarativeChart.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/DeclarativeChart.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport * as React from 'react';\nimport { useTheme } from '@fluentui/react';\nimport { IRefObject } from '@fluentui/react/lib/Utilities';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { decodeBase64Fields } from '@fluentui/chart-utilities';\nimport type { PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport { isArrayOrTypedArray, isMonthArray, mapFluentChart, sanitizeJson } from '@fluentui/chart-utilities';\n\nimport type { GridProperties } from './PlotlySchemaAdapter';\nimport {\n correctYearMonth,\n getGridProperties,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToAreaChartProps,\n transformPlotlyJsonToLineChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n transformPlotlyJsonToChartTableProps,\n transformPlotlyJsonToScatterChartProps,\n projectPolarToCartesian,\n getAllupLegendsProps,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\nimport { LineChart } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { IChart, IImageExportOptions } from '../../types/index';\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ScatterChart } from '../ScatterChart/index';\nimport { ChartTable } from '../ChartTable/index';\nimport { ILegendsProps, Legends } from '../Legends/index';\n\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\nconst ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\nconst ResponsiveScatterChart = withResponsiveContainer(ScatterChart);\nconst ResponsiveChartTable = withResponsiveContainer(ChartTable);\n\n// Default x-axis key for grouping traces. Also applicable for PieData and SankeyData where x-axis is not defined.\nconst DEFAULT_XAXIS = 'x';\nconst FALLBACK_TYPE = 'fallback';\n\n/**\n * DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n */\nexport interface Schema {\n /**\n * Plotly schema represented as JSON object\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n plotlySchema: any;\n}\n\n/**\n * DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n */\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n /**\n * The schema representing the chart data, layout and configuration\n */\n chartSchema: Schema;\n\n /**\n * Callback when an event occurs\n */\n onSchemaChange?: (eventData: Schema) => void;\n\n /**\n * Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject<IDeclarativeChart>;\n\n /**\n * Optional prop to specify the colorway type of the chart.\n * - 'default': Use Fluent UI color palette aligning with plotly colorway.\n * - 'builtin': Use Fluent UI colorway.\n * - 'others': Reserved for future colorways.\n * @default 'default'\n */\n colorwayType?: ColorwayType;\n}\n\n/**\n * {@docCategory DeclarativeChart}\n */\nexport interface IDeclarativeChart {\n exportAsImage: (opts?: IImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n const colorMap = React.useRef(new Map<string, string>());\n return colorMap;\n};\n\nfunction renderChart<TProps>(\n Renderer: React.ComponentType<TProps>,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n transformer: (...args: any[]) => TProps,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n transformerArgs: any[],\n commonProps: Partial<TProps>,\n cellRow: number,\n cellColumn: number,\n): JSX.Element {\n const chartProps = transformer(...transformerArgs);\n return (\n <div\n key={`${cellRow}_${cellColumn}`}\n style={{\n gridRowStart: cellRow,\n gridRowEnd: cellRow + 1,\n gridColumnStart: cellColumn,\n gridColumnEnd: cellColumn + 1,\n }}\n >\n <Renderer {...chartProps} {...commonProps} />\n </div>\n );\n}\n\ntype PreTransformHooks = {\n preTransformCondition?: (plotlySchema: PlotlySchema) => boolean;\n preTransformOperation?: (plotlySchema: PlotlySchema) => PlotlySchema;\n};\n\nconst LineAreaPreTransformOp = (plotlyInput: PlotlySchema) => {\n const xValues = (plotlyInput.data[0] as PlotData).x;\n const isXMonth = isMonthArray(xValues);\n let renderData = plotlyInput.data;\n if (isXMonth) {\n renderData = plotlyInput.data.map((dataPoint: PlotData) => ({\n ...dataPoint,\n x: correctYearMonth(dataPoint.x),\n }));\n }\n return { data: renderData, layout: plotlyInput.layout };\n};\n\ntype ChartTypeMap = {\n donut: {\n transformer: typeof transformPlotlyJsonToDonutProps;\n renderer: typeof ResponsiveDonutChart;\n } & PreTransformHooks;\n sankey: {\n transformer: typeof transformPlotlyJsonToSankeyProps;\n renderer: typeof ResponsiveSankeyChart;\n } & PreTransformHooks;\n table: {\n transformer: typeof transformPlotlyJsonToChartTableProps;\n renderer: typeof ResponsiveChartTable;\n } & PreTransformHooks;\n horizontalbar: {\n transformer: typeof transformPlotlyJsonToHorizontalBarWithAxisProps;\n renderer: typeof ResponsiveHorizontalBarChartWithAxis;\n } & PreTransformHooks;\n groupedverticalbar: {\n transformer: typeof transformPlotlyJsonToGVBCProps;\n renderer: typeof ResponsiveGroupedVerticalBarChart;\n } & PreTransformHooks;\n verticalstackedbar: {\n transformer: typeof transformPlotlyJsonToVSBCProps;\n renderer: typeof ResponsiveVerticalStackedBarChart;\n } & PreTransformHooks;\n heatmap: {\n transformer: typeof transformPlotlyJsonToHeatmapProps;\n renderer: typeof ResponsiveHeatMapChart;\n } & PreTransformHooks;\n gauge: {\n transformer: typeof transformPlotlyJsonToGaugeProps;\n renderer: typeof ResponsiveGaugeChart;\n } & PreTransformHooks;\n verticalbar: {\n transformer: typeof transformPlotlyJsonToVBCProps;\n renderer: typeof ResponsiveVerticalBarChart;\n } & PreTransformHooks;\n area: {\n transformer: typeof transformPlotlyJsonToAreaChartProps;\n renderer: typeof ResponsiveAreaChart;\n } & PreTransformHooks;\n line: {\n transformer: typeof transformPlotlyJsonToLineChartProps;\n renderer: typeof ResponsiveLineChart;\n } & PreTransformHooks;\n scatter: {\n transformer: typeof transformPlotlyJsonToScatterChartProps;\n renderer: typeof ResponsiveScatterChart;\n } & PreTransformHooks;\n fallback: {\n transformer: typeof transformPlotlyJsonToVSBCProps;\n renderer: typeof ResponsiveVerticalStackedBarChart;\n } & PreTransformHooks;\n};\n\nconst chartMap: ChartTypeMap = {\n // PieData category charts\n donut: {\n transformer: transformPlotlyJsonToDonutProps,\n renderer: ResponsiveDonutChart,\n },\n // SankeyData category charts\n sankey: {\n transformer: transformPlotlyJsonToSankeyProps,\n renderer: ResponsiveSankeyChart,\n },\n // TableData category charts\n table: {\n transformer: transformPlotlyJsonToChartTableProps,\n renderer: ResponsiveChartTable,\n },\n // PlotData category charts\n horizontalbar: {\n transformer: transformPlotlyJsonToHorizontalBarWithAxisProps,\n renderer: ResponsiveHorizontalBarChartWithAxis,\n },\n groupedverticalbar: {\n transformer: transformPlotlyJsonToGVBCProps,\n renderer: ResponsiveGroupedVerticalBarChart,\n },\n verticalstackedbar: {\n transformer: transformPlotlyJsonToVSBCProps,\n renderer: ResponsiveVerticalStackedBarChart,\n },\n heatmap: {\n transformer: transformPlotlyJsonToHeatmapProps,\n renderer: ResponsiveHeatMapChart,\n },\n gauge: {\n transformer: transformPlotlyJsonToGaugeProps,\n renderer: ResponsiveGaugeChart,\n },\n verticalbar: {\n transformer: transformPlotlyJsonToVBCProps,\n renderer: ResponsiveVerticalBarChart,\n },\n area: {\n transformer: transformPlotlyJsonToAreaChartProps,\n renderer: ResponsiveAreaChart,\n preTransformOperation: LineAreaPreTransformOp,\n },\n line: {\n transformer: transformPlotlyJsonToLineChartProps,\n renderer: ResponsiveLineChart,\n preTransformOperation: LineAreaPreTransformOp,\n },\n scatter: {\n transformer: transformPlotlyJsonToScatterChartProps,\n renderer: ResponsiveScatterChart,\n preTransformOperation: LineAreaPreTransformOp,\n },\n fallback: {\n transformer: transformPlotlyJsonToVSBCProps,\n renderer: ResponsiveVerticalStackedBarChart,\n },\n};\n\n/**\n * DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n HTMLDivElement,\n DeclarativeChartProps\n>((props, forwardedRef) => {\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n const chart: OutputChartType = mapFluentChart(plotlySchema);\n if (!chart.isValid) {\n throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n }\n let plotlyInput = plotlySchema as PlotlySchema;\n try {\n plotlyInput = decodeBase64Fields(plotlyInput);\n } catch (error) {\n throw new Error(`Failed to decode plotly schema: ${error}`);\n }\n const plotlyInputWithValidData: PlotlySchema = {\n ...plotlyInput,\n data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace[0]]),\n };\n\n const validTracesFilteredIndex: [number, string][] = chart.validTracesInfo!.map((trace, index) => [index, trace[1]]);\n\n let { selectedLegends } = plotlySchema;\n const colorMap = useColorMapping();\n const theme = useTheme();\n const isDarkTheme = theme?.isInverted ?? false;\n const chartRef = React.useRef<IChart>(null);\n const isMultiPlot = React.useRef(false);\n\n if (!isArrayOrTypedArray(selectedLegends)) {\n selectedLegends = [];\n }\n\n const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n const onActiveLegendsChange = (keys: string[]) => {\n setActiveLegends(keys);\n if (props.onSchemaChange) {\n props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });\n }\n };\n\n React.useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { selectedLegends } = plotlySchema;\n setActiveLegends(selectedLegends ?? []);\n }, [props.chartSchema]);\n\n const multiSelectLegendProps = {\n canSelectMultipleLegends: true,\n onChange: onActiveLegendsChange,\n selectedLegends: activeLegends,\n };\n\n const commonProps = {\n legendProps: multiSelectLegendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n\n function createLegends(legendProps: ILegendsProps): JSX.Element {\n // eslint-disable-next-line react/jsx-no-bind\n return <Legends {...legendProps} selectedLegends={activeLegends} onChange={onActiveLegendsChange} />;\n }\n\n const exportAsImage = React.useCallback(\n (opts?: IImageExportOptions): Promise<string> => {\n return new Promise((resolve, reject) => {\n if (isMultiPlot.current) {\n return reject(Error('Exporting multi plot charts as image is not supported'));\n }\n if (!chartRef.current || typeof chartRef.current.toImage !== 'function') {\n return reject(Error('Chart cannot be exported as image'));\n }\n\n chartRef.current\n .toImage({\n background: theme.semanticColors.bodyBackground,\n scale: 5,\n ...opts,\n })\n .then(resolve)\n .catch(reject);\n });\n },\n [theme],\n );\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n if (chart.type === 'scatterpolar') {\n const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n plotlyInputWithValidData.data = cartesianProjection.data;\n validTracesFilteredIndex.forEach((trace, index) => {\n if (trace[1] === 'scatterpolar') {\n validTracesFilteredIndex[index][1] = 'line'; // Change type to line for rendering\n }\n });\n }\n\n const groupedTraces: Record<string, number[]> = {};\n plotlyInputWithValidData.data.forEach((trace: Partial<PlotData>, index) => {\n const xAxisKey = trace.xaxis ?? DEFAULT_XAXIS;\n if (!groupedTraces[xAxisKey]) {\n groupedTraces[xAxisKey] = [];\n }\n groupedTraces[xAxisKey].push(index);\n });\n\n isMultiPlot.current = Object.keys(groupedTraces).length > 1;\n const gridProperties: GridProperties = getGridProperties(plotlyInputWithValidData.layout, isMultiPlot.current);\n\n const allupLegendsProps = getAllupLegendsProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme);\n\n type ChartType = keyof ChartTypeMap;\n // map through the grouped traces and render the appropriate chart\n return (\n <>\n <div\n style={{\n display: 'grid',\n gridTemplateRows: gridProperties.templateRows,\n gridTemplateColumns: gridProperties.templateColumns,\n }}\n >\n {Object.entries(groupedTraces).map(([xAxisKey, index]) => {\n const plotlyInputForGroup: PlotlySchema = {\n ...plotlyInputWithValidData,\n data: index.map(idx => plotlyInputWithValidData.data[idx]),\n };\n\n const filteredTracesInfo = validTracesFilteredIndex.filter(trace => index.includes(trace[0]));\n let chartType =\n validTracesFilteredIndex.some(trace => trace[1] === FALLBACK_TYPE) || chart.type === FALLBACK_TYPE\n ? FALLBACK_TYPE\n : filteredTracesInfo[0][1];\n\n if (\n validTracesFilteredIndex.some(trace => trace[1] === 'line') &&\n validTracesFilteredIndex.some(trace => trace[1] === 'scatter')\n ) {\n chartType = 'line';\n }\n\n const chartEntry = chartMap[chartType as ChartType];\n if (chartEntry) {\n const { transformer, renderer, preTransformCondition, preTransformOperation } = chartEntry;\n if (preTransformCondition === undefined || preTransformCondition(plotlyInputForGroup)) {\n const transformedInput = preTransformOperation\n ? preTransformOperation(plotlyInputForGroup)\n : plotlyInputForGroup;\n const cellProperties = gridProperties.layout[xAxisKey];\n\n return renderChart<ReturnType<typeof transformer>>(\n renderer,\n transformer,\n [transformedInput, isMultiPlot.current, colorMap, props.colorwayType, isDarkTheme],\n {\n ...commonProps,\n xAxisAnnotation: cellProperties?.xAnnotation,\n yAxisAnnotation: cellProperties?.yAnnotation,\n },\n cellProperties?.row ?? 1,\n cellProperties?.column ?? 1,\n );\n }\n return <></>;\n } else {\n throw new Error(`Unsupported chart type :${plotlyInputForGroup.data[0]?.type}`);\n }\n })}\n </div>\n {isMultiPlot.current && createLegends(allupLegendsProps)}\n </>\n );\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\nDeclarativeChart.defaultProps = {\n colorwayType: 'default',\n};\n"]}
1
+ {"version":3,"file":"DeclarativeChart.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/DeclarativeChart.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport * as React from 'react';\nimport { useTheme } from '@fluentui/react';\nimport { IRefObject } from '@fluentui/react/lib/Utilities';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { decodeBase64Fields } from '@fluentui/chart-utilities';\nimport type { Data, PlotData, PlotlySchema, OutputChartType, TraceInfo } from '@fluentui/chart-utilities';\nimport { isArrayOrTypedArray, isMonthArray, mapFluentChart, sanitizeJson } from '@fluentui/chart-utilities';\n\nimport type { GridProperties } from './PlotlySchemaAdapter';\nimport {\n correctYearMonth,\n getGridProperties,\n isNonPlotType,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToAreaChartProps,\n transformPlotlyJsonToLineChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n transformPlotlyJsonToChartTableProps,\n transformPlotlyJsonToScatterChartProps,\n projectPolarToCartesian,\n getAllupLegendsProps,\n NON_PLOT_KEY_PREFIX,\n SINGLE_REPEAT,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\nimport { LineChart } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { IChart, IImageExportOptions } from '../../types/index';\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ScatterChart } from '../ScatterChart/index';\nimport { ChartTable } from '../ChartTable/index';\nimport { ILegendsProps, Legends } from '../Legends/index';\n\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\nconst ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\nconst ResponsiveScatterChart = withResponsiveContainer(ScatterChart);\nconst ResponsiveChartTable = withResponsiveContainer(ChartTable);\n\n// Default x-axis key for grouping traces. Also applicable for PieData and SankeyData where x-axis is not defined.\nconst DEFAULT_XAXIS = 'x';\nconst FALLBACK_TYPE = 'fallback';\n\n/**\n * DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n */\nexport interface Schema {\n /**\n * Plotly schema represented as JSON object\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n plotlySchema: any;\n}\n\n/**\n * DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n */\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n /**\n * The schema representing the chart data, layout and configuration\n */\n chartSchema: Schema;\n\n /**\n * Callback when an event occurs\n */\n onSchemaChange?: (eventData: Schema) => void;\n\n /**\n * Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject<IDeclarativeChart>;\n\n /**\n * Optional prop to specify the colorway type of the chart.\n * - 'default': Use Fluent UI color palette aligning with plotly colorway.\n * - 'builtin': Use Fluent UI colorway.\n * - 'others': Reserved for future colorways.\n * @default 'default'\n */\n colorwayType?: ColorwayType;\n}\n\n/**\n * {@docCategory DeclarativeChart}\n */\nexport interface IDeclarativeChart {\n exportAsImage: (opts?: IImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n const colorMap = React.useRef(new Map<string, string>());\n return colorMap;\n};\n\nfunction renderChart<TProps>(\n Renderer: React.ComponentType<TProps>,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n transformer: (...args: any[]) => TProps,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n transformerArgs: any[],\n commonProps: Partial<TProps>,\n cellRow: number,\n cellColumn: number,\n): JSX.Element {\n const chartProps = transformer(...transformerArgs);\n return (\n <div\n key={`${cellRow}_${cellColumn}`}\n style={{\n gridRowStart: cellRow,\n gridRowEnd: cellRow + 1,\n gridColumnStart: cellColumn,\n gridColumnEnd: cellColumn + 1,\n }}\n >\n <Renderer {...chartProps} {...commonProps} />\n </div>\n );\n}\n\ntype PreTransformHooks = {\n preTransformCondition?: (plotlySchema: PlotlySchema) => boolean;\n preTransformOperation?: (plotlySchema: PlotlySchema) => PlotlySchema;\n};\n\nconst LineAreaPreTransformOp = (plotlyInput: PlotlySchema) => {\n const xValues = (plotlyInput.data[0] as PlotData).x;\n const isXMonth = isMonthArray(xValues);\n let renderData = plotlyInput.data;\n if (isXMonth) {\n renderData = plotlyInput.data.map((dataPoint: PlotData) => ({\n ...dataPoint,\n x: correctYearMonth(dataPoint.x),\n }));\n }\n return { data: renderData, layout: plotlyInput.layout };\n};\n\ntype ChartTypeMap = {\n donut: {\n transformer: typeof transformPlotlyJsonToDonutProps;\n renderer: typeof ResponsiveDonutChart;\n } & PreTransformHooks;\n sankey: {\n transformer: typeof transformPlotlyJsonToSankeyProps;\n renderer: typeof ResponsiveSankeyChart;\n } & PreTransformHooks;\n table: {\n transformer: typeof transformPlotlyJsonToChartTableProps;\n renderer: typeof ResponsiveChartTable;\n } & PreTransformHooks;\n horizontalbar: {\n transformer: typeof transformPlotlyJsonToHorizontalBarWithAxisProps;\n renderer: typeof ResponsiveHorizontalBarChartWithAxis;\n } & PreTransformHooks;\n groupedverticalbar: {\n transformer: typeof transformPlotlyJsonToGVBCProps;\n renderer: typeof ResponsiveGroupedVerticalBarChart;\n } & PreTransformHooks;\n verticalstackedbar: {\n transformer: typeof transformPlotlyJsonToVSBCProps;\n renderer: typeof ResponsiveVerticalStackedBarChart;\n } & PreTransformHooks;\n heatmap: {\n transformer: typeof transformPlotlyJsonToHeatmapProps;\n renderer: typeof ResponsiveHeatMapChart;\n } & PreTransformHooks;\n gauge: {\n transformer: typeof transformPlotlyJsonToGaugeProps;\n renderer: typeof ResponsiveGaugeChart;\n } & PreTransformHooks;\n verticalbar: {\n transformer: typeof transformPlotlyJsonToVBCProps;\n renderer: typeof ResponsiveVerticalBarChart;\n } & PreTransformHooks;\n area: {\n transformer: typeof transformPlotlyJsonToAreaChartProps;\n renderer: typeof ResponsiveAreaChart;\n } & PreTransformHooks;\n line: {\n transformer: typeof transformPlotlyJsonToLineChartProps;\n renderer: typeof ResponsiveLineChart;\n } & PreTransformHooks;\n scatter: {\n transformer: typeof transformPlotlyJsonToScatterChartProps;\n renderer: typeof ResponsiveScatterChart;\n } & PreTransformHooks;\n fallback: {\n transformer: typeof transformPlotlyJsonToVSBCProps;\n renderer: typeof ResponsiveVerticalStackedBarChart;\n } & PreTransformHooks;\n};\n\nconst chartMap: ChartTypeMap = {\n // PieData category charts\n donut: {\n transformer: transformPlotlyJsonToDonutProps,\n renderer: ResponsiveDonutChart,\n },\n // SankeyData category charts\n sankey: {\n transformer: transformPlotlyJsonToSankeyProps,\n renderer: ResponsiveSankeyChart,\n },\n // TableData category charts\n table: {\n transformer: transformPlotlyJsonToChartTableProps,\n renderer: ResponsiveChartTable,\n },\n // PlotData category charts\n horizontalbar: {\n transformer: transformPlotlyJsonToHorizontalBarWithAxisProps,\n renderer: ResponsiveHorizontalBarChartWithAxis,\n },\n groupedverticalbar: {\n transformer: transformPlotlyJsonToGVBCProps,\n renderer: ResponsiveGroupedVerticalBarChart,\n },\n verticalstackedbar: {\n transformer: transformPlotlyJsonToVSBCProps,\n renderer: ResponsiveVerticalStackedBarChart,\n },\n heatmap: {\n transformer: transformPlotlyJsonToHeatmapProps,\n renderer: ResponsiveHeatMapChart,\n },\n gauge: {\n transformer: transformPlotlyJsonToGaugeProps,\n renderer: ResponsiveGaugeChart,\n },\n verticalbar: {\n transformer: transformPlotlyJsonToVBCProps,\n renderer: ResponsiveVerticalBarChart,\n },\n area: {\n transformer: transformPlotlyJsonToAreaChartProps,\n renderer: ResponsiveAreaChart,\n preTransformOperation: LineAreaPreTransformOp,\n },\n line: {\n transformer: transformPlotlyJsonToLineChartProps,\n renderer: ResponsiveLineChart,\n preTransformOperation: LineAreaPreTransformOp,\n },\n scatter: {\n transformer: transformPlotlyJsonToScatterChartProps,\n renderer: ResponsiveScatterChart,\n preTransformOperation: LineAreaPreTransformOp,\n },\n fallback: {\n transformer: transformPlotlyJsonToVSBCProps,\n renderer: ResponsiveVerticalStackedBarChart,\n },\n};\n\n/**\n * DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n HTMLDivElement,\n DeclarativeChartProps\n>((props, forwardedRef) => {\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n const chart: OutputChartType = mapFluentChart(plotlySchema);\n if (!chart.isValid) {\n throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n }\n let plotlyInput = plotlySchema as PlotlySchema;\n try {\n plotlyInput = decodeBase64Fields(plotlyInput);\n } catch (error) {\n throw new Error(`Failed to decode plotly schema: ${error}`);\n }\n const plotlyInputWithValidData: PlotlySchema = {\n ...plotlyInput,\n data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace.index]),\n };\n\n const validTracesFilteredIndex: TraceInfo[] = chart.validTracesInfo!.map((trace, index) => ({\n index,\n type: trace.type,\n }));\n\n let { selectedLegends } = plotlySchema;\n const colorMap = useColorMapping();\n const theme = useTheme();\n const isDarkTheme = theme?.isInverted ?? false;\n const chartRef = React.useRef<IChart>(null);\n const isMultiPlot = React.useRef(false);\n\n if (!isArrayOrTypedArray(selectedLegends)) {\n selectedLegends = [];\n }\n\n const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n const onActiveLegendsChange = (keys: string[]) => {\n setActiveLegends(keys);\n if (props.onSchemaChange) {\n props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });\n }\n };\n\n React.useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { plotlySchema } = sanitizeJson(props.chartSchema);\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const { selectedLegends } = plotlySchema;\n setActiveLegends(selectedLegends ?? []);\n }, [props.chartSchema]);\n\n const multiSelectLegendProps = {\n canSelectMultipleLegends: true,\n onChange: onActiveLegendsChange,\n selectedLegends: activeLegends,\n };\n\n const commonProps = {\n legendProps: multiSelectLegendProps,\n componentRef: chartRef,\n calloutProps: { layerProps: { eventBubblingEnabled: true } },\n };\n\n function createLegends(legendProps: ILegendsProps): JSX.Element {\n // eslint-disable-next-line react/jsx-no-bind\n return <Legends {...legendProps} selectedLegends={activeLegends} onChange={onActiveLegendsChange} />;\n }\n\n const exportAsImage = React.useCallback(\n (opts?: IImageExportOptions): Promise<string> => {\n return new Promise((resolve, reject) => {\n if (isMultiPlot.current) {\n return reject(Error('Exporting multi plot charts as image is not supported'));\n }\n if (!chartRef.current || typeof chartRef.current.toImage !== 'function') {\n return reject(Error('Chart cannot be exported as image'));\n }\n\n chartRef.current\n .toImage({\n background: theme.semanticColors.bodyBackground,\n scale: 5,\n ...opts,\n })\n .then(resolve)\n .catch(reject);\n });\n },\n [theme],\n );\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n exportAsImage,\n }),\n [exportAsImage],\n );\n\n if (chart.type === 'scatterpolar') {\n const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n plotlyInputWithValidData.data = cartesianProjection.data;\n validTracesFilteredIndex.forEach((trace, index) => {\n if (trace.type === 'scatterpolar') {\n validTracesFilteredIndex[index].type = 'line'; // Change type to line for rendering\n }\n });\n }\n\n const groupedTraces: Record<string, number[]> = {};\n let nonCartesianTraceCount = 0;\n plotlyInputWithValidData.data.forEach((trace: Data, index: number) => {\n let traceKey = '';\n if (isNonPlotType(chart.validTracesInfo![index].type)) {\n traceKey = `${NON_PLOT_KEY_PREFIX}${nonCartesianTraceCount + 1}`;\n nonCartesianTraceCount++;\n } else {\n traceKey = (trace as PlotData).xaxis ?? DEFAULT_XAXIS;\n }\n if (!groupedTraces[traceKey]) {\n groupedTraces[traceKey] = [];\n }\n groupedTraces[traceKey].push(index);\n });\n\n isMultiPlot.current = Object.keys(groupedTraces).length > 1;\n const gridProperties: GridProperties = getGridProperties(\n plotlyInputWithValidData,\n isMultiPlot.current,\n chart.validTracesInfo!,\n );\n\n // Render only one plot if the grid properties cannot determine positioning of multiple plots.\n if (\n isMultiPlot.current &&\n gridProperties.templateRows === SINGLE_REPEAT &&\n gridProperties.templateColumns === SINGLE_REPEAT\n ) {\n Object.keys(groupedTraces).forEach((key, index) => {\n if (index > 0) {\n delete groupedTraces[key];\n }\n });\n isMultiPlot.current = false;\n }\n\n const allupLegendsProps = getAllupLegendsProps(\n plotlyInputWithValidData,\n colorMap,\n props.colorwayType,\n chart.validTracesInfo!,\n isDarkTheme,\n );\n\n type ChartType = keyof ChartTypeMap;\n // map through the grouped traces and render the appropriate chart\n return (\n <>\n <div\n style={{\n display: 'grid',\n gridTemplateRows: gridProperties.templateRows,\n gridTemplateColumns: gridProperties.templateColumns,\n }}\n >\n {Object.entries(groupedTraces).map(([xAxisKey, index]) => {\n const plotlyInputForGroup: PlotlySchema = {\n ...plotlyInputWithValidData,\n data: index.map(idx => plotlyInputWithValidData.data[idx]),\n };\n\n const filteredTracesInfo = validTracesFilteredIndex.filter(trace => index.includes(trace.index));\n let chartType =\n validTracesFilteredIndex.some(trace => trace.type === FALLBACK_TYPE) || chart.type === FALLBACK_TYPE\n ? FALLBACK_TYPE\n : filteredTracesInfo[0].type;\n\n if (\n validTracesFilteredIndex.some(trace => trace.type === 'line') &&\n validTracesFilteredIndex.some(trace => trace.type === 'scatter')\n ) {\n chartType = 'line';\n }\n\n const chartEntry = chartMap[chartType as ChartType];\n if (chartEntry) {\n const { transformer, renderer, preTransformCondition, preTransformOperation } = chartEntry;\n if (preTransformCondition === undefined || preTransformCondition(plotlyInputForGroup)) {\n const transformedInput = preTransformOperation\n ? preTransformOperation(plotlyInputForGroup)\n : plotlyInputForGroup;\n const cellProperties = gridProperties.layout[xAxisKey];\n\n return renderChart<ReturnType<typeof transformer>>(\n renderer,\n transformer,\n [transformedInput, isMultiPlot.current, colorMap, props.colorwayType, isDarkTheme],\n {\n ...commonProps,\n xAxisAnnotation: cellProperties?.xAnnotation,\n yAxisAnnotation: cellProperties?.yAnnotation,\n },\n cellProperties?.row ?? 1,\n cellProperties?.column ?? 1,\n );\n }\n return <></>;\n } else {\n throw new Error(`Unsupported chart type :${plotlyInputForGroup.data[0]?.type}`);\n }\n })}\n </div>\n {isMultiPlot.current && createLegends(allupLegendsProps)}\n </>\n );\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\nDeclarativeChart.defaultProps = {\n colorwayType: 'default',\n};\n"]}
package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.d.ts CHANGED
@@ -10,14 +10,22 @@ import { IGaugeChartProps } from '../GaugeChart/index';
10
10
  import { IGroupedVerticalBarChartProps } from '../GroupedVerticalBarChart/index';
11
11
  import { IVerticalBarChartProps } from '../VerticalBarChart/index';
12
12
  import { IChartTableProps } from '../ChartTable/index';
13
- import type { Datum, Layout, PlotlySchema, PlotData, TypedArray, Color } from '@fluentui/chart-utilities';
13
+ import type { Datum, PlotlySchema, PlotData, TypedArray, Color, TraceInfo } from '@fluentui/chart-utilities';
14
14
  import type { ColorwayType } from './PlotlyColorAdapter';
15
15
  import { ILegendsProps } from '../Legends/index';
16
+ export declare const NON_PLOT_KEY_PREFIX = "nonplot_";
17
+ export declare const SINGLE_REPEAT = "repeat(1, 1fr)";
18
+ type DomainInterval = {
19
+ start: number;
20
+ end: number;
21
+ };
16
22
  export type AxisProperties = {
17
23
  xAnnotation?: string;
18
24
  yAnnotation?: string;
19
25
  row: number;
20
26
  column: number;
27
+ xDomain: DomainInterval;
28
+ yDomain: DomainInterval;
21
29
  };
22
30
  export type GridAxisProperties = Record<string, AxisProperties>;
23
31
  export type GridProperties = {
@@ -47,7 +55,9 @@ export declare const projectPolarToCartesian: (input: PlotlySchema) => PlotlySch
47
55
  * @param trace
48
56
  */
49
57
  export declare function findArrayAttributes(trace: any): void;
50
- export declare const getAllupLegendsProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => ILegendsProps;
58
+ export declare const getAllupLegendsProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, traceInfo: TraceInfo[], isDarkTheme?: boolean) => ILegendsProps;
51
59
  export declare const getNumberAtIndexOrDefault: (data: PlotData['z'] | undefined, index: number) => number | undefined;
52
60
  export declare const getValidXYRanges: (series: Partial<PlotData>) => [number, number][];
53
- export declare const getGridProperties: (layout: Partial<Layout> | undefined, isMultiPlot: boolean) => GridProperties;
61
+ export declare const isNonPlotType: (chartType: string) => boolean;
62
+ export declare const getGridProperties: (schema: PlotlySchema | undefined, isMultiPlot: boolean, validTracesInfo: TraceInfo[]) => GridProperties;
63
+ export {};