feat(dashboard): Adding stats (area, top, number) components

Signed-off-by: Binyamin Yawitz <316103+byawitz@users.noreply.github.com>

apps/dashboard/src/components/stats/AreaStats.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="col-md-6 col-xl-4 col-12">
+    <Card>
+      <CardBody>
+        <div class="d-flex">
+          <h3 class="card-title" v-text="title" />
+        </div>
+        <div class="row">
+          <div class="col">
+            <div ref="chart"></div>
+          </div>
+        </div>
+      </CardBody>
+    </Card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import ApexCharts from 'apexcharts';
+import Card from '@/components/layouts/Card.vue';
+import CardBody from '@/components/layouts/CardBody.vue';
+import { useI18n } from 'vue-i18n';
+import { useAppStore } from '@/stores/user';
+import DomHelper from '@/heplers/DomHelper';
+
+const props = defineProps({
+  title: { type: String, default: '' },
+  series: { type: Array, default: [] },
+  categories: { type: Array, default: [] }
+});
+
+const chart = ref();
+const { t } = useI18n();
+const { app } = useAppStore();
+
+const theme = computed(() => (app.theme === 'system' ? DomHelper.getTheme() : app.theme));
+
+onMounted(() => {
+  renderChart();
+});
+
+function renderChart() {
+  new ApexCharts(chart.value, {
+    theme: { mode: theme.value },
+    series: props.series,
+    chart: { background: 'transparent', height: 240, type: 'area', toolbar: { show: false } },
+    dataLabels: { enabled: false },
+    stroke: { curve: 'smooth' },
+    xaxis: {
+      type: 'date',
+      categories: props.categories
+    },
+    tooltip: { x: { format: t('dd/MM/yy') } }
+  }).render();
+}
+</script>

apps/dashboard/src/components/stats/NumberOf.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="col-sm-6 col-lg-3">
+    <div class="card card-sm">
+      <div class="card-body">
+        <div class="row align-items-center">
+          <div class="col-auto">
+            <span class="text-white avatar" :class="iconType">
+              <component :is="icon" />
+            </span>
+          </div>
+          <div class="col">
+            <div class="font-weight-medium">{{ number }} {{ title }}</div>
+            <div class="text-secondary">{{ subTitle }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+declare type iconType = 'bg-primary' | 'bg-green' | 'bg-red' | 'bg-blue' | 'bg-cyan';
+
+defineProps({
+  title: { type: String, default: '' },
+  number: { type: String, default: '' },
+  subTitle: { type: String, default: '' },
+  icon: { type: Object, default: {} },
+  iconType: { type: String as PropType<iconType>, default: 'bg-primary' }
+});
+</script>

apps/dashboard/src/components/stats/TopTen.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="col-md-6 col-xl-4 col-12">
+    <Card>
+      <CardBody>
+        <div class="d-flex">
+          <h3 class="card-title" v-text="title" />
+        </div>
+        <div class="row">
+          <div class="col">
+            <div ref="chart"></div>
+          </div>
+        </div>
+      </CardBody>
+    </Card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import ApexCharts from 'apexcharts';
+import Card from '@/components/layouts/Card.vue';
+import CardBody from '@/components/layouts/CardBody.vue';
+import { useAppStore } from '@/stores/user';
+import DomHelper from '@/heplers/DomHelper';
+
+const props = defineProps({
+  title: { type: String, default: '' },
+  series: { type: Array, default: [] },
+  categories: { type: Array, default: [] }
+});
+
+const chart = ref();
+const { app } = useAppStore();
+
+const theme = computed(() => (app.theme === 'system' ? DomHelper.getTheme() : app.theme));
+
+onMounted(() => {
+  renderChart();
+});
+
+function renderChart() {
+  new ApexCharts(chart.value, {
+    theme: { mode: theme.value },
+    series: [{ data: props.series }],
+    chart: {
+      background: 'transparent',
+      type: 'bar',
+      height: 240,
+      toolbar: { show: false }
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: 4,
+        horizontal: true
+      }
+    },
+    dataLabels: {
+      enabled: true
+    },
+    xaxis: { categories: props.categories }
+  }).render();
+}
+</script>

apps/dashboard/src/components/stats/__tests__/NumberOf.spec.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import NumberOf from '../NumberOf.vue';
+
+describe('Number Of', () => {
+  const wrapper = mount(NumberOf, { props: { title: 'Stats', subTitle: 'Sub Title', number: '13' } });
+
+  it('it render title with stats', () => {
+    expect(wrapper.text()).toContain('13 Stats');
+  });
+
+  it('it rendered sub title.', () => {
+    expect(wrapper.find('.text-secondary').text()).toContain('Sub Title');
+  });
+});