add month year group for graph data

resources/js/components/rainfall/RainfallGraph.tsx

@@ -1,6 +1,6 @@
 import * as d3 from "d3"
 import React, {FC, LegacyRef, useEffect, useRef} from "react"
-import {rainfall} from "../../types";
+import {rainfall, rainfallGraphData} from "../../types";
 
 const RainfallGraph: FC<RainfallGraphProps> = ({width, height, data, start_date, end_date}) => {
 
@@ -22,14 +22,14 @@ const RainfallGraph: FC<RainfallGraphProps> = ({width, height, data, start_date,
             .attr('class', 'relative')
             .append('g')
             .attr('transform', "translate(" + margin.left + "," + margin.top + ")")
-
+        console.log(data)
         const yMax = data.reduce((result, item) => item.value > result ? item.value : result, 0)
         const y = d3.scaleLinear()
             .domain([0, yMax + 10])
             .range([gHeight, 0])
 
         const x = d3.scaleUtc()
-            .domain([(new Date(start_date)), (new Date(end_date))])
+            .domain([(new Date(start_date)), (new Date()).setDate((new Date(end_date)).getDate())])
             .range([margin.left, width - margin.right])
 
         const yAxis = svg.append('g')
@@ -71,18 +71,20 @@ const RainfallGraph: FC<RainfallGraphProps> = ({width, height, data, start_date,
                 .attr("stroke-opacity", 0.1))
         }
 
+        const diffDays = Math.round(Math.abs(((new Date(start_date)).getTime() - (new Date(end_date)).getTime()) / (24 * 60 * 60 * 1000))) + 1
+        const dayWidth = (width - 44) / diffDays
         svg.selectAll(".bar")
             .data(data)
             .enter()
             .append("rect")
             .attr("class", "bar")
             .attr("fill", "steelblue")
-            .attr("x", d => x(new Date(d.date)) * (1 - (100 / data.length)/100))
+            .attr("x", d => x(new Date(d.start)) + 1.5)
             .attr("y", d =>  y(d.value))
-            .attr("width", (width - 44 + ((width - 44) / (data.length + 1))) / (data.length + 1) - 2)
+            .attr("width", d => (dayWidth * d.days - 3))
             .attr("height", d => height - margin.bottom - 10 - y(d.value))
             .append('title')
-            .text(d => `${(new Date(d.date)).toLocaleDateString()} : ${d.value}`)
+            .text(d => `${d.label} : ${d.value}`)
     }
 
     return <svg ref={svgRef} />
@@ -93,7 +95,7 @@ export default RainfallGraph
 interface RainfallGraphProps {
     width: number,
     height: number,
-    data: rainfall[],
+    data: rainfallGraphData[],
     start_date: string,
     end_date: string,
 }

resources/js/pages/Auth/ForgotPassword.tsx

@@ -27,7 +27,7 @@ const ForgotPassword = () => {
         <form onSubmit={handleSubmit} className="w-96 mx-auto mt-10 border shadow p-3">
             <h1 className="text-center">Mot de passe oublié</h1>
 
-            {message && <p className="bg-green-600">Un email vous a été envoyer pour modifier le mot de passe.</p>}
+            {message && <p className="bg-green-600">Un email vous a été envoyé pour modifier le mot de passe.</p>}
 
             {errorLabel()}
 

resources/js/pages/Rainfall.tsx

@@ -4,17 +4,18 @@ import LastFiveMesure from "../components/rainfall/LastFiveMesure";
 import AddRainfall from "../components/rainfall/AddRainfall";
 import RainfallGraph from "../components/rainfall/RainfallGraph";
 import useAxiosTools from "../hooks/AxiosTools";
-import {rainfall} from "../types";
+import {rainfall, rainfallGraphData} from "../types";
 import Field from "../components/Field";
 import useDimension from "../hooks/DimensionHook";
 
 const Rainfall = () => {
 
     const [loadedAt, reload] = useState(new Date)
-    const [graphData, setGraphData] = useState<rainfall[]>([])
+    const [graphData, setGraphData] = useState<rainfallGraphData[]>([])
     const [graphDetails, setGraphDetails] = useState({
         start_date: (new Date((new Date()).setMonth((new Date).getMonth() - 1))).toSQLDate(),
         end_date: (new Date()).toSQLDate(),
+        period: 'day',
     })
     const {errorCatch, errorLabel, axiosGet} = useAxiosTools()
     const {targetRef, dimensions} = useDimension()
@@ -25,7 +26,7 @@ const Rainfall = () => {
 
     const fetchGraphData = async () => {
         try {
-            const params = `start=${graphDetails.start_date}&end=${graphDetails.end_date}`
+            const params = `start=${graphDetails.start_date}&end=${graphDetails.end_date}&period=${graphDetails.period}`
             const res = await axiosGet(`/api/rainfalls/graph?${params}`)
             setGraphData(res.data)
         } catch (error) {
@@ -49,6 +50,16 @@ const Rainfall = () => {
                    type="date"
                    value={graphDetails.end_date}
                    onChange={e => setGraphDetails({...graphDetails, end_date: (new Date(e.target.value)).toSQLDate()})} />
+            <div className="form-control">
+                <select className={` w-full mt-2 rounded dark:bg-gray-700`}
+                        value={graphDetails.period}
+                        onChange={e => setGraphDetails({...graphDetails, period: e.target.value})}>
+                    <option value="day">Jour</option>
+                {/*    <option value="week">Semaine</option>*/}
+                    <option value="month">Mois</option>
+                    <option value="year">Année</option>
+                </select>
+            </div>
         </form>
         <div ref={targetRef} className="mb-20">
             <RainfallGraph width={dimensions.width}

resources/js/types.ts

@@ -1,6 +1,16 @@
 export interface rainfall {
     id?: number,
     date: string,
+    start?: string,
+    days?: number,
+    label?: string,
+    value: number,
+}
+
+export interface rainfallGraphData {
+    start: string,
+    days: number,
+    label: string,
     value: number,
 }