@hisptz/dhis2-analytics 1.0.44 → 1.0.45

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 (35) hide show
  1. package/build/cjs/components/CircularProgressDashboard/index.js +15 -0
  2. package/build/cjs/components/Map/components/MapLayer/components/GoogleEngineLayer/services/api.js +3 -2
  3. package/build/cjs/components/SingleValueContainer/index.js +16 -0
  4. package/build/es/components/CircularProgressDashboard/index.js +1 -0
  5. package/build/es/components/Map/components/MapLayer/components/GoogleEngineLayer/services/api.js +2 -1
  6. package/build/es/components/Map/components/MapLayer/components/GoogleEngineLayer/services/engine.js +1 -1
  7. package/build/es/components/SingleValueContainer/index.js +1 -0
  8. package/build/types/components/CircularProgressDashboard/index.d.ts +1 -0
  9. package/build/types/components/SingleValueContainer/index.d.ts +1 -0
  10. package/package.json +12 -8
  11. package/build/cjs/components/ChartAnalytics/ChartAnalytics.stories.js +0 -253
  12. package/build/cjs/components/ChartAnalytics/data/column-data.json +0 -210
  13. package/build/cjs/components/ChartAnalytics/data/complex-multi-series-data.json +0 -124
  14. package/build/cjs/components/ChartAnalytics/data/multi-series-data.json +0 -536
  15. package/build/cjs/components/ChartAnalytics/data/pie-data.json +0 -115
  16. package/build/cjs/components/ChartAnalytics/data/stacked-chart-data.json +0 -415
  17. package/build/cjs/components/CircularProgressDashboard/CircularProgressIndicator.stories.js +0 -45
  18. package/build/cjs/components/CustomPivotTable/CustomPivotTable.stories.js +0 -69
  19. package/build/cjs/components/Map/Map.stories.js +0 -352
  20. package/build/cjs/components/SingleValueContainer/SingleValueContainer.stories.js +0 -127
  21. package/build/cjs/components/Visualization/Visualization.stories.js +0 -138
  22. package/build/cjs/dataProviders/map.js +0 -31
  23. package/build/es/components/ChartAnalytics/ChartAnalytics.stories.js +0 -235
  24. package/build/es/components/ChartAnalytics/data/column-data.json +0 -210
  25. package/build/es/components/ChartAnalytics/data/complex-multi-series-data.json +0 -124
  26. package/build/es/components/ChartAnalytics/data/multi-series-data.json +0 -536
  27. package/build/es/components/ChartAnalytics/data/pie-data.json +0 -115
  28. package/build/es/components/ChartAnalytics/data/stacked-chart-data.json +0 -415
  29. package/build/es/components/CircularProgressDashboard/CircularProgressIndicator.stories.js +0 -34
  30. package/build/es/components/CustomPivotTable/CustomPivotTable.stories.js +0 -59
  31. package/build/es/components/Map/Map.stories.js +0 -334
  32. package/build/es/components/SingleValueContainer/SingleValueContainer.stories.js +0 -115
  33. package/build/es/components/Visualization/Visualization.stories.js +0 -129
  34. package/build/es/dataProviders/map.js +0 -24
  35. package/build/types/components/Map/components/MapLayer/components/GoogleEngineLayer/services/api.d.ts +0 -1
