faet: add reports

package.json

@@ -28,6 +28,7 @@
   "dependencies": {
     "@iconify-json/solar": "^1.1.9",
     "@vueuse/core": "^10.7.2",
+    "apexcharts": "^3.48.0",
     "chroma-js": "^2.4.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

src/assets/tailwind.css

@@ -15,6 +15,12 @@
   }
 }
 
+@layer components {
+  .text-muted {
+    @apply text-neutral-400 dark:text-neutral-500;
+  }
+}
+
 :root {
   --topbar-height: 50px;
 }

src/assets/vendor.css

@@ -12,4 +12,27 @@
     @apply !bg-neutral-300 dark:!bg-neutral-700 w-[2px];
   }
 
+  .apexcharts-text {
+    @apply fill-neutral-500 dark:fill-neutral-400;
+  }
+
+  .apexcharts-tooltip {
+    @apply !bg-white dark:!bg-neutral-700 !border-neutral-200 dark:!border-neutral-700 !shadow-none;
+  }
+  .apexcharts-tooltip-title {
+    @apply !bg-neutral-100 dark:!bg-neutral-800 !border-none;
+  }
+
+  .apexcharts-gridline {
+    @apply !stroke-neutral-200 dark:!stroke-neutral-700;
+  }
+
+  .apexcharts-grid-borders line {
+    @apply !stroke-neutral-200 dark:!stroke-neutral-600;
+  }
+
+  .apexcharts-xaxis-tick {
+    @apply !stroke-neutral-200 dark:!stroke-neutral-600;
+  }
+
 }

src/main.ts

