@hisptz/dhis2-analytics 1.0.4 → 1.0.6

package/build/es/components/ChartAnalytics/models/multi-series.js

@@ -0,0 +1,104 @@
+import { compact, head } from "lodash";
+import { getAllCategories, getDimensionHeaderIndex } from "../utils/chart";
+import { DHIS2Chart } from "./index";
+export class DHIS2MultiSeriesChart extends DHIS2Chart {
+  getHighchartsType() {
+    return "";
+  }
+  getPlotOptions() {
+    return {
+      column: {},
+      line: {}
+    };
+  }
+  getSeries() {
+    var _analytics$headers, _analytics$headers2, _head, _analytics$headers3, _seriesConfig$series;
+    const analytics = this.analytics;
+    const config = this.config;
+    const categoryDimension = head(config.layout.category);
+    const seriesConfig = this.config.multiSeries;
+    const categoryIndex = getDimensionHeaderIndex((_analytics$headers = analytics.headers) !== null && _analytics$headers !== void 0 ? _analytics$headers : [], categoryDimension !== null && categoryDimension !== void 0 ? categoryDimension : "");
+    const seriesIndex = getDimensionHeaderIndex((_analytics$headers2 = analytics.headers) !== null && _analytics$headers2 !== void 0 ? _analytics$headers2 : [], (_head = head(config.layout.series)) !== null && _head !== void 0 ? _head : "");
+    const valueIndex = getDimensionHeaderIndex((_analytics$headers3 = analytics.headers) !== null && _analytics$headers3 !== void 0 ? _analytics$headers3 : [], "value");
+    if (!categoryDimension) {
+      throw new Error("At least one category dimension is required");
+    }
+    if (!seriesConfig) {
+      throw new Error("MultiSeries config is required for chart type multi-series");
+    }
+    return compact(seriesConfig === null || seriesConfig === void 0 ? void 0 : (_seriesConfig$series = seriesConfig.series) === null || _seriesConfig$series === void 0 ? void 0 : _seriesConfig$series.map(_ref => {
+      var _analytics$metaData, _analytics$metaData2;
+      let {
+        id,
+        as,
+        cumulative,
+        yAxis
+      } = _ref;
+      const dataItem = (_analytics$metaData = analytics.metaData) === null || _analytics$metaData === void 0 ? void 0 : _analytics$metaData.items[id];
+      const categoryItems = (_analytics$metaData2 = analytics.metaData) === null || _analytics$metaData2 === void 0 ? void 0 : _analytics$metaData2.dimensions[categoryDimension];
+      const data = categoryItems === null || categoryItems === void 0 ? void 0 : categoryItems.map(item => {
+        var _analytics$rows;
+        const row = (_analytics$rows = analytics.rows) === null || _analytics$rows === void 0 ? void 0 : _analytics$rows.find(row => row[categoryIndex] === item && row[seriesIndex] === id);
+        return row !== null && row !== void 0 && row[valueIndex] ? parseFloat(row === null || row === void 0 ? void 0 : row[valueIndex]) : 0;
+      });
+      let cumulativeData = [];
+      if (cumulative) {
+        var _data$reduce;
+        cumulativeData = (_data$reduce = data === null || data === void 0 ? void 0 : data.reduce((acc, curr, index) => {
+          if (index === 0) {
+            return [...acc, curr];
+          }
+          return [...acc, acc[index - 1] + curr];
+        }, [])) !== null && _data$reduce !== void 0 ? _data$reduce : [];
+      }
+      return {
+        name: dataItem === null || dataItem === void 0 ? void 0 : dataItem.name,
+        data: cumulative ? cumulativeData : data,
+        type: as,
+        yAxis: yAxis !== null && yAxis !== void 0 ? yAxis : 0
+      };
+    }));
+  }
+  getXAxis() {
+    return {
+      type: "category",
+      categories: getAllCategories(this.analytics, this.config),
+      crosshair: true,
+      labels: {
+        enabled: true
+      },
+      title: {
+        text: ""
+      }
+    };
+  }
+  getYAxis() {
+    var _this$config$multiSer, _this$config$multiSer3, _this$config$multiSer4, _this$config$multiSer5, _yAxes$0$plotLines, _styles$color, _styles$dashStyle, _styles$width, _styles$zIndex;
+    let yAxes = [];
+    if ((_this$config$multiSer = this.config.multiSeries) !== null && _this$config$multiSer !== void 0 && _this$config$multiSer.yAxes) {
+      var _this$config$multiSer2;
+      yAxes = (_this$config$multiSer2 = this.config.multiSeries) === null || _this$config$multiSer2 === void 0 ? void 0 : _this$config$multiSer2.yAxes;
+    } else {
+      yAxes = super.getYAxis();
+    }
+    if (!((_this$config$multiSer3 = this.config.multiSeries) !== null && _this$config$multiSer3 !== void 0 && _this$config$multiSer3.target)) {
+      return yAxes;
+    }
+    const {
+      value,
+      styles,
+      label
+    } = (_this$config$multiSer4 = (_this$config$multiSer5 = this.config.multiSeries) === null || _this$config$multiSer5 === void 0 ? void 0 : _this$config$multiSer5.target) !== null && _this$config$multiSer4 !== void 0 ? _this$config$multiSer4 : {};
+    return [{
+      ...yAxes[0],
+      plotLines: [...((_yAxes$0$plotLines = yAxes[0].plotLines) !== null && _yAxes$0$plotLines !== void 0 ? _yAxes$0$plotLines : []), {
+        color: (_styles$color = styles === null || styles === void 0 ? void 0 : styles.color) !== null && _styles$color !== void 0 ? _styles$color : "#00FF00",
+        dashStyle: (_styles$dashStyle = styles === null || styles === void 0 ? void 0 : styles.dashStyle) !== null && _styles$dashStyle !== void 0 ? _styles$dashStyle : "Solid",
+        value,
+        width: (_styles$width = styles === null || styles === void 0 ? void 0 : styles.width) !== null && _styles$width !== void 0 ? _styles$width : 2,
+        zIndex: (_styles$zIndex = styles === null || styles === void 0 ? void 0 : styles.zIndex) !== null && _styles$zIndex !== void 0 ? _styles$zIndex : 1000,
+        label: label
+      }]
+    }, ...yAxes.slice(1)];
+  }
+}

