@dhis2/analytics 24.5.0 → 24.7.0

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

@@ -182,6 +182,20 @@
     "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/dhis/singleValue.js

@@ -15,10 +15,9 @@ const svgNS = 'http://www.w3.org/2000/svg';
 
 const generateValueSVG = _ref => {
   let {
-    value,
     formattedValue,
     subText,
-    legendSet,
+    valueColor,
     noData,
     y
   } = _ref;
@@ -33,8 +32,8 @@ const generateValueSVG = _ref => {
 
   let fillColor = _ui.colors.grey900;
 
-  if (legendSet) {
-    fillColor = (0, _legends.getColorByValueFromLegendSet)(legendSet, value);
+  if (valueColor) {
+    fillColor = valueColor;
   } else if (formattedValue === noData.text) {
     fillColor = _ui.colors.grey600;
   }
@@ -75,7 +74,7 @@ const generateValueSVG = _ref => {
 
 const generateDashboardItem = (config, _ref2) => {
   let {
-    legendSet,
+    valueColor,
     noData
   } = _ref2;
   const container = document.createElement('div');
@@ -98,10 +97,9 @@ const generateDashboardItem = (config, _ref2) => {
   }
 
   container.appendChild(generateValueSVG({
-    value: config.value,
     formattedValue: config.formattedValue,
     subText: config.subText,
-    legendSet,
+    valueColor,
     noData,
     y: 40
   }));
@@ -138,7 +136,8 @@ const getXFromTextAlign = textAlign => {
 
 const generateDVItem = (config, _ref3) => {
   let {
-    legendSet,
+    valueColor,
+    titleColor,
     parentEl,
     fontStyle,
     noData
@@ -161,7 +160,13 @@ const generateDVItem = (config, _ref3) => {
   title.setAttribute('font-size', "".concat(titleFontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "px"));
   title.setAttribute('font-weight', titleFontStyle[_fontStyle.FONT_STYLE_OPTION_BOLD] ? _fontStyle.FONT_STYLE_OPTION_BOLD : 'normal');
   title.setAttribute('font-style', titleFontStyle[_fontStyle.FONT_STYLE_OPTION_ITALIC] ? _fontStyle.FONT_STYLE_OPTION_ITALIC : 'normal');
-  title.setAttribute('fill', titleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR]);
+
+  if (titleColor && titleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR] === _fontStyle.defaultFontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_TITLE][_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR]) {
+    title.setAttribute('fill', titleColor);
+  } else {
+    title.setAttribute('fill', titleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR]);
+  }
+
   title.setAttribute('data-test', 'visualization-title');
 
   if (config.title) {
@@ -178,7 +183,13 @@ const generateDVItem = (config, _ref3) => {
   subtitle.setAttribute('font-size', "".concat(subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "px"));
   subtitle.setAttribute('font-weight', subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_BOLD] ? _fontStyle.FONT_STYLE_OPTION_BOLD : 'normal');
   subtitle.setAttribute('font-style', subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_ITALIC] ? _fontStyle.FONT_STYLE_OPTION_ITALIC : 'normal');
-  subtitle.setAttribute('fill', subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR]);
+
+  if (titleColor && subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR] === _fontStyle.defaultFontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_SUBTITLE][_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR]) {
+    subtitle.setAttribute('fill', titleColor);
+  } else {
+    subtitle.setAttribute('fill', subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_COLOR]);
+  }
+
   subtitle.setAttribute('data-test', 'visualization-subtitle');
 
   if (config.subtitle) {
@@ -187,34 +198,76 @@ const generateDVItem = (config, _ref3) => {
   }
 
   svg.appendChild(generateValueSVG({
-    value: config.value,
     formattedValue: config.formattedValue,
     subText: config.subText,
-    legendSet,
+    valueColor,
     noData,
     y: 20
   }));
   return svg;
 };
 
+const shouldUseContrastColor = inputColor => {
+  // based on https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
+  var color = inputColor.charAt(0) === '#' ? inputColor.substring(1, 7) : inputColor;
+  var r = parseInt(color.substring(0, 2), 16); // hexToR
+
+  var g = parseInt(color.substring(2, 4), 16); // hexToG
+
+  var b = parseInt(color.substring(4, 6), 16); // hexToB
+
+  var uicolors = [r / 255, g / 255, b / 255];
+  var c = uicolors.map(col => {
+    if (col <= 0.03928) {
+      return col / 12.92;
+    }
+
+    return Math.pow((col + 0.055) / 1.055, 2.4);
+  });
+  var L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+  return L <= 0.179;
+};
+
 function _default(config, parentEl, _ref4) {
   let {
     dashboard,
     legendSets,
     fontStyle,
-    noData
+    noData,
+    legendOptions
   } = _ref4;
-  const legendSet = legendSets[0];
+  const legendSet = legendOptions && legendSets[0];
+  const legendColor = legendSet && (0, _legends.getColorByValueFromLegendSet)(legendSet, config.value);
+  let valueColor, titleColor;
+
+  if (legendColor) {
+    if (legendOptions.style === _legends.LEGEND_DISPLAY_STYLE_FILL) {
+      parentEl.style.background = legendColor;
+      valueColor = titleColor = shouldUseContrastColor(legendColor) && _ui.colors.white;
+    } else {
+      valueColor = legendColor;
+    }
+  }
+
   parentEl.style.overflow = 'hidden';
   parentEl.style.display = 'flex';
   parentEl.style.justifyContent = 'center';
-  return dashboard ? generateDashboardItem(config, {
-    legendSet,
-    noData
-  }) : generateDVItem(config, {
-    legendSet,
-    parentEl,
-    fontStyle,
-    noData
-  });
+  parentEl.style.borderRadius = _ui.spacers.dp8;
+
+  if (dashboard) {
+    return generateDashboardItem(config, {
+      valueColor,
+      noData
+    });
+  } else {
+    parentEl.style.margin = _ui.spacers.dp8;
+    parentEl.style.height = "calc(100% - (".concat(_ui.spacers.dp8, " * 2))");
+    return generateDVItem(config, {
+      valueColor,
+      titleColor,
+      parentEl,
+      fontStyle,
+      noData
+    });
+  }
 }

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

@@ -80,6 +80,7 @@ function _default(_ref) {
 
   this.createVisualization = () => _generator(this.getConfig(), el, { ...extraOptions,
     noData: DEFAULT_EXTRA_OPTIONS.noData,
-    fontStyle: layout.fontStyle
+    fontStyle: layout.fontStyle,
+    legendOptions: layout.legend
   });
 }

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

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import OrgUnitDimension from '../components/OrgUnitDimension/OrgUnitDimension.js';
 
 const Wrapper = story => /*#__PURE__*/React.createElement(DataProvider, {
-  baseUrl: "http://localhost:8080/",
+  baseUrl: "https://debug.dhis2.org/analytics-dev/",
   apiVersion: ""
 }, story());
 
@@ -90,4 +90,43 @@ storiesOf('OrgUnitDimension', module).addDecorator(Wrapper).add('Multiple roots'
     roots: ['O6uvpzGd5pu', 'fdc6uOvgoji'] // Bo + Bombali
 
   });
