@hisptz/dhis2-analytics 1.0.5 → 1.0.6

package/src/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfigModal.stories.tsx

@@ -1,28 +0,0 @@
-import {Story} from "@storybook/react";
-import {ThematicLayerConfigModal, ThematicLayerConfigModalProps} from "./index";
-import React from "react";
-
-const Template: Story<ThematicLayerConfigModalProps> = (args) => {
-  return <ThematicLayerConfigModal {...args} />;
-};
-
-export const Basic = Template.bind({});
-Basic.args = {
-  onChange: console.info,
-  onClose: () => {},
-  open: true,
-};
-
-export default {
-  title: "Components/Map/Thematic Layer Config Modal",
-  component: ThematicLayerConfigModal,
-  decorators: [
-    (MapStory: any) => {
-      return (
-        <div style={{ width: "50%", height: "50%" }}>
-          <MapStory />
-        </div>
-      );
-    },
-  ],
-};

package/src/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfiguration.stories.tsx

@@ -1,34 +0,0 @@
-import {Story} from "@storybook/react";
-import {ThematicLayerConfiguration, ThematicLayerConfigurationProps} from "./index";
-import React from "react";
-import {useForm} from "react-hook-form";
-import {ThematicLayerConfig} from "../MapLayer/interfaces";
-import i18n from "@dhis2/d2-i18n";
-import {Button} from "@dhis2/ui";
-
-const Template: Story<ThematicLayerConfigurationProps> = (args) => {
-  const form = useForm<ThematicLayerConfig>();
-  return (
-    <form className="column gap-16" onSubmit={form.handleSubmit(console.log)}>
-      <ThematicLayerConfiguration {...args} form={form} />
-      <Button type="submit">{i18n.t("Submit")}</Button>
-    </form>
-  );
-};
-
-export const Basic = Template.bind({});
-Basic.args = {};
-
-export default {
-  title: "Components/Map/Thematic Layer Configuration",
-  component: ThematicLayerConfiguration,
-  decorators: [
-    (MapStory: any) => {
-      return (
-        <div style={{ width: "50%", height: "50%" }}>
-          <MapStory />
-        </div>
-      );
-    },
-  ],
-};

package/src/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/components/ColorScale/index.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import styles from "../../styles/ColorScale.module.css";
-import {COLOR_PALETTES} from "../../constants/colors";
-
-// Returns one color scale based on a code and number of classes
-const ColorScale = ({ scale, bins, width, onClick }: { scale: string; bins: number; width: number; onClick: (scale: string) => void }) => {
-  const colors = (COLOR_PALETTES as any)?.[scale]?.[bins];
-  const itemWidth = width ? width / bins : 36;
-
-  return (
-    <ul
-      onClick={() => onClick(scale)}
-      className={styles.colorScale}
-      style={{
-        ...(width && { width }),
-      }}>
-      {colors.map((color: string, index: number) => (
-        <li key={index} className={styles.item} style={{ backgroundColor: color, width: itemWidth }} />
-      ))}
-    </ul>
-  );
-};
-
-export default ColorScale;

package/src/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/index.tsx

