pub-solar/obs-portal
5
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Add incrementing ID to gradient svg.

Browse source 
So we do not overwrite it when the other button is enabled.
This commit is contained in:
gluap 2021-12-19 13:28:02 +01:00 committed by Paul Bienkowski
parent a5f5acd6d5
commit cdcee6e29c
1 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/components/ColorMapLegend.tsx
View file

@ -6,19 +6,24 @@ export default function ColorMapLegend({map}: {map: ColorMap}) {
const min = map[0][0] const min = map[0][0]
const max = map[map.length - 1][0] const max = map[map.length - 1][0]
const normalizeValue = (v) => (v - min) / (max - min) const normalizeValue = (v) => (v - min) / (max - min)
if( typeof ColorMapLegend.counter == 'undefined' ) {
ColorMapLegend.counter = 0;
}
ColorMapLegend.counter++;
ColorMapLegend.id="gradient"+ColorMapLegend.counter;
ColorMapLegend.url="url(#"+ColorMapLegend.id+")";
return ( return (
<div className={styles.colorMapLegend}> <div className={styles.colorMapLegend}>
<svg width="100%" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <svg width="100%" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs> <defs>
<linearGradient id="gradient" x1="0" x2="1" y1="0" y2="0"> <linearGradient id={ColorMapLegend.id} x1="0" x2="1" y1="0" y2="0">
{map.map(([value, color]) => ( {map.map(([value, color]) => (
<stop key={value} offset={normalizeValue(value) * 100 + '%'} stopColor={color} /> <stop key={value} offset={normalizeValue(value) * 100 + '%'} stopColor={color} />
))} ))}
</linearGradient> </linearGradient>
</defs> </defs>
<rect id="rect1" x="0" y="0" width="100%" height="100%" fill="url(#gradient)" /> <rect id="rect1" x="0" y="0" width="100%" height="100%" fill={ColorMapLegend.url} />
</svg> </svg>
{map.map(([value]) => ( {map.map(([value]) => (
<span className={styles.tick} key={value} style={{left: normalizeValue(value) * 100 + '%'}}> <span className={styles.tick} key={value} style={{left: normalizeValue(value) * 100 + '%'}}>