@dhis2/analytics 24.5.0-alpha.1 → 24.6.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/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,18 +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);
-  const now = getNowInCalendar(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 defaultFixedPeriodType = excludedPeriodTypes.includes(MONTHLY) ? getFixedPeriodsOptionsById(QUARTERLY) : getFixedPeriodsOptionsById(MONTHLY);
+  const defaultFixedPeriodYear = new Date().getFullYear();
 
   const fixedPeriodConfig = year => ({
     offset: year - defaultFixedPeriodYear,
@@ -60,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))));
     }
   };
 
@@ -113,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", {

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

@@ -1,11 +1,6 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import PeriodTransfer from '../PeriodTransfer.js';
-jest.mock('@dhis2/app-runtime', () => ({
-  useConfig: () => ({
-    systemInfo: {}
-  })
-}));
 describe('The Period Selector component', () => {
   let props;
   let shallowPeriodTransfer;