adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-14 19:22:14 +01: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

68
resources/js/Components/Dashboard/DayOverviewCardEntry.vue
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">