@dhis2/analytics 24.5.0-alpha.1 → 24.6.0

package/build/es/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/es/visualizations/config/generators/dhis/singleValue.js

@@ -1,14 +1,13 @@
-import { colors } from '@dhis2/ui';
-import { FONT_STYLE_VISUALIZATION_TITLE, FONT_STYLE_VISUALIZATION_SUBTITLE, FONT_STYLE_OPTION_FONT_SIZE, FONT_STYLE_OPTION_TEXT_COLOR, FONT_STYLE_OPTION_TEXT_ALIGN, FONT_STYLE_OPTION_ITALIC, FONT_STYLE_OPTION_BOLD, TEXT_ALIGN_LEFT, TEXT_ALIGN_RIGHT, TEXT_ALIGN_CENTER, mergeFontStyleWithDefault } from '../../../../modules/fontStyle.js';
-import { getColorByValueFromLegendSet } from '../../../../modules/legends.js';
+import { colors, spacers } from '@dhis2/ui';
+import { FONT_STYLE_VISUALIZATION_TITLE, FONT_STYLE_VISUALIZATION_SUBTITLE, FONT_STYLE_OPTION_FONT_SIZE, FONT_STYLE_OPTION_TEXT_COLOR, FONT_STYLE_OPTION_TEXT_ALIGN, FONT_STYLE_OPTION_ITALIC, FONT_STYLE_OPTION_BOLD, TEXT_ALIGN_LEFT, TEXT_ALIGN_RIGHT, TEXT_ALIGN_CENTER, mergeFontStyleWithDefault, defaultFontStyle } from '../../../../modules/fontStyle.js';
+import { getColorByValueFromLegendSet, LEGEND_DISPLAY_STYLE_FILL } from '../../../../modules/legends.js';
 const svgNS = 'http://www.w3.org/2000/svg';
 
 const generateValueSVG = _ref => {
   let {
-    value,
     formattedValue,
     subText,
-    legendSet,
+    valueColor,
     noData,
     y
   } = _ref;
@@ -23,8 +22,8 @@ const generateValueSVG = _ref => {
 
   let fillColor = colors.grey900;
 
-  if (legendSet) {
-    fillColor = getColorByValueFromLegendSet(legendSet, value);
+  if (valueColor) {
+    fillColor = valueColor;
   } else if (formattedValue === noData.text) {
     fillColor = colors.grey600;
   }
@@ -65,7 +64,7 @@ const generateValueSVG = _ref => {
 
 const generateDashboardItem = (config, _ref2) => {
   let {
-    legendSet,
+    valueColor,
     noData
   } = _ref2;
   const container = document.createElement('div');
@@ -88,10 +87,9 @@ const generateDashboardItem = (config, _ref2) => {
   }
 
   container.appendChild(generateValueSVG({
-    value: config.value,
     formattedValue: config.formattedValue,
     subText: config.subText,
-    legendSet,
+    valueColor,
     noData,
     y: 40
   }));
@@ -128,7 +126,8 @@ const getXFromTextAlign = textAlign => {
 
 const generateDVItem = (config, _ref3) => {
   let {
-    legendSet,
+    valueColor,
+    titleColor,
     parentEl,
     fontStyle,
     noData
@@ -151,7 +150,13 @@ const generateDVItem = (config, _ref3) => {
   title.setAttribute('font-size', "".concat(titleFontStyle[FONT_STYLE_OPTION_FONT_SIZE], "px"));
   title.setAttribute('font-weight', titleFontStyle[FONT_STYLE_OPTION_BOLD] ? FONT_STYLE_OPTION_BOLD : 'normal');
   title.setAttribute('font-style', titleFontStyle[FONT_STYLE_OPTION_ITALIC] ? FONT_STYLE_OPTION_ITALIC : 'normal');
-  title.setAttribute('fill', titleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR]);
+
+  if (titleColor && titleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR] === defaultFontStyle[FONT_STYLE_VISUALIZATION_TITLE][FONT_STYLE_OPTION_TEXT_COLOR]) {
+    title.setAttribute('fill', titleColor);
+  } else {
+    title.setAttribute('fill', titleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR]);
+  }
+
   title.setAttribute('data-test', 'visualization-title');
 
   if (config.title) {
@@ -168,7 +173,13 @@ const generateDVItem = (config, _ref3) => {
   subtitle.setAttribute('font-size', "".concat(subtitleFontStyle[FONT_STYLE_OPTION_FONT_SIZE], "px"));
   subtitle.setAttribute('font-weight', subtitleFontStyle[FONT_STYLE_OPTION_BOLD] ? FONT_STYLE_OPTION_BOLD : 'normal');
   subtitle.setAttribute('font-style', subtitleFontStyle[FONT_STYLE_OPTION_ITALIC] ? FONT_STYLE_OPTION_ITALIC : 'normal');
-  subtitle.setAttribute('fill', subtitleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR]);
+
+  if (titleColor && subtitleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR] === defaultFontStyle[FONT_STYLE_VISUALIZATION_SUBTITLE][FONT_STYLE_OPTION_TEXT_COLOR]) {
+    subtitle.setAttribute('fill', titleColor);
+  } else {
+    subtitle.setAttribute('fill', subtitleFontStyle[FONT_STYLE_OPTION_TEXT_COLOR]);
+  }
+
   subtitle.setAttribute('data-test', 'visualization-subtitle');
 
   if (config.subtitle) {
@@ -177,34 +188,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;
+};
+
 export default function (config, parentEl, _ref4) {
   let {
     dashboard,
     legendSets,
     fontStyle,
-    noData
+    noData,
+    legendOptions
   } = _ref4;
-  const legendSet = legendSets[0];
+  const legendSet = legendOptions && legendSets[0];
+  const legendColor = legendSet && getColorByValueFromLegendSet(legendSet, config.value);
+  let valueColor, titleColor;
+
+  if (legendColor) {
+    if (legendOptions.style === LEGEND_DISPLAY_STYLE_FILL) {
+      parentEl.style.background = legendColor;
+      valueColor = titleColor = shouldUseContrastColor(legendColor) && 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 = spacers.dp8;
+
+  if (dashboard) {
+    return generateDashboardItem(config, {
+      valueColor,
+      noData
+    });
+  } else {
+    parentEl.style.margin = spacers.dp8;
+    parentEl.style.height = "calc(100% - (".concat(spacers.dp8, " * 2))");
+    return generateDVItem(config, {
+      valueColor,
+      titleColor,
+      parentEl,
+      fontStyle,
+      noData
+    });
+  }
 }

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "24.5.0-alpha.1",
+    "version": "24.6.0",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
@@ -48,11 +48,6 @@
         "styled-jsx": "^4.0.1",
         "typeface-roboto": "^0.0.75"
     },
-    "jest": {
-        "transformIgnorePatterns": [
-            "/!node_modules\\/multi-calendar-dates/"
-        ]
-    },
     "peerDependencies": {
         "@dhis2/app-runtime": "^3",
         "@dhis2/d2-i18n": "^1.1",
@@ -64,7 +59,6 @@
     },
     "dependencies": {
         "@dhis2/d2-ui-rich-text": "^7.4.0",
-        "@dhis2/multi-calendar-dates": "1.0.0-beta.21",
         "classnames": "^2.3.1",
         "d2-utilizr": "^0.2.16",
         "d3-color": "^1.2.3",