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

Commit

Permalink
Improved graphs (#120)
Browse files Browse the repository at this point in the history 
* Complete chart overhaul

* Update package.json

* Update pnpm-lock.yaml

* run lint

* whoops

* Update pnpm-lock.yaml

* Update analytics.md

* Try again?

* Update Chart.vue

* Added Compact/Spark charts

* Added number formatting and cleanup

* Touch ups

* improve default colors

* removed unnecessary tooltip
  • Loading branch information
@CodexAdrian
CodexAdrian authored Oct 26, 2023
1 parent 16a39b3 commit c056c4e
Show file tree
Hide file tree
Showing 12 changed files with 954 additions and 493 deletions.
282 changes: 157 additions & 125 deletions docs/components/analytics.md
View file
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
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
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
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

0 comments on commit c056c4e

Please sign in to comment.