1<template>
2 <div class="w-full h-full overflow-hidden">
3 <CardBase
4 :title="__('My Tickets')"
5 :text="chartData.total"
6 :percentageChange="chartData.percentageChange"
7 :chartConfig="chartConfig"
8 :currentDuration="currentDuration"
9 @changeDuration="changeDuration"
10 />
11 </div>
12</template>
13
14<script setup lang="ts">
15import { __ } from "@/translation";
16import type { LineChart } from "@/types";
17import { buildPercentageChange } from "@/utils";
18import { EChartsOption } from "echarts";
19import { createResource } from "frappe-ui";
20import { computed, onMounted, ref, type PropType } from "vue";
21import CardBase from "../../../components/ChartCardBase.vue";
22
23const props = defineProps({
24 data: {
25 type: Object as PropType<LineChart>,
26 required: true,
27 },
28});
29
30// the untranslated key: it is lowercased straight into the API period
31const currentDuration = ref("Last month");
32
33const chartColor = {
34 lineColor: "#5597F3",
35 gradientColor: { start: "#abccfc", end: "rgba(229,240,254,0)" },
36};
37
38const chartData = computed(() => {
39 const _data: LineChart = getAgentTicketsResource.fetched
40 ? getAgentTicketsResource.data
41 : props.data;
42
43 const _percentageChange = _data?.percentage_change || 0;
44 const total = _data?.total || 0;
45 const dates = _data?.data?.map((item) => item.date) || [];
46 const counts = _data?.data?.map((item) => item.count) || [];
47
48 const percentageChange = buildPercentageChange(_percentageChange);
49
50 return {
51 data: counts,
52 percentageChange,
53 total,
54 counts,
55 dates,
56 };
57});
58
59const chartConfig = computed<EChartsOption>(() => {
60 const color = chartColor.lineColor;
61 const gradientColor = chartColor.gradientColor;
62 return {
63 xAxis: {
64 type: "category",
65 data: chartData.value.dates,
66 show: false,
67 boundaryGap: false,
68 },
69 yAxis: {
70 type: "value",
71 show: false,
72 },
73 series: [
74 {
75 data: chartData.value.data,
76 type: "line",
77 symbol: "none",
78 lineStyle: {
79 width: 1.25,
80 },
81 areaStyle: {
82 opacity: 0.8,
83 color: {
84 type: "linear",
85 x: 0,
86 y: 0,
87 x2: 0,
88 y2: 1,
89 colorStops: [
90 {
91 offset: 0,
92 color: gradientColor.start,
93 },
94 {
95 offset: 1,
96 color: gradientColor.end,
97 },
98 ],
99 global: false,
100 },
101 },
102 },
103 ],
104 color: color,
105 grid: {
106 left: 2,
107 right: 2,
108 top: 2,
109 bottom: 2,
110 },
111 };
112});
113
114const getAgentTicketsResource = createResource({
115 url: "opendesk.api.agent_home.agent_home.get_agent_tickets",
116 type: "GET",
117 makeParams: () => {
118 return {
119 period: currentDuration.value.toLowerCase(),
120 };
121 },
122});
123
124const changeDuration = (period: string) => {
125 currentDuration.value = period;
126 getAgentTicketsResource.submit();
127};
128
129onMounted(() => {
130 if (!props.data?.data) {
131 getAgentTicketsResource.submit();
132 }
133});
134</script>
135