Skip to content

Commit 8e917b0

Browse files
ivictborivictbor
authored
Merge pull request #564 from devforth/feature/AdminForth/1440/docs-dashboard-demo-gives-this
fix: refactor example ./custom/Dashboard.vue for better visibility
2 parents 0a2cff0 + 4c4e525 commit 8e917b0

1 file changed

Lines changed: 31 additions & 19 deletions

File tree

‎adminforth/documentation/docs/tutorial/03-Customization/06-customPages.md‎

Lines changed: 31 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ Create a Vue component in the `custom` directory of your project, e.g. `Dashboar
1717
<div class="px-4 py-4 bg-blue-50 dark:bg-gray-900 dark:shadow-none min-h-screen">
1818

1919
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
20-
<div class="max-w-md w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5" v-if="data">
21-
<div>
20+
<div class="w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5 min-h-[340px]" v-if="data">
21+
<div class="mb-2">
2222
<h5 class="leading-none text-3xl font-bold text-gray-900 dark:text-white pb-2">{{ data.totalAparts }}</h5>
2323
<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>
2424
</div>
@@ -31,7 +31,7 @@ Create a Vue component in the `custom` directory of your project, e.g. `Dashboar
3131
}]"
3232
:options="{
3333
chart: {
34-
height: 130,
34+
height: 180,
3535
},
3636
yaxis: {
3737
stepSize: 1,
@@ -44,12 +44,16 @@ Create a Vue component in the `custom` directory of your project, e.g. `Dashboar
4444
/>
4545
</div>
4646

47-
<div class="max-w-md w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5" v-if="data">
48-
<p class="text-base font-normal text-gray-500 dark:text-gray-400">{{ $t('Top countries') }}</p>
47+
<div class="w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5 min-h-[340px]" v-if="data">
48+
<p class="text-base font-normal text-gray-500 dark:text-gray-400 mb-3 text-center">
49+
{{ $t('Top countries') }}
50+
</p>
51+
52+
<div class="flex justify-center items-center">
4953
<PieChart
5054
:data="topCountries"
5155
:options="{
52-
chart: { type: 'pie'},
56+
chart: { type: 'pie', height: 300 },
5357
legend: {
5458
show: false,
5559
},
@@ -63,20 +67,26 @@ Create a Vue component in the `custom` directory of your project, e.g. `Dashboar
6367
}"
6468
/>
6569
</div>
70+
</div>
6671

67-
<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">
68-
<div class="grid grid-cols-2 py-3">
72+
<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 min-h-[700px]" v-if="data">
73+
<div class="grid grid-cols-2 py-3 gap-4 text-center">
6974
<dl>
70-
<dt class="text-base font-normal text-gray-500 dark:text-gray-400 pb-1">{{ $t('Listed price') }}</dt>
71-
<dd class="leading-none text-xl font-bold dark:text-green-400" :style="{color:COLORS[0]}">{{
75+
<dt class="text-base font-normal text-gray-500 dark:text-gray-400 pb-1">
76+
{{ $t('Listed price') }}
77+
</dt>
78+
<dd class="leading-none text-xl font-bold" :style="{color:COLORS[0]}">
79+
{{
7280
new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0, }).format(
7381
data.totalListedPrice,
7482
) }}
7583
</dd>
7684
</dl>
7785
<dl>
78-
<dt class="text-base font-normal text-gray-500 dark:text-gray-400 pb-1">{{ $t('Unlisted price') }}</dt>
79-
<dd class="leading-none text-xl font-bold dark:text-red-500" :style="{color:COLORS[1]}">{{
86+
<dt class="text-base font-normal text-gray-500 dark:text-gray-400 pb-1">
87+
{{ $t('Unlisted price') }}</dt>
88+
<dd class="leading-none text-xl font-bold" :style="{color:COLORS[1]}">
89+
{{
8090
new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0, }).format(
8191
data.totalUnlistedPrice,
8292
) }}
@@ -98,7 +108,7 @@ Create a Vue component in the `custom` directory of your project, e.g. `Dashboar
98108
}]"
99109
:options="{
100110
chart: {
101-
height: 500,
111+
height: 600,
102112
},
103113
xaxis: {
104114
labels: { show: true },
@@ -120,12 +130,13 @@ Create a Vue component in the `custom` directory of your project, e.g. `Dashboar
120130

121131
</div>
122132

123-
<div class="max-w-md w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5" v-if="data">
124-
<p class="text-base font-normal text-gray-500 dark:text-gray-400">{{ $t('Apartment by rooms') }}</p>
133+
<div class="w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5 min-h-[340px]" v-if="data">
134+
<p class="text-base font-normal text-gray-500 dark:text-gray-400 mb-3 text-center">{{ $t('Apartment by rooms') }}</p>
135+
<div class="flex justify-center items-center">
125136
<PieChart
126137
:data="apartsCountsByRooms"
127138
:options="{
128-
chart: { type: 'donut'},
139+
chart: { type: 'donut', height: 300 },
129140
plotOptions: {
130141
pie: {
131142
donut: {
@@ -142,9 +153,10 @@ Create a Vue component in the `custom` directory of your project, e.g. `Dashboar
142153
}"
143154
/>
144155
</div>
156+
</div>
145157

146-
<div class="max-w-md w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5" v-if="data">
147-
<p class="text-base font-normal text-gray-500 dark:text-gray-400">{{ $t('Unlisted vs Listed price' ) }}</p>
158+
<div class="w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5 min-h-[340px]" v-if="data">
159+
<p class="text-base font-normal text-gray-500 dark:text-gray-400 mb-3 text-center">{{ $t('Unlisted vs Listed price' ) }}</p>
148160

149161
<AreaChart
150162
:data="listedVsUnlistedPriceByDays"
@@ -160,7 +172,7 @@ Create a Vue component in the `custom` directory of your project, e.g. `Dashboar
160172
}]"
161173
:options="{
162174
chart: {
163-
height: 250,
175+
height: 320,
164176
},
165177
yaxis: {
166178
labels: {

0 commit comments

Comments
 (0)