@dhis2/analytics 28.0.0 → 28.0.2

package/build/cjs/index.js

@@ -215,6 +215,10 @@ var _exportNames = {
   LEGEND_DISPLAY_STYLE_FILL: true,
   LEGEND_DISPLAY_STYLE_TEXT: true,
   getColorByValueFromLegendSet: true,
+  HIDE_EMPTY_ROW_ITEMS_BEFORE_FIRST: true,
+  HIDE_EMPTY_ROW_ITEMS_AFTER_LAST: true,
+  HIDE_EMPTY_ROW_ITEMS_BEFORE_FIRST_AFTER_LAST: true,
+  HIDE_EMPTY_ROW_ITEMS_ALL: true,
   formatValue: true,
   COLOR_SET_DEFAULT: true,
   COLOR_SET_BASIC: true,
@@ -713,6 +717,30 @@ Object.defineProperty(exports, "FixedPeriodSelect", {
     return _FixedPeriodSelect.default;
   }
 });
+Object.defineProperty(exports, "HIDE_EMPTY_ROW_ITEMS_AFTER_LAST", {
+  enumerable: true,
+  get: function () {
+    return _hideEmptyRowItems.HIDE_EMPTY_ROW_ITEMS_AFTER_LAST;
+  }
+});
+Object.defineProperty(exports, "HIDE_EMPTY_ROW_ITEMS_ALL", {
+  enumerable: true,
+  get: function () {
+    return _hideEmptyRowItems.HIDE_EMPTY_ROW_ITEMS_ALL;
+  }
+});
+Object.defineProperty(exports, "HIDE_EMPTY_ROW_ITEMS_BEFORE_FIRST", {
+  enumerable: true,
+  get: function () {
+    return _hideEmptyRowItems.HIDE_EMPTY_ROW_ITEMS_BEFORE_FIRST;
+  }
+});
+Object.defineProperty(exports, "HIDE_EMPTY_ROW_ITEMS_BEFORE_FIRST_AFTER_LAST", {
+  enumerable: true,
+  get: function () {
+    return _hideEmptyRowItems.HIDE_EMPTY_ROW_ITEMS_BEFORE_FIRST_AFTER_LAST;
+  }
+});
 Object.defineProperty(exports, "ITEM", {
   enumerable: true,
   get: function () {
@@ -1951,6 +1979,7 @@ var _index10 = require("./modules/layoutUiRules/index.js");
 var _index11 = require("./visualizations/index.js");
 var _fontStyle = require("./modules/fontStyle.js");
 var _legends = require("./modules/legends.js");
+var _hideEmptyRowItems = require("./modules/hideEmptyRowItems.js");
 var _renderValue = require("./modules/renderValue.js");
 var _colorSets = require("./visualizations/util/colors/colorSets.js");
 var _index12 = require("./components/PeriodDimension/utils/index.js");

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

@@ -26,7 +26,7 @@
     "About this event chart": "",
     "About this event report": "",
     "This app could not retrieve required data.": "",
-    "Network error": "",
+    "Network error": "خطأ في الشبكة",
     "Data / Edit calculation": "",
     "Data / New calculation": "",
     "Remove item": "",
@@ -166,6 +166,7 @@
     "line list": "",
     "map": "خريطة",
     "visualization": "",
+    "Untitled {{visualizationType}}, {{date}}": "",
     "Edit": "تعديل",
     "Write a reply": "كتابة رد",
     "Post reply": "",
@@ -471,6 +472,7 @@
     "Single value": "قيمة مفردة",
     "Outlier table": "",
     "All charts": "",
+    "Map": "الخريطة",
     "{{seriesName}} (trend)": "",
     "Trend": "الاتجاه",
     "No legend for this series": "لا معلومات مفاتيح إيضاحية لهذه السلسلة",

package/build/cjs/modules/hideEmptyRowItems.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HIDE_EMPTY_ROW_ITEMS_BEFORE_FIRST_AFTER_LAST = exports.HIDE_EMPTY_ROW_ITEMS_BEFORE_FIRST = exports.HIDE_EMPTY_ROW_ITEMS_ALL = exports.HIDE_EMPTY_ROW_ITEMS_AFTER_LAST = void 0;
+const HIDE_EMPTY_ROW_ITEMS_BEFORE_FIRST = exports.HIDE_EMPTY_ROW_ITEMS_BEFORE_FIRST = 'BEFORE_FIRST';
+const HIDE_EMPTY_ROW_ITEMS_AFTER_LAST = exports.HIDE_EMPTY_ROW_ITEMS_AFTER_LAST = 'AFTER_LAST';
+const HIDE_EMPTY_ROW_ITEMS_BEFORE_FIRST_AFTER_LAST = exports.HIDE_EMPTY_ROW_ITEMS_BEFORE_FIRST_AFTER_LAST = 'BEFORE_FIRST_AFTER_LAST';
+const HIDE_EMPTY_ROW_ITEMS_ALL = exports.HIDE_EMPTY_ROW_ITEMS_ALL = 'ALL';

package/build/cjs/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueBackgroundColor.js

@@ -7,6 +7,7 @@ exports.getSingleValueBackgroundColor = getSingleValueBackgroundColor;
 var _legends = require("../../../../../../modules/legends.js");
 var _getSingleValueLegendColor = require("./getSingleValueLegendColor.js");
 function getSingleValueBackgroundColor(legendOptions, legendSets, value) {
+  let defaultColor = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'transparent';
   const legendColor = (0, _getSingleValueLegendColor.getSingleValueLegendColor)(legendOptions, legendSets, value);
-  return legendColor && legendOptions.style === _legends.LEGEND_DISPLAY_STYLE_FILL ? legendColor : 'transparent';
+  return legendColor && legendOptions.style === _legends.LEGEND_DISPLAY_STYLE_FILL ? legendColor : defaultColor;
 }

package/build/cjs/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/addIconElement.js

@@ -11,8 +11,8 @@ function addIconElement(svgString, color) {
   const iconElWidth = svgIconDocument.documentElement.getAttribute('width');
   const iconGroup = this.renderer.g('icon').attr({
     color,
-    'data-test': 'visualization-icon'
-  }).css({
+    fill: color,
+    'data-test': 'visualization-icon',
     visibility: 'hidden'
   });
 

package/build/cjs/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/index.js

@@ -10,19 +10,22 @@ var _getAvailableSpace = require("./getAvailableSpace.js");
 var _positionElements = require("./positionElements.js");
 var _styles = require("./styles.js");
 function loadSingleValueSVG() {
+  var _this$userOptions;
   const {
     formattedValue,
     icon,
     subText,
     fontColor
   } = this.userOptions.customSVGOptions;
-  const dynamicStyles = new _styles.DynamicStyles();
-  const valueElement = this.renderer.text(formattedValue).attr('data-test', 'visualization-primary-value').css({
-    color: fontColor,
+  const dynamicStyles = new _styles.DynamicStyles((_this$userOptions = this.userOptions) === null || _this$userOptions === void 0 ? void 0 : _this$userOptions.isPdfExport);
+  const valueElement = this.renderer.text(formattedValue).attr({
+    'data-test': 'visualization-primary-value',
+    fill: fontColor,
     visibility: 'hidden'
   }).add();
-  const subTextElement = subText ? this.renderer.text(subText).attr('data-test', 'visualization-subtext').css({
-    color: fontColor,
+  const subTextElement = subText ? this.renderer.text(subText).attr({
+    'data-test': 'visualization-subtext',
+    fill: fontColor,
     visibility: 'hidden'
   }).add() : null;
   const iconElement = icon ? _addIconElement.addIconElement.call(this, icon, fontColor) : null;
@@ -30,18 +33,12 @@ function loadSingleValueSVG() {
   let styles = {};
   while (!fitsWithinContainer && dynamicStyles.hasNext()) {
     styles = dynamicStyles.next();
-    valueElement.css(styles.value);
-    subTextElement === null || subTextElement === void 0 ? void 0 : subTextElement.css(styles.subText);
+    valueElement.attr(styles.value);
+    subTextElement === null || subTextElement === void 0 ? void 0 : subTextElement.attr(styles.subText);
     fitsWithinContainer = (0, _checkIfFitsWithinContainer.checkIfFitsWithinContainer)(_getAvailableSpace.getAvailableSpace.call(this, styles.spacing.valueTop), valueElement, subTextElement, icon, subText, styles.spacing);
   }
   _positionElements.positionElements.call(this, valueElement, subTextElement, iconElement, styles.spacing);
-  valueElement.css({
-    visibility: 'visible'
-  });
-  iconElement === null || iconElement === void 0 ? void 0 : iconElement.css({
-    visibility: 'visible'
-  });
-  subTextElement === null || subTextElement === void 0 ? void 0 : subTextElement.css({
-    visibility: 'visible'
-  });
+  valueElement.attr('visibility', 'visible');
+  iconElement === null || iconElement === void 0 ? void 0 : iconElement.attr('visibility', 'visible');
+  subTextElement === null || subTextElement === void 0 ? void 0 : subTextElement.attr('visibility', 'visible');
 }

package/build/cjs/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/positionElements.js

@@ -28,11 +28,8 @@ function positionElements(valueElement, subTextElement, iconElement, spacing) {
     const iconHeight = height * scale;
     const valueElementHeight = valueElementBox.height * _constants.ACTUAL_NUMBER_HEIGHT_FACTOR;
     const translateY = layoutRect.y + (valueElementHeight - iconHeight) / 2;
-
-    /* The icon is a <g> with <path> elements that contain coordinates.
-     * These path-coordinates only scale correctly when using CSS translate */
-    iconElement.css({
-      transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`
+    iconElement.attr({
+      transform: `translate(${translateX} ${translateY}) scale(${scale})`
     });
   }
   if (subTextElement) {

package/build/cjs/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/styles.js

@@ -75,11 +75,12 @@ const spacings = [{
 }];
 const MIN_SIDE_WHITESPACE = exports.MIN_SIDE_WHITESPACE = 4;
 class DynamicStyles {
-  constructor() {
+  constructor(isPdfExport) {
     this.currentIndex = 0;
+    this.isPdfExport = isPdfExport;
   }
   getStyle() {
-    return {
+    const style = {
       value: {
         ...valueStyles[this.currentIndex],
         'font-weight': '300'
@@ -87,6 +88,16 @@ class DynamicStyles {
       subText: subTextStyles[this.currentIndex],
       spacing: spacings[this.currentIndex]
     };
+    if (this.isPdfExport) {
+      /* font-weight is not supported for offline PDF export and providing
+       * a specific value will cause the PDF to show a serif font instead */
+      style.value['font-weight'] = 'normal';
+      /* letter-spacing is also not supported and providing a specific
+       * value will cause misalignment issues in the PDF */
+      style.value['letter-spacing'] = 'normal';
+      style.subText['letter-spacing'] = 'normal';
+    }
+    return style;
   }
   next() {
     if (this.currentIndex === valueStyles.length - 1) {

package/build/cjs/visualizations/config/adapters/dhis_highcharts/exporting.js

@@ -5,26 +5,42 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = getExporting;
 var _visTypes = require("../../../../modules/visTypes.js");
+var _getSingleValueBackgroundColor = require("./customSVGOptions/singleValue/getSingleValueBackgroundColor.js");
 var _index = _interopRequireDefault(require("./events/loadCustomSVG/singleValue/index.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function getExporting(visType) {
-  const exporting = {
-    // disable exporting context menu
-    enabled: false
-  };
-  switch (visType) {
-    case _visTypes.VIS_TYPE_SINGLE_VALUE:
-      return {
-        ...exporting,
-        chartOptions: {
-          chart: {
-            events: {
-              load: _index.default
-            }
+const DEFAULT_EXPORT_BACKGROUND_COLOR = '#ffffff';
+const BASE_EXPORTING_CONFIG = {
+  // disable exporting context menu
+  enabled: false,
+  // use offline exporting only
+  fallbackToExportServer: false,
+  allowHTML: true,
+  showExportInProgress: true,
+  applyStyleSheets: true,
+  sourceHeight: 768,
+  sourceWidth: 1024,
+  scale: 1,
+  chartOptions: {
+    chart: {
+      backgroundColor: DEFAULT_EXPORT_BACKGROUND_COLOR
+    }
+  }
+};
+function getExporting(layout, legendSets, series) {
+  if (layout.type === _visTypes.VIS_TYPE_SINGLE_VALUE) {
+    return {
+      ...BASE_EXPORTING_CONFIG,
+      chartOptions: {
+        ...BASE_EXPORTING_CONFIG.chartOptions,
+        chart: {
+          ...BASE_EXPORTING_CONFIG.chartOptions.chart,
+          backgroundColor: (0, _getSingleValueBackgroundColor.getSingleValueBackgroundColor)(layout.legend, legendSets, series[0], DEFAULT_EXPORT_BACKGROUND_COLOR),
+          events: {
+            load: _index.default
           }
         }
-      };
-    default:
-      return exporting;
+      }
+    };
   }
+  return BASE_EXPORTING_CONFIG;
 }

package/build/cjs/visualizations/config/adapters/dhis_highcharts/getTrimmedConfig.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = _default;
 var _arrayContains = _interopRequireDefault(require("d2-utilizr/lib/arrayContains"));
 var _arrayUnique = _interopRequireDefault(require("d2-utilizr/lib/arrayUnique"));
+var _hideEmptyRowItems = require("../../../../modules/hideEmptyRowItems.js");
 var _visTypes = require("../../../../modules/visTypes.js");
 var _getTwoCategorySplitSerieData = _interopRequireDefault(require("./getTwoCategorySplitSerieData.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -60,16 +61,16 @@ function getFirstLastValueIndexes(series) {
 function cleanData(data, emptySeriesIndexes, firstValueIndex, lastValueIndex, hideEmptyRowItems) {
   let cleanedData;
   switch (hideEmptyRowItems) {
-    case 'ALL':
+    case _hideEmptyRowItems.HIDE_EMPTY_ROW_ITEMS_ALL:
       cleanedData = arrayCleanUndefined(data.map((value, index) => (0, _arrayContains.default)(emptySeriesIndexes, index) ? undefined : value));
       break;
-    case 'BEFORE_FIRST':
+    case _hideEmptyRowItems.HIDE_EMPTY_ROW_ITEMS_BEFORE_FIRST:
       cleanedData = data.slice(firstValueIndex);
       break;
-    case 'AFTER_LAST':
+    case _hideEmptyRowItems.HIDE_EMPTY_ROW_ITEMS_AFTER_LAST:
       cleanedData = data.slice(0, lastValueIndex + 1);
       break;
-    case 'BEFORE_FIRST_AFTER_LAST':
+    case _hideEmptyRowItems.HIDE_EMPTY_ROW_ITEMS_BEFORE_FIRST_AFTER_LAST:
       cleanedData = data.slice(firstValueIndex, lastValueIndex + 1);
       break;
     default:

package/build/cjs/visualizations/config/adapters/dhis_highcharts/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = _default;
 var _isString = _interopRequireDefault(require("d2-utilizr/lib/isString"));
 var _objectClean = _interopRequireDefault(require("d2-utilizr/lib/objectClean"));
+var _hideEmptyRowItems = require("../../../../modules/hideEmptyRowItems.js");
 var _legends = require("../../../../modules/legends.js");
 var _index = require("../../../../modules/outliers/index.js");
 var _visTypes = require("../../../../modules/visTypes.js");
@@ -106,7 +107,7 @@ function _default(_ref) {
       enabled: false
     },
     // exporting
-    exporting: (0, _exporting.default)(_layout.type),
+    exporting: (0, _exporting.default)(_layout, _extraOptions.legendSets, series),
     /* The config object passed to the Highcharts Chart constructor
      * can contain arbitrary properties, which are made accessible
      * under the Chart instance's `userOptions` member. This means
@@ -144,7 +145,7 @@ function _default(_ref) {
   }
 
   // hide empty categories
-  if (_layout.hideEmptyRowItems !== 'NONE') {
+  if (_layout.hideEmptyRowItems && [_hideEmptyRowItems.HIDE_EMPTY_ROW_ITEMS_BEFORE_FIRST, _hideEmptyRowItems.HIDE_EMPTY_ROW_ITEMS_AFTER_LAST, _hideEmptyRowItems.HIDE_EMPTY_ROW_ITEMS_BEFORE_FIRST_AFTER_LAST, _hideEmptyRowItems.HIDE_EMPTY_ROW_ITEMS_ALL].includes(_layout.hideEmptyRowItems)) {
     config = (0, _getTrimmedConfig.default)(config, _layout);
   }
 

package/build/cjs/visualizations/config/adapters/dhis_highcharts/title/index.js

@@ -44,7 +44,8 @@ function _default(layout, metaData, extraOptions, series) {
   const legendOptions = layout.legend;
   const fontStyle = (0, _fontStyle.mergeFontStyleWithDefault)(layout.fontStyle && layout.fontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_TITLE], _fontStyle.FONT_STYLE_VISUALIZATION_TITLE);
   const title = Object.assign({
-    text: undefined
+    text: undefined,
+    minScale: 1
   }, dashboard ? DASHBOARD_TITLE_STYLE : {
     margin: 30,
     align: (0, _getTextAlignOption.getTextAlignOption)(fontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_ALIGN], _fontStyle.FONT_STYLE_VISUALIZATION_TITLE, (0, _visTypes.isVerticalType)(layout.type)),

package/build/cjs/visualizations/config/generators/highcharts/index.js

@@ -5,24 +5,38 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = _default;
 var _highcharts = _interopRequireDefault(require("highcharts"));
-var _highchartsMore = _interopRequireDefault(require("highcharts/highcharts-more"));
-var _boost = _interopRequireDefault(require("highcharts/modules/boost"));
-var _exporting = _interopRequireDefault(require("highcharts/modules/exporting"));
-var _noDataToDisplay = _interopRequireDefault(require("highcharts/modules/no-data-to-display"));
-var _patternFill = _interopRequireDefault(require("highcharts/modules/pattern-fill"));
-var _solidGauge = _interopRequireDefault(require("highcharts/modules/solid-gauge"));
+require("highcharts/highcharts-more");
+require("highcharts/modules/boost");
+require("highcharts/modules/exporting");
+require("highcharts/modules/no-data-to-display");
+require("highcharts/modules/offline-exporting");
+require("highcharts/modules/pattern-fill");
+require("highcharts/modules/solid-gauge");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// apply
-(0, _highchartsMore.default)(_highcharts.default);
-(0, _solidGauge.default)(_highcharts.default);
-(0, _noDataToDisplay.default)(_highcharts.default);
-(0, _exporting.default)(_highcharts.default);
-(0, _patternFill.default)(_highcharts.default);
-(0, _boost.default)(_highcharts.default);
+/* Whitelist some additional SVG attributes and tags here. Without this,
+ * the PDF export for the SingleValue visualization and charts in boost-mode
+ * breaks. For more info about the boost mode issue, see:
+ * https://github.com/highcharts/highcharts/issues/8333 */
+_highcharts.default.AST.allowedTags.push('fedropshadow', 'image');
+_highcharts.default.AST.allowedAttributes.push('transform-origin', 'preserveAspectRatio', 'fill-rule', 'clip-rule');
 
-/* Whitelist some additional SVG attributes here. Without this,
- * the PDF export for the SingleValue visualization breaks. */
-_highcharts.default.AST.allowedAttributes.push('fill-rule', 'clip-rule');
+/* This is a workaround for https://github.com/highcharts/highcharts/issues/22008
+ * We add some transparent text in a non-ASCII script to the chart to prevent
+ * the chart from being exported in a serif font */
+_highcharts.default.addEvent(_highcharts.default.Chart, 'load', function () {
+  this.renderer.text('모', 20, 20).attr({
+    opacity: 0
+  }).add();
+});
+
+/* Workaround for https://github.com/highcharts/highcharts/issues/23049
+ * (there happen to be 10 colors and 10 patterns)*/
+const {
+  colors
+} = _highcharts.default.getOptions();
+_highcharts.default.patterns.forEach((pattern, i) => {
+  pattern.color = colors[i];
+});
 function drawLegendSymbolWrap() {
   const pick = _highcharts.default.pick;
   _highcharts.default.wrap(_highcharts.default.seriesTypes.column.prototype, 'drawLegendSymbol', function (proceed, legend, item) {

package/build/cjs/visualizations/util/colors/colorSets.js

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.colorSets = exports.COLOR_SET_PATTERNS = exports.COLOR_SET_GRAY = exports.COLOR_SET_EXTENDED = exports.COLOR_SET_DEFAULT = exports.COLOR_SET_DARK = exports.COLOR_SET_COLOR_BLIND = exports.COLOR_SET_BRIGHT = exports.COLOR_SET_BASIC = void 0;
 var _highcharts = _interopRequireDefault(require("highcharts"));
-var _patternFill = _interopRequireDefault(require("highcharts/modules/pattern-fill"));
+require("highcharts/modules/pattern-fill");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-(0, _patternFill.default)(_highcharts.default);
 const COLOR_SET_DEFAULT = exports.COLOR_SET_DEFAULT = 'DEFAULT';
 const COLOR_SET_BASIC = exports.COLOR_SET_BASIC = 'BASIC';
 const COLOR_SET_EXTENDED = exports.COLOR_SET_EXTENDED = 'EXTENDED';

package/build/es/__demo__/ScatterPlotPdfExport.stories.js

@@ -0,0 +1,37 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { extraOptions, responses, visualization } from '../__fixtures__/scatterPlotData.js';
+import { createVisualization } from '../index.js';
+export default {
+  title: 'ScatterPlot'
+};
+export const Default = () => {
+  const ref = useRef(null);
+  const [chart, setChart] = useState(null);
+  const exportToPdf = useCallback(() => {
+    chart.update({
+      exporting: {
+        chartOptions: {
+          isPdfExport: true
+        }
+      }
+    });
+    chart.exportChartLocal({
+      filename: 'PDF export',
+      type: 'application/pdf'
+    });
+  }, [chart]);
+  useEffect(() => {
+    const obj = createVisualization(responses, visualization, ref.current, extraOptions, undefined, undefined, 'highcharts');
+    setChart(obj.visualization);
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, chart && /*#__PURE__*/React.createElement("button", {
+    onClick: exportToPdf
+  }, "Export PDF"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 800,
+      height: 800,
+      border: '2px solid magenta'
+    },
+    ref: ref
+  }));
+};

package/build/es/__demo__/SingleValue.stories.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useRef, useEffect } from 'react';
+import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';
 import { createVisualization } from '../index.js';
 const constainerStyleBase = {
   width: 800,
@@ -585,6 +585,7 @@ export const Default = () => {
   const [dashboard, setDashboard] = useState(false);
   const [showIcon, setShowIcon] = useState(true);
   const [indicatorType, setIndicatorType] = useState('plain');
+  const [exportAsPdf, setExportAsPdf] = useState(true);
   const [width, setWidth] = useState(constainerStyleBase.width);
   const [height, setHeight] = useState(constainerStyleBase.height);
   const containerStyle = useMemo(() => ({
@@ -592,6 +593,31 @@ export const Default = () => {
     width,
     height
   }), [width, height]);
+  const downloadOffline = useCallback(() => {
+    if (newChartRef.current) {
+      const currentBackgroundColor = newChartRef.current.userOptions.chart.backgroundColor;
+      newChartRef.current.update({
+        exporting: {
+          chartOptions: {
+            isPdfExport: exportAsPdf
+          }
+        }
+      });
+      newChartRef.current.exportChartLocal({
+        sourceHeight: 768,
+        sourceWidth: 1024,
+        scale: 1,
+        fallbackToExportServer: false,
+        filename: 'testOfflineDownload',
+        showExportInProgress: true,
+        type: exportAsPdf ? 'application/pdf' : 'image/png'
+      }, {
+        chart: {
+          backgroundColor: currentBackgroundColor === 'transparent' ? '#ffffff' : currentBackgroundColor
+        }
+      });
+    }
+  }, [exportAsPdf]);
   useEffect(() => {
     if (newContainerRef.current) {
       requestAnimationFrame(() => {
@@ -652,13 +678,19 @@ export const Default = () => {
     checked: showIcon,
     onChange: () => setShowIcon(!showIcon),
     type: "checkbox"
-  }), "\xA0Show icon"), /*#__PURE__*/React.createElement("label", null, "Indicator type\xA0", /*#__PURE__*/React.createElement("select", {
+  }), "\xA0Show icon"), /*#__PURE__*/React.createElement("label", null, "Indicator type", ' ', /*#__PURE__*/React.createElement("select", {
     onChange: event => setIndicatorType(event.target.value)
   }, indicatorTypes.map((type, index) => {
     return /*#__PURE__*/React.createElement("option", {
       key: index
     }, type);
-  })))), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    checked: exportAsPdf,
+    onChange: () => setExportAsPdf(!exportAsPdf),
+    type: "checkbox"
+  }), ' ', "Export as PDF"), /*#__PURE__*/React.createElement("button", {
+    onClick: downloadOffline
+  }, "Download offline")), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
       gap: 12