package/build/es/components/ChartAnalytics/models/pie.js

@@ -0,0 +1,46 @@
+import { head } from "lodash";
+import { DHIS2Chart } from "./index";
+export class DHIS2PieChart extends DHIS2Chart {
+  getHighchartsType() {
+    return "pie";
+  }
+  getPlotOptions() {
+    return {
+      pie: {
+        allowPointSelect: true,
+        cursor: "pointer",
+        dataLabels: {
+          enabled: true,
+          format: "<b>{point.name}</b>: {point.percentage:.1f} %"
+        }
+      }
+    };
+  }
+  getSeries() {
+    var _analytics$headers$fi, _analytics$headers, _analytics$headers$fi2, _analytics$headers2, _analytics$metaData, _analytics$metaData$d, _analytics$metaData$i, _analytics$metaData2, _analytics$metaData2$, _analytics$metaData2$2;
+    const analytics = this.analytics;
+    const config = this.config;
+    const seriesDimension = head(config.layout.series);
+    const seriesIndex = (_analytics$headers$fi = analytics === null || analytics === void 0 ? void 0 : (_analytics$headers = analytics.headers) === null || _analytics$headers === void 0 ? void 0 : _analytics$headers.findIndex(h => h.name === seriesDimension)) !== null && _analytics$headers$fi !== void 0 ? _analytics$headers$fi : -1;
+    const valueIndex = (_analytics$headers$fi2 = analytics === null || analytics === void 0 ? void 0 : (_analytics$headers2 = analytics.headers) === null || _analytics$headers2 === void 0 ? void 0 : _analytics$headers2.findIndex(h => h.name === "value")) !== null && _analytics$headers$fi2 !== void 0 ? _analytics$headers$fi2 : -1;
+    if (!seriesDimension) {
+      throw new Error("Pie chart must have a series dimension");
+    }
+    const seriesValues = (_analytics$metaData = analytics.metaData) === null || _analytics$metaData === void 0 ? void 0 : (_analytics$metaData$d = _analytics$metaData.dimensions) === null || _analytics$metaData$d === void 0 ? void 0 : _analytics$metaData$d[seriesDimension];
+    return [{
+      id: seriesDimension !== null && seriesDimension !== void 0 ? seriesDimension : "",
+      name: (_analytics$metaData$i = (_analytics$metaData2 = analytics.metaData) === null || _analytics$metaData2 === void 0 ? void 0 : (_analytics$metaData2$ = _analytics$metaData2.items) === null || _analytics$metaData2$ === void 0 ? void 0 : (_analytics$metaData2$2 = _analytics$metaData2$[seriesDimension]) === null || _analytics$metaData2$2 === void 0 ? void 0 : _analytics$metaData2$2.name) !== null && _analytics$metaData$i !== void 0 ? _analytics$metaData$i : "",
+      data: seriesValues === null || seriesValues === void 0 ? void 0 : seriesValues.map(value => {
+        var _analytics$rows, _analytics$metaData3, _analytics$metaData3$, _analytics$metaData3$2, _row$valueIndex;
+        const row = analytics === null || analytics === void 0 ? void 0 : (_analytics$rows = analytics.rows) === null || _analytics$rows === void 0 ? void 0 : _analytics$rows.find(row => row[seriesIndex] === value);
+        return {
+          name: (_analytics$metaData3 = analytics.metaData) === null || _analytics$metaData3 === void 0 ? void 0 : (_analytics$metaData3$ = _analytics$metaData3.items) === null || _analytics$metaData3$ === void 0 ? void 0 : (_analytics$metaData3$2 = _analytics$metaData3$[value]) === null || _analytics$metaData3$2 === void 0 ? void 0 : _analytics$metaData3$2.name,
+          y: row !== null && row !== void 0 && row[valueIndex] ? parseFloat((_row$valueIndex = row === null || row === void 0 ? void 0 : row[valueIndex]) !== null && _row$valueIndex !== void 0 ? _row$valueIndex : "") : 0
+        };
+      })
+    }];
+  }
+  getXAxis() {
+    return undefined;
+  }
+}

