add lint js

2024-03-06 09:42:12 +01:00
parent 2de7c78344
commit 115d597a09
26 changed files with 479 additions and 163 deletions
--- a/resources/js/components/rainfall/RainFallEcharts.tsx
+++ b/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,
+}