From 3733915902228ecfe93ab05ea585af4e181d0b2f Mon Sep 17 00:00:00 2001
From: oiov <stacystayfine718@gmail.com>
Date: Wed, 14 Aug 2024 11:41:34 +0800
Subject: [PATCH] style: upd charts style

---
 .../dashboard/scrape/meta-scraping.tsx        |  4 +-
 app/(protected)/dashboard/urls/meta-chart.tsx | 72 ++++++++++++++-----
 styles/globals.css                            |  4 +-
 3 files changed, 59 insertions(+), 21 deletions(-)

diff --git a/app/(protected)/dashboard/scrape/meta-scraping.tsx b/app/(protected)/dashboard/scrape/meta-scraping.tsx
index eb4f92e..8bfbc35 100644
--- a/app/(protected)/dashboard/scrape/meta-scraping.tsx
+++ b/app/(protected)/dashboard/scrape/meta-scraping.tsx
@@ -152,7 +152,7 @@ export default function MetaScraping() {
           </div>
         </CardContent>
       </Card>
-      <Card>
+      {/* <Card>
         <CardHeader>
           <CardTitle>Screenshot</CardTitle>
           <CardDescription>
@@ -221,7 +221,7 @@ export default function MetaScraping() {
             )}
           </div>
         </CardContent>
-      </Card>
+      </Card> */}
     </>
   );
 }
diff --git a/app/(protected)/dashboard/urls/meta-chart.tsx b/app/(protected)/dashboard/urls/meta-chart.tsx
index 362ccd4..81f625f 100644
--- a/app/(protected)/dashboard/urls/meta-chart.tsx
+++ b/app/(protected)/dashboard/urls/meta-chart.tsx
@@ -6,7 +6,7 @@ import { UrlMeta } from "@prisma/client";
 import { VisSingleContainer, VisTooltip, VisTopoJSONMap } from "@unovis/react";
 import { Donut, MapData, TopoJSONMap } from "@unovis/ts";
 import { WorldMapTopoJSON } from "@unovis/ts/maps";
-import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, XAxis } from "recharts";
 
 import { isLink, removeUrlSuffix, timeAgo } from "@/lib/utils";
 import {
@@ -191,7 +191,7 @@ export function DailyPVUVChart({ data }: { data: UrlMeta[] }) {
           config={chartConfig}
           className="aspect-auto h-[225px] w-full"
         >
-          <BarChart
+          <AreaChart
             accessibilityLayer
             data={processedData}
             margin={{
@@ -201,6 +201,32 @@ export function DailyPVUVChart({ data }: { data: UrlMeta[] }) {
               bottom: 5,
             }}
           >
+            <defs>
+              <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor={`var(--color-uv)`}
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor={`var(--color-uv)`}
+                  stopOpacity={0}
+                />
+              </linearGradient>
+              <linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor={`var(--color-pv)`}
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor={`var(--color-pv)`}
+                  stopOpacity={0}
+                />
+              </linearGradient>
+            </defs>
             <CartesianGrid vertical={false} />
             <XAxis
               dataKey="date"
@@ -231,17 +257,31 @@ export function DailyPVUVChart({ data }: { data: UrlMeta[] }) {
                 />
               }
             />
-            <Bar dataKey="uv" fill={`var(--color-uv)`} stackId="a" />
-            <Bar dataKey="pv" fill={`var(--color-pv)`} stackId="a" />
+            {/* <Bar dataKey="uv" fill={`var(--color-uv)`} stackId="a" />
+            <Bar dataKey="pv" fill={`var(--color-pv)`} stackId="a" /> */}
 
-            {/* <Bar
-              dataKey={activeChart}
-              stackId="a"
-              fill={`var(--color-${activeChart})`}
-            /> */}
-          </BarChart>
+            <Area
+              type="monotone"
+              dataKey="uv"
+              stroke={`var(--color-uv)`}
+              fillOpacity={1}
+              fill="url(#colorUv)"
+            />
+            <Area
+              type="monotone"
+              dataKey="pv"
+              stroke={`var(--color-pv)`}
+              fillOpacity={1}
+              fill="url(#colorPv)"
+            />
+          </AreaChart>
         </ChartContainer>
 
+        <VisSingleContainer data={{ areas: areaData }}>
+          <VisTopoJSONMap topojson={WorldMapTopoJSON} />
+          <VisTooltip triggers={triggers} />
+        </VisSingleContainer>
+
         <div className="my-5 grid grid-cols-1 gap-6 sm:grid-cols-2">
           {refererStats.length > 0 && (
             <StatsList data={refererStats} title="Referrers" />
@@ -256,11 +296,6 @@ export function DailyPVUVChart({ data }: { data: UrlMeta[] }) {
             <StatsList data={deviceStats} title="Devices" />
           )}
         </div>
-
-        <VisSingleContainer data={{ areas: areaData }}>
-          <VisTopoJSONMap topojson={WorldMapTopoJSON} />
-          <VisTooltip triggers={triggers} />
-        </VisSingleContainer>
       </CardContent>
     </Card>
   );
@@ -289,8 +324,11 @@ export function StatsList({ data, title }: { data: Stat[]; title: string }) {
           </div>
           <div className="w-full rounded-lg bg-neutral-200 dark:bg-neutral-600">
             <div
-              className="rounded-lg bg-blue-500 px-0.5 py-1.5 leading-none transition-all duration-300"
-              style={{ width: `${ref.percentage}` }}
+              className="rounded-lg bg-blue-500/90 px-0.5 py-1 leading-none transition-all duration-300"
+              style={{
+                width: `${ref.percentage}`,
+                opacity: parseFloat(ref.percentage) / 10,
+              }}
             ></div>
           </div>
         </div>
diff --git a/styles/globals.css b/styles/globals.css
index 9a96b76..84ad2e4 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -26,8 +26,8 @@
     --radius: 0.5rem;
     --blue: 210 100% 50%;
 
-    --chart-1: 221.2 83.2% 53.3%;
-    --chart-2: 212 95% 68%;
+    --chart-1: 198 93% 60%;
+    --chart-2: 158deg 64% 52%;
     --chart-3: 216 92% 60%;
     --chart-4: 210 98% 78%;
     --chart-5: 212 97% 87%;