package/build/es/components/ChartAnalytics/services/export.js

@@ -0,0 +1,36 @@
+import HighChartsExportCSV from "highcharts/modules/export-data";
+import HighChartsExport from "highcharts/modules/exporting";
+import HighChartsFullScreen from "highcharts/modules/full-screen";
+export function setupHighchartsModules(highcharts) {
+  HighChartsExport(highcharts);
+  HighChartsExportCSV(highcharts);
+  HighChartsFullScreen(highcharts);
+}
+export function onFullScreenView(chartRef, options) {
+  var _chartRef$chart;
+  chartRef === null || chartRef === void 0 ? void 0 : (_chartRef$chart = chartRef.chart) === null || _chartRef$chart === void 0 ? void 0 : _chartRef$chart.fullscreen.toggle();
+}
+export function onPDFDownload(chartRef, options) {
+  chartRef === null || chartRef === void 0 ? void 0 : chartRef.chart.exportChart({
+    type: "application/pdf"
+  }, options !== null && options !== void 0 ? options : {});
+}
+export function onCSVDownload(chartRef, options) {
+  chartRef === null || chartRef === void 0 ? void 0 : chartRef.chart.downloadCSV();
+}
+export const onImageDownload = (chartRef, type, options) => {
+  chartRef === null || chartRef === void 0 ? void 0 : chartRef.chart.exportChart({
+    type: `image/${type}`
+  }, options !== null && options !== void 0 ? options : {});
+};
+export const onViewAsTable = (chartRef, show) => {
+  var _chartRef$chart2;
+  const options = chartRef === null || chartRef === void 0 ? void 0 : chartRef.chart.options;
+  chartRef === null || chartRef === void 0 ? void 0 : (_chartRef$chart2 = chartRef.chart) === null || _chartRef$chart2 === void 0 ? void 0 : _chartRef$chart2.update({
+    ...options,
+    exporting: {
+      ...(options === null || options === void 0 ? void 0 : options.exporting),
+      showTable: show
+    }
+  });
+};

