@hisptz/dhis2-analytics 1.0.4 → 1.0.6

package/build/cjs/locales/en/translations.json

@@ -0,0 +1,128 @@
+{
+    "Download PNG": "Download PNG",
+    "Download JPEG": "Download JPEG",
+    "Download SVG": "Download SVG",
+    "Download PDF": "Download PDF",
+    "View as table": "View as table",
+    "View full screen": "View full screen",
+    "Submit": "Submit",
+    "Aggregation": "Aggregation",
+    "Aggregations": "Aggregations",
+    "Period is required": "Period is required",
+    "Available periods are set by the source data": "Available periods are set by the source data",
+    "Period": "Period",
+    "Min": "Min",
+    "Max": "Max",
+    "Steps": "Steps",
+    "Colors": "Colors",
+    "Unit": "Unit",
+    "Name is required": "Name is required",
+    "Layer name": "Layer name",
+    "Type is required": "Type is required",
+    "Layer type": "Layer type",
+    "Configure Earth Engine Layer": "Configure Earth Engine Layer",
+    "Cancel": "Cancel",
+    "Save": "Save",
+    "Boundaries": "Boundaries",
+    "Source": "Source",
+    "Population": "Population",
+    "people per hectare": "people per hectare",
+    "Estimated number of people living in an area.": "Estimated number of people living in an area.",
+    "Population age groups": "Population age groups",
+    "Estimated number of people living in an area, grouped by age and gender.": "Estimated number of people living in an area, grouped by age and gender.",
+    "Male 0 - 1 years": "Male 0 - 1 years",
+    "Male 1 - 4 years": "Male 1 - 4 years",
+    "Male 5 - 9 years": "Male 5 - 9 years",
+    "Male 10 - 14 years": "Male 10 - 14 years",
+    "Male 15 - 19 years": "Male 15 - 19 years",
+    "Male 20 - 24 years": "Male 20 - 24 years",
+    "Male 25 - 29 years": "Male 25 - 29 years",
+    "Male 30 - 34 years": "Male 30 - 34 years",
+    "Male 35 - 39 years": "Male 35 - 39 years",
+    "Male 40 - 44 years": "Male 40 - 44 years",
+    "Male 45 - 49 years": "Male 45 - 49 years",
+    "Male 50 - 54 years": "Male 50 - 54 years",
+    "Male 55 - 59 years": "Male 55 - 59 years",
+    "Male 60 - 64 years": "Male 60 - 64 years",
+    "Male 65 - 69 years": "Male 65 - 69 years",
+    "Male 70 - 74 years": "Male 70 - 74 years",
+    "Male 75 - 79 years": "Male 75 - 79 years",
+    "Male 80 years and above": "Male 80 years and above",
+    "Female 0 - 1 years": "Female 0 - 1 years",
+    "Female 1 - 4 years": "Female 1 - 4 years",
+    "Female 5 - 9 years": "Female 5 - 9 years",
+    "Female 10 - 14 years": "Female 10 - 14 years",
+    "Female 15 - 19 years": "Female 15 - 19 years",
+    "Female 20 - 24 years": "Female 20 - 24 years",
+    "Female 25 - 29 years": "Female 25 - 29 years",
+    "Female 30 - 34 years": "Female 30 - 34 years",
+    "Female 35 - 39 years": "Female 35 - 39 years",
+    "Female 40 - 44 years": "Female 40 - 44 years",
+    "Female 45 - 49 years": "Female 45 - 49 years",
+    "Female 50 - 54 years": "Female 50 - 54 years",
+    "Female 55 - 59 years": "Female 55 - 59 years",
+    "Female 60 - 64 years": "Female 60 - 64 years",
+    "Female 65 - 69 years": "Female 65 - 69 years",
+    "Female 70 - 74 years": "Female 70 - 74 years",
+    "Female 75 - 79 years": "Female 75 - 79 years",
+    "Female 80 years and above": "Female 80 years and above",
+    "Building footprints": "Building footprints",
+    "Number of buildings": "Number of buildings",
+    "The outlines of buildings derived from high-resolution satellite imagery. Only for the continent of Africa.": "The outlines of buildings derived from high-resolution satellite imagery. Only for the continent of Africa.",
+    "Building counts are only available for smaller organisation unit areas.": "Building counts are only available for smaller organisation unit areas.",
+    "Select a smaller area or single organization unit to see the count of buildings.": "Select a smaller area or single organization unit to see the count of buildings.",
+    "Elevation": "Elevation",
+    "meters": "meters",
+    "Elevation above sea-level.": "Elevation above sea-level.",
+    "Precipitation": "Precipitation",
+    "millimeter": "millimeter",
+    "Precipitation collected from satellite and weather stations on the ground. The values are in millimeters within 5 days periods. Updated monthly, during the 3rd week of the following month.": "Precipitation collected from satellite and weather stations on the ground. The values are in millimeters within 5 days periods. Updated monthly, during the 3rd week of the following month.",
+    "Temperature": "Temperature",
+    "°C during daytime": "°C during daytime",
+    "Land surface temperatures collected from satellite. Blank spots will appear in areas with a persistent cloud cover.": "Land surface temperatures collected from satellite. Blank spots will appear in areas with a persistent cloud cover.",
+    "Landcover": "Landcover",
+    "Distinct landcover types collected from satellites.": "Distinct landcover types collected from satellites.",
+    "Evergreen Needleleaf forest": "Evergreen Needleleaf forest",
+    "Evergreen Broadleaf forest": "Evergreen Broadleaf forest",
+    "Deciduous Needleleaf forest": "Deciduous Needleleaf forest",
+    "Deciduous Broadleaf forest": "Deciduous Broadleaf forest",
+    "Mixed forest": "Mixed forest",
+    "Closed shrublands": "Closed shrublands",
+    "Open shrublands": "Open shrublands",
+    "Woody savannas": "Woody savannas",
+    "Savannas": "Savannas",
+    "Grasslands": "Grasslands",
+    "Permanent wetlands": "Permanent wetlands",
+    "Croplands": "Croplands",
+    "Urban and built-up": "Urban and built-up",
+    "Cropland/Natural vegetation mosaic": "Cropland/Natural vegetation mosaic",
+    "Snow and ice": "Snow and ice",
+    "Barren or sparsely vegetated": "Barren or sparsely vegetated",
+    "Water": "Water",
+    "Nighttime lights": "Nighttime lights",
+    "light intensity": "light intensity",
+    "Light intensity from cities, towns, and other sites with persistent lighting, including gas flares.": "Light intensity from cities, towns, and other sites with persistent lighting, including gas flares.",
+    "Could not get aggregate data": "Could not get aggregate data",
+    "Points": "Points",
+    "Mid": "Mid",
+    "Value": "Value",
+    "Error": "Error",
+    "Classes": "Classes",
+    "Select Data Item": "Select Data Item",
+    "Update": "Update",
+    "Legend set": "Legend set",
+    "Please wait...": "Please wait...",
+    "Layer type is required": "Layer type is required",
+    "Choropleth": "Choropleth",
+    "Bubble": "Bubble",
+    "A data item is required": "A data item is required",
+    "Data Item": "Data Item",
+    "Change": "Change",
+    "Select": "Select",
+    "Legend": "Legend",
+    "Custom legend": "Custom legend",
+    "Legend set is required": "Legend set is required",
+    "Radius": "Radius",
+    "Configure Thematic Layer": "Configure Thematic Layer",
+    "Loading ...": "Loading ..."
+}

