@hisptz/dhis2-analytics 1.0.66 → 2.0.0-alpha.1

package/dist/components/Map/components/MapProvider/index.js

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useDataQuery } from '@dhis2/app-runtime';
+import i18n from '@dhis2/d2-i18n';
+import { Center, CircularLoader } from '@dhis2/ui';
+import { compact, isEmpty } from 'lodash';
+import { useState, useEffect } from 'react';
+import { MapOrgUnitContext, MapPeriodContext } from '../../state/index.js';
+import { getOrgUnitsSelection, sanitizeOrgUnits, toGeoJson } from '../../utils/map.js';
+import { PeriodUtility } from '@hisptz/dhis2-utils';
+
+const boundaryQuery = {
+  boundaries: {
+    resource: "geoFeatures",
+    params: ({ orgUnitIds }) => ({
+      ou: `ou:${orgUnitIds?.join(";")}`
+    })
+  },
+  analytics: {
+    resource: "analytics",
+    params: ({ orgUnitIds }) => ({
+      dimension: [
+        `ou:${orgUnitIds.join(";")}`,
+        `pe:${(/* @__PURE__ */ new Date()).getFullYear()}`
+      ],
+      skipData: true,
+      hierarchyMeta: true
+    })
+  }
+};
+function MapProvider({
+  children,
+  orgUnitSelection,
+  periodSelection
+}) {
+  const [orgUnits, setOrgUnits] = useState([]);
+  const { refetch, loading, error } = useDataQuery(boundaryQuery, {
+    lazy: true
+  });
+  useEffect(() => {
+    async function getOrgUnits() {
+      const rawOrgUnitIds = getOrgUnitsSelection(orgUnitSelection);
+      const data = await refetch({ orgUnitIds: rawOrgUnitIds });
+      const { analytics, boundaries } = data ?? {};
+      const rawOrgUnits = sanitizeOrgUnits(analytics?.metaData);
+      const geoJSONObjects = toGeoJson(
+        boundaries.filter((bound) => bound.co)
+      );
+      const orgUnits2 = compact(
+        rawOrgUnits.map((orgUnit) => {
+          const geoJSONObject = geoJSONObjects?.find(
+            (geoJSON) => geoJSON.properties.id === orgUnit.id
+          );
+          if (!geoJSONObject) {
+            return;
+          }
+          return {
+            ...orgUnit,
+            geoJSON: geoJSONObject,
+            bounds: [],
+            level: geoJSONObject.properties.level
+          };
+        })
+      );
+      setOrgUnits(orgUnits2);
+    }
+    getOrgUnits().catch((error2) => console.log(error2));
+  }, [orgUnitSelection, refetch]);
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { style: { height: "100%", width: "100%" }, children: /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(CircularLoader, { small: true }) }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { style: { height: "100%", width: "100%" }, children: /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsxs("h4", { children: [
+      i18n.t("Error"),
+      ": ",
+      error.message
+    ] }) }) });
+  }
+  const periods = compact(
+    periodSelection?.periods?.map((pe) => PeriodUtility.getPeriodById(pe))
+  );
+  if (!isEmpty(orgUnits)) {
+    return /* @__PURE__ */ jsx(MapOrgUnitContext.Provider, { value: { orgUnitSelection, orgUnits }, children: /* @__PURE__ */ jsx(
+      MapPeriodContext.Provider,
+      {
+        value: { ...periodSelection, periods },
+        children
+      }
+    ) });
+  }
+  return null;
+}
+
+export { MapProvider };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/Map/components/MapProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Map/components/MapProvider/index.tsx"],"names":["orgUnits","error"],"mappings":"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","sourcesContent":["import { useDataQuery } from \"@dhis2/app-runtime\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { Center, CircularLoader } from \"@dhis2/ui\";\nimport { compact, isEmpty } from \"lodash\";\nimport React, { useEffect, useState } from \"react\";\nimport { MapOrgUnit, MapProviderProps } from \"../../interfaces/index.js\";\nimport { MapOrgUnitContext, MapPeriodContext } from \"../../state/index.js\";\nimport {\n\tgetOrgUnitsSelection,\n\tsanitizeOrgUnits,\n\ttoGeoJson,\n} from \"../../utils/map.js\";\nimport { BasePeriod, PeriodUtility } from \"@hisptz/dhis2-utils\";\n\nconst boundaryQuery = {\n\tboundaries: {\n\t\tresource: \"geoFeatures\",\n\t\tparams: ({ orgUnitIds }: any) => ({\n\t\t\tou: `ou:${orgUnitIds?.join(\";\")}`,\n\t\t}),\n\t},\n\tanalytics: {\n\t\tresource: \"analytics\",\n\t\tparams: ({ orgUnitIds }: any) => ({\n\t\t\tdimension: [\n\t\t\t\t`ou:${orgUnitIds.join(\";\")}`,\n\t\t\t\t`pe:${new Date().getFullYear()}`,\n\t\t\t],\n\t\t\tskipData: true,\n\t\t\thierarchyMeta: true,\n\t\t}),\n\t},\n};\n\nexport function MapProvider({\n\tchildren,\n\torgUnitSelection,\n\tperiodSelection,\n}: MapProviderProps) {\n\tconst [orgUnits, setOrgUnits] = useState<MapOrgUnit[]>([]);\n\tconst { refetch, loading, error } = useDataQuery(boundaryQuery, {\n\t\tlazy: true,\n\t});\n\n\tuseEffect(() => {\n\t\tasync function getOrgUnits() {\n\t\t\tconst rawOrgUnitIds = getOrgUnitsSelection(orgUnitSelection);\n\t\t\tconst data = await refetch({ orgUnitIds: rawOrgUnitIds });\n\t\t\tconst { analytics, boundaries } = (data as any) ?? {};\n\t\t\tconst rawOrgUnits = sanitizeOrgUnits(analytics?.metaData);\n\t\t\tconst geoJSONObjects = toGeoJson(\n\t\t\t\tboundaries.filter((bound: any) => bound.co),\n\t\t\t);\n\t\t\tconst orgUnits: MapOrgUnit[] = compact(\n\t\t\t\trawOrgUnits.map((orgUnit: any) => {\n\t\t\t\t\tconst geoJSONObject: any = geoJSONObjects?.find(\n\t\t\t\t\t\t(geoJSON: any) => geoJSON.properties.id === orgUnit.id,\n\t\t\t\t\t);\n\n\t\t\t\t\tif (!geoJSONObject) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...orgUnit,\n\t\t\t\t\t\tgeoJSON: geoJSONObject,\n\t\t\t\t\t\tbounds: [],\n\t\t\t\t\t\tlevel: geoJSONObject.properties.level,\n\t\t\t\t\t};\n\t\t\t\t}),\n\t\t\t);\n\t\t\tsetOrgUnits(orgUnits);\n\t\t}\n\n\t\tgetOrgUnits().catch((error) => console.log(error));\n\t}, [orgUnitSelection, refetch]);\n\n\tif (loading) {\n\t\treturn (\n\t\t\t<div style={{ height: \"100%\", width: \"100%\" }}>\n\t\t\t\t<Center>\n\t\t\t\t\t<CircularLoader small />\n\t\t\t\t</Center>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif (error) {\n\t\treturn (\n\t\t\t<div style={{ height: \"100%\", width: \"100%\" }}>\n\t\t\t\t<Center>\n\t\t\t\t\t<h4>\n\t\t\t\t\t\t{i18n.t(\"Error\")}: {error.message}\n\t\t\t\t\t</h4>\n\t\t\t\t</Center>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst periods: BasePeriod[] = compact(\n\t\tperiodSelection?.periods?.map((pe) => PeriodUtility.getPeriodById(pe)),\n\t);\n\n\tif (!isEmpty(orgUnits)) {\n\t\treturn (\n\t\t\t<MapOrgUnitContext.Provider value={{ orgUnitSelection, orgUnits }}>\n\t\t\t\t<MapPeriodContext.Provider\n\t\t\t\t\tvalue={{ ...periodSelection, periods }}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</MapPeriodContext.Provider>\n\t\t\t</MapOrgUnitContext.Provider>\n\t\t);\n\t}\n\n\treturn null;\n}\n"]}

