fix: rework old implementation WIP

dhis2 · Sep 4, 2024 · f59ce52 · f59ce52
1 parent f3fb9c2
commit f59ce52
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 21 deletions.
diff --git a/src/__demo__/SingleValue.stories.js b/src/__demo__/SingleValue.stories.js
@@ -2,8 +2,8 @@ import { storiesOf } from '@storybook/react'
 import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react'
 import { createVisualization } from '../index.js'
 const constainerStyleBase = {
-    width: 400,
-    height: 400,
+    width: 800,
+    height: 800,
     border: '1px solid magenta',
     marginBottom: 14,
 }
@@ -406,11 +406,16 @@ const data = [
                     dimensionItemType: 'INDICATOR',
                     valueType: 'NUMBER',
                     totalAggregationType: 'AVERAGE',
+                    // indicatorType: {
+                    //     name: 'Per cent',
+                    //     displayName: 'Per cent',
+                    //     factor: 100,
+                    //     number: false,
+                    // },
                     indicatorType: {
-                        name: 'Per cent',
-                        displayName: 'Per cent',
-                        factor: 100,
-                        number: false,
+                        name: 'Custom',
+                        displayName: 'Custom subtext',
+                        number: true,
                     },
                 },
             },
@@ -720,7 +725,7 @@ storiesOf('SingleValue', module).add('default', () => {
                                   ...containerStyle,
                                   ...{
                                       opacity: 0.45,
-                                      transform: 'translateX(410px)',
+                                      transform: `translateX(${width + 10}px)`,
                                       zIndex: 10,
                                       backgroundColor: 'purple',
                                   },

diff --git a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/constants.js b/src/visualizations/config/generators/highcharts/renderSingleValueSvg/constants.js
@@ -16,7 +16,7 @@ export const TEXT_WIDTH_CONTAINER_WIDTH_FACTOR = 1.3
 
 // do not allow text size to exceed this
 export const TEXT_SIZE_CONTAINER_HEIGHT_FACTOR = 0.6
-export const TEXT_SIZE_MAX_THRESHOLD = 400
+export const TEXT_SIZE_MAX_THRESHOLD = 200
 
 // multiply text size with this factor
 // to get an appropriate letter spacing

diff --git a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/generateValueSVG.js b/src/visualizations/config/generators/highcharts/renderSingleValueSvg/generateValueSVG.js
@@ -33,7 +33,7 @@ export const generateValueSVG = ({
     const group = renderer
         .g('value')
         .css({
-            transform: 'scale(0.5) translate(100%, 100%)',
+            transform: 'translate(50%, 50%)',
         })
         .add()
 
@@ -92,14 +92,11 @@ export const generateValueSVG = ({
             svgIconDocument.documentElement.getAttribute('height')
         const iconElWidth =
             svgIconDocument.documentElement.getAttribute('width')
-        const x = ((iconSize + getIconPadding(textSize) + textWidth) / 2) * -1
-        const y = (iconSize / 2 - topMargin / 2) * -1
         const iconGroup = renderer
             .g('icon')
             .attr('data-test', 'visualization-icon')
             .css({
-                color: 'green',
-                // color: fillColor,
+                color: fillColor,
             })
         /* Force the group element to have the same dimensions as the original
          * SVG image by adding this rect. This ensures the icon has the intended
@@ -109,15 +106,18 @@ export const generateValueSVG = ({
         Array.from(svgIconDocument.documentElement.children).forEach((node) =>
             iconGroup.element.appendChild(node)
         )
-        iconGroup.add()
-        const formattedValueBox = formattedValueText.getBBox()
-        const targetHeight = textSize / 2
-        const scaleFactor = targetHeight / iconElHeight
+        const formattedValueTextBox = formattedValueText.getBBox()
+        const scaleFactor = textSize / iconElHeight
+        const textHeight = formattedValueTextBox.height / 2
+        const iconHeight = (iconElHeight * scaleFactor) / 2
+        const translateY =
+            (formattedValueTextBox.y + (textHeight - iconHeight)) / scaleFactor
 
-        console.log(formattedValueBox)
-        iconGroup.css({
-            transform: `scale(${scaleFactor}) translate(16px, 104px)`,
-        })
+        iconGroup
+            .css({
+                transform: `scale(${scaleFactor}) translate(-98px, ${translateY}px)`,
+            })
+            .add(group)
     }
 
     if (subText) {