package/build/es/components/ChartAnalytics/styles/custom-highchart.css

@@ -0,0 +1,48 @@
+
+.highcharts-data-table table {
+    border: 1px solid rgb(232, 237, 242);
+    text-align: left;
+    min-width: 100%;
+    border-collapse: collapse;
+    vertical-align: top;
+}
+
+.highcharts-data-table td,
+.highcharts-data-table th,
+.highcharts-data-table caption {
+    font-size: 14px;
+    line-height: 16px;
+    padding: 8px 6px;
+    height: 32px;
+    border-bottom: 1px solid rgb(232, 237, 242);
+}
+
+.highcharts-data-table thead tr {
+    background: transparent;
+}
+
+.highcharts-data-table tr:nth-child(even) {
+    background: rgb(251, 252, 253);
+}
+
+.highcharts-data-table tr {
+    cursor: pointer;
+}
+
+.highcharts-data-table tr:hover {
+    background: rgb(251, 252, 253);
+}
+
+.highcharts-data-table caption {
+    border-bottom: none;
+    font-size: 1.1em;
+    font-weight: bold;
+}
+
+.highcharts-sort-ascending::after {
+    content: " ↓";
+}
+
+.highcharts-sort-descending::after {
+    content: " ↑";
+}

package/build/es/components/ChartAnalytics/types/props.js

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

package/build/es/components/ChartAnalytics/utils/chart.js

