From 4d45c4282af2da4e6b06b8d844dc333ccb83d343 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Fri, 29 Sep 2017 22:02:48 +0200
Subject: Add button for export of current chart to svg

---
 src/components/app/map/MapStageComponent.js        |  2 +-
 .../app/sidebars/elements/LoadChartComponent.js    | 80 +++++++++++++++-------
 2 files changed, 56 insertions(+), 26 deletions(-)

diff --git a/src/components/app/map/MapStageComponent.js b/src/components/app/map/MapStageComponent.js
index 20389758..cd6e5e1b 100644
--- a/src/components/app/map/MapStageComponent.js
+++ b/src/components/app/map/MapStageComponent.js
@@ -31,7 +31,7 @@ class MapStageComponent extends React.Component {
 
         window["exportCanvasToImage"] = () => {
             const canvasData = this.stage.getStage().toDataURL();
-            const newWindow = window.open('about:blank', 'OpenDC Canvas Export');
+            const newWindow = window.open("");
             newWindow.document.write("<img src='" + canvasData + "' alt='Canvas Image Export'/>");
             newWindow.document.title = "OpenDC Canvas Export";
         }
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;
-- 
cgit v1.2.3