package/dist/components/Map/components/MapUpdater/index.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { useCenterMap } from '../../hooks/map.js';
+
+function MapUpdater({ bounds }) {
+  const ref = useCenterMap({ bounds });
+  return /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%" }, ref });
+}
+
+export { MapUpdater as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/Map/components/MapUpdater/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Map/components/MapUpdater/index.tsx"],"names":[],"mappings":"AAMQ;AANR,SAAS,oBAAoB;AAId,SAAR,WAA4B,EAAE,OAAO,GAA8B;AACzE,QAAM,MAAM,aAAa,EAAE,OAAO,CAAC;AACnC,SAAO,oBAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAO,GAAG,KAAU;AACjE","sourcesContent":["import { useCenterMap } from \"../../hooks/map.js\";\nimport React from \"react\";\nimport { LatLngTuple } from \"leaflet\";\n\nexport default function MapUpdater({ bounds }: { bounds: LatLngTuple[] }) {\n\tconst ref = useCenterMap({ bounds });\n\treturn <div style={{ width: \"100%\", height: \"100%\" }} ref={ref}></div>;\n}\n"]}

package/dist/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfigModal.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useForm } from 'react-hook-form';
+import { Modal, ModalTitle, ModalContent, ModalActions, ButtonStrip, Button } from '@dhis2/ui';
+import i18n from '@dhis2/d2-i18n';
+import { ThematicLayerConfiguration } from './ThematicLayerConfiguration.js';
+
+function ThematicLayerConfigModal({
+  open,
+  exclude,
+  config,
+  onClose,
+  onChange,
+  ...props
+}) {
+  const form = useForm({
+    defaultValues: config
+  });
+  const onSubmitClick = (values) => {
+    onChange(values);
+    onClose();
+  };
+  return /* @__PURE__ */ jsxs(Modal, { ...props, hide: !open, onClose, children: [
+    /* @__PURE__ */ jsx(ModalTitle, { children: i18n.t("Configure Thematic Layer") }),
+    /* @__PURE__ */ jsx(ModalContent, { children: /* @__PURE__ */ jsx(ThematicLayerConfiguration, { form, exclude }) }),
+    /* @__PURE__ */ jsx(ModalActions, { children: /* @__PURE__ */ jsxs(ButtonStrip, { children: [
+      /* @__PURE__ */ jsx(Button, { onClick: onClose, children: i18n.t("Cancel") }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          primary: true,
+          onClick: () => form.handleSubmit(onSubmitClick)(),
+          children: i18n.t("Save")
+        }
+      )
+    ] }) })
+  ] });
+}
+
+export { ThematicLayerConfigModal };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=ThematicLayerConfigModal.js.map

