From cf97277284410e238ca4831f960088fe7bb07a73 Mon Sep 17 00:00:00 2001
From: Saeid Zareie <saeid.za98@gmail.com>
Date: Tue, 16 Jul 2024 09:51:59 +0330
Subject: [PATCH] feat: adding chart pages

---
 .../theme/components/charts/ChartDisplay.vue  |  23 ++
 .../theme/components/charts/Charts.vue        | 327 ++++++++++++++++++
 apps/www/.vitepress/theme/config/docs.ts      |  17 +-
 .../.vitepress/theme/layout/ChartsLayout.vue  |  32 ++
 apps/www/src/content/charts.md                |   9 +
 apps/www/src/content/themes.md                |   2 +-
 .../new-york/block/ChartAreaStacked.vue       |  42 +++
 .../new-york/ui/chart-area/AreaChart.vue      |   2 +-
 .../new-york/ui/chart/ChartContainer.vue      |  16 +
 9 files changed, 459 insertions(+), 11 deletions(-)
 create mode 100644 apps/www/.vitepress/theme/components/charts/ChartDisplay.vue
 create mode 100644 apps/www/.vitepress/theme/components/charts/Charts.vue
 create mode 100644 apps/www/.vitepress/theme/layout/ChartsLayout.vue
 create mode 100644 apps/www/src/content/charts.md
 create mode 100644 apps/www/src/lib/registry/new-york/block/ChartAreaStacked.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/chart/ChartContainer.vue

