#43 - vacation summary for employee (#66)

* wip * wip * wip * wip * wip * wip * wip * #5 - bump dependencies * #43 - wip * #43 - add composer script * #43 - fix * #43 - fix * #43 - wip * #43 - ecs fix * #43 - cr fix * #43 - cr fix * #43 - fix Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
2022-03-03 09:03:17 +01:00
parent d825dd727f
commit 3d9726039c
69 changed files with 3122 additions and 1762 deletions
--- a/resources/js/Shared/VacationChart.vue
+++ b/resources/js/Shared/VacationChart.vue
@@ -0,0 +1,93 @@
+<template>
+  <v-chart
+    style="height: 600px;"
+    :autoresize="true"
+    :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',
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#fff',
+            borderWidth: 2,
+          },
+          label: {
+            show: true,
+            position: 'inner',
+            formatter: param => param.value !== 0 ? param.value : '' ,
+            fontWeight: 'bold',
+            fontSize: 16,
+            color: '#FFFFFF',
+            labelLine: {
+              show: false,
+            },
+          },
+          data: [
+            { value: props.stats.used, name: 'Wykorzystane' },
+            { value: props.stats.pending, name: 'Rozpatrywane' },
+            { value: props.stats.remaining, name: 'Pozostałe' },
+          ],
+          radius: ['30%', '70%'],
+        },
+      ],
+    }))
+
+    return { option }
+  },
+}
+</script>