docs(charts): add more area charts

apps/v4/constants/charts.ts

@@ -1,8 +1,13 @@
 import type { Component } from 'vue'
 import ChartAreaAxes from '~/registry/new-york-v4/charts/ChartAreaAxes.vue'
+import ChartAreaDefault from '~/registry/new-york-v4/charts/ChartAreaDefault.vue'
 import ChartAreaGradient from '~/registry/new-york-v4/charts/ChartAreaGradient.vue'
 import ChartAreaIcons from '~/registry/new-york-v4/charts/ChartAreaIcons.vue'
 import ChartAreaInteractive from '~/registry/new-york-v4/charts/ChartAreaInteractive.vue'
+import ChartAreaLegend from '~/registry/new-york-v4/charts/ChartAreaLegend.vue'
+import ChartAreaLinear from '~/registry/new-york-v4/charts/ChartAreaLinear.vue'
+import ChartAreaStacked from '~/registry/new-york-v4/charts/ChartAreaStacked.vue'
+import ChartAreaStep from '~/registry/new-york-v4/charts/ChartAreaStep.vue'
 import ChartBarDefault from '~/registry/new-york-v4/charts/ChartBarDefault.vue'
 import ChartBarHorizontal from '~/registry/new-york-v4/charts/ChartBarHorizontal.vue'
 import ChartBarInteractive from '~/registry/new-york-v4/charts/ChartBarInteractive.vue'
@@ -46,14 +51,13 @@ export const charts: ChartGroups = {
       component: ChartAreaInteractive,
       fullWidth: true,
     },
-    // { id: "chart-area-default", component: ChartAreaDefault },
-    // { id: "chart-area-linear", component: ChartAreaLinear },
-    // { id: "chart-area-step", component: ChartAreaStep },
-    // { id: "chart-area-legend", component: ChartAreaLegend },
-    // { id: "chart-area-stacked", component: ChartAreaStacked },
-    // { id: "chart-area-stacked-expand", component: ChartAreaStackedExpand },
+    { id: 'ChartAreaDefault', component: ChartAreaDefault },
+    { id: 'ChartAreaLinear', component: ChartAreaLinear },
+    { id: 'ChartAreaStep', component: ChartAreaStep },
+    { id: 'ChartAreaLegend', component: ChartAreaLegend },
+    { id: 'ChartAreaStacked', component: ChartAreaStacked },
+    // { id: 'ChartAreaStackedExpand', component: ChartAreaStackedExpand },
     { id: 'ChartAreaIcons', component: ChartAreaIcons },
-    // { id: "chart-area-gradient", component: ChartAreaGradient },
     { id: 'ChartAreaGradient', component: ChartAreaGradient },
     { id: 'ChartAreaAxes', component: ChartAreaAxes },
   ],

apps/v4/registry/new-york-v4/charts/ChartAreaAxes.vue

@@ -3,7 +3,7 @@ import type {
   ChartConfig,
 } from "@/registry/new-york-v4/ui/chart"
 // import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
