@j2inn/fin5-ui-utils 5.2.2-beta.9 → 6.0.0

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 (231) hide show
  1. package/README.md +5 -5
  2. package/dist/fantomProps/createFin5Props/index.d.ts +12 -12
  3. package/dist/fantomProps/createFin5Props/index.js +146 -146
  4. package/dist/fantomProps/createFin5Props/runCreateFin5Props.d.ts +2 -2
  5. package/dist/fantomProps/createFin5Props/runCreateFin5Props.js +16 -16
  6. package/dist/fantomProps/fantomPropsToObject.d.ts +8 -8
  7. package/dist/fantomProps/fantomPropsToObject.js +183 -183
  8. package/dist/fantomProps/generateJsonFromFantomPropsFile.d.ts +4 -4
  9. package/dist/fantomProps/generateJsonFromFantomPropsFile.js +41 -41
  10. package/dist/fantomProps/localePropsToJson.d.ts +1 -1
  11. package/dist/fantomProps/localePropsToJson.js +50 -50
  12. package/dist/fantomProps/readFantomPropsFile.d.ts +5 -5
  13. package/dist/fantomProps/readFantomPropsFile.js +61 -61
  14. package/dist/fin5Top/fin5FileUpload.d.ts +24 -24
  15. package/dist/fin5Top/fin5FileUpload.js +51 -51
  16. package/dist/fin5Top/fin5Top.d.ts +124 -124
  17. package/dist/fin5Top/fin5Top.js +58 -58
  18. package/dist/fin5Top/finEdge2Cloud.d.ts +6 -6
  19. package/dist/fin5Top/finEdge2Cloud.js +15 -15
  20. package/dist/fin5Top/getFin5BinUrl.d.ts +2 -2
  21. package/dist/fin5Top/getFin5BinUrl.js +9 -9
  22. package/dist/fin5Top/openFin5Alarm.d.ts +22 -22
  23. package/dist/fin5Top/openFin5Alarm.js +23 -23
  24. package/dist/fin5Top/openFin5Historian.d.ts +3 -3
  25. package/dist/fin5Top/openFin5Historian.js +19 -19
  26. package/dist/fin5Top/useFin5AppURLHashParameter.d.ts +18 -18
  27. package/dist/fin5Top/useFin5AppURLHashParameter.js +133 -133
  28. package/dist/index.d.ts +31 -36
  29. package/dist/index.js +65 -70
  30. package/dist/index.js.map +1 -1
  31. package/dist/jobs/jobUtils.d.ts +14 -14
  32. package/dist/jobs/jobUtils.js +15 -15
  33. package/dist/react/app/Fin5AppContainer.d.ts +36 -36
  34. package/dist/react/app/Fin5AppContainer.js +102 -102
  35. package/dist/react/app/Fin5AppRootStore.d.ts +38 -39
  36. package/dist/react/app/Fin5AppRootStore.js +68 -69
  37. package/dist/react/app/Fin5AppRootStore.js.map +1 -1
  38. package/dist/react/components/ErrorBoundary.d.ts +57 -57
  39. package/dist/react/components/ErrorBoundary.js +150 -150
  40. package/dist/react/components/ErrorDisplayer.d.ts +19 -19
  41. package/dist/react/components/ErrorDisplayer.js +36 -36
  42. package/dist/react/components/Loader.d.ts +9 -9
  43. package/dist/react/components/Loader.js +17 -17
  44. package/dist/react/components/LoadingSpinner.d.ts +2 -2
  45. package/dist/react/components/LoadingSpinner.js +27 -27
  46. package/dist/react/components/RecordImage.d.ts +20 -20
  47. package/dist/react/components/RecordImage.js +51 -51
  48. package/dist/react/components/charts/QRCode.d.ts +25 -25
  49. package/dist/react/components/charts/QRCode.js +81 -82
  50. package/dist/react/components/charts/QRCode.js.map +1 -1
  51. package/dist/react/components/charts/pie/PieChart.d.ts +93 -94
  52. package/dist/react/components/charts/pie/PieChart.js +202 -204
  53. package/dist/react/components/charts/pie/PieChart.js.map +1 -1
  54. package/dist/react/components/charts/pie/SimplePieChart.d.ts +20 -21
  55. package/dist/react/components/charts/pie/SimplePieChart.js +55 -55
  56. package/dist/react/components/charts/pie/SimplePieChart.js.map +1 -1
  57. package/dist/react/components/graphics/GraphicViewer.d.ts +10 -10
  58. package/dist/react/components/graphics/GraphicViewer.js +29 -29
  59. package/dist/react/components/graphics/GraphicsTabViewer.d.ts +17 -17
  60. package/dist/react/components/graphics/GraphicsTabViewer.js +90 -90
  61. package/dist/react/components/navigation/BasicLayout.d.ts +41 -41
  62. package/dist/react/components/navigation/BasicLayout.js +155 -155
  63. package/dist/react/components/navigation/HeaderSiderLayout.d.ts +13 -13
  64. package/dist/react/components/navigation/HeaderSiderLayout.js +110 -110
  65. package/dist/react/components/navigation/MenuPage.d.ts +37 -37
  66. package/dist/react/components/navigation/MenuPage.js +36 -36
  67. package/dist/react/components/navigation/MenuTrigger.d.ts +9 -9
  68. package/dist/react/components/navigation/MenuTrigger.js +33 -33
  69. package/dist/react/components/navigation/ReactRouterHeaderSiderLayout.d.ts +11 -11
  70. package/dist/react/components/navigation/ReactRouterHeaderSiderLayout.js +25 -25
  71. package/dist/react/components/navigation/ReactRouterLayout.d.ts +46 -46
  72. package/dist/react/components/navigation/ReactRouterLayout.js +132 -132
  73. package/dist/react/components/navigation/customRouting/Router.d.ts +12 -12
  74. package/dist/react/components/navigation/customRouting/Router.js +45 -45
  75. package/dist/react/components/navigation/customRouting/RouterLayout.d.ts +11 -11
  76. package/dist/react/components/navigation/customRouting/RouterLayout.js +61 -61
  77. package/dist/react/components/resolvable/configurationForm/ConfigurationForm.d.ts +27 -27
  78. package/dist/react/components/resolvable/configurationForm/ConfigurationForm.js +95 -95
  79. package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.d.ts +16 -16
  80. package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.js +88 -88
  81. package/dist/react/components/resolvable/configurationForm/getSectionDefault.d.ts +16 -16
  82. package/dist/react/components/resolvable/configurationForm/getSectionDefault.js +99 -99
  83. package/dist/react/hooks/useFin5BinUrl.d.ts +6 -6
  84. package/dist/react/hooks/useFin5BinUrl.js +15 -15
  85. package/dist/react/hooks/useFin5ColorScheme.d.ts +2 -2
  86. package/dist/react/hooks/useFin5ColorScheme.js +42 -42
  87. package/dist_es/fantomProps/createFin5Props/index.d.ts +12 -12
  88. package/dist_es/fantomProps/createFin5Props/index.js +140 -140
  89. package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.d.ts +2 -2
  90. package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.js +11 -11
  91. package/dist_es/fantomProps/fantomPropsToObject.d.ts +8 -8
  92. package/dist_es/fantomProps/fantomPropsToObject.js +178 -178
  93. package/dist_es/fantomProps/generateJsonFromFantomPropsFile.d.ts +4 -4
  94. package/dist_es/fantomProps/generateJsonFromFantomPropsFile.js +12 -12
  95. package/dist_es/fantomProps/localePropsToJson.d.ts +1 -1
  96. package/dist_es/fantomProps/localePropsToJson.js +21 -21
  97. package/dist_es/fantomProps/readFantomPropsFile.d.ts +5 -5
  98. package/dist_es/fantomProps/readFantomPropsFile.js +35 -35
  99. package/dist_es/fin5Top/fin5FileUpload.d.ts +24 -24
  100. package/dist_es/fin5Top/fin5FileUpload.js +47 -47
  101. package/dist_es/fin5Top/fin5Top.d.ts +124 -124
  102. package/dist_es/fin5Top/fin5Top.js +54 -54
  103. package/dist_es/fin5Top/finEdge2Cloud.d.ts +6 -6
  104. package/dist_es/fin5Top/finEdge2Cloud.js +11 -11
  105. package/dist_es/fin5Top/getFin5BinUrl.d.ts +2 -2
  106. package/dist_es/fin5Top/getFin5BinUrl.js +5 -5
  107. package/dist_es/fin5Top/openFin5Alarm.d.ts +22 -22
  108. package/dist_es/fin5Top/openFin5Alarm.js +19 -19
  109. package/dist_es/fin5Top/openFin5Historian.d.ts +3 -3
  110. package/dist_es/fin5Top/openFin5Historian.js +15 -15
  111. package/dist_es/fin5Top/useFin5AppURLHashParameter.d.ts +18 -18
  112. package/dist_es/fin5Top/useFin5AppURLHashParameter.js +124 -124
  113. package/dist_es/index.d.ts +31 -36
  114. package/dist_es/index.js +49 -54
  115. package/dist_es/index.js.map +1 -1
  116. package/dist_es/jobs/jobUtils.d.ts +14 -14
  117. package/dist_es/jobs/jobUtils.js +9 -9
  118. package/dist_es/react/app/Fin5AppContainer.d.ts +36 -36
  119. package/dist_es/react/app/Fin5AppContainer.js +73 -73
  120. package/dist_es/react/app/Fin5AppRootStore.d.ts +38 -39
  121. package/dist_es/react/app/Fin5AppRootStore.js +64 -65
  122. package/dist_es/react/app/Fin5AppRootStore.js.map +1 -1
  123. package/dist_es/react/components/ErrorBoundary.d.ts +57 -57
  124. package/dist_es/react/components/ErrorBoundary.js +123 -123
  125. package/dist_es/react/components/ErrorDisplayer.d.ts +19 -19
  126. package/dist_es/react/components/ErrorDisplayer.js +28 -28
  127. package/dist_es/react/components/Loader.d.ts +9 -9
  128. package/dist_es/react/components/Loader.js +12 -12
  129. package/dist_es/react/components/LoadingSpinner.d.ts +2 -2
  130. package/dist_es/react/components/LoadingSpinner.js +20 -20
  131. package/dist_es/react/components/RecordImage.d.ts +20 -20
  132. package/dist_es/react/components/RecordImage.js +24 -24
  133. package/dist_es/react/components/charts/QRCode.d.ts +25 -25
  134. package/dist_es/react/components/charts/QRCode.js +53 -52
  135. package/dist_es/react/components/charts/QRCode.js.map +1 -1
  136. package/dist_es/react/components/charts/pie/PieChart.d.ts +93 -94
  137. package/dist_es/react/components/charts/pie/PieChart.js +175 -177
  138. package/dist_es/react/components/charts/pie/PieChart.js.map +1 -1
  139. package/dist_es/react/components/charts/pie/SimplePieChart.d.ts +20 -21
  140. package/dist_es/react/components/charts/pie/SimplePieChart.js +25 -25
  141. package/dist_es/react/components/charts/pie/SimplePieChart.js.map +1 -1
  142. package/dist_es/react/components/graphics/GraphicViewer.d.ts +10 -10
  143. package/dist_es/react/components/graphics/GraphicViewer.js +22 -22
  144. package/dist_es/react/components/graphics/GraphicsTabViewer.d.ts +17 -17
  145. package/dist_es/react/components/graphics/GraphicsTabViewer.js +60 -60
  146. package/dist_es/react/components/navigation/BasicLayout.d.ts +41 -41
  147. package/dist_es/react/components/navigation/BasicLayout.js +124 -124
  148. package/dist_es/react/components/navigation/HeaderSiderLayout.d.ts +13 -13
  149. package/dist_es/react/components/navigation/HeaderSiderLayout.js +80 -80
  150. package/dist_es/react/components/navigation/MenuPage.d.ts +37 -37
  151. package/dist_es/react/components/navigation/MenuPage.js +30 -30
  152. package/dist_es/react/components/navigation/MenuTrigger.d.ts +9 -9
  153. package/dist_es/react/components/navigation/MenuTrigger.js +28 -28
  154. package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.d.ts +11 -11
  155. package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.js +18 -18
  156. package/dist_es/react/components/navigation/ReactRouterLayout.d.ts +46 -46
  157. package/dist_es/react/components/navigation/ReactRouterLayout.js +99 -99
  158. package/dist_es/react/components/navigation/customRouting/Router.d.ts +12 -12
  159. package/dist_es/react/components/navigation/customRouting/Router.js +18 -18
  160. package/dist_es/react/components/navigation/customRouting/RouterLayout.d.ts +11 -11
  161. package/dist_es/react/components/navigation/customRouting/RouterLayout.js +34 -34
  162. package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.d.ts +27 -27
  163. package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.js +64 -64
  164. package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.d.ts +16 -16
  165. package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.js +58 -58
  166. package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.d.ts +16 -16
  167. package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.js +94 -94
  168. package/dist_es/react/hooks/useFin5BinUrl.d.ts +6 -6
  169. package/dist_es/react/hooks/useFin5BinUrl.js +11 -11
  170. package/dist_es/react/hooks/useFin5ColorScheme.d.ts +2 -2
  171. package/dist_es/react/hooks/useFin5ColorScheme.js +38 -38
  172. package/package.json +8 -11
  173. package/dist/react/components/charts/line-bar/Chart.d.ts +0 -166
  174. package/dist/react/components/charts/line-bar/Chart.js +0 -443
  175. package/dist/react/components/charts/line-bar/Chart.js.map +0 -1
  176. package/dist/react/components/charts/line-bar/HGridChart.d.ts +0 -58
  177. package/dist/react/components/charts/line-bar/HGridChart.js +0 -289
  178. package/dist/react/components/charts/line-bar/HGridChart.js.map +0 -1
  179. package/dist/react/components/charts/line-bar/ZincGridChart.d.ts +0 -12
  180. package/dist/react/components/charts/line-bar/ZincGridChart.js +0 -24
  181. package/dist/react/components/charts/line-bar/ZincGridChart.js.map +0 -1
  182. package/dist/react/components/makeCustomElement.d.ts +0 -12
  183. package/dist/react/components/makeCustomElement.js +0 -140
  184. package/dist/react/components/makeCustomElement.js.map +0 -1
  185. package/dist/react/hooks/useScreenSize.d.ts +0 -8
  186. package/dist/react/hooks/useScreenSize.js +0 -31
  187. package/dist/react/hooks/useScreenSize.js.map +0 -1
  188. package/dist_es/react/app/Fin5AppContainer.jsx +0 -82
  189. package/dist_es/react/app/Fin5AppContainer.jsx.map +0 -1
  190. package/dist_es/react/components/ErrorBoundary.jsx +0 -150
  191. package/dist_es/react/components/ErrorBoundary.jsx.map +0 -1
  192. package/dist_es/react/components/ErrorDisplayer.jsx +0 -36
  193. package/dist_es/react/components/ErrorDisplayer.jsx.map +0 -1
  194. package/dist_es/react/components/Loader.jsx +0 -13
  195. package/dist_es/react/components/Loader.jsx.map +0 -1
  196. package/dist_es/react/components/LoadingSpinner.jsx +0 -22
  197. package/dist_es/react/components/LoadingSpinner.jsx.map +0 -1
  198. package/dist_es/react/components/charts/line-bar/Chart.d.ts +0 -166
  199. package/dist_es/react/components/charts/line-bar/Chart.js +0 -416
  200. package/dist_es/react/components/charts/line-bar/Chart.js.map +0 -1
  201. package/dist_es/react/components/charts/line-bar/HGridChart.d.ts +0 -58
  202. package/dist_es/react/components/charts/line-bar/HGridChart.js +0 -251
  203. package/dist_es/react/components/charts/line-bar/HGridChart.js.map +0 -1
  204. package/dist_es/react/components/charts/line-bar/ZincGridChart.d.ts +0 -12
  205. package/dist_es/react/components/charts/line-bar/ZincGridChart.js +0 -17
  206. package/dist_es/react/components/charts/line-bar/ZincGridChart.js.map +0 -1
  207. package/dist_es/react/components/graphics/GraphicViewer.jsx +0 -23
  208. package/dist_es/react/components/graphics/GraphicViewer.jsx.map +0 -1
  209. package/dist_es/react/components/graphics/GraphicsTabViewer.jsx +0 -63
  210. package/dist_es/react/components/graphics/GraphicsTabViewer.jsx.map +0 -1
  211. package/dist_es/react/components/makeCustomElement.d.ts +0 -12
  212. package/dist_es/react/components/makeCustomElement.js +0 -132
  213. package/dist_es/react/components/makeCustomElement.js.map +0 -1
  214. package/dist_es/react/components/navigation/BasicLayout.jsx +0 -133
  215. package/dist_es/react/components/navigation/BasicLayout.jsx.map +0 -1
  216. package/dist_es/react/components/navigation/MenuPage.jsx +0 -31
  217. package/dist_es/react/components/navigation/MenuPage.jsx.map +0 -1
  218. package/dist_es/react/components/navigation/Router.d.ts +0 -12
  219. package/dist_es/react/components/navigation/Router.js +0 -19
  220. package/dist_es/react/components/navigation/Router.js.map +0 -1
  221. package/dist_es/react/components/navigation/Router.jsx +0 -19
  222. package/dist_es/react/components/navigation/Router.jsx.map +0 -1
  223. package/dist_es/react/components/navigation/react-router/BasicLayout.d.ts +0 -23
  224. package/dist_es/react/components/navigation/react-router/BasicLayout.js +0 -82
  225. package/dist_es/react/components/navigation/react-router/BasicLayout.js.map +0 -1
  226. package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.d.ts +0 -24
  227. package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.js +0 -82
  228. package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.js.map +0 -1
  229. package/dist_es/react/hooks/useScreenSize.d.ts +0 -8
  230. package/dist_es/react/hooks/useScreenSize.js +0 -29
  231. package/dist_es/react/hooks/useScreenSize.js.map +0 -1