+});
+storiesOf('OrgUnitDimension', module).addDecorator(Wrapper).add('Without level selector', () => {
+  const [selected, setSelected] = useState([]);
+  return /*#__PURE__*/React.createElement(OrgUnitDimension, {
+    hideLevelSelect: true,
+    selected: selected,
+    onSelect: response => setSelected(response.items),
+    roots: defaultRootOrgUnits
+  });
+});
+storiesOf('OrgUnitDimension', module).addDecorator(Wrapper).add('Without group selector', () => {
+  const [selected, setSelected] = useState([]);
+  return /*#__PURE__*/React.createElement(OrgUnitDimension, {
+    hideGroupSelect: true,
+    selected: selected,
+    onSelect: response => setSelected(response.items),
+    roots: defaultRootOrgUnits
+  });
+});
+storiesOf('OrgUnitDimension', module).addDecorator(Wrapper).add('Without level and group selector', () => {
+  const [selected, setSelected] = useState([]);
+  return /*#__PURE__*/React.createElement(OrgUnitDimension, {
+    hideLevelSelect: true,
+    hideGroupSelect: true,
+    selected: selected,
+    onSelect: response => setSelected(response.items),
+    roots: defaultRootOrgUnits
+  });
+});
+storiesOf('OrgUnitDimension', module).addDecorator(Wrapper).add('Without level and group selector, with warning text', () => {
+  const [selected, setSelected] = useState([]);
+  return /*#__PURE__*/React.createElement(OrgUnitDimension, {
+    hideLevelSelect: true,
+    hideGroupSelect: true,
+    selected: selected,
+    onSelect: response => setSelected(response.items),
+    roots: defaultRootOrgUnits,
+    warning: 'No org. units selected'
+  });
 });

package/build/es/components/OrgUnitDimension/OrgUnitDimension.js

@@ -1,6 +1,6 @@
 import _JSXStyle from "styled-jsx/style";
 import { useDataEngine } from '@dhis2/app-runtime';
