@hisptz/dhis2-analytics 1.0.0

package/README.md

@@ -0,0 +1,45 @@
+This project was bootstrapped with [DHIS2 Application Platform](https://github.com/dhis2/app-platform).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner and runs all available tests found in `/src`.<br />
+
+See the section about [running tests](https://platform.dhis2.nu/#/scripts/test) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+A deployable `.zip` file can be found in `build/bundle`!
+
+See the section about [building](https://platform.dhis2.nu/#/scripts/build) for more information.
+
+### `yarn deploy`
+
+Deploys the built app in the `build` folder to a running DHIS2 instance.<br />
+This command will prompt you to enter a server URL as well as the username and password of a DHIS2 user with the App Management authority.<br/>
+You must run `yarn build` before running `yarn deploy`.<br />
+
+See the section about [deploying](https://platform.dhis2.nu/#/scripts/deploy) for more information.
+
+## Learn More
+
+You can learn more about the platform in the [DHIS2 Application Platform Documentation](https://platform.dhis2.nu/).
+
+You can learn more about the runtime in the [DHIS2 Application Runtime Documentation](https://runtime.dhis2.nu/).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

package/d2.config.js

@@ -0,0 +1,8 @@
+const config = {
+    type: 'lib',
+    entryPoints: {
+        lib: './src/index.ts',
+    },
+}
+
+module.exports = config

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@hisptz/dhis2-analytics",
+  "version": "1.0.0",
+  "description": "",
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "d2-app-scripts build --no-verify",
+    "start": "d2-app-scripts start",
+    "test": "d2-app-scripts test --passWithNoTests",
+    "deploy": "d2-app-scripts deploy",
+    "publish:analytics": "yarn publish --access public"
+  },
+  "devDependencies": {
+    "@cypress/react": "^7.0.2",
+    "@dhis2/cli-app-scripts": "^10.2.0",
+    "@dhis2/cypress-commands": "^9.0.2",
+    "@dhis2/cypress-plugins": "^9.0.2",
+    "@google/earthengine": "^0.1.336",
+    "@types/d3-scale": "^4.0.3",
+    "@types/leaflet": "^1.9.0",
+    "@types/lodash": "^4.14.191",
+    "@types/react-helmet": "^6.1.6",
+    "cypress": "^12.3.0",
+    "lodash": "^4.17.21",
+    "react-hook-form": "^7.42.1"
+  },
+  "dependencies": {
+    "@dhis2/app-runtime": "^3.7.0",
+    "@hisptz/dhis2-ui": "*",
+    "async-es": "^3.2.4",
+    "d3-color": "^3.1.0",
+    "d3-scale": "^4.0.2",
+    "highcharts": "^10.3.2",
+    "highcharts-react-official": "^3.1.0",
+    "leaflet": "^1.9.3",
+    "leaflet-easyprint": "^2.1.9",
+    "leaflet.fullscreen": "^2.4.0",
+    "react-circular-progressbar": "^2.1.0",
+    "react-helmet": "^6.1.0",
+    "react-leaflet": "^4.2.0",
+    "react-leaflet-custom-control": "^1.3.1",
+    "react-spring": "^9.6.1",
+    "screenfull": "^6.0.2"
+  },
+  "main": "./build/cjs/index.js",
+  "module": "./build/es/index.js",
+  "exports": {
+    "import": "./build/es/index.js",
+    "require": "./build/cjs/index.js"
+  },
+  "peerDependencies": {
+    "lodash": "^4",
+    "react-hook-form": "^7"
+  }
+}

package/src/components/ChartAnalytics/ChartAnalytics.stories.tsx

@@ -0,0 +1,250 @@
+import {CssReset} from "@dhis2/ui";
+import type {Story} from "@storybook/react";
+import HighCharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+import React, {useState} from "react";
+import ChartDownloadMenu from "./components/DownloadMenu";
+import columnData from "./data/column-data.json";
+import complexMultiSeriesData from "./data/complex-multi-series-data.json";
+import multiSeriesData from "./data/multi-series-data.json";
+import pieData from "./data/pie-data.json";
+import stackedChartData from "./data/stacked-chart-data.json";
+import {setupHighchartsModules} from "./services/export";
+import {ChartAnalyticsProps} from "./types/props";
+import ChartAnalytics from ".";
+
+const Template: Story<ChartAnalyticsProps> = (args) => <ChartAnalytics {...args} />;
+setupHighchartsModules(HighCharts);
+
+export const Column = Template.bind({});
+Column.args = {
+  analytics: columnData as any,
+  config: {
+    layout: {
+      series: ["dx"],
+      category: ["ou"],
+      filter: ["pe"],
+    },
+    type: "column",
+    height: 500,
+    colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"],
+  },
+};
+
+export const MultipleColumns = Template.bind({});
+MultipleColumns.args = {
+  analytics: multiSeriesData as any,
+  config: {
+    layout: {
+      series: ["ou"],
+      category: ["pe"],
+      filter: ["dx"],
+    },
+    type: "column",
+    height: 1000,
+    colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"],
+  },
+};
+
+export const StackedColumn = Template.bind({});
+StackedColumn.args = {
+  analytics: stackedChartData as any,
+  config: {
+    layout: {
+      series: ["ou"],
+      category: ["pe"],
+      filter: ["dx"],
+    },
+    type: "stacked-column",
+    height: 1000,
+    colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"],
+  },
+};
+
+export const Line = Template.bind({});
+Line.args = {
+  analytics: columnData as any,
+  config: {
+    layout: {
+      series: ["dx"],
+      category: ["ou"],
+      filter: ["pe"],
+    },
+    type: "line",
+    height: 1000,
+    colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"],
+  },
+};
+
+export const MultipleLines = Template.bind({});
+MultipleLines.args = {
+  analytics: multiSeriesData as any,
+  config: {
+    layout: {
+      series: ["ou"],
+      category: ["pe"],
+      filter: ["dx"],
+    },
+    type: "line",
+    height: 500,
+    colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"],
+  },
+};
+
+export const PieChart = Template.bind({});
+PieChart.args = {
+  analytics: pieData as any,
+  config: {
+    layout: {
+      series: ["dx"],
+      category: [],
+      filter: ["dx", "pe"],
+    },
+    type: "pie",
+    height: 500,
+    colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c4255", "#a6c96a"],
+  },
+};
+
+export const MultiSeries = Template.bind({});
+MultiSeries.args = {
+  analytics: multiSeriesData as any,
+  config: {
+    layout: {
+      series: ["ou"],
+      category: ["pe"],
+      filter: ["dx"],
+    },
+    type: "multi-series",
+    height: 500,
+    colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"],
+    multiSeries: {
+      series: [
+        {
+          id: "qhqAxPSTUXp",
+          as: "column",
+          yAxis: 0,
+        },
+        {
+          id: "Vth0fbpFcsO",
+          as: "line",
+          cumulative: true,
+          yAxis: 1,
+        },
+      ],
+      yAxes: [
+        {
+          id: "yAxis1",
+          title: {
+            text: "Koinandugu",
+          },
+          labels: {
+            format: "{value}",
+          },
+        },
+        {
+          id: "yAxis2",
+          title: {
+            text: "Kono",
+          },
+          labels: {
+            format: "{value}",
+          },
+          opposite: true,
+        },
+      ],
+      target: {
+        id: "",
+        styles: {
+          color: "blue",
+        },
+        value: 45,
+        label: {
+          text: "Target",
+          textAlign: "center",
+          verticalAlign: "middle",
+        },
+      },
+    },
+  },
+};
+
+export const ComplexMultiSeries = Template.bind({});
+ComplexMultiSeries.args = {
+  analytics: complexMultiSeriesData as any,
+  config: {
+    layout: {
+      series: ["dx"],
+      category: ["pe"],
+      filter: ["ou"],
+    },
+    type: "multi-series",
+    height: 500,
+    colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"],
+    multiSeries: {
+      series: [
+        {
+          id: "QQkOAJFukyY",
+          as: "column",
+          yAxis: 0,
+        },
+        {
+          id: "QQkOAJFukyY",
+          as: "line",
+          cumulative: true,
+          yAxis: 1,
+        },
+      ],
+      yAxes: [
+        {
+          id: "yAxis1",
+          title: {
+            text: "Koinandugu",
+          },
+          labels: {
+            format: "{value}",
+          },
+        },
+        {
+          id: "yAxis2",
+          title: {
+            text: "Kono",
+          },
+          labels: {
+            format: "{value}",
+          },
+          opposite: true,
+        },
+      ],
+      target: {
+        id: "",
+        styles: {
+          color: "blue",
+        },
+        value: 45,
+        label: {
+          text: "Target",
+          textAlign: "center",
+          verticalAlign: "middle",
+        },
+      },
+    },
+  },
+};
+
+export default {
+  title: "Components/Chart Analytics",
+  component: ChartAnalytics,
+  decorators: [
+    (ChartStory: any) => {
+      const [chartRef, setChartRef] = useState<HighchartsReact.RefObject | null>(null);
+      return (
+        <div style={{ width: 1000, height: "100%", display: "flex", gap: 8, flexDirection: "column" }}>
+          <CssReset />
+          <div style={{ width: "100%", display: "flex", justifyContent: "end" }}>{<ChartDownloadMenu chartRef={chartRef} />}</div>
+          <ChartStory ref={setChartRef} />
+        </div>
+      );
+    },
+  ],
+};

package/src/components/ChartAnalytics/ChartAnalytics.test.tsx

@@ -0,0 +1,51 @@
+import {mount} from "@cypress/react";
+import HighCharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+import React, {useState} from "react";
+import ChartDownloadMenu from "./components/DownloadMenu";
+import columnData from "./data/column-data.json";
+import {setupHighchartsModules} from "./services/export";
+import ChartAnalytics from ".";
+
+const props: any = {
+  analytics: columnData as any,
+  config: {
+    layout: {
+      series: ["dx"],
+      category: ["ou"],
+      filter: ["pe"],
+    },
+    type: "column",
+    height: 500,
+    colors: ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"],
+  },
+};
+
+function TestComponent() {
+  return <ChartAnalytics {...props} />;
+}
+
+function ExportTestComponent() {
+  const [chartRef, setChartRef] = useState<HighchartsReact.RefObject | null>(null);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      <div>
+        <ChartDownloadMenu chartRef={chartRef} />
+      </div>
+      <ChartAnalytics {...props} ref={setChartRef} />
+    </div>
+  );
+}
+
+describe("Chart Component Tests", () => {
+  setupHighchartsModules(HighCharts);
+
+  it("Mounts without errors", () => {
+    mount(<TestComponent />);
+  });
+
+  it("Can be exported as PDF", () => {
+    mount(<ExportTestComponent />);
+  });
+});

package/src/components/ChartAnalytics/components/DownloadMenu/components/Menu.tsx

@@ -0,0 +1,48 @@
+import {FlyoutMenu, Menu, MenuDivider, MenuItem, Popover} from "@dhis2/ui";
+import {isEmpty, map} from "lodash";
+import React from "react";
+import {chartMenuSections} from "../constants/menu";
+import {ChartExportMenuItem} from "../interfaces/menu";
+
+export function ChartMenu({
+  menuRef,
+  onClick,
+  onClose,
+  exclude = [],
+}: {
+  menuRef: HTMLButtonElement;
+  onClick: (action: string) => void;
+  onClose: () => void;
+  exclude?: ChartExportMenuItem[];
+}) {
+  const onMenuClick = (action: string) => () => {
+    onClick(action);
+    onClose();
+  };
+
+  const menuSections = map(chartMenuSections, (section) => {
+    return {
+      ...section,
+      menuItems: section.menuItems.filter((item: any) => !exclude.includes(item.name)),
+    };
+  }).filter((section) => !isEmpty(section.menuItems));
+
+  return (
+    <Popover onClickOutside={onClose} onClose={onClose} reference={menuRef}>
+      <FlyoutMenu>
+        <Menu>
+          {menuSections?.map((section, index) => {
+            return (
+              <>
+                {section.menuItems?.map(({ name, label }) => {
+                  return <MenuItem key={`${name}-menu-item`} dataTest={`download-${name}`} label={label} onClick={onMenuClick(name)} />;
+                })}
+                {index !== menuSections.length - 1 && <MenuDivider />}
+              </>
+            );
+          })}
+        </Menu>
+      </FlyoutMenu>
+    </Popover>
+  );
+}

package/src/components/ChartAnalytics/components/DownloadMenu/constants/menu.ts

@@ -0,0 +1,38 @@
+import i18n from "@dhis2/d2-i18n";
+
+export const chartMenuSections = [
+  {
+    name: "download",
+    menuItems: [
+      {
+        name: "png",
+        label: i18n.t("Download PNG"),
+      },
+      {
+        name: "jpeg",
+        label: i18n.t("Download JPEG"),
+      },
+      {
+        name: "svg",
+        label: i18n.t("Download SVG"),
+      },
+      {
+        name: "pdf",
+        label: i18n.t("Download PDF"),
+      },
+    ],
+  },
+  {
+    name: "view",
+    menuItems: [
+      {
+        name: "table",
+        label: i18n.t("View as table"),
+      },
+      {
+        name: "full-screen",
+        label: i18n.t("View full screen"),
+      },
+    ],
+  },
+];

package/src/components/ChartAnalytics/components/DownloadMenu/index.tsx

@@ -0,0 +1,67 @@
+import {IconMore24} from "@dhis2/ui";
+import HighchartsReact from "highcharts-react-official";
+import React, {useRef, useState} from "react";
+import {onCSVDownload, onFullScreenView, onImageDownload, onPDFDownload, onViewAsTable} from "../../services/export";
+import {ChartMenu} from "./components/Menu";
+import {ChartExportMenuItem} from "./interfaces/menu";
+
+function ChartDownloadMenu({
+  chartRef,
+  exclude,
+  icon,
+}: {
+  chartRef: HighchartsReact.RefObject | null;
+  exclude?: ChartExportMenuItem[];
+  icon?: React.ReactNode;
+}) {
+  const menuButtonRef = useRef<HTMLButtonElement | null>(null);
+  const [menuRef, setMenuRef] = useState<HTMLButtonElement | null>(null);
+  const toggleMenu = () => {
+    if (menuRef === null) {
+      setMenuRef(menuButtonRef.current);
+    } else {
+      setMenuRef(null);
+    }
+  };
+
+  const chart = chartRef;
+
+  const onMenuClick = (action: string) => {
+    if (chart) {
+      switch (action) {
+        case "png":
+          onImageDownload(chart, "png");
+          break;
+        case "jpeg":
+          onImageDownload(chart, "jpeg");
+          break;
+        case "svg":
+          onImageDownload(chart, "svg+xml");
+          break;
+        case "csv":
+          onCSVDownload(chart);
+          break;
+        case "pdf":
+          onPDFDownload(chart);
+          break;
+        case "table":
+          onViewAsTable(chart, true);
+          break;
+        case "full-screen":
+          onFullScreenView(chart);
+          break;
+      }
+    }
+  };
+
+  return (
+    <>
+      <div onClick={toggleMenu} ref={menuButtonRef}>
+        {icon ?? <IconMore24 />}
+      </div>
+      {menuRef && <ChartMenu exclude={exclude} onClick={onMenuClick} onClose={toggleMenu} menuRef={menuRef} />}
+    </>
+  );
+}
+
+export default ChartDownloadMenu;

package/src/components/ChartAnalytics/components/DownloadMenu/interfaces/menu.ts

@@ -0,0 +1 @@
+export type ChartExportMenuItem = "png" | "jpeg" | "svg" | "csv" | "pdf" | "table" | "full-screen";