From 6ac1d40bf27c26502e171363f66a38e70ca3deec Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Fri, 26 Apr 2024 23:41:48 +0800
Subject: [PATCH] feat: add line, area example

---
 .../.vitepress/theme/components/APITable.vue  |   6 +-
 apps/www/src/content/docs/charts/area.md      |  16 +
 apps/www/src/content/docs/charts/line.md      |  18 +-
 .../example/AreaChartCustomTooltip.vue        |  23 ++
 .../default/example/AreaChartSparkline.vue    |  33 ++
 .../default/example/CustomChartTooltip.vue    |  26 ++
 .../example/LineChartCustomTooltip.vue        | 281 +++++++++++++++++
 .../default/example/LineChartSparkline.vue    | 285 ++++++++++++++++++
 .../example/AreaChartCustomTooltip.vue        |  23 ++
 .../new-york/example/AreaChartSparkline.vue   |  33 ++
 .../new-york/example/CustomChartTooltip.vue   |  26 ++
 .../example/LineChartCustomTooltip.vue        | 281 +++++++++++++++++
 .../new-york/example/LineChartSparkline.vue   | 285 ++++++++++++++++++
 13 files changed, 1332 insertions(+), 4 deletions(-)
 create mode 100644 apps/www/src/lib/registry/default/example/AreaChartCustomTooltip.vue
 create mode 100644 apps/www/src/lib/registry/default/example/AreaChartSparkline.vue
 create mode 100644 apps/www/src/lib/registry/default/example/CustomChartTooltip.vue
 create mode 100644 apps/www/src/lib/registry/default/example/LineChartCustomTooltip.vue
 create mode 100644 apps/www/src/lib/registry/default/example/LineChartSparkline.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/AreaChartCustomTooltip.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/AreaChartSparkline.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/CustomChartTooltip.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/LineChartCustomTooltip.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/LineChartSparkline.vue

