Manually generate IDs

2 files changed, 94 insertions, 100 deletions

diff --git a/frontend/src/components/app/sidebars/elements/LoadBarComponent.js b/frontend/src/components/app/sidebars/elements/LoadBarComponent.js
index 8c9b164b..01005085 100644
--- a/frontend/src/components/app/sidebars/elements/LoadBarComponent.js
+++ b/frontend/src/components/app/sidebars/elements/LoadBarComponent.js
@@ -1,22 +1,22 @@
-import classNames from "classnames";
-import React from "react";
+import classNames from 'classnames'
+import React from 'react'
 
 const LoadBarComponent = ({ percent, disabled }) => (
-  <div className="mt-1">
-    <strong>Current load</strong>
-    <div className={classNames("progress", { disabled })}>
-      <div
-        className="progress-bar"
-        role="progressbar"
-        aria-valuenow={percent}
-        aria-valuemin="0"
-        aria-valuemax="100"
-        style={{ width: percent + "%" }}
-      >
-        {percent}%
-      </div>
+    <div className="mt-1">
+        <strong>Current load</strong>
+        <div className={classNames('progress', { disabled })}>
+            <div
+                className="progress-bar"
+                role="progressbar"
+                aria-valuenow={percent}
+                aria-valuemin="0"
+                aria-valuemax="100"
+                style={{ width: percent + '%' }}
+            >
+                {percent}%
+            </div>
+        </div>
     </div>
-  </div>
-);
+)
 
-export default LoadBarComponent;
+export default LoadBarComponent
diff --git a/frontend/src/components/app/sidebars/elements/LoadChartComponent.js b/frontend/src/components/app/sidebars/elements/LoadChartComponent.js
index 5f0d40cb..ae52891a 100644
--- a/frontend/src/components/app/sidebars/elements/LoadChartComponent.js
+++ b/frontend/src/components/app/sidebars/elements/LoadChartComponent.js
@@ -1,90 +1,84 @@
-import React from "react";
-import ReactDOM from "react-dom/server";
-import SvgSaver from "svgsaver";
-import {
-  VictoryAxis,
-  VictoryChart,
-  VictoryLabel,
-  VictoryLine,
-  VictoryScatter
-} from "victory";
-import { convertSecondsToFormattedTime } from "../../../../util/date-time";
+import React from 'react'
+import ReactDOM from 'react-dom/server'
+import SvgSaver from 'svgsaver'
+import { VictoryAxis, VictoryChart, VictoryLabel, 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"
-    );
-  };
+    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>
-  );
-};
+    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
-        labelComponent={
-          <VictoryLabel renderInPortal angle={90} dy={-5} dx={60} />
-        }
-        data={[{ x: currentTick + 1, y: 0 }, { x: currentTick + 1, y: 1 }]}
-        labels={point =>
-          point.y === 1
-            ? "Current tick : " + convertSecondsToFormattedTime(currentTick)
-            : ""}
-        style={{
-          data: { stroke: "#00A6D6", strokeWidth: 4 },
-          labels: { fill: "#00A6D6" }
-        }}
-      />
-    ) : (
-      undefined
-    )}
-  </VictoryChart>
-);
+    <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
+                labelComponent={
+                    <VictoryLabel renderInPortal angle={90} dy={-5} dx={60}/>
+                }
+                data={[{ x: currentTick + 1, y: 0 }, { x: currentTick + 1, y: 1 }]}
+                labels={point =>
+                    point.y === 1
+                        ? 'Current tick : ' + convertSecondsToFormattedTime(currentTick)
+                        : ''}
+                style={{
+                    data: { stroke: '#00A6D6', strokeWidth: 4 },
+                    labels: { fill: '#00A6D6' },
+                }}
+            />
+        ) : (
+            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>
-);
+    <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;
+export default LoadChartComponent