@@ -1,178 +1,176 @@
1
- /*
2
- * Copyright (c) 2023, J2 Innovations. All Rights Reserved
3
- */
4
- import * as am5 from '@amcharts/amcharts5';
5
- import * as am5percent from '@amcharts/amcharts5/percent';
6
- import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
7
- import { createUseStyles, useTheme } from 'react-jss';
8
- const useStyles = createUseStyles({
9
- root: {
10
- width: '100%',
11
- height: '100%',
12
- },
13
- });
14
- /**
15
- * Returns a color palette selecting some colors from the theme.
16
- * @param theme The theme
17
- * @returns An array of colors
18
- */
19
- const getDefaultChartColors = (theme) => {
20
- return {
21
- interfaceColors: {
22
- text: theme.textColor,
23
- },
24
- series: [
25
- theme.palette.lime,
26
- theme.palette.cyan,
27
- theme.palette.red,
28
- theme.palette.volcano,
29
- theme.palette.orange,
30
- theme.palette.gold,
31
- theme.palette.yellow,
32
- theme.palette.green,
33
- theme.palette.purple,
34
- theme.palette.magenta,
35
- theme.palette.blue,
36
- theme.palette.grey,
37
- ],
38
- };
39
- };
40
- /**
41
- * Highly customizable pie chart component based on amcharts5
42
- * @see https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
43
- *
44
- * This component wraps some of the chart configuration trying to make it more react-friendly
45
- */
46
- export const PieChart = ({ DOMtargetId, data, colorPalette, numberFormat, chartThemes, chartSettingsProvider, legendSettingsProvider, legendLabelsSettings, legendValueLabelsSettings, legendMarkersSettings, seriesSettings, seriesLabelsSettings, centerLabelSettings, slicesSettings, sliceAdapters, }) => {
47
- // Colors configuration
48
- const theme = useTheme();
49
- const colors = { ...getDefaultChartColors(theme), ...colorPalette };
50
- // Chart lifecycle
51
- const [id, setId] = useState(DOMtargetId ?? `amchart-${Math.random()}`);
52
- const rootRef = useRef(null);
53
- const chartRef = useRef(null);
54
- const legendRef = useRef(null);
55
- useEffect(() => {
56
- if (DOMtargetId && DOMtargetId !== id) {
57
- setId(DOMtargetId);
58
- }
59
- }, [DOMtargetId]);
60
- // Chart setup
61
- useLayoutEffect(() => {
62
- const root = am5.Root.new(id);
63
- // Setup amcharts theme
64
- if (chartThemes) {
65
- root.setThemes(chartThemes.map((t) => t.new(root)));
66
- }
67
- // Setup interface colors, see https://www.amcharts.com/docs/v5/concepts/colors-gradients-and-patterns/#Interface_colors
68
- if (colors.interfaceColors) {
69
- // Remap settings to use amcharts Color objects
70
- for (const setting in colors.interfaceColors) {
71
- const color = colors.interfaceColors[setting];
72
- // Apply defined interfaceColor on the chart
73
- root.interfaceColors.set(setting, am5.color(color));
74
- }
75
- }
76
- // Setup chart settings
77
- const chart = root.container.children.push(am5percent.PieChart.new(root, {
78
- layout: root.verticalLayout,
79
- ...chartSettingsProvider?.(root),
80
- }));
81
- // Setup legend
82
- const legend = chart.children.push(am5.Legend.new(root, {
83
- layout: root.horizontalLayout,
84
- ...legendSettingsProvider?.(root),
85
- }));
86
- if (legendLabelsSettings) {
87
- legend.labels.template.setAll(legendLabelsSettings);
88
- }
89
- if (legendValueLabelsSettings) {
90
- legend.valueLabels.template.setAll(legendValueLabelsSettings);
91
- }
92
- if (legendMarkersSettings) {
93
- legend.markers.template.setAll(legendMarkersSettings);
94
- }
95
- rootRef.current = root;
96
- chartRef.current = chart;
97
- legendRef.current = legend;
98
- // clean up before component removal from the DOM
99
- return () => {
100
- legendRef.current?.dispose();
101
- legendRef.current = null;
102
- chartRef.current?.dispose();
103
- chartRef.current = null;
104
- root?.dispose();
105
- rootRef.current = null;
106
- };
107
- }, [
108
- id,
109
- colors,
110
- chartThemes,
111
- chartSettingsProvider,
112
- legendSettingsProvider,
113
- legendValueLabelsSettings,
114
- legendMarkersSettings,
115
- ]);
116
- // Set data
117
- useEffect(() => {
118
- const root = rootRef.current;
119
- const chart = chartRef.current;
120
- if (chart && root) {
121
- chart.series.clear();
122
- if (data?.length) {
123
- // Setup series
124
- const series = chart.series.push(am5percent.PieSeries.new(root, {
125
- valueField: 'value',
126
- categoryField: 'category',
127
- ...seriesSettings,
128
- }));
129
- // Setup series labels
130
- if (seriesLabelsSettings) {
131
- series.labels.template.setAll(seriesLabelsSettings);
132
- }
133
- // Setup center label
134
- if (centerLabelSettings) {
135
- series.children.push(am5.Label.new(root, {
136
- ...centerLabelSettings,
137
- }));
138
- }
139
- // Setup series slices
140
- if (slicesSettings) {
141
- series.slices.template.setAll(slicesSettings);
142
- }
143
- // Setup slice adapters
144
- if (sliceAdapters) {
145
- sliceAdapters.forEach(([key, callbackMaker]) => series.slices.template.adapters.add(key, callbackMaker({
146
- root: root,
147
- chart: chart,
148
- series,
149
- })));
150
- }
151
- // Setup series colors
152
- if (colors?.series) {
153
- series.get('colors')?.set('colors', colors.series.map((c) => am5.color(c)));
154
- }
155
- series.data.setAll(data);
156
- legendRef.current?.data.setAll(series.dataItems);
157
- }
158
- }
159
- }, [
160
- data,
161
- chartRef.current,
162
- colors?.series,
163
- seriesSettings,
164
- slicesSettings,
165
- seriesLabelsSettings,
166
- sliceAdapters,
167
- ]);
168
- useEffect(() => {
169
- if (numberFormat) {
170
- rootRef.current?.numberFormatter.set('numberFormat', numberFormat);
171
- }
172
- }, [rootRef.current, numberFormat]);
173
- const classes = useStyles();
174
- return typeof id === 'string' ? (React.createElement("div", { id: id, className: classes.root })) : (
175
- // If the DOM target is an HTML element, do not render another div. The chart will be attached to the existing element.
176
- React.createElement(React.Fragment, null));
177
- };
1
+ /*
2
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
3
+ */
4
+ import * as am5 from '@amcharts/amcharts5';
5
+ import * as am5percent from '@amcharts/amcharts5/percent';
6
+ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
7
+ import { createUseStyles, useTheme } from 'react-jss';
8
+ const useStyles = createUseStyles({
9
+ root: {
10
+ width: '100%',
11
+ height: '100%',
12
+ },
13
+ });
14
+ /**
15
+ * Returns a color palette selecting some colors from the theme.
16
+ * @param theme The theme
17
+ * @returns An array of colors
18
+ */
19
+ const getDefaultChartColors = (theme) => {
20
+ return {
21
+ interfaceColors: {
22
+ text: theme.textColor,
23
+ },
24
+ series: [
25
+ theme.palette.lime,
26
+ theme.palette.cyan,
27
+ theme.palette.red,
28
+ theme.palette.volcano,
29
+ theme.palette.orange,
30
+ theme.palette.gold,
31
+ theme.palette.yellow,
32
+ theme.palette.green,
33
+ theme.palette.purple,
34
+ theme.palette.magenta,
35
+ theme.palette.blue,
36
+ theme.palette.grey,
37
+ ],
38
+ };
39
+ };
40
+ /**
41
+ * Highly customizable pie chart component based on amcharts5
42
+ * @see https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
43
+ *
44
+ * This component wraps some of the chart configuration trying to make it more react-friendly
45
+ */
46
+ export const PieChart = ({ DOMtargetId, data, colorPalette, numberFormat, chartThemes, chartSettingsProvider, legendSettingsProvider, legendLabelsSettings, legendValueLabelsSettings, legendMarkersSettings, seriesSettings, seriesLabelsSettings, centerLabelSettings, slicesSettings, sliceAdapters, }) => {
47
+ // Colors configuration
48
+ const theme = useTheme();
49
+ const colors = { ...getDefaultChartColors(theme), ...colorPalette };
50
+ // Chart lifecycle
51
+ const [id, setId] = useState(DOMtargetId ?? `amchart-${Math.random()}`);
52
+ const rootRef = useRef(null);
53
+ const chartRef = useRef(null);
54
+ const legendRef = useRef(null);
55
+ useEffect(() => {
56
+ if (DOMtargetId && DOMtargetId !== id) {
57
+ setId(DOMtargetId);
58
+ }
59
+ }, [DOMtargetId]);
60
+ // Chart setup
61
+ useLayoutEffect(() => {
62
+ const root = am5.Root.new(id);
63
+ // Setup amcharts theme
64
+ if (chartThemes) {
65
+ root.setThemes(chartThemes.map((t) => t.new(root)));
66
+ }
67
+ // Setup interface colors, see https://www.amcharts.com/docs/v5/concepts/colors-gradients-and-patterns/#Interface_colors
68
+ if (colors.interfaceColors) {
69
+ // Remap settings to use amcharts Color objects
70
+ for (const setting in colors.interfaceColors) {
71
+ const color = colors.interfaceColors[setting];
72
+ // Apply defined interfaceColor on the chart
73
+ root.interfaceColors.set(setting, am5.color(color));
74
+ }
75
+ }
76
+ // Setup chart settings
77
+ const chart = root.container.children.push(am5percent.PieChart.new(root, {
78
+ layout: root.verticalLayout,
79
+ ...chartSettingsProvider?.(root),
80
+ }));
81
+ // Setup legend
82
+ const legend = chart.children.push(am5.Legend.new(root, {
83
+ layout: root.horizontalLayout,
84
+ ...legendSettingsProvider?.(root),
85
+ }));
86
+ if (legendLabelsSettings) {
87
+ legend.labels.template.setAll(legendLabelsSettings);
88
+ }
89
+ if (legendValueLabelsSettings) {
90
+ legend.valueLabels.template.setAll(legendValueLabelsSettings);
91
+ }
92
+ if (legendMarkersSettings) {
93
+ legend.markers.template.setAll(legendMarkersSettings);
94
+ }
95
+ rootRef.current = root;
96
+ chartRef.current = chart;
97
+ legendRef.current = legend;
98
+ // clean up before component removal from the DOM
99
+ return () => {
100
+ legendRef.current?.dispose();
101
+ legendRef.current = null;
102
+ chartRef.current?.dispose();
103
+ chartRef.current = null;
104
+ root?.dispose();
105
+ rootRef.current = null;
106
+ };
107
+ }, [
108
+ id,
109
+ colors,
110
+ chartThemes,
111
+ chartSettingsProvider,
112
+ legendSettingsProvider,
113
+ legendValueLabelsSettings,
114
+ legendMarkersSettings,
115
+ ]);
116
+ // Set data
117
+ useEffect(() => {
118
+ const root = rootRef.current;
119
+ const chart = chartRef.current;
120
+ if (chart && root) {
121
+ chart.series.clear();
122
+ if (data?.length) {
123
+ // Setup series
124
+ const series = chart.series.push(am5percent.PieSeries.new(root, {
125
+ valueField: 'value',
126
+ categoryField: 'category',
127
+ ...seriesSettings,
128
+ }));
129
+ // Setup series labels
130
+ if (seriesLabelsSettings) {
131
+ series.labels.template.setAll(seriesLabelsSettings);
132
+ }
133
+ // Setup center label
134
+ if (centerLabelSettings) {
135
+ series.children.push(am5.Label.new(root, {
136
+ ...centerLabelSettings,
137
+ }));
138
+ }
139
+ // Setup series slices
140
+ if (slicesSettings) {
141
+ series.slices.template.setAll(slicesSettings);
142
+ }
143
+ // Setup slice adapters
144
+ if (sliceAdapters) {
145
+ sliceAdapters.forEach(([key, callbackMaker]) => series.slices.template.adapters.add(key, callbackMaker({
146
+ root: root,
147
+ chart: chart,
148
+ series,
149
+ })));
150
+ }
151
+ // Setup series colors
152
+ if (colors?.series) {
153
+ series.get('colors')?.set('colors', colors.series.map((c) => am5.color(c)));
154
+ }
155
+ series.data.setAll(data);
156
+ legendRef.current?.data.setAll(series.dataItems);
157
+ }
158
+ }
159
+ }, [
160
+ data,
161
+ chartRef.current,
162
+ colors?.series,
163
+ seriesSettings,
164
+ slicesSettings,
165
+ seriesLabelsSettings,
166
+ sliceAdapters,
167
+ ]);
168
+ useEffect(() => {
169
+ if (numberFormat) {
170
+ rootRef.current?.numberFormatter.set('numberFormat', numberFormat);
171
+ }
172
+ }, [rootRef.current, numberFormat]);
173
+ const classes = useStyles();
174
+ return React.createElement("div", { id: id, className: classes.root });
175
+ };
178
176
  //# sourceMappingURL=PieChart.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"PieChart.js","sourceRoot":"","sources":["../../../../../src/react/components/charts/pie/PieChart.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"PieChart.js","sourceRoot":"","sources":["../../../../../src/react/components/charts/pie/PieChart.tsx"],"names":[],"mappings":"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"}
@@ -1,21 +1,20 @@
1
- import React from 'react';
2
- import { PieChartColorPalette, PieChartSliceData } from './PieChart';
3
- export interface SimplePieChartProps {
4
- data: PieChartSliceData[];
5
- donut?: boolean;
6
- animated?: boolean;
7
- colorPalette?: Partial<PieChartColorPalette>;
8
- tooltipFormat?: string;
9
- numberFormat?: Intl.NumberFormatOptions;
10
- hideLabels?: boolean;
11
- /**
12
- * Optional DOM id for the chart container, if not specified it will be automatically generated.
13
- * It can also be an HTMLElement, in that case the element will be used as a parent.
14
- */
15
- DOMtargetId?: string | HTMLElement;
16
- }
17
- /**
18
- * Simplified version of the pie chart for quick usage and easy configuration.
19
- * Serves also as an example of how to use the underlying PieChart component.
20
- */
21
- export declare const SimplePieChart: React.FC<SimplePieChartProps>;
1
+ import React from 'react';
2
+ import { PieChartColorPalette, PieChartSliceData } from './PieChart';
3
+ export interface SimplePieChartProps {
4
+ data: PieChartSliceData[];
5
+ donut?: boolean;
6
+ animated?: boolean;
7
+ colorPalette?: Partial<PieChartColorPalette>;
8
+ tooltipFormat?: string;
9
+ numberFormat?: Intl.NumberFormatOptions;
10
+ hideLabels?: boolean;
11
+ /**
12
+ * Optional DOM id for the chart container, if not specified it will be automatically generated
13
+ */
14
+ DOMtargetId?: string;
15
+ }
16
+ /**
17
+ * Simplified version of the pie chart for quick usage and easy configuration.
18
+ * Serves also as an example of how to use the underlying PieChart component.
19
+ */
20
+ export declare const SimplePieChart: React.FC<SimplePieChartProps>;
@@ -1,26 +1,26 @@
1
- /*
2
- * Copyright (c) 2023, J2 Innovations. All Rights Reserved
3
- */
4
- import * as am5 from '@amcharts/amcharts5';
5
- import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
6
- import React from 'react';
7
- import { PieChart } from './PieChart';
8
- /**
9
- * Simplified version of the pie chart for quick usage and easy configuration.
10
- * Serves also as an example of how to use the underlying PieChart component.
11
- */
12
- export const SimplePieChart = ({ data, donut, animated, colorPalette, tooltipFormat, numberFormat = {
13
- style: 'decimal',
14
- minimumFractionDigits: 0,
15
- maximumFractionDigits: 1,
16
- }, hideLabels, DOMtargetId, }) => {
17
- return (React.createElement(PieChart, { DOMtargetId: DOMtargetId, colorPalette: colorPalette, data: data, chartThemes: animated ? [am5themes_Animated] : undefined, chartSettingsProvider: () => ({
18
- innerRadius: donut ? am5.percent(55) : undefined,
19
- }), numberFormat: numberFormat, legendSettingsProvider: () => ({
20
- centerX: am5.percent(50),
21
- x: am5.percent(50),
22
- }), seriesLabelsSettings: { forceHidden: hideLabels }, seriesSettings: { alignLabels: false }, slicesSettings: {
23
- tooltipText: tooltipFormat,
24
- } }));
25
- };
1
+ /*
2
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
3
+ */
4
+ import * as am5 from '@amcharts/amcharts5';
5
+ import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
6
+ import React from 'react';
7
+ import { PieChart } from './PieChart';
8
+ /**
9
+ * Simplified version of the pie chart for quick usage and easy configuration.
10
+ * Serves also as an example of how to use the underlying PieChart component.
11
+ */
12
+ export const SimplePieChart = ({ data, donut, animated, colorPalette, tooltipFormat, numberFormat = {
13
+ style: 'decimal',
14
+ minimumFractionDigits: 0,
15
+ maximumFractionDigits: 1,
16
+ }, hideLabels, DOMtargetId, }) => {
17
+ return (React.createElement(PieChart, { DOMtargetId: DOMtargetId, colorPalette: colorPalette, data: data, chartThemes: animated ? [am5themes_Animated] : undefined, chartSettingsProvider: () => ({
18
+ innerRadius: donut ? am5.percent(55) : undefined,
19
+ }), numberFormat: numberFormat, legendSettingsProvider: () => ({
20
+ centerX: am5.percent(50),
21
+ x: am5.percent(50),
22
+ }), seriesLabelsSettings: { forceHidden: hideLabels }, seriesSettings: { alignLabels: false }, slicesSettings: {
23
+ tooltipText: tooltipFormat,
24
+ } }));
25
+ };
26
26
  //# sourceMappingURL=SimplePieChart.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SimplePieChart.js","sourceRoot":"","sources":["../../../../../src/react/components/charts/pie/SimplePieChart.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,GAAG,MAAM,qBAAqB,CAAA;AAC1C,OAAO,kBAAkB,MAAM,qCAAqC,CAAA;AACpE,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAA2C,MAAM,YAAY,CAAA;AAiB9E;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC7D,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,YAAY,GAAG;IACd,KAAK,EAAE,SAAS;IAChB,qBAAqB,EAAE,CAAC;IACxB,qBAAqB,EAAE,CAAC;CACxB,EACD,UAAU,EACV,WAAW,GACX,EAAe,EAAE;IACjB,OAAO,CACN,oBAAC,QAAQ,IACR,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,SAAS,EACxD,qBAAqB,EAAE,GAAG,EAAE,CAAC,CAAC;YAC7B,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;SAChD,CAAC,EACF,YAAY,EAAE,YAAY,EAC1B,sBAAsB,EAAE,GAAG,EAAE,CAAC,CAAC;YAC9B,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACxB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;SAClB,CAAC,EACF,oBAAoB,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,EACjD,cAAc,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EACtC,cAAc,EAAE;YACf,WAAW,EAAE,aAAa;SAC1B,GACA,CACF,CAAA;AACF,CAAC,CAAA"}
