66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
import GridWidget, {GridProps} from "./GridWidget";
|
|
import {AppStore, getAppState} from "../StateStore";
|
|
import UIComponent from "./UIComponent";
|
|
import * as JSX from "../JSXFactory";
|
|
import Timeseries from "../Timeseries";
|
|
|
|
class LegendWidget extends UIComponent {
|
|
private skeleton: GridWidget;
|
|
private display: HTMLSpanElement = document.createElement("span");
|
|
private bodyRef: HTMLElement;
|
|
|
|
constructor(gridProps: GridProps) {
|
|
super();
|
|
this.display = <this.MainBody />;
|
|
this.skeleton = new GridWidget({
|
|
...gridProps,
|
|
title: "Legend:",
|
|
className: "legend-widget",
|
|
body: this.display,
|
|
});
|
|
AppStore().subscribeStoreVal("highlightedTimeseries", () => this.updateDisplay());
|
|
this.updateDisplay();
|
|
}
|
|
|
|
private updateDisplay() {
|
|
this.bodyRef.replaceWith(<this.MainBody />);
|
|
}
|
|
|
|
private MainBody = () => {
|
|
this.bodyRef = <div><this.TimeseriesList /></div>;
|
|
return this.bodyRef;
|
|
}
|
|
|
|
private TimeseriesList = () => {
|
|
const highlightedTimeseries = getAppState().highlightedTimeseries;
|
|
return <ul>
|
|
{ ...getAppState().rightTimeseries.map(timeseries =>
|
|
<this.TimeseriesLegendEntry
|
|
timeseries={timeseries}
|
|
highlighted={timeseries.getName() === highlightedTimeseries}/>) }
|
|
{ ...getAppState().leftTimeseries.map(timeseries =>
|
|
<this.TimeseriesLegendEntry
|
|
timeseries={timeseries}
|
|
highlighted={timeseries.getName() === highlightedTimeseries}/>) }
|
|
</ul>;
|
|
}
|
|
|
|
private TimeseriesLegendEntry = ({timeseries, highlighted}: {timeseries: Timeseries, highlighted: boolean}) => {
|
|
const option = new Option();
|
|
option.style.color = timeseries.getColour();
|
|
return <li
|
|
style={`color: ${option.style.color}`}
|
|
className={highlighted ? "highlighted" : ""}
|
|
onmouseover={() => AppStore().setHighlightedTimeseries(timeseries.getName())}
|
|
onmouseout={() => AppStore().setHighlightedTimeseries(null)}>
|
|
{timeseries.getName()}
|
|
</li>;
|
|
}
|
|
|
|
current() {
|
|
return this.skeleton.current();
|
|
}
|
|
}
|
|
|
|
export default LegendWidget;
|