@hisptz/dhis2-analytics 1.0.5 → 1.0.6

package/build/cjs/components/ChartAnalytics/models/index.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DHIS2Chart = void 0;
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+class DHIS2Chart {
+  constructor(id, analytics, config) {
+    _defineProperty(this, "id", void 0);
+    _defineProperty(this, "analytics", void 0);
+    _defineProperty(this, "config", void 0);
+    this.id = id;
+    this.analytics = analytics;
+    this.config = config;
+  }
+  getChartConfig() {
+    var _this$config;
+    return {
+      renderTo: this.id,
+      zoomType: "xy",
+      type: this.getHighchartsType(),
+      height: (_this$config = this.config) === null || _this$config === void 0 ? void 0 : _this$config.height,
+      styledMode: false
+    };
+  }
+  getOptions() {
+    var _this$config$colors, _this$config2, _this$config$highChar, _this$config3;
+    return {
+      yAxis: this.getYAxis(),
+      chart: this.getChartConfig(),
+      colors: (_this$config$colors = (_this$config2 = this.config) === null || _this$config2 === void 0 ? void 0 : _this$config2.colors) !== null && _this$config$colors !== void 0 ? _this$config$colors : ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"],
+      series: this.getSeries(),
+      plotOptions: this.getPlotOptions(),
+      title: {
+        text: ""
+      },
+      xAxis: this.getXAxis(),
+      exporting: this.getExporting(),
+      legend: {
+        enabled: true
+      },
+      credits: {
+        enabled: false
+      },
+      ...((_this$config$highChar = (_this$config3 = this.config) === null || _this$config3 === void 0 ? void 0 : _this$config3.highChartOverrides) !== null && _this$config$highChar !== void 0 ? _this$config$highChar : {})
+    };
+  }
+  getYAxis() {
+    return [{
+      title: {
+        text: "",
+        style: {
+          color: "#000000",
+          fontWeight: "normal",
+          fontSize: "14px"
+        }
+      },
+      labels: {
+        enabled: true,
+        style: {
+          color: "#000000",
+          fontWeight: "normal",
+          fontSize: "14px"
+        }
+      },
+      plotLines: [{
+        color: "#000000",
+        dashStyle: "Solid",
+        width: 2,
+        zIndex: 1000,
+        label: {
+          text: ""
+        }
+      }, {
+        color: "#bbbbbb",
+        dashStyle: "Solid",
+        zIndex: 1000,
+        width: 2,
+        label: {
+          text: ""
+        }
+      }]
+    }];
+  }
+  getExporting() {
+    var _this$config$name, _this$config4;
+    const name = (_this$config$name = (_this$config4 = this.config) === null || _this$config4 === void 0 ? void 0 : _this$config4.name) !== null && _this$config$name !== void 0 ? _this$config$name : "chart";
+    return {
+      filename: `${name}`,
+      sourceWidth: 1200,
+      buttons: {
+        contextButton: {
+          enabled: false
+        }
+      }
+    };
+  }
+}
+exports.DHIS2Chart = DHIS2Chart;

