docs: improve chart doc

apps/www/.vitepress/theme/config/docs.ts

@@ -121,32 +121,6 @@ export const docsConfig: DocsConfig = {
         },
       ],
     },
-    {
-      title: 'Charts',
-      label: 'Alpha',
-      items: [
-        {
-          title: 'Guide',
-          href: '/docs/charts/guide',
-        },
-        {
-          title: 'Area',
-          href: '/docs/charts/area',
-        },
-        {
-          title: 'Line',
-          href: '/docs/charts/line',
-        },
-        {
-          title: 'Bar',
-          href: '/docs/charts/bar',
-        },
-        {
-          title: 'Donut',
-          href: '/docs/charts/donut',
-        },
-      ],
-    },
     {
       title: 'Extended',
       items: [
@@ -155,6 +129,12 @@ export const docsConfig: DocsConfig = {
           href: '/docs/components/auto-form',
           items: [],
         },
+        {
+          title: 'Charts',
+          href: '/docs/charts',
+          label: 'Alpha',
+          items: [],
+        },
       ],
     },
     {

apps/www/package.json

@@ -51,6 +51,7 @@
     "@iconify-json/radix-icons": "^1.1.14",
     "@iconify-json/ri": "^1.1.18",
     "@iconify-json/simple-icons": "^1.1.94",
+    "@iconify-json/solar": "^1.1.9",
     "@iconify-json/tabler": "^1.1.106",
     "@iconify/vue": "^4.1.2",
     "@oxc-parser/wasm": "^0.1.0",

apps/www/src/content/docs/charts.md

@@ -1,15 +1,46 @@
 ---
-title: Guide
+title: Charts
-description: A simple guide to help setup chart components.
+description: Versatile visualization tool, allowing users to represent data using various types of charts for effective analysis.
 label: Alpha
 ---
 
+<script setup>
+import Area from '~icons/gravity-ui/chart-area-stacked'
+import Bar from '~icons/gravity-ui/chart-column'
+import Line from '~icons/gravity-ui/chart-line'
+import Pie from '~icons/gravity-ui/chart-pie'
+</script>
+
 <Callout>
   Only works with Vue >3.3
 </Callout>
 
 `Charts` components were built on top of [Unovis](https://unovis.dev/) (a modular data visualization framework), and inspired by [tremor](https://www.tremor.so).
 
+## Chart type
+
+<div class="grid gap-4 mt-8 sm:grid-cols-2 sm:gap-6 not-docs">
+  <LinkedCard href="/docs/charts/area">
+    <Area class="text-foreground/80 w-11 h-11" />
+    <p class="mt-2 font-medium">Area</p>
+  </LinkedCard>
+
+  <LinkedCard href="/docs/charts/line">
+    <Line class="text-foreground/80 w-11 h-11" />
+    <p class="mt-2 font-medium">Line</p>
+  </LinkedCard>
+
+  <LinkedCard href="/docs/charts/bar">
+    <Bar class="text-foreground/80 w-11 h-11" />
+    <p class="mt-2 font-medium">Bar</p>
+  </LinkedCard>
+
+  <LinkedCard href="/docs/charts/donut">
+    <Pie class="text-foreground/80 w-11 h-11" />
+    <p class="mt-2 font-medium">Donut</p>
+  </LinkedCard>
+</div>
+
 ## Installation
 
 <Steps>

apps/www/src/content/docs/charts/area.md

@@ -23,7 +23,7 @@ npx shadcn-vue@latest add chart-area
 
 ### Setup
 
-Follow the [guide](/docs/charts/guide.html#installation) to complete the setup.
+Follow the [guide](/docs/charts.html#installation) to complete the setup.
 
 </Steps>
 
@@ -41,6 +41,6 @@ We can turn the chart into sparkline chart by hiding axis, gridline and legends.
 
 ### Custom Tooltip
 
-If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](/docs/charts/guide.html#custom-tooltip).
+If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](/docs/charts.html#custom-tooltip).
 
 <ComponentPreview name="AreaChartCustomTooltip"  />

apps/www/src/content/docs/charts/bar.md

@@ -23,7 +23,7 @@ npx shadcn-vue@latest add chart-bar
 
 ### Setup
 
-Follow the [guide](/docs/charts/guide.html#installation) to complete the setup.
+Follow the [guide](/docs/charts.html#installation) to complete the setup.
 
 </Steps>
 
@@ -45,6 +45,6 @@ You can stack the bar chart by settings prop `type` to `stacked`.
 
 ### Custom Tooltip
 
-If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](/docs/charts/guide.html#custom-tooltip).
+If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](/docs/charts.html#custom-tooltip).
 
 <ComponentPreview name="BarChartCustomTooltip"  />

apps/www/src/content/docs/charts/donut.md

@@ -23,7 +23,7 @@ npx shadcn-vue@latest add chart-donut
 
 ### Setup
 
-Follow the [guide](/docs/charts/guide.html#installation) to complete the setup.
+Follow the [guide](/docs/charts.html#installation) to complete the setup.
 
 </Steps>
 
@@ -47,6 +47,6 @@ We generate colors automatically based on the primary and secondary color and as
 
 ### Custom Tooltip
 
-If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](/docs/charts/guide.html#custom-tooltip).
+If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](/docs/charts.html#custom-tooltip).
 
 <ComponentPreview name="DonutChartCustomTooltip"  />

apps/www/src/content/docs/charts/line.md

@@ -23,7 +23,7 @@ npx shadcn-vue@latest add chart-line
 
 ### Setup
 
-Follow the [guide](/docs/charts/guide.html#installation) to complete the setup.
+Follow the [guide](/docs/charts.html#installation) to complete the setup.
 
 </Steps>
 
@@ -41,6 +41,6 @@ We can turn the chart into sparkline chart by hiding axis, gridline and legends.
 
 ### Custom Tooltip
 
-If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](/docs/charts/guide.html#custom-tooltip).
+If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](/docs/charts.html#custom-tooltip).
 
 <ComponentPreview name="LineChartCustomTooltip"  />

pnpm-lock.yaml

@@ -141,6 +141,9 @@ importers:
       '@iconify-json/simple-icons':
         specifier: ^1.1.94
         version: 1.1.100
+      '@iconify-json/solar':
+        specifier: ^1.1.9
+        version: 1.1.9
       '@iconify-json/tabler':
         specifier: ^1.1.106
         version: 1.1.110
@@ -1292,6 +1295,9 @@ packages:
   '@iconify-json/simple-icons@1.1.100':
     resolution: {integrity: sha512-PoRbJcGMv2IQ0LMotLBFIiDhSdR3LjNFo/c4T2vCJjOl24I/DMtWt4ccUWEcAA5GJCt4/LTi8zlfztAeh1Jedw==}
 
+  '@iconify-json/solar@1.1.9':
+    resolution: {integrity: sha512-BcWzZqA02BiQduYizqU/J4v4RNs0MkjZUGpMbejpozH8YQSt3+S/LfV6zfVRonx/2DhXTVSqiLa1abDRAZtojQ==}
+
   '@iconify-json/tabler@1.1.110':
     resolution: {integrity: sha512-+0TbyNeQpFI2r+bjtbazGrpGskI3c9NTii/6HhWTS+/d5+PiLs6+wWJW0M9AU2ykew7zdMKB2WtyczFyjYzZIQ==}
 
@@ -8398,6 +8404,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/solar@1.1.9':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/tabler@1.1.110':
     dependencies:
       '@iconify/types': 2.0.0