@dhis2/analytics 25.1.0 → 25.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/build/cjs/visualizations/config/generators/dhis/singleValue.js +11 -7
  3. package/build/es/visualizations/config/generators/dhis/singleValue.js +12 -8
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ ## [25.1.2](https://github.com/dhis2/analytics/compare/v25.1.1...v25.1.2) (2023-05-03)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * small cosmetic fixes to SV SVG ([#1457](https://github.com/dhis2/analytics/issues/1457)) ([2785a9e](https://github.com/dhis2/analytics/commit/2785a9e3e7c656d830df78c84c4ef29de74b0614))
7
+
8
+ ## [25.1.1](https://github.com/dhis2/analytics/compare/v25.1.0...v25.1.1) (2023-05-02)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * address various SV SVG issues after KFMT ([#1456](https://github.com/dhis2/analytics/issues/1456)) ([f0ee1f1](https://github.com/dhis2/analytics/commit/f0ee1f16450e1b6de7c879c8ecdeec7c1d7c89fb))
14
+
1
15
  # [25.1.0](https://github.com/dhis2/analytics/compare/v25.0.0...v25.1.0) (2023-04-27)
2
16
 
3
17
 
package/build/cjs/visualizations/config/generators/dhis/singleValue.js CHANGED
@@ -26,6 +26,7 @@ const generateValueSVG = _ref => {
26
26
  formattedValue,
27
27
  subText,
28
28
  valueColor,
29
+ textColor,
29
30
  icon,
30
31
  noData,
31
32
  containerWidth,
@@ -96,7 +97,7 @@ const generateValueSVG = _ref => {
96
97
  subTextNode.setAttribute('font-size', subTextSize);
97
98
  subTextNode.setAttribute('y', iconSize / 2);
98
99
  subTextNode.setAttribute('dy', subTextSize);
99
- subTextNode.setAttribute('fill', _ui.colors.grey600);
100
+ subTextNode.setAttribute('fill', textColor);
100
101
  subTextNode.appendChild(document.createTextNode(subText));
101
102
  svgValue.appendChild(subTextNode);
102
103
  }
@@ -119,13 +120,14 @@ const generateDashboardItem = (config, _ref2) => {
119
120
  formattedValue: config.formattedValue,
120
121
  subText: config.subText,
121
122
  valueColor,
123
+ textColor: titleColor,
122
124
  noData,
123
125
  icon,
124
126
  containerWidth: width,
125
127
  containerHeight: height
126
128
  }));
127
129
  const container = document.createElement('div');
128
- container.setAttribute('style', "display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background-color:".concat(backgroundColor, ";"));
130
+ container.setAttribute('style', "display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding-top: 8px; ".concat(backgroundColor ? "background-color:".concat(backgroundColor, ";") : ''));
129
131
  const titleStyle = "padding: 0 8px; text-align: center; font-size: 12px; color: ".concat(titleColor || '#666', ";");
130
132
  const title = document.createElement('span');
131
133
  title.setAttribute('style', titleStyle);
@@ -199,8 +201,9 @@ const generateDVItem = (config, _ref3) => {
199
201
  const svgWrapper = document.createElementNS(svgNS, 'svg');
200
202
  const title = document.createElementNS(svgNS, 'text');
201
203
  const titleFontStyle = (0, _fontStyle.mergeFontStyleWithDefault)(fontStyle && fontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_TITLE], _fontStyle.FONT_STYLE_VISUALIZATION_TITLE);
204
+ const titleYPosition = titleFontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE];
202
205
  title.setAttribute('x', getXFromTextAlign(titleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_ALIGN]));
203
- title.setAttribute('y', 28);
206
+ title.setAttribute('y', titleYPosition);
204
207
  title.setAttribute('text-anchor', getTextAnchorFromTextAlign(titleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_ALIGN]));
205
208
  title.setAttribute('font-size', "".concat(titleFontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "px"));
206
209
  title.setAttribute('font-weight', titleFontStyle[_fontStyle.FONT_STYLE_OPTION_BOLD] ? _fontStyle.FONT_STYLE_OPTION_BOLD : 'normal');
