Merge pull request #17 from fehmisener/develop

Develop
fehmisener · May 8, 2024 · 0643fd3 · 0643fd3
2 parents 570654c + 18b5bfe
commit 0643fd3
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 4 deletions.
diff --git a/scripts/data_generate.py b/scripts/data_generate.py
@@ -0,0 +1,22 @@
+import csv
+import random
+
+
+def generate_data(filename, num_points):
+    with open(filename, "w", newline="") as csvfile:
+        fieldnames = ["time", "voltage", "current"]
+        writer = csv.DictWriter(csvfile, fieldnames=fieldnames)
+
+        writer.writeheader()
+        for i in range(num_points):
+            time = i
+            voltage = random.uniform(0, 10)
+            current = random.uniform(0, 5)
+            writer.writerow({"time": time, "voltage": voltage, "current": current})
+
+
+if __name__ == "__main__":
+    num_points = 1000000
+    filename = "data.csv"
+    generate_data(filename, num_points)
+    print(f"CSV file with {num_points} data points generated successfully: {filename}")
diff --git a/src/components/Charts/ChartBox.jsx b/src/components/Charts/ChartBox.jsx
@@ -1,20 +1,23 @@
-import React from 'react';
-import download from 'downloadjs';
+import React, { useState } from 'react';
 
-import { Chart } from 'chart.js';
 import LineChart from './LineChart';
 import ScatterChart from './ScatterChart';
 
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Paper from '@mui/material/Paper';
 import Button from '@mui/material/Button';
-import LoadingButton from '@mui/lab/LoadingButton';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Typography from '@mui/material/Typography';
 
 import { alpha } from '@mui/material';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import ClearOutlinedIcon from '@mui/icons-material/ClearOutlined';
 import ShowChartOutlinedIcon from '@mui/icons-material/ShowChartOutlined';
 import ScatterPlotOutlinedIcon from '@mui/icons-material/ScatterPlotOutlined';
@@ -27,6 +30,8 @@ export default function ChartBox({
   onChartTypeChange,
   onRemoveChart,
 }) {
+  const [openInfo, setOpenInfo] = useState(false);
+
   const _handleChartTypeChange = (event, index, newType) => {
     if (newType !== null) {
       onChartTypeChange(newType);
@@ -68,6 +73,14 @@ export default function ChartBox({
     }
   };
 
+  const handleInfoOpen = () => {
+    setOpenInfo(true);
+  };
+
+  const handleInfoClose = () => {
+    setOpenInfo(false);
+  };
+
   return (
     <Box
       key={index}
@@ -130,11 +143,51 @@ export default function ChartBox({
                 >
                   Remove Chart
                 </Button>
+                <Button
+                  startIcon={<InfoOutlinedIcon />}
+                  onClick={handleInfoOpen}
+                >
+                  How to Use
+                </Button>
               </ButtonGroup>
             </Grid>
           </Grid>
         </Grid>
       </Paper>
+      <Dialog open={openInfo} onClose={handleInfoClose}>
+        <DialogTitle>How to Use</DialogTitle>
+        <DialogContent>
+          <Typography variant="body1">
+            - <strong>Zoom In/Out:</strong> Use the mouse wheel to zoom in or
+            out on the chart. Or, with a mouse pointer, the zooming is performed
+            by dragging out a rectangle in the chart. When zooming, a button
+            appears that lets the user zoom out.
+          </Typography>
+          <Box mt={2} />
+          <Typography variant="body1">
+            - <strong>Pan:</strong> Click and drag on the chart while holding
+            the Shift key to pan around and explore different areas.
+          </Typography>
+          <Box mt={2} />
+          <Typography variant="body1">
+            - <strong>Download Screenshot:</strong> Use the context button with
+            a menu located in the top right corner of the chart to download the
+            chart in various formats (PNG, JPEG, PDF, SVG).
+          </Typography>
+          <Box mt={2} />
+          <Typography variant="body1">
+            - <strong>Change Plot Type:</strong> You can change the plot type
+            between line and scatter. Use the toggle buttons provided below the
+            chart to switch between the plot types.
+          </Typography>
+        </DialogContent>
+
+        <DialogActions>
+          <Button onClick={handleInfoClose} autoFocus>
+            Close
+          </Button>
+        </DialogActions>
+      </Dialog>
     </Box>
   );
 }
diff --git a/src/components/Charts/LineChart.jsx b/src/components/Charts/LineChart.jsx
@@ -5,11 +5,13 @@ import DarkUnica from 'highcharts/themes/brand-dark';
 import HighchartsExporting from 'highcharts/modules/exporting';
 import HighchartsReact from 'highcharts-react-official';
 import HighchartsBoost from 'highcharts/modules/boost';
+import HighchartsZoom from 'highcharts/modules/mouse-wheel-zoom';
 
 DarkUnica(Highcharts);
 
 HighchartsBoost(Highcharts);
 HighchartsExporting(Highcharts);
+HighchartsZoom(Highcharts);
 
 export default function LineChart({ chartName, data, xAxis }) {
   const optionsHighChart = {
@@ -27,6 +29,7 @@ export default function LineChart({ chartName, data, xAxis }) {
       type: 'line',
       zooming: {
         type: 'xy',
+        mouseWheel: true,
       },
       panning: {
         enabled: true,

diff --git a/src/components/Charts/ScatterChart.jsx b/src/components/Charts/ScatterChart.jsx
@@ -5,11 +5,13 @@ import DarkUnica from 'highcharts/themes/brand-dark';
 import HighchartsExporting from 'highcharts/modules/exporting';
 import HighchartsReact from 'highcharts-react-official';
 import HighchartsBoost from 'highcharts/modules/boost';
+import HighchartsZoom from 'highcharts/modules/mouse-wheel-zoom';
 
 DarkUnica(Highcharts);
 
 HighchartsBoost(Highcharts);
 HighchartsExporting(Highcharts);
+HighchartsZoom(Highcharts);
 
 export default function ScatterChart({ chartName, data, xAxis }) {
   const optionsHighChart = {
@@ -24,9 +26,11 @@ export default function ScatterChart({ chartName, data, xAxis }) {
       enabled: true,
     },
     chart: {
+      animation: false,
       type: 'scatter',
       zooming: {
         type: 'xy',
+        mouseWheel: true,
       },
       panning: {
         enabled: true,