package/dist/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfigModal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfigModal.tsx"],"names":[],"mappings":"AAkCG,cAKC,YALD;AAjCH,SAAS,eAAe;AAExB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,OAAO,UAAU;AAEjB,SAAS,kCAAkC;AAEpC,SAAS,yBAAyB;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAkC;AACjC,QAAM,OAAO,QAA6B;AAAA,IACzC,eAAe;AAAA,EAChB,CAAC;AAED,QAAM,gBAAgB,CAAC,WAAgC;AACtD,aAAS,MAAM;AACf,YAAQ;AAAA,EACT;AAEA,SACC,qBAAC,SAAO,GAAG,OAAO,MAAM,CAAC,MAAM,SAC9B;AAAA,wBAAC,cAAY,eAAK,EAAE,0BAA0B,GAAE;AAAA,IAChD,oBAAC,gBACA,8BAAC,8BAA2B,MAAY,SAAkB,GAC3D;AAAA,IACA,oBAAC,gBACA,+BAAC,eACA;AAAA,0BAAC,UAAO,SAAS,SAAU,eAAK,EAAE,QAAQ,GAAE;AAAA,MAC5C;AAAA,QAAC;AAAA;AAAA,UACA,SAAO;AAAA,UACP,SAAS,MAAM,KAAK,aAAa,aAAa,EAAE;AAAA,UAE/C,eAAK,EAAE,MAAM;AAAA;AAAA,MACf;AAAA,OACD,GACD;AAAA,KACD;AAEF","sourcesContent":["import { ThematicLayerConfigModalProps } from \"./types\";\nimport { useForm } from \"react-hook-form\";\nimport { ThematicLayerConfig } from \"../MapLayer/interfaces/index.js\";\nimport {\n\tButton,\n\tButtonStrip,\n\tModal,\n\tModalActions,\n\tModalContent,\n\tModalTitle,\n} from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport React from \"react\";\nimport { ThematicLayerConfiguration } from \"./ThematicLayerConfiguration.js\";\n\nexport function ThematicLayerConfigModal({\n\topen,\n\texclude,\n\tconfig,\n\tonClose,\n\tonChange,\n\t...props\n}: ThematicLayerConfigModalProps) {\n\tconst form = useForm<ThematicLayerConfig>({\n\t\tdefaultValues: config,\n\t});\n\n\tconst onSubmitClick = (values: ThematicLayerConfig) => {\n\t\tonChange(values);\n\t\tonClose();\n\t};\n\n\treturn (\n\t\t<Modal {...props} hide={!open} onClose={onClose}>\n\t\t\t<ModalTitle>{i18n.t(\"Configure Thematic Layer\")}</ModalTitle>\n\t\t\t<ModalContent>\n\t\t\t\t<ThematicLayerConfiguration form={form} exclude={exclude} />\n\t\t\t</ModalContent>\n\t\t\t<ModalActions>\n\t\t\t\t<ButtonStrip>\n\t\t\t\t\t<Button onClick={onClose}>{i18n.t(\"Cancel\")}</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tprimary\n\t\t\t\t\t\tonClick={() => form.handleSubmit(onSubmitClick)()}\n\t\t\t\t\t>\n\t\t\t\t\t\t{i18n.t(\"Save\")}\n\t\t\t\t\t</Button>\n\t\t\t\t</ButtonStrip>\n\t\t\t</ModalActions>\n\t\t</Modal>\n\t);\n}\n"]}

