Add button for export of current chart to svg

1 files changed, 55 insertions, 25 deletions

diff --git a/src/components/app/sidebars/elements/LoadChartComponent.js b/src/components/app/sidebars/elements/LoadChartComponent.js
index 19d58f77..93664ab6 100644
--- a/src/components/app/sidebars/elements/LoadChartComponent.js
+++ b/src/components/app/sidebars/elements/LoadChartComponent.js
@@ -1,29 +1,47 @@
 import React from "react";
+import ReactDOM from "react-dom/server";
 import {VictoryAxis, VictoryChart, VictoryLine, VictoryScatter} from "victory";
 import {convertSecondsToFormattedTime} from "../../../../util/date-time";
 
-const LoadChartComponent = ({data, currentTick}) => (
-    <div className="mt-1">
-        <strong>Load over time</strong>
-        <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}
-            />
+const LoadChartComponent = ({data, currentTick}) => {
+    const onExport = () => {
+        const newWindow = window.open("");
+        newWindow.document.write(ReactDOM.renderToString(
+            <VictoryChartComponent data={data} currentTick={currentTick} showCurrentTick={false}/>
+        ));
+        newWindow.document.title = "OpenDC Chart Export";
+    };
+
+    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},
@@ -32,9 +50,21 @@ const LoadChartComponent = ({data, currentTick}) => (
                 style={{
                     data: {stroke: "#00A6D6", strokeWidth: 3}
                 }}
-            />
-        </VictoryChart>
-    </div>
+            /> :
+            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>
 );
 
 export default LoadChartComponent;