Skip to content

Commit b1d9f61

Browse files
quangtuanitmo18quangtuanitmo18
committed
feat: add componets chart and animatedCounter
1 parent 83002cf commit b1d9f61

12 files changed

Lines changed: 1354 additions & 0 deletions

File tree

‎@codexteam/ui/dev/Playground.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -223,6 +223,16 @@ const pages = computed(() => [
223223
onActivate: () => router.push('/components/confirm'),
224224
isActive: route.path === '/components/confirm',
225225
},
226+
{
227+
title: 'Counter',
228+
onActivate: () => router.push('/components/counter'),
229+
isActive: route.path === '/components/counter',
230+
},
231+
{
232+
title: 'Chart',
233+
onActivate: () => router.push('/components/chart'),
234+
isActive: route.path === '/components/chart',
235+
},
226236
],
227237
},
228238
]);

‎@codexteam/ui/dev/pages/components/Chart.vue‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<template>
2+
<PageHeader>
3+
Chart
4+
<template #description>
5+
A component for displaying line charts with smooth curves and interactive tooltips.
6+
</template>
7+
</PageHeader>
8+
9+
<Heading :level="3">
10+
Single Line Chart
11+
</Heading>
12+
13+
<div class="charts">
14+
<div class="charts__showcase">
15+
<Chart
16+
:lines="[singleLine]"
17+
detalization="days"
18+
/>
19+
</div>
20+
</div>
21+
22+
<Heading :level="3">
23+
Multiple Lines Chart
24+
</Heading>
25+
26+
<div class="charts">
27+
<div class="charts__showcase">
28+
<Chart
29+
:lines="multipleLines"
30+
detalization="days"
31+
/>
32+
</div>
33+
</div>
34+
</template>
35+
36+
<script setup lang="ts">
37+
import PageHeader from '../../components/PageHeader.vue';
38+
import { Chart, ChartLineColor, Heading } from '../../../src/vue';
39+
import type { ChartItem, ChartLine } from '../../../src/vue/components/chart';
40+
41+
/**
42+
* Generate sample data for a given number of days
43+
*
44+
* @param days Number of days to generate data for.
45+
* @param baseValue Base value used to scale the random counts (default: 100).
46+
*/
47+
function generateData(days: number, baseValue: number = 100): ChartItem[] {
48+
const now = Math.floor(Date.now() / 1000);
49+
const dayInSeconds = 86400;
50+
51+
return Array.from({ length: days }, (_, i) => ({
52+
timestamp: now - (days - i) * dayInSeconds,
53+
count: Math.floor(Math.random() * baseValue) + Math.floor(baseValue / 2),
54+
}));
55+
}
56+
57+
/**
58+
* Single line chart data
59+
*/
60+
const singleLine: ChartLine = {
61+
label: 'events',
62+
data: generateData(30, 200),
63+
color: ChartLineColor.Red,
64+
};
65+
66+
/**
67+
* Multiple lines chart data
68+
*/
69+
const multipleLines: ChartLine[] = [
70+
{
71+
label: 'accepted',
72+
data: generateData(30, 150),
73+
color: ChartLineColor.Red,
74+
},
75+
{
76+
label: 'rate-limited',
77+
data: generateData(30, 50),
78+
color: ChartLineColor.LightGrey,
79+
},
80+
];
81+
</script>
82+
83+
<style scoped>
84+
.charts {
85+
display: grid;
86+
grid-template-columns: 1fr;
87+
gap: var(--spacing-l);
88+
margin-bottom: var(--spacing-xl);
89+
&__showcase {
90+
width: 100%;
91+
height: 200px;
92+
background-color: var(--base--bg-secondary);
93+
border-radius: var(--radius-m);
94+
padding: var(--spacing-m);
95+
}
96+
}
97+
</style>

‎@codexteam/ui/dev/pages/components/Counter.vue‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<PageHeader>
3+
Counter
4+
<template #description>
5+
A component that animates value changes with a smooth slide transition effect.
6+
</template>
7+
</PageHeader>
8+
9+
<div class="counters">
10+
<div class="counters__value">
11+
<Counter :value="animatedValue" />
12+
</div>
13+
<div class="counters__btn">
14+
<Button
15+
16+
@click="animatedValue += 100"
17+
>
18+
+100
19+
</Button>
20+
<Button
21+
22+
@click="animatedValue -= 100"
23+
>
24+
-100
25+
</Button>
26+
<Button
27+
secondary
28+
@click="animatedValue = 0"
29+
>
30+
Reset
31+
</Button>
32+
</div>
33+
</div>
34+
</template>
35+
36+
<script setup lang="ts">
37+
import { ref } from 'vue';
38+
import PageHeader from '../../components/PageHeader.vue';
39+
import { Counter, Button } from '../../../src/vue';
40+
41+
const animatedValue = ref(100);
42+
43+
</script>
44+
45+
<style scoped>
46+
.counters {
47+
display: grid;
48+
grid-template-columns: repeat(2, max-content);
49+
gap: var(--spacing-xxl);
50+
align-items: center;
51+
&__value{
52+
width: 3rem;
53+
}
54+
&__btn{
55+
display: flex;
56+
gap: var(--spacing-m);
57+
align-items: center;
58+
}
59+
}
60+
61+
</style>