@@ -222,8 +225,8 @@ const generateDVItem = (config, _ref3) => {
222
225
  const subtitleFontStyle = (0, _fontStyle.mergeFontStyleWithDefault)(fontStyle && fontStyle[_fontStyle.FONT_STYLE_VISUALIZATION_SUBTITLE], _fontStyle.FONT_STYLE_VISUALIZATION_SUBTITLE);
223
226
  const subtitle = document.createElementNS(svgNS, 'text');
224
227
  subtitle.setAttribute('x', getXFromTextAlign(subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_ALIGN]));
225
- subtitle.setAttribute('y', 28);
226
- subtitle.setAttribute('dy', 22);
228
+ subtitle.setAttribute('y', titleYPosition);
229
+ subtitle.setAttribute('dy', "".concat(subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] + 10));
227
230
  subtitle.setAttribute('text-anchor', getTextAnchorFromTextAlign(subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_TEXT_ALIGN]));
228
231
  subtitle.setAttribute('font-size', "".concat(subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "px"));
229
232
  subtitle.setAttribute('font-weight', subtitleFontStyle[_fontStyle.FONT_STYLE_OPTION_BOLD] ? _fontStyle.FONT_STYLE_OPTION_BOLD : 'normal');
@@ -247,6 +250,7 @@ const generateDVItem = (config, _ref3) => {
247
250
  formattedValue: config.formattedValue,
248
251
  subText: config.subText,
249
252
  valueColor,
253
+ textColor: titleColor,
250
254
  noData,
251
255
  icon,
252
256
  containerWidth: width,
@@ -313,7 +317,7 @@ function _default(config, parentEl, _ref4) {
313
317
  svgContainer.setAttribute('data-test', 'visualization-container');
314
318
 
315
319
  if (dashboard) {
316
- parentEl.style.borderRadius = _ui.spacers.dp8;
320
+ parentEl.style.borderRadius = '3px';
317
321
  return generateDashboardItem(config, {
318
322
  svgContainer,
319
323
  width,
@@ -322,7 +326,7 @@ function _default(config, parentEl, _ref4) {
322
326
  backgroundColor,
323
327
  noData,
324
328
  icon,
325
- ...(legendColor && shouldUseContrastColor(legendColor) ? {
329
+ ...(legendOptions.style === _legends.LEGEND_DISPLAY_STYLE_FILL && legendColor && shouldUseContrastColor(legendColor) ? {
326
330
  titleColor: _ui.colors.white
327
331
  } : {})
328
332
  });
package/build/es/visualizations/config/generators/dhis/singleValue.js CHANGED
@@ -1,4 +1,4 @@
1
- import { colors, spacers } from '@dhis2/ui';
1
+ import { colors } from '@dhis2/ui';
2
2
  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';
3
3
  import { getColorByValueFromLegendSet, LEGEND_DISPLAY_STYLE_FILL } from '../../../../modules/legends.js';
4
4
  const svgNS = 'http://www.w3.org/2000/svg'; // Compute text width before rendering
@@ -16,6 +16,7 @@ const generateValueSVG = _ref => {
16
16
  formattedValue,
17
17
  subText,
18
18
  valueColor,
19
+ textColor,
19
20
  icon,
20
21
  noData,
21
22
  containerWidth,
@@ -86,7 +87,7 @@ const generateValueSVG = _ref => {
86
87
  subTextNode.setAttribute('font-size', subTextSize);
87
88
  subTextNode.setAttribute('y', iconSize / 2);
88
89
  subTextNode.setAttribute('dy', subTextSize);
89
- subTextNode.setAttribute('fill', colors.grey600);
90
+ subTextNode.setAttribute('fill', textColor);
90
91
  subTextNode.appendChild(document.createTextNode(subText));
91
92
  svgValue.appendChild(subTextNode);
92
93
  }
@@ -109,13 +110,14 @@ const generateDashboardItem = (config, _ref2) => {
109
110
  formattedValue: config.formattedValue,
110
111
  subText: config.subText,
111
112
  valueColor,
113
+ textColor: titleColor,
112
114
  noData,
113
115
  icon,
114
116
  containerWidth: width,
115
117
  containerHeight: height
116
118
  }));
117
119
  const container = document.createElement('div');
118
- container.setAttribute('style', "display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background-color:".concat(backgroundColor, ";"));
120
+ container.setAttribute('style', "display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding-top: 8px; ".concat(backgroundColor ? "background-color:".concat(backgroundColor, ";") : ''));
119
121
  const titleStyle = "padding: 0 8px; text-align: center; font-size: 12px; color: ".concat(titleColor || '#666', ";");
120
122
  const title = document.createElement('span');
121
123
  title.setAttribute('style', titleStyle);
@@ -189,8 +191,9 @@ const generateDVItem = (config, _ref3) => {
189
191
  const svgWrapper = document.createElementNS(svgNS, 'svg');
190
192
  const title = document.createElementNS(svgNS, 'text');
191
193
  const titleFontStyle = mergeFontStyleWithDefault(fontStyle && fontStyle[FONT_STYLE_VISUALIZATION_TITLE], FONT_STYLE_VISUALIZATION_TITLE);
194
+ const titleYPosition = titleFontStyle[FONT_STYLE_OPTION_FONT_SIZE];
192
195
  title.setAttribute('x', getXFromTextAlign(titleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN]));
193
- title.setAttribute('y', 28);
196
+ title.setAttribute('y', titleYPosition);
194
197
  title.setAttribute('text-anchor', getTextAnchorFromTextAlign(titleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN]));
195
198
  title.setAttribute('font-size', "".concat(titleFontStyle[FONT_STYLE_OPTION_FONT_SIZE], "px"));
196
199
  title.setAttribute('font-weight', titleFontStyle[FONT_STYLE_OPTION_BOLD] ? FONT_STYLE_OPTION_BOLD : 'normal');
@@ -212,8 +215,8 @@ const generateDVItem = (config, _ref3) => {
212
215
  const subtitleFontStyle = mergeFontStyleWithDefault(fontStyle && fontStyle[FONT_STYLE_VISUALIZATION_SUBTITLE], FONT_STYLE_VISUALIZATION_SUBTITLE);
213
216
  const subtitle = document.createElementNS(svgNS, 'text');
214
217
  subtitle.setAttribute('x', getXFromTextAlign(subtitleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN]));
215
- subtitle.setAttribute('y', 28);
216
- subtitle.setAttribute('dy', 22);
218
+ subtitle.setAttribute('y', titleYPosition);
219
+ subtitle.setAttribute('dy', "".concat(subtitleFontStyle[FONT_STYLE_OPTION_FONT_SIZE] + 10));
217
220
  subtitle.setAttribute('text-anchor', getTextAnchorFromTextAlign(subtitleFontStyle[FONT_STYLE_OPTION_TEXT_ALIGN]));
218
221
  subtitle.setAttribute('font-size', "".concat(subtitleFontStyle[FONT_STYLE_OPTION_FONT_SIZE], "px"));
219
222
  subtitle.setAttribute('font-weight', subtitleFontStyle[FONT_STYLE_OPTION_BOLD] ? FONT_STYLE_OPTION_BOLD : 'normal');
@@ -237,6 +240,7 @@ const generateDVItem = (config, _ref3) => {
237
240
  formattedValue: config.formattedValue,
238
241
  subText: config.subText,
239
242
  valueColor,
243
+ textColor: titleColor,
240
244
  noData,
241
245
  icon,
242
246
  containerWidth: width,
@@ -303,7 +307,7 @@ export default function (config, parentEl, _ref4) {
303
307
  svgContainer.setAttribute('data-test', 'visualization-container');
304
308
 
305
309
  if (dashboard) {
306
- parentEl.style.borderRadius = spacers.dp8;
310
+ parentEl.style.borderRadius = '3px';
307
311
  return generateDashboardItem(config, {
308
312
  svgContainer,
309
313
  width,
@@ -312,7 +316,7 @@ export default function (config, parentEl, _ref4) {
312
316
  backgroundColor,
313
317
  noData,
314
318
  icon,
315
- ...(legendColor && shouldUseContrastColor(legendColor) ? {
319
+ ...(legendOptions.style === LEGEND_DISPLAY_STYLE_FILL && legendColor && shouldUseContrastColor(legendColor) ? {
316
320
  titleColor: colors.white
317
321
  } : {})
318
322
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2/analytics",
3
- "version": "25.1.0",
3
+ "version": "25.1.2",
4
4
  "main": "./build/cjs/index.js",
5
5
  "module": "./build/es/index.js",
6
6
  "exports": {