Chart completed

src/layout/AppFooter.vue

@@ -12,7 +12,7 @@ const logoUrl = () => {
     <div class="layout-footer">
         <img :src="logoUrl()" alt="Logo" height="20" class="mr-2" />
         by
-        <span class="font-medium ml-2">PrimeNG</span>
+        <span class="font-medium ml-2">PrimeVue</span>
     </div>
 </template>
 <style lang="scss" scoped></style>

src/layout/composables/layoutService.js

@@ -19,17 +19,17 @@ const layoutState = reactive({
     menuHoverActive: false
 });
 
-export function useLayoutService() {
+export function useLayoutService () {
     const changeThemeSettings = (theme, darkTheme) => {
         layoutConfig.theme = theme;
         layoutConfig.darkTheme = darkTheme;
     };
 
-    const setScale = (scale) => {
+    const setScale = scale => {
         layoutConfig.scale = scale;
     };
 
-    const setActiveMenuItem = (item) => {
+    const setActiveMenuItem = item => {
         layoutConfig.activeMenuItem = item.value || item;
     };
 

src/views/Dashboard.vue

@@ -7,10 +7,10 @@ const { isDarkTheme } = useLayoutService();
 
 const products = ref(null);
 const lineData = reactive({
-    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
     datasets: [
         {
-            label: 'Revenue',
+            label: 'First Dataset',
             data: [65, 59, 80, 81, 56, 55, 40],
             fill: false,
             backgroundColor: '#2f4860',
@@ -18,7 +18,7 @@ const lineData = reactive({
             tension: 0.4
         },
         {
-            label: 'Sales',
+            label: 'Second Dataset',
             data: [28, 48, 40, 19, 86, 27, 90],
             fill: false,
             backgroundColor: '#00bb7e',
@@ -76,25 +76,25 @@ const applyDarkTheme = () => {
         plugins: {
             legend: {
                 labels: {
-                    color: '#495057'
+                    color: '#ebedef'
                 }
             }
         },
         scales: {
             x: {
                 ticks: {
-                    color: '#495057'
+                    color: '#ebedef'
                 },
                 grid: {
-                    color: '#ebedef'
+                    color: 'rgba(160, 167, 181, .3)'
                 }
             },
             y: {
                 ticks: {
-                    color: '#495057'
+                    color: '#ebedef'
                 },
                 grid: {
-                    color: '#ebedef'
+                    color: 'rgba(160, 167, 181, .3)'
                 }
             }
         }

src/views/uikit/Chart.vue

@@ -2,91 +2,17 @@
 import { ref, watch } from 'vue';
 import { useLayoutService } from '@/layout/composables/layoutService';
 
-const { isDarkTheme } = useLayoutService();
+const { layoutConfig } = useLayoutService();
-const lineData = ref({
+const documentStyle = getComputedStyle(document.documentElement);
-    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+let textColor = documentStyle.getPropertyValue('--text-color');
-    datasets: [
+let textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
-        {
+let surfaceBorder = documentStyle.getPropertyValue('--surface-border');
-            label: 'First Dataset',
-            data: [65, 59, 80, 81, 56, 55, 40],
-            fill: false,
-            backgroundColor: '#2f4860',
-            borderColor: '#2f4860',
-            tension: 0.4
-        },
-        {
-            label: 'Second Dataset',
-            data: [28, 48, 40, 19, 86, 27, 90],
-            fill: false,
-            backgroundColor: '#00bb7e',
-            borderColor: '#00bb7e',
-            tension: 0.4
-        }
-    ]
-});
 
-const pieData = ref({
+const lineData = ref(null);
-    labels: ['A', 'B', 'C'],
+const pieData = ref(null);
-    datasets: [
+const polarData = ref(null);
-        {
+const barData = ref(null);
-            data: [300, 50, 100],
+const radarData = ref(null);
-            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
-            hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
-        }
-    ]
-});
-
-const polarData = ref({
-    datasets: [
-        {
-            data: [11, 16, 7, 3, 14],
-            backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
-            label: 'My dataset'
-        }
-    ],
-    labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue']
-});
-const barData = ref({
-    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-    datasets: [
-        {
-            label: 'My First dataset',
-            backgroundColor: '#2f4860',
-            data: [65, 59, 80, 81, 56, 55, 40]
-        },
-        {
-            label: 'My Second dataset',
-            backgroundColor: '#00bb7e',
-            data: [28, 48, 40, 19, 86, 27, 90]
-        }
-    ]
-});
-
-const radarData = ref({
-    labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
-    datasets: [
-        {
-            label: 'My First dataset',
-            backgroundColor: 'rgba(179,181,198,0.2)',
-            borderColor: 'rgba(179,181,198,1)',
-            pointBackgroundColor: 'rgba(179,181,198,1)',
-            pointBorderColor: '#fff',
-            pointHoverBackgroundColor: '#fff',
-            pointHoverBorderColor: 'rgba(179,181,198,1)',
-            data: [65, 59, 90, 81, 56, 55, 40]
-        },
-        {
-            label: 'My Second dataset',
-            backgroundColor: 'rgba(255,99,132,0.2)',
-            borderColor: 'rgba(255,99,132,1)',
-            pointBackgroundColor: 'rgba(255,99,132,1)',
-            pointBorderColor: '#fff',
-            pointHoverBackgroundColor: '#fff',
-            pointHoverBorderColor: 'rgba(255,99,132,1)',
-            data: [28, 48, 40, 19, 96, 27, 100]
-        }
-    ]
-});
 
 const lineOptions = ref(null);
 const pieOptions = ref(null);
@@ -94,204 +20,202 @@ const polarOptions = ref(null);
 const barOptions = ref(null);
 const radarOptions = ref(null);
 
-const applyLightTheme = () => {
+const setColorOptions = () => {
-    lineOptions.value = {
+    textColor = documentStyle.getPropertyValue('--text-color');
-        plugins: {
+    textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
-            legend: {
+    surfaceBorder = documentStyle.getPropertyValue('--surface-border');
-                labels: {
-                    color: '#495057'
-                }
-            }
-        },
-        scales: {
-            x: {
-                ticks: {
-                    color: '#495057'
-                },
-                grid: {
-                    color: '#ebedef'
-                }
-            },
-            y: {
-                ticks: {
-                    color: '#495057'
-                },
-                grid: {
-                    color: '#ebedef'
-                }
-            }
-        }
-    };
-
-    barOptions.value = {
-        plugins: {
-            legend: {
-                labels: {
-                    color: '#495057'
-                }
-            }
-        },
-        scales: {
-            x: {
-                ticks: {
-                    color: '#495057'
-                },
-                grid: {
-                    color: '#ebedef'
-                }
-            },
-            y: {
-                ticks: {
-                    color: '#495057'
-                },
-                grid: {
-                    color: '#ebedef'
-                }
-            }
-        }
-    };
-
-    pieOptions.value = {
-        plugins: {
-            legend: {
-                labels: {
-                    color: '#495057'
-                }
-            }
-        }
-    };
-
-    polarOptions.value = {
-        plugins: {
-            legend: {
-                labels: {
-                    color: '#495057'
-                }
-            }
-        },
-        scales: {
-            r: {
-                grid: {
-                    color: '#ebedef'
-                }
-            }
-        }
-    };
-
-    radarOptions.value = {
-        plugins: {
-            legend: {
-                labels: {
-                    color: '#495057'
-                }
-            }
-        },
-        scales: {
-            r: {
-                grid: {
-                    color: '#ebedef'
-                }
-            }
-        }
-    };
 };
 
-const applyDarkTheme = () => {
+const setChart = () => {
-    lineOptions.value = {
+    setColorOptions();
+    barData.value = {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [
+            {
+                label: 'My First dataset',
+                backgroundColor: documentStyle.getPropertyValue('--primary-500'),
+                borderColor: documentStyle.getPropertyValue('--primary-500'),
+                data: [65, 59, 80, 81, 56, 55, 40]
+            },
+            {
+                label: 'My Second dataset',
+                backgroundColor: documentStyle.getPropertyValue('--primary-200'),
+                borderColor: documentStyle.getPropertyValue('--primary-200'),
+                data: [28, 48, 40, 19, 86, 27, 90]
+            }
+        ]
+    };
+    barOptions.value = {
         plugins: {
             legend: {
                 labels: {
-                    color: '#ebedef'
+                    fontColor: textColor
                 }
             }
         },
         scales: {
             x: {
                 ticks: {
-                    color: '#ebedef'
+                    color: textColorSecondary,
+                    font: {
+                        weight: 500
+                    }
                 },
                 grid: {
-                    color: 'rgba(160, 167, 181, .3)'
+                    display: false,
+                    drawBorder: false
                 }
             },
             y: {
                 ticks: {
-                    color: '#ebedef'
+                    color: textColorSecondary
                 },
                 grid: {
-                    color: 'rgba(160, 167, 181, .3)'
+                    color: surfaceBorder,
+                    drawBorder: false
                 }
             }
         }
     };
 
-    barOptions.value = {
+    pieData.value = {
-        plugins: {
+        labels: ['A', 'B', 'C'],
-            legend: {
+        datasets: [
-                labels: {
+            {
-                    color: '#ebedef'
+                data: [540, 325, 702],
-                }
+                backgroundColor: [documentStyle.getPropertyValue('--indigo-500'), documentStyle.getPropertyValue('--purple-500'), documentStyle.getPropertyValue('--teal-500')],
+                hoverBackgroundColor: [documentStyle.getPropertyValue('--indigo-400'), documentStyle.getPropertyValue('--purple-400'), documentStyle.getPropertyValue('--teal-400')]
             }
-        },
+        ]
-        scales: {
-            x: {
-                ticks: {
-                    color: '#ebedef'
-                },
-                grid: {
-                    color: 'rgba(160, 167, 181, .3)'
-                }
-            },
-            y: {
-                ticks: {
-                    color: '#ebedef'
-                },
-                grid: {
-                    color: 'rgba(160, 167, 181, .3)'
-                }
-            }
-        }
     };
 
     pieOptions.value = {
         plugins: {
             legend: {
                 labels: {
-                    color: '#ebedef'
+                    usePointStyle: true,
+                    color: textColor
                 }
             }
         }
     };
 
+    lineData.value = {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [
+            {
+                label: 'First Dataset',
+                data: [65, 59, 80, 81, 56, 55, 40],
+                fill: false,
+                backgroundColor: documentStyle.getPropertyValue('--primary-500'),
+                borderColor: documentStyle.getPropertyValue('--primary-500'),
+                tension: 0.4
+            },
+            {
+                label: 'Second Dataset',
+                data: [28, 48, 40, 19, 86, 27, 90],
+                fill: false,
+                backgroundColor: documentStyle.getPropertyValue('--primary-200'),
+                borderColor: documentStyle.getPropertyValue('--primary-200'),
+                tension: 0.4
+            }
+        ]
+    };
+
+    lineOptions.value = {
+        plugins: {
+            legend: {
+                labels: {
+                    fontColor: textColor
+                }
+            }
+        },
+        scales: {
+            x: {
+                ticks: {
+                    color: textColorSecondary
+                },
+                grid: {
+                    color: surfaceBorder,
+                    drawBorder: false
+                }
+            },
+            y: {
+                ticks: {
+                    color: textColorSecondary
+                },
+                grid: {
+                    color: surfaceBorder,
+                    drawBorder: false
+                }
+            }
+        }
+    };
+
+    polarData.value = {
+        datasets: [
+            {
+                data: [11, 16, 7, 3],
+                backgroundColor: [documentStyle.getPropertyValue('--indigo-500'), documentStyle.getPropertyValue('--purple-500'), documentStyle.getPropertyValue('--teal-500'), documentStyle.getPropertyValue('--orange-500')],
+                label: 'My dataset'
+            }
+        ],
+        labels: ['Indigo', 'Purple', 'Teal', 'Orange']
+    };
+
     polarOptions.value = {
         plugins: {
             legend: {
                 labels: {
-                    color: '#ebedef'
+                    color: textColor
                 }
             }
         },
         scales: {
             r: {
                 grid: {
-                    color: 'rgba(160, 167, 181, .3)'
+                    color: surfaceBorder
                 }
             }
         }
     };
 
+    radarData.value = {
+        labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+        datasets: [
+            {
+                label: 'My First dataset',
+                borderColor: documentStyle.getPropertyValue('--indigo-400'),
+                pointBackgroundColor: documentStyle.getPropertyValue('--indigo-400'),
+                pointBorderColor: documentStyle.getPropertyValue('--indigo-400'),
+                pointHoverBackgroundColor: textColor,
+                pointHoverBorderColor: documentStyle.getPropertyValue('--indigo-400'),
+                data: [65, 59, 90, 81, 56, 55, 40]
+            },
+            {
+                label: 'My Second dataset',
+                borderColor: documentStyle.getPropertyValue('--purple-400'),
+                pointBackgroundColor: documentStyle.getPropertyValue('--purple-400'),
+                pointBorderColor: documentStyle.getPropertyValue('--purple-400'),
+                pointHoverBackgroundColor: textColor,
+                pointHoverBorderColor: documentStyle.getPropertyValue('--purple-400'),
+                data: [28, 48, 40, 19, 96, 27, 100]
+            }
+        ]
+    };
+
     radarOptions.value = {
         plugins: {
             legend: {
                 labels: {
-                    color: '#ebedef'
+                    fontColor: textColor
                 }
             }
         },
         scales: {
             r: {
                 grid: {
-                    color: 'rgba(160, 167, 181, .3)'
+                    color: textColorSecondary
                 }
             }
         }
@@ -299,13 +223,11 @@ const applyDarkTheme = () => {
 };
 
 watch(
-    isDarkTheme,
+    layoutConfig.theme,
-    (val) => {
+    () => {
-        if (val) {
+        setTimeout(() => {
-            applyDarkTheme();
+            setChart();
-        } else {
+        }, 100);
-            applyLightTheme();
-        }
     },
     { immediate: true }
 );
@@ -313,36 +235,40 @@ watch(
 
 <template>
     <div class="grid p-fluid">
-        <div class="col-12 lg:col-6">
+        <div class="col-12 xl:col-6">
             <div class="card">
                 <h5>Linear Chart</h5>
-                <Chart type="line" :data="lineData" :options="lineOptions" />
+                <Chart type="line" :data="lineData" :options="lineOptions"></Chart>
-            </div>
-
-            <div class="card flex flex-column align-items-center">
-                <h5 class="align-self-start">Pie Chart</h5>
-                <Chart type="pie" :data="pieData" :options="pieOptions" style="width: 50%" />
-            </div>
-
-            <div class="card flex flex-column align-items-center">
-                <h5 class="align-self-start">Polar Area Chart</h5>
-                <Chart type="polarArea" :data="polarData" :options="polarOptions" style="width: 50%" />
             </div>
         </div>
-        <div class="col-12 lg:col-6">
+        <div class="col-12 xl:col-6">
             <div class="card">
                 <h5>Bar Chart</h5>
-                <Chart type="bar" :data="barData" :options="barOptions" />
+                <Chart type="bar" :data="barData" :options="barOptions"></Chart>
             </div>
-
+        </div>
+        <div class="col-12 xl:col-6">
             <div class="card flex flex-column align-items-center">
-                <h5 class="align-self-start">Doughnut Chart</h5>
+                <h5 class="text-left w-full">Pie Chart</h5>
-                <Chart type="doughnut" :data="pieData" :options="pieOptions" style="width: 50%" />
+                <Chart type="pie" :data="pieData" :options="pieOptions"></Chart>
             </div>
-
+        </div>
+        <div class="col-12 xl:col-6">
             <div class="card flex flex-column align-items-center">
-                <h5 class="align-self-start">Radar Chart</h5>
+                <h5 class="text-left w-full">Doughnut Chart</h5>
-                <Chart type="radar" :data="radarData" :options="radarOptions" style="width: 50%" />
+                <Chart type="doughnut" :data="pieData" :options="pieOptions"></Chart>
+            </div>
+        </div>
+        <div class="col-12 xl:col-6">
+            <div class="card flex flex-column align-items-center">
+                <h5 class="text-left w-full">Polar Area Chart</h5>
+                <Chart type="polarArea" :data="polarData" :options="polarOptions"></Chart>
+            </div>
+        </div>
+        <div class="col-12 xl:col-6">
+            <div class="card flex flex-column align-items-center">
+                <h5 class="text-left w-full">Radar Chart</h5>
+                <Chart type="radar" :data="radarData" :options="radarOptions"></Chart>
             </div>
         </div>
     </div>

src/views/uikit/Input.vue

@@ -66,9 +66,9 @@ onMounted(() => {
 const searchCountry = (event) => {
     setTimeout(() => {
         if (!event.query.trim().length) {
-            this.autoFilteredValue = [...this.autoValue];
+            autoFilteredValue.value = [...autoValue.value];
         } else {
-            this.autoFilteredValue = this.autoValue.filter((country) => {
+            autoFilteredValue.value = autoValue.value.filter((country) => {
                 return country.name.toLowerCase().startsWith(event.query.toLowerCase());
             });
         }

src/views/uikit/Table.vue

@@ -2,22 +2,12 @@
 import { FilterMatchMode, FilterOperator } from 'primevue/api';
 import CustomerService from '@/layout/service/CustomerService';
 import ProductService from '@/layout/service/ProductService';
-import { ref, onMounted } from 'vue';
+import { ref, onBeforeMount } from 'vue';
 
 const customer1 = ref(null);
 const customer2 = ref(null);
 const customer3 = ref(null);
-const filters1 = ref({
+const filters1 = ref(null);
-    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-    name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-    'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-    representative: { value: null, matchMode: FilterMatchMode.IN },
-    date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
-    balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-    status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-    activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
-    verified: { value: null, matchMode: FilterMatchMode.EQUALS }
-});
 const loading1 = ref(null);
 const loading2 = ref(null);
 const idFrozen = ref(false);
@@ -40,7 +30,7 @@ const representatives = ref([
 const customerService = new CustomerService();
 const productService = new ProductService();
 
-onMounted(() => {
+onBeforeMount(() => {
     productService.getProductsWithOrdersSmall().then((data) => (products.value = data));
     customerService.getCustomersLarge().then((data) => {
         customer1.value = data;
@@ -50,6 +40,8 @@ onMounted(() => {
     customerService.getCustomersLarge().then((data) => (customer2.value = data));
     customerService.getCustomersMedium().then((data) => (customer3.value = data));
     loading2.value = false;
+
+    initFilters1();
 });
 
 const initFilters1 = () => {
@@ -61,10 +53,9 @@ const initFilters1 = () => {
         date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
         balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
         status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-        activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
+        activity: { value: [0, 50], matchMode: FilterMatchMode.BETWEEN },
         verified: { value: null, matchMode: FilterMatchMode.EQUALS }
     };
-    console.log(filters1);
 };
 
 const clearFilter1 = () => {
@@ -208,7 +199,7 @@ const calculateCustomerTotal = (name) => {
                             <ProgressBar :value="data.activity" :showValue="false" style="height: 0.5rem"></ProgressBar>
                         </template>
                         <template #filter="{ filterModel }">
-                            <Slider v-model="filterModel.value" range class="m-3"></Slider>
+                            <Slider v-model="filterModel.value" :range="true" class="m-3"></Slider>
                             <div class="flex align-items-center justify-content-between px-2">
                                 <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
                                 <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>