Solidtime/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-06-06 20:37:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

add dynamic charts to last 7 days card

Browse Source
This commit is contained in:
Gregor Vostrak
2024-04-19 00:14:04 +02:00
parent 4a89f22885
commit 5d95dd4fae
3 changed files with 82 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/Dashboard/DayOverviewCardChart.vue
+77
View File
@@ -0,0 +1,77 @@
<script setup lang="ts">
import VChart from 'vue-echarts';
import { ref } from 'vue';
const props = defineProps<{
history: number[];
}>();
const seriesData = props.history.map((el) => {
return {
value: Math.max(el, 10),
...{
itemStyle: {
borderWidth: 1,
borderColor: 'rgba(125,156,188,1)',
borderRadius: [2, 2, 0, 0],
color: 'rgba(125,156,188,1)',
},
},
};
});
const option = ref({
grid: {
top: 0,
right: 0,
left: 0,
bottom: 0,
},
backgroundColor: 'transparent',
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
markLine: {
lineStyle: {
color: 'rgba(125,156,188,0.1)',
type: 'dashed',
},
},
axisLine: {
lineStyle: {
color: 'transparent', // Set desired color here
},
},
axisLabel: {
fontSize: 16,
fontWeight: 600,
margin: 24,
fontFamily: 'Outfit, sans-serif',
},
axisTick: {
lineStyle: {
color: 'transparent', // Set desired color here
},
},
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: {
color: 'transparent', // Set desired color here
},
},
},
series: [
{
data: seriesData,
type: 'bar',
},
],
});
</script>
<template>
<v-chart style="height: 20px; width: 80px" class="chart" :option="option" />
</template>
<style scoped></style>
resources/js/Components/Dashboard/DayOverviewCardEntry.vue
+4 -64
View File
@@ -1,7 +1,10 @@
<script setup lang="ts">
import DayOverviewCardChart from '@/Components/Dashboard/DayOverviewCardChart.vue';
defineProps<{
date: string;
duration: number;
history: number[];
}>();
import {
formatHumanReadableDate,
@@ -18,70 +21,7 @@ import {
</p>
</div>
<div class="items-center justify-center flex-1 hidden @2xs:flex">
<svg
class="w-20 opacity-70 transition hover:opacity-100"
viewBox="0 0 42 10"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect
y="9.28572"
width="4.18367"
height="0.714286"
rx="0.357143"
fill="#B0D7FF"
fill-opacity="0.9" />
<rect
x="5.37939"
y="7.85715"
width="4.18367"
height="2.14286"
rx="0.714286"
fill="#B0D7FF"
fill-opacity="0.9" />
<rect
x="10.7578"
y="4.28572"
width="4.18367"
height="5.71429"
rx="0.714286"
fill="#B0D7FF"
fill-opacity="0.9" />
<rect
x="16.1372"
width="4.18367"
height="10"
rx="0.714286"
fill="#B0D7FF"
fill-opacity="0.9" />
<rect
width="4.18367"
height="6.42857"
rx="0.714286"
transform="matrix(1 0 0 -1 21.5161 10)"
fill="#B0D7FF"
fill-opacity="0.9" />
<rect
width="4.18367"
height="5"
rx="0.714286"
transform="matrix(1 0 0 -1 26.8955 10)"
fill="#B0D7FF"
fill-opacity="0.9" />
<rect
width="4.18367"
height="0.714286"
rx="0.357143"
transform="matrix(1 0 0 -1 32.2739 10)"
fill="#B0D7FF"
fill-opacity="0.9" />
<rect
width="4.18367"
height="0.714286"
rx="0.357143"
transform="matrix(1 0 0 -1 37.6533 10)"
fill="#B0D7FF"
fill-opacity="0.9" />
</svg>
<DayOverviewCardChart :history="history"></DayOverviewCardChart>
</div>
<div
class="flex text-sm items-center justify-center text-muted font-semibold">
resources/js/Components/Dashboard/LastSevenDaysCard.vue
+1
View File
@@ -18,6 +18,7 @@ defineProps<{
:class="last7Days.length === 7 ? 'last:border-0' : ''"
:key="day.date"
:date="day.date"
:history="day.history"
:duration="day.duration"></DayOverviewCardEntry>
</DashboardCard>
</template>