diff --git a/apps/www/.vitepress/theme/components/charts/ChartDisplay.vue b/apps/www/.vitepress/theme/components/charts/ChartDisplay.vue
new file mode 100644
index 000000000..c4366cebc
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/charts/ChartDisplay.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  name: string
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'group relative flex flex-col overflow-hidden rounded-xl border shadow transition-all duration-200 ease-in-out hover:z-30',
+      props.class,
+    )"
+  >
+    <ChartToolbar class="relative z-20 flex justify-end border-b bg-card px-3 py-2.5 text-card-foreground" />
+    <div class="relative z-10 [&>div]:rounded-none [&>div]:border-none [&>div]:shadow-none">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/apps/www/.vitepress/theme/components/charts/Charts.vue b/apps/www/.vitepress/theme/components/charts/Charts.vue
new file mode 100644
index 000000000..6661346ff
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/charts/Charts.vue
@@ -0,0 +1,327 @@
+<script lang="ts" setup>
+import ChartsLayout from '../../layout/ChartsLayout.vue'
+import ChartDisplay from './ChartDisplay.vue'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import ChartAreaStacked from '@/lib/registry/new-york/block/ChartAreaStacked.vue'
+</script>
+
+<template>
+  <ChartsLayout>
+    <div class="gap-6 md:flex md:flex-row-reverse md:items-start">
+      <!-- <ChartsThemeSwitcher
+            :themes="chartThemes"
+            class="fixed inset-x-0 bottom-0 z-40 flex bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 lg:sticky lg:bottom-auto lg:top-20"
+          /> -->
+      <div class="grid flex-1 gap-12">
+        <h2 class="sr-only">
+          Examples
+        </h2>
+        <div class="chart-wrapper grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10">
+          <ChartDisplay name="chart-area-stacked">
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-bar-multiple">
+            <!-- <Charts.ChartBarMultiple /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay
+            name="chart-pie-donut-text"
+            class="[&_[data-chart]]:xl:max-h-[243px]"
+          >
+            <!-- <Charts.ChartPieDonutText /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+        </div>
+        <div class="hidden gap-4 md:grid">
+          <ChartsNav />
+          <Separator />
+        </div>
+        <div
+          id="area-chart"
+          class="chart-wrapper grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
+        >
+          <ChartDisplay name="chart-area-default">
+            <!-- <Charts.ChartAreaDefault /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-area-linear">
+            <!-- <Charts.ChartAreaLinear /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-area-step">
+            <!-- <Charts.ChartAreaStep /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-area-stacked">
+            <!-- <Charts.ChartAreaStacked /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-area-stacked-expand">
+            <!-- <Charts.ChartAreaStackedExpand /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-area-legend">
+            <!-- <Charts.ChartAreaLegend /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-area-icons">
+            <!-- <Charts.ChartAreaIcons /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-area-gradient">
+            <!-- <Charts.ChartAreaGradient /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-area-axes">
+            <!-- <Charts.ChartAreaAxes /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <div class="md:col-span-2 lg:col-span-3">
+            <ChartDisplay name="chart-area-interactive">
+              <!-- <Charts.ChartAreaInteractive /> -->
+              <ChartAreaStacked />
+            </ChartDisplay>
+          </div>
+        </div>
+        <Separator />
+        <div
+          id="bar-chart"
+          class="chart-wrapper grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
+        >
+          <ChartDisplay name="chart-bar-default">
+            <!-- <Charts.ChartBarDefault /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-bar-horizontal">
+            <!-- <Charts.ChartBarHorizontal /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-bar-multiple">
+            <!-- <Charts.ChartBarMultiple /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-bar-label">
+            <!-- <Charts.ChartBarLabel /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-bar-label-custom">
+            <!-- <Charts.ChartBarLabelCustom /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-bar-mixed">
+            <!-- <Charts.ChartBarMixed /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-bar-stacked">
+            <!-- <Charts.ChartBarStacked /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-bar-active">
+            <!-- <Charts.ChartBarActive /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-bar-negative">
+            <!-- <Charts.ChartBarNegative /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <div class="md:col-span-2 lg:col-span-3">
+            <ChartDisplay name="chart-bar-interactive">
+              <!-- <Charts.ChartBarInteractive /> -->
+              <ChartAreaStacked />
+            </ChartDisplay>
+          </div>
+        </div>
+        <Separator />
+        <div
+          id="line-chart"
+          class="chart-wrapper grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
+        >
+          <ChartDisplay name="chart-line-default">
+            <!-- <Charts.ChartLineDefault /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-line-linear">
+            <!-- <Charts.ChartLineLinear /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-line-step">
+            <!-- <Charts.ChartLineStep /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-line-multiple">
+            <!-- <Charts.ChartLineMultiple /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-line-dots">
+            <!-- <Charts.ChartLineDots /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-line-dots-custom">
+            <!-- <Charts.ChartLineDotsCustom /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-line-dots-colors">
+            <!-- <Charts.ChartLineDotsColors /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-line-label">
+            <!-- <Charts.ChartLineLabel /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-line-label-custom">
+            <!-- <Charts.ChartLineLabelCustom /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <div class="md:col-span-2 lg:col-span-3">
+            <ChartDisplay name="chart-line-interactive">
+              <!-- <Charts.ChartLineInteractive /> -->
+              <ChartAreaStacked />
+            </ChartDisplay>
+          </div>
+        </div>
+        <Separator />
+        <div
+          id="pie-chart"
+          class="chart-wrapper grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
+        >
+          <ChartDisplay name="chart-pie-simple">
+            <!-- <Charts.ChartPieSimple /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-pie-separator-none">
+            <!-- <Charts.ChartPieSeparatorNone /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-pie-label">
+            <!-- <Charts.ChartPieLabel /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-pie-label-custom">
+            <!-- <Charts.ChartPieLabelCustom /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-pie-label-list">
+            <!-- <Charts.ChartPieLabelList /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-pie-legend">
+            <!-- <Charts.ChartPieLegend /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-pie-donut">
+            <!-- <Charts.ChartPieDonut /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-pie-donut-active">
+            <!-- <Charts.ChartPieDonutActive /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-pie-donut-text">
+            <!-- <Charts.ChartPieDonutText /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-pie-stacked">
+            <!-- <Charts.ChartPieStacked /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-pie-interactive">
+            <!-- <Charts.ChartPieInteractive /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+        </div>
+        <Separator />
+        <div
+          id="radar-chart"
+          class="chart-wrapper grid flex-1 scroll-mt-20 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:gap-10"
+        >
+          <ChartDisplay name="chart-radar-default">
+            <!-- <Charts.ChartRadarDefault /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-radar-dots">
+            <!-- <Charts.ChartRadarDots /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-radar-multiple">
+            <!-- <Charts.ChartRadarMultiple /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-radar-lines-only">
+            <!-- <Charts.ChartRadarLinesOnly /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-radar-label-custom">
+            <!-- <Charts.ChartRadarLabelCustom /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-radar-radius">
+            <!-- <Charts.ChartRadarRadius /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-radar-grid-custom">
+            <!-- <Charts.ChartRadarGridCustom /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-radar-grid-fill">
+            <!-- <Charts.ChartRadarGridFill /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-radar-grid-none">
+            <!-- <Charts.ChartRadarGridNone /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-radar-grid-circle">
+            <!-- <Charts.ChartRadarGridCircle /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-radar-grid-circle-no-lines">
+            <!-- <Charts.ChartRadarGridCircleNoLines /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-radar-grid-circle-fill">
+            <!-- <Charts.ChartRadarGridCircleFill /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-radar-legend">
+            <!-- <Charts.ChartRadarLegend /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-radar-icons">
+            <!-- <Charts.ChartRadarIcons /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+        </div>
+        <Separator />
+        <div
+          id="radial-chart"
+          class="chart-wrapper grid flex-1 scroll-mt-20 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:gap-10"
+        >
+          <ChartDisplay name="chart-radial-simple">
+            <!-- <Charts.ChartRadialSimple /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-radial-label">
+            <!-- <Charts.ChartRadialLabel /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-radial-grid">
+            <!-- <Charts.ChartRadialGrid /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-radial-text">
+            <!-- <Charts.ChartRadialText /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-radial-shape">
+            <!-- <Charts.ChartRadialShape /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+          <ChartDisplay name="chart-radial-stacked">
+            <!-- <Charts.ChartRadialStacked /> -->
+            <ChartAreaStacked />
+          </ChartDisplay>
+        </div>
+      </div>
+    </div>
+  </ChartsLayout>
+</template>
diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts
index 698dcc4b7..0e43a8792 100644
--- a/apps/www/.vitepress/theme/config/docs.ts
+++ b/apps/www/.vitepress/theme/config/docs.ts
@@ -31,21 +31,20 @@ export const docsConfig: DocsConfig = {
       href: '/docs/components/accordion',
     },
     {
-      title: 'Themes',
-      href: '/themes',
+      title: 'Blocks',
+      href: '/blocks',
     },
     {
-      title: 'Examples',
-      href: '/examples/mail',
+      title: 'Charts',
+      href: '/charts',
     },
     {
-      title: 'Blocks',
-      href: '/blocks',
+      title: 'Themes',
+      href: '/themes',
     },
     {
-      title: 'GitHub',
-      href: 'https://github.com/radix-vue/shadcn-vue',
-      external: true,
+      title: 'Examples',
+      href: '/examples/mail',
     },
   ],
   sidebarNav: [
diff --git a/apps/www/.vitepress/theme/layout/ChartsLayout.vue b/apps/www/.vitepress/theme/layout/ChartsLayout.vue
new file mode 100644
index 000000000..71dafa243
--- /dev/null
+++ b/apps/www/.vitepress/theme/layout/ChartsLayout.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import PageHeader from '../components/PageHeader.vue'
+import Announcement from '../components/Announcement.vue'
+import PageHeaderHeading from '../components/PageHeaderHeading.vue'
+import PageHeaderDescription from '../components/PageHeaderDescription.vue'
+import PageAction from '../components/PageAction.vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/lib/registry/new-york/ui/button'
+</script>
+
+<template>
+  <PageHeader class="page-header pb-8">
+    <Announcement />
+    <PageHeaderHeading>Beautiful Charts</PageHeaderHeading>
+    <PageHeaderDescription>
+      Built using Unovis. Copy and paste into your apps. Open Source.
+    </PageHeaderDescription>
+
+    <PageAction>
+      <a
+        href="/docs/charts.html"
+        :class="cn(buttonVariants(), 'rounded-[6px]')"
+      >
+        Documentation
+      </a>
+    </PageAction>
+  </PageHeader>
+
+  <section id="charts" class="grid scroll-mt-20">
+    <slot />
+  </section>
+</template>
diff --git a/apps/www/src/content/charts.md b/apps/www/src/content/charts.md
new file mode 100644
index 000000000..c6db5b631
--- /dev/null
+++ b/apps/www/src/content/charts.md
@@ -0,0 +1,9 @@
+---
+title: Beautiful Charts
+---
+
+<script setup lang="ts">
+import Charts from "../../.vitepress/theme/components/charts/Charts.vue"
+</script>
+
+<Charts />
diff --git a/apps/www/src/content/themes.md b/apps/www/src/content/themes.md
index 6aa49b26e..3df3823ae 100644
--- a/apps/www/src/content/themes.md
+++ b/apps/www/src/content/themes.md
@@ -1,5 +1,5 @@
 ---
-title: Theming - shadcn-vue
+title: Theming
 ---
 
 <script setup>
diff --git a/apps/www/src/lib/registry/new-york/block/ChartAreaStacked.vue b/apps/www/src/lib/registry/new-york/block/ChartAreaStacked.vue
new file mode 100644
index 000000000..1e3b832e7
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/block/ChartAreaStacked.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import ChartContainer from '../ui/chart/ChartContainer.vue'
+import { AreaChart } from '@/lib/registry/new-york/ui/chart-area'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
+
+const chartData = [
+  { month: 'January', desktop: 186, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+  { month: 'March', desktop: 237, mobile: 120 },
+  { month: 'April', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'June', desktop: 214, mobile: 140 },
+]
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>Area Chart - Stacked</CardTitle>
+      <CardDescription>
+        Showing total visitors for the last 6 months
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <ChartContainer>
+        <AreaChart :margin="{ bottom: 0, left: -10, right: 0, top: 0 }" :data="chartData" index="month" :show-y-axis="false" :show-legend="false" :categories="['desktop', 'mobile']" />
+      </ChartContainer>
+    </CardContent>
+    <CardFooter>
+      <div className="flex w-full items-start gap-2 text-sm">
+        <div className="grid gap-2">
+          <div className="flex items-center gap-2 font-medium leading-none">
+            Trending up by 5.2% this month <TrendingUp class-name="h-4 w-4" />
+          </div>
+          <div className="flex items-center gap-2 leading-none text-muted-foreground">
+            January - June 2024
+          </div>
+        </div>
+      </div>
+    </CardFooter>
+  </Card>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue b/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue
index be913ef37..894d1a13e 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue
@@ -61,7 +61,7 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
 </script>
 
 <template>
-  <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
+  <div :class="cn('w-full flex flex-col items-end', $attrs.class ?? '')">
     <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
 
     <VisXYContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data">
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/ChartContainer.vue b/apps/www/src/lib/registry/new-york/ui/chart/ChartContainer.vue
new file mode 100644
index 000000000..ab51c6697
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/chart/ChartContainer.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex aspect-video justify-center text-xs', props.class)"
+  >
+    <slot />
+  </div>
+</template>