-import { VisArea, VisAxis, VisLine, VisXYContainer } from "@unovis/vue"
+import { VisArea, VisAxis, VisXYContainer } from "@unovis/vue"
 
 import { TrendingUp } from "lucide-vue-next"
 import {
@@ -63,11 +63,7 @@ const chartConfig = {
             :y="[(d: Data) => d.mobile, (d: Data) => d.desktop]"
             :color="(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]"
             :opacity="0.4"
-          />
-          <VisLine
-            :x="(d: Data) => d.month"
-            :y="[(d: Data) => d.mobile, (d: Data) => d.mobile + d.desktop]"
-            :color="(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]"
+            :line="true"
             :line-width="1"
           />
           <VisAxis

apps/v4/registry/new-york-v4/charts/ChartAreaDefault.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import type {
+  ChartConfig,
+} from "@/registry/new-york-v4/ui/chart"
+// import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
+import { VisArea, VisAxis, VisXYContainer } from "@unovis/vue"
+import { TrendingUp } from "lucide-vue-next"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartContainer,
+  ChartCrosshair,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  componentToString,
+} from "@/registry/new-york-v4/ui/chart"
+
+const description = "An area chart with axes"
+
+const chartData = [
+  { month: 1, monthLabel: "January", desktop: 186 },
+  { month: 2, monthLabel: "February", desktop: 305 },
+  { month: 3, monthLabel: "March", desktop: 237 },
+  { month: 4, monthLabel: "April", desktop: 73 },
+  { month: 5, monthLabel: "May", desktop: 209 },
+  { month: 6, monthLabel: "June", desktop: 214 },
+]
+
+type Data = typeof chartData[number]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>Area Chart</CardTitle>
+      <CardDescription>
+        Showing total visitors for the last 6 months
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <ChartContainer :config="chartConfig">
+        <VisXYContainer :data="chartData" :margin="{ top: 10, bottom: 10 }">
+          <VisArea
+            :x="(d: Data) => d.month"
+            :y="[(d: Data) => d.desktop]"
+            :color="chartConfig.desktop.color"
+            :opacity="0.4"
+            :line="true"
+            :line-width="1"
+          />
+          <VisAxis
+            type="x"
+            :x="(d: Data) => d.month"
+            :tick-line="false"
+            :domain-line="false"
+            :grid-line="false"
+            :num-ticks="6"
+            :tick-format="(d: number, index: number) => {
+              return chartData[index].monthLabel.slice(0, 3)
+            }"
+          />
+          <VisAxis
+            type="y"
+            :num-ticks="3"
+            :tick-line="false"
+            :domain-line="false"
+            :tick-format="(d: number, index: number) => ''"
+          />
+          <ChartTooltip />
+          <ChartCrosshair
+            :template="componentToString(chartConfig, ChartTooltipContent, { labelKey: 'monthLabel', indicator: 'line' })"
+            :color="chartConfig.desktop.color"
+          />
+        </VisXYContainer>
+
+        <ChartLegendContent />
+      </ChartContainer>
+    </CardContent>
+    <CardFooter>
+      <div class="flex w-full items-start gap-2 text-sm">
+        <div class="grid gap-2">
+          <div class="flex items-center gap-2 leading-none font-medium">
+            Trending up by 5.2% this month <TrendingUp class="h-4 w-4" />
+          </div>
+          <div class="text-muted-foreground flex items-center gap-2 leading-none">
+            January - June 2024
+          </div>
+        </div>
+      </div>
+    </CardFooter>
+  </Card>
+</template>

apps/v4/registry/new-york-v4/charts/ChartAreaGradient.vue

@@ -3,7 +3,7 @@ import type {
   ChartConfig,
 } from "@/registry/new-york-v4/ui/chart"
 // import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