1
+ {"version":3,"file":"SimplePieChart.js","sourceRoot":"","sources":["../../../../../src/react/components/charts/pie/SimplePieChart.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,GAAG,MAAM,qBAAqB,CAAA;AAC1C,OAAO,kBAAkB,MAAM,qCAAqC,CAAA;AACpE,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAA2C,MAAM,YAAY,CAAA;AAgB9E;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC7D,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,YAAY,GAAG;IACd,KAAK,EAAE,SAAS;IAChB,qBAAqB,EAAE,CAAC;IACxB,qBAAqB,EAAE,CAAC;CACxB,EACD,UAAU,EACV,WAAW,GACX,EAAe,EAAE;IACjB,OAAO,CACN,oBAAC,QAAQ,IACR,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,SAAS,EACxD,qBAAqB,EAAE,GAAG,EAAE,CAAC,CAAC;YAC7B,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;SAChD,CAAC,EACF,YAAY,EAAE,YAAY,EAC1B,sBAAsB,EAAE,GAAG,EAAE,CAAC,CAAC;YAC9B,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACxB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;SAClB,CAAC,EACF,oBAAoB,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,EACjD,cAAc,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EACtC,cAAc,EAAE;YACf,WAAW,EAAE,aAAa;SAC1B,GACA,CACF,CAAA;AACF,CAAC,CAAA"}
@@ -1,10 +1,10 @@
1
- import { HRef } from 'haystack-core';
2
- import React from 'react';
3
- interface GraphicViewerProps {
4
- projectName?: string;
5
- graphicId: HRef;
6
- targetRef: HRef;
7
- className?: string;
8
- }
9
- export declare const GraphicViewer: React.FC<GraphicViewerProps>;
10
- export {};
1
+ import { HRef } from 'haystack-core';
2
+ import React from 'react';
3
+ interface GraphicViewerProps {
4
+ projectName?: string;
5
+ graphicId: HRef;
6
+ targetRef: HRef;
7
+ className?: string;
8
+ }
9
+ export declare const GraphicViewer: React.FC<GraphicViewerProps>;
10
+ export {};
@@ -1,23 +1,23 @@
1
- /*
2
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
3
- */
4
- import cn from 'classnames';
5
- import React from 'react';
6
- import { createUseStyles } from 'react-jss';
7
- import { fin5Top } from '../../../fin5Top/fin5Top';
8
- const useStyles = createUseStyles({
9
- iframe: {
10
- width: '100%',
11
- height: '100%',
12
- border: 0,
13
- overflow: 'hidden',
14
- },
15
- });
16
- export const GraphicViewer = ({ projectName = fin5Top?.finstack?.projectName ?? '', graphicId, targetRef, className, }) => {
17
- const classes = useStyles();
18
- const url = new URL(`${window.location.protocol}//${window.location.host}/fin5/${projectName}`);
19
- url.hash = `targetRef=${targetRef.toAxon()}`;
20
- url.searchParams.set('projectRef', graphicId.toAxon());
21
- return (React.createElement("iframe", { id: graphicId.toAxon(), className: cn(classes.iframe, className), src: url.toString() }));
22
- };
1
+ /*
2
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
3
+ */
4
+ import cn from 'classnames';
5
+ import React from 'react';
6
+ import { createUseStyles } from 'react-jss';
7
+ import { fin5Top } from '../../../fin5Top/fin5Top';
8
+ const useStyles = createUseStyles({
9
+ iframe: {
10
+ width: '100%',
11
+ height: '100%',
12
+ border: 0,
13
+ overflow: 'hidden',
14
+ },
15
+ });
16
+ export const GraphicViewer = ({ projectName = fin5Top?.finstack?.projectName ?? '', graphicId, targetRef, className, }) => {
17
+ const classes = useStyles();
18
+ const url = new URL(`${window.location.protocol}//${window.location.host}/fin5/${projectName}`);
19
+ url.hash = `targetRef=${targetRef.toAxon()}`;
20
+ url.searchParams.set('projectRef', graphicId.toAxon());
21
+ return (React.createElement("iframe", { id: graphicId.toAxon(), className: cn(classes.iframe, className), src: url.toString() }));
22
+ };
23
23
  //# sourceMappingURL=GraphicViewer.js.map
@@ -1,17 +1,17 @@
1
- import { HRef } from 'haystack-core';
2
- import React from 'react';
3
- interface GraphicsTabViewer {
4
- projectName?: string;
5
- targetRef: HRef;
6
- className?: string;
7
- /**
8
- * Set it to true if you want to query also for related graphics (graphics applicable to objects linked by refs),
9
- * false to just get the graphics on this target.
10
- * @default false
11
- */
12
- queryRelated?: boolean;
13
- fallbackClassName?: string;
14
- fallbackText?: string;
15
- }
16
- export declare const GraphicsTabViewer: React.FC<GraphicsTabViewer>;
17
- export {};
1
+ import { HRef } from 'haystack-core';
2
+ import React from 'react';
3
+ interface GraphicsTabViewer {
4
+ projectName?: string;
5
+ targetRef: HRef;
6
+ className?: string;
7
+ /**
8
+ * Set it to true if you want to query also for related graphics (graphics applicable to objects linked by refs),
9
+ * false to just get the graphics on this target.
10
+ * @default false
11
+ */
12
+ queryRelated?: boolean;
13
+ fallbackClassName?: string;
14
+ fallbackText?: string;
15
+ }
16
+ export declare const GraphicsTabViewer: React.FC<GraphicsTabViewer>;
17
+ export {};