-import { OrganisationUnitTree, Checkbox, MultiSelect, MultiSelectOption, Button } from '@dhis2/ui';
+import { OrganisationUnitTree, Checkbox, MultiSelect, MultiSelectOption, Button, IconWarningFilled16, colors } from '@dhis2/ui';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
@@ -16,7 +16,10 @@ const OrgUnitDimension = _ref => {
   let {
     roots,
     selected,
-    onSelect
+    onSelect,
+    hideGroupSelect,
+    hideLevelSelect,
+    warning
   } = _ref;
   const [ouLevels, setOuLevels] = useState([]);
   const [ouGroups, setOuGroups] = useState([]);
@@ -69,9 +72,9 @@ const OrgUnitDimension = _ref => {
       setOuGroups(result);
     };
 
-    doFetchOuLevels();
-    doFetchOuGroups();
-  }, [dataEngine]);
+    !hideLevelSelect && doFetchOuLevels();
+    !hideGroupSelect && doFetchOuGroups();
+  }, [dataEngine, hideLevelSelect, hideGroupSelect]);
 
   const onLevelChange = ids => {
     const items = ids.map(id => ({
@@ -202,9 +205,10 @@ const OrgUnitDimension = _ref => {
     dataTest: 'org-unit-tree'
   })), /*#__PURE__*/React.createElement("div", {
     className: "jsx-".concat(styles.__hash) + " " + (cx('selectsWrapper', {
-      disabled: selected.some(item => DYNAMIC_ORG_UNITS.includes(item.id))
+      disabled: selected.some(item => DYNAMIC_ORG_UNITS.includes(item.id)),
+      hidden: hideLevelSelect && hideGroupSelect
     }) || "")
-  }, /*#__PURE__*/React.createElement(MultiSelect, {
+  }, !hideLevelSelect && /*#__PURE__*/React.createElement(MultiSelect, {
     selected: ouLevels.length ? selected.filter(item => ouIdHelper.hasLevelPrefix(item.id)).map(item => ouIdHelper.removePrefix(item.id)) : [],
     onChange: _ref5 => {
       let {
@@ -221,7 +225,7 @@ const OrgUnitDimension = _ref => {
     value: level.id,
     label: level.displayName,
     dataTest: "org-unit-level-select-option-".concat(level.id)
-  }))), /*#__PURE__*/React.createElement(MultiSelect, {
+  }))), !hideGroupSelect && /*#__PURE__*/React.createElement(MultiSelect, {
     selected: ouGroups.length ? selected.filter(item => ouIdHelper.hasGroupPrefix(item.id)).map(item => ouIdHelper.removePrefix(item.id)) : [],
     onChange: _ref6 => {
       let {
@@ -240,7 +244,13 @@ const OrgUnitDimension = _ref => {
     dataTest: "org-unit-group-select-option-".concat(group.id)
   })))), /*#__PURE__*/React.createElement("div", {
     className: "jsx-".concat(styles.__hash) + " " + "summaryWrapper"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, warning ? /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(styles.__hash) + " " + "warningWrapper"
+  }, /*#__PURE__*/React.createElement(IconWarningFilled16, {
+    color: colors.red500
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "jsx-".concat(styles.__hash) + " " + "warningText"
+  }, warning)) : /*#__PURE__*/React.createElement("span", {
     className: "jsx-".concat(styles.__hash) + " " + "summaryText"
   }, getSummary()), /*#__PURE__*/React.createElement("div", {
     className: "jsx-".concat(styles.__hash) + " " + "deselectButton"
@@ -254,13 +264,20 @@ const OrgUnitDimension = _ref => {
   }, styles));
 };
 
+OrgUnitDimension.defaultProps = {
+  hideGroupSelect: false,
+  hideLevelSelect: false
+};
 OrgUnitDimension.propTypes = {
+  hideGroupSelect: PropTypes.bool,
+  hideLevelSelect: PropTypes.bool,
   roots: PropTypes.arrayOf(PropTypes.string),
   selected: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
     path: PropTypes.string
   })),
+  warning: PropTypes.string,
   onSelect: PropTypes.func
 };
 export default OrgUnitDimension;

package/build/es/components/OrgUnitDimension/styles/OrgUnitDimension.style.js

@@ -1,4 +1,4 @@
 import { colors, spacers } from '@dhis2/ui';
