chore: resizing the container

dhis2 · Sep 2, 2024 · fb6a3b4 · fb6a3b4
1 parent 7cae17e
commit fb6a3b4
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 8 deletions.
diff --git a/src/__demo__/SingleValue.stories.js b/src/__demo__/SingleValue.stories.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/react'
-import React, { useCallback } from 'react'
+import React, { useCallback, useState, useMemo, useRef, useEffect } from 'react'
 import { createVisualization } from '../index.js'
-const constainerStyle = {
+const constainerStyleBase = {
     width: 400,
     height: 400,
     border: '1px solid magenta',
@@ -601,13 +601,20 @@ const layout = {
     },
     axes: [],
 }
+// const icon =
+//     '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M32 12.5C32 13.0523 32.4477 13.5 33 13.5C33.5523 13.5 34 13.0523 34 12.5V11C34 10.4477 33.5523 10 33 10C32.4477 10 32 10.4477 32 11V12.5Z" fill="currentColor"/><path d="M16 24V27H18V24H21V22H18V19H16V22H13V24H16Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4 17C4 15.3431 5.34315 14 7 14H27C28.6569 14 30 15.3431 30 17V19H31V18H32V17C32 16.4477 32.4477 16 33 16C33.5523 16 34 16.4477 34 17V18H35V19H35.718C36.4722 19 37.1987 19.284 37.7529 19.7956L43.0348 24.6713C43.6501 25.2392 44 26.0384 44 26.8757V35H38.874C38.4299 36.7252 36.8638 38 35 38C33.1362 38 31.5701 36.7252 31.126 35H15.874C15.4299 36.7252 13.8638 38 12 38C10.1362 38 8.57006 36.7252 8.12602 35H4V17ZM31.126 33C31.5701 31.2748 33.1362 30 35 30C36.8638 30 38.4299 31.2748 38.874 33H42V28L30 28V33H31.126ZM30 26L41.5257 26L36.3963 21.2652C36.2116 21.0947 35.9694 21 35.718 21H30V26ZM27 16C27.5523 16 28 16.4477 28 17V33H15.874C15.4299 31.2748 13.8638 30 12 30C10.1362 30 8.57006 31.2748 8.12602 33H6V17C6 16.4477 6.44772 16 7 16H27ZM12 36C13.1046 36 14 35.1046 14 34C14 32.8954 13.1046 32 12 32C10.8954 32 10 32.8954 10 34C10 35.1046 10.8954 36 12 36ZM37 34C37 35.1046 36.1046 36 35 36C33.8954 36 33 35.1046 33 34C33 32.8954 33.8954 32 35 32C36.1046 32 37 32.8954 37 34Z" fill="currentColor"/><path d="M36.5 17C36.5 16.4477 36.9477 16 37.5 16H39C39.5523 16 40 16.4477 40 17C40 17.5523 39.5523 18 39 18H37.5C36.9477 18 36.5 17.5523 36.5 17Z" fill="currentColor"/><path d="M35.8285 12.759C35.4193 13.1298 35.3881 13.7622 35.759 14.1715C36.1298 14.5807 36.7622 14.6119 37.1715 14.241L38.0857 13.4126C38.4949 13.0417 38.5261 12.4093 38.1552 12.0001C37.7844 11.5908 37.152 11.5597 36.7427 11.9306L35.8285 12.759Z" fill="currentColor"/></svg>'
+
 const extraOptions = {
     dashboard: false,
     animation: 200,
     legendSets: [],
+    // icon,
 }
 
 storiesOf('SingleValue', module).add('default', () => {
+    const newChartRef = useRef(null)
+    const [width, setWidth] = useState(constainerStyleBase.width)
+    const [height, setHeight] = useState(constainerStyleBase.height)
     const onOldContainerMounted = useCallback((el) => {
         createVisualization(
             data,
@@ -620,7 +627,7 @@ storiesOf('SingleValue', module).add('default', () => {
         )
     }, [])
     const onNewContainerMounted = useCallback((el) => {
-        createVisualization(
+        const obj = createVisualization(
             data,
             layout,
             el,
@@ -629,11 +636,57 @@ storiesOf('SingleValue', module).add('default', () => {
             undefined,
             'singleValue'
         )
+        newChartRef.current = obj.visualization
     }, [])
+    const containerStyle = useMemo(
+        () => ({
+            ...constainerStyleBase,
+            width,
+            height,
+        }),
+        [width, height]
+    )
+    useEffect(() => {
+        if (newChartRef.current) {
+            console.log('calling reflow')
+            newChartRef.current.redraw()
+        }
+    }, [containerStyle])
+
     return (
         <>
-            <div style={constainerStyle} ref={onOldContainerMounted} />
-            <div style={constainerStyle} ref={onNewContainerMounted} />
+            <div style={containerStyle} ref={onOldContainerMounted} />
+            <div style={containerStyle} ref={onNewContainerMounted} />
+            <div>
+                <div>
+                    <label htmlFor="width">Width</label>
+                    <input
+                        type="number"
+                        name="width"
+                        id="width"
+                        min="1"
+                        step="5"
+                        onChange={(event) =>
+                            setWidth(parseInt(event.target.value))
+                        }
+                        value={width.toString()}
+                    />
+                </div>
+                <div>
+                    <label htmlFor="height">Height</label>
+                    <input
+                        type="number"
+                        name="height"
+                        id="height"
+                        min="1"
+                        step="5"
+                        onChange={(event) =>
+                            setHeight(parseInt(event.target.value))
+                        }
+                        value={height.toString()}
+                    />
+                </div>
+            </div>
         </>
     )
 })
diff --git a/src/visualizations/config/generators/highcharts/index.js b/src/visualizations/config/generators/highcharts/index.js
@@ -90,15 +90,28 @@ export function highcharts(config, el) {
 }
 
 export function singleValue(config, el, extraOptions) {
+    console.log('el', el)
+    let elClientHeight, elClientWidth
     return H.chart(el, {
         accessibility: { enabled: false },
         chart: {
             backgroundColor: 'transparent',
             events: {
-                load: function () {
-                    renderSingleValueSvg(config, el, extraOptions, this)
+                redraw: function () {
+                    if (
+                        el.clientHeight !== elClientHeight ||
+                        el.clientWidth !== elClientWidth
+                    ) {
+                        console.log('resize!!!', el)
+                        elClientHeight = el.clientHeight
+                        elClientWidth = el.clientWidth
+                        renderSingleValueSvg(config, el, extraOptions, this)
+                    } else {
+                        console.log('No action needed')
+                    }
                 },
             },
+            animation: false,
         },
         credits: { enabled: false },
         // exporting: {

diff --git a/src/visualizations/config/generators/highcharts/renderSingleValueSvg/generateValueSVG.js b/src/visualizations/config/generators/highcharts/renderSingleValueSvg/generateValueSVG.js
@@ -27,7 +27,7 @@ export const generateValueSVG = ({
     containerHeight,
     topMargin = 0,
 }) => {
-    console.log('show value')
+    console.log('show value', renderer)
     const showIcon = icon && formattedValue !== noData.text
 
     const textSize = getTextSize(
@@ -56,6 +56,20 @@ export const generateValueSVG = ({
     svgValue.setAttribute('y', '50%')
     svgValue.setAttribute('style', 'overflow: visible')
 
+    const box = renderer
+        .rect(0, 0, containerWidth, containerHeight)
+        .attr({
+            with: '50%',
+            height: '50%',
+            x: '50%',
+            y: '50%',
+        })
+        .css({
+            overflow: 'visible',
+            backgroundColor: 'green',
+        })
+        .add()
+
     let fillColor = colors.grey900
 
     if (valueColor) {