wip

resources/js/Shared/Layout/AppLayout.vue

@@ -2,7 +2,7 @@
   <div class="min-h-full">
     <MainMenu />
     <main class="lg:ml-64 flex flex-col flex-1 py-8">
-      <div>
+      <div class="px-4">
         <slot />
       </div>
     </main>

resources/js/Shared/VacationChart.vue

@@ -0,0 +1,81 @@
+<template>
+  <v-chart
+    style="height: 600px;"
+    :option="option"
+  />
+</template>
+
+<script>
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { PieChart } from 'echarts/charts'
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+} from 'echarts/components'
+import VChart from 'vue-echarts'
+import {computed} from 'vue'
+
+use([
+  CanvasRenderer,
+  PieChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+])
+
+export default {
+  name: 'VacationChart',
+  components: {
+    VChart,
+  },
+  props: {
+    stats: {
+      type: Object,
+      default: () => ({
+        used: 0,
+        pending: 0,
+        remaining: 0,
+      }),
+    },
+  },
+  setup(props) {
+    const option = computed(() => ({
+      tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b} : {c} ({d}%)',
+      },
+      color: [
+        '#2C466F',
+        '#AABDDD',
+        '#527ABA',
+      ],
+      legend: {
+        orient: 'vertical',
+        left: 'left',
+        data: ['Wykorzystane', 'Rozpatrywane', 'Pozostałe'],
+      },
+      series: [
+        {
+          name: 'Urlop wypoczynkowy',
+          type: 'pie',
+          label: {
+            show: true,
+            textStyle: {
+              fontSize: 16,
+            },
+          },
+          data: [
+            { value: props.stats.used, name: 'Wykorzystane' },
+            { value: props.stats.pending, name: 'Rozpatrywane' },
+            { value: props.stats.remaining, name: 'Pozostałe' },
+          ],
+        },
+      ],
+    }))
+
+    return { option }
+  },
+}
+</script>