package/dist/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfigModal.stories.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { ThematicLayerConfigModal } from './ThematicLayerConfigModal';
+
+const Default = {};
+Default.args = {
+  onChange: console.info,
+  onClose: () => {
+  },
+  open: true
+};
+const meta = {
+  title: "DHIS2 Map/Thematic Layer Config Modal",
+  component: ThematicLayerConfigModal,
+  decorators: [
+    (MapStory) => {
+      return /* @__PURE__ */ jsx("div", { style: { width: "50%", height: "50%" }, children: /* @__PURE__ */ jsx(MapStory, {}) });
+    }
+  ]
+};
+var ThematicLayerConfigModal_stories_default = meta;
+
+export { Default, ThematicLayerConfigModal_stories_default as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=ThematicLayerConfigModal.stories.js.map

package/dist/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfigModal.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfigModal.stories.tsx"],"names":[],"mappings":"AAmBK;AAlBL,SAAS,gCAAgC;AAIlC,MAAM,UAAiB,CAAC;AAC/B,QAAQ,OAAO;AAAA,EACd,UAAU,QAAQ;AAAA,EAClB,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,MAAM;AACP;AAEA,MAAM,OAA8C;AAAA,EACnD,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACX,CAAC,aAAkB;AAClB,aACC,oBAAC,SAAI,OAAO,EAAE,OAAO,OAAO,QAAQ,MAAM,GACzC,8BAAC,YAAS,GACX;AAAA,IAEF;AAAA,EACD;AACD;AAEA,IAAO,2CAAQ","sourcesContent":["import React from \"react\";\nimport { ThematicLayerConfigModal } from \"./ThematicLayerConfigModal\";\nimport { Meta, StoryObj } from \"@storybook/react\";\n\ntype Story = StoryObj<typeof ThematicLayerConfigModal>;\nexport const Default: Story = {};\nDefault.args = {\n\tonChange: console.info,\n\tonClose: () => {},\n\topen: true,\n};\n\nconst meta: Meta<typeof ThematicLayerConfigModal> = {\n\ttitle: \"DHIS2 Map/Thematic Layer Config Modal\",\n\tcomponent: ThematicLayerConfigModal,\n\tdecorators: [\n\t\t(MapStory: any) => {\n\t\t\treturn (\n\t\t\t\t<div style={{ width: \"50%\", height: \"50%\" }}>\n\t\t\t\t\t<MapStory />\n\t\t\t\t</div>\n\t\t\t);\n\t\t},\n\t],\n};\n\nexport default meta;\n"]}

package/dist/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfiguration.js