@@ -1,50 +0,0 @@
-import React, {Fragment, useRef, useState} from "react";
-import {Popover} from "@dhis2/ui";
-import cx from "classnames";
-import ColorScale from "./components/ColorScale";
-import styles from "./styles/ColorScaleSelect.module.css";
-import {colorScales, defaultColorScale, defaultColorScaleName, getColorPalette, getColorScale} from "./utils/colors";
-
-const ColorScaleSelect = ({
-  colorClass,
-  count,
-  width,
-  onChange,
-  className,
-}: {
-  className?: string;
-  count: number;
-  width: number;
-  onChange: (palette: string) => void;
-  colorClass: string;
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const anchorRef = useRef<HTMLDivElement>(null);
-  const palette = getColorPalette(colorClass, count);
-  const bins = palette.split(",").length;
-  const scale = getColorScale(palette) ?? defaultColorScale;
-
-  const onColorScaleSelect = (scale: string) => {
-    onChange(scale);
-    setIsOpen(false);
-  };
-
-  return (
-    <Fragment>
-      <div ref={anchorRef} className={cx(styles.colorScale, className)}>
-        <ColorScale bins={bins} scale={scale ?? defaultColorScaleName} onClick={() => setIsOpen(true)} width={width || 260} />
-      </div>
-      {isOpen && (
-        <Popover reference={anchorRef} arrow={false} placement="right" onClickOutside={() => setIsOpen(false)}>
-          <div className={styles.popover} style={{ width: width + 24 || 260, height: "100%", overflow: "auto" }}>
-            {colorScales.map((scale, index) => (
-              <ColorScale key={index} scale={scale} bins={bins} onClick={onColorScaleSelect} width={width || 260} />
-            ))}
-          </div>
-        </Popover>
-      )}
-    </Fragment>
-  );
-};
-
-export default ColorScaleSelect;

package/src/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/utils/colors.ts

@@ -1,91 +0,0 @@
-import {hcl} from "d3-color";
-import {isString} from "lodash";
-import {COLOR_PALETTES} from "../constants/colors";
-
-const colorbrewer: Record<string, any> = COLOR_PALETTES;
-
-// Returns a color brewer scale for a number of classes
-export const getColorPalette = (scale: string, classes: number) => {
-  return colorbrewer[scale][classes].join(",");
-};
-
-// Returns color scale name for a palette
-export const getColorScale = (palette: string) => {
-  const classes = palette.split(",").length;
-  return colorScales.find((name) => colorbrewer[name]?.[classes]?.join(",") === palette);
-};
-
-export const defaultColorScaleName = "YlOrBr";
-export const defaultClasses = 5;
-export const defaultColorScale = getColorPalette(defaultColorScaleName, defaultClasses);
-
-// Correct colors not adhering to the css standard (add missing #)
-export const cssColor = (color: any) => {
-  if (!isString(color)) {
-    return color;
-  } else if (color === "##normal") {
-    // ##normal is used in old map favorites
-    return null; // Will apply default color
-  }
-  return (/(^[0-9A-F]{6}$)|(^[0-9A-F]{3}$)/i.test(color) ? "#" : "") + color;
-};
-
-// Returns an unique color (first from an array, then random but still unique)
-export const getUniqueColor = (defaultColors: any) => {
-  const colors = [...defaultColors];
-
-  function randomColor(): string {
-    const color = "#000000".replace(/0/g, () => (~~(Math.random() * 16)).toString(16));
-
-    // Recursive until color is unique
-    if (colors.includes(color)) {
-      return randomColor();
-    }
-
-    colors.push(color);
-
-    return color;
-  }
-
-  return (index: number) => colors[index] || randomColor();
-};
-
-// Returns true if a color is dark
-export const isDarkColor = (color: string) => hcl(color).l < 70;
-
-// Returns constrasting color
-export const getContrastColor = (color: string) => (isDarkColor(color) ? "#fff" : "#000");
-export type LegendColorScale = typeof colorScales[number];
-export const colorScales = [
-  "YlOrBr",
-  "Reds",
-  "YlGn",
-  "Greens",
-  "Blues",
-  "BuPu",
-  "RdPu",
-  "PuRd",
-  "Greys",
-  "YlOrBr_reverse",
-  "Reds_reverse",
-  "YlGn_reverse",
-  "Greens_reverse",
-  "Blues_reverse",
-  "BuPu_reverse",
-  "RdPu_reverse",
-  "PuRd_reverse",
-  "Greys_reverse",
-  "PuOr",
-  "BrBG",
-  "PRGn",
-  "PiYG",
-  "RdBu",
-  "RdGy",
-  "RdYlBu",
-  "Spectral",
-  "RdYlGn",
-  "Paired",
-  "Pastel1",
-  "Set1",
-  "Set3",
-];

package/src/components/Map/components/ThematicLayerConfiguration/components/CustomLegend/index.tsx

@@ -1,45 +0,0 @@
-import {Controller, useWatch} from "react-hook-form";
-import {Field, SingleSelectField, SingleSelectOption} from "@dhis2/ui";
-import {defaultClasses, defaultColorScaleName} from "../../../../utils/colors";
-import i18n from "@dhis2/d2-i18n";
-import ColorScaleSelect from "../ColorScaleSelect";
-import React from "react";
-
-export function CustomLegend() {
-  const scale = useWatch({
-    name: "dataItem.legendConfig.scale",
-  });
-
-  return (
-    <div className="row gap-16 space-between">
-      <div style={{ width: "30%" }}>
-        <Controller
-          name="dataItem.legendConfig.scale"
-          render={({ field, fieldState }) => (
-            <SingleSelectField
-              validationText={fieldState.error?.message}
-              error={Boolean(fieldState.error)}
-              selected={field.value?.toString() ?? defaultClasses.toString()}
-              label={i18n.t("Classes")}
-              onChange={({ selected }: { selected: string }) => field.onChange(parseInt(selected))}
-              name="scale">
-              {[3, 4, 5, 6, 7, 8, 9].map((value) => (
-                <SingleSelectOption key={`${value}-classes-option`} label={`${value}`} value={value?.toString()} />
-              ))}
-            </SingleSelectField>
-          )}
-        />
-      </div>
-      <div style={{ width: "70%" }}>
-        <Controller
-          name="dataItem.legendConfig.colorClass"
-          render={({ field }) => (
-            <Field label={i18n.t("Colors")}>
-              <ColorScaleSelect count={scale ?? defaultClasses} colorClass={field.value ?? defaultColorScaleName} width={300} onChange={field.onChange} />
-            </Field>
-          )}
-        />
-      </div>
-    </div>
-  );
-}

package/src/components/Map/components/ThematicLayerConfiguration/components/IndicatorSelectorModal/index.tsx

@@ -1,47 +0,0 @@
-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({
-  onUpdate,
-  onClose,
-  hide,
-  selected,
-  disabled,
-  ...props
-}: {
-  onUpdate: (data: any) => void;
-  onClose: () => void;
-  hide: boolean;
-  selected: any;
-  disabled?: string[];
-}) {
-  const [selectedIndicators, setSelectedIndicators] = useState(selected);
-
-  const onUpdateClick = useCallback(() => {
-    onUpdate(selectedIndicators);
-    onClose();
-  }, [onUpdate, selectedIndicators]);
-
-  const onSelect = useCallback((indicators: any) => {
-    setSelectedIndicators(indicators);
-  }, []);
-
-  return (
-    <Modal placement="middle" hide={hide} onClose={onClose}>
-      <ModalTitle>{i18n.t("Select Data Item")}</ModalTitle>
-      <ModalContent>
-        <DataSourceSelector {...props} disabled={disabled} maxSelections={1} selected={selectedIndicators} onSelect={onSelect} />
-      </ModalContent>
-      <ModalActions>
-        <ButtonStrip>
-          <Button onClick={onClose}>{i18n.t("Cancel")}</Button>
-          <Button primary onClick={onUpdateClick}>
-            {i18n.t("Update")}
-          </Button>
-        </ButtonStrip>
-      </ModalActions>
-    </Modal>
-  );
-}

package/src/components/Map/components/ThematicLayerConfiguration/components/LegendSetSelector/index.tsx

@@ -1,57 +0,0 @@
-import {useDataQuery} from "@dhis2/app-runtime";
-import React, {useMemo} from "react";
-import {LegendSet} from "@hisptz/dhis2-utils";
-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({
-  selected,
-  onChange,
-  error,
-  required,
-  ...props
-}: {
-  selected?: string;
-  onChange: (value: string) => void;
-  error?: { message?: string };
-  required?: boolean;
-}) {
-  const { loading, data } = useDataQuery(legendSetQuery);
-  const options = useMemo(() => {
-    if (data) {
-      return (data?.legendSets as { legendSets?: LegendSet[] })?.legendSets?.map(({ displayName, id }) => ({
-        label: displayName,
-        value: id,
-      }));
-    }
-    return [];
-  }, [data]);
-
-  return (
-    <SingleSelectField
-      required={required}
-      error={Boolean(error)}
-      validationText={error?.message}
-      {...props}
-      label={i18n.t("Legend set")}
-      filterable
-      selected={!isEmpty(options) ? selected : undefined}
-      loadingText={i18n.t("Please wait...")}
-      onChange={({ selected }: { selected: string }) => onChange(selected)}
-      loading={loading}>
-      {options?.map(({ label, value }) => (
-        <SingleSelectOption key={`${label}-legend-option`} label={label} value={value} />
-      ))}
-    </SingleSelectField>
-  );
-}

package/src/components/Map/components/ThematicLayerConfiguration/index.tsx

@@ -1,248 +0,0 @@
-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, UseFormReturn, useWatch} from "react-hook-form";
-import React, {useMemo, useState} from "react";
-import {compact} from "lodash";
-import {defaultClasses, defaultColorScaleName} from "../../utils/colors";
-import {ThematicLayerConfig} from "../MapLayer/interfaces";
-import IndicatorSelectorModal from "./components/IndicatorSelectorModal";
-import {LegendSetSelector} from "./components/LegendSetSelector";
-import {CustomLegend} from "./components/CustomLegend";
-
-export interface ThematicLayerConfigurationProps {
-  exclude?: string[];
-  form: UseFormReturn<ThematicLayerConfig>;
-  [key: string]: any;
-}
-
-export function RadiusField() {
-  return (
-    <div className="row gap-8">
-      <Controller
-        render={({ field, fieldState }) => (
-          <InputField
-            {...field}
-            error={Boolean(fieldState.error)}
-            validationText={fieldState.error?.message}
-            value={field.value?.toString()}
-            onChange={({ value }: { value: string }) => field.onChange(parseInt(value))}
-            label={i18n.t("Min")}
-            type="number"
-          />
-        )}
-        name={"radius.min"}
-      />
-      <Controller
-        render={({ field, fieldState }) => (
-          <InputField
-            value={field.value?.toString()}
-            onChange={({ value }: { value: string }) => field.onChange(parseInt(value))}
-            label={i18n.t("Max")}
-            type="number"
-          />
-        )}
-        name={"radius.max"}
-      />
-    </div>
-  );
-}
-
-function TypeField() {
-  const { setValue } = useFormContext();
-  const resetFields = (type: string) => {
-    if (type === "bubble") {
-      setValue(`radius`, {
-        min: 5,
-        max: 30,
-      });
-    } else {
-      setValue(`radius`, undefined);
-    }
-  };
-
-  return (
-    <Controller
-      rules={{
-        required: i18n.t("Layer type is required"),
-      }}
-      render={({ field, fieldState }) => {
-        return (
-          <SingleSelectField
-            label={i18n.t("Layer type")}
-            required
-            error={Boolean(fieldState.error)}
-            validationText={fieldState.error?.message}
-            onChange={({ selected }: { selected: string }) => {
-              resetFields(selected);
-              field.onChange(selected);
-            }}
-            selected={field.value}>
-            <SingleSelectOption value={"choropleth"} label={i18n.t("Choropleth")} />
-            <SingleSelectOption value={"bubble"} label={i18n.t("Bubble")} />
-          </SingleSelectField>
-        );
-      }}
-      name={"type"}
-    />
-  );
-}
-
-export function ThematicLayerConfiguration({ exclude, form }: ThematicLayerConfigurationProps) {
-  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: string) =>
-    ({ value }: { value: string }) => {
-      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(() => exclude?.filter((indicator) => indicator !== dataItemId) ?? [], [dataItemId, exclude]);
-  return (
-    <FormProvider {...form}>
-      <div className="column gap-16">
-        <TypeField />
-        <Controller
-          rules={{
-            validate: {
-              required: (value: { id: string; name: string }) => {
-                return Boolean(value?.id) || i18n.t("A data item is required");
-              },
-            },
-          }}
-          render={({ field, fieldState }) => (
-            <>
-              <div style={{ alignItems: "flex-end" }} className="row w-100 gap-16 align-end">
-                <div onClick={() => setDataSelectorOpen(true)} style={{ flex: 1 }}>
-                  <InputField
-                    required
-                    error={Boolean(fieldState.error)}
-                    validationText={fieldState.error?.message}
-                    disabled
-                    inputWidth="100%"
-                    label={i18n.t("Data Item")}
-                    value={field.value?.displayName}
-                  />
-                </div>
-                <Button onClick={() => setDataSelectorOpen(true)}>{field.value?.id ? i18n.t("Change") : i18n.t("Select")}</Button>
-              </div>
-              {dataSelectorOpen && (
-                <IndicatorSelectorModal
-                  disabled={disabled}
-                  onUpdate={(values: any[]) => {
-                    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"}
-        />
-        <div>
-          <Field label={i18n.t("Legend")}>
-            <div className="column gap-8">
-              <div className="row gap-16">
-                <Radio
-                  checked={legendType === "legendSet"}
-                  label={i18n.t("Legend set")}
-                  name="legendSet"
-                  value="legendSet"
-                  onChange={onLegendTypeChange("legendSet")}
-                />
-                <Radio checked={legendType === "custom"} label={i18n.t("Custom legend")} name="custom" value="custom" onChange={onLegendTypeChange("custom")} />
-              </div>
-              <div>
-                {legendType === "legendSet" && (
-                  <Controller
-                    rules={{
-                      required: i18n.t("Legend set is required"),
-                    }}
-                    name="dataItem.legendSet"
-                    render={({ field, fieldState }) => <LegendSetSelector required selected={field.value} {...field} {...fieldState} />}
-                  />
-                )}
-                {legendType === "custom" && <CustomLegend />}
-              </div>
-            </div>
-          </Field>
-          {type === "bubble" && (
-            <Field label={i18n.t("Radius")}>
-              <RadiusField />
-            </Field>
-          )}
-        </div>
-      </div>
-    </FormProvider>
-  );
-}
-
-export interface ThematicLayerConfigModalProps {
-  open: boolean;
-  config?: ThematicLayerConfig;
-  exclude?: string[];
-  onClose: () => void;
-  onChange: (config: ThematicLayerConfig) => void;
-}
-
-export function ThematicLayerConfigModal({ open, exclude, config, onClose, onChange, ...props }: ThematicLayerConfigModalProps) {
-  const form = useForm<ThematicLayerConfig>({
-    defaultValues: config,
-  });
-
-  const onSubmitClick = (values: ThematicLayerConfig) => {
-    onChange(values);
-    onClose();
-  };
-
-  return (
-    <Modal {...props} open={open} onClose={onClose}>
-      <ModalTitle>{i18n.t("Configure Thematic Layer")}</ModalTitle>
-      <ModalContent>
-        <ThematicLayerConfiguration form={form} exclude={exclude} />
-      </ModalContent>
-      <ModalActions>
-        <ButtonStrip>
-          <Button onClick={onClose}>{i18n.t("Cancel")}</Button>
-          <Button primary onClick={form.handleSubmit(onSubmitClick)}>
-            {i18n.t("Save")}
-          </Button>
-        </ButtonStrip>
-      </ModalActions>
-    </Modal>
-  );
-}

package/src/components/Map/constants/legendSet.ts

@@ -1,19 +0,0 @@
-export const defaultLegendSet = {
-  legends: [
-    {
-      startValue: 0,
-      endValue: 33,
-      color: "#ff0000",
-    },
-    {
-      startValue: 33,
-      endValue: 66,
-      color: "#ffff27",
-    },
-    {
-      startValue: 66,
-      endValue: 100,
-      color: "#00ff00",
-    },
-  ],
-};