@hisptz/dhis2-analytics 1.0.41 → 1.0.43
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.
- package/build/cjs/components/Map/components/MapLayer/components/GoogleEngineLayer/services/engine.js +9 -1
- package/build/cjs/components/Map/components/MapProvider/components/MapLayerProvider/hooks/index.js +3 -0
- package/build/cjs/components/Map/constants/colors.js +1 -0
- package/build/cjs/components/Visualization/Visualization.stories.js +138 -0
- package/build/cjs/components/Visualization/components/AnalyticsDataProvider/index.js +99 -0
- package/build/cjs/components/Visualization/components/DimensionsProvider/index.js +46 -0
- package/build/cjs/components/Visualization/components/LayoutProvider/index.js +31 -0
- package/build/cjs/components/Visualization/components/VisualizationDimensionSelector/index.js +73 -0
- package/build/cjs/components/Visualization/components/VisualizationProvider/index.js +29 -0
- package/build/cjs/components/Visualization/components/VisualizationSelector/index.js +188 -0
- package/build/cjs/components/Visualization/components/VisualizationTypeProvider/index.js +40 -0
- package/build/cjs/components/Visualization/components/VisualizationTypeSelector/index.js +54 -0
- package/build/cjs/components/Visualization/index.js +104 -0
- package/build/cjs/index.js +11 -0
- package/build/cjs/locales/en/translations.json +11 -1
- package/build/es/components/Map/components/MapProvider/components/MapLayerProvider/hooks/index.js +3 -0
- package/build/es/components/Map/constants/colors.js +1 -0
- package/build/es/components/Visualization/Visualization.stories.js +129 -0
- package/build/es/components/Visualization/components/AnalyticsDataProvider/index.js +90 -0
- package/build/es/components/Visualization/components/DimensionsProvider/index.js +34 -0
- package/build/es/components/Visualization/components/LayoutProvider/index.js +20 -0
- package/build/es/components/Visualization/components/VisualizationDimensionSelector/index.js +64 -0
- package/build/es/components/Visualization/components/VisualizationProvider/index.js +22 -0
- package/build/es/components/Visualization/components/VisualizationSelector/index.js +174 -0
- package/build/es/components/Visualization/components/VisualizationTypeProvider/index.js +25 -0
- package/build/es/components/Visualization/components/VisualizationTypeSelector/index.js +45 -0
- package/build/es/components/Visualization/index.js +97 -0
- package/build/es/index.js +1 -0
- package/build/es/locales/en/translations.json +11 -1
- package/build/types/components/CustomPivotTable/components/Table/index.d.ts +7 -6
- package/build/types/components/CustomPivotTable/index.d.ts +12 -11
- package/build/types/components/Visualization/components/AnalyticsDataProvider/index.d.ts +10 -0
- package/build/types/components/Visualization/components/DimensionsProvider/index.d.ts +15 -0
- package/build/types/components/Visualization/components/LayoutProvider/index.d.ts +14 -0
- package/build/types/components/Visualization/components/VisualizationDimensionSelector/index.d.ts +2 -0
- package/build/types/components/Visualization/components/VisualizationProvider/index.d.ts +13 -0
- package/build/types/components/Visualization/components/VisualizationSelector/index.d.ts +25 -0
- package/build/types/components/Visualization/components/VisualizationTypeProvider/index.d.ts +14 -0
- package/build/types/components/Visualization/components/VisualizationTypeSelector/index.d.ts +2 -0
- package/build/types/components/Visualization/index.d.ts +21 -0
- package/build/types/index.d.ts +1 -0
- package/package.json +5 -4
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
import React, { useMemo } from "react";
|
|
2
|
+
import { useVisualizationType } from "../VisualizationTypeProvider";
|
|
3
|
+
import { useAnalyticsData } from "../AnalyticsDataProvider";
|
|
4
|
+
import { CircularLoader } from "@dhis2/ui";
|
|
5
|
+
import { CustomPivotTable } from "../../../CustomPivotTable";
|
|
6
|
+
import { useLayout } from "../LayoutProvider";
|
|
7
|
+
import { filter, find, findIndex, forEach, mapValues, set } from "lodash";
|
|
8
|
+
import { useDimensions } from "../DimensionsProvider";
|
|
9
|
+
import i18n from '@dhis2/d2-i18n';
|
|
10
|
+
import { ChartAnalytics } from "../../../ChartAnalytics";
|
|
11
|
+
import { Map } from "../../../Map";
|
|
12
|
+
export function getDimensionLabel(dimension) {
|
|
13
|
+
switch (dimension) {
|
|
14
|
+
case "pe":
|
|
15
|
+
return i18n.t("Period");
|
|
16
|
+
case "ou":
|
|
17
|
+
return i18n.t("Organisation unit");
|
|
18
|
+
case "dx":
|
|
19
|
+
return i18n.t("Data");
|
|
20
|
+
default:
|
|
21
|
+
return "";
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
export function getOrgUnitSelectionFromIds(ous) {
|
|
25
|
+
const orgUnitSelection = {
|
|
26
|
+
orgUnits: []
|
|
27
|
+
};
|
|
28
|
+
forEach(ous, ou => {
|
|
29
|
+
if (ou === "USER_ORGUNIT") {
|
|
30
|
+
set(orgUnitSelection, ["userOrgUnit"], true);
|
|
31
|
+
} else if (ou === "USER_ORGUNIT_CHILDREN") {
|
|
32
|
+
set(orgUnitSelection, ["userSubUnit"], true);
|
|
33
|
+
} else if (ou === "USER_ORGUNIT_GRANDCHILDREN") {
|
|
34
|
+
set(orgUnitSelection, ["userSubX2Unit"], true);
|
|
35
|
+
} else {
|
|
36
|
+
var _orgUnitSelection$org;
|
|
37
|
+
const orgUnits = [...((_orgUnitSelection$org = orgUnitSelection.orgUnits) !== null && _orgUnitSelection$org !== void 0 ? _orgUnitSelection$org : [])];
|
|
38
|
+
orgUnits.push({
|
|
39
|
+
id: ou,
|
|
40
|
+
children: []
|
|
41
|
+
});
|
|
42
|
+
set(orgUnitSelection, ['orgUnits'], orgUnits);
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
return orgUnitSelection;
|
|
46
|
+
}
|
|
47
|
+
export function PivotTableRenderer(_ref) {
|
|
48
|
+
var _options$scrollHeight, _options$scrollWidth, _options$width;
|
|
49
|
+
let {
|
|
50
|
+
options
|
|
51
|
+
} = _ref;
|
|
52
|
+
const [layout] = useLayout();
|
|
53
|
+
const {
|
|
54
|
+
analytics
|
|
55
|
+
} = useAnalyticsData();
|
|
56
|
+
const sanitizedLayout = useMemo(() => {
|
|
57
|
+
return mapValues(layout, dimension => dimension.map(dimension => ({
|
|
58
|
+
dimension,
|
|
59
|
+
label: getDimensionLabel(dimension)
|
|
60
|
+
})));
|
|
61
|
+
}, [layout]);
|
|
62
|
+
if (!analytics) {
|
|
63
|
+
return null;
|
|
64
|
+
}
|
|
65
|
+
return /*#__PURE__*/React.createElement(CustomPivotTable, {
|
|
66
|
+
tableProps: {
|
|
67
|
+
scrollHeight: (_options$scrollHeight = options.scrollHeight) !== null && _options$scrollHeight !== void 0 ? _options$scrollHeight : "100%",
|
|
68
|
+
scrollWidth: (_options$scrollWidth = options.scrollWidth) !== null && _options$scrollWidth !== void 0 ? _options$scrollWidth : "100%",
|
|
69
|
+
width: (_options$width = options.width) !== null && _options$width !== void 0 ? _options$width : "100%"
|
|
70
|
+
},
|
|
71
|
+
analytics: analytics,
|
|
72
|
+
config: {
|
|
73
|
+
layout: sanitizedLayout,
|
|
74
|
+
options
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
export function ChartRenderer(_ref2) {
|
|
79
|
+
let {
|
|
80
|
+
options,
|
|
81
|
+
height
|
|
82
|
+
} = _ref2;
|
|
83
|
+
const {
|
|
84
|
+
analytics
|
|
85
|
+
} = useAnalyticsData();
|
|
86
|
+
if (!analytics) {
|
|
87
|
+
return null;
|
|
88
|
+
}
|
|
89
|
+
return /*#__PURE__*/React.createElement(ChartAnalytics, {
|
|
90
|
+
analytics: analytics,
|
|
91
|
+
config: {
|
|
92
|
+
...options,
|
|
93
|
+
height
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
export function MapRenderer(_ref3) {
|
|
98
|
+
let {
|
|
99
|
+
options
|
|
100
|
+
} = _ref3;
|
|
101
|
+
const [dimensions] = useDimensions();
|
|
102
|
+
const {
|
|
103
|
+
analytics
|
|
104
|
+
} = useAnalyticsData();
|
|
105
|
+
const orgUnitSelection = useMemo(() => {
|
|
106
|
+
var _dimensions$ou;
|
|
107
|
+
return getOrgUnitSelectionFromIds((_dimensions$ou = dimensions.ou) !== null && _dimensions$ou !== void 0 ? _dimensions$ou : []);
|
|
108
|
+
}, [dimensions.ou]);
|
|
109
|
+
const thematicLayers = useMemo(() => {
|
|
110
|
+
var _findIndex, _analytics$metaData$d, _analytics$metaData, _analytics$metaData$d2;
|
|
111
|
+
const valueIndex = (_findIndex = findIndex(analytics.headers, ['name', 'value'])) !== null && _findIndex !== void 0 ? _findIndex : -1;
|
|
112
|
+
return (_analytics$metaData$d = (_analytics$metaData = analytics.metaData) === null || _analytics$metaData === void 0 ? void 0 : (_analytics$metaData$d2 = _analytics$metaData.dimensions["dx"]) === null || _analytics$metaData$d2 === void 0 ? void 0 : _analytics$metaData$d2.map(dataId => {
|
|
113
|
+
var _analytics$metaData$d3, _analytics$metaData2, _analytics$metaData2$, _analytics$metaData2$2;
|
|
114
|
+
const config = find(options.thematicLayers, ['id', dataId]);
|
|
115
|
+
const data = (_analytics$metaData$d3 = (_analytics$metaData2 = analytics.metaData) === null || _analytics$metaData2 === void 0 ? void 0 : (_analytics$metaData2$ = _analytics$metaData2.dimensions) === null || _analytics$metaData2$ === void 0 ? void 0 : (_analytics$metaData2$2 = _analytics$metaData2$.ou) === null || _analytics$metaData2$2 === void 0 ? void 0 : _analytics$metaData2$2.map(ouId => {
|
|
116
|
+
const values = filter(analytics.rows, row => row.includes(dataId) && row.includes(ouId));
|
|
117
|
+
const value = values.reduce((acc, value) => acc + parseFloat(value[valueIndex]), 0);
|
|
118
|
+
return {
|
|
119
|
+
data: value,
|
|
120
|
+
dataItem: dataId,
|
|
121
|
+
orgUnit: ouId
|
|
122
|
+
};
|
|
123
|
+
})) !== null && _analytics$metaData$d3 !== void 0 ? _analytics$metaData$d3 : [];
|
|
124
|
+
return {
|
|
125
|
+
...config,
|
|
126
|
+
data
|
|
127
|
+
};
|
|
128
|
+
})) !== null && _analytics$metaData$d !== void 0 ? _analytics$metaData$d : [];
|
|
129
|
+
}, [analytics]);
|
|
130
|
+
return /*#__PURE__*/React.createElement(Map, {
|
|
131
|
+
orgUnitSelection: orgUnitSelection,
|
|
132
|
+
thematicLayers: thematicLayers
|
|
133
|
+
});
|
|
134
|
+
}
|
|
135
|
+
export function VisualizationSelector(_ref4) {
|
|
136
|
+
let {
|
|
137
|
+
config,
|
|
138
|
+
height
|
|
139
|
+
} = _ref4;
|
|
140
|
+
const [type] = useVisualizationType();
|
|
141
|
+
const {
|
|
142
|
+
analytics,
|
|
143
|
+
loading
|
|
144
|
+
} = useAnalyticsData();
|
|
145
|
+
if (loading) {
|
|
146
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
147
|
+
style: {
|
|
148
|
+
width: "100%",
|
|
149
|
+
height: "100%",
|
|
150
|
+
display: "flex",
|
|
151
|
+
justifyContent: "center",
|
|
152
|
+
alignItems: "center"
|
|
153
|
+
}
|
|
154
|
+
}, /*#__PURE__*/React.createElement(CircularLoader, {
|
|
155
|
+
small: true
|
|
156
|
+
}));
|
|
157
|
+
}
|
|
158
|
+
if (!analytics) {
|
|
159
|
+
return null;
|
|
160
|
+
}
|
|
161
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
162
|
+
style: {
|
|
163
|
+
width: "100%",
|
|
164
|
+
height: "100%"
|
|
165
|
+
}
|
|
166
|
+
}, type === "pivotTable" && /*#__PURE__*/React.createElement(PivotTableRenderer, {
|
|
167
|
+
options: config === null || config === void 0 ? void 0 : config.pivotTable
|
|
168
|
+
}), type === "chart" && /*#__PURE__*/React.createElement(ChartRenderer, {
|
|
169
|
+
height: height,
|
|
170
|
+
options: config === null || config === void 0 ? void 0 : config.chart
|
|
171
|
+
}), type === "map" && /*#__PURE__*/React.createElement(MapRenderer, {
|
|
172
|
+
options: config === null || config === void 0 ? void 0 : config.map
|
|
173
|
+
}));
|
|
174
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React, { createContext, useContext, useState } from "react";
|
|
2
|
+
export const VisualizationTypeContext = /*#__PURE__*/createContext('pivotTable');
|
|
3
|
+
export const VisualizationConfigContext = /*#__PURE__*/createContext(undefined);
|
|
4
|
+
export const VisualizationTypeSetter = /*#__PURE__*/createContext(undefined);
|
|
5
|
+
export function useVisualizationType() {
|
|
6
|
+
return [useContext(VisualizationTypeContext), useContext(VisualizationTypeSetter)];
|
|
7
|
+
}
|
|
8
|
+
export function useVisualizationConfig() {
|
|
9
|
+
return useContext(VisualizationConfigContext);
|
|
10
|
+
}
|
|
11
|
+
export function VisualizationTypeProvider(_ref) {
|
|
12
|
+
let {
|
|
13
|
+
children,
|
|
14
|
+
defaultType,
|
|
15
|
+
config
|
|
16
|
+
} = _ref;
|
|
17
|
+
const [type, setType] = useState(defaultType);
|
|
18
|
+
return /*#__PURE__*/React.createElement(VisualizationTypeContext.Provider, {
|
|
19
|
+
value: type
|
|
20
|
+
}, /*#__PURE__*/React.createElement(VisualizationConfigContext.Provider, {
|
|
21
|
+
value: config
|
|
22
|
+
}, /*#__PURE__*/React.createElement(VisualizationTypeSetter.Provider, {
|
|
23
|
+
value: setType
|
|
24
|
+
}, children)));
|
|
25
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React, { useMemo } from "react";
|
|
2
|
+
import { useVisualizationConfig, useVisualizationType } from "../VisualizationTypeProvider";
|
|
3
|
+
import { Button, IconTable24, IconVisualizationColumn24, IconWorld24, Tooltip } from "@dhis2/ui";
|
|
4
|
+
import i18n from '@dhis2/d2-i18n';
|
|
5
|
+
const supportedVisualizationTypes = [{
|
|
6
|
+
id: "pivotTable",
|
|
7
|
+
icon: /*#__PURE__*/React.createElement(IconTable24, null),
|
|
8
|
+
label: i18n.t("Pivot table")
|
|
9
|
+
}, {
|
|
10
|
+
id: "chart",
|
|
11
|
+
icon: /*#__PURE__*/React.createElement(IconVisualizationColumn24, null),
|
|
12
|
+
label: i18n.t("Chart")
|
|
13
|
+
}, {
|
|
14
|
+
id: "map",
|
|
15
|
+
icon: /*#__PURE__*/React.createElement(IconWorld24, null),
|
|
16
|
+
label: i18n.t("Map")
|
|
17
|
+
}];
|
|
18
|
+
export function VisualizationTypeSelector() {
|
|
19
|
+
const [type, setType] = useVisualizationType();
|
|
20
|
+
const config = useVisualizationConfig();
|
|
21
|
+
const types = useMemo(() => supportedVisualizationTypes.filter(supportedType => {
|
|
22
|
+
return Object.keys(config !== null && config !== void 0 ? config : {}).includes(supportedType.id) && supportedType.id !== type;
|
|
23
|
+
}), [type, config]);
|
|
24
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
25
|
+
style: {
|
|
26
|
+
display: "flex",
|
|
27
|
+
gap: 8
|
|
28
|
+
}
|
|
29
|
+
}, types.map(_ref => {
|
|
30
|
+
let {
|
|
31
|
+
icon,
|
|
32
|
+
label,
|
|
33
|
+
id
|
|
34
|
+
} = _ref;
|
|
35
|
+
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
36
|
+
key: `${label}-tooltip`,
|
|
37
|
+
content: i18n.t("View as {{type}}", {
|
|
38
|
+
type: label.toLowerCase()
|
|
39
|
+
})
|
|
40
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
41
|
+
onClick: () => setType(id),
|
|
42
|
+
icon: icon
|
|
43
|
+
}));
|
|
44
|
+
}));
|
|
45
|
+
}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { VisualizationProvider } from "./components/VisualizationProvider";
|
|
4
|
+
import { VisualizationTypeSelector } from "./components/VisualizationTypeSelector";
|
|
5
|
+
import { VisualizationDimensionSelector } from "./components/VisualizationDimensionSelector";
|
|
6
|
+
import { VisualizationSelector } from "./components/VisualizationSelector";
|
|
7
|
+
import { ErrorBoundary } from "react-error-boundary";
|
|
8
|
+
import i18n from '@dhis2/d2-i18n';
|
|
9
|
+
import { Button, colors, IconError24 } from "@dhis2/ui";
|
|
10
|
+
/**
|
|
11
|
+
* An analytics component that allows visualization of `chart`, `map`, and `pivot table` by passing analytics object and the default layout and type
|
|
12
|
+
*
|
|
13
|
+
* */
|
|
14
|
+
|
|
15
|
+
function ErrorFallback(_ref) {
|
|
16
|
+
let {
|
|
17
|
+
error,
|
|
18
|
+
resetErrorBoundary,
|
|
19
|
+
height
|
|
20
|
+
} = _ref;
|
|
21
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
22
|
+
style: {
|
|
23
|
+
width: "100%",
|
|
24
|
+
textAlign: "center",
|
|
25
|
+
height: height !== null && height !== void 0 ? height : 500,
|
|
26
|
+
display: "flex",
|
|
27
|
+
flexDirection: "column",
|
|
28
|
+
alignItems: "center",
|
|
29
|
+
justifyContent: "center",
|
|
30
|
+
gap: 16,
|
|
31
|
+
padding: 16
|
|
32
|
+
}
|
|
33
|
+
}, /*#__PURE__*/React.createElement(IconError24, null), /*#__PURE__*/React.createElement("h3", {
|
|
34
|
+
style: {
|
|
35
|
+
color: colors.grey800,
|
|
36
|
+
margin: 0
|
|
37
|
+
}
|
|
38
|
+
}, i18n.t("Could not load visualization")), /*#__PURE__*/React.createElement("p", {
|
|
39
|
+
style: {
|
|
40
|
+
margin: 0
|
|
41
|
+
}
|
|
42
|
+
}, error.message), resetErrorBoundary && /*#__PURE__*/React.createElement(Button, {
|
|
43
|
+
onClick: resetErrorBoundary,
|
|
44
|
+
small: true
|
|
45
|
+
}, i18n.t("Try again")));
|
|
46
|
+
}
|
|
47
|
+
export function Visualization(_ref2) {
|
|
48
|
+
let {
|
|
49
|
+
dimensions,
|
|
50
|
+
layout,
|
|
51
|
+
defaultVisualizationType,
|
|
52
|
+
config,
|
|
53
|
+
height,
|
|
54
|
+
showToolbar
|
|
55
|
+
} = _ref2;
|
|
56
|
+
return /*#__PURE__*/React.createElement(ErrorBoundary, {
|
|
57
|
+
onReset: () => {
|
|
58
|
+
//TODO: reset the visualization
|
|
59
|
+
},
|
|
60
|
+
resetKeys: [dimensions, layout, defaultVisualizationType, config],
|
|
61
|
+
fallbackRender: props => /*#__PURE__*/React.createElement(ErrorFallback, _extends({
|
|
62
|
+
height: height
|
|
63
|
+
}, props))
|
|
64
|
+
}, /*#__PURE__*/React.createElement(VisualizationProvider, {
|
|
65
|
+
config: config,
|
|
66
|
+
type: defaultVisualizationType,
|
|
67
|
+
layout: layout,
|
|
68
|
+
dimensions: dimensions
|
|
69
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
70
|
+
style: {
|
|
71
|
+
display: "flex",
|
|
72
|
+
flexDirection: "column",
|
|
73
|
+
width: "100%",
|
|
74
|
+
height: "100%",
|
|
75
|
+
padding: 16,
|
|
76
|
+
gap: 16
|
|
77
|
+
}
|
|
78
|
+
}, showToolbar && /*#__PURE__*/React.createElement("div", {
|
|
79
|
+
style: {
|
|
80
|
+
display: "flex",
|
|
81
|
+
flexDirection: "row",
|
|
82
|
+
gap: 16,
|
|
83
|
+
justifyContent: "space-between"
|
|
84
|
+
}
|
|
85
|
+
}, /*#__PURE__*/React.createElement(VisualizationTypeSelector, null), /*#__PURE__*/React.createElement(VisualizationDimensionSelector, null)), /*#__PURE__*/React.createElement("div", {
|
|
86
|
+
style: {
|
|
87
|
+
display: "flex",
|
|
88
|
+
flexDirection: "column",
|
|
89
|
+
alignItems: "center",
|
|
90
|
+
justifyContent: "center",
|
|
91
|
+
height: height !== null && height !== void 0 ? height : 500
|
|
92
|
+
}
|
|
93
|
+
}, /*#__PURE__*/React.createElement(VisualizationSelector, {
|
|
94
|
+
height: height !== null && height !== void 0 ? height : 500,
|
|
95
|
+
config: config
|
|
96
|
+
})))));
|
|
97
|
+
}
|
package/build/es/index.js
CHANGED
|
@@ -124,5 +124,15 @@
|
|
|
124
124
|
"Legend set is required": "Legend set is required",
|
|
125
125
|
"Radius": "Radius",
|
|
126
126
|
"Configure Thematic Layer": "Configure Thematic Layer",
|
|
127
|
-
"Loading ...": "Loading ..."
|
|
127
|
+
"Loading ...": "Loading ...",
|
|
128
|
+
"Select location(s)": "Select location(s)",
|
|
129
|
+
"Location": "Location",
|
|
130
|
+
"Organisation unit": "Organisation unit",
|
|
131
|
+
"Data": "Data",
|
|
132
|
+
"Pivot table": "Pivot table",
|
|
133
|
+
"Chart": "Chart",
|
|
134
|
+
"Map": "Map",
|
|
135
|
+
"View as {{type}}": "View as {{type}}",
|
|
136
|
+
"Could not load visualization": "Could not load visualization",
|
|
137
|
+
"Try again": "Try again"
|
|
128
138
|
}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
export interface PivotTableLayoutProps {
|
|
3
|
+
scrollHeight?: string;
|
|
4
|
+
scrollWidth?: string;
|
|
5
|
+
layout?: string;
|
|
6
|
+
width?: string;
|
|
7
|
+
}
|
|
2
8
|
export interface PivotTableProps {
|
|
3
9
|
children: React.ReactNode;
|
|
4
|
-
tableProps?:
|
|
5
|
-
scrollHeight?: string;
|
|
6
|
-
scrollWidth?: string;
|
|
7
|
-
layout?: string;
|
|
8
|
-
width?: string;
|
|
9
|
-
};
|
|
10
|
+
tableProps?: PivotTableLayoutProps;
|
|
10
11
|
}
|
|
11
12
|
export declare function PivotTable({ tableProps, children }: PivotTableProps): JSX.Element;
|
|
@@ -1,6 +1,17 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Analytics, LegendSet } from "@hisptz/dhis2-utils";
|
|
3
3
|
import { DHIS2Dimension } from "./interfaces";
|
|
4
|
+
export interface CustomPivotTableOptions {
|
|
5
|
+
legendSets?: LegendSet[];
|
|
6
|
+
hideEmptyColumns?: boolean;
|
|
7
|
+
hideEmptyRows?: boolean;
|
|
8
|
+
showRowTotals?: boolean;
|
|
9
|
+
showColumnTotals?: boolean;
|
|
10
|
+
showRowSubtotals?: boolean;
|
|
11
|
+
showColumnSubtotals?: boolean;
|
|
12
|
+
fixColumnHeaders?: boolean;
|
|
13
|
+
fixRowHeaders?: boolean;
|
|
14
|
+
}
|
|
4
15
|
export interface CustomPivotTableProps {
|
|
5
16
|
analytics: Analytics;
|
|
6
17
|
tableProps?: {
|
|
@@ -24,17 +35,7 @@ export interface CustomPivotTableProps {
|
|
|
24
35
|
label?: string;
|
|
25
36
|
}[];
|
|
26
37
|
};
|
|
27
|
-
options?:
|
|
28
|
-
legendSets?: LegendSet[];
|
|
29
|
-
hideEmptyColumns?: boolean;
|
|
30
|
-
hideEmptyRows?: boolean;
|
|
31
|
-
showRowTotals?: boolean;
|
|
32
|
-
showColumnTotals?: boolean;
|
|
33
|
-
showRowSubtotals?: boolean;
|
|
34
|
-
showColumnSubtotals?: boolean;
|
|
35
|
-
fixColumnHeaders?: boolean;
|
|
36
|
-
fixRowHeaders?: boolean;
|
|
37
|
-
};
|
|
38
|
+
options?: CustomPivotTableOptions;
|
|
38
39
|
};
|
|
39
40
|
}
|
|
40
41
|
export declare function CustomPivotTable({ analytics, config, tableProps }: CustomPivotTableProps): JSX.Element;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Analytics } from "@hisptz/dhis2-utils";
|
|
3
|
+
export interface DataProviderProps {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
}
|
|
6
|
+
export declare function useAnalyticsData(): {
|
|
7
|
+
loading: boolean;
|
|
8
|
+
analytics: Analytics;
|
|
9
|
+
};
|
|
10
|
+
export declare function AnalyticsDataProvider({ children }: DataProviderProps): JSX.Element;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { AnalyticsDimension } from "@hisptz/dhis2-utils";
|
|
3
|
+
export type Dimension = "ou" | "pe" | "dx" | "co";
|
|
4
|
+
export type DimensionUpdater = (data: {
|
|
5
|
+
dimension: Dimension;
|
|
6
|
+
value: string[];
|
|
7
|
+
}) => void;
|
|
8
|
+
export declare const DimensionState: React.Context<AnalyticsDimension>;
|
|
9
|
+
export declare const DimensionUpdateState: React.Context<DimensionUpdater | undefined>;
|
|
10
|
+
export interface DimensionProviderProps {
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
dimensions: AnalyticsDimension;
|
|
13
|
+
}
|
|
14
|
+
export declare function useDimensions(): [AnalyticsDimension, DimensionUpdater];
|
|
15
|
+
export declare function DimensionsProvider({ children, dimensions }: DimensionProviderProps): JSX.Element;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Dimension } from "../DimensionsProvider";
|
|
3
|
+
export interface Layout {
|
|
4
|
+
rows: Dimension[];
|
|
5
|
+
columns: Dimension[];
|
|
6
|
+
filters: Dimension[];
|
|
7
|
+
}
|
|
8
|
+
export interface LayoutProviderProps {
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
defaultLayout: Layout;
|
|
11
|
+
}
|
|
12
|
+
export declare const LayoutState: React.Context<Layout | undefined>;
|
|
13
|
+
export declare function useLayout(): Layout[];
|
|
14
|
+
export declare function LayoutProvider({ defaultLayout, children }: LayoutProviderProps): JSX.Element;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Layout } from "../LayoutProvider";
|
|
3
|
+
import { AnalyticsDimension } from "@hisptz/dhis2-utils";
|
|
4
|
+
import { VisualizationType } from "../VisualizationTypeProvider";
|
|
5
|
+
import { VisualizationConfig } from "../../index";
|
|
6
|
+
export interface VisualizationProviderProps {
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
layout: Layout;
|
|
9
|
+
dimensions: AnalyticsDimension;
|
|
10
|
+
type: VisualizationType;
|
|
11
|
+
config: VisualizationConfig;
|
|
12
|
+
}
|
|
13
|
+
export declare function VisualizationProvider({ layout, dimensions, children, type, config }: VisualizationProviderProps): JSX.Element;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { CustomPivotTableOptions } from "../../../CustomPivotTable";
|
|
3
|
+
import { Dimension } from "../DimensionsProvider";
|
|
4
|
+
import { ChartConfig } from "../../../ChartAnalytics";
|
|
5
|
+
import { VisualizationConfig } from "../../index";
|
|
6
|
+
import { MapProps } from "../../../Map";
|
|
7
|
+
import { OrgUnitSelection } from "@hisptz/dhis2-utils";
|
|
8
|
+
import { PivotTableLayoutProps } from "../../../CustomPivotTable/components/Table";
|
|
9
|
+
export interface VisualizationSelectorProps {
|
|
10
|
+
config: VisualizationConfig;
|
|
11
|
+
height: number;
|
|
12
|
+
}
|
|
13
|
+
export declare function getDimensionLabel(dimension: Dimension): any;
|
|
14
|
+
export declare function getOrgUnitSelectionFromIds(ous: string[]): OrgUnitSelection;
|
|
15
|
+
export declare function PivotTableRenderer({ options }: {
|
|
16
|
+
options: CustomPivotTableOptions & PivotTableLayoutProps;
|
|
17
|
+
}): JSX.Element | null;
|
|
18
|
+
export declare function ChartRenderer({ options, height }: {
|
|
19
|
+
options: ChartConfig;
|
|
20
|
+
height: number;
|
|
21
|
+
}): JSX.Element | null;
|
|
22
|
+
export declare function MapRenderer({ options }: {
|
|
23
|
+
options: Omit<MapProps, "orgUnitSelection" | "periodSelection">;
|
|
24
|
+
}): JSX.Element;
|
|
25
|
+
export declare function VisualizationSelector({ config, height }: VisualizationSelectorProps): JSX.Element | null;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { VisualizationConfig } from "../../index";
|
|
3
|
+
export type VisualizationType = "pivotTable" | "chart" | "map";
|
|
4
|
+
export declare const VisualizationTypeContext: React.Context<VisualizationType>;
|
|
5
|
+
export declare const VisualizationConfigContext: React.Context<VisualizationConfig | undefined>;
|
|
6
|
+
export declare const VisualizationTypeSetter: React.Context<React.Dispatch<React.SetStateAction<VisualizationType>> | undefined>;
|
|
7
|
+
export interface VisualizationTypeProviderProps {
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
defaultType: VisualizationType;
|
|
10
|
+
config: VisualizationConfig;
|
|
11
|
+
}
|
|
12
|
+
export declare function useVisualizationType(): [VisualizationType, React.Dispatch<React.SetStateAction<VisualizationType>>];
|
|
13
|
+
export declare function useVisualizationConfig(): VisualizationConfig | undefined;
|
|
14
|
+
export declare function VisualizationTypeProvider({ children, defaultType, config }: VisualizationTypeProviderProps): JSX.Element;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { AnalyticsDimension } from "@hisptz/dhis2-utils";
|
|
3
|
+
import { Layout } from "./components/LayoutProvider";
|
|
4
|
+
import { VisualizationType } from "./components/VisualizationTypeProvider";
|
|
5
|
+
import { CustomPivotTableOptions } from "../CustomPivotTable";
|
|
6
|
+
import { ChartConfig } from "../ChartAnalytics";
|
|
7
|
+
import { MapProps } from "../Map";
|
|
8
|
+
export interface VisualizationConfig {
|
|
9
|
+
pivotTable?: CustomPivotTableOptions;
|
|
10
|
+
chart?: ChartConfig;
|
|
11
|
+
map?: Omit<MapProps, "orgUnitSelection" | "periodSelection">;
|
|
12
|
+
}
|
|
13
|
+
export interface VisualizationProps {
|
|
14
|
+
layout: Layout;
|
|
15
|
+
defaultVisualizationType: VisualizationType;
|
|
16
|
+
dimensions: AnalyticsDimension;
|
|
17
|
+
config: VisualizationConfig;
|
|
18
|
+
height?: number;
|
|
19
|
+
showToolbar?: boolean;
|
|
20
|
+
}
|
|
21
|
+
export declare function Visualization({ dimensions, layout, defaultVisualizationType, config, height, showToolbar }: VisualizationProps): JSX.Element;
|
package/build/types/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hisptz/dhis2-analytics",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.43",
|
|
4
4
|
"description": "A collection of reusable react components for visualizing analytics data from DHIS2",
|
|
5
5
|
"license": "BSD-3-Clause",
|
|
6
6
|
"scripts": {
|
|
@@ -31,8 +31,8 @@
|
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@dhis2/analytics": "^24.4.2",
|
|
33
33
|
"@dhis2/app-runtime": "^3.7.0",
|
|
34
|
-
"@hisptz/dhis2-ui": "^1.0.
|
|
35
|
-
"@hisptz/dhis2-utils": "^1.0.
|
|
34
|
+
"@hisptz/dhis2-ui": "^1.0.42",
|
|
35
|
+
"@hisptz/dhis2-utils": "^1.0.42",
|
|
36
36
|
"async-es": "^3.2.4",
|
|
37
37
|
"d3-color": "^3.1.0",
|
|
38
38
|
"d3-scale": "^4.0.2",
|
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
"leaflet-easyprint": "^2.1.9",
|
|
43
43
|
"leaflet.fullscreen": "^2.4.0",
|
|
44
44
|
"react-circular-progressbar": "^2.1.0",
|
|
45
|
+
"react-error-boundary": "^4.0.4",
|
|
45
46
|
"react-helmet": "^6.1.0",
|
|
46
47
|
"react-leaflet": "^4.2.0",
|
|
47
48
|
"react-leaflet-custom-control": "^1.3.1",
|
|
@@ -80,5 +81,5 @@
|
|
|
80
81
|
"peerDependencies": {
|
|
81
82
|
"lodash": "^4"
|
|
82
83
|
},
|
|
83
|
-
"gitHead": "
|
|
84
|
+
"gitHead": "47134169b6b51d2234d15a3a07503abdaaaff9b0"
|
|
84
85
|
}
|