@dhis2/analytics 24.9.3 → 24.10.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [24.10.1](https://github.com/dhis2/analytics/compare/v24.10.0...v24.10.1) (2023-04-24)
+
+
+### Bug Fixes
+
+* sv size when downloading is a small square (DHIS2-15178) ([245d799](https://github.com/dhis2/analytics/commit/245d799d9513e0407e4a6b6ba24c3da15754618d))
+
+# [24.10.0](https://github.com/dhis2/analytics/compare/v24.9.3...v24.10.0) (2023-04-19)
+
+
+### Features
+
+* single value background color change based upon legend (DHIS2-13702) part 2 ([#1453](https://github.com/dhis2/analytics/issues/1453)) ([d32c7b8](https://github.com/dhis2/analytics/commit/d32c7b8b8cce03e634caeb036e3412b8b7bcbf19))
+
 ## [24.9.3](https://github.com/dhis2/analytics/compare/v24.9.2...v24.9.3) (2023-03-15)
 
 

package/build/cjs/visualizations/config/generators/dhis/singleValue.js

@@ -75,11 +75,13 @@ const generateValueSVG = _ref => {
 const generateDashboardItem = (config, _ref2) => {
   let {
     valueColor,
+    titleColor,
+    backgroundColor,
     noData
   } = _ref2;
   const container = document.createElement('div');
-  container.setAttribute('style', 'display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%');
-  const titleStyle = 'font-size: 12px; color: #666;';
+  container.setAttribute('style', "display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background-color:".concat(backgroundColor, ";"));
+  const titleStyle = "font-size: 12px; color: ".concat(titleColor || '#666', ";");
   const title = document.createElement('span');
   title.setAttribute('style', titleStyle);
 
@@ -88,10 +90,9 @@ const generateDashboardItem = (config, _ref2) => {
     container.appendChild(title);
   }
 
-  const subtitle = document.createElement('span');
-  subtitle.setAttribute('style', titleStyle + ' margin-top: 4px');
-
   if (config.subtitle) {
+    const subtitle = document.createElement('span');
+    subtitle.setAttribute('style', titleStyle + ' margin-top: 4px; padding: 0 8px');
     subtitle.appendChild(document.createTextNode(config.subtitle));
     container.appendChild(subtitle);
   }
@@ -137,6 +138,7 @@ const getXFromTextAlign = textAlign => {
 const generateDVItem = (config, _ref3) => {
   let {
     valueColor,
+    backgroundColor,
     titleColor,
     parentEl,
     fontStyle,
@@ -149,9 +151,19 @@ const generateDVItem = (config, _ref3) => {
   const svg = document.createElementNS(svgNS, 'svg');
   svg.setAttribute('xmlns', svgNS);
   svg.setAttribute('viewBox', "0 0 ".concat(width, " ").concat(height));
-  svg.setAttribute('width', '100%');
-  svg.setAttribute('height', '100%');
+  svg.setAttribute('width', width);
+  svg.setAttribute('height', height);
   svg.setAttribute('data-test', 'visualization-container');
+
+  if (backgroundColor) {
+    svg.setAttribute('style', "background-color: ".concat(backgroundColor, ";"));
+    const background = document.createElementNS(svgNS, 'rect');
+    background.setAttribute('width', '100%');
+    background.setAttribute('height', '100%');
+    background.setAttribute('fill', backgroundColor);
+    svg.appendChild(background);
+  }
+
   const title = document.createElementNS(svgNS, 'text');
   const titleFontStyle = (0, _fontStyle.mergeFontStyleWithDefault)(fontStyle && fontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_TITLE], _fontStyle.FONT_STYLE_VISUALIZATION_TITLE);
   title.setAttribute('x', getXFromTextAlign(titleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_ALIGN]));
@@ -238,11 +250,11 @@ function _default(config, parentEl, _ref4) {
   } = _ref4;
   const legendSet = legendOptions && legendSets[0];
   const legendColor = legendSet && (0, _legends.getColorByValueFromLegendSet)(legendSet, config.value);
-  let valueColor, titleColor;
+  let valueColor, titleColor, backgroundColor;
 
   if (legendColor) {
     if (legendOptions.style === _legends.LEGEND_DISPLAY_STYLE_FILL) {
-      parentEl.style.background = legendColor;
+      backgroundColor = legendColor;
       valueColor = titleColor = shouldUseContrastColor(legendColor) && _ui.colors.white;
     } else {
       valueColor = legendColor;
@@ -252,18 +264,22 @@ function _default(config, parentEl, _ref4) {
   parentEl.style.overflow = 'hidden';
   parentEl.style.display = 'flex';
   parentEl.style.justifyContent = 'center';
-  parentEl.style.borderRadius = _ui.spacers.dp8;
 
   if (dashboard) {
+    parentEl.style.borderRadius = _ui.spacers.dp8;
     return generateDashboardItem(config, {
       valueColor,
-      noData
+      backgroundColor,
+      noData,
+      ...(shouldUseContrastColor(legendColor) ? {
+        titleColor: _ui.colors.white
+      } : {})
     });
   } else {
-    parentEl.style.margin = _ui.spacers.dp8;
-    parentEl.style.height = "calc(100% - (".concat(_ui.spacers.dp8, " * 2))");
+    parentEl.style.height = "100%";
     return generateDVItem(config, {
       valueColor,
+      backgroundColor,
       titleColor,
       parentEl,
       fontStyle,

package/build/es/visualizations/config/generators/dhis/singleValue.js

@@ -65,11 +65,13 @@ const generateValueSVG = _ref => {
 const generateDashboardItem = (config, _ref2) => {
   let {
     valueColor,
+    titleColor,
+    backgroundColor,
     noData
   } = _ref2;
   const container = document.createElement('div');
-  container.setAttribute('style', 'display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%');
-  const titleStyle = 'font-size: 12px; color: #666;';
+  container.setAttribute('style', "display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background-color:".concat(backgroundColor, ";"));
+  const titleStyle = "font-size: 12px; color: ".concat(titleColor || '#666', ";");
   const title = document.createElement('span');
   title.setAttribute('style', titleStyle);
 
@@ -78,10 +80,9 @@ const generateDashboardItem = (config, _ref2) => {
     container.appendChild(title);
   }
 
-  const subtitle = document.createElement('span');
-  subtitle.setAttribute('style', titleStyle + ' margin-top: 4px');
-
   if (config.subtitle) {
+    const subtitle = document.createElement('span');
+    subtitle.setAttribute('style', titleStyle + ' margin-top: 4px; padding: 0 8px');
     subtitle.appendChild(document.createTextNode(config.subtitle));
     container.appendChild(subtitle);
   }
@@ -127,6 +128,7 @@ const getXFromTextAlign = textAlign => {
 const generateDVItem = (config, _ref3) => {
   let {
     valueColor,
+    backgroundColor,
     titleColor,
     parentEl,
     fontStyle,
@@ -139,9 +141,19 @@ const generateDVItem = (config, _ref3) => {
   const svg = document.createElementNS(svgNS, 'svg');
   svg.setAttribute('xmlns', svgNS);
   svg.setAttribute('viewBox', "0 0 ".concat(width, " ").concat(height));
-  svg.setAttribute('width', '100%');
-  svg.setAttribute('height', '100%');
+  svg.setAttribute('width', width);
+  svg.setAttribute('height', height);
   svg.setAttribute('data-test', 'visualization-container');
+
+  if (backgroundColor) {
+    svg.setAttribute('style', "background-color: ".concat(backgroundColor, ";"));
+    const background = document.createElementNS(svgNS, 'rect');
+    background.setAttribute('width', '100%');
+    background.setAttribute('height', '100%');
+    background.setAttribute('fill', backgroundColor);
+    svg.appendChild(background);
+  }
+
   const title = document.createElementNS(svgNS, 'text');
   const titleFontStyle = mergeFontStyleWithDefault(fontStyle && fontStyle[FONT_STYLE_VISUALIZATION_TITLE], FONT_STYLE_VISUALIZATION_TITLE);
   title.setAttribute('x', getXFromTextAlign(titleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN]));
@@ -228,11 +240,11 @@ export default function (config, parentEl, _ref4) {
   } = _ref4;
   const legendSet = legendOptions && legendSets[0];
   const legendColor = legendSet && getColorByValueFromLegendSet(legendSet, config.value);
-  let valueColor, titleColor;
+  let valueColor, titleColor, backgroundColor;
 
   if (legendColor) {
     if (legendOptions.style === LEGEND_DISPLAY_STYLE_FILL) {
-      parentEl.style.background = legendColor;
+      backgroundColor = legendColor;
       valueColor = titleColor = shouldUseContrastColor(legendColor) && colors.white;
     } else {
       valueColor = legendColor;
@@ -242,18 +254,22 @@ export default function (config, parentEl, _ref4) {
   parentEl.style.overflow = 'hidden';
   parentEl.style.display = 'flex';
   parentEl.style.justifyContent = 'center';
-  parentEl.style.borderRadius = spacers.dp8;
 
   if (dashboard) {
+    parentEl.style.borderRadius = spacers.dp8;
     return generateDashboardItem(config, {
       valueColor,
-      noData
+      backgroundColor,
+      noData,
+      ...(shouldUseContrastColor(legendColor) ? {
+        titleColor: colors.white
+      } : {})
     });
   } else {
-    parentEl.style.margin = spacers.dp8;
-    parentEl.style.height = "calc(100% - (".concat(spacers.dp8, " * 2))");
+    parentEl.style.height = "100%";
     return generateDVItem(config, {
       valueColor,
+      backgroundColor,
       titleColor,
       parentEl,
       fontStyle,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "24.9.3",
+    "version": "24.10.1",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {