Skip to content

Commit

Permalink
chore: scaling the icon correctly
Browse files Browse the repository at this point in the history
  • Loading branch information
@HendrikThePendric
HendrikThePendric committed Sep 4, 2024
1 parent fb6a3b4 commit f3fb9c2
Show file tree
Hide file tree
Showing 5 changed files with 306 additions and 132 deletions.
119 changes: 86 additions & 33 deletions src/__demo__/SingleValue.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
import { storiesOf } from '@storybook/react'
import React, { useCallback, useState, useMemo, useRef, useEffect } from 'react'
import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react'
import { createVisualization } from '../index.js'
const constainerStyleBase = {
width: 400,
height: 400,
border: '1px solid magenta',
marginBottom: 14,
}
const innerContainerStyle = {
overflow: 'hidden',
display: 'flex',
justifyContent: 'center',
height: '100%',
}

const data = [
{
response: {
Expand Down Expand Up @@ -601,43 +608,23 @@ 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 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,
icon,
}

storiesOf('SingleValue', module).add('default', () => {
const newChartRef = useRef(null)
const oldContainerRef = useRef(null)
const newContainerRef = useRef(null)
const [transpose, setTranspose] = useState(false)
const [width, setWidth] = useState(constainerStyleBase.width)
const [height, setHeight] = useState(constainerStyleBase.height)
const onOldContainerMounted = useCallback((el) => {
createVisualization(
data,
layout,
el,
extraOptions,
undefined,
undefined,
'dhis'
)
}, [])
const onNewContainerMounted = useCallback((el) => {
const obj = createVisualization(
data,
layout,
el,
extraOptions,
undefined,
undefined,
'singleValue'
)
newChartRef.current = obj.visualization
}, [])
const containerStyle = useMemo(
() => ({
...constainerStyleBase,
Expand All @@ -647,17 +634,47 @@ storiesOf('SingleValue', module).add('default', () => {
[width, height]
)
useEffect(() => {
if (newChartRef.current) {
console.log('calling reflow')
newChartRef.current.redraw()
if (oldContainerRef.current && newContainerRef.current) {
requestAnimationFrame(() => {
createVisualization(
data,
layout,
oldContainerRef.current,
extraOptions,
undefined,
undefined,
'dhis'
)
const newVisualization = createVisualization(
data,
layout,
newContainerRef.current,
extraOptions,
undefined,
undefined,
'singleValue'
)
newChartRef.current = newVisualization.visualization
})
}
}, [containerStyle])
const downloadOffline = useCallback(() => {
if (newChartRef.current) {
newChartRef.current.exportChartLocal({
sourceHeight: 768,
sourceWidth: 1024,
scale: 1,
fallbackToExportServer: false,
filename: 'testOfflineDownload',
showExportInProgress: true,
type: 'image/png',
})
}
}, [])

return (
<>
<div style={containerStyle} ref={onOldContainerMounted} />
<div style={containerStyle} ref={onNewContainerMounted} />
<div>
<div style={{ display: 'flex', gap: 12, marginBottom: 20 }}>
<div>
<label htmlFor="width">Width</label>
<input
Expand Down Expand Up @@ -686,6 +703,42 @@ storiesOf('SingleValue', module).add('default', () => {
value={height.toString()}
/>
</div>
<button onClick={downloadOffline}>Download offline</button>
<button
onClick={() => {
setTranspose(!transpose)
}}
>
{transpose ? 'Show side by side' : 'Transpose old and new'}
</button>
</div>
<div style={{ display: 'flex', gap: 12 }}>
<div
style={
transpose
? {
...containerStyle,
...{
opacity: 0.45,
transform: 'translateX(410px)',
zIndex: 10,
backgroundColor: 'purple',
},
}
: containerStyle
}
>
<div
ref={oldContainerRef}
style={innerContainerStyle}
></div>
</div>
<div style={containerStyle}>
<div
ref={newContainerRef}
style={innerContainerStyle}
></div>
</div>
</div>
</>
)
Expand Down
1 change: 1 addition & 0 deletions src/visualizations/config/generators/dhis/singleValue.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@ const generateValueSVG = ({
// embed icon to allow changing color
// (elements with fill need to use "currentColor" for this to work)
const iconSvgNode = document.createElementNS(svgNS, 'svg')
console.log('old', iconSize)
iconSvgNode.setAttribute('viewBox', '0 0 48 48')
iconSvgNode.setAttribute('width', iconSize)
iconSvgNode.setAttribute('height', iconSize)
Expand Down
33 changes: 16 additions & 17 deletions src/visualizations/config/generators/highcharts/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import HM from 'highcharts/highcharts-more'
import HB from 'highcharts/modules/boost'
import HE from 'highcharts/modules/exporting'
import HNDTD from 'highcharts/modules/no-data-to-display'
import HOE from 'highcharts/modules/offline-exporting'
import HPF from 'highcharts/modules/pattern-fill'
import HSG from 'highcharts/modules/solid-gauge'
import renderSingleValueSvg from './renderSingleValueSvg/index.js'
Expand All @@ -12,6 +13,7 @@ HM(H)
HSG(H)
HNDTD(H)
HE(H)
HOE(H)
HPF(H)
HB(H)

Expand Down Expand Up @@ -90,33 +92,30 @@ 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: {
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')
}
load: function () {
renderSingleValueSvg(config, el, extraOptions, this)
},
},
animation: false,
},
credits: { enabled: false },
// exporting: {
// enabled: false,
// },
exporting: {
enabled: true,
error: (options, error) => {
console.log('options', options)
console.log(error)
},
chartOptions: {
title: {
text: null,
},
},
},
lang: {
noData: null,
},
Expand Down
Loading

0 comments on commit f3fb9c2

Please sign in to comment.