package/build/cjs/components/ChartAnalytics/models/line.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DHIS2LineChart = void 0;
+var _chart = require("../utils/chart");
+var _index = require("./index");
+class DHIS2LineChart extends _index.DHIS2Chart {
+  getHighchartsType() {
+    return "line";
+  }
+  getPlotOptions() {
+    return {
+      line: {}
+    };
+  }
+  getSeries() {
+    return (0, _chart.getPointSeries)(this.analytics, this.config, "line");
+  }
+  getXAxis() {
+    return {
+      type: "category",
+      categories: (0, _chart.getAllCategories)(this.analytics, this.config),
+      crosshair: true,
+      labels: {
+        enabled: true
+      },
+      title: {
+        text: ""
+      }
+    };
+  }
+}
+exports.DHIS2LineChart = DHIS2LineChart;

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

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DHIS2MultiSeriesChart = void 0;
+var _lodash = require("lodash");
+var _chart = require("../utils/chart");
+var _index = require("./index");
+class DHIS2MultiSeriesChart extends _index.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 = (0, _lodash.head)(config.layout.category);
+    const seriesConfig = this.config.multiSeries;
+    const categoryIndex = (0, _chart.getDimensionHeaderIndex)((_analytics$headers = analytics.headers) !== null && _analytics$headers !== void 0 ? _analytics$headers : [], categoryDimension !== null && categoryDimension !== void 0 ? categoryDimension : "");
+    const seriesIndex = (0, _chart.getDimensionHeaderIndex)((_analytics$headers2 = analytics.headers) !== null && _analytics$headers2 !== void 0 ? _analytics$headers2 : [], (_head = (0, _lodash.head)(config.layout.series)) !== null && _head !== void 0 ? _head : "");
+    const valueIndex = (0, _chart.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 (0, _lodash.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: (0, _chart.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)];
+  }
+}
+exports.DHIS2MultiSeriesChart = DHIS2MultiSeriesChart;

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

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DHIS2PieChart = void 0;
+var _lodash = require("lodash");
+var _index = require("./index");
+class DHIS2PieChart extends _index.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 = (0, _lodash.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;
+  }
+}
+exports.DHIS2PieChart = DHIS2PieChart;

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

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onCSVDownload = onCSVDownload;
+exports.onFullScreenView = onFullScreenView;
+exports.onImageDownload = void 0;
+exports.onPDFDownload = onPDFDownload;
+exports.onViewAsTable = void 0;
+exports.setupHighchartsModules = setupHighchartsModules;
+var _exportData = _interopRequireDefault(require("highcharts/modules/export-data"));
+var _exporting = _interopRequireDefault(require("highcharts/modules/exporting"));
+var _fullScreen = _interopRequireDefault(require("highcharts/modules/full-screen"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function setupHighchartsModules(highcharts) {
+  (0, _exporting.default)(highcharts);
+  (0, _exportData.default)(highcharts);
+  (0, _fullScreen.default)(highcharts);
+}
+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();
+}
+function onPDFDownload(chartRef, options) {
+  chartRef === null || chartRef === void 0 ? void 0 : chartRef.chart.exportChart({
+    type: "application/pdf"
+  }, options !== null && options !== void 0 ? options : {});
+}
+function onCSVDownload(chartRef, options) {
+  chartRef === null || chartRef === void 0 ? void 0 : chartRef.chart.downloadCSV();
+}
+const onImageDownload = (chartRef, type, options) => {
+  chartRef === null || chartRef === void 0 ? void 0 : chartRef.chart.exportChart({
+    type: `image/${type}`
+  }, options !== null && options !== void 0 ? options : {});
+};
+exports.onImageDownload = onImageDownload;
+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
+    }
+  });
+};
+exports.onViewAsTable = onViewAsTable;

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAllCategories = getAllCategories;
+exports.getChartInstance = getChartInstance;
+exports.getColumnSeries = getColumnSeries;
+exports.getDimensionHeaderIndex = getDimensionHeaderIndex;
+exports.getPointSeries = getPointSeries;
+exports.updateLayout = updateLayout;
+var _lodash = require("lodash");
+var _column = require("../models/column");
+var _line = require("../models/line");
+var _multiSeries = require("../models/multi-series");
+var _pie = require("../models/pie");
+function getDimensionHeaderIndex(headers, name) {
+  return (0, _lodash.findIndex)(headers, {
+    name
+  });
+}
+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];
+}
+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 (0, _lodash.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 = (0, _lodash.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 : "";
+  });
+}
+function getAllCategories(analytics, config) {
+  const categories = config.layout.category;
+  return (0, _lodash.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];
+}
+function updateLayout(config, _ref3) {
+  let {
+    type
+  } = _ref3;
+  if (type === config.type) {
+    return config.layout;
+  }
+  const updatedLayout = {
+    ...config.layout
+  };
+  switch (type) {
+    case "pie":
+      (0, _lodash.set)(updatedLayout, "category", []);
+      if ((0, _lodash.isEmpty)(updatedLayout.series)) {
+        if (!(0, _lodash.isEmpty)(config.layout.category)) {
+          (0, _lodash.set)(updatedLayout, "series", [(0, _lodash.head)(config.layout.category)]);
+        } else {
+          throw new Error("Invalid layout for pie chart");
+        }
+      }
+      if (updatedLayout.series.length > 1) {
+        (0, _lodash.set)(updatedLayout, "series", [(0, _lodash.head)(updatedLayout.series)]);
+      }
+  }
+  return updatedLayout;
+}
+function getChartInstance(id, analytics, config) {
+  switch (config.type) {
+    case "column":
+      return new _column.DHIS2ColumnChart(id, analytics, config);
+    case "stacked-column":
+      return new _column.DHIS2StackedColumnChart(id, analytics, config);
+    case "pie":
+      return new _pie.DHIS2PieChart(id, analytics, config);
+    case "line":
+      return new _line.DHIS2LineChart(id, analytics, config);
+    case "multi-series":
+      return new _multiSeries.DHIS2MultiSeriesChart(id, analytics, config);
+    default:
+      throw new Error(`Unsupported chart type: ${config.type}`);
+  }
+}

