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

Implement requested change to native react idiom

Browse source
This commit is contained in:
gluap 2021-12-19 17:01:13 +01:00 committed by Paul Bienkowski
parent 6add053a92
commit 724e48f738
1 changed files with 6 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,3 +1,5 @@
import {useMemo} from "react";
type ColorMap = [number, string][] type ColorMap = [number, string][]
import styles from './ColorMapLegend.module.less' import styles from './ColorMapLegend.module.less'
@ -6,24 +8,20 @@ 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' ) { const gradientId = useMemo(() => `gradient${Math.floor(Math.random() * 1000000)}`, []);
ColorMapLegend.counter = 0; const gradientUrl = `url(#${gradientId})`;
}
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={ColorMapLegend.id} x1="0" x2="1" y1="0" y2="0"> <linearGradient id={gradientId} 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={ColorMapLegend.url} /> <rect id="rect1" x="0" y="0" width="100%" height="100%" fill={gradientUrl} />
</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 + '%'}}>