@@ -32,9 +32,9 @@ if (require('electron-squirrel-startup'))
 function createWindow() {
   const bounds = store.app.get('bounds')
   mainWindow = new BrowserWindow({
-    width: 900,
+    width: 1000,
     height: 600,
-    minWidth: 900,
+    minWidth: 1000,
     backgroundColor: nativeTheme.shouldUseDarkColors ? '#181818' : '#fff',
     ...bounds,
     titleBarStyle: 'hidden',

src/renderer/components/reports/Chart.vue

@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import type { ApexOptions } from 'apexcharts'
+import ApexCharts from 'apexcharts'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { ChevronLeft, ChevronRight, Dot } from 'lucide-vue-next'
+import { useReports } from '@/components/reports/composables'
+import { timeFormat } from '@/utils'
+
+const {
+  currentYearByRange,
+  range,
+  selectedRangeType,
+  setMonthRange,
+  setMonthRangeOffset,
+  setWeekRange,
+  setWeekRangeOffset,
+  setYearRange,
+  showRangeText,
+  xAxisLabels,
+  yAxis,
+} = useReports()
+
+const chartRef = ref<HTMLElement>()
+
+let chart: ApexCharts
+
+const options: ApexOptions = {
+  chart: {
+    height: '100%',
+    type: 'bar',
+    stacked: true,
+    toolbar: {
+      show: false,
+    },
+    animations: {
+      enabled: false,
+    },
+    background: 'transparent',
+  },
+  legend: {
+    show: false,
+  },
+  series: yAxis.value as [],
+  dataLabels: {
+    formatter: (val: number) => {
+      return timeFormat(val, false)
+    },
+  },
+  states: {
+    hover: {
+      filter: {
+        type: 'none',
+      },
+    },
+  },
+  fill: {
+    opacity: 1,
+  },
+  plotOptions: {
+    bar: {
+      horizontal: false,
+      dataLabels: {
+        total: {
+          enabled: true,
+          formatter: (val: any) => {
+            return val ? timeFormat(val, false) : ''
+          },
+        },
+      },
+    },
+  },
+  tooltip: {
+    custom: ({ series, seriesIndex, dataPointIndex, w }) => {
+      const name = w.globals.seriesNames[seriesIndex] as string[]
+      const taskName = name[0]
+      const folderName = name[1] || ''
+      const color = w.globals.colors[seriesIndex]
+      const duration = timeFormat(series[seriesIndex][dataPointIndex], false)
+
+      return `
+        <div class="bg-white dark:bg-neutral-700 rounded min-w-24 border-none">
+          <div class="py-1 px-2 text-md font-semibold bg-neutral-100 dark:bg-neutral-800">
+            ${taskName}
+          </div>
+          <div class="py-1 px-2 flex items-center gap-2">
+            <div class="h-2.5 w-2.5 rounded-full relative -top-[1px]" style="background-color: ${color}"></div>
+            <div class="text-xs">
+              <div>
+                ${folderName}
+              </div>
+              <div class="font-semibold">
+                ${duration}
+              </div>
+            </div>
+          </div>
+        </div>
+      `
+    },
+  },
+  xaxis: {
+    categories: xAxisLabels.value,
+  },
+  yaxis: {
+    labels: {
+      formatter: (val: number) => {
+        return timeFormat(val, false)
+      },
+    },
+  },
+}
+
+function createChart() {
+  chart = new ApexCharts(chartRef.value, options)
+  chart.render()
+}
+
+watch(
+  range,
+  () => {
+    chart.updateOptions({
+      xaxis: {
+        categories: xAxisLabels.value,
+      },
+    })
+    chart.updateSeries(yAxis.value as [])
+  },
+  { deep: true },
+)
+
+watch(selectedRangeType, (v) => {
+  const options: ApexOptions = {
+    dataLabels: {
+      enabled: v === 'week',
+    },
+    plotOptions: {
+      bar: {
+        dataLabels: {
+          total: {
+            style: {
+              fontSize: v === 'month' ? '9px' : '12px',
+            },
+          },
+        },
+      },
+    },
+  }
+
+  chart.updateOptions(options)
+})
+
+onMounted(() => {
+  createChart()
+})
+
+onBeforeUnmount(() => {
+  chart.destroy()
+})
+
+function onPrev() {
+  if (selectedRangeType.value === 'week')
+    setWeekRangeOffset(-7)
+
+  if (selectedRangeType.value === 'month')
+    setMonthRangeOffset(-1)
+
+  if (selectedRangeType.value === 'year')
+    setYearRange(currentYearByRange.value - 1)
+}
+
+function onNext() {
+  if (selectedRangeType.value === 'week')
+    setWeekRangeOffset(7)
+
+  if (selectedRangeType.value === 'month')
+    setMonthRangeOffset(1)
+
+  if (selectedRangeType.value === 'year')
+    setYearRange(currentYearByRange.value + 1)
+}
+
+function onReset() {
+  if (selectedRangeType.value === 'week')
+    setWeekRange()
+
+  if (selectedRangeType.value === 'month')
+    setMonthRange()
+
+  if (selectedRangeType.value === 'year')
+    setYearRange(new Date().getFullYear())
+}
+</script>
+
+<template>
+  <div data-reports-chart>
+    <div
+      data-date-actions
+      class="h-[30px] flex items-center gap-2"
+    >
+      <div>
+        <UiButton
+          variant="ghost"
+          @click="onPrev"
+        >
+          <ChevronLeft class="w-4 h-4" />
+        </UiButton>
+        <UiButton
+          variant="ghost"
+          @click="onReset"
+        >
+          <Dot class="w-4 h-4" />
+        </UiButton>
+        <UiButton
+          variant="ghost"
+          @click="onNext"
+        >
+          <ChevronRight class="w-4 h-4" />
+        </UiButton>
+      </div>
+      <div class="text-lg font-bold">
+        {{ showRangeText }}
+      </div>
+    </div>
+    <div
+      ref="chartRef"
+      class="h-[calc(100vh-125px)]"
+    />
+  </div>
+</template>

src/renderer/components/reports/Info.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { useReports } from '@/components/reports/composables'
+import { timeFormat } from '@/utils'
+import type { TaskWithRecords } from '~/services/api/types'
+
+const { tasksFilteredByRange, totalDuration, totalCost, selectedTotalType }
+  = useReports()
+
+function calcDuration(task: TaskWithRecords) {
+  return timeFormat(
+    task.records.reduce((acc, record) => acc + record.duration, 0),
+    false,
+  )
+}
+
+function calcCost(task: TaskWithRecords) {
+  const cost
+    = task.records.reduce(
+      (acc, record) => acc + record.duration * task.hourRate,
+      0,
+    ) / 3600
+  return cost.toFixed(2)
+}
+</script>
+
+<template>
+  <div
+    data-reports-info
+    class="flex flex-col justify-between flex-grow"
+  >
+    <div class="flex flex-col flex-grow">
+      <PerfectScrollbar
+        data-scroll
+        class="flex-grow h-1"
+      >
+        <div
+          v-for="i in tasksFilteredByRange"
+          :key="i.id"
+          class="flex items-center justify-between gap-2 px-2 py-[2px] text-xs"
+        >
+          <div class="flex items-center gap-2">
+            <div
+              class="h-4 w-[3px]"
+              :style="{ backgroundColor: i.color }"
+            />
+            <div>
+              {{ i.name }}
+            </div>
+          </div>
+
+          <div class="tabular-nums text-muted">
+            <span v-if="selectedTotalType === 'rate'">
+              ${{ calcCost(i) }}
+            </span>
+            <span v-else>
+              {{ calcDuration(i) }}
+            </span>
+          </div>
+        </div>
+      </PerfectScrollbar>
+    </div>
+    <div class="px-2 pb-2 border-t border-neutral-200 dark:border-neutral-700">
+      <div class="text-right text-muted text-[10px] uppercase mt-2">
+        Summary
+      </div>
+      <div class="flex gap-4 justify-end text-xl">
+        <div>${{ totalCost }}</div>
+        <div>
+          {{ timeFormat(totalDuration, false) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>