@hisptz/dhis2-analytics 1.0.5 → 1.0.6

package/build/cjs/components/Map/components/ThematicLayerConfiguration/components/CustomLegend/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomLegend = CustomLegend;
+var _reactHookForm = require("react-hook-form");
+var _ui = require("@dhis2/ui");
+var _colors = require("../../../../utils/colors");
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+var _ColorScaleSelect = _interopRequireDefault(require("../ColorScaleSelect"));
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function CustomLegend() {
+  const scale = (0, _reactHookForm.useWatch)({
+    name: "dataItem.legendConfig.scale"
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "row gap-16 space-between"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: "30%"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+    name: "dataItem.legendConfig.scale",
+    render: _ref => {
+      var _fieldState$error, _field$value$toString, _field$value;
+      let {
+        field,
+        fieldState
+      } = _ref;
+      return /*#__PURE__*/_react.default.createElement(_ui.SingleSelectField, {
+        validationText: (_fieldState$error = fieldState.error) === null || _fieldState$error === void 0 ? void 0 : _fieldState$error.message,
+        error: Boolean(fieldState.error),
+        selected: (_field$value$toString = (_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value.toString()) !== null && _field$value$toString !== void 0 ? _field$value$toString : _colors.defaultClasses.toString(),
+        label: _d2I18n.default.t("Classes"),
+        onChange: _ref2 => {
+          let {
+            selected
+          } = _ref2;
+          return field.onChange(parseInt(selected));
+        },
+        name: "scale"
+      }, [3, 4, 5, 6, 7, 8, 9].map(value => /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
+        key: `${value}-classes-option`,
+        label: `${value}`,
+        value: value === null || value === void 0 ? void 0 : value.toString()
+      })));
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: "70%"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+    name: "dataItem.legendConfig.colorClass",
+    render: _ref3 => {
+      var _field$value2;
+      let {
+        field
+      } = _ref3;
+      return /*#__PURE__*/_react.default.createElement(_ui.Field, {
+        label: _d2I18n.default.t("Colors")
+      }, /*#__PURE__*/_react.default.createElement(_ColorScaleSelect.default, {
+        count: scale !== null && scale !== void 0 ? scale : _colors.defaultClasses,
+        colorClass: (_field$value2 = field.value) !== null && _field$value2 !== void 0 ? _field$value2 : _colors.defaultColorScaleName,
+        width: 300,
+        onChange: field.onChange
+      }));
+    }
+  })));
+}

package/build/cjs/components/Map/components/ThematicLayerConfiguration/components/IndicatorSelectorModal/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = IndicatorSelectorModal;
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+var _ui = require("@dhis2/ui");
+var _react = _interopRequireWildcard(require("react"));
+var _dhis2Ui = require("@hisptz/dhis2-ui");
+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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+function IndicatorSelectorModal(_ref) {
+  let {
+    onUpdate,
+    onClose,
+    hide,
+    selected,
+    disabled,
+    ...props
+  } = _ref;
+  const [selectedIndicators, setSelectedIndicators] = (0, _react.useState)(selected);
+  const onUpdateClick = (0, _react.useCallback)(() => {
+    onUpdate(selectedIndicators);
+    onClose();
+  }, [onUpdate, selectedIndicators]);
+  const onSelect = (0, _react.useCallback)(indicators => {
+    setSelectedIndicators(indicators);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_ui.Modal, {
+    placement: "middle",
+    hide: hide,
+    onClose: onClose
+  }, /*#__PURE__*/_react.default.createElement(_ui.ModalTitle, null, _d2I18n.default.t("Select Data Item")), /*#__PURE__*/_react.default.createElement(_ui.ModalContent, null, /*#__PURE__*/_react.default.createElement(_dhis2Ui.DataSourceSelector, _extends({}, props, {
+    disabled: disabled,
+    maxSelections: 1,
+    selected: selectedIndicators,
+    onSelect: onSelect
+  }))), /*#__PURE__*/_react.default.createElement(_ui.ModalActions, null, /*#__PURE__*/_react.default.createElement(_ui.ButtonStrip, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    onClick: onClose
+  }, _d2I18n.default.t("Cancel")), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    primary: true,
+    onClick: onUpdateClick
+  }, _d2I18n.default.t("Update")))));
+}

