eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Charts (#88)

Browse Source 
* Charts

* Version bump

* Update pnpm-lock.yaml
This commit is contained in:
Adrian O.V
2023-08-21 15:29:24 -04:00
committed by GitHub
parent 27172c2a19
commit e1f4d791ae
7 changed files with 359 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/.vitepress/config.js
View File

@@ -45,6 +45,7 @@ export default {
{ text: 'Copy Code', link: '/components/copy-code' },
{ text: 'Notifications', link: '/components/notifications' },
{ text: 'Share Modal', link: '/components/share-modal' },
{ text: 'Analytics', link: '/components/analytics' },
],
},
],

108
docs/components/analytics.md Normal file
View File

@@ -0,0 +1,108 @@
# Analytics
<DemoContainer>
<LineChart
:data="{
labels: [
'2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05',
'2021-01-06', '2021-01-07', '2021-01-08', '2021-01-09', '2021-01-10',
'2021-01-11', '2021-01-12', '2021-01-13', '2021-01-14', '2021-01-15',
'2021-01-16', '2021-01-17'
],
data: [
{
title: 'Spirit',
color: 16711680,
data: [120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280],
},
{
title: 'Ad Astra',
color: 65280,
data: [150, 155, 160, 165, 170, 175, 180, 185, 190, 195, 200, 205, 210, 215, 220, 225, 230],
},
{
title: 'Tempad',
color: 255,
data: [180, 182, 184, 186, 188, 190, 192, 194, 196, 198, 200, 202, 204, 206, 208, 210, 212],
},
]
}"
/>
<PieChart
:data="{
title: 'Downloads',
data: [
{
title: 'Spirit',
color: 16711680, // Red in decimal (equivalent to #FF0000 in hexadecimal)
data: 120, // Example download numbers for the three dates
},
{
title: 'Ad Astra',
color: 65280, // Green in decimal (equivalent to #00FF00 in hexadecimal)
data: 150, // Example download numbers for the three dates
},
{
title: 'Tempad',
color: 255, // Blue in decimal (equivalent to #0000FF in hexadecimal)
data: 180, // Example download numbers for the three dates
},
],
}"
/>
</DemoContainer>
```vue
<LineChart
:formatLabel="(label) => doFormattingThings(label)"
:data="{
labels: [
'2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05',
'2021-01-06', '2021-01-07', '2021-01-08', '2021-01-09', '2021-01-10',
'2021-01-11', '2021-01-12', '2021-01-13', '2021-01-14', '2021-01-15',
'2021-01-16', '2021-01-17'
],
data: [
{
title: 'Spirit',
color: 16711680,
data: [120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280],
},
{
title: 'Ad Astra',
color: 65280,
data: [150, 155, 160, 165, 170, 175, 180, 185, 190, 195, 200, 205, 210, 215, 220, 225, 230],
},
{
title: 'Tempad',
color: 255,
data: [180, 182, 184, 186, 188, 190, 192, 194, 196, 198, 200, 202, 204, 206, 208, 210, 212],
},
]
}"
/>
```
```vue
<PieChart
:data="{
title: 'Downloads',
data: [
{
title: 'Spirit',
color: 16711680, // Red in decimal (equivalent to #FF0000 in hexadecimal)
data: 120, // Example download numbers for the three dates
},
{
title: 'Ad Astra',
color: 65280, // Green in decimal (equivalent to #00FF00 in hexadecimal)
data: 150, // Example download numbers for the three dates
},
{
title: 'Tempad',
color: 255, // Blue in decimal (equivalent to #0000FF in hexadecimal)
data: 180, // Example download numbers for the three dates
},
],
}"
/>
```