@@ -1,334 +0,0 @@
1
- import React from "react";
2
- import { Map } from "./index";
3
- const Template = args => /*#__PURE__*/React.createElement(Map, args);
4
- export const BaseMap = Template.bind({});
5
- BaseMap.args = {
6
- orgUnitSelection: {
7
- orgUnits: [],
8
- userOrgUnit: true,
9
- userSubUnit: true,
10
- userSubX2Unit: true
11
- }
12
- };
13
- export const Controls = Template.bind({});
14
- Controls.args = {
15
- orgUnitSelection: {
16
- orgUnits: [],
17
- userOrgUnit: true,
18
- userSubUnit: true,
19
- userSubX2Unit: true
20
- },
21
- controls: [{
22
- type: "print",
23
- position: "topleft",
24
- options: {
25
- hidden: false,
26
- hideControlContainer: true,
27
- sizeModes: ["A4Landscape", "A4Portrait", "Current"]
28
- }
29
- }]
30
- };
31
- export const BoundaryLayer = Template.bind({});
32
- BoundaryLayer.args = {
33
- orgUnitSelection: {
34
- orgUnits: [],
35
- userOrgUnit: true,
36
- userSubUnit: true,
37
- userSubX2Unit: true
38
- },
39
- boundaryLayer: {
40
- enabled: true
41
- }
42
- };
43
- export const BoundaryLayerWithLevels = Template.bind({});
44
- BoundaryLayerWithLevels.args = {
45
- orgUnitSelection: {
46
- orgUnits: [{
47
- id: "ImspTQPwCqd",
48
- displayName: "Sierra Leone",
49
- name: "Sierra Leone",
50
- path: "/ImspTQPwCqd",
51
- children: []
52
- }],
53
- levels: ["2"]
54
- },
55
- boundaryLayer: {
56
- enabled: true
57
- }
58
- };
59
- export const ChoroplethThematicLayer = Template.bind({});
60
- ChoroplethThematicLayer.args = {
61
- orgUnitSelection: {
62
- orgUnits: [],
63
- userOrgUnit: true,
64
- userSubUnit: true,
65
- userSubX2Unit: false
66
- },
67
- boundaryLayer: {
68
- enabled: true
69
- },
70
- thematicLayers: [{
71
- type: "choropleth",
72
- id: "choropleth",
73
- enabled: true,
74
- dataItem: {
75
- id: "Uvn6LCg7dVU",
76
- displayName: "ANC 1 Coverage",
77
- type: "indicator"
78
- },
79
- control: {
80
- enabled: true,
81
- position: "topright"
82
- }
83
- }],
84
- periodSelection: {
85
- periods: ["2022"]
86
- },
87
- legends: {
88
- enabled: true,
89
- position: "topright",
90
- collapsible: true
91
- }
92
- };
93
- export const BubbleThematicLayer = Template.bind({});
94
- BubbleThematicLayer.args = {
95
- orgUnitSelection: {
96
- orgUnits: [],
97
- userOrgUnit: true,
98
- userSubUnit: true,
99
- userSubX2Unit: true
100
- },
101
- boundaryLayer: {
102
- enabled: true
103
- },
104
- thematicLayers: [{
105
- type: "bubble",
106
- id: "bubble",
107
- enabled: true,
108
- dataItem: {
109
- id: "Uvn6LCg7dVU",
110
- displayName: "ANC 1 Coverage",
111
- type: "indicator"
112
- },
113
- control: {
114
- enabled: true,
115
- position: "topright"
116
- },
117
- radius: {
118
- min: 0,
119
- max: 40
120
- }
121
- }],
122
- legends: {
123
- enabled: true,
124
- position: "topright",
125
- collapsible: true
126
- },
127
- periodSelection: {
128
- periods: ["2022"]
129
- },
130
- controls: [{
131
- type: "fullscreen",
132
- position: "topleft"
133
- }]
134
- };
135
- export const AllThematicLayers = Template.bind({});
136
- AllThematicLayers.args = {
137
- orgUnitSelection: {
138
- orgUnits: [],
139
- userOrgUnit: true,
140
- userSubUnit: true,
141
- userSubX2Unit: true
142
- },
143
- boundaryLayer: {
144
- enabled: true
145
- },
146
- thematicLayers: [{
147
- type: "choropleth",
148
- id: "ReUHfIn0pTQ",
149
- enabled: true,
150
- dataItem: {
151
- id: "ReUHfIn0pTQ",
152
- displayName: "ANC 1-3 Dropout Rate",
153
- type: "indicator",
154
- legendSet: "fqs276KXCXi"
155
- },
156
- control: {
157
- enabled: true,
158
- position: "topright"
159
- }
160
- }, {
161
- type: "choropleth",
162
- id: "Uvn6LCg7dVU",
163
- enabled: true,
164
- dataItem: {
165
- id: "Uvn6LCg7dVU",
166
- displayName: "ANC 1 Coverage",
167
- type: "indicator"
168
- },
169
- control: {
170
- enabled: true,
171
- position: "topright"
172
- }
173
- }],
174
- legends: {
175
- enabled: true,
176
- position: "topright",
177
- collapsible: true
178
- },
179
- periodSelection: {
180
- periods: ["2022"]
181
- },
182
- controls: [{
183
- type: "scale",
184
- position: "bottomleft",
185
- options: {
186
- imperial: false,
187
- metric: true
188
- }
189
- }, {
190
- type: "fullscreen",
191
- position: "bottomleft"
192
- }]
193
- };
194
- export const ChoroplethThematicLayerWithLevels = Template.bind({});
195
- ChoroplethThematicLayerWithLevels.args = {
196
- orgUnitSelection: {
197
- orgUnits: [{
198
- id: "ImspTQPwCqd",
199
- displayName: "Sierra Leone",
200
- name: "Sierra Leone",
201
- path: "/ImspTQPwCqd",
202
- children: []
203
- }],
204
- levels: ["3"]
205
- },
206
- boundaryLayer: {
207
- enabled: true
208
- },
209
- thematicLayers: [{
210
- type: "choropleth",
211
- id: "choropleth",
212
- enabled: true,
213
- dataItem: {
214
- id: "Uvn6LCg7dVU",
215
- displayName: "ANC 1 Coverage",
216
- type: "indicator"
217
- },
218
- control: {
219
- enabled: true,
220
- position: "topright"
221
- }
222
- }],
223
- legends: {
224
- enabled: true,
225
- position: "topright",
226
- collapsible: true
227
- },
228
- periodSelection: {
229
- periods: ["2022"]
230
- },
231
- controls: [{
232
- type: "print",
233
- position: "topleft",
234
- options: {
235
- hidden: false,
236
- hideControlContainer: true,
237
- sizeModes: ["A4Landscape", "A4Portrait", "Current"]
238
- }
239
- }]
240
- };
241
- export const PointLayer = Template.bind({});
242
- PointLayer.args = {
243
- orgUnitSelection: {
244
- orgUnits: [],
245
- userOrgUnit: true,
246
- userSubUnit: true,
247
- userSubX2Unit: false
248
- },
249
- thematicLayers: [{
250
- type: "choropleth",
251
- id: "choropleth",
252
- enabled: true,
253
- dataItem: {
254
- id: "Uvn6LCg7dVU",
255
- displayName: "ANC 1 Coverage",
256
- type: "indicator"
257
- },
258
- control: {
259
- enabled: true,
260
- position: "topright"
261
- }
262
- }],
263
- periodSelection: {
264
- periods: ["2022"]
265
- },
266
- pointLayer: {
267
- enabled: true,
268
- label: "Facilities",
269
- level: "m9lBJogzE95",
270
- style: {
271
- groupSet: "J5jldMd8OHv"
272
- }
273
- }
274
- };
275
- export const GoogleEarthEngineLayers = Template.bind({});
276
- GoogleEarthEngineLayers.args = {
277
- orgUnitSelection: {
278
- orgUnits: [],
279
- userOrgUnit: true,
280
- userSubUnit: true,
281
- userSubX2Unit: false
282
- },
283
- thematicLayers: [],
284
- periodSelection: {
285
- periods: ["2022"]
286
- },
287
- earthEngineLayers: [{
288
- name: "Population",
289
- type: "population",
290
- id: "population",
291
- enabled: false,
292
- params: {
293
- min: 0,
294
- max: 10,
295
- palette: "#f7fbff,#deebf7,#c6dbef,#9ecae1,#6baed6,#4292c6,#2171b5,#08519c,#08306b"
296
- },
297
- aggregations: ["sum", "mean"],
298
- filters: {
299
- period: "2020"
300
- }
301
- }, {
302
- name: "Footprints",
303
- type: "footprints",
304
- id: "footprints",
305
- aggregations: ["count"],
306
- enabled: false
307
- }, {
308
- name: "Land Cover",
309
- type: "landCover",
310
- id: "landCover",
311
- enabled: true,
312
- aggregations: ["percentage"]
313
- }],
314
- pointLayer: {
315
- enabled: false,
316
- label: "Facilities",
317
- level: "m9lBJogzE95",
318
- style: {
319
- groupSet: "J5jldMd8OHv"
320
- }
321
- }
322
- };
323
- export default {
324
- title: "Analytics/Map",
325
- component: Map,
326
- decorators: [MapStory => {
327
- return /*#__PURE__*/React.createElement("div", {
328
- style: {
329
- width: "100%",
330
- height: "100%"
331
- }
332
- }, /*#__PURE__*/React.createElement(MapStory, null));
333
- }]
334
- };
@@ -1,115 +0,0 @@
1
- import React from "react";
2
- import { SingleValueContainer } from ".";
3
- const Template = args => /*#__PURE__*/React.createElement(SingleValueContainer, args);
4
- export const Default = Template.bind({});
5
- Default.args = {
6
- title: "PRIORITY INDICATORS",
7
- singleValueItems: [{
8
- label: "Total Bookings",
9
- value: 136
10
- }, {
11
- label: "At least one dose",
12
- value: 45,
13
- percentage: 23,
14
- color: "#0D47A1"
15
- }, {
16
- label: "Partially vaccinated",
17
- value: 13,
18
- percentage: 17,
19
- color: "#0D47A1"
20
- }, {
21
- label: "Fully vaccinated",
22
- value: 126,
23
- percentage: 83,
24
- color: "#0D47A1"
25
- }, {
26
- label: "Number of AEFI",
27
- value: 26
28
- }]
29
- };
30
- export const AnimatedAllValues = Template.bind({});
31
- AnimatedAllValues.args = {
32
- title: "PRIORITY INDICATORS",
33
- animationDuration: 1500,
34
- animationDelay: 500,
35
- singleValueItems: [{
36
- label: "Total Bookings",
37
- value: 136344
38
- }, {
39
- label: "At least one dose",
40
- value: 4423,
41
- percentage: 23,
42
- color: "#0D47A1"
43
- }, {
44
- label: "Partially vaccinated",
45
- value: 1394,
46
- percentage: 17,
47
- color: "#0D47A1"
48
- }, {
49
- label: "Fully vaccinated",
50
- value: 12432,
51
- percentage: 83,
52
- color: "#0D47A1"
53
- }, {
54
- label: "Number of AEFI",
55
- value: 26423
56
- }]
57
- };
58
- export const AnimatedSingleValue = Template.bind({});
59
- AnimatedSingleValue.args = {
60
- title: "PRIORITY INDICATORS",
61
- singleValueItems: [{
62
- label: "Total Bookings",
63
- value: 13634244,
64
- animationDuration: 1000,
65
- animationDelay: 100
66
- }, {
67
- label: "At least one dose",
68
- value: 45423,
69
- percentage: 23,
70
- color: "#0D47A1",
71
- animationDuration: 1000,
72
- animationDelay: 600
73
- }, {
74
- label: "Partially vaccinated",
75
- value: 13434,
76
- percentage: 17,
77
- color: "#0D47A1",
78
- animationDuration: 1000,
79
- animationDelay: 1100
80
- }, {
81
- label: "Fully vaccinated",
82
- value: 126432,
83
- percentage: 83,
84
- color: "#0D47A1",
85
- animationDuration: 1000,
86
- animationDelay: 1600
87
- }, {
88
- label: "Number of AEFI",
89
- value: 268423,
90
- animationDuration: 1000,
91
- animationDelay: 2000
92
- }]
93
- };
94
- export const SingleValuesWithDecimalPlaces = Template.bind({});
95
- SingleValuesWithDecimalPlaces.args = {
96
- title: "ENROLLMENTS",
97
- animationDuration: 1500,
98
- animationDelay: 500,
99
- singleValueItems: [{
100
- label: "Number of Enrolled Clients",
101
- value: 268423,
102
- decimalPlaces: 3
103
- }, {
104
- label: "Number of Served Clients",
105
- value: 268423,
106
- decimalPlaces: 1
107
- }]
108
- };
109
- export default {
110
- title: "Analytics/Single Value Container",
111
- component: SingleValueContainer,
112
- decorators: [SingleValueStory => {
113
- return /*#__PURE__*/React.createElement(SingleValueStory, null);
114
- }]
115
- };
@@ -1,129 +0,0 @@
1
- import { setupHighchartsModules } from "../ChartAnalytics";
2
- import { Visualization } from "./index";
3
- import HighCharts from "highcharts";
4
- import React from "react";
5
- import { Box, Card, CssReset } from "@dhis2/ui";
6
- const Template = args => /*#__PURE__*/React.createElement(Visualization, args);
7
- setupHighchartsModules(HighCharts);
8
- export const Default = Template.bind({});
9
- Default.args = {
10
- dimensions: {
11
- dx: ["Uvn6LCg7dVU", "OdiHJayrsKo", "sB79w2hiLp8", "AUqdhY4mpvp"],
12
- pe: ["LAST_6_MONTHS"],
13
- ou: ["USER_ORGUNIT_CHILDREN"]
14
- },
15
- layout: {
16
- columns: ["dx"],
17
- filters: [],
18
- rows: ["ou", "pe"]
19
- },
20
- defaultVisualizationType: "pivot-table",
21
- config: {
22
- chart: {
23
- layout: {
24
- series: ["dx"],
25
- category: ["pe"],
26
- filter: ["ou"]
27
- },
28
- type: "column"
29
- },
30
- map: {
31
- thematicLayers: [{
32
- type: "choropleth",
33
- id: "Uvn6LCg7dVU",
34
- enabled: true,
35
- control: {
36
- enabled: true,
37
- position: "topright"
38
- },
39
- dataItem: {
40
- displayName: "Uvn6LCg7dVU",
41
- id: "Uvn6LCg7dVU",
42
- type: "indicator",
43
- legendConfig: {
44
- colorClass: "BrBG",
45
- scale: 7
46
- }
47
- }
48
- }, {
49
- type: "choropleth",
50
- id: "OdiHJayrsKo",
51
- enabled: true,
52
- control: {
53
- enabled: true,
54
- position: "topright"
55
- },
56
- dataItem: {
57
- displayName: "OdiHJayrsKo",
58
- id: "OdiHJayrsKo",
59
- type: "indicator",
60
- legendConfig: {
61
- colorClass: "BrBG",
62
- scale: 7
63
- }
64
- }
65
- }, {
66
- type: "choropleth",
67
- id: "sB79w2hiLp8",
68
- enabled: true,
69
- control: {
70
- enabled: true,
71
- position: "topright"
72
- },
73
- dataItem: {
74
- displayName: "sB79w2hiLp8",
75
- id: "sB79w2hiLp8",
76
- type: "indicator",
77
- legendConfig: {
78
- colorClass: "BrBG",
79
- scale: 7
80
- }
81
- }
82
- }, {
83
- type: "choropleth",
84
- id: "AUqdhY4mpvp",
85
- enabled: true,
86
- control: {
87
- enabled: true,
88
- position: "topright"
89
- },
90
- dataItem: {
91
- displayName: "AUqdhY4mpvp",
92
- id: "AUqdhY4mpvp",
93
- type: "indicator",
94
- legendConfig: {
95
- colorClass: "BrBG",
96
- scale: 7
97
- }
98
- }
99
- }],
100
- legends: {
101
- enabled: true,
102
- position: "topright",
103
- collapsible: true
104
- }
105
- },
106
- pivotTable: {
107
- fixColumnHeaders: true,
108
- fixRowHeaders: true
109
- }
110
- }
111
- };
112
- export default {
113
- title: "Analytics/Visualization",
114
- component: Visualization,
115
- decorators: [ChartStory => {
116
- return /*#__PURE__*/React.createElement(Box, {
117
- width: "600",
118
- height: "500"
119
- }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
120
- style: {
121
- width: 1000,
122
- height: "100%",
123
- display: "flex",
124
- gap: 8,
125
- flexDirection: "column"
126
- }
127
- }, /*#__PURE__*/React.createElement(CssReset, null), /*#__PURE__*/React.createElement(ChartStory, null))));
128
- }]
129
- };
@@ -1,24 +0,0 @@
1
- import { CustomDataProvider } from "@dhis2/app-runtime";
2
- import React from "react";
3
- import mapData from "../../data/map.json";
4
- export default function MapDataProvider(_ref) {
5
- let {
6
- children
7
- } = _ref;
8
- return /*#__PURE__*/React.createElement(CustomDataProvider, {
9
- data: {
10
- ...mapData,
11
- geoFeatures: async (type, query) => {
12
- return mapData.geoFeatures;
13
- },
14
- analytics: async (type, query) => {
15
- var _query$params;
16
- if (query !== null && query !== void 0 && (_query$params = query.params) !== null && _query$params !== void 0 && _query$params.skipData) {
17
- return mapData.analytics;
18
- } else {
19
- return mapData.analyticsWithData;
20
- }
21
- }
22
- }
23
- }, children);
24
- }
@@ -1 +0,0 @@
1
- export const AbstractOverlay: Function;