package/build/cjs/components/Map/components/ThematicLayerConfiguration/components/LegendSetSelector/index.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LegendSetSelector = LegendSetSelector;
+var _appRuntime = require("@dhis2/app-runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _ui = require("@dhis2/ui");
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+var _lodash = require("lodash");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
+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); }
+const legendSetQuery = {
+  legendSets: {
+    resource: "legendSets",
+    params: {
+      fields: ["displayName", "id"]
+    }
+  }
+};
+function LegendSetSelector(_ref) {
+  let {
+    selected,
+    onChange,
+    error,
+    required,
+    ...props
+  } = _ref;
+  const {
+    loading,
+    data
+  } = (0, _appRuntime.useDataQuery)(legendSetQuery);
+  const options = (0, _react.useMemo)(() => {
+    if (data) {
+      var _data$legendSets, _data$legendSets$lege;
+      return data === null || data === void 0 ? void 0 : (_data$legendSets = data.legendSets) === null || _data$legendSets === void 0 ? void 0 : (_data$legendSets$lege = _data$legendSets.legendSets) === null || _data$legendSets$lege === void 0 ? void 0 : _data$legendSets$lege.map(_ref2 => {
+        let {
+          displayName,
+          id
+        } = _ref2;
+        return {
+          label: displayName,
+          value: id
+        };
+      });
+    }
+    return [];
+  }, [data]);
+  return /*#__PURE__*/_react.default.createElement(_ui.SingleSelectField, _extends({
+    required: required,
+    error: Boolean(error),
+    validationText: error === null || error === void 0 ? void 0 : error.message
+  }, props, {
+    label: _d2I18n.default.t("Legend set"),
+    filterable: true,
+    selected: !(0, _lodash.isEmpty)(options) ? selected : undefined,
+    loadingText: _d2I18n.default.t("Please wait..."),
+    onChange: _ref3 => {
+      let {
+        selected
+      } = _ref3;
+      return onChange(selected);
+    },
+    loading: loading
+  }), options === null || options === void 0 ? void 0 : options.map(_ref4 => {
+    let {
+      label,
+      value
+    } = _ref4;
+    return /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
+      key: `${label}-legend-option`,
+      label: label,
+      value: value
+    });
+  }));
+}

package/build/cjs/components/Map/components/ThematicLayerConfiguration/index.js

