Skip to content

Commit 31d3973

Browse files
ivictborivictbor
committed
feat: enhance dashboard layout and add new charts for apartment data
1 parent 2d6a728 commit 31d3973

1 file changed

Lines changed: 102 additions & 100 deletions

File tree

‎live-demo/app/custom/Dashboard.vue‎

Lines changed: 102 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,120 @@
11
<template>
22
<div class="px-4 py-4 bg-blue-50 dark:bg-gray-900 dark:shadow-none min-h-screen">
33

4-
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
5-
<div class="max-w-md w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5 flex flex-col justify-between" v-if="data">
6-
<div>
7-
<h5 class="leading-none text-3xl font-bold text-gray-900 dark:text-white pb-2">{{ data.totalAparts }}</h5>
8-
<p class="text-base font-normal text-gray-500 dark:text-gray-400">{{ $t('Apartment last 7 days | Apartments last 7 days', data.totalAparts) }}</p>
4+
<div class="flex flex-wrap gap-4">
5+
<div class="flex min-w-[18rem] flex-[1_1_40rem] flex-wrap content-start gap-4">
6+
<div class="min-w-[18rem] flex-[1_1_18rem] bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5 flex flex-col justify-between" v-if="data">
7+
<div>
8+
<h5 class="leading-none text-3xl font-bold text-gray-900 dark:text-white pb-2">{{ data.totalAparts }}</h5>
9+
<p class="text-base font-normal text-gray-500 dark:text-gray-400">{{ $t('Apartment last 7 days | Apartments last 7 days', data.totalAparts) }}</p>
10+
</div>
11+
<BarChart
12+
:data="apartsCountsByDaysChart"
13+
:series="[{
14+
name: $t('Added apartments'),
15+
fieldName: 'count',
16+
color: COLORS[0],
17+
}]"
18+
:options="{
19+
chart: {
20+
height: 130,
21+
},
22+
yaxis: {
23+
stepSize: 1,
24+
labels: { show: false },
25+
},
26+
grid: {
27+
show: false,
28+
}
29+
}"
30+
/>
931
</div>
10-
<BarChart
11-
:data="apartsCountsByDaysChart"
12-
:series="[{
13-
name: $t('Added apartments'),
14-
fieldName: 'count',
15-
color: COLORS[0],
16-
}]"
17-
:options="{
18-
chart: {
19-
height: 130,
20-
},
21-
yaxis: {
22-
stepSize: 1,
23-
labels: { show: false },
24-
},
25-
grid: {
26-
show: false,
27-
}
28-
}"
29-
/>
30-
</div>
3132

32-
<div class="max-w-md w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5" v-if="data">
33-
<p class="text-base font-normal text-gray-500 dark:text-gray-400">{{ $t('Top countries') }}</p>
34-
<PieChart
35-
:data="topCountries"
36-
:options="{
37-
chart: { type: 'pie'},
38-
legend: {
39-
show: false,
40-
},
41-
dataLabels: {
42-
enabled: true,
43-
formatter: function (value, o) {
44-
const countryISO = o.w.config.labels[o.seriesIndex];
45-
return countryISO;
46-
}
33+
<div class="min-w-[18rem] flex-[1_1_18rem] bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5" v-if="data">
34+
<p class="text-base font-normal text-gray-500 dark:text-gray-400">{{ $t('Top countries') }}</p>
35+
<PieChart
36+
:data="topCountries"
37+
:options="{
38+
chart: { type: 'pie'},
39+
legend: {
40+
show: false,
41+
},
42+
dataLabels: {
43+
enabled: true,
44+
formatter: function (value, o) {
45+
const countryISO = o.w.config.labels[o.seriesIndex];
46+
return countryISO;
47+
}
48+
},
49+
}"
50+
/>
51+
</div>
52+
53+
<div class="min-w-[18rem] flex-[1_1_18rem] bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5" v-if="data">
54+
<p class="text-base font-normal text-gray-500 dark:text-gray-400">{{ $t('Apartment by rooms') }}</p>
55+
<PieChart
56+
:data="apartsCountsByRooms"
57+
:options="{
58+
chart: { type: 'donut', height: 250 },
59+
plotOptions: {
60+
pie: {
61+
donut: {
62+
labels: {
63+
total: {
64+
show: true,
65+
label: $t('Total square'),
66+
formatter: () => `${data.totalSquareMeters.toFixed(0)} m²`,
67+
},
68+
},
69+
},
70+
},
71+
},
72+
}"
73+
/>
74+
</div>
75+
76+
<div class="min-w-[18rem] flex-[1_1_18rem] bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5" v-if="data">
77+
<p class="text-base font-normal text-gray-500 dark:text-gray-400">{{ $t('Unlisted vs Listed price' ) }}</p>
78+
79+
<AreaChart
80+
:data="listedVsUnlistedPriceByDays"
81+
:series="[{
82+
name: $t('Listed'),
83+
fieldName: 'listedPrice',
84+
color: COLORS[0],
4785
},
48-
}"
49-
/>
86+
{
87+
name: $t('Unlisted'),
88+
fieldName: 'unlistedPrice',
89+
color: COLORS[1],
90+
}]"
91+
:options="{
92+
chart: {
93+
height: 250,
94+
},
95+
yaxis: {
96+
labels: {
97+
formatter: function (value) {
98+
return '$' + value;
99+
}
100+
}
101+
},
102+
}"
103+
/>
104+
</div>
50105
</div>
51106

