Skip to content
This repository has been archived by the owner on Aug 28, 2024. It is now read-only.

Improved graphs #120

Merged
merged 15 commits into from
Oct 26, 2023
Merged

Improved graphs #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
fb0edbf
Complete chart overhaul
CodexAdrian Oct 26, 2023
7f468c3
Merge branch 'master' into improved-graphs
CodexAdrian Oct 26, 2023
20c82a4
Update package.json
CodexAdrian Oct 26, 2023
7c9fefb
Update pnpm-lock.yaml
CodexAdrian Oct 26, 2023
bddd6ae
run lint
CodexAdrian Oct 26, 2023
c5f0605
whoops
CodexAdrian Oct 26, 2023
90ca0b7
Update pnpm-lock.yaml
CodexAdrian Oct 26, 2023
6cd27bb
Update analytics.md
CodexAdrian Oct 26, 2023
89bf3e1
Try again?
CodexAdrian Oct 26, 2023
ff92554
Update Chart.vue
CodexAdrian Oct 26, 2023
d63f771
Added Compact/Spark charts
CodexAdrian Oct 26, 2023
fff5949
Added number formatting and cleanup
CodexAdrian Oct 26, 2023
a1926a9
Touch ups
CodexAdrian Oct 26, 2023
e05aae1
improve default colors
CodexAdrian Oct 26, 2023
c2a4d50
removed unnecessary tooltip
CodexAdrian Oct 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
282 changes: 157 additions & 125 deletions docs/components/analytics.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,136 +2,168 @@

<DemoContainer>
<client-only>
<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],
},
]
}"
/>
<BarChart
: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
},
],
}"
/>
<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
<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],
},
]
}"
/>
<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
<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
},
],
}"
<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"
/>
```
1 change: 1 addition & 0 deletions lib/assets/icons/zoom-in.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions lib/assets/icons/zoom-out.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions lib/assets/styles/defaults.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,13 @@ svg {
width: 1em;
}

.chart {
svg {
height: 100%;
width: 100%;
}
}

.button-animation {
transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
outline 0.2s ease-in-out;
Expand Down
Loading