@hisptz/dhis2-analytics 1.0.4 → 1.0.6

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

@@ -0,0 +1,38 @@
+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); }
+import i18n from "@dhis2/d2-i18n";
+import { Button, ButtonStrip, Modal, ModalActions, ModalContent, ModalTitle } from "@dhis2/ui";
+import React, { useCallback, useState } from "react";
+import { DataSourceSelector } from "@hisptz/dhis2-ui";
+export default function IndicatorSelectorModal(_ref) {
+  let {
+    onUpdate,
+    onClose,
+    hide,
+    selected,
+    disabled,
+    ...props
+  } = _ref;
+  const [selectedIndicators, setSelectedIndicators] = useState(selected);
+  const onUpdateClick = useCallback(() => {
+    onUpdate(selectedIndicators);
+    onClose();
+  }, [onUpdate, selectedIndicators]);
+  const onSelect = useCallback(indicators => {
+    setSelectedIndicators(indicators);
+  }, []);
+  return /*#__PURE__*/React.createElement(Modal, {
+    placement: "middle",
+    hide: hide,
+    onClose: onClose
+  }, /*#__PURE__*/React.createElement(ModalTitle, null, i18n.t("Select Data Item")), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(DataSourceSelector, _extends({}, props, {
+    disabled: disabled,
+    maxSelections: 1,
+    selected: selectedIndicators,
+    onSelect: onSelect
+  }))), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(ButtonStrip, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: onClose
+  }, i18n.t("Cancel")), /*#__PURE__*/React.createElement(Button, {
+    primary: true,
+    onClick: onUpdateClick
+  }, i18n.t("Update")))));
+}

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

@@ -0,0 +1,70 @@
+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); }
+import { useDataQuery } from "@dhis2/app-runtime";
+import React, { useMemo } from "react";
+import { SingleSelectField, SingleSelectOption } from "@dhis2/ui";
+import i18n from "@dhis2/d2-i18n";
+import { isEmpty } from "lodash";
+const legendSetQuery = {
+  legendSets: {
+    resource: "legendSets",
+    params: {
+      fields: ["displayName", "id"]
+    }
+  }
+};
+export function LegendSetSelector(_ref) {
+  let {
+    selected,
+    onChange,
+    error,
+    required,
+    ...props
+  } = _ref;
+  const {
+    loading,
+    data
+  } = useDataQuery(legendSetQuery);
+  const options = 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.createElement(SingleSelectField, _extends({
+    required: required,
+    error: Boolean(error),
+    validationText: error === null || error === void 0 ? void 0 : error.message
+  }, props, {
+    label: i18n.t("Legend set"),
+    filterable: true,
+    selected: !isEmpty(options) ? selected : undefined,
+    loadingText: i18n.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.createElement(SingleSelectOption, {
+      key: `${label}-legend-option`,
+      label: label,
+      value: value
+    });
+  }));
+}

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

