improve livedemo charts

Author: ivictbor

adminforth/documentation/docs/tutorial/03-Customization/14-afcl.md

@@ -1,6 +1,10 @@
+```
+image: "afcl-preview.png"  # Path to the OG image
+```
+
 # AdminForth Components Library
 
-AFCL is a set of components which you can use as build blocks. 
+AFCL is a set of components which you can use as build blocks in your AdminForth application. 
 AFCL allows to keep the design consistent with minimal efforts and build new pages faster.
 AFCL components follow styling standard and respect theme colors.
 
@@ -168,11 +172,10 @@ You can customize item and selected item using slots.
 //diff-add
   </template>
 </Select>
-</div>
 ```
   </div>
   <div>
-    ![AFCL Select custom template](image-44.png)
+    ![AFCL Select custom item](image-79.png)
   </div>
 </div>
 
@@ -296,7 +299,7 @@ import { IconGridSolid, IconUserCircleSolid } from '@iconify-prerendered/vue-flo
   ```
   </div>
   <div>
-  ![AFCL VerticalTabs](image-48.png)
+  ![AFCL VerticalTabs](image-77.png)
   </div>
 </div>
 
@@ -454,7 +457,7 @@ const isoFlagToEmoji = (iso) => iso.toUpperCase().replace(/./g, char => String.f
 ```
   </div>
   <div>
-    ![AFCL Table with custom cell](image-53.png)
+    ![AFCL Table with custom cell](image-78.png)
   </div>
 </div>
 

adminforth/documentation/docs/tutorial/03-Customization/afcl-preview.png

@@ -162,31 +162,26 @@
 
       <div class="flex justify-center items-center p-80 bg-white">
         <div class="border border-indigo-600 p-5 w-80 h-80 min-w-80 min-h-80 flex items-center flex-col">
-          <PieChart
-  :data="[
-    { amount: 5, label: 'Cars'},
-    { amount: 3, label: 'Bikes'},
-    { amount: 2, label: 'Trucks'},
-    { amount: 1, label: 'Boats'},
+          <Select
+  class="w-full"
+  :options="[
+    {label: 'Last 7 days', value: '7', records: 110},
+    {label: 'Last 30 days', value: '30', records: 320},
+    {label: 'Last 90 days', value: '90', records: 310},
+    {label: 'None', value: null}
   ]"
-  :options="{
-    chart: {
-      height: 250,
-    },
-    dataLabels: {
-      enabled: true,
-    },
-    plotOptions: {
-      pie: {
-        dataLabels: {
-          offset: -10, // Moves labels closer to or further from the slices
-          minAngleToShowLabel: 10, // Ensures that small slices don’t show labels
-        },
-        expandOnClick: true,
-      },
-    },
-  }"
-/>
+  v-model="selected"
+>
+  <template #item="{option}">
+    <div>
+      <span>{{ option.label }}</span>
+      <span class="ml-2 opacity-50">{{ option.records }} records</span>
+    </div>
+  </template>
+  <template #selected-item="{option}">
+    <span>{{ option.label }} 💫</span>
+  </template>
+</Select>
         </div>
       </div>
   </div>

adminforth/documentation/docs/tutorial/03-Customization/image-77.png

@@ -110,6 +110,7 @@
         <PieChart
           :data="apartsCountsByRooms"
           :options="{
+            chart: { type: 'donut' },
             plotOptions: {
               pie: {
                 donut: {