@@ -0,0 +1,174 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import i18n from '@dhis2/d2-i18n';
+import { InputField, Button, Field, Radio } from '@dhis2/ui';
+import { useWatch, FormProvider, Controller } from 'react-hook-form';
+import { useState, useMemo } from 'react';
+import { compact } from 'lodash';
+import { defaultClasses, defaultColorScaleName } from '../../utils/colors.js';
+import IndicatorSelectorModal from './components/IndicatorSelectorModal/index.js';
+import { LegendSetSelector } from './components/LegendSetSelector/index.js';
+import { CustomLegend } from './components/CustomLegend/index.js';
+import { RadiusField } from './components/RadiusField.js';
+import { TypeField } from './components/TypeField.js';
+
+function ThematicLayerConfiguration({
+  exclude,
+  form
+}) {
+  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 = (type2) => ({ value }) => {
+    if (type2 === "custom") {
+      form.setValue("dataItem.legendSet", void 0);
+      form.setValue("dataItem.legendConfig.scale", defaultClasses);
+      form.setValue(
+        "dataItem.legendConfig.colorClass",
+        defaultColorScaleName
+      );
+    } else {
+      form.setValue("dataItem.legendConfig", void 0);
+    }
+    if (value) {
+      setLegendType(value);
+    }
+  };
+  const disabled = useMemo(
+    () => exclude?.filter((indicator) => indicator !== dataItemId) ?? [],
+    [dataItemId, exclude]
+  );
+  return /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsxs("div", { className: "column gap-16", children: [
+    /* @__PURE__ */ jsx(TypeField, {}),
+    /* @__PURE__ */ jsx(
+      Controller,
+      {
+        rules: {
+          validate: {
+            required: (value) => {
+              return Boolean(value?.id) || i18n.t("A data item is required");
+            }
+          }
+        },
+        render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: { alignItems: "flex-end" },
+              className: "row w-100 gap-16 align-end",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    onClick: () => setDataSelectorOpen(true),
+                    style: { flex: 1 },
+                    children: /* @__PURE__ */ jsx(
+                      InputField,
+                      {
+                        required: true,
+                        error: Boolean(fieldState.error),
+                        validationText: fieldState.error?.message,
+                        disabled: true,
+                        inputWidth: "100%",
+                        label: i18n.t("Data Item"),
+                        value: field.value?.displayName
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: () => setDataSelectorOpen(true),
+                    children: field.value?.id ? i18n.t("Change") : i18n.t("Select")
+                  }
+                )
+              ]
+            }
+          ),
+          dataSelectorOpen && /* @__PURE__ */ jsx(
+            IndicatorSelectorModal,
+            {
+              disabled,
+              onUpdate: (values) => {
+                const [indicator] = values ?? [];
+                field.onChange({
+                  id: indicator.id,
+                  displayName: indicator.displayName,
+                  type: "indicator"
+                });
+              },
+              onClose: () => setDataSelectorOpen(false),
+              hide: !dataSelectorOpen,
+              selected: compact([
+                {
+                  id: field.value?.id,
+                  displayName: field.value?.displayName
+                }
+              ])
+            }
+          )
+        ] }),
+        name: "dataItem"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Field, { label: i18n.t("Legend"), children: /* @__PURE__ */ jsxs("div", { className: "column gap-8", children: [
+        /* @__PURE__ */ jsxs("div", { className: "row gap-16", children: [
+          /* @__PURE__ */ jsx(
+            Radio,
+            {
+              checked: legendType === "legendSet",
+              label: i18n.t("Legend set"),
+              name: "legendSet",
+              value: "legendSet",
+              onChange: onLegendTypeChange("legendSet")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Radio,
+            {
+              checked: legendType === "custom",
+              label: i18n.t("Custom legend"),
+              name: "custom",
+              value: "custom",
+              onChange: onLegendTypeChange("custom")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          legendType === "legendSet" && /* @__PURE__ */ jsx(
+            Controller,
+            {
+              rules: {
+                required: i18n.t(
+                  "Legend set is required"
+                )
+              },
+              name: "dataItem.legendSet",
+              render: ({ field, fieldState }) => /* @__PURE__ */ jsx(
+                LegendSetSelector,
+                {
+                  required: true,
+                  selected: field.value,
+                  ...field,
+                  ...fieldState
+                }
+              )
+            }
+          ),
+          legendType === "custom" && /* @__PURE__ */ jsx(CustomLegend, {})
+        ] })
+      ] }) }),
+      type === "bubble" && /* @__PURE__ */ jsx(Field, { label: i18n.t("Radius"), children: /* @__PURE__ */ jsx(RadiusField, {}) })
+    ] })
+  ] }) });
+}
+
+export { ThematicLayerConfiguration };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=ThematicLayerConfiguration.js.map

