From f59ce52a5e4ba39c1b52616443b7a9b4b57ce101 Mon Sep 17 00:00:00 2001
From: HendrikThePendric <hendrik@dhis2.org>
Date: Wed, 4 Sep 2024 16:32:43 +0200
Subject: [PATCH] fix: rework old implementation WIP

---
 src/__demo__/SingleValue.stories.js           | 19 +++++++++-----
 .../renderSingleValueSvg/constants.js         |  2 +-
 .../renderSingleValueSvg/generateValueSVG.js  | 26 +++++++++----------
 3 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/__demo__/SingleValue.stories.js b/src/__demo__/SingleValue.stories.js
index 0b3bda6fa..f28b775df 100644
--- 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
index ce7cea956..06fd79fd0 100644
--- 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
index dd7efd382..5f365f0b5 100644
--- 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) {