add lint js

resources/js/components/Card.tsx

@@ -1,9 +1,9 @@
-import React, {FC} from "react";
-import {PropsWithChildren} from "react";
+import React, {FC} from "react"
+import {PropsWithChildren} from "react"
 
 const Card: FC<PropsWithChildren<CardProps>> = ({children, className = ''}) => {
 
-    return <div className={`${className} border m-1 rounded py-1 px-2`}>
+    return <div className={`${className} m-1 rounded border px-2 py-1`}>
         {children}
     </div>
 }

resources/js/components/Field.tsx

@@ -10,7 +10,7 @@ const Field: FC<FieldProps> = ({children, type = 'text', className = '', ...prop
                htmlFor={props.id ?? undefined}>
             {children}
         </label>}
-        <input className={`${className} w-full mt-2 rounded dark:bg-gray-700`}
+        <input className={`${className} mt-2 w-full rounded dark:bg-gray-700`}
                type={type}
                {...props}/>
         <div className={`error-message`} />
@@ -24,7 +24,7 @@ interface FieldProps {
     type?: HTMLInputTypeAttribute,
     name: string,
     id?: string,
-    value: any,
+    value?: string|number|undefined,
     placeholder?: string,
     autoFocus?: boolean,
     className?: string,

resources/js/components/Header.tsx

@@ -7,7 +7,7 @@ const Header = () => {
     const {authUser} = useAuthUser()
     const location = useLocation()
 
-    return <header className="flex justify-between py-3 px-5 bg-blue-700 text-white text-xl">
+    return <header className="flex justify-between bg-blue-700 px-5 py-3 text-xl text-white">
         <div>
             <Link to="/">Bermite</Link>
         </div>

resources/js/components/Img.tsx

@@ -1,4 +1,4 @@
-import React, {FC} from "react";
+import React, {FC} from "react"
 
 const Img: FC<{src: string, alt: string, width: string}> = ({src, alt, width, ...props}) => {
 

resources/js/components/rainfall/AddRainfall.tsx

@@ -1,7 +1,7 @@
 import React, {Dispatch, FC, FormEvent, SetStateAction, useState} from "react"
-import useAxiosTools from "../../hooks/AxiosTools";
-import Field from "../Field";
-import Card from "../Card";
+import useAxiosTools from "../../hooks/AxiosTools"
+import Field from "../Field"
+import Card from "../Card"
 
 const AddRainfall: FC<AddRainfallProps> = ({reload}) => {
 
@@ -23,12 +23,12 @@ const AddRainfall: FC<AddRainfallProps> = ({reload}) => {
         }
     }
 
-    return <Card className="min-w-[300px] overflow-hidden self-start w-full md:w-auto">
-        <h2 className="text-center bg-blue-500 text-white -mx-2 -mt-1 text-lg font-bold px-2 py-1">
-            Ajout d'une mesure
+    return <Card className="w-full min-w-[300px] self-start overflow-hidden md:w-auto">
+        <h2 className="-mx-2 -mt-1 bg-blue-500 px-2 py-1 text-center text-lg font-bold text-white">
+            Ajout d&apos;une mesure
         </h2>
         {errorLabel()}
-        <form onSubmit={handleSubmit} className="p-2 flex flex-col gap-2">
+        <form onSubmit={handleSubmit} className="flex flex-col gap-2 p-2">
             <Field type="date"
                    name="date"
                    value={data.date}

resources/js/components/rainfall/LastFiveMesure.tsx

@@ -1,9 +1,9 @@
 import React, {FC, useEffect, useState} from "react"
-import useAxiosTools from "../../hooks/AxiosTools";
-import {rainfall} from "../../types";
-import {AxiosError} from "axios";
-import Card from "../Card";
-import {Link} from "react-router-dom";
+import useAxiosTools from "../../hooks/AxiosTools"
+import {rainfall} from "../../types"
+import {AxiosError} from "axios"
+import Card from "../Card"
+import {Link} from "react-router-dom"
 
 const LastFiveMesure: FC<LastFiveMesureProps> = ({loadedAt}) => {
 
@@ -27,14 +27,14 @@ const LastFiveMesure: FC<LastFiveMesureProps> = ({loadedAt}) => {
         }
     }
 
-    return <Card className="min-w-[300px] overflow-hidden self-start w-full md:w-auto">
-        <h1 className="text-center bg-blue-500 text-white -mx-2 -mt-1 text-lg font-bold px-2 py-1">5 dernières mesures</h1>
+    return <Card className="w-full min-w-[300px] self-start overflow-hidden md:w-auto">
+        <h1 className="-mx-2 -mt-1 bg-blue-500 px-2 py-1 text-center text-lg font-bold text-white">5 dernières mesures</h1>
         {errorLabel()}
         <table className="w-full text-center">
             <tbody>
                 {data.map(line => <tr key={line.id} className="">
                     <td>{(new Date(line.date)).toLocaleDateString()}</td>
-                    <td className="text-right px-2">{line.value}</td>
+                    <td className="px-2 text-right">{line.value}</td>
                 </tr>)}
             </tbody>
         </table>

resources/js/components/rainfall/RainFallEcharts.tsx

@@ -0,0 +1,122 @@
+import React, {FC, useEffect, useRef, useState} from "react"
+import {rainfallGraphData} from "../../types"
+import {init, getInstanceByDom} from 'echarts'
+import type {ECharts } from "echarts"
+
+const RainFallEcharts: FC<RainFallEchartsProps> = ({width, height, data, loading}) => {
+
+    // https://dev.to/manufac/using-apache-echarts-with-react-and-typescript-353k
+    const chartRef = useRef<HTMLDivElement>(null)
+    const [option, setOption] = useState({
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        label: {
+            show: true,
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: data.map(d => d.label),
+                axisTick: {
+                    alignWithLabel: true
+                }
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value'
+            }
+        ],
+        series: [
+            {
+                name: 'Pluviométrie',
+                type: 'bar',
+                color: ['steelblue'],
+                barWidth: '80%',
+                data: data.map(d => d.value)
+            }
+        ]
+    })
+
+    useEffect(() => {
+        let chart: ECharts | undefined
+        console.log('in', width, height)
+        if (chartRef.current !== null) {
+            chart = init(chartRef.current)
+        }
+
+        function resizeChart() {
+            chart?.resize()
+        }
+        window.addEventListener("resize", resizeChart)
+
+        return () => {
+            chart?.dispose()
+            window.removeEventListener("resize", resizeChart)
+        }
+    }, [])
+
+    useEffect(() => {
+        console.log('data')
+        if (chartRef.current !== null) {
+            console.log('data', data)
+            const chart = getInstanceByDom(chartRef.current)
+            chart?.setOption(option)
+        }
+    }, [option, data])
+
+    useEffect(() => {
+        setOption({...option,
+            xAxis: [
+                {
+                    type: 'category',
+                    data: data.map(d => d.label),
+                    axisTick: {
+                        alignWithLabel: true
+                    }
+                }
+            ],
+            series: [
+                {
+                    name: 'Pluviométrie',
+                    type: 'bar',
+                    color: ['steelblue'],
+                    barWidth: '80%',
+                    data: data.map(d => d.value)
+                }
+            ]
+        })
+    }, [data])
+
+    useEffect(() => {
+        if (chartRef.current !== null) {
+            const chart = getInstanceByDom(chartRef.current)
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            loading === true ? chart?.showLoading() : chart?.hideLoading()
+        }
+    }, [loading])
+
+    return <div className="relative">
+        <div ref={chartRef} style={{width: "100%", height}} />
+        <div id="tooltip" className="absolute left-10 top-3 rounded border p-2" style={{opacity: 0}}></div>
+    </div>
+}
+
+export default RainFallEcharts
+
+interface RainFallEchartsProps {
+    width: number,
+    height: number,
+    data: rainfallGraphData[],
+    loading: boolean,
+}

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, rainfallGraphData} from "../../types";
+import React, {FC, useEffect, useRef} from "react"
+import {rainfallGraphData} from "../../types"
 
 const RainfallGraph: FC<RainfallGraphProps> = ({width, height, data, start_date, end_date}) => {
 
@@ -50,7 +50,7 @@ const RainfallGraph: FC<RainfallGraphProps> = ({width, height, data, start_date,
             .call(d3.axisBottom(x)
                 .ticks(8)
                 .tickFormat(
-                    // @ts-ignore
+                    // @ts-expect-error change time format
                     d3.timeFormat("%d/%m/%Y")
                 )
             , 0)
@@ -101,7 +101,7 @@ const RainfallGraph: FC<RainfallGraphProps> = ({width, height, data, start_date,
 
     return <div className="relative">
         <svg ref={svgRef} />
-        <div id="tooltip" className="absolute px-2 py-2 top-3 left-10 rounded border" style={{opacity: 0}}></div>
+        <div id="tooltip" className="absolute left-10 top-3 rounded border p-2" style={{opacity: 0}}></div>
     </div>
 }