@@ -0,0 +1,122 @@
+import { compact, find, findIndex, head, isEmpty, set } from "lodash";
+import { DHIS2ColumnChart, DHIS2StackedColumnChart } from "../models/column";
+import { DHIS2LineChart } from "../models/line";
+import { DHIS2MultiSeriesChart } from "../models/multi-series";
+import { DHIS2PieChart } from "../models/pie";
+export function getDimensionHeaderIndex(headers, name) {
+  return findIndex(headers, {
+    name
+  });
+}
+export function getPointSeries(analytics, config, highchartsType) {
+  const series = config.layout.series;
+  return series.map(seriesName => {
+    var _analytics$headers;
+    const header = analytics === null || analytics === void 0 ? void 0 : (_analytics$headers = analytics.headers) === null || _analytics$headers === void 0 ? void 0 : _analytics$headers.find(header => header.name === seriesName);
+    if (!header) {
+      return undefined;
+    }
+    if (analytics !== null && analytics !== void 0 && analytics.metaData) {
+      return getColumnSeries(analytics, header, config, highchartsType);
+    }
+  })[0];
+}
+export function getColumnSeries(analytics, header, config, highchartsType) {
+  var _analytics$headers2, _analytics$headers3, _config$colors, _analytics$metaData, _dimensions;
+  const headerIndex = analytics === null || analytics === void 0 ? void 0 : (_analytics$headers2 = analytics.headers) === null || _analytics$headers2 === void 0 ? void 0 : _analytics$headers2.findIndex(h => header.name === h.name);
+  const valueIndex = analytics === null || analytics === void 0 ? void 0 : (_analytics$headers3 = analytics.headers) === null || _analytics$headers3 === void 0 ? void 0 : _analytics$headers3.findIndex(h => h.name === "value");
+  const colors = (_config$colors = config.colors) !== null && _config$colors !== void 0 ? _config$colors : [];
+  const {
+    items,
+    dimensions
+  } = (_analytics$metaData = analytics === null || analytics === void 0 ? void 0 : analytics.metaData) !== null && _analytics$metaData !== void 0 ? _analytics$metaData : {};
+  const categoriesDimension = config.layout.category;
+  const seriesDimensionValues = (_dimensions = dimensions === null || dimensions === void 0 ? void 0 : dimensions[header.name]) !== null && _dimensions !== void 0 ? _dimensions : [];
+  return head(categoriesDimension === null || categoriesDimension === void 0 ? void 0 : categoriesDimension.map(categoryDimension => {
+    var _analytics$headers4;
+    const categories = dimensions === null || dimensions === void 0 ? void 0 : dimensions[categoryDimension];
+    const categoryDimensionIndex = analytics === null || analytics === void 0 ? void 0 : (_analytics$headers4 = analytics.headers) === null || _analytics$headers4 === void 0 ? void 0 : _analytics$headers4.findIndex(h => h.name === categoryDimension);
+    return seriesDimensionValues === null || seriesDimensionValues === void 0 ? void 0 : seriesDimensionValues.map((seriesDimensionValue, index) => {
+      var _items;
+      const data = categories === null || categories === void 0 ? void 0 : categories.map(category => {
+        const row = find(analytics === null || analytics === void 0 ? void 0 : analytics.rows, row => row[headerIndex !== null && headerIndex !== void 0 ? headerIndex : -1] === seriesDimensionValue && row[categoryDimensionIndex !== null && categoryDimensionIndex !== void 0 ? categoryDimensionIndex : -1] === category);
+        return row !== null && row !== void 0 && row[valueIndex !== null && valueIndex !== void 0 ? valueIndex : -1] ? parseFloat(row === null || row === void 0 ? void 0 : row[valueIndex !== null && valueIndex !== void 0 ? valueIndex : -1]) : 0;
+      });
+      return {
+        name: items === null || items === void 0 ? void 0 : (_items = items[seriesDimensionValue]) === null || _items === void 0 ? void 0 : _items.name,
+        data,
+        type: highchartsType,
+        color: colors[index % colors.length]
+      };
+    });
+  }));
+}
+function getCategories(_ref, _ref2) {
+  let {
+    name
+  } = _ref;
+  let {
+    items,
+    dimensions
+  } = _ref2;
+  const categories = dimensions === null || dimensions === void 0 ? void 0 : dimensions[name];
+  return categories === null || categories === void 0 ? void 0 : categories.map(category => {
+    var _items$name, _items2;
+    return (_items$name = (_items2 = items[category]) === null || _items2 === void 0 ? void 0 : _items2.name) !== null && _items$name !== void 0 ? _items$name : "";
+  });
+}
+export function getAllCategories(analytics, config) {
+  const categories = config.layout.category;
+  return compact(categories === null || categories === void 0 ? void 0 : categories.map(category => {
+    var _analytics$headers5;
+    const header = analytics === null || analytics === void 0 ? void 0 : (_analytics$headers5 = analytics.headers) === null || _analytics$headers5 === void 0 ? void 0 : _analytics$headers5.find(header => header.name === category);
+    if (!header) {
+      return undefined;
+    }
+    if (analytics !== null && analytics !== void 0 && analytics.metaData) {
+      return getCategories(header, analytics === null || analytics === void 0 ? void 0 : analytics.metaData);
+    }
+  }))[0];
+}
+export function updateLayout(config, _ref3) {
+  let {
+    type
+  } = _ref3;
+  if (type === config.type) {
+    return config.layout;
+  }
+  const updatedLayout = {
+    ...config.layout
+  };
+  switch (type) {
+    case "pie":
+      set(updatedLayout, "category", []);
+      if (isEmpty(updatedLayout.series)) {
+        if (!isEmpty(config.layout.category)) {
+          set(updatedLayout, "series", [head(config.layout.category)]);
+        } else {
+          throw new Error("Invalid layout for pie chart");
+        }
+      }
+      if (updatedLayout.series.length > 1) {
+        set(updatedLayout, "series", [head(updatedLayout.series)]);
+      }
+  }
+  return updatedLayout;
+}
+export function getChartInstance(id, analytics, config) {
+  switch (config.type) {
+    case "column":
+      return new DHIS2ColumnChart(id, analytics, config);
+    case "stacked-column":
+      return new DHIS2StackedColumnChart(id, analytics, config);
+    case "pie":
+      return new DHIS2PieChart(id, analytics, config);
+    case "line":
+      return new DHIS2LineChart(id, analytics, config);
+    case "multi-series":
+      return new DHIS2MultiSeriesChart(id, analytics, config);
+    default:
+      throw new Error(`Unsupported chart type: ${config.type}`);
+  }
+}

package/{src/components/CircularProgressDashboard/CircularProgressIndicator.stories.tsx → build/es/components/CircularProgressDashboard/CircularProgressIndicator.stories.js}

