summaryrefslogtreecommitdiff
path: root/src/components/app/sidebars/elements/LoadChartComponent.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/app/sidebars/elements/LoadChartComponent.js')
-rw-r--r--src/components/app/sidebars/elements/LoadChartComponent.js130
1 files changed, 69 insertions, 61 deletions
diff --git a/src/components/app/sidebars/elements/LoadChartComponent.js b/src/components/app/sidebars/elements/LoadChartComponent.js
index 91d89287..6f66010e 100644
--- a/src/components/app/sidebars/elements/LoadChartComponent.js
+++ b/src/components/app/sidebars/elements/LoadChartComponent.js
@@ -1,73 +1,81 @@
import React from "react";
import ReactDOM from "react-dom/server";
import SvgSaver from "svgsaver";
-import {VictoryAxis, VictoryChart, VictoryLine, VictoryScatter} from "victory";
-import {convertSecondsToFormattedTime} from "../../../../util/date-time";
+import {
+ VictoryAxis,
+ VictoryChart,
+ VictoryLine,
+ VictoryScatter
+} from "victory";
+import { convertSecondsToFormattedTime } from "../../../../util/date-time";
-const LoadChartComponent = ({data, currentTick}) => {
- const onExport = () => {
- const div = document.createElement("div");
- div.innerHTML = ReactDOM.renderToString(
- <VictoryChartComponent data={data} currentTick={currentTick} showCurrentTick={false}/>
- );
- div.firstChild.style = "font-family: Roboto, Arial, sans-serif; font-size: 10pt;";
- const svgSaver = new SvgSaver();
- svgSaver.asSvg(div.firstChild, "opendc-chart-export-" + Date.now() + ".svg");
- };
-
- return (
- <div className="mt-1" style={{position: "relative"}}>
- <strong>Load over time</strong>
- <VictoryChartComponent data={data} currentTick={currentTick} showCurrentTick={true}/>
- <ExportChartComponent onExport={onExport}/>
- </div>
+const LoadChartComponent = ({ data, currentTick }) => {
+ const onExport = () => {
+ const div = document.createElement("div");
+ div.innerHTML = ReactDOM.renderToString(
+ <VictoryChartComponent
+ data={data}
+ currentTick={currentTick}
+ showCurrentTick={false}
+ />
+ );
+ div.firstChild.style =
+ "font-family: Roboto, Arial, sans-serif; font-size: 10pt;";
+ const svgSaver = new SvgSaver();
+ svgSaver.asSvg(
+ div.firstChild,
+ "opendc-chart-export-" + Date.now() + ".svg"
);
+ };
+
+ return (
+ <div className="mt-1" style={{ position: "relative" }}>
+ <strong>Load over time</strong>
+ <VictoryChartComponent
+ data={data}
+ currentTick={currentTick}
+ showCurrentTick={true}
+ />
+ <ExportChartComponent onExport={onExport} />
+ </div>
+ );
};
-const VictoryChartComponent = ({data, currentTick, showCurrentTick}) => (
- <VictoryChart
- height={250}
- padding={{top: 10, bottom: 50, left: 50, right: 50}}
- >
- <VictoryAxis
- tickFormat={tick => convertSecondsToFormattedTime(tick)}
- fixLabelOverlap={true}
- label="Simulated Time"
- />
- <VictoryAxis
- dependentAxis
- label="Load"
- />
- <VictoryLine
- data={data}
- />
- <VictoryScatter
- data={data}
- />
- {showCurrentTick ?
- <VictoryLine
- data={[
- {x: currentTick + 1, y: 0},
- {x: currentTick + 1, y: 1},
- ]}
- style={{
- data: {stroke: "#00A6D6", strokeWidth: 3}
- }}
- /> :
- undefined
- }
- </VictoryChart>
+const VictoryChartComponent = ({ data, currentTick, showCurrentTick }) => (
+ <VictoryChart
+ height={250}
+ padding={{ top: 10, bottom: 50, left: 50, right: 50 }}
+ >
+ <VictoryAxis
+ tickFormat={tick => convertSecondsToFormattedTime(tick)}
+ fixLabelOverlap={true}
+ label="Simulated Time"
+ />
+ <VictoryAxis dependentAxis label="Load" />
+ <VictoryLine data={data} />
+ <VictoryScatter data={data} />
+ {showCurrentTick ? (
+ <VictoryLine
+ data={[{ x: currentTick + 1, y: 0 }, { x: currentTick + 1, y: 1 }]}
+ style={{
+ data: { stroke: "#00A6D6", strokeWidth: 3 }
+ }}
+ />
+ ) : (
+ undefined
+ )}
+ </VictoryChart>
);
-const ExportChartComponent = ({onExport}) => (
- <button
- className="btn btn-success btn-circle btn-sm"
- title="Export Chart to PNG Image"
- onClick={onExport}
- style={{position: "absolute", top: 0, right: 0}}
- >
- <span className="fa fa-camera"/>
- </button>
+const ExportChartComponent = ({ onExport }) => (
+ <button
+ className="btn btn-success btn-circle btn-sm"
+ title="Export Chart to PNG Image"
+ onClick={onExport}
+ style={{ position: "absolute", top: 0, right: 0 }}
+ >
+ <span className="fa fa-camera" />
+ </button>
);
export default LoadChartComponent;