import React from 'react';
import CanvasJSReact from '@canvasjs/react-charts';
const options = {
    zoomEnabled: true,
    animationEnabled: true,
    animationDuration: 1200,
    title: {
        text: "Graph to see shit"
    },
    toolTip: {
        shared: true,
        contentFormatter: function(e){
            var content = " ";
            for (var i = 0; i < e.entries.length; i++) {
                content += e.entries[i].dataSeries.name 
                        + " " + "<strong>" 
                        + e.entries[i].dataPoint.y + "</strong>";
                content += "<br/>";
            }
            content += e.entries[0].dataPoint.x + "<br/>";
            return content
        }
    },
    data: [
    {
        type: "line",
        name: "Temperature",
        showInLegend: true,
        dataPoints: []
    },
    {
        type: "line",
        name: "Humidity",
        showInLegend: true,
        dataPoints: []
    }]
}
export function GraphFunc(props){
    options.data[0].dataPoints = props.data.tempPoints;
    options.data[1].dataPoints = props.data.humPoints;
    return(
    <div>
        < CanvasJSReact.CanvasJSChart options={options} />
    </div>
    )
}

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import dayjs from 'dayjs';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { GraphFunc } from './GraphFunc.js'
function formatData(data, lower, upper){
  var tmp = {tempPoints: [], humPoints: []};
  data.forEach(element => {
    var date = new Date(element.date);
    
    if(lower != undefined && upper != undefined){
      var epochTime = date.getTime();
      
      if(upper < epochTime || epochTime < lower){
        return;
      }
    }
    tmp.tempPoints.push({y: Number(element.temp), x: date})
    tmp.humPoints.push({y: Number(element.hum), x: date})
  });
  console.log("Nu byter jag saker")
  return tmp;
}
export function Graph() {
  const [data, getData] = useState('')
  const [startDate, setStartValue] = useState(dayjs());
  const [endDate, setEndValue] = useState(dayjs());
  const [oldStart, setOldStart] = useState(dayjs());
  const [oldEnd, setOldEnd] = useState(dayjs());
  
  useEffect(() => {
    getAllData(undefined, undefined);
  }, []);
  const getAllData = (lower, upper) => {
    axios.get("/api/dhts/")
        .then((res) => {
          const d = formatData(res.data, lower, upper)
          getData(d);
        })
        .catch((err) => console.log(err));
  }
  function handleChanges(e){
    if(startDate.$d.getTime() == oldStart.$d.getTime() && endDate.$d.getTime() == oldEnd.$d.getTime()){
      return
    }
    
    setOldStart(startDate);
    setOldEnd(endDate);
    getAllData(startDate.$d.getTime(), endDate.$d.getTime());
  }
  return(
    <>
    <GraphFunc data={data} />
    <div style={{display: "flex", alignItems: "center", justifyContent: "center",}}>
        <strong style={{marginBottom: 7, marginTop: 7}}>Pick dates for displaying data</strong>
    </div>  
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <div style={{display: "flex", alignItems: "center", justifyContent: "center",}}>
          <DateTimePicker value={startDate} onChange={setStartValue} onClose={handleChanges} label="Start date" />
          <DateTimePicker value={endDate} onChange={setEndValue} onClose={handleChanges} label="End date" />
      </div>  
    </LocalizationProvider>  
    </>
  )
}

import React from 'react';
import CanvasJSReact from '@canvasjs/react-charts';
export function GraphFunc(props){
const options = {
zoomEnabled: true,
animationEnabled: true,
animationDuration: 1200,
title: {
text: "Graph to see shit"
},
toolTip: {
shared: true,
contentFormatter: function(e){
var content = " ";
for (var i = 0; i < e.entries.length; i++) {
content += e.entries[i].dataSeries.name 
+ " " + "<strong>" 
+ e.entries[i].dataPoint.y + "</strong>";
content += "<br/>";
}
content += e.entries[0].dataPoint.x + "<br/>";
return content
}
},
data: [
{
type: "line",
name: "Temperature",
showInLegend: true,
dataPoints: props.data?.tempPoints
},
{
type: "line",
name: "Humidity",
showInLegend: true,
dataPoints: props.data?.humPoints
}]
}
if (!props.data.humPoints || !props.data.tempPoints) return "Loading";
return(
<div>
<CanvasJSReact.CanvasJSChart options={options} />
</div>
)
}