5454 <table
5555 id =" controls"
5656 class =" table striped row-hover cell-border"
57- data-role =" table"
58- data-rows =" 100"
59- data-show-activity =" true"
60- data-rownum =" false"
61- data-check =" false"
62- data-check-style =" 1"
63- data-show-search =" false"
64- data-show-pagination =" false"
65- data-show-rows-steps =" false"
6657 >
6758 <thead >
6859 <tr >
@@ -78,10 +69,8 @@ class="table striped row-hover cell-border"
7869 <td >{{ $action -> reference } } </td >
7970 <td >{{ $action -> scope } } </td >
8071 <td >{{ $action -> name } } </td >
81- <td >
82- <div data-role =" donut" data-value =" {{ $action -> progress } }" class =" donut-red"
83- data-stroke =" #f5f5f5" data-fill =" #9C27B0" data-color =" #FFFFFF" >
84- </div >
72+ <td style =" padding : 0 ; text-align : center ; vertical-align : middle ;" width =400 height =110 >
73+ <canvas id =" progressChart1" width =" 400" height =" 100" ></canvas >
8574 </td >
8675 </tr >
8776 @endforeach
@@ -92,6 +81,7 @@ class="table striped row-hover cell-border"
9281 </div >
9382 </div >
9483 </div >
84+
9585</form >
9686
9787<script >
@@ -119,7 +109,6 @@ class="table striped row-hover cell-border"
119109 ]
120110 };
121111
122-
123112 const ctx = document .getElementById (' actionsChart' ).getContext (' 2d' );
124113 const myChart = new Chart (ctx, {
125114 type: ' bar' ,
@@ -162,6 +151,48 @@ class="table striped row-hover cell-border"
162151 });
163152 });
164153
154+
155+ new Chart (document .getElementById (" progressChart1" ), {
156+ type: ' line' ,
157+ data: {
158+ datasets: [{
159+ label: ' Progression' ,
160+ data: [
161+ { x: ' 2025-07-01' , y: 10 },
162+ { x: ' 2025-07-10' , y: 35 },
163+ { x: ' 2025-07-15' , y: 50 },
164+ { x: ' 2025-07-25' , y: 80 },
165+ { x: ' 2025-07-29' , y: 100 }
166+ ],
167+ borderColor: " #2196F3" ,
168+ backgroundColor: " transparent" ,
169+ borderWidth: 2 ,
170+ pointRadius: 3
171+ }]
172+ },
173+ options: {
174+ responsive: false ,
175+ scales: {
176+ x: {
177+ type: ' time' ,
178+ display: false // ⛔️ masque les dates
179+ },
180+
181+ y: {
182+ beginAtZero: true ,
183+ max: 100 ,
184+ display: false
185+ }
186+ },
187+ plugins: {
188+ legend: { display: false },
189+ datalabels: {
190+ display: false // 👈 Désactive les labels à côté des points
191+ },
192+ }
193+ }
194+ });
195+
165196});
166197 </script >
167198
0 commit comments