Objectifs sans tremor

src/App.tsx

@@ -19,6 +19,7 @@ import { RepMnuPage } from "./components/pages/rep_mnu";
 import { RepDispmedPage } from "./components/pages/rep_dispmed";
 import { DmaPageEPCI } from "./components/pages/dma_epci";
 import { HomePage } from "./components/pages/home";
+import { ObjectifsPage } from "./components/pages/objectifs";
 
 
 const myTheme:ThemeConfig = {
@@ -86,6 +87,9 @@ const App: React.FC = () => {
               <Route path="cve">
                 <Route index element={<IncinerationtPage />} />
               </Route>
+              <Route path="objectifs">
+                <Route index element={<ObjectifsPage />} />
+              </Route>
               <Route path="*" element={<ErrorComponent />} />
             </Route>
           </Routes>

src/components/chart_gauge_targets/index.tsx

@@ -1,19 +1,37 @@
 import { GaugeSeriesOption } from 'echarts';
 import ReactECharts, { EChartsOption } from 'echarts-for-react'; 
-import { geekblue as palette , orange} from '@ant-design/colors';
+import { geekblue as palette, red, gold, green, lime, orange} from '@ant-design/colors';
+import { useContext } from 'react';
+import { pageContext } from '../pages/objectifs';
 
 export interface IChartGaugeTargetProps {
     value:number,
     value_trajectoire:number
 }
 
 export const ChartGaugeTarget: React.FC<IChartGaugeTargetProps> = ( {value, value_trajectoire} ) => {
+    const context = useContext(pageContext)
 
-    const color = value > value_trajectoire ? palette[5] : orange[5]
+    const color = ((progress:number) => {
+        if (progress <= 30) {
+           return red[3];
+       } else if (progress <= 50) {
+           return orange[3];
+       } else if (progress <= 70) {
+           return gold[3];
+       } else if (progress <= 90) {
+           return lime[3];
+        } else if (progress > 90) {
+            return green[3];
+       } else {
+           return 'grey';
+       }
+   })(value)
 
     const myserie:GaugeSeriesOption={
         type:"gauge",
-        center: ['50%', '60%'],
+        center: ['50%', '100%'],
+        radius:'160%',
         startAngle: 180,
         endAngle: 0 ,
         min: 0,
@@ -28,8 +46,14 @@ export const ChartGaugeTarget: React.FC<IChartGaugeTargetProps> = ( {value, valu
             show: false
             },  
         axisTick:{show:false},
+        axisLabel:{show:true, color: '#464646', // Objectif intermédiaire ?
+            fontSize: 10,
+            distance: -30,
+            rotate: 'tangential',
+            formatter: (v) => {{if(v===75 || v===20){return `2023 \n 75%`} return ``}}    
+        },
+        splitNumber:100,
         splitLine: {show:false},
-        axisLabel:{show:false},
         axisLine: {
             lineStyle: {
               width: 20
@@ -47,15 +71,41 @@ export const ChartGaugeTarget: React.FC<IChartGaugeTargetProps> = ( {value, valu
         ...myserie,
         progress: {
             show: true,
-            width: 5
+            width: context.remaningTime ? 5 : 0
         },
         axisLine:{show:false},
+        axisLabel:{show:false},
         itemStyle:{color:palette[2]},
         data:[value_trajectoire],z:99,
         detail:{show:false}
     }
+
+    const myserie3:GaugeSeriesOption={
+        ...myserie,
+        progress: {
+            show:false
+        },
+        pointer: {
+            show: true,
+            showAbove:false,
+            offsetCenter:[0,-50],
+            icon:"rect",
+            width:1,
+            itemStyle:{
+                color:"black"
+            },
+        }, 
+        detail: { 
+            show: true,
+            formatter: '{value} %',
+            color: 'red',
+            offsetCenter: [0, '-15%'], fontSize: 18 
+        },
+        data:[75],
+
+    }
     const option:EChartsOption = {
-        series:[myserie,myserie2],
+        series:[myserie],
     }
 
     return(

src/components/chart_target_bar/index.tsx

@@ -0,0 +1,149 @@
+import EChartsReact, { EChartsOption } from "echarts-for-react";
+
+
+export interface IChartTargetBarProps {
+    data?:any
+}
+
+export const ChartTargetBar: React.FC<IChartTargetBarProps> = ( {data} ) => {
+    var progressLineLength = 450;
+    var maxValue = 100;
+    var value = 70;
+
+    const options:EChartsOption = {
+        graphic: {
+            elements: [
+              {
+                type: 'group',
+                left: 'center',
+                top: 'center',
+                children: [
+                  {
+                    type: 'rect',
+                    shape: {
+                      x:0,
+                      y:20,
+                      width: progressLineLength,
+                      height:10,
+                    },
+                    style: {
+                      fill: '#E5E5E5'
+                    }
+                  },
+                  {
+                    type: 'rect',
+                    shape: {
+                      x:0,
+                      y:20,
+                      width: progressLineLength*value/maxValue,
+                      height:10,
+                        },
+                    style: {
+                      fill: '#3874CB'
+                        }
+                },
+                {
+                    type: 'sector',
+                    style: {
+                        fill: '#E5E5E5'
+                    },
+                    shape:{
+                        cx:50,
+                        cy:75,
+                        r:80,
+                        r0:60, 
+                        startAngle:Math.PI,
+                        endAngle:Math.PI*2,
+                        clockwise:true
+                    }
+                },
+                {
+                    type: 'sector',
+                    style: {
+                        fill: 'green'
+                    },
+                    shape:{
+                        cx:50,
+                        cy:75,
+                        r:80,
+                        r0:60, 
+                        startAngle:Math.PI,
+                        endAngle:7*Math.PI/6, //https://i.ytimg.com/vi/OaLuFdRKbAI/maxresdefault.jpg
+                        clockwise:true
+                    }
+                },
+                {
+                    type:"text",
+                    y:20,
+                    x:(progressLineLength*value/maxValue) / 2,
+                    style:{
+                        text:`${value}%`
+                    }
+                },
+                {
+                    type:"line",
+                    shape:{
+                        x1:70,
+                        y1:0,
+                        x2:70,
+                        y2:70
+                    },
+                    style:{
+                        lineDash:"dashed"
+                    }
+                },
+                {
+                    type:"text",
+                    y:0,
+                    x:71,
+                    style:{
+                        text:`2021`
+                    }
+                },
+                {
+                    type:"text",
+                    y:40,
+                    x:71,
+                    style:{
+                        text:`-15%`
+                    }
+                },
+
+                ]
+             }
+            ]
+    }
+}
+    return (
+      <>
+       {/* <span
+          style={{
+            borderLeft: "2px solid #000",
+            height: 50,
+            display: "inline-block",
+            marginLeft: "25%", //Position p/r a la gauche
+            position: "absolute",
+          }}
+        >
+          {" "}
+        </span>
+
+        <div style={{ border: 1 }}>
+          <div
+            style={{
+              height: 24,
+              marginTop: 12,
+              width: "25%", //completion
+              backgroundColor: "#F00",
+            }}
+          ></div>
+        </div>
+        <br />
+        <br />
+        <br /> */}
+
+            <EChartsReact option={options} />
+
+      </>
+    );
+}

src/components/chart_target_evolution/index.tsx

@@ -2,26 +2,47 @@ import React from 'react';
 import ReactECharts from 'echarts-for-react';
 import { EChartsOption, LineSeriesOption } from 'echarts';
 import { CSSProperties, useRef } from 'react';
+import alasql from 'alasql';
 import { SimpleRecord } from 'g2f-dashboard';
 
 
 interface IChartTargetEvolutionProps {
     data: any;
+    current_year?:number;
     style? : CSSProperties
 }
 
-export const ChartTargetEvolution: React.FC<IChartTargetEvolutionProps> = ( {data, style} ) => {  
+export const ChartTargetEvolution: React.FC<IChartTargetEvolutionProps> = ( {data, style, current_year} ) => {  
 
     const line_data = data.map((e:SimpleRecord) => ({value:[e.date, e.value]}))
 
     const target_data = [ [data[0].ref_date, data[0].ref_value], [data[0].due_date, data[0].target]]
 
-    const chartRef = useRef<any>()
+    // Calcule min et max pour définir les bornes de l'axe Y
+    const offset_coef = 0.1
+    const MinMax = alasql(` SELECT 
+      MIN(MIN([value], [ref_value], [target])) as min,
+      MAX(MAX([value], [ref_value], [target])) as max
+    FROM ?
+    `, [data]).map((e:any) => ({...e, offset:(e.max - e.min)*offset_coef}))[0]
+
+
+    const chartRef = useRef<any>();
 
     const serie: LineSeriesOption = {
       type: "line",
-      data:line_data,
-      smooth:true
+      data: line_data,
+      smooth: true,
+      markLine: {
+        symbol:'none' ,
+        lineStyle:{
+          color:'grey',
+        },
+        data: [{ 
+          name: "Current year", 
+          xAxis: current_year?.toString(),
+        }],
+      },
     };
 
     const serie_target: LineSeriesOption = {
@@ -40,6 +61,7 @@ export const ChartTargetEvolution: React.FC<IChartTargetEvolutionProps> = ( {dat
       yAxis: [
         {
           type: "value",
+          min:Math.ceil(MinMax.min - MinMax.offset)
         },
       ],
     };

src/components/pages/objectifs.tsx

@@ -0,0 +1,65 @@
+import {
+    useQuery,
+  } from "@tanstack/react-query";
+import axios from "axios";
+
+import DataJson from "/data/objectifs.json?url";
+import { Card, Col, InputNumber, Row, Switch } from "antd";
+import { TargetCard } from "../target_card";
+import { createContext, useState } from "react";
+import alasql from "alasql";
+import { ChartTargetBar } from "../chart_target_bar";
+
+export interface PageContextI {
+  remaningTime:boolean
+}
+export const pageContext = createContext<PageContextI>({remaningTime:true}); //Context permettant la remontée du ref Echarts enfant
+
+
+export const ObjectifsPage: React.FC = () => {
+
+    const [remaningTime, setRemaningTime] = useState(false)
+    const [year, setYear] = useState<number>(2021)
+
+
+    const {data:cible_indicateur} = useQuery({
+        queryKey: ['fdfdsfdsfds'],
+        queryFn: () =>
+          axios
+            .get(DataJson)
+            .then((res) => res.data.sort((a:any,b:any) => Number(a.date) - Number(b.date) )),
+    })
+
+    const objectifs = cible_indicateur && alasql(`
+    SELECT DISTINCT id_cible, cible, indicateur, due_date, ref_date, ref_value, [target], [thématiques] as tags FROM ?
+    `, [cible_indicateur])
+
+    return(
+      <pageContext.Provider value={{remaningTime}}>
+
+        <h2>Objectifs</h2>
+        <Card style={{ backgroundColor: 'lightgoldenrodyellow' }}>
+          <Switch defaultChecked onChange={setRemaningTime} value={remaningTime}/> Temps restant
+          <InputNumber min={2009} max={2023} value={year} onChange={(e) => e && setYear(e)} /> Année
+        </Card>
+        <Row gutter={[12,12]}>
+        {objectifs?.map((e:any)=> 
+          <Col span={8} key={e.id_cible}>
+            <Card title={e.cible}>
+            <TargetCard data={cible_indicateur.filter((x:any) => x.id_cible == e.id_cible)} objectif_name={e.indicateur} 
+              tags={e.tags?.split(',')}
+              date={year.toString()} due_date={e.due_date} ref_date={e.ref_date} 
+              ref_value={e.ref_value} target_value={e.target} />
+            </Card>
+          </Col> 
+        )}
+        <Col span={8}>
+          <Card>
+          <ChartTargetBar />
+          </Card>
+        </Col>
+        </Row>
+
+        </pageContext.Provider>
+    )
+}