170 lines
5.8 KiB
Markdown
170 lines
5.8 KiB
Markdown
# Analytics
|
|
|
|
<DemoContainer>
|
|
<client-only>
|
|
<Chart
|
|
name="Chart"
|
|
type="bar"
|
|
:stacked="true"
|
|
: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="[
|
|
{
|
|
name: 'Spirit',
|
|
data: [120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280],
|
|
},
|
|
{
|
|
name: 'Ad Astra',
|
|
data: [150, 155, 160, 165, 170, 175, 180, 185, 190, 195, 200, 205, 210, 215, 220, 225, 230],
|
|
},
|
|
{
|
|
name: 'Tempad',
|
|
data: [180, 182, 184, 186, 188, 190, 192, 194, 196, 198, 200, 202, 204, 206, 208, 210, 212],
|
|
},
|
|
]"
|
|
:colors="['#FF0000', '#00FF00', '#0000FF']"
|
|
suffix="<svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' /></svg>"
|
|
/>
|
|
</client-only>
|
|
</DemoContainer>
|
|
<DemoContainer>
|
|
<client-only>
|
|
<Chart
|
|
name="Chart"
|
|
type="line"
|
|
: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="[
|
|
{
|
|
name: 'Spirit',
|
|
data: [120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 1280],
|
|
},
|
|
{
|
|
name: 'Ad Astra',
|
|
data: [150, 155, 160, 165, 170, 175, 180, 185, 190, 195, 200, 205, 210, 215, 220, 225, 1230],
|
|
},
|
|
{
|
|
name: 'Tempad',
|
|
data: [180, 182, 184, 186, 188, 190, 192, 194, 196, 198, 200, 202, 204, 206, 208, 210, 212],
|
|
},
|
|
]"
|
|
:colors="['#FF0000', '#00FF00', '#0000FF']"
|
|
suffix="<svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' /></svg>"
|
|
/>
|
|
</client-only>
|
|
</DemoContainer>
|
|
<DemoContainer>
|
|
<client-only>
|
|
<Chart
|
|
name="Chart"
|
|
: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="[
|
|
{
|
|
name: 'Downloads',
|
|
data: [120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280],
|
|
},
|
|
{
|
|
name: 'Revenue',
|
|
data: [150, 155, 160, 165, 170, 175, 180, 185, 190, 195, 200, 205, 210, 215, 220, 225, 230],
|
|
},
|
|
{
|
|
name: 'Page views',
|
|
data: [180, 182, 184, 186, 188, 190, 192, 194, 196, 198, 200, 202, 204, 206, 208, 210, 212],
|
|
},
|
|
]"
|
|
hide-total
|
|
suffix="<svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' /></svg>"
|
|
>
|
|
Slot for title stuff
|
|
<Chips :items="['option 1', 'option 3']" />
|
|
<template #toolbar>
|
|
<Button>
|
|
<PlusIcon />
|
|
Slot for toolbar stuff
|
|
</Button>
|
|
</template>
|
|
</Chart>
|
|
</client-only>
|
|
</DemoContainer>
|
|
<DemoContainer>
|
|
<client-only>
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap-md);">
|
|
<CompactChart
|
|
v-for="i in 4"
|
|
title="Downloads"
|
|
value="10,230"
|
|
: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="[
|
|
{
|
|
name: 'Downloads',
|
|
data: [240, 180, 210, 160, 250, 130, 220, 270, 120, 260, 200, 230, 140, 280, 190, 150, 170],
|
|
}
|
|
]"
|
|
suffix="<svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' /></svg>"
|
|
/>
|
|
</div>
|
|
</client-only>
|
|
</DemoContainer>
|
|
|
|
```vue
|
|
<Chart
|
|
name="Chart name"
|
|
:labels="['array', 'of', 'labels', 'for', 'x-axis', 'typically', 'dates']"
|
|
:data="[
|
|
{
|
|
name: 'Spirit',
|
|
data: ['array', 'of', 'data', 'equal', 'length', 'to', 'x-axis'],
|
|
},
|
|
...
|
|
]"
|
|
:colors="['array', 'of', 'colors', 'for', 'each', 'series/dataset']"
|
|
prefix="string or svg icon to append to each data point"
|
|
suffix="string or svg icon to append to each data point"
|
|
type="bar|line"
|
|
:stacked="true|false (default: false) (determines whether or not values overlap/sidebyside instead of stacked)"
|
|
:hideTotal="true|false (default: false) (hide total value in tooltip)"
|
|
:hideToolbar="true|false (default: false) (hide toolbar)"
|
|
:hideLegend="true|false (default: false) (hide legend)"
|
|
>
|
|
... slot for title stuff
|
|
<template #toolbar>
|
|
... slot for toolbar stuff
|
|
</template>
|
|
</Chart>
|
|
```
|
|
|
|
```vue
|
|
<CompactChart
|
|
title="Chart title"
|
|
value="Chart value"
|
|
:labels="['array', 'of', 'labels', 'for', 'x-axis', 'typically', 'dates']"
|
|
:data="[
|
|
{
|
|
name: 'Spirit',
|
|
data: ['array', 'of', 'data', 'equal', 'length', 'to', 'x-axis'],
|
|
},
|
|
...
|
|
]"
|
|
prefix="string or svg icon to append to each data point"
|
|
suffix="string or svg icon to append to each data point"
|
|
/>
|
|
```
|