Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: improve chart doc

Browse Source
This commit is contained in:
zernonia 2024-05-01 10:38:50 +08:00
parent ec607fd461
commit 93e0f1c47e
8 changed files with 58 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
apps/www/.vitepress/theme/config/docs.ts
View File

@ -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: [],
},
],
},
{

1
apps/www/package.json
View File

@ -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",

35
apps/www/src/content/docs/charts/guide.md → apps/www/src/content/docs/charts.md
View File

@ -1,15 +1,46 @@
---
title: Guide
description: A simple guide to help setup chart components.
title: Charts
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>

4
apps/www/src/content/docs/charts/area.md
View File

@ -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" />

4
apps/www/src/content/docs/charts/bar.md
View File

@ -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" />

4
apps/www/src/content/docs/charts/donut.md
View File

@ -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" />

4
apps/www/src/content/docs/charts/line.md
View File

@ -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" />

10
pnpm-lock.yaml
View File

@ -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