package/dist/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfiguration.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfiguration.tsx"],"names":["type"],"mappings":"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","sourcesContent":["import i18n from \"@dhis2/d2-i18n\";\nimport { Button, Field, InputField, Radio } from \"@dhis2/ui\";\nimport { Controller, FormProvider, useWatch } from \"react-hook-form\";\nimport React, { useMemo, useState } from \"react\";\nimport { compact } from \"lodash\";\nimport { defaultClasses, defaultColorScaleName } from \"../../utils/colors.js\";\nimport IndicatorSelectorModal from \"./components/IndicatorSelectorModal/index.js\";\nimport { LegendSetSelector } from \"./components/LegendSetSelector/index.js\";\nimport { CustomLegend } from \"./components/CustomLegend/index.js\";\nimport { ThematicLayerConfigurationProps } from \"./types/index.js\";\nimport { RadiusField } from \"./components/RadiusField.js\";\nimport { TypeField } from \"./components/TypeField.js\";\n\nexport function ThematicLayerConfiguration({\n\texclude,\n\tform,\n}: ThematicLayerConfigurationProps) {\n\tconst [type, legendSet, dataItemId] = useWatch({\n\t\tcontrol: form.control,\n\t\tname: [\"type\", \"dataItem.legendSet\", \"dataItem.id\"],\n\t});\n\tconst [legendType, setLegendType] = useState(\n\t\tlegendSet ? \"legendSet\" : \"custom\",\n\t);\n\tconst [dataSelectorOpen, setDataSelectorOpen] = useState(false);\n\n\tconst onLegendTypeChange =\n\t\t(type: string) =>\n\t\t({ value }: { value?: string }) => {\n\t\t\tif (type === \"custom\") {\n\t\t\t\tform.setValue(\"dataItem.legendSet\", undefined);\n\t\t\t\tform.setValue(\"dataItem.legendConfig.scale\", defaultClasses);\n\t\t\t\tform.setValue(\n\t\t\t\t\t\"dataItem.legendConfig.colorClass\",\n\t\t\t\t\tdefaultColorScaleName,\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tform.setValue(\"dataItem.legendConfig\", undefined);\n\t\t\t}\n\t\t\tif (value) {\n\t\t\t\tsetLegendType(value);\n\t\t\t}\n\t\t};\n\tconst disabled = useMemo(\n\t\t() => exclude?.filter((indicator) => indicator !== dataItemId) ?? [],\n\t\t[dataItemId, exclude],\n\t);\n\treturn (\n\t\t<FormProvider {...form}>\n\t\t\t<div className=\"column gap-16\">\n\t\t\t\t<TypeField />\n\t\t\t\t<Controller\n\t\t\t\t\trules={{\n\t\t\t\t\t\tvalidate: {\n\t\t\t\t\t\t\trequired: (value: { id: string; name: string }) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\tBoolean(value?.id) ||\n\t\t\t\t\t\t\t\t\ti18n.t(\"A data item is required\")\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\trender={({ field, fieldState }) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{ alignItems: \"flex-end\" }}\n\t\t\t\t\t\t\t\tclassName=\"row w-100 gap-16 align-end\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tonClick={() => setDataSelectorOpen(true)}\n\t\t\t\t\t\t\t\t\tstyle={{ flex: 1 }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<InputField\n\t\t\t\t\t\t\t\t\t\trequired\n\t\t\t\t\t\t\t\t\t\terror={Boolean(fieldState.error)}\n\t\t\t\t\t\t\t\t\t\tvalidationText={\n\t\t\t\t\t\t\t\t\t\t\tfieldState.error?.message\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t\t\t\t\tinputWidth=\"100%\"\n\t\t\t\t\t\t\t\t\t\tlabel={i18n.t(\"Data Item\")}\n\t\t\t\t\t\t\t\t\t\tvalue={field.value?.displayName}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tonClick={() => setDataSelectorOpen(true)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{field.value?.id\n\t\t\t\t\t\t\t\t\t\t? i18n.t(\"Change\")\n\t\t\t\t\t\t\t\t\t\t: i18n.t(\"Select\")}\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{dataSelectorOpen && (\n\t\t\t\t\t\t\t\t<IndicatorSelectorModal\n\t\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\t\tonUpdate={(values: any[]) => {\n\t\t\t\t\t\t\t\t\t\tconst [indicator] = values ?? [];\n\t\t\t\t\t\t\t\t\t\tfield.onChange({\n\t\t\t\t\t\t\t\t\t\t\tid: indicator.id,\n\t\t\t\t\t\t\t\t\t\t\tdisplayName: indicator.displayName,\n\t\t\t\t\t\t\t\t\t\t\ttype: \"indicator\",\n\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonClose={() => setDataSelectorOpen(false)}\n\t\t\t\t\t\t\t\t\thide={!dataSelectorOpen}\n\t\t\t\t\t\t\t\t\tselected={compact([\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tid: field.value?.id,\n\t\t\t\t\t\t\t\t\t\t\tdisplayName:\n\t\t\t\t\t\t\t\t\t\t\t\tfield.value?.displayName,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t])}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t\tname={\"dataItem\"}\n\t\t\t\t/>\n\t\t\t\t<div>\n\t\t\t\t\t<Field label={i18n.t(\"Legend\")}>\n\t\t\t\t\t\t<div className=\"column gap-8\">\n\t\t\t\t\t\t\t<div className=\"row gap-16\">\n\t\t\t\t\t\t\t\t<Radio\n\t\t\t\t\t\t\t\t\tchecked={legendType === \"legendSet\"}\n\t\t\t\t\t\t\t\t\tlabel={i18n.t(\"Legend set\")}\n\t\t\t\t\t\t\t\t\tname=\"legendSet\"\n\t\t\t\t\t\t\t\t\tvalue=\"legendSet\"\n\t\t\t\t\t\t\t\t\tonChange={onLegendTypeChange(\"legendSet\")}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Radio\n\t\t\t\t\t\t\t\t\tchecked={legendType === \"custom\"}\n\t\t\t\t\t\t\t\t\tlabel={i18n.t(\"Custom legend\")}\n\t\t\t\t\t\t\t\t\tname=\"custom\"\n\t\t\t\t\t\t\t\t\tvalue=\"custom\"\n\t\t\t\t\t\t\t\t\tonChange={onLegendTypeChange(\"custom\")}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t{legendType === \"legendSet\" && (\n\t\t\t\t\t\t\t\t\t<Controller\n\t\t\t\t\t\t\t\t\t\trules={{\n\t\t\t\t\t\t\t\t\t\t\trequired: i18n.t(\n\t\t\t\t\t\t\t\t\t\t\t\t\"Legend set is required\",\n\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tname=\"dataItem.legendSet\"\n\t\t\t\t\t\t\t\t\t\trender={({ field, fieldState }) => (\n\t\t\t\t\t\t\t\t\t\t\t<LegendSetSelector\n\t\t\t\t\t\t\t\t\t\t\t\trequired\n\t\t\t\t\t\t\t\t\t\t\t\tselected={field.value}\n\t\t\t\t\t\t\t\t\t\t\t\t{...field}\n\t\t\t\t\t\t\t\t\t\t\t\t{...fieldState}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{legendType === \"custom\" && <CustomLegend />}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Field>\n\t\t\t\t\t{type === \"bubble\" && (\n\t\t\t\t\t\t<Field label={i18n.t(\"Radius\")}>\n\t\t\t\t\t\t\t<RadiusField />\n\t\t\t\t\t\t</Field>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</FormProvider>\n\t);\n}\n"]}