@@ -0,0 +1,265 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadiusField = RadiusField;
+exports.ThematicLayerConfigModal = ThematicLayerConfigModal;
+exports.ThematicLayerConfiguration = ThematicLayerConfiguration;
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+var _ui = require("@dhis2/ui");
+var _reactHookForm = require("react-hook-form");
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = require("lodash");
+var _colors = require("../../utils/colors");
+var _IndicatorSelectorModal = _interopRequireDefault(require("./components/IndicatorSelectorModal"));
+var _LegendSetSelector = require("./components/LegendSetSelector");
+var _CustomLegend = require("./components/CustomLegend");
+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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+function RadiusField() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "row gap-8"
+  }, /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+    render: _ref => {
+      var _fieldState$error, _field$value;
+      let {
+        field,
+        fieldState
+      } = _ref;
+      return /*#__PURE__*/_react.default.createElement(_ui.InputField, _extends({}, field, {
+        error: Boolean(fieldState.error),
+        validationText: (_fieldState$error = fieldState.error) === null || _fieldState$error === void 0 ? void 0 : _fieldState$error.message,
+        value: (_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value.toString(),
+        onChange: _ref2 => {
+          let {
+            value
+          } = _ref2;
+          return field.onChange(parseInt(value));
+        },
+        label: _d2I18n.default.t("Min"),
+        type: "number"
+      }));
+    },
+    name: "radius.min"
+  }), /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+    render: _ref3 => {
+      var _field$value2;
+      let {
+        field,
+        fieldState
+      } = _ref3;
+      return /*#__PURE__*/_react.default.createElement(_ui.InputField, {
+        value: (_field$value2 = field.value) === null || _field$value2 === void 0 ? void 0 : _field$value2.toString(),
+        onChange: _ref4 => {
+          let {
+            value
+          } = _ref4;
+          return field.onChange(parseInt(value));
+        },
+        label: _d2I18n.default.t("Max"),
+        type: "number"
+      });
+    },
+    name: "radius.max"
+  }));
+}
+function TypeField() {
+  const {
+    setValue
+  } = (0, _reactHookForm.useFormContext)();
+  const resetFields = type => {
+    if (type === "bubble") {
+      setValue(`radius`, {
+        min: 5,
+        max: 30
+      });
+    } else {
+      setValue(`radius`, undefined);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+    rules: {
+      required: _d2I18n.default.t("Layer type is required")
+    },
+    render: _ref5 => {
+      var _fieldState$error2;
+      let {
+        field,
+        fieldState
+      } = _ref5;
+      return /*#__PURE__*/_react.default.createElement(_ui.SingleSelectField, {
+        label: _d2I18n.default.t("Layer type"),
+        required: true,
+        error: Boolean(fieldState.error),
+        validationText: (_fieldState$error2 = fieldState.error) === null || _fieldState$error2 === void 0 ? void 0 : _fieldState$error2.message,
+        onChange: _ref6 => {
+          let {
+            selected
+          } = _ref6;
+          resetFields(selected);
+          field.onChange(selected);
+        },
+        selected: field.value
+      }, /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
+        value: "choropleth",
+        label: _d2I18n.default.t("Choropleth")
+      }), /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
+        value: "bubble",
+        label: _d2I18n.default.t("Bubble")
+      }));
+    },
+    name: "type"
+  });
+}
+function ThematicLayerConfiguration(_ref7) {
+  let {
+    exclude,
+    form
+  } = _ref7;
+  const [type, legendSet, dataItemId] = (0, _reactHookForm.useWatch)({
+    control: form.control,
+    name: ["type", "dataItem.legendSet", "dataItem.id"]
+  });
+  const [legendType, setLegendType] = (0, _react.useState)(legendSet ? "legendSet" : "custom");
+  const [dataSelectorOpen, setDataSelectorOpen] = (0, _react.useState)(false);
+  const onLegendTypeChange = type => _ref8 => {
+    let {
+      value
+    } = _ref8;
+    if (type === "custom") {
+      form.setValue("dataItem.legendSet", undefined);
+      form.setValue("dataItem.legendConfig.scale", _colors.defaultClasses);
+      form.setValue("dataItem.legendConfig.colorClass", _colors.defaultColorScaleName);
+    } else {
+      form.setValue("dataItem.legendConfig", undefined);
+    }
+    setLegendType(value);
+  };
+  const disabled = (0, _react.useMemo)(() => {
+    var _exclude$filter;
+    return (_exclude$filter = exclude === null || exclude === void 0 ? void 0 : exclude.filter(indicator => indicator !== dataItemId)) !== null && _exclude$filter !== void 0 ? _exclude$filter : [];
+  }, [dataItemId, exclude]);
+  return /*#__PURE__*/_react.default.createElement(_reactHookForm.FormProvider, form, /*#__PURE__*/_react.default.createElement("div", {
+    className: "column gap-16"
+  }, /*#__PURE__*/_react.default.createElement(TypeField, null), /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+    rules: {
+      validate: {
+        required: value => {
+          return Boolean(value === null || value === void 0 ? void 0 : value.id) || _d2I18n.default.t("A data item is required");
+        }
+      }
+    },
+    render: _ref9 => {
+      var _fieldState$error3, _field$value3, _field$value4, _field$value5, _field$value6;
+      let {
+        field,
+        fieldState
+      } = _ref9;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          alignItems: "flex-end"
+        },
+        className: "row w-100 gap-16 align-end"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        onClick: () => setDataSelectorOpen(true),
+        style: {
+          flex: 1
+        }
+      }, /*#__PURE__*/_react.default.createElement(_ui.InputField, {
+        required: true,
+        error: Boolean(fieldState.error),
+        validationText: (_fieldState$error3 = fieldState.error) === null || _fieldState$error3 === void 0 ? void 0 : _fieldState$error3.message,
+        disabled: true,
+        inputWidth: "100%",
+        label: _d2I18n.default.t("Data Item"),
+        value: (_field$value3 = field.value) === null || _field$value3 === void 0 ? void 0 : _field$value3.displayName
+      })), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+        onClick: () => setDataSelectorOpen(true)
+      }, (_field$value4 = field.value) !== null && _field$value4 !== void 0 && _field$value4.id ? _d2I18n.default.t("Change") : _d2I18n.default.t("Select"))), dataSelectorOpen && /*#__PURE__*/_react.default.createElement(_IndicatorSelectorModal.default, {
+        disabled: disabled,
+        onUpdate: values => {
+          const [indicator] = values !== null && values !== void 0 ? values : [];
+          field.onChange({
+            id: indicator.id,
+            displayName: indicator.displayName,
+            type: "indicator"
+          });
+        },
+        onClose: () => setDataSelectorOpen(false),
+        hide: !dataSelectorOpen,
+        selected: (0, _lodash.compact)([{
+          id: (_field$value5 = field.value) === null || _field$value5 === void 0 ? void 0 : _field$value5.id,
+          displayName: (_field$value6 = field.value) === null || _field$value6 === void 0 ? void 0 : _field$value6.displayName
+        }])
+      }));
+    },
+    name: "dataItem"
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ui.Field, {
+    label: _d2I18n.default.t("Legend")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "column gap-8"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row gap-16"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Radio, {
+    checked: legendType === "legendSet",
+    label: _d2I18n.default.t("Legend set"),
+    name: "legendSet",
+    value: "legendSet",
+    onChange: onLegendTypeChange("legendSet")
+  }), /*#__PURE__*/_react.default.createElement(_ui.Radio, {
+    checked: legendType === "custom",
+    label: _d2I18n.default.t("Custom legend"),
+    name: "custom",
+    value: "custom",
+    onChange: onLegendTypeChange("custom")
+  })), /*#__PURE__*/_react.default.createElement("div", null, legendType === "legendSet" && /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+    rules: {
+      required: _d2I18n.default.t("Legend set is required")
+    },
+    name: "dataItem.legendSet",
+    render: _ref10 => {
+      let {
+        field,
+        fieldState
+      } = _ref10;
+      return /*#__PURE__*/_react.default.createElement(_LegendSetSelector.LegendSetSelector, _extends({
+        required: true,
+        selected: field.value
+      }, field, fieldState));
+    }
+  }), legendType === "custom" && /*#__PURE__*/_react.default.createElement(_CustomLegend.CustomLegend, null)))), type === "bubble" && /*#__PURE__*/_react.default.createElement(_ui.Field, {
+    label: _d2I18n.default.t("Radius")
+  }, /*#__PURE__*/_react.default.createElement(RadiusField, null)))));
+}
+function ThematicLayerConfigModal(_ref11) {
+  let {
+    open,
+    exclude,
+    config,
+    onClose,
+    onChange,
+    ...props
+  } = _ref11;
+  const form = (0, _reactHookForm.useForm)({
+    defaultValues: config
+  });
+  const onSubmitClick = values => {
+    onChange(values);
+    onClose();
+  };
+  return /*#__PURE__*/_react.default.createElement(_ui.Modal, _extends({}, props, {
+    open: open,
+    onClose: onClose
+  }), /*#__PURE__*/_react.default.createElement(_ui.ModalTitle, null, _d2I18n.default.t("Configure Thematic Layer")), /*#__PURE__*/_react.default.createElement(_ui.ModalContent, null, /*#__PURE__*/_react.default.createElement(ThematicLayerConfiguration, {
+    form: form,
+    exclude: exclude
+  })), /*#__PURE__*/_react.default.createElement(_ui.ModalActions, null, /*#__PURE__*/_react.default.createElement(_ui.ButtonStrip, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    onClick: onClose
+  }, _d2I18n.default.t("Cancel")), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    primary: true,
+    onClick: form.handleSubmit(onSubmitClick)
+  }, _d2I18n.default.t("Save")))));
+}