Implement requested change to native react idiom
This commit is contained in:
parent
6add053a92
commit
724e48f738
|
@ -1,3 +1,5 @@
|
|||
import {useMemo} from "react";
|
||||
|
||||
type ColorMap = [number, string][]
|
||||
|
||||
import styles from './ColorMapLegend.module.less'
|
||||
|
@ -6,24 +8,20 @@ export default function ColorMapLegend({map}: {map: ColorMap}) {
|
|||
const min = map[0][0]
|
||||
const max = map[map.length - 1][0]
|
||||
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+")";
|
||||
const gradientId = useMemo(() => `gradient${Math.floor(Math.random() * 1000000)}`, []);
|
||||
const gradientUrl = `url(#${gradientId})`;
|
||||
return (
|
||||
<div className={styles.colorMapLegend}>
|
||||
<svg width="100%" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<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]) => (
|
||||
<stop key={value} offset={normalizeValue(value) * 100 + '%'} stopColor={color} />
|
||||
))}
|
||||
</linearGradient>
|
||||
</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>
|
||||
{map.map(([value]) => (
|
||||
<span className={styles.tick} key={value} style={{left: normalizeValue(value) * 100 + '%'}}>
|
||||
|
|
Loading…
Reference in a new issue