-import { VisArea, VisAxis, VisLine, VisXYContainer } from "@unovis/vue"
+import { VisArea, VisAxis, VisXYContainer } from "@unovis/vue"
 
 import { TrendingUp } from "lucide-vue-next"
 import {
@@ -90,11 +90,8 @@ const svgDefs = `
             :y="[(d: Data) => d.mobile, (d: Data) => d.desktop]"
             :color="(d: Data, i: number) => ['url(#fillMobile)', 'url(#fillDesktop)'][i]"
             :opacity="0.4"
-          />
-          <VisLine
-            :x="(d: Data) => d.month"
-            :y="[(d: Data) => d.mobile, (d: Data) => d.mobile + d.desktop]"
-            :color="(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]"
+            :line="true"
+            :line-color="(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]"
             :line-width="1"
           />
           <VisAxis

apps/v4/registry/new-york-v4/charts/ChartAreaIcons.vue

@@ -3,7 +3,7 @@ import type {
   ChartConfig,
 } from "@/registry/new-york-v4/ui/chart"
 // import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
-import { VisArea, VisAxis, VisLine, VisXYContainer } from "@unovis/vue"
+import { VisArea, VisAxis, VisXYContainer } from "@unovis/vue"
 import { TrendingDown, TrendingUp } from "lucide-vue-next"
 
 import {
@@ -66,11 +66,7 @@ const chartConfig = {
             :y="[(d: Data) => d.mobile, (d: Data) => d.desktop]"
             :color="(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]"
             :opacity="0.4"
-          />
-          <VisLine
-            :x="(d: Data) => d.month"
-            :y="[(d: Data) => d.mobile, (d: Data) => d.mobile + d.desktop]"
-            :color="(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]"
+            :line="true"
             :line-width="1"
           />
           <VisAxis

apps/v4/registry/new-york-v4/charts/ChartAreaInteractive.vue

@@ -2,7 +2,7 @@
 import type { ChartConfig } from "@/registry/new-york-v4/ui/chart"
 
 // import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
-import { VisArea, VisAxis, VisLine, VisXYContainer } from "@unovis/vue"
+import { VisArea, VisAxis, VisXYContainer } from "@unovis/vue"
 import {
   Card,
   CardContent,
@@ -226,12 +226,9 @@ const filterRange = computed(() => {
             :y="[(d: Data) => d.mobile, (d: Data) => d.desktop]"
             :color="(d: Data, i: number) => ['url(#fillMobile)', 'url(#fillDesktop)'][i]"
             :opacity="0.6"
-          />
-          <VisLine
-            :x="(d: Data) => d.date"
-            :y="[(d: Data) => d.mobile, (d: Data) => d.mobile + d.desktop]"
-            :color="(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]"
+            :line="true"
             :line-width="1"
+            :line-color="(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]"
           />
           <VisAxis
             type="x"

apps/v4/registry/new-york-v4/charts/ChartAreaLegend.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import type {
+  ChartConfig,
+} from "@/registry/new-york-v4/ui/chart"
+// import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
+import { VisArea, VisAxis, VisXYContainer } from "@unovis/vue"
+import { TrendingUp } from "lucide-vue-next"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartContainer,
+  ChartCrosshair,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  componentToString,
+} from "@/registry/new-york-v4/ui/chart"
+
+const description = "An area chart with axes"
+
+const chartData = [
+  { month: 1, monthLabel: "January", desktop: 186, mobile: 80 },
+  { month: 2, monthLabel: "February", desktop: 305, mobile: 200 },
+  { month: 3, monthLabel: "March", desktop: 237, mobile: 120 },
+  { month: 4, monthLabel: "April", desktop: 73, mobile: 190 },
+  { month: 5, monthLabel: "May", desktop: 209, mobile: 130 },
+  { month: 6, monthLabel: "June", desktop: 214, mobile: 140 },
+]
+
+type Data = typeof chartData[number]
+
+const chartConfig = {
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>Area Chart - Legend</CardTitle>
+      <CardDescription>
+        Showing total visitors for the last 6 months
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <ChartContainer :config="chartConfig">
+        <VisXYContainer :data="chartData" :margin="{ top: 10, bottom: 10 }">
+          <VisArea
+            :x="(d: Data) => d.month"
+            :y="[(d: Data) => d.mobile, (d: Data) => d.desktop]"
+            :color="(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]"
+            :opacity="0.4"
+            :line="true"
+            :line-width="1"
+          />
+          <VisAxis
+            type="x"
+            :x="(d: Data) => d.month"
+            :tick-line="false"
+            :domain-line="false"
+            :grid-line="false"
+            :num-ticks="6"
+            :tick-format="(d: number, index: number) => {
+              return chartData[index].monthLabel.slice(0, 3)
+            }"
+          />
+          <VisAxis
+            type="y"
+            :num-ticks="3"
+            :tick-line="false"
+            :domain-line="false"
+            :tick-format="(d: number, index: number) => ''"
+          />
+          <ChartTooltip />
+          <ChartCrosshair
+            :template="componentToString(chartConfig, ChartTooltipContent, { labelKey: 'monthLabel', indicator: 'line' })"
+            :color="(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i % 2]"
+          />
+        </VisXYContainer>
+
+        <ChartLegendContent />
+      </ChartContainer>
+    </CardContent>
+    <CardFooter>
+      <div class="flex w-full items-start gap-2 text-sm">
+        <div class="grid gap-2">
+          <div class="flex items-center gap-2 leading-none font-medium">
+            Trending up by 5.2% this month <TrendingUp class="h-4 w-4" />
+          </div>
+          <div class="text-muted-foreground flex items-center gap-2 leading-none">
+            January - June 2024
+          </div>
+        </div>
+      </div>
+    </CardFooter>
+  </Card>
+</template>