-const _defaultExport = [".container.jsx-3879278432{height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".orgUnitTreeWrapper.jsx-3879278432{height:382px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow:auto;}", ".orgUnitTreeWrapper.jsx-3879278432>*{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".disabled.jsx-3879278432{cursor:not-allowed;opacity:0.5;}", ".disabled.jsx-3879278432>*{pointer-events:none;}", ".userOrgUnitsWrapper.jsx-3879278432{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:".concat(colors.grey200, ";padding:").concat(spacers.dp8, " ").concat(spacers.dp8, " ").concat(spacers.dp8, " ").concat(spacers.dp24, ";margin-bottom:").concat(spacers.dp12, ";}"), ".userOrgUnitsWrapper.jsx-3879278432>*{margin-right:".concat(spacers.dp48, ";}"), ".selectsWrapper.jsx-3879278432{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:".concat(spacers.dp8, ";margin-top:").concat(spacers.dp12, ";}"), ".selectsWrapper.jsx-3879278432>*{width:50%;}", ".summaryWrapper.jsx-3879278432{margin-top:".concat(spacers.dp8, ";}"), ".summaryText.jsx-3879278432{font-size:14px;line-height:18px;color:".concat(colors.grey700, ";}"), ".deselectButton.jsx-3879278432{display:inline-block;margin-left:".concat(spacers.dp8, ";}")];
-_defaultExport.__hash = "3879278432";
+const _defaultExport = [".container.jsx-2348205733{height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".orgUnitTreeWrapper.jsx-2348205733{height:382px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow:auto;}", ".orgUnitTreeWrapper.jsx-2348205733>*{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".disabled.jsx-2348205733{cursor:not-allowed;opacity:0.5;}", ".disabled.jsx-2348205733>*{pointer-events:none;}", ".userOrgUnitsWrapper.jsx-2348205733{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:".concat(colors.grey200, ";padding:").concat(spacers.dp8, " ").concat(spacers.dp8, " ").concat(spacers.dp8, " ").concat(spacers.dp24, ";margin-bottom:").concat(spacers.dp12, ";}"), ".userOrgUnitsWrapper.jsx-2348205733>*{margin-right:".concat(spacers.dp48, ";}"), ".selectsWrapper.jsx-2348205733{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:".concat(spacers.dp8, ";margin-top:").concat(spacers.dp12, ";}"), ".selectsWrapper.hidden.jsx-2348205733{display:none;}", ".selectsWrapper.jsx-2348205733>*{width:50%;}", ".summaryWrapper.jsx-2348205733{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:".concat(spacers.dp8, ";}"), ".warningWrapper.jsx-2348205733{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".warningText.jsx-2348205733{margin-left:".concat(spacers.dp8, ";font-size:14px;line-height:18px;color:").concat(colors.red600, ";}"), ".summaryText.jsx-2348205733{font-size:14px;line-height:18px;color:".concat(colors.grey700, ";}"), ".deselectButton.jsx-2348205733{display:inline-block;margin-left:".concat(spacers.dp8, ";}")];
+_defaultExport.__hash = "2348205733";
 export default _defaultExport;

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

@@ -2,8 +2,6 @@ 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 { useConfig } from '@dhis2/app-runtime';
-import { getNowInCalendar } from '@dhis2/multi-calendar-dates';
 import { TabBar, Tab, Transfer } from '@dhis2/ui';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
@@ -27,17 +25,9 @@ const PeriodTransfer = _ref => {
     rightFooter,
     excludedPeriodTypes
   } = _ref;
-  const {
-    systemInfo = {}
-  } = useConfig();
-  const {
-    calendar = 'gregory'
-  } = systemInfo;
   const defaultRelativePeriodType = excludedPeriodTypes.includes(MONTHLY) ? getRelativePeriodsOptionsById(QUARTERLY) : getRelativePeriodsOptionsById(MONTHLY);
-  const defaultFixedPeriodType = excludedPeriodTypes.includes(MONTHLY) ? getFixedPeriodsOptionsById(QUARTERLY, calendar) : getFixedPeriodsOptionsById(MONTHLY, 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 = getNowInCalendar(calendar).eraYear;
+  const defaultFixedPeriodType = excludedPeriodTypes.includes(MONTHLY) ? getFixedPeriodsOptionsById(QUARTERLY) : getFixedPeriodsOptionsById(MONTHLY);
+  const defaultFixedPeriodYear = new Date().getFullYear();
 
   const fixedPeriodConfig = year => ({
     offset: year - defaultFixedPeriodYear,
@@ -59,7 +49,7 @@ const PeriodTransfer = _ref => {
   const onIsRelativeClick = state => {
     if (state !== isRelative) {
       setIsRelative(state);
-      setAllPeriods(state ? getRelativePeriodsOptionsById(relativeFilter.periodType).getPeriods() : getFixedPeriodsOptionsById(fixedFilter.periodType, calendar).getPeriods(fixedPeriodConfig(Number(fixedFilter.year))));
+      setAllPeriods(state ? getRelativePeriodsOptionsById(relativeFilter.periodType).getPeriods() : getFixedPeriodsOptionsById(fixedFilter.periodType).getPeriods(fixedPeriodConfig(Number(fixedFilter.year))));
     }
   };
 
@@ -112,7 +102,7 @@ const PeriodTransfer = _ref => {
 
   const onSelectFixedPeriods = filter => {
     setFixedFilter(filter);
-    setAllPeriods(getFixedPeriodsOptionsById(filter.periodType, calendar).getPeriods(fixedPeriodConfig(Number(filter.year)), calendar));
+    setAllPeriods(getFixedPeriodsOptionsById(filter.periodType).getPeriods(fixedPeriodConfig(Number(filter.year))));
   };
 
   const renderEmptySelection = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {