@dhis2/analytics 21.8.1 → 21.9.0

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

@@ -147,20 +147,6 @@
     "Fixed periods": "Fixed periods",
     "Selected Periods": "Selected Periods",
     "No periods selected": "No periods selected",
-    "January": "January",
-    "February": "February",
-    "March": "March",
-    "April": "April",
-    "May": "May",
-    "June": "June",
-    "July": "July",
-    "August": "August",
-    "September": "September",
-    "October": "October",
-    "November": "November",
-    "December": "December",
-    "Week {{weekNumber}}": "Week {{weekNumber}}",
-    "Bi-Week {{biWeekNumber}}": "Bi-Week {{biWeekNumber}}",
     "Daily": "Daily",
     "Weekly": "Weekly",
     "Weekly (Start Wednesday)": "Weekly (Start Wednesday)",

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

@@ -44,10 +44,10 @@ function drawLegendSymbolWrap() {
 
       const legends = this.options.legendSet.legends.sort((a, b) => a.startValue - b.startValue);
       this.chart.renderer.path(['M', x, ys, 'A', 1, 1, 0, 0, 0, x, ye, 'V', ys]).attr({
-        fill: legends.at(legends.length >= 5 ? 1 : 0).color
+        fill: legends[legends.length >= 5 ? 1 : 0].color
       }).add(this.legendGroup);
       this.chart.renderer.path(['M', x, ye, 'A', 1, 1, 0, 0, 0, x, ys, 'V', ye]).attr({
-        fill: legends.at(legends.length >= 5 ? -2 : -1).color
+        fill: legends[legends.length >= 5 ? legends.length - 2 : legends.length - 1].color
       }).add(this.legendGroup);
     } else {
       var options = legend.options,

package/build/es/components/PeriodDimension/PeriodDimension.js

@@ -1,7 +1,16 @@
+import { useConfig, useDataQuery } from '@dhis2/app-runtime';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { DIMENSION_ID_PERIOD } from '../../modules/predefinedDimensions.js';
 import PeriodTransfer from './PeriodTransfer.js';
+const userSettingsQuery = {
+  userSettings: {
+    resource: 'userSettings',
+    params: {
+      key: ['keyUiLocale']
+    }
+  }
+};
 
 const PeriodDimension = ({
   onSelect,
@@ -9,6 +18,25 @@ const PeriodDimension = ({
   rightFooter,
   excludedPeriodTypes
 }) => {
+  const {
+    systemInfo
+  } = useConfig();
+  const result = useDataQuery(userSettingsQuery);
+  const {
+    calendar = 'gregory'
+  } = systemInfo;
+  const {
+    data: {
+      userSettings: {
+        keyUiLocale: locale
+      } = {}
+    } = {}
+  } = result;
+  const periodsSettings = {
+    calendar,
+    locale
+  };
+
   const selectPeriods = periods => {
     onSelect({
       dimensionId: DIMENSION_ID_PERIOD,
@@ -21,7 +49,8 @@ const PeriodDimension = ({
     initialSelectedPeriods: selectedPeriods,
     rightFooter: rightFooter,
     dataTest: 'period-dimension',
-    excludedPeriodTypes: excludedPeriodTypes
+    excludedPeriodTypes: excludedPeriodTypes,
+    periodsSettings: periodsSettings
   });
 };
 

package/build/es/components/PeriodDimension/PeriodTransfer.js

@@ -2,6 +2,7 @@ import _JSXStyle from "styled-jsx/style";
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+import { getNowInCalendar } from '@dhis2/multi-calendar-dates';
 import { TabBar, Tab, Transfer } from '@dhis2/ui';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
@@ -22,11 +23,15 @@ const PeriodTransfer = ({
   dataTest,
   initialSelectedPeriods,
   rightFooter,
-  excludedPeriodTypes
+  excludedPeriodTypes,
+  periodsSettings
 }) => {
   const defaultRelativePeriodType = excludedPeriodTypes.includes(MONTHLY) ? getRelativePeriodsOptionsById(QUARTERLY) : getRelativePeriodsOptionsById(MONTHLY);
-  const defaultFixedPeriodType = excludedPeriodTypes.includes(MONTHLY) ? getFixedPeriodsOptionsById(QUARTERLY) : getFixedPeriodsOptionsById(MONTHLY);
-  const defaultFixedPeriodYear = new Date().getFullYear();
+  const defaultFixedPeriodType = excludedPeriodTypes.includes(MONTHLY) ? getFixedPeriodsOptionsById(QUARTERLY, periodsSettings) : getFixedPeriodsOptionsById(MONTHLY, periodsSettings);
+  const now = getNowInCalendar(periodsSettings.calendar); // use ".eraYear" rather than ".year" because in Ethiopian calendar, eraYear is what our users expect to see (for other calendars, it doesn't matter)
+  // there is still a pending decision in Temporal regarding which era to use by default: https://github.com/js-temporal/temporal-polyfill/blob/9350ee7dd0d29f329fc097debf923a517c32f813/lib/calendar.ts#L1964
+
+  const defaultFixedPeriodYear = now.eraYear || now.year;
 
   const fixedPeriodConfig = year => ({
     offset: year - defaultFixedPeriodYear,
@@ -48,7 +53,7 @@ const PeriodTransfer = ({
   const onIsRelativeClick = state => {
     if (state !== isRelative) {
       setIsRelative(state);
-      setAllPeriods(state ? getRelativePeriodsOptionsById(relativeFilter.periodType).getPeriods() : getFixedPeriodsOptionsById(fixedFilter.periodType).getPeriods(fixedPeriodConfig(Number(fixedFilter.year))));
+      setAllPeriods(state ? getRelativePeriodsOptionsById(relativeFilter.periodType).getPeriods() : getFixedPeriodsOptionsById(fixedFilter.periodType, periodsSettings).getPeriods(fixedPeriodConfig(Number(fixedFilter.year))));
     }
   };
 
@@ -101,7 +106,7 @@ const PeriodTransfer = ({
 
   const onSelectFixedPeriods = filter => {
     setFixedFilter(filter);
-    setAllPeriods(getFixedPeriodsOptionsById(filter.periodType).getPeriods(fixedPeriodConfig(Number(filter.year))));
+    setAllPeriods(getFixedPeriodsOptionsById(filter.periodType, periodsSettings).getPeriods(fixedPeriodConfig(Number(filter.year)), periodsSettings));
   };
 
   const renderEmptySelection = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
@@ -147,7 +152,11 @@ const PeriodTransfer = ({
 
 PeriodTransfer.defaultProps = {
   initialSelectedPeriods: [],
-  excludedPeriodTypes: []
+  excludedPeriodTypes: [],
+  periodsSettings: {
+    calendar: 'gregory',
+    locale: 'en'
+  }
 };
 PeriodTransfer.propTypes = {
   onSelect: PropTypes.func.isRequired,
@@ -157,6 +166,10 @@ PeriodTransfer.propTypes = {
     id: PropTypes.string,
     name: PropTypes.string
   })),
+  periodsSettings: PropTypes.shape({
+    calendar: PropTypes.string,
+    locale: PropTypes.string
+  }),
   rightFooter: PropTypes.node
 };
 export default PeriodTransfer;

package/build/es/components/PeriodDimension/__tests__/PeriodDimension.spec.js

@@ -1,6 +1,19 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import PeriodDimension from '../PeriodDimension.js';
+jest.mock('@dhis2/app-runtime', () => ({
+  useConfig: () => ({
+    systemInfo: {}
+  }),
+  useDataQuery: () => ({
+    data: {
+      userSettings: {
+        keyUiLocale: 'en'
+      }
+    }
+  })
+}));
+afterEach(jest.clearAllMocks);
 describe('The Period Dimension component', () => {
   let props;
   let shallowPeriodDimension;

package/build/es/components/PeriodDimension/__tests__/__snapshots__/PeriodDimension.spec.js.snap

@@ -6,6 +6,12 @@ exports[`The Period Dimension component matches the snapshot 1`] = `
   excludedPeriodTypes={Array []}
   initialSelectedPeriods={Array []}
   onSelect={[Function]}
+  periodsSettings={
+    Object {
+      "calendar": "gregory",
+      "locale": "en",
+    }
+  }
   rightFooter={<React.Fragment />}
 />
 `;