vue hardcode from controller

src/Bundle/ChillMainBundle/Controller/DashboardHomepageController.php

@@ -11,51 +11,106 @@ declare(strict_types=1);
 
 namespace Chill\MainBundle\Controller;
 
-use Chill\MainBundle\Widget\WidgetManager;
+use Chill\MainBundle\Widget\WidgetHandlerManager;
+use Chill\PersonBundle\Repository\AccompanyingPeriodRepository;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Annotation\Route;
 
+/**
+ * @Route("/{_locale}/dashboard")
+ */
 class DashboardHomepageController extends AbstractController{
 
+//    private WidgetHandlerManager $widgetHandlerManager;
+//
+//    public function __construct(
+//        //AccompanyingPeriodRepository $accompanyingPeriodRepository,
+//        WidgetHandlerManager $widgetHandlerManager
+//    )
+//    {
+//        //$this->accompanyingPeriodRepository = $accompanyingPeriodRepository;
+//        $this->widgetHandlerManager = $widgetHandlerManager;
+//    }
+
     /**
-     * @Route("/dashboard-chart-data", name="dashboard_chart_data")
+     * @Route("/raw_data", name="chill_main_widget_raw_data")
      */
     public function index(): JsonResponse
     {
         // Retrieve data and prepare it for the chart
         $chartData = [
-            'labels' => ['Label 1', 'Label 2', 'Label 3'],
+            'data'=> [
-            'datasets' => [
+                'labels' => [
-                [
+                    'January',
-                    'label' => 'Dataset 1',
+                    'February',
-                    'data' => [10, 20, 30],
+                    'March',
-                    'backgroundColor' => ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)'],
+                    'April',
-                    'borderColor' => ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'],
+                    'May',
-                    'borderWidth' => 1,
+                    'June',
+                    'July',
+                    'August',
+                    'September',
+                    'October',
+                    'November',
+                    'December'
                 ],
+                'datasets' =>[
+
+                    [
+                        'label' => 'Dataset 1',
+                        'data' => [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11],
+                        'backgroundColor' => ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)'],
+                        'borderColor' => ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'],
+                        'borderWidth' => 1,
+                    ],
+                ]
             ],
+
         ];
+        $chartOptions = [
+            'options' => [
+
+                'responsive'=> 'true',
+                'maintainAspectRatio'=> 'false'
+
+            ]
+        ];
+        $chartConfig =$chartData + $chartOptions;
 
         //Return the chart data as JSON response
-        return $this->json($chartData);
+        return $this->json($chartConfig, $status = 200,$headers = [], $context= []);
     }
 
     /**
-     * @Route("/widget/{context}, name="widget_data")
+     * @Route("/widget/{context}", name="chill_main_widget_get_data")
      */
-    public function getWidgetData(Request $request, $context, WidgetManager $widgetManager): JsonResponse
+    public function getDataForWidget(Request $request, $context): JsonResponse
     {
 
         //Retrieve data from request in vue component
         $requestData  = json_decode($request->getContent(),true);
 
-        // Process the widget data using the WidgetManager
+        // Process the widget data using the WidgetHandlerManager
-        $widgetData = $widgetManager->getDataForWidget($requestData, $context);
+        $handler = $this->widgetHandlerManager->getHandler($requestData, $context);
+
 
         // Return the widget data in JSON response
-        return new JsonResponse($widgetData);
+        return new JsonResponse($this->getData($requestData, $context));
+    }
+
+    private function getData( array $config,array $context)
+    {
+        $widgetData = [];
+        foreach ($config as $widget) {
+            $widgetData[] = [
+                'data' => $this->widgetHandlerManager->getDataForWidget($config,$context),
+                'options'=> 'responsive: true'
+            ];
+        }
+        return $widgetData;
     }
 
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue

@@ -40,7 +40,7 @@
       </div>
        <div class="mbloc col col-sm-6 col-lg-4">
            <div class="custom2">
-               <MyWidget />
+               <MyWidget/>
            </div>
        </div>
       <div class="mbloc col col-sm-6 col-lg-4">

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWidget.vue

@@ -1,5 +1,7 @@
 <template>
-    <Bar :data="data" :options="options" />
+    <div class="container">
+        <Bar v-if="loaded" :data="chartData" :options="chartOptions"/>
+    </div>
 </template>
 
 <script lang="ts">
@@ -13,17 +15,41 @@ import {
     LinearScale
 } from 'chart.js'
 import { Bar } from 'vue-chartjs'
+import {defineComponent} from 'vue'
 import * as chartConfig from './js/chartConfig'
+import {makeFetch} from "../../lib/api/apiMethods";
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
 
-export default {
+export default defineComponent({
     name: 'MyWidget',
     components: {
         Bar
     },
     data() {
-        return chartConfig
+        return {
+            loaded: false,
+            chartData: {
+                labels: [ 'January', 'February', 'March' ],
+                datasets: [ { data: [40, 20, 12] } ]
+            },
+            chartOptions: {
+                responsive: true
+            }
+        }
+    },
+    async mounted() {
+        this.loaded=false;
+        const url = '/fr/dashboard/raw_data';
+        try {
+            const response: { data: any } = await makeFetch("GET", url);
+            this.chartData = response.data;
+            console.log(this.chartData);
+            console.log(chartConfig);
+            this.loaded = true;
+        } catch (error) {
+            console.log(error);
+        }
     }
-}
+})
 </script>