From 69bba31b0c519b94741c33329c036d3f99cca258 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 12 Jun 2024 01:01:35 +0300
Subject: [PATCH] Update charts

---
 .../landing/samples/CustomersApp.vue          | 44 +++++++------------
 .../landing/samples/OverviewApp.vue           | 30 ++++---------
 2 files changed, 25 insertions(+), 49 deletions(-)

diff --git a/apps/showcase/components/landing/samples/CustomersApp.vue b/apps/showcase/components/landing/samples/CustomersApp.vue
index 21f4162d3..a235cdc74 100644
--- a/apps/showcase/components/landing/samples/CustomersApp.vue
+++ b/apps/showcase/components/landing/samples/CustomersApp.vue
@@ -100,7 +100,7 @@
         closeIcon="pi pi-sign-out"
         :pt="{
             root: {
-                class: '!max-w-2xl !w-full !h-[100vh] rounded-l-2xl'
+                class: '!max-w-2xl !w-full !h-screen rounded-l-2xl'
             },
             footer: {
                 class: 'hidden'
@@ -111,7 +111,7 @@
         }"
     >
         <template #container="">
-            <div class="flex flex-col h-[100vh] overflow-auto">
+            <div class="flex flex-col h-screen overflow-auto">
                 <div class="">
                     <div class="flex align-items-center gap-3 p-6">
                         <Avatar image="https://www.primefaces.org/cdn/primevue/images/landing/apps/avatar11.jpg" size="large" class="rounded-xl overflow-hidden" />
