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,
 }