‎@codexteam/ui/dev/routes.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ import Editor from './pages/components/Editor.vue';
3030
import ThemePreview from './pages/components/ThemePreview.vue';
3131
import Popup from './pages/components/Popup.vue';
3232
import Confirm from './pages/components/Confirm.vue';
33+
import Counter from './pages/components/Counter.vue';
34+
import Chart from './pages/components/Chart.vue';
3335
import Navbar from './pages/layout/Navbar.vue';
3436
import PageBlock from './pages/layout/PageBlock.vue';
3537

@@ -157,6 +159,14 @@ const routes: RouteRecordRaw[] = [
157159
path: '/components/confirm',
158160
component: Confirm as Component,
159161
},
162+
{
163+
path: '/components/counter',
164+
component: Counter as Component,
165+
},
166+
{
167+
path: '/components/chart',
168+
component: Chart as Component,
169+
},
160170
{
161171
path: '/layout/navbar',
162172
component: Navbar as Component,

‎@codexteam/ui/src/vue/components/chart/Chart.colors.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { ChartLineColor } from './Chart.types';
2+
import type { ChartLineColors } from './Chart.types';
3+
4+
/**
5+
* Colors set for several chart lines
6+
*/
7+
export const chartColors: ChartLineColors[] = [
8+
{
9+
name: ChartLineColor.LightGrey,
10+
strokeStart: 'rgba(75, 90, 121, 0.33)',
11+
strokeEnd: 'rgba(71, 72, 85, 0.16)',
12+
fillStart: 'rgba(63, 136, 255, 0.01)',
13+
fillEnd: 'rgba(66, 78, 93, 0.05)',
14+
pointerColor: '#717289',
15+
},
16+
{
17+
name: ChartLineColor.Red,
18+
strokeStart: '#FF2E51',
19+
strokeEnd: '#424565',
20+
fillStart: 'rgba(255, 46, 81, 0.3)',
21+
fillEnd: 'rgba(66, 69, 101, 0)',
22+
pointerColor: '#FF2E51',
23+
},
24+
];

‎@codexteam/ui/src/vue/components/chart/Chart.types.ts‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/**
2+
* Name of the color for the chart line stroke and fill.
3+
*/
4+
export enum ChartLineColor {
5+
/**
6+
* Accent color for primary line
7+
*/
8+
Red = 'red',
9+
10+
/**
11+
* Accent color for secondary line
12+
*/
13+
LightGrey = 'light-grey'
14+
}
15+
16+
/**
17+
* Chart element in common case
18+
*/
19+
export interface ChartItem {
20+
/**
21+
* Day midnight
22+
*/
23+
timestamp: number;
24+
25+
/**
26+
* How many events occurred in that day
27+
*/
28+
count: number;
29+
}
30+
31+
/**
32+
* Chart line with label and data points
33+
*/
34+
export interface ChartLine {
35+
/**
36+
* Series label (e.g., "accepted", "rate-limited")
37+
*/
38+
label: string;
39+
40+
/**
41+
* Data points for the series
42+
*/
43+
data: ChartItem[];
44+
45+
/**
46+
* Name of the color for the line stroke and fill.
47+
*/
48+
color?: ChartLineColor;
49+
}
50+
51+
/**
52+
* A particular color params
53+
*/
54+
export interface ChartLineColors {
55+
/**
56+
* Name of the color
57+
*/
58+
name: ChartLineColor;
59+
/**
60+
* Starting color for stroke gradient (top)
61+
*/
62+
strokeStart: string;
63+
/**
64+
* Ending color for stroke gradient (bottom)
65+
*/
66+
strokeEnd: string;
67+
/**
68+
* Starting color for fill gradient (top, with opacity)
69+
*/
70+
fillStart: string;
71+
/**
72+
* Ending color for fill gradient (bottom, usually transparent)
73+
*/
74+
fillEnd: string;
75+
76+
/**
77+
* Pointer + legend color
78+
*/
79+
pointerColor: string;
80+
}

0 commit comments

Comments
 (0)