diff --git a/apps/www/.vitepress/theme/components/APITable.vue b/apps/www/.vitepress/theme/components/APITable.vue
index d785cc1b..c128797d 100644
--- a/apps/www/.vitepress/theme/components/APITable.vue
+++ b/apps/www/.vitepress/theme/components/APITable.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { capitalize } from 'vue'
+
 defineProps<{
   type: 'prop' | 'emit' | 'slot' | 'method'
   data: { name: string, description: string, type: string, required: boolean }[]
@@ -7,9 +9,7 @@ defineProps<{
 
 <template>
   <div>
-    <h2 class="capitalize">
-      {{ type }}
-    </h2>
+    <h3>{{ capitalize(type) }}</h3>
 
     <div v-for="(item, index) in data" :key="index" class="py-4 border-b text-sm">
       <div class="flex items-center gap-2 flex-wrap">
diff --git a/apps/www/src/content/docs/charts/area.md b/apps/www/src/content/docs/charts/area.md
index 8edbe955..6da49690 100644
--- a/apps/www/src/content/docs/charts/area.md
+++ b/apps/www/src/content/docs/charts/area.md
@@ -27,4 +27,20 @@ Follow the [guide](/docs/charts/guide.html#installation) to complete the setup.
 
 </Steps>
 
+## API
+
 <!-- @include: @/content/meta/AreaChart.md -->
+
+## Example
+
+### Sparkline
+
+We can turn the chart into sparkline chart by hiding axis, gridline and legends.
+
+<ComponentPreview name="AreaChartSparkline"  />
+
+### Custom Tooltip
+
+If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](http://localhost:5173/docs/charts/guide.html#custom-tooltip).
+
+<ComponentPreview name="AreaChartCustomTooltip"  />
diff --git a/apps/www/src/content/docs/charts/line.md b/apps/www/src/content/docs/charts/line.md
index c48a40a0..47f130db 100644
--- a/apps/www/src/content/docs/charts/line.md
+++ b/apps/www/src/content/docs/charts/line.md
@@ -27,4 +27,20 @@ Follow the [guide](/docs/charts/guide.html#installation) to complete the setup.
 
 </Steps>
 
-<!-- @include: @/content/meta/LineChart.md -->
+## API
+
+<!-- @include: @/content/meta/AreaChart.md -->
+
+## Example
+
+### Sparkline
+
+We can turn the chart into sparkline chart by hiding axis, gridline and legends.
+
+<ComponentPreview name="LineChartSparkline"  />
+
+### Custom Tooltip
+
+If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](http://localhost:5173/docs/charts/guide.html#custom-tooltip).
+
+<ComponentPreview name="LineChartCustomTooltip"  />
diff --git a/apps/www/src/lib/registry/default/example/AreaChartCustomTooltip.vue b/apps/www/src/lib/registry/default/example/AreaChartCustomTooltip.vue
new file mode 100644
index 00000000..8c4da5e3
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/AreaChartCustomTooltip.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import CustomChartTooltip from './CustomChartTooltip.vue'
+import { AreaChart } from '@/lib/registry/default/ui/chart-area'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <AreaChart
+    index="name"
+    :data="data"
+    :categories="['total', 'predicted']"
+    :custom-tooltip="CustomChartTooltip"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/AreaChartSparkline.vue b/apps/www/src/lib/registry/default/example/AreaChartSparkline.vue
new file mode 100644
index 00000000..37cb2b65
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/AreaChartSparkline.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { CurveType } from '@unovis/ts'
+import { AreaChart } from '@/lib/registry/default/ui/chart-area'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Aug', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Sep', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Oct', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Nov', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Dec', total: Math.floor(Math.random() * 2000) + 1000 },
+]
+</script>
+
+<template>
+  <AreaChart
+    class="h-[100px] w-[400px]"
+    index="name"
+    :data="data"
+    :categories="['total']"
+    :show-grid-line="false"
+    :show-legend="false"
+    :show-x-axis="false"
+    :show-y-axis="false"
+    :curve-type="CurveType.Linear"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/CustomChartTooltip.vue b/apps/www/src/lib/registry/default/example/CustomChartTooltip.vue
new file mode 100644
index 00000000..86f72173
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/CustomChartTooltip.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Card, CardContent } from '@/lib/registry/default/ui/card'
+
+defineProps<{
+  title?: string
+  data: {
+    name: string
+    color: string
+    value: any
+  }[]
+}>()
+</script>
+
+<template>
+  <Card class="text-sm">
+    <CardContent class="p-3 min-w-[180px] flex flex-col gap-2">
+      <div v-for="(item, key) in data" :key="key" class="flex justify-between items-center">
+        <div class="flex items-center">
+          <span class="w-1 h-7 mr-4 rounded-full" :style="{ background: item.color }" />
+          <span>{{ item.name }}</span>
+        </div>
+        <span class="font-semibold ml-4">{{ item.value }}</span>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/LineChartCustomTooltip.vue b/apps/www/src/lib/registry/default/example/LineChartCustomTooltip.vue
new file mode 100644
index 00000000..fbd20dfa
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/LineChartCustomTooltip.vue
@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import CustomChartTooltip from './CustomChartTooltip.vue'
+import { LineChart } from '@/lib/registry/default/ui/chart-line'
+
+const data = [
+  {
+    'year': 1970,
+    'Export Growth Rate': 2.04,
+    'Import Growth Rate': 1.53,
+  },
+  {
+    'year': 1971,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.58,
+  },
+  {
+    'year': 1972,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1973,
+    'Export Growth Rate': 1.93,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1974,
+    'Export Growth Rate': 1.88,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1975,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.64,
+  },
+  {
+    'year': 1976,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.62,
+  },
+  {
+    'year': 1977,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.69,
+  },
+  {
+    'year': 1978,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1979,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1980,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1981,
+    'Export Growth Rate': 1.81,
+    'Import Growth Rate': 1.72,
+  },
+  {
+    'year': 1982,
+    'Export Growth Rate': 1.84,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1983,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1984,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.78,
+  },
+  {
+    'year': 1985,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.81,
+  },
+  {
+    'year': 1986,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.89,
+  },
+  {
+    'year': 1987,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.91,
+  },
+  {
+    'year': 1988,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1989,
+    'Export Growth Rate': 1.76,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1990,
+    'Export Growth Rate': 1.75,
+    'Import Growth Rate': 1.97,
+  },
+  {
+    'year': 1991,
+    'Export Growth Rate': 1.62,
+    'Import Growth Rate': 1.99,
+  },
+  {
+    'year': 1992,
+    'Export Growth Rate': 1.56,
+    'Import Growth Rate': 2.12,
+  },
+  {
+    'year': 1993,
+    'Export Growth Rate': 1.5,
+    'Import Growth Rate': 2.13,
+  },
+  {
+    'year': 1994,
+    'Export Growth Rate': 1.46,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1995,
+    'Export Growth Rate': 1.43,
+    'Import Growth Rate': 2.17,
+  },
+  {
+    'year': 1996,
+    'Export Growth Rate': 1.4,
+    'Import Growth Rate': 2.2,
+  },
+  {
+    'year': 1997,
+    'Export Growth Rate': 1.37,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1998,
+    'Export Growth Rate': 1.34,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 1999,
+    'Export Growth Rate': 1.32,
+    'Import Growth Rate': 2.05,
+  },
+  {
+    'year': 2000,
+    'Export Growth Rate': 1.33,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 2001,
+    'Export Growth Rate': 1.31,
+    'Import Growth Rate': 2.08,
+  },
+  {
+    'year': 2002,
+    'Export Growth Rate': 1.29,
+    'Import Growth Rate': 2.1,
+  },
+  {
+    'year': 2003,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 2004,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.21,
+  },
+  {
+    'year': 2005,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.23,
+  },
+  {
+    'year': 2006,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.29,
+  },
+  {
+    'year': 2007,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2008,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2009,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2010,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2011,
+    'Export Growth Rate': 1.24,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2012,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2013,
+    'Export Growth Rate': 1.22,
+    'Import Growth Rate': 2.3,
+  },
+  {
+    'year': 2014,
+    'Export Growth Rate': 1.2,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2015,
+    'Export Growth Rate': 1.17,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2016,
+    'Export Growth Rate': 1.16,
+    'Import Growth Rate': 2.41,
+  },
+  {
+    'year': 2017,
+    'Export Growth Rate': 1.13,
+    'Import Growth Rate': 2.44,
+  },
+  {
+    'year': 2018,
+    'Export Growth Rate': 1.07,
+    'Import Growth Rate': 2.45,
+  },
+  {
+    'year': 2019,
+    'Export Growth Rate': 1.03,
+    'Import Growth Rate': 2.47,
+  },
+  {
+    'year': 2020,
+    'Export Growth Rate': 0.92,
+    'Import Growth Rate': 2.48,
+  },
+  {
+    'year': 2021,
+    'Export Growth Rate': 0.82,
+    'Import Growth Rate': 2.51,
+  },
+]
+</script>
+
+<template>
+  <LineChart
+    :data="data"
+    index="year"
+    :categories="['Export Growth Rate', 'Import Growth Rate']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+    :custom-tooltip="CustomChartTooltip"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/LineChartSparkline.vue b/apps/www/src/lib/registry/default/example/LineChartSparkline.vue
new file mode 100644
index 00000000..6aa2ef6c
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/LineChartSparkline.vue
@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { LineChart } from '@/lib/registry/default/ui/chart-line'
+
+const data = [
+  {
+    'year': 1970,
+    'Export Growth Rate': 2.04,
+    'Import Growth Rate': 1.53,
+  },
+  {
+    'year': 1971,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.58,
+  },
+  {
+    'year': 1972,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1973,
+    'Export Growth Rate': 1.93,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1974,
+    'Export Growth Rate': 1.88,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1975,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.64,
+  },
+  {
+    'year': 1976,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.62,
+  },
+  {
+    'year': 1977,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.69,
+  },
+  {
+    'year': 1978,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1979,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1980,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1981,
+    'Export Growth Rate': 1.81,
+    'Import Growth Rate': 1.72,
+  },
+  {
+    'year': 1982,
+    'Export Growth Rate': 1.84,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1983,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1984,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.78,
+  },
+  {
+    'year': 1985,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.81,
+  },
+  {
+    'year': 1986,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.89,
+  },
+  {
+    'year': 1987,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.91,
+  },
+  {
+    'year': 1988,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1989,
+    'Export Growth Rate': 1.76,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1990,
+    'Export Growth Rate': 1.75,
+    'Import Growth Rate': 1.97,
+  },
+  {
+    'year': 1991,
+    'Export Growth Rate': 1.62,
+    'Import Growth Rate': 1.99,
+  },
+  {
+    'year': 1992,
+    'Export Growth Rate': 1.56,
+    'Import Growth Rate': 2.12,
+  },
+  {
+    'year': 1993,
+    'Export Growth Rate': 1.5,
+    'Import Growth Rate': 2.13,
+  },
+  {
+    'year': 1994,
+    'Export Growth Rate': 1.46,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1995,
+    'Export Growth Rate': 1.43,
+    'Import Growth Rate': 2.17,
+  },
+  {
+    'year': 1996,
+    'Export Growth Rate': 1.4,
+    'Import Growth Rate': 2.2,
+  },
+  {
+    'year': 1997,
+    'Export Growth Rate': 1.37,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1998,
+    'Export Growth Rate': 1.34,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 1999,
+    'Export Growth Rate': 1.32,
+    'Import Growth Rate': 2.05,
+  },
+  {
+    'year': 2000,
+    'Export Growth Rate': 1.33,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 2001,
+    'Export Growth Rate': 1.31,
+    'Import Growth Rate': 2.08,
+  },
+  {
+    'year': 2002,
+    'Export Growth Rate': 1.29,
+    'Import Growth Rate': 2.1,
+  },
+  {
+    'year': 2003,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 2004,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.21,
+  },
+  {
+    'year': 2005,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.23,
+  },
+  {
+    'year': 2006,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.29,
+  },
+  {
+    'year': 2007,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2008,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2009,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2010,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2011,
+    'Export Growth Rate': 1.24,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2012,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2013,
+    'Export Growth Rate': 1.22,
+    'Import Growth Rate': 2.3,
+  },
+  {
+    'year': 2014,
+    'Export Growth Rate': 1.2,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2015,
+    'Export Growth Rate': 1.17,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2016,
+    'Export Growth Rate': 1.16,
+    'Import Growth Rate': 2.41,
+  },
+  {
+    'year': 2017,
+    'Export Growth Rate': 1.13,
+    'Import Growth Rate': 2.44,
+  },
+  {
+    'year': 2018,
+    'Export Growth Rate': 1.07,
+    'Import Growth Rate': 2.45,
+  },
+  {
+    'year': 2019,
+    'Export Growth Rate': 1.03,
+    'Import Growth Rate': 2.47,
+  },
+  {
+    'year': 2020,
+    'Export Growth Rate': 0.92,
+    'Import Growth Rate': 2.48,
+  },
+  {
+    'year': 2021,
+    'Export Growth Rate': 0.82,
+    'Import Growth Rate': 2.51,
+  },
+]
+</script>
+
+<template>
+  <LineChart
+    index="year"
+    class="h-[100px] w-[400px]"
+    :data="data"
+    :categories="['Export Growth Rate']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+    :show-tooltip="false"
+    :show-grid-line="false"
+    :show-legend="false"
+    :show-x-axis="false"
+    :show-y-axis="false"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/AreaChartCustomTooltip.vue b/apps/www/src/lib/registry/new-york/example/AreaChartCustomTooltip.vue
new file mode 100644
index 00000000..80e76039
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/AreaChartCustomTooltip.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import CustomChartTooltip from './CustomChartTooltip.vue'
+import { AreaChart } from '@/lib/registry/new-york/ui/chart-area'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <AreaChart
+    index="name"
+    :data="data"
+    :categories="['total', 'predicted']"
+    :custom-tooltip="CustomChartTooltip"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/AreaChartSparkline.vue b/apps/www/src/lib/registry/new-york/example/AreaChartSparkline.vue
new file mode 100644
index 00000000..96e557db
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/AreaChartSparkline.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { CurveType } from '@unovis/ts'
+import { AreaChart } from '@/lib/registry/new-york/ui/chart-area'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Aug', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Sep', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Oct', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Nov', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Dec', total: Math.floor(Math.random() * 2000) + 1000 },
+]
+</script>
+
+<template>
+  <AreaChart
+    class="h-[100px] w-[400px]"
+    index="name"
+    :data="data"
+    :categories="['total']"
+    :show-grid-line="false"
+    :show-legend="false"
+    :show-x-axis="false"
+    :show-y-axis="false"
+    :curve-type="CurveType.Linear"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/CustomChartTooltip.vue b/apps/www/src/lib/registry/new-york/example/CustomChartTooltip.vue
new file mode 100644
index 00000000..86f72173
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/CustomChartTooltip.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Card, CardContent } from '@/lib/registry/default/ui/card'
+
+defineProps<{
+  title?: string
+  data: {
+    name: string
+    color: string
+    value: any
+  }[]
+}>()
+</script>
+
+<template>
+  <Card class="text-sm">
+    <CardContent class="p-3 min-w-[180px] flex flex-col gap-2">
+      <div v-for="(item, key) in data" :key="key" class="flex justify-between items-center">
+        <div class="flex items-center">
+          <span class="w-1 h-7 mr-4 rounded-full" :style="{ background: item.color }" />
+          <span>{{ item.name }}</span>
+        </div>
+        <span class="font-semibold ml-4">{{ item.value }}</span>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/LineChartCustomTooltip.vue b/apps/www/src/lib/registry/new-york/example/LineChartCustomTooltip.vue
new file mode 100644
index 00000000..5fd45957
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/LineChartCustomTooltip.vue
@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import CustomChartTooltip from './CustomChartTooltip.vue'
+import { LineChart } from '@/lib/registry/new-york/ui/chart-line'
+
+const data = [
+  {
+    'year': 1970,
+    'Export Growth Rate': 2.04,
+    'Import Growth Rate': 1.53,
+  },
+  {
+    'year': 1971,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.58,
+  },
+  {
+    'year': 1972,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1973,
+    'Export Growth Rate': 1.93,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1974,
+    'Export Growth Rate': 1.88,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1975,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.64,
+  },
+  {
+    'year': 1976,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.62,
+  },
+  {
+    'year': 1977,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.69,
+  },
+  {
+    'year': 1978,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1979,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1980,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1981,
+    'Export Growth Rate': 1.81,
+    'Import Growth Rate': 1.72,
+  },
+  {
+    'year': 1982,
+    'Export Growth Rate': 1.84,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1983,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1984,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.78,
+  },
+  {
+    'year': 1985,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.81,
+  },
+  {
+    'year': 1986,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.89,
+  },
+  {
+    'year': 1987,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.91,
+  },
+  {
+    'year': 1988,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1989,
+    'Export Growth Rate': 1.76,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1990,
+    'Export Growth Rate': 1.75,
+    'Import Growth Rate': 1.97,
+  },
+  {
+    'year': 1991,
+    'Export Growth Rate': 1.62,
+    'Import Growth Rate': 1.99,
+  },
+  {
+    'year': 1992,
+    'Export Growth Rate': 1.56,
+    'Import Growth Rate': 2.12,
+  },
+  {
+    'year': 1993,
+    'Export Growth Rate': 1.5,
+    'Import Growth Rate': 2.13,
+  },
+  {
+    'year': 1994,
+    'Export Growth Rate': 1.46,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1995,
+    'Export Growth Rate': 1.43,
+    'Import Growth Rate': 2.17,
+  },
+  {
+    'year': 1996,
+    'Export Growth Rate': 1.4,
+    'Import Growth Rate': 2.2,
+  },
+  {
+    'year': 1997,
+    'Export Growth Rate': 1.37,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1998,
+    'Export Growth Rate': 1.34,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 1999,
+    'Export Growth Rate': 1.32,
+    'Import Growth Rate': 2.05,
+  },
+  {
+    'year': 2000,
+    'Export Growth Rate': 1.33,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 2001,
+    'Export Growth Rate': 1.31,
+    'Import Growth Rate': 2.08,
+  },
+  {
+    'year': 2002,
+    'Export Growth Rate': 1.29,
+    'Import Growth Rate': 2.1,
+  },
+  {
+    'year': 2003,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 2004,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.21,
+  },
+  {
+    'year': 2005,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.23,
+  },
+  {
+    'year': 2006,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.29,
+  },
+  {
+    'year': 2007,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2008,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2009,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2010,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2011,
+    'Export Growth Rate': 1.24,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2012,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2013,
+    'Export Growth Rate': 1.22,
+    'Import Growth Rate': 2.3,
+  },
+  {
+    'year': 2014,
+    'Export Growth Rate': 1.2,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2015,
+    'Export Growth Rate': 1.17,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2016,
+    'Export Growth Rate': 1.16,
+    'Import Growth Rate': 2.41,
+  },
+  {
+    'year': 2017,
+    'Export Growth Rate': 1.13,
+    'Import Growth Rate': 2.44,
+  },
+  {
+    'year': 2018,
+    'Export Growth Rate': 1.07,
+    'Import Growth Rate': 2.45,
+  },
+  {
+    'year': 2019,
+    'Export Growth Rate': 1.03,
+    'Import Growth Rate': 2.47,
+  },
+  {
+    'year': 2020,
+    'Export Growth Rate': 0.92,
+    'Import Growth Rate': 2.48,
+  },
+  {
+    'year': 2021,
+    'Export Growth Rate': 0.82,
+    'Import Growth Rate': 2.51,
+  },
+]
+</script>
+
+<template>
+  <LineChart
+    :data="data"
+    index="year"
+    :categories="['Export Growth Rate', 'Import Growth Rate']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+    :custom-tooltip="CustomChartTooltip"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/LineChartSparkline.vue b/apps/www/src/lib/registry/new-york/example/LineChartSparkline.vue
new file mode 100644
index 00000000..86f074ae
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/LineChartSparkline.vue
@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { LineChart } from '@/lib/registry/new-york/ui/chart-line'
+
+const data = [
+  {
+    'year': 1970,
+    'Export Growth Rate': 2.04,
+    'Import Growth Rate': 1.53,
+  },
+  {
+    'year': 1971,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.58,
+  },
+  {
+    'year': 1972,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1973,
+    'Export Growth Rate': 1.93,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1974,
+    'Export Growth Rate': 1.88,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1975,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.64,
+  },
+  {
+    'year': 1976,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.62,
+  },
+  {
+    'year': 1977,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.69,
+  },
+  {
+    'year': 1978,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1979,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1980,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1981,
+    'Export Growth Rate': 1.81,
+    'Import Growth Rate': 1.72,
+  },
+  {
+    'year': 1982,
+    'Export Growth Rate': 1.84,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1983,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1984,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.78,
+  },
+  {
+    'year': 1985,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.81,
+  },
+  {
+    'year': 1986,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.89,
+  },
+  {
+    'year': 1987,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.91,
+  },
+  {
+    'year': 1988,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1989,
+    'Export Growth Rate': 1.76,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1990,
+    'Export Growth Rate': 1.75,
+    'Import Growth Rate': 1.97,
+  },
+  {
+    'year': 1991,
+    'Export Growth Rate': 1.62,
+    'Import Growth Rate': 1.99,
+  },
+  {
+    'year': 1992,
+    'Export Growth Rate': 1.56,
+    'Import Growth Rate': 2.12,
+  },
+  {
+    'year': 1993,
+    'Export Growth Rate': 1.5,
+    'Import Growth Rate': 2.13,
+  },
+  {
+    'year': 1994,
+    'Export Growth Rate': 1.46,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1995,
+    'Export Growth Rate': 1.43,
+    'Import Growth Rate': 2.17,
+  },
+  {
+    'year': 1996,
+    'Export Growth Rate': 1.4,
+    'Import Growth Rate': 2.2,
+  },
+  {
+    'year': 1997,
+    'Export Growth Rate': 1.37,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1998,
+    'Export Growth Rate': 1.34,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 1999,
+    'Export Growth Rate': 1.32,
+    'Import Growth Rate': 2.05,
+  },
+  {
+    'year': 2000,
+    'Export Growth Rate': 1.33,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 2001,
+    'Export Growth Rate': 1.31,
+    'Import Growth Rate': 2.08,
+  },
+  {
+    'year': 2002,
+    'Export Growth Rate': 1.29,
+    'Import Growth Rate': 2.1,
+  },
+  {
+    'year': 2003,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 2004,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.21,
+  },
+  {
+    'year': 2005,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.23,
+  },
+  {
+    'year': 2006,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.29,
+  },
+  {
+    'year': 2007,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2008,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2009,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2010,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2011,
+    'Export Growth Rate': 1.24,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2012,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2013,
+    'Export Growth Rate': 1.22,
+    'Import Growth Rate': 2.3,
+  },
+  {
+    'year': 2014,
+    'Export Growth Rate': 1.2,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2015,
+    'Export Growth Rate': 1.17,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2016,
+    'Export Growth Rate': 1.16,
+    'Import Growth Rate': 2.41,
+  },
+  {
+    'year': 2017,
+    'Export Growth Rate': 1.13,
+    'Import Growth Rate': 2.44,
+  },
+  {
+    'year': 2018,
+    'Export Growth Rate': 1.07,
+    'Import Growth Rate': 2.45,
+  },
+  {
+    'year': 2019,
+    'Export Growth Rate': 1.03,
+    'Import Growth Rate': 2.47,
+  },
+  {
+    'year': 2020,
+    'Export Growth Rate': 0.92,
+    'Import Growth Rate': 2.48,
+  },
+  {
+    'year': 2021,
+    'Export Growth Rate': 0.82,
+    'Import Growth Rate': 2.51,
+  },
+]
+</script>
+
+<template>
+  <LineChart
+    index="year"
+    class="h-[100px] w-[400px]"
+    :data="data"
+    :categories="['Export Growth Rate']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+    :show-tooltip="false"
+    :show-grid-line="false"
+    :show-legend="false"
+    :show-x-axis="false"
+    :show-y-axis="false"
+  />
+</template>