@dhis2/analytics 27.0.1 → 28.0.1

package/build/cjs/components/FileMenu/__tests__/utils.spec.js

@@ -89,92 +89,37 @@ describe('utils', () => {
     });
   });
   describe('preparePayloadForSave', () => {
-    const mockEngine = {
-      query: jest.fn()
-    };
-    beforeEach(() => {
-      jest.clearAllMocks();
-    });
-    it('fetches subscribers and adds them to the visualization', async () => {
-      const visualization = {
-        id: '123',
-        type: 'BAR',
-        name: 'Existing Name',
-        description: 'Existing Description'
-      };
-      mockEngine.query.mockResolvedValue({
-        ao: {
-          subscribers: ['user1', 'user2']
-        }
-      });
-      const result = await (0, _utils.preparePayloadForSave)({
-        visualization,
-        engine: mockEngine
-      });
-      expect(mockEngine.query).toHaveBeenCalledWith({
-        ao: {
-          resource: 'visualizations',
-          id: expect.any(Function),
-          params: {
-            fields: 'subscribers'
-          }
-        }
-      }, {
-        variables: {
-          id: '123'
-        }
-      });
-      expect(result.subscribers).toEqual(['user1', 'user2']);
-    });
-    it('sets the name to the provided name', async () => {
+    it('sets the name to the provided name', () => {
       const visualization = {
         id: '123',
         type: 'MAP',
         name: 'Existing name'
       };
       const name = 'New Name';
-      mockEngine.query.mockResolvedValue({
-        ao: {
-          subscribers: []
-        }
-      });
-      const result = await (0, _utils.preparePayloadForSave)({
+      const result = (0, _utils.preparePayloadForSave)({
         visualization,
-        name,
-        engine: mockEngine
+        name
       });
       expect(result.name).toBe(name);
     });
-    it('sets the name to the existing name if no new name is provided', async () => {
+    it('sets the name to the existing name if no new name is provided', () => {
       const visualization = {
         id: '123',
         type: 'LINE_LIST',
         name: 'Existing Name'
       };
-      mockEngine.query.mockResolvedValue({
-        ao: {
-          subscribers: []
-        }
-      });
-      const result = await (0, _utils.preparePayloadForSave)({
-        visualization,
-        engine: mockEngine
+      const result = (0, _utils.preparePayloadForSave)({
+        visualization
       });
       expect(result.name).toBe('Existing Name');
     });
-    it('sets the name to a default value if no name is provided', async () => {
+    it('sets the name to a default value if no name is provided', () => {
       const visualization = {
         id: '123',
         type: 'BAR'
       };
-      mockEngine.query.mockResolvedValue({
-        ao: {
-          subscribers: []
-        }
-      });
-      const result = await (0, _utils.preparePayloadForSave)({
-        visualization,
-        engine: mockEngine
+      const result = (0, _utils.preparePayloadForSave)({
+        visualization
       });
       const expectedName = `Untitled Bar, ${new Date().toLocaleDateString(undefined, {
         year: 'numeric',
@@ -183,55 +128,37 @@ describe('utils', () => {
       })}`;
       expect(result.name).toBe(expectedName);
     });
-    it('sets the description to the provided description', async () => {
+    it('sets the description to the provided description', () => {
       const visualization = {
         id: '123',
         type: 'YEAR_OVER_YEAR_LINE',
         description: 'Existing Description'
       };
       const description = 'New Description';
-      mockEngine.query.mockResolvedValue({
-        ao: {
-          subscribers: []
-        }
-      });
-      const result = await (0, _utils.preparePayloadForSave)({
+      const result = (0, _utils.preparePayloadForSave)({
         visualization,
-        description,
-        engine: mockEngine
+        description
       });
       expect(result.description).toBe(description);
     });
-    it('keeps the existing description if no new description is provided', async () => {
+    it('keeps the existing description if no new description is provided', () => {
       const visualization = {
         id: '123',
         type: 'COLUMN',
         description: 'Existing Description'
       };
-      mockEngine.query.mockResolvedValue({
-        ao: {
-          subscribers: []
-        }
-      });
-      const result = await (0, _utils.preparePayloadForSave)({
-        visualization,
-        engine: mockEngine
+      const result = (0, _utils.preparePayloadForSave)({
+        visualization
       });
       expect(result.description).toBe('Existing Description');
     });
-    it('sets the description to undefined if no description is provided and none exists', async () => {
+    it('sets the description to undefined if no description is provided and none exists', () => {
       const visualization = {
         id: '123',
         type: 'BAR'
       };
-      mockEngine.query.mockResolvedValue({
-        ao: {
-          subscribers: []
-        }
-      });
-      const result = await (0, _utils.preparePayloadForSave)({
-        visualization,
-        engine: mockEngine
+      const result = (0, _utils.preparePayloadForSave)({
+        visualization
       });
       expect(result.description).toBeUndefined();
     });

package/build/cjs/components/FileMenu/utils.js

@@ -65,38 +65,12 @@ const preparePayloadForSaveAs = _ref => {
   return visualization;
 };
 exports.preparePayloadForSaveAs = preparePayloadForSaveAs;
-const getSubscriberQuery = type => ({
-  ao: {
-    resource: (0, _visTypes.getApiEndpointByVisType)(type),
-    id: _ref2 => {
-      let {
-        id
-      } = _ref2;
-      return id;
-    },
-    params: {
-      fields: 'subscribers'
-    }
-  }
-});
-const apiFetchAOSubscribers = (dataEngine, id, type) => {
-  return dataEngine.query(getSubscriberQuery(type), {
-    variables: {
-      id
-    }
-  });
-};
-const preparePayloadForSave = async _ref3 => {
+const preparePayloadForSave = _ref2 => {
   let {
     visualization,
     name,
-    description,
-    engine
-  } = _ref3;
-  const {
-    ao
-  } = await apiFetchAOSubscribers(engine, visualization.id, visualization.type);
-  visualization.subscribers = ao.subscribers;
+    description
+  } = _ref2;
   visualization.name = name || visualization.name || _d2I18n.default.t('Untitled {{visualizationType}}, {{date}}', {
     visualizationType: (0, _visTypes.getDisplayNameByVisType)(visualization.type),
     date: new Date().toLocaleDateString(undefined, {
@@ -106,6 +80,8 @@ const preparePayloadForSave = async _ref3 => {
     })
   });
   visualization.description = description !== undefined ? description : visualization.description;
+  delete visualization.displayName;
+  delete visualization.displayDescription;
   return visualization;
 };
 exports.preparePayloadForSave = preparePayloadForSave;

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/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/index.js

@@ -106,7 +106,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

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