From 5d95dd4fae98390e561dc706207af4edbaebff2a Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Fri, 19 Apr 2024 00:14:04 +0200
Subject: [PATCH] add dynamic charts to last 7 days card

---
 .../Dashboard/DayOverviewCardChart.vue        | 77 +++++++++++++++++++
 .../Dashboard/DayOverviewCardEntry.vue        | 68 +---------------
 .../Dashboard/LastSevenDaysCard.vue           |  1 +
 3 files changed, 82 insertions(+), 64 deletions(-)
 create mode 100644 resources/js/Components/Dashboard/DayOverviewCardChart.vue

diff --git a/resources/js/Components/Dashboard/DayOverviewCardChart.vue b/resources/js/Components/Dashboard/DayOverviewCardChart.vue
new file mode 100644
index 00000000..845e3f2b
--- /dev/null
+++ b/resources/js/Components/Dashboard/DayOverviewCardChart.vue
@@ -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>
diff --git a/resources/js/Components/Dashboard/DayOverviewCardEntry.vue b/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
index 8854a71e..e6c7a8da 100644
--- a/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
+++ b/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
@@ -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">
diff --git a/resources/js/Components/Dashboard/LastSevenDaysCard.vue b/resources/js/Components/Dashboard/LastSevenDaysCard.vue
index 66c35272..c594742b 100644
--- a/resources/js/Components/Dashboard/LastSevenDaysCard.vue
+++ b/resources/js/Components/Dashboard/LastSevenDaysCard.vue
@@ -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>