@@ -581,7 +581,8 @@ export default {
         },
         setChartData() {
             const documentStyle = getComputedStyle(document.documentElement);
-            const darkMode = document.documentElement.classList.contains('p-dark');
+            const borderColor = documentStyle.getPropertyValue('--p-content-border-color');
+            const hoverBackgroundColor = documentStyle.getPropertyValue('--p-primary-color');
 
             return {
                 labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
@@ -589,7 +590,7 @@ export default {
                     {
                         type: 'bar',
                         label: 'Investment Wallet',
-                        backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue(darkMode ? '--p-surface-700' : '--p-surface-200') + ' 100%, transparent)',
+                        backgroundColor: 'color-mix(in srgb, ' + borderColor + ' 100%, transparent)',
                         data: [100, 201, 404, 300, 140, 220, 314, 520, 145, 234, 325, 147],
                         borderRadius: {
                             topLeft: 4,
@@ -597,20 +598,18 @@ export default {
                         },
                         borderSkipped: true,
                         barThickness: 20,
-                        hoverBackgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue(darkMode ? '--p-surface-0' : '--p-surface-800') + ' 100%, transparent)',
+                        hoverBackgroundColor: 'color-mix(in srgb, ' + hoverBackgroundColor + ' 100%, transparent)',
                         hoverTransition: '1s ease all'
                     }
                 ]
             };
         },
         setChartOptions() {
-            const darkMode = document.documentElement.classList.contains('p-dark');
             const documentStyle = getComputedStyle(document.documentElement);
-
-            const backgroundColor = documentStyle.getPropertyValue(darkMode ? '--p-surface-900' : '--p-surface-0');
+            const backgroundColor = documentStyle.getPropertyValue('--p-content-background');
             const textColor = documentStyle.getPropertyValue('--p-text-color');
-            const borderColor = documentStyle.getPropertyValue(darkMode ? '--p-surface-800' : '--p-surface-100');
-            const textMutedColor = documentStyle.getPropertyValue(darkMode ? '--p-surface-500' : '--p-surface-400');
+            const borderColor = documentStyle.getPropertyValue('--p-content-border-color');
+            const textMutedColor = documentStyle.getPropertyValue('--p-text-muted-color');
 
             const getOrCreateTooltip = (chart) => {
                 let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip');
@@ -703,10 +702,7 @@ export default {
                     x: {
                         stacked: true,
                         ticks: {
-                            color: textMutedColor,
-                            font: {
-                                weight: 'lighter'
-                            }
+                            color: textMutedColor
                         },
                         grid: {
                             color: 'transparent',
@@ -719,10 +715,7 @@ export default {
                         },
                         stacked: true,
                         ticks: {
-                            color: textMutedColor,
-                            font: {
-                                weight: 'lighter'
-                            }
+                            color: textMutedColor
                         },
                         grid: {
                             color: borderColor,
@@ -733,7 +726,7 @@ export default {
             };
         },
         setLineChartData() {
-            const darkMode = document.documentElement.classList.contains('p-dark');
+            const darkMode = this.$appState.darkTheme;
 
             return {
                 labels: ['31', '1', '2', '3', '4', '5', '6', '7', '8'],
@@ -806,13 +799,13 @@ export default {
             };
         },
         setLineChartOptions() {
-            const darkMode = document.documentElement.classList.contains('p-dark');
+            const darkMode = this.$appState.darkTheme;
             const documentStyle = getComputedStyle(document.documentElement);
 
-            const backgroundColor = documentStyle.getPropertyValue(darkMode ? '--p-surface-900' : '--p-surface-0');
+            const backgroundColor = documentStyle.getPropertyValue('--p-content-background');
             const textColor = documentStyle.getPropertyValue('--p-text-color');
-            const borderColor = documentStyle.getPropertyValue(darkMode ? '--p-surface-800' : '--p-surface-100');
-            const textMutedColor = documentStyle.getPropertyValue(darkMode ? '--p-surface-500' : '--p-surface-400');
+            const borderColor = documentStyle.getPropertyValue('--p-content-border-color');
+            const textMutedColor = documentStyle.getPropertyValue('--p-text-muted-color');
 
             const getOrCreateTooltip = (chart) => {
                 let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip');
@@ -905,10 +898,7 @@ export default {
                     x: {
                         stacked: true,
                         ticks: {
-                            color: textMutedColor,
-                            font: {
-                                weight: 'lighter'
-                            }
+                            color: textMutedColor
                         },
                         grid: {
                             color: 'transparent',
diff --git a/apps/showcase/components/landing/samples/OverviewApp.vue b/apps/showcase/components/landing/samples/OverviewApp.vue
index 5acf36c2b..31ea59f96 100644
--- a/apps/showcase/components/landing/samples/OverviewApp.vue
+++ b/apps/showcase/components/landing/samples/OverviewApp.vue
@@ -39,9 +39,7 @@
                     <div class="flex-1 text-color font-semibold leading-6">Crypto Analytics</div>
                     <div class="flex items-center gap-5">
                         <div v-for="(item, index) in chartData?.datasets" :key="index" class="flex items-center gap-2">
-                            <div class="p-1 rounded-full border border-surface flex items-center justify-center">
-                                <div class="w-2 h-2 rounded-full" :style="{ backgroundColor: item.backgroundColor }"></div>
-                            </div>
+                            <div class="w-3 h-3 rounded-full" :style="{ backgroundColor: item.backgroundColor }"></div>
                             <span class="font-medium text-color leading-6">{{ item.label }}</span>
                         </div>
                     </div>
@@ -151,7 +149,6 @@ export default {
             chartOptions: {},
             chartPlugins: [],
             dates: [],
-
             selectedTime: 'Monthly',
             timeOptions: ['Monthly', 'Weekly', 'Yearly'],
             menuItems: [
@@ -196,7 +193,6 @@ export default {
         this.chartPlugings = this.setChartPlugins();
 
         this.redrawListener = () => {
-            console.log('sss');
             this.chartData = this.setChartData();
             this.chartOptions = this.setChartOptions();
         };
@@ -244,13 +240,11 @@ export default {
             };
         },
         setChartOptions() {
-            const darkMode = document.documentElement.classList.contains('p-dark');
             const documentStyle = getComputedStyle(document.documentElement);
-
-            const backgroundColor = documentStyle.getPropertyValue(darkMode ? '--p-surface-900' : '--p-surface-0');
+            const backgroundColor = documentStyle.getPropertyValue('--p-content-background');
             const textColor = documentStyle.getPropertyValue('--p-text-color');
-            const borderColor = documentStyle.getPropertyValue(darkMode ? '--p-surface-800' : '--p-surface-100');
-            const textMutedColor = documentStyle.getPropertyValue(darkMode ? '--p-surface-500' : '--p-surface-400');
+            const borderColor = documentStyle.getPropertyValue('--p-content-border-color');
+            const textMutedColor = documentStyle.getPropertyValue('--p-text-muted-color');
 
             const getOrCreateTooltip = (chart) => {
                 let tooltipEl = chart.canvas.parentNode.querySelector('div.chartjs-tooltip');
@@ -391,10 +385,7 @@ export default {
                     x: {
                         stacked: true,
                         ticks: {
-                            color: textMutedColor,
-                            font: {
-                                weight: 'lighter'
-                            }
+                            color: textMutedColor
                         },
                         grid: {
                             color: 'transparent',
@@ -402,19 +393,14 @@ export default {
                         }
                     },
                     y: {
-                        border: {
-                            display: false
-                        },
                         stacked: true,
                         ticks: {
-                            color: textMutedColor,
-                            font: {
-                                weight: 'lighter'
-                            }
+                            color: textMutedColor
                         },
                         grid: {
                             color: borderColor,
-                            borderColor: 'transparent'
+                            borderColor: 'transparent',
+                            drawTicks: false
                         }
                     }
                 }