@@ -0,0 +1,254 @@
+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); }
+import i18n from "@dhis2/d2-i18n";
+import { Button, ButtonStrip, Field, InputField, Modal, ModalActions, ModalContent, ModalTitle, Radio, SingleSelectField, SingleSelectOption } from "@dhis2/ui";
+import { Controller, FormProvider, useForm, useFormContext, useWatch } from "react-hook-form";
+import React, { useMemo, useState } from "react";
+import { compact } from "lodash";
+import { defaultClasses, defaultColorScaleName } from "../../utils/colors";
+import IndicatorSelectorModal from "./components/IndicatorSelectorModal";
+import { LegendSetSelector } from "./components/LegendSetSelector";
+import { CustomLegend } from "./components/CustomLegend";
+export function RadiusField() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "row gap-8"
+  }, /*#__PURE__*/React.createElement(Controller, {
+    render: _ref => {
+      var _fieldState$error, _field$value;
+      let {
+        field,
+        fieldState
+      } = _ref;
+      return /*#__PURE__*/React.createElement(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: i18n.t("Min"),
+        type: "number"
+      }));
+    },
+    name: "radius.min"
+  }), /*#__PURE__*/React.createElement(Controller, {
+    render: _ref3 => {
+      var _field$value2;
+      let {
+        field,
+        fieldState
+      } = _ref3;
+      return /*#__PURE__*/React.createElement(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: i18n.t("Max"),
+        type: "number"
+      });
+    },
+    name: "radius.max"
+  }));
+}
+function TypeField() {
+  const {
+    setValue
+  } = useFormContext();
+  const resetFields = type => {
+    if (type === "bubble") {
+      setValue(`radius`, {
+        min: 5,
+        max: 30
+      });
+    } else {
+      setValue(`radius`, undefined);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Controller, {
+    rules: {
+      required: i18n.t("Layer type is required")
+    },
+    render: _ref5 => {
+      var _fieldState$error2;
+      let {
+        field,
+        fieldState
+      } = _ref5;
+      return /*#__PURE__*/React.createElement(SingleSelectField, {
+        label: i18n.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.createElement(SingleSelectOption, {
+        value: "choropleth",
+        label: i18n.t("Choropleth")
+      }), /*#__PURE__*/React.createElement(SingleSelectOption, {
+        value: "bubble",
+        label: i18n.t("Bubble")
+      }));
+    },
+    name: "type"
+  });
+}
+export function ThematicLayerConfiguration(_ref7) {
+  let {
+    exclude,
+    form
+  } = _ref7;
+  const [type, legendSet, dataItemId] = useWatch({
+    control: form.control,
+    name: ["type", "dataItem.legendSet", "dataItem.id"]
+  });
+  const [legendType, setLegendType] = useState(legendSet ? "legendSet" : "custom");
+  const [dataSelectorOpen, setDataSelectorOpen] = useState(false);
+  const onLegendTypeChange = type => _ref8 => {
+    let {
+      value
+    } = _ref8;
+    if (type === "custom") {
+      form.setValue("dataItem.legendSet", undefined);
+      form.setValue("dataItem.legendConfig.scale", defaultClasses);
+      form.setValue("dataItem.legendConfig.colorClass", defaultColorScaleName);
+    } else {
+      form.setValue("dataItem.legendConfig", undefined);
+    }
+    setLegendType(value);
+  };
+  const disabled = 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.createElement(FormProvider, form, /*#__PURE__*/React.createElement("div", {
+    className: "column gap-16"
+  }, /*#__PURE__*/React.createElement(TypeField, null), /*#__PURE__*/React.createElement(Controller, {
+    rules: {
+      validate: {
+        required: value => {
+          return Boolean(value === null || value === void 0 ? void 0 : value.id) || i18n.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        style: {
+          alignItems: "flex-end"
+        },
+        className: "row w-100 gap-16 align-end"
+      }, /*#__PURE__*/React.createElement("div", {
+        onClick: () => setDataSelectorOpen(true),
+        style: {
+          flex: 1
+        }
+      }, /*#__PURE__*/React.createElement(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: i18n.t("Data Item"),
+        value: (_field$value3 = field.value) === null || _field$value3 === void 0 ? void 0 : _field$value3.displayName
+      })), /*#__PURE__*/React.createElement(Button, {
+        onClick: () => setDataSelectorOpen(true)
+      }, (_field$value4 = field.value) !== null && _field$value4 !== void 0 && _field$value4.id ? i18n.t("Change") : i18n.t("Select"))), dataSelectorOpen && /*#__PURE__*/React.createElement(IndicatorSelectorModal, {
+        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: 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.createElement("div", null, /*#__PURE__*/React.createElement(Field, {
+    label: i18n.t("Legend")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "column gap-8"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "row gap-16"
+  }, /*#__PURE__*/React.createElement(Radio, {
+    checked: legendType === "legendSet",
+    label: i18n.t("Legend set"),
+    name: "legendSet",
+    value: "legendSet",
+    onChange: onLegendTypeChange("legendSet")
+  }), /*#__PURE__*/React.createElement(Radio, {
+    checked: legendType === "custom",
+    label: i18n.t("Custom legend"),
+    name: "custom",
+    value: "custom",
+    onChange: onLegendTypeChange("custom")
+  })), /*#__PURE__*/React.createElement("div", null, legendType === "legendSet" && /*#__PURE__*/React.createElement(Controller, {
+    rules: {
+      required: i18n.t("Legend set is required")
+    },
+    name: "dataItem.legendSet",
+    render: _ref10 => {
+      let {
+        field,
+        fieldState
+      } = _ref10;
+      return /*#__PURE__*/React.createElement(LegendSetSelector, _extends({
+        required: true,
+        selected: field.value
+      }, field, fieldState));
+    }
+  }), legendType === "custom" && /*#__PURE__*/React.createElement(CustomLegend, null)))), type === "bubble" && /*#__PURE__*/React.createElement(Field, {
+    label: i18n.t("Radius")
+  }, /*#__PURE__*/React.createElement(RadiusField, null)))));
+}
+export function ThematicLayerConfigModal(_ref11) {
+  let {
+    open,
+    exclude,
+    config,
+    onClose,
+    onChange,
+    ...props
+  } = _ref11;
+  const form = useForm({
+    defaultValues: config
+  });
+  const onSubmitClick = values => {
+    onChange(values);
+    onClose();
+  };
+  return /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
+    open: open,
+    onClose: onClose
+  }), /*#__PURE__*/React.createElement(ModalTitle, null, i18n.t("Configure Thematic Layer")), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(ThematicLayerConfiguration, {
+    form: form,
+    exclude: exclude
+  })), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(ButtonStrip, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: onClose
+  }, i18n.t("Cancel")), /*#__PURE__*/React.createElement(Button, {
+    primary: true,
+    onClick: form.handleSubmit(onSubmitClick)
+  }, i18n.t("Save")))));
+}