@dhis2/analytics 27.0.1 → 28.0.1

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

@@ -87,92 +87,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 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 preparePayloadForSave({
+      const result = 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 preparePayloadForSave({
-        visualization,
-        engine: mockEngine
+      const result = 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 preparePayloadForSave({
-        visualization,
-        engine: mockEngine
+      const result = preparePayloadForSave({
+        visualization
       });
       const expectedName = `Untitled Bar, ${new Date().toLocaleDateString(undefined, {
         year: 'numeric',
@@ -181,55 +126,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 preparePayloadForSave({
+      const result = 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 preparePayloadForSave({
-        visualization,
-        engine: mockEngine
+      const result = 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 preparePayloadForSave({
-        visualization,
-        engine: mockEngine
+      const result = preparePayloadForSave({
+        visualization
       });
       expect(result.description).toBeUndefined();
     });

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

@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n';
-import { getDisplayNameByVisType, getApiEndpointByVisType } from '../../modules/visTypes.js';
+import { getDisplayNameByVisType } from '../../modules/visTypes.js';
 export const FILE_TYPE_EVENT_REPORT = 'eventReport';
 export const FILE_TYPE_VISUALIZATION = 'visualization';
 export const FILE_TYPE_MAP = 'map';
@@ -54,38 +54,12 @@ export const preparePayloadForSaveAs = _ref => {
   visualization.description = description !== undefined ? description : visualization.description;
   return visualization;
 };
-const getSubscriberQuery = type => ({
-  ao: {
-    resource: getApiEndpointByVisType(type),
-    id: _ref2 => {
-      let {
-        id
-      } = _ref2;
-      return id;
-    },
-    params: {
-      fields: 'subscribers'
-    }
-  }
-});
-const apiFetchAOSubscribers = (dataEngine, id, type) => {
-  return dataEngine.query(getSubscriberQuery(type), {
-    variables: {
-      id
-    }
-  });
-};
-export const preparePayloadForSave = async _ref3 => {
+export 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 || i18n.t('Untitled {{visualizationType}}, {{date}}', {
     visualizationType: getDisplayNameByVisType(visualization.type),
     date: new Date().toLocaleDateString(undefined, {
@@ -95,5 +69,7 @@ export const preparePayloadForSave = async _ref3 => {
     })
   });
   visualization.description = description !== undefined ? description : visualization.description;
+  delete visualization.displayName;
+  delete visualization.displayDescription;
   return visualization;
 };

package/build/es/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/es/visualizations/config/adapters/dhis_highcharts/customSVGOptions/singleValue/getSingleValueBackgroundColor.js

@@ -1,6 +1,7 @@
 import { LEGEND_DISPLAY_STYLE_FILL } from '../../../../../../modules/legends.js';
 import { getSingleValueLegendColor } from './getSingleValueLegendColor.js';
 export function getSingleValueBackgroundColor(legendOptions, legendSets, value) {
+  let defaultColor = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'transparent';
   const legendColor = getSingleValueLegendColor(legendOptions, legendSets, value);
-  return legendColor && legendOptions.style === LEGEND_DISPLAY_STYLE_FILL ? legendColor : 'transparent';
+  return legendColor && legendOptions.style === LEGEND_DISPLAY_STYLE_FILL ? legendColor : defaultColor;
 }

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

@@ -5,8 +5,8 @@ export 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/es/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/index.js

@@ -4,19 +4,22 @@ import { getAvailableSpace } from './getAvailableSpace.js';
 import { positionElements } from './positionElements.js';
 import { DynamicStyles } from './styles.js';
 export default function loadSingleValueSVG() {
+  var _this$userOptions;
   const {
     formattedValue,
     icon,
     subText,
     fontColor
   } = this.userOptions.customSVGOptions;
-  const dynamicStyles = new DynamicStyles();
-  const valueElement = this.renderer.text(formattedValue).attr('data-test', 'visualization-primary-value').css({
-    color: fontColor,
+  const dynamicStyles = new 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.call(this, icon, fontColor) : null;
@@ -24,18 +27,12 @@ export default 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 = checkIfFitsWithinContainer(getAvailableSpace.call(this, styles.spacing.valueTop), valueElement, subTextElement, icon, subText, styles.spacing);
   }
   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/es/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/positionElements.js

@@ -22,11 +22,8 @@ export function positionElements(valueElement, subTextElement, iconElement, spac
     const iconHeight = height * scale;
     const valueElementHeight = valueElementBox.height * 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/es/visualizations/config/adapters/dhis_highcharts/events/loadCustomSVG/singleValue/styles.js

@@ -69,11 +69,12 @@ const spacings = [{
 }];
 export const MIN_SIDE_WHITESPACE = 4;
 export class DynamicStyles {
-  constructor() {
+  constructor(isPdfExport) {
     this.currentIndex = 0;
+    this.isPdfExport = isPdfExport;
   }
   getStyle() {
-    return {
+    const style = {
       value: {
         ...valueStyles[this.currentIndex],
         'font-weight': '300'
@@ -81,6 +82,16 @@ export 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/es/visualizations/config/adapters/dhis_highcharts/exporting.js

@@ -1,23 +1,39 @@
 import { VIS_TYPE_SINGLE_VALUE } from '../../../../modules/visTypes.js';
+import { getSingleValueBackgroundColor } from './customSVGOptions/singleValue/getSingleValueBackgroundColor.js';
 import loadSingleValueSVG from './events/loadCustomSVG/singleValue/index.js';
-export default function getExporting(visType) {
-  const exporting = {
-    // disable exporting context menu
-    enabled: false
-  };
-  switch (visType) {
-    case VIS_TYPE_SINGLE_VALUE:
-      return {
-        ...exporting,
-        chartOptions: {
-          chart: {
-            events: {
-              load: loadSingleValueSVG
-            }
+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
+    }
+  }
+};
+export default function getExporting(layout, legendSets, series) {
+  if (layout.type === VIS_TYPE_SINGLE_VALUE) {
+    return {
+      ...BASE_EXPORTING_CONFIG,
+      chartOptions: {
+        ...BASE_EXPORTING_CONFIG.chartOptions,
+        chart: {
+          ...BASE_EXPORTING_CONFIG.chartOptions.chart,
+          backgroundColor: getSingleValueBackgroundColor(layout.legend, legendSets, series[0], DEFAULT_EXPORT_BACKGROUND_COLOR),
+          events: {
+            load: loadSingleValueSVG
           }
         }
-      };
-    default:
-      return exporting;
+      }
+    };
   }
+  return BASE_EXPORTING_CONFIG;
 }

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

@@ -97,7 +97,7 @@ export default function (_ref) {
       enabled: false
     },
     // exporting
-    exporting: getExporting(_layout.type),
+    exporting: getExporting(_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/es/visualizations/config/adapters/dhis_highcharts/title/index.js

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

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

@@ -1,22 +1,36 @@
 import H from 'highcharts';
-import HM from 'highcharts/highcharts-more';
-import HB from 'highcharts/modules/boost';
-import HE from 'highcharts/modules/exporting';
-import HNDTD from 'highcharts/modules/no-data-to-display';
-import HPF from 'highcharts/modules/pattern-fill';
-import HSG from 'highcharts/modules/solid-gauge';
+import 'highcharts/highcharts-more';
+import 'highcharts/modules/boost';
+import 'highcharts/modules/exporting';
+import 'highcharts/modules/no-data-to-display';
+import 'highcharts/modules/offline-exporting';
+import 'highcharts/modules/pattern-fill';
+import 'highcharts/modules/solid-gauge';
 
-// apply
-HM(H);
-HSG(H);
-HNDTD(H);
-HE(H);
-HPF(H);
-HB(H);
+/* 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 */
+H.AST.allowedTags.push('fedropshadow', 'image');
+H.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. */
-H.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 */
+H.addEvent(H.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
+} = H.getOptions();
+H.patterns.forEach((pattern, i) => {
+  pattern.color = colors[i];
+});
 function drawLegendSymbolWrap() {
   const pick = H.pick;
   H.wrap(H.seriesTypes.column.prototype, 'drawLegendSymbol', function (proceed, legend, item) {

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

@@ -1,6 +1,5 @@
 import H from 'highcharts';
-import HPF from 'highcharts/modules/pattern-fill';
-HPF(H);
+import 'highcharts/modules/pattern-fill';
 export const COLOR_SET_DEFAULT = 'DEFAULT';
 export const COLOR_SET_BASIC = 'BASIC';
 export const COLOR_SET_EXTENDED = 'EXTENDED';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "27.0.1",
+    "version": "28.0.1",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
@@ -68,7 +68,7 @@
         "crypto-js": "^4.2.0",
         "d2-utilizr": "^0.2.16",
         "d3-color": "^1.2.3",
-        "highcharts": "^10.3.3",
+        "highcharts": "^12.1.2",
         "lodash": "^4.17.21",
         "markdown-it": "^13.0.1",
         "mathjs": "^9.4.2",
@@ -81,5 +81,6 @@
     },
     "files": [
         "build"
-    ]
+    ],
+    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }