Количество пропущеных звонков за 30 рабочих дней

assets/js/components/App/Appw.js

@@ -15,6 +15,7 @@ import CallsList from '../../pages/CallsList/CallsList'
 import './Appw.scss'
 import CallsInputGraph from "../../pages/CallsGraph/CallsInputGraph";
 import CallsAnsweredGraph from "../../pages/CallsGraph/CallsAnsweredGraph";
+import CallsAbandonGraph from "../../pages/CallsGraph/CallsAbandonGraph";
 
 function App() {
 
@@ -42,6 +43,7 @@ function App() {
                     <Route path={"/answered_calls_log"} >
                         <CallsAnsweredGraph/>
                     </Route>
+                    <Route path={"/abandon_calls_log"} component={CallsAbandonGraph}/>
                     <Redirect from={"/"} to={"/dashboard"} />
                 </RouteSwitch>
             </div>

assets/js/pages/CallsGraph/CallsAbandonGraph.jsx

@@ -0,0 +1,67 @@
+import React, {useEffect, useMemo, useState} from "react";
+import moment from "moment";
+import {Link} from "react-router-dom";
+import {Button} from "primereact/button";
+import {Chart} from "primereact/components/chart/Chart";
+
+import "./CallsGraph.scss"
+
+function CallsAbandonGraph() {
+
+    const [graphData,setGraphData] = useState({
+        data : [],
+        labels: []
+    })
+
+    React.useEffect(()=>{
+        // let s_date = moment(props.date).format("YYYY-MM-DD");
+        fetch(`/api/abandon_calls_log`).then(response => response.json()).then(
+            result => {
+                let descr = []
+                let values= []
+                result.reverse().map((item)=>{
+                    descr.push(moment(item.dt).lang('ru').format("DD MMM"))
+                    values.push(item.cn)
+                })
+                setGraphData({
+                    data: values,
+                    labels: descr
+                })
+            }
+        )
+    },[])
+
+    useEffect(()=>{
+        console.log(graphData)
+    },[graphData])
+
+    const basicData = useMemo(()=>(
+        {
+            labels: graphData.labels,
+            datasets: [
+                {
+                    label: 'Пропущеные звонки',
+                    backgroundColor: '#f9c851',
+                    data: graphData.data
+                }
+            ]
+        }
+    ),[graphData])
+
+    return (
+        <>
+            <div className={"CallGraph-title"}>
+                <Link to={"dasboard"} >
+                    <Button icon="pi pi-chevron-left" className={"p-button-outlined"} label={"Назад"} />
+                </Link>
+                <h1>Количество пропущеных звонков по дням</h1>
+            </div>
+
+            <Chart type={"bar"} data={basicData} height={120}/>
+
+        </>
+    )
+}
+
+export default CallsAbandonGraph;
+

assets/js/pages/Dashboard/Dashboard.js

@@ -82,7 +82,9 @@ export default function Dashboard(props) {
                     </Link>
                 </div>
                 <div className="p-col-12 p-sm-6 p-md-6 p-lg-3">
-                    <TelCard title={"Пропущено"} detail={"Пропущеные звонки"} call_type={'notanswered'} count={callsStatus.abandon}/>
+                    <Link to={"abandon_calls_log"} style={{ textDecoration: 'none' }} >
+                        <TelCard title={"Пропущено"} detail={"Пропущеные звонки"} call_type={'notanswered'} count={callsStatus.abandon}/>
+                    </Link>
                 </div>
                 <div className="p-col-12 p-sm-6 p-md-6 p-lg-3">
                     <TelCard title={"Отклонено"} detail={"Оператор отклонил звонок"} call_type={'abandon'} count={callsStatus.rejected_calls}/>

src/Controller/ApiCoreController.php

@@ -112,4 +112,14 @@ public function answered_calls_log(CallsRepository $callsRepository):JsonRespons
         $data = $callsRepository->answered_calls_log();
         return $this->json($data);
     }
+
+    /**
+     * @Route("/abandon_calls_log")
+     * @param CallsRepository $callsRepository
+     * @return JsonResponse
+     */
+    public function abandon_calls_log(CallsRepository $callsRepository):JsonResponse{
+        $data = $callsRepository->abandon_calls_log();
+        return $this->json($data);
+    }
 }

src/Repository/CallsRepository.php

@@ -226,4 +226,13 @@ function answered_calls_log(){
         return $data;
     }
 
+    function abandon_calls_log(){
+        $str="select date_format(time,'%Y-%m-%d') as dt, count(1) cn from queue_log 
+                 where event='ABANDON' 
+                group by dt
+                order by dt desc
+                limit 30";
+        $data = $this->conn->fetchAll($str);
+        return $data;
+    }
 }