this.container = e} />;
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/src/Plot/index.css:
--------------------------------------------------------------------------------
1 | .Plot {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: flex-start;
5 | margin: 10px;
6 | }
7 | .Plots {
8 | display: flex;
9 | flex-direction: row;
10 | flex-wrap: wrap;
11 | }
12 | .PlotZoomOut {
13 | position: absolute;
14 | left: 50%;
15 | top: 50%;
16 | cursor: pointer;
17 | opacity: 0.3;
18 | padding: 5px;
19 | transform: translate(-50%, -50%);
20 | }
21 | .PlotZoomOut:hover {
22 | background: rgba(255, 255, 255, 0.1);
23 | }
24 | .PlotLegendItem {
25 | cursor: pointer;
26 | user-select: none;
27 | }
28 | .PlotCanvases {
29 | position: relative;
30 | }
31 | .PlotUICanvas {
32 | position: absolute;
33 | top: 0px;
34 | left: 0px;
35 | }
--------------------------------------------------------------------------------
/src/Plot/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import './index.css';
3 | import lodash from 'lodash';
4 | import { stringToHSL, arrayReplaceIndex, clamp, interpolate } from '../Util';
5 |
6 | type PlotWindow = [number, number];
7 | export interface PlotLine {
8 | data: number[];
9 | label: string;
10 | color?: string;
11 | yMin?: number;
12 | yMax?: number;
13 | }
14 | function windowedData(data: number[], window: PlotWindow | undefined) {
15 | if (window) {
16 | const start = Math.floor(window[0] * data.length);
17 | const end = Math.ceil(window[1] * data.length);
18 | return { data: data.slice(start, end), start, end };
19 | } {
20 | return { data, start: 0, end: data.length };
21 | }
22 | }
23 | function drawPlotLine(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, line: PlotLine, window: PlotWindow | undefined) {
24 | let data = windowedData(line.data, window).data;
25 | if (data.length === 0) {
26 | return;
27 | }
28 | const dataMin = line.yMin ?? data.reduce((p, x) => Math.min(p, x));
29 | const dataMax = line.yMax ?? data.reduce((p, x) => Math.max(p, x));
30 | const dataRange = dataMax - dataMin;
31 | const canvasCoord = (i: number, value: number): [number, number] => {
32 | const x = canvas.width * i / (data.length - 1);
33 | const y = canvas.height - canvas.height * (value - dataMin) / dataRange;
34 | return [x, y];
35 | }
36 | ctx.beginPath();
37 | ctx.moveTo(...canvasCoord(0, data[0]));
38 | ctx.strokeStyle = line.color ?? stringToHSL(line.label, 0.5, 0.5);
39 | for (let i=1; i < data.length; i++) {
40 | ctx.lineTo(...canvasCoord(i, data[i]));
41 | }
42 | ctx.stroke();
43 | }
44 |
45 | export interface PlotProps {
46 | title?: string;
47 | lines: PlotLine[];
48 | }
49 | export function Plot({ lines, title }: PlotProps) {
50 | const dataCanvas = React.createRef
();
51 | const uiCanvas = React.createRef();
52 | const [windowStack, setWindowStack] = React.useState([]);
53 | const [hidden, setHidden] = React.useState([]);
54 | const [hover, setHover] = React.useState();
55 | const setHoverThrottled = React.useCallback(lodash.throttle(setHover, 16), [setHover]);
56 | const [windowPreview, setWindowPreview] = React.useState();
57 | React.useEffect(() => {
58 | if (dataCanvas.current) {
59 | const ctx = dataCanvas.current.getContext('2d')!;
60 | ctx.clearRect(0, 0, dataCanvas.current.width, dataCanvas.current.height);
61 | for (let i=0; i < lines.length; i++) {
62 | if (hidden[i] !== true) {
63 | drawPlotLine(dataCanvas.current, ctx, lines[i], lodash.last(windowStack));
64 | }
65 | }
66 | }
67 | }, [lines, windowStack, hidden]);
68 | React.useEffect(() => {
69 | if (uiCanvas.current) {
70 | const ctx = uiCanvas.current.getContext('2d')!;
71 | ctx.clearRect(0, 0, uiCanvas.current.width, uiCanvas.current.height);
72 | if (hover !== undefined) {
73 | ctx.beginPath();
74 | ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
75 | ctx.moveTo(hover * uiCanvas.current.width, 0);
76 | ctx.lineTo(hover * uiCanvas.current.width, uiCanvas.current.height);
77 | ctx.stroke();
78 | }
79 | if (windowPreview) {
80 | ctx.fillStyle = `rgba(255, 255, 255, 0.1)`;
81 | ctx.fillRect(windowPreview[0] * uiCanvas.current.width, 0,
82 | (windowPreview[1] - windowPreview[0]) * uiCanvas.current.width, uiCanvas.current.height);
83 | }
84 | }
85 | }, [hover, windowPreview]);
86 | const canvasSize = { width: 600, height: 250 };
87 | return
88 | {title &&
{title}}
89 |
90 |
91 |
144 | {lines.map((line, i) => {
145 | const data = windowedData(line.data, lodash.last(windowStack));
146 | return
setHidden(arrayReplaceIndex(hidden, i, !hidden[i]))}
154 | >
155 | {line.label}
156 | {hover !== undefined ?
157 | {Math.round(hover * data.data.length)}: {data.data[Math.round(hover * data.data.length)]}
158 | : [{data.start}:{data.data[0]}, ..., {data.end - 1}:{lodash.last(data.data)}]}
159 |
160 | })}
161 |