package/dist/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfiguration.stories.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { ThematicLayerConfiguration } from './ThematicLayerConfiguration';
+import { useForm } from 'react-hook-form';
+
+const Basic = {};
+Basic.args = {};
+const meta = {
+  title: "DHIS2 Map/Thematic Layer Configuration",
+  component: ThematicLayerConfiguration,
+  decorators: [
+    (MapStory) => {
+      const form = useForm();
+      return /* @__PURE__ */ jsx("div", { style: { width: "50%", height: "50%" }, children: /* @__PURE__ */ jsx(MapStory, { args: { form } }) });
+    }
+  ]
+};
+var ThematicLayerConfiguration_stories_default = meta;
+
+export { Basic, ThematicLayerConfiguration_stories_default as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=ThematicLayerConfiguration.stories.js.map

package/dist/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfiguration.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfiguration.stories.tsx"],"names":[],"mappings":"AAiBK;AAhBL,SAAS,kCAAkC;AAC3C,SAAS,eAAe;AAIjB,MAAM,QAAe,CAAC;AAC7B,MAAM,OAAO,CAAC;AAEd,MAAM,OAAgD;AAAA,EACrD,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACX,CAAC,aAAa;AACb,YAAM,OAAO,QAA6B;AAC1C,aACC,oBAAC,SAAI,OAAO,EAAE,OAAO,OAAO,QAAQ,MAAM,GACzC,8BAAC,YAAS,MAAM,EAAE,KAAK,GAAG,GAC3B;AAAA,IAEF;AAAA,EACD;AACD;AAEA,IAAO,6CAAQ","sourcesContent":["import { Meta, StoryObj } from \"@storybook/react\";\nimport { ThematicLayerConfiguration } from \"./ThematicLayerConfiguration\";\nimport { useForm } from \"react-hook-form\";\nimport { ThematicLayerConfig } from \"../MapLayer/interfaces\";\n\ntype Story = StoryObj<typeof ThematicLayerConfiguration>;\nexport const Basic: Story = {};\nBasic.args = {};\n\nconst meta: Meta<typeof ThematicLayerConfiguration> = {\n\ttitle: \"DHIS2 Map/Thematic Layer Configuration\",\n\tcomponent: ThematicLayerConfiguration,\n\tdecorators: [\n\t\t(MapStory) => {\n\t\t\tconst form = useForm<ThematicLayerConfig>();\n\t\t\treturn (\n\t\t\t\t<div style={{ width: \"50%\", height: \"50%\" }}>\n\t\t\t\t\t<MapStory args={{ form }} />\n\t\t\t\t</div>\n\t\t\t);\n\t\t},\n\t],\n};\n\nexport default meta;\n"]}