package/build/cjs/locales/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+var _translations = _interopRequireDefault(require("./en/translations.json"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//------------------------------------------------------------------------------
+// <auto-generated>
+// This code was generated by d2-i18n-generate.
+//
+// Changes to this file may cause incorrect behavior and will be lost if
+// the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+
+const namespace = 'default';
+_d2I18n.default.addResources('en', namespace, _translations.default);
+var _default = _d2I18n.default;
+exports.default = _default;

package/build/es/components/ChartAnalytics/ChartAnalytics.stories.js

@@ -0,0 +1,235 @@
+import { CssReset } from "@dhis2/ui";
+import HighCharts from "highcharts";
+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 ChartAnalytics from ".";
+const Template = args => /*#__PURE__*/React.createElement(ChartAnalytics, args);
+setupHighchartsModules(HighCharts);
+export const Column = Template.bind({});
+Column.args = {
+  analytics: columnData,
+  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,
+  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,
+  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,
+  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,
+  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,
+  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,
+  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,
+  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 => {
+    const [chartRef, setChartRef] = useState(null);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: 1000,
+        height: "100%",
+        display: "flex",
+        gap: 8,
+        flexDirection: "column"
+      }
+    }, /*#__PURE__*/React.createElement(CssReset, null), /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: "100%",
+        display: "flex",
+        justifyContent: "end"
+      }
+    }, /*#__PURE__*/React.createElement(ChartDownloadMenu, {
+      chartRef: chartRef
+    })), /*#__PURE__*/React.createElement(ChartStory, {
+      ref: setChartRef
+    }));
+  }]
+};