@@ -1,17 +1,12 @@
-import type {Story} from "@storybook/react";
 import React from "react";
-import {CircularDashboardProps} from "./types/props";
-import {CircularProgressDashboard} from ".";
-
-const Template: Story<CircularDashboardProps> = (args) => <CircularProgressDashboard {...args} />;
-
+import { CircularProgressDashboard } from ".";
+const Template = args => /*#__PURE__*/React.createElement(CircularProgressDashboard, args);
 export const Default = Template.bind({});
 Default.args = {
   numerator: 7,
   denominator: 10,
-  size: 500,
+  size: 500
 };
-
 export const WithStrokeStyling = Template.bind({});
 WithStrokeStyling.args = {
   numerator: 7,
@@ -19,10 +14,9 @@ WithStrokeStyling.args = {
   size: 500,
   strokeStyle: {
     width: "10%",
-    color: "red",
-  },
+    color: "red"
+  }
 };
-
 export const WithTextStyling = Template.bind({});
 WithTextStyling.args = {
   numerator: 7,
@@ -31,11 +25,10 @@ WithTextStyling.args = {
   textStyle: {
     color: "red",
     fontWeight: "bold",
-    fontSize: "20vh",
-  },
+    fontSize: "20vh"
+  }
 };
-
 export default {
   title: "Components/Circular Progress Indicator",
-  component: CircularProgressDashboard,
-};
+  component: CircularProgressDashboard
+};

package/build/es/components/CircularProgressDashboard/CircularProgressIndicator.test.js

@@ -0,0 +1,10 @@
+import { mount } from "@cypress/react";
+import React from "react";
+import { CircularProgressDashboard } from ".";
+describe("CircularProgressDashboard", () => {
+  it("should render", () => {
+    mount( /*#__PURE__*/React.createElement(CircularProgressDashboard, {
+      size: "100px"
+    }));
+  });
+});

package/build/es/components/CircularProgressDashboard/index.js

@@ -0,0 +1,41 @@
+import { colors } from "@dhis2/ui";
+import React, { useMemo } from "react";
+import { CircularProgressbarWithChildren } from "react-circular-progressbar";
+export function CircularProgressDashboard(_ref) {
+  var _strokeStyle$color, _textStyle$fontSize, _ref2, _textStyle$color;
+  let {
+    numerator,
+    size,
+    denominator,
+    value,
+    textStyle,
+    strokeStyle
+  } = _ref;
+  const filledSectionFieldsPercentage = useMemo(() => {
+    return value !== undefined ? value : Math.floor((numerator !== null && numerator !== void 0 ? numerator : 0) / (denominator !== null && denominator !== void 0 ? denominator : 1) * 100);
+  }, [numerator, denominator, value]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: "transparent",
+      width: size
+    }
+  }, /*#__PURE__*/React.createElement(CircularProgressbarWithChildren, {
+    styles: {
+      path: {
+        stroke: (_strokeStyle$color = strokeStyle === null || strokeStyle === void 0 ? void 0 : strokeStyle.color) !== null && _strokeStyle$color !== void 0 ? _strokeStyle$color : colors.blue700
+      }
+    },
+    strokeWidth: 7,
+    value: filledSectionFieldsPercentage
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      ...(textStyle !== null && textStyle !== void 0 ? textStyle : {}),
+      fontSize: ((_textStyle$fontSize = textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize) !== null && _textStyle$fontSize !== void 0 ? _textStyle$fontSize : typeof size === "number") ? 0.3 * size : "100%",
+      marginTop: -11
+    }
+  }, /*#__PURE__*/React.createElement("strong", {
+    style: {
+      color: (_ref2 = (_textStyle$color = textStyle === null || textStyle === void 0 ? void 0 : textStyle.color) !== null && _textStyle$color !== void 0 ? _textStyle$color : strokeStyle === null || strokeStyle === void 0 ? void 0 : strokeStyle.color) !== null && _ref2 !== void 0 ? _ref2 : colors.blue700
+    }
+  }, filledSectionFieldsPercentage, "%"))));
+}

package/build/es/components/CircularProgressDashboard/types/props.js

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