package/build/cjs/components/CircularProgressDashboard/CircularProgressIndicator.stories.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithTextStyling = exports.WithStrokeStyling = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require(".");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Template = args => /*#__PURE__*/_react.default.createElement(_.CircularProgressDashboard, args);
+const Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  numerator: 7,
+  denominator: 10,
+  size: 500
+};
+const WithStrokeStyling = Template.bind({});
+exports.WithStrokeStyling = WithStrokeStyling;
+WithStrokeStyling.args = {
+  numerator: 7,
+  denominator: 10,
+  size: 500,
+  strokeStyle: {
+    width: "10%",
+    color: "red"
+  }
+};
+const WithTextStyling = Template.bind({});
+exports.WithTextStyling = WithTextStyling;
+WithTextStyling.args = {
+  numerator: 7,
+  denominator: 10,
+  size: 500,
+  textStyle: {
+    color: "red",
+    fontWeight: "bold",
+    fontSize: "20vh"
+  }
+};
+var _default = {
+  title: "Components/Circular Progress Indicator",
+  component: _.CircularProgressDashboard
+};
+exports.default = _default;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+var _react = require("@cypress/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _ = require(".");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+describe("CircularProgressDashboard", () => {
+  it("should render", () => {
+    (0, _react.mount)( /*#__PURE__*/_react2.default.createElement(_.CircularProgressDashboard, {
+      size: "100px"
+    }));
+  });
+});

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

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CircularProgressDashboard = CircularProgressDashboard;
+var _ui = require("@dhis2/ui");
+var _react = _interopRequireWildcard(require("react"));
+var _reactCircularProgressbar = require("react-circular-progressbar");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function CircularProgressDashboard(_ref) {
+  var _strokeStyle$color, _textStyle$fontSize, _ref2, _textStyle$color;
+  let {
+    numerator,
+    size,
+    denominator,
+    value,
+    textStyle,
+    strokeStyle
+  } = _ref;
+  const filledSectionFieldsPercentage = (0, _react.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.default.createElement("div", {
+    style: {
+      backgroundColor: "transparent",
+      width: size
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactCircularProgressbar.CircularProgressbarWithChildren, {
+    styles: {
+      path: {
+        stroke: (_strokeStyle$color = strokeStyle === null || strokeStyle === void 0 ? void 0 : strokeStyle.color) !== null && _strokeStyle$color !== void 0 ? _strokeStyle$color : _ui.colors.blue700
+      }
+    },
+    strokeWidth: 7,
+    value: filledSectionFieldsPercentage
+  }, /*#__PURE__*/_react.default.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.default.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 : _ui.colors.blue700
+    }
+  }, filledSectionFieldsPercentage, "%"))));
+}

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

@@ -0,0 +1 @@
+"use strict";