52-
<div class="w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5 lg:row-span-2 xl:col-span-2" v-if="data">
53-
<div class="grid grid-cols-2 py-3">
54-
<dl>
107+
<div class="min-w-[24rem] flex-[1_1_32rem] bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5" v-if="data">
108+
<div class="flex flex-wrap gap-4 py-3">
109+
<dl class="min-w-[12rem] flex-1">
55110
<dt class="text-base font-normal text-gray-500 dark:text-gray-400 pb-1">{{ $t('Listed price') }}</dt>
56111
<dd class="leading-none text-xl font-bold dark:text-green-400" :style="{color:COLORS[0]}">{{
57112
new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0, }).format(
58113
data.totalListedPrice,
59114
) }}
60115
</dd>
61116
</dl>
62-
<dl>
117+
<dl class="min-w-[12rem] flex-1">
63118
<dt class="text-base font-normal text-gray-500 dark:text-gray-400 pb-1">{{ $t('Unlisted price') }}</dt>
64119
<dd class="leading-none text-xl font-bold dark:text-red-500" :style="{color:COLORS[1]}">{{
65120
new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0, }).format(
@@ -105,59 +160,6 @@
105160

106161
</div>
107162

108-
<div class="max-w-md w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5" v-if="data">
109-
<p class="text-base font-normal text-gray-500 dark:text-gray-400">{{ $t('Apartment by rooms') }}</p>
110-
<PieChart
111-
:data="apartsCountsByRooms"
112-
:options="{
113-
chart: { type: 'donut', height: 250 },
114-
plotOptions: {
115-
pie: {
116-
donut: {
117-
labels: {
118-
total: {
119-
show: true,
120-
label: $t('Total square'),
121-
formatter: () => `${data.totalSquareMeters.toFixed(0)} m²`,
122-
},
123-
},
124-
},
125-
},
126-
},
127-
}"
128-
/>
129-
</div>
130-
131-
<div class="max-w-md w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5" v-if="data">
132-
<p class="text-base font-normal text-gray-500 dark:text-gray-400">{{ $t('Unlisted vs Listed price' ) }}</p>
133-
134-
<AreaChart
135-
:data="listedVsUnlistedPriceByDays"
136-
:series="[{
137-
name: $t('Listed'),
138-
fieldName: 'listedPrice',
139-
color: COLORS[0],
140-
},
141-
{
142-
name: $t('Unlisted'),
143-
fieldName: 'unlistedPrice',
144-
color: COLORS[1],
145-
}]"
146-
:options="{
147-
chart: {
148-
height: 250,
149-
},
150-
yaxis: {
151-
labels: {
152-
formatter: function (value) {
153-
return '$' + value;
154-
}
155-
}
156-
},
157-
}"
158-
/>
159-
</div>
160-
161163
</div>
162164

163165
</div>

0 commit comments

Comments
 (0)