package/build/es/components/ChartAnalytics/ChartAnalytics.test.js

@@ -0,0 +1,46 @@
+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 { mount } from "@cypress/react";
+import HighCharts from "highcharts";
+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 = {
+  analytics: columnData,
+  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 /*#__PURE__*/React.createElement(ChartAnalytics, props);
+}
+function ExportTestComponent() {
+  const [chartRef, setChartRef] = useState(null);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ChartDownloadMenu, {
+    chartRef: chartRef
+  })), /*#__PURE__*/React.createElement(ChartAnalytics, _extends({}, props, {
+    ref: setChartRef
+  })));
+}
+describe("Chart Component Tests", () => {
+  setupHighchartsModules(HighCharts);
+  it("Mounts without errors", () => {
+    mount( /*#__PURE__*/React.createElement(TestComponent, null));
+  });
+  it("Can be exported as PDF", () => {
+    mount( /*#__PURE__*/React.createElement(ExportTestComponent, null));
+  });
+});

package/build/es/components/ChartAnalytics/components/DownloadMenu/components/Menu.js

@@ -0,0 +1,41 @@
+import { FlyoutMenu, Menu, MenuDivider, MenuItem, Popover } from "@dhis2/ui";
+import { isEmpty, map } from "lodash";
+import React from "react";
+import { chartMenuSections } from "../constants/menu";
+export function ChartMenu(_ref) {
+  let {
+    menuRef,
+    onClick,
+    onClose,
+    exclude = []
+  } = _ref;
+  const onMenuClick = action => () => {
+    onClick(action);
+    onClose();
+  };
+  const menuSections = map(chartMenuSections, section => {
+    return {
+      ...section,
+      menuItems: section.menuItems.filter(item => !exclude.includes(item.name))
+    };
+  }).filter(section => !isEmpty(section.menuItems));
+  return /*#__PURE__*/React.createElement(Popover, {
+    onClickOutside: onClose,
+    onClose: onClose,
+    reference: menuRef
+  }, /*#__PURE__*/React.createElement(FlyoutMenu, null, /*#__PURE__*/React.createElement(Menu, null, menuSections === null || menuSections === void 0 ? void 0 : menuSections.map((section, index) => {
+    var _section$menuItems;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, (_section$menuItems = section.menuItems) === null || _section$menuItems === void 0 ? void 0 : _section$menuItems.map(_ref2 => {
+      let {
+        name,
+        label
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(MenuItem, {
+        key: `${name}-menu-item`,
+        dataTest: `download-${name}`,
+        label: label,
+        onClick: onMenuClick(name)
+      });
+    }), index !== menuSections.length - 1 && /*#__PURE__*/React.createElement(MenuDivider, null));
+  }))));
+}

package/build/es/components/ChartAnalytics/components/DownloadMenu/constants/menu.js

@@ -0,0 +1,26 @@
+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/build/es/components/ChartAnalytics/components/DownloadMenu/index.js

@@ -0,0 +1,58 @@
+import { IconMore24 } from "@dhis2/ui";
+import React, { useRef, useState } from "react";
+import { onCSVDownload, onFullScreenView, onImageDownload, onPDFDownload, onViewAsTable } from "../../services/export";
+import { ChartMenu } from "./components/Menu";
+function ChartDownloadMenu(_ref) {
+  let {
+    chartRef,
+    exclude,
+    icon
+  } = _ref;
+  const menuButtonRef = useRef(null);
+  const [menuRef, setMenuRef] = useState(null);
+  const toggleMenu = () => {
+    if (menuRef === null) {
+      setMenuRef(menuButtonRef.current);
+    } else {
+      setMenuRef(null);
+    }
+  };
+  const chart = chartRef;
+  const onMenuClick = action => {
+    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 /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    onClick: toggleMenu,
+    ref: menuButtonRef
+  }, icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React.createElement(IconMore24, null)), menuRef && /*#__PURE__*/React.createElement(ChartMenu, {
+    exclude: exclude,
+    onClick: onMenuClick,
+    onClose: toggleMenu,
+    menuRef: menuRef
+  }));
+}
+export default ChartDownloadMenu;

package/build/es/components/ChartAnalytics/components/DownloadMenu/interfaces/menu.js

@@ -0,0 +1 @@
+export {};