package/dist/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/components/ColorScale/index.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import styles from '../../styles/ColorScale.module.css';
+import { COLOR_PALETTES } from '../../constants/colors.js';
+
+const ColorScale = ({
+  scale,
+  bins,
+  width,
+  onClick
+}) => {
+  const colors = COLOR_PALETTES?.[scale]?.[bins];
+  const itemWidth = width ? width / bins : 36;
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      onClick: () => onClick(scale),
+      className: styles.colorScale,
+      style: {
+        ...width && { width }
+      },
+      children: colors.map((color, index) => /* @__PURE__ */ jsx(
+        "li",
+        {
+          className: styles.item,
+          style: { backgroundColor: color, width: itemWidth }
+        },
+        index
+      ))
+    }
+  );
+};
+var ColorScale_default = ColorScale;
+
+export { ColorScale_default as default };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/components/ColorScale/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/components/ColorScale/index.tsx"],"names":[],"mappings":"AA4BI;AA3BJ,OAAO,YAAY;AACnB,SAAS,sBAAsB;AAG/B,MAAM,aAAa,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,MAKM;AACL,QAAM,SAAU,iBAAyB,KAAK,IAAI,IAAI;AACtD,QAAM,YAAY,QAAQ,QAAQ,OAAO;AAEzC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,SAAS,MAAM,QAAQ,KAAK;AAAA,MAC5B,WAAW,OAAO;AAAA,MAClB,OAAO;AAAA,QACN,GAAI,SAAS,EAAE,MAAM;AAAA,MACtB;AAAA,MAEC,iBAAO,IAAI,CAAC,OAAe,UAC3B;AAAA,QAAC;AAAA;AAAA,UAEA,WAAW,OAAO;AAAA,UAClB,OAAO,EAAE,iBAAiB,OAAO,OAAO,UAAU;AAAA;AAAA,QAF7C;AAAA,MAGN,CACA;AAAA;AAAA,EACF;AAEF;AAEA,IAAO,qBAAQ","sourcesContent":["import React from \"react\";\nimport styles from \"../../styles/ColorScale.module.css\";\nimport { COLOR_PALETTES } from \"../../constants/colors.js\";\n\n// Returns one color scale based on a code and number of classes\nconst ColorScale = ({\n\tscale,\n\tbins,\n\twidth,\n\tonClick,\n}: {\n\tscale: string;\n\tbins: number;\n\twidth: number;\n\tonClick: (scale: string) => void;\n}) => {\n\tconst colors = (COLOR_PALETTES as any)?.[scale]?.[bins];\n\tconst itemWidth = width ? width / bins : 36;\n\n\treturn (\n\t\t<ul\n\t\t\tonClick={() => onClick(scale)}\n\t\t\tclassName={styles.colorScale}\n\t\t\tstyle={{\n\t\t\t\t...(width && { width }),\n\t\t\t}}\n\t\t>\n\t\t\t{colors.map((color: string, index: number) => (\n\t\t\t\t<li\n\t\t\t\t\tkey={index}\n\t\t\t\t\tclassName={styles.item}\n\t\t\t\t\tstyle={{ backgroundColor: color, width: itemWidth }}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</ul>\n\t);\n};\n\nexport default ColorScale;\n"]}

package/{build/es/components/Map → dist/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect}/constants/colors.js

@@ -1,4 +1,4 @@
-export const COLOR_PALETTES = {
+const COLOR_PALETTES = {
   YlGn: {
     3: ["#f7fcb9", "#addd8e", "#31a354"],
     4: ["#ffffcc", "#c2e699", "#78c679", "#238443"],
@@ -416,6 +416,21 @@ export const COLOR_PALETTES = {
     9: ["#000000", "#252525", "#525252", "#737373", "#969696", "#bdbdbd", "#d9d9d9", "#f0f0f0", "#ffffff"]
   }
 };
+const qualitativeColors = [
+  "#1f78b4",
+  "#ff7f00",
+  "#33a02c",
+  "#a6cee3",
+  "#b2df8a",
+  "#fb9a99",
+  "#fdbf6f",
+  "#cab2d6",
+  "#ffff99",
+  "#b15928",
+  "#6a3d9a",
+  "#e31a1c"
+];
 
-// Qualitative colors From ColorBrewer (reordered 12-class)
-export const qualitativeColors = ["#1f78b4", "#ff7f00", "#33a02c", "#a6cee3", "#b2df8a", "#fb9a99", "#fdbf6f", "#cab2d6", "#ffff99", "#b15928", "#6a3d9a", "#e31a1c"];
+export { COLOR_PALETTES, qualitativeColors };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=colors.js.map