@hisptz/dhis2-analytics 1.0.45 → 1.0.47

package/build/cjs/components/Visualization/components/DimensionsProvider/index.js

@@ -8,6 +8,7 @@ exports.DimensionsProvider = DimensionsProvider;
 exports.useDimensions = useDimensions;
 var _react = _interopRequireWildcard(require("react"));
 var _lodash = require("lodash");
+var _usehooksTs = require("usehooks-ts");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const DimensionState = /*#__PURE__*/(0, _react.createContext)({
@@ -38,6 +39,16 @@ function DimensionsProvider(_ref2) {
     dimensions
   } = _ref2;
   const [state, dispatch] = (0, _react.useReducer)(reducer, dimensions);
+  (0, _usehooksTs.useUpdateEffect)(() => {
+    Object.keys(dimensions).forEach(dimension => {
+      var _dimensions$dimension;
+      console.log("updating");
+      dispatch({
+        dimension: dimension,
+        value: (_dimensions$dimension = dimensions[dimension]) !== null && _dimensions$dimension !== void 0 ? _dimensions$dimension : []
+      });
+    });
+  }, [dimensions]);
   return /*#__PURE__*/_react.default.createElement(DimensionState.Provider, {
     value: state
   }, /*#__PURE__*/_react.default.createElement(DimensionUpdateState.Provider, {

package/build/cjs/components/Visualization/components/VisualizationSelector/index.js

@@ -91,8 +91,7 @@ function PivotTableRenderer(_ref) {
 }
 function ChartRenderer(_ref2) {
   let {
-    options,
-    height
+    options
   } = _ref2;
   const {
     analytics
@@ -103,8 +102,7 @@ function ChartRenderer(_ref2) {
   return /*#__PURE__*/_react.default.createElement(_ChartAnalytics.ChartAnalytics, {
     analytics: analytics,
     config: {
-      ...options,
-      height
+      ...options
     }
   });
 }
@@ -148,8 +146,7 @@ function MapRenderer(_ref3) {
 }
 function VisualizationSelector(_ref4) {
   let {
-    config,
-    height
+    config
   } = _ref4;
   const [type] = (0, _VisualizationTypeProvider.useVisualizationType)();
   const {
@@ -172,15 +169,9 @@ function VisualizationSelector(_ref4) {
   if (!analytics) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      width: "100%",
-      height: "100%"
-    }
-  }, type === "pivotTable" && /*#__PURE__*/_react.default.createElement(PivotTableRenderer, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, type === "pivotTable" && /*#__PURE__*/_react.default.createElement(PivotTableRenderer, {
     options: config === null || config === void 0 ? void 0 : config.pivotTable
   }), type === "chart" && /*#__PURE__*/_react.default.createElement(ChartRenderer, {
-    height: height,
     options: config === null || config === void 0 ? void 0 : config.chart
   }), type === "map" && /*#__PURE__*/_react.default.createElement(MapRenderer, {
     options: config === null || config === void 0 ? void 0 : config.map

package/build/cjs/components/Visualization/index.js

@@ -79,7 +79,6 @@ function Visualization(_ref2) {
       flexDirection: "column",
       width: "100%",
       height: "100%",
-      padding: 16,
       gap: 16
     }
   }, showToolbar && /*#__PURE__*/_react.default.createElement("div", {
@@ -89,16 +88,7 @@ function Visualization(_ref2) {
       gap: 16,
       justifyContent: "space-between"
     }
-  }, /*#__PURE__*/_react.default.createElement(_VisualizationTypeSelector.VisualizationTypeSelector, null), /*#__PURE__*/_react.default.createElement(_VisualizationDimensionSelector.VisualizationDimensionSelector, null)), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center",
-      height: height !== null && height !== void 0 ? height : 500
-    }
-  }, /*#__PURE__*/_react.default.createElement(_VisualizationSelector.VisualizationSelector, {
-    height: height !== null && height !== void 0 ? height : 500,
+  }, /*#__PURE__*/_react.default.createElement(_VisualizationTypeSelector.VisualizationTypeSelector, null), /*#__PURE__*/_react.default.createElement(_VisualizationDimensionSelector.VisualizationDimensionSelector, null)), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_VisualizationSelector.VisualizationSelector, {
     config: config
   })))));
 }

package/build/es/components/Visualization/components/DimensionsProvider/index.js

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useReducer } from "react";
 import { set } from "lodash";
+import { useUpdateEffect } from "usehooks-ts";
 export const DimensionState = /*#__PURE__*/createContext({
   dx: [],
   pe: [],
@@ -26,6 +27,16 @@ export function DimensionsProvider(_ref2) {
     dimensions
   } = _ref2;
   const [state, dispatch] = useReducer(reducer, dimensions);
+  useUpdateEffect(() => {
+    Object.keys(dimensions).forEach(dimension => {
+      var _dimensions$dimension;
+      console.log("updating");
+      dispatch({
+        dimension: dimension,
+        value: (_dimensions$dimension = dimensions[dimension]) !== null && _dimensions$dimension !== void 0 ? _dimensions$dimension : []
+      });
+    });
+  }, [dimensions]);
   return /*#__PURE__*/React.createElement(DimensionState.Provider, {
     value: state
   }, /*#__PURE__*/React.createElement(DimensionUpdateState.Provider, {

package/build/es/components/Visualization/components/VisualizationSelector/index.js

@@ -77,8 +77,7 @@ export function PivotTableRenderer(_ref) {
 }
 export function ChartRenderer(_ref2) {
   let {
-    options,
-    height
+    options
   } = _ref2;
   const {
     analytics
@@ -89,8 +88,7 @@ export function ChartRenderer(_ref2) {
   return /*#__PURE__*/React.createElement(ChartAnalytics, {
     analytics: analytics,
     config: {
-      ...options,
-      height
+      ...options
     }
   });
 }
@@ -134,8 +132,7 @@ export function MapRenderer(_ref3) {
 }
 export function VisualizationSelector(_ref4) {
   let {
-    config,
-    height
+    config
   } = _ref4;
   const [type] = useVisualizationType();
   const {
@@ -158,15 +155,9 @@ export function VisualizationSelector(_ref4) {
   if (!analytics) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: "100%",
-      height: "100%"
-    }
-  }, type === "pivotTable" && /*#__PURE__*/React.createElement(PivotTableRenderer, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, type === "pivotTable" && /*#__PURE__*/React.createElement(PivotTableRenderer, {
     options: config === null || config === void 0 ? void 0 : config.pivotTable
   }), type === "chart" && /*#__PURE__*/React.createElement(ChartRenderer, {
-    height: height,
     options: config === null || config === void 0 ? void 0 : config.chart
   }), type === "map" && /*#__PURE__*/React.createElement(MapRenderer, {
     options: config === null || config === void 0 ? void 0 : config.map

package/build/es/components/Visualization/index.js

@@ -72,7 +72,6 @@ export function Visualization(_ref2) {
       flexDirection: "column",
       width: "100%",
       height: "100%",
-      padding: 16,
       gap: 16
     }
   }, showToolbar && /*#__PURE__*/React.createElement("div", {
@@ -82,16 +81,7 @@ export function Visualization(_ref2) {
       gap: 16,
       justifyContent: "space-between"
     }
-  }, /*#__PURE__*/React.createElement(VisualizationTypeSelector, null), /*#__PURE__*/React.createElement(VisualizationDimensionSelector, null)), /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center",
-      height: height !== null && height !== void 0 ? height : 500
-    }
-  }, /*#__PURE__*/React.createElement(VisualizationSelector, {
-    height: height !== null && height !== void 0 ? height : 500,
+  }, /*#__PURE__*/React.createElement(VisualizationTypeSelector, null), /*#__PURE__*/React.createElement(VisualizationDimensionSelector, null)), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VisualizationSelector, {
     config: config
   })))));
 }

package/build/types/components/Visualization/components/VisualizationSelector/index.d.ts

@@ -8,18 +8,16 @@ import { OrgUnitSelection } from "@hisptz/dhis2-utils";
 import { PivotTableLayoutProps } from "../../../CustomPivotTable/components/Table";
 export interface VisualizationSelectorProps {
     config: VisualizationConfig;
-    height: number;
 }
 export declare function getDimensionLabel(dimension: Dimension): any;
 export declare function getOrgUnitSelectionFromIds(ous: string[]): OrgUnitSelection;
 export declare function PivotTableRenderer({ options }: {
     options: CustomPivotTableOptions & PivotTableLayoutProps;
 }): JSX.Element | null;
-export declare function ChartRenderer({ options, height }: {
+export declare function ChartRenderer({ options }: {
     options: ChartConfig;
-    height: number;
 }): JSX.Element | null;
 export declare function MapRenderer({ options }: {
     options: Omit<MapProps, "orgUnitSelection" | "periodSelection">;
 }): JSX.Element;
-export declare function VisualizationSelector({ config, height }: VisualizationSelectorProps): JSX.Element | null;
+export declare function VisualizationSelector({ config }: VisualizationSelectorProps): JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hisptz/dhis2-analytics",
-  "version": "1.0.45",
+  "version": "1.0.47",
   "description": "A collection of reusable react components for visualizing analytics data from DHIS2",
   "license": "BSD-3-Clause",
   "scripts": {
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@dhis2/app-runtime": "^3.7.0",
-    "@hisptz/dhis2-ui": "^1.0.45",
+    "@hisptz/dhis2-ui": "^1.0.47",
     "@hisptz/dhis2-utils": "*",
     "@react-leaflet/core": "^2.1.0",
     "async-es": "^3.2.4",
@@ -87,5 +87,5 @@
     "react-hook-form": "^7.43",
     "recoil": "*"
   },
-  "gitHead": "ce705d2695763a9edc930f3fd1b444130661f51e"
+  "gitHead": "d5879f1190205b3af60b50ed97d2689f9228e1b1"
 }