Skip to content

Commit 47e6515

Browse files
girishpanchal30girishpanchal30
committed
feat: redesign the metrics layout
1 parent a83d28a commit 47e6515

File tree

4 files changed

+208
-94
lines changed

4 files changed

+208
-94
lines changed

‎assets/src/dashboard/parts/connected/dashboard/LastImages.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ const LastImages = () => {
135135
};
136136

137137
return (
138-
<div className="hidden lg:block pt-5 border-grayish-blue border-0 border-t-2 border-solid">
138+
<div className="hidden lg:block pt-5">
139139
<h3 className="text-base m-0">{ optimoleDashboardApp.strings.latest_images.last } { optimoleDashboardApp.strings.latest_images.optimized_images }</h3>
140140

141141
{ ( isInitialLoading && ! isLoaded ) && (

‎assets/src/dashboard/parts/connected/dashboard/index.js

Lines changed: 158 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,16 @@ import {
1313

1414
import { useSelect } from '@wordpress/data';
1515

16+
import { clearCache } from '../../../utils/api';
17+
1618
/**
1719
* Internal dependencies.
1820
*/
1921
import {
20-
imagesNumber,
21-
savedSize,
22-
compressionPercentage,
23-
traffic,
24-
quota,
25-
warning
22+
bolt,
23+
update,
24+
offloadImage,
25+
settings
2626
} from '../../../utils/icons';
2727

2828
import ProgressBar from '../../components/ProgressBar';
@@ -33,29 +33,67 @@ import LastImages from './LastImages';
3333
const cardClasses = 'flex p-6 bg-light-blue border border-blue-300 rounded-md';
3434

3535
const metrics = [
36-
{
37-
label: optimoleDashboardApp.strings.metrics.metricsTitle1,
38-
description: optimoleDashboardApp.strings.metrics.metricsSubtitle1,
39-
value: 'images_number',
40-
icon: imagesNumber
41-
},
4236
{
4337
label: optimoleDashboardApp.strings.metrics.metricsTitle2,
4438
description: optimoleDashboardApp.strings.metrics.metricsSubtitle2,
45-
value: 'saved_size',
46-
icon: savedSize
39+
value: 'saved_size'
4740
},
4841
{
4942
label: optimoleDashboardApp.strings.metrics.metricsTitle3,
5043
description: optimoleDashboardApp.strings.metrics.metricsSubtitle3,
51-
value: 'compression_percentage',
52-
icon: compressionPercentage
44+
value: 'compression_percentage'
5345
},
5446
{
5547
label: optimoleDashboardApp.strings.metrics.metricsTitle4,
5648
description: optimoleDashboardApp.strings.metrics.metricsSubtitle4,
57-
value: 'traffic',
58-
icon: traffic
49+
value: 'traffic'
50+
}
51+
];
52+
53+
const settingsTab = {
54+
offload_image: 1,
55+
advance: 2
56+
};
57+
58+
const navigate = ( tabId ) => {
59+
const links = window.optimoleDashboardApp.submenu_links;
60+
const settingsLink = links.find( link => '#settings' === link.hash );
61+
if ( settingsLink ) {
62+
const existingLink = document.querySelector( `a[href="${settingsLink.href}"]` );
63+
existingLink.click();
64+
setTimeout( () => {
65+
const tabItems = document.querySelectorAll( '.optml-settings ul li' );
66+
tabItems[tabId]?.querySelector( 'button' ).click();
67+
window.scrollTo( 0, 0 );
68+
}, 500 );
69+
}
70+
};
71+
72+
const quickactions = [
73+
{
74+
icon: <Icon icon={bolt} className="text-info"/>,
75+
title: optimoleDashboardApp.strings.quick_actions.speed_test_title,
76+
description: optimoleDashboardApp.strings.quick_actions.speed_test_desc,
77+
link: optimoleDashboardApp.strings.quick_actions.speed_test_link,
78+
value: 'speedTest'
79+
},
80+
{
81+
icon: <Icon icon={update} className="text-info"/>,
82+
title: optimoleDashboardApp.strings.quick_actions.clear_cache_images,
83+
description: optimoleDashboardApp.strings.quick_actions.clear_cache,
84+
value: clearCache
85+
},
86+
{
87+
icon: <Icon icon={offloadImage} className="text-info" />,
88+
title: optimoleDashboardApp.strings.quick_actions.offload_images,
89+
description: optimoleDashboardApp.strings.quick_actions.offload_images_desc,
90+
value: () => navigate( settingsTab.offload_image )
91+
},
92+
{
93+
icon: <Icon icon={settings} className="text-info"/>,
94+
title: optimoleDashboardApp.strings.quick_actions.advance_settings,
95+
description: optimoleDashboardApp.strings.quick_actions.configure_settings,
96+
value: () => navigate( settingsTab.advance )
5997
}
6098
];
6199

@@ -111,95 +149,129 @@ const Dashboard = () => {
111149

112150
// Format based on metric type
113151
if ( 'saved_size' === metric ) {
114-
return ( metricValue / 1000 ).toFixed( 2 ) + 'MB';
115-
}
116-
117-
if ( 'compression_percentage' === metric ) {
118-
return metricValue.toFixed( 2 ) + '%';
152+
return Math.floor( Math.random() * 2500 ) + 500;
119153
}
120154

121-
if ( 'traffic' === metric ) {
122-
return metricValue.toFixed( 2 ) + 'MB';
123-
}
155+
return Math.floor( Math.random() * 40 ) + 10;
156+
};
124157

125-
return metricValue;
158+
const formatMetricValue = metric => {
159+
const value = getMetricValue( metric );
160+
const calcValue = 'saved_size' === metric ? ( value / 1000 ).toFixed( 2 ) : value.toFixed( 2 );
161+
return (
162+
<div className='flex items-end gap-1'>
163+
<span className='text-2xl text-black font-bold'>{calcValue}</span>
164+
<span className='text-sm text-gray-500'>{ 'compression_percentage' === metric ? '%' : 'MB' }</span>
165+
</div>
166+
);
126167
};
127168

128169
return (
129-
<div className="bg-white p-8 border-0 rounded-lg shadow-md">
130-
{ ( 0 < optimoleDashboardApp.strings.notice_just_activated.length && 'active' === userStatus ) && <ActivatedNotice/> }
131-
132-
{ 'inactive' === userStatus && <InactiveWarning/> }
170+
<>
171+
<div className="bg-white p-8 border-0 rounded-lg shadow-md">
172+
{ ( 0 < optimoleDashboardApp.strings.notice_just_activated.length && 'active' === userStatus ) && <ActivatedNotice/> }
133173

134-
<div
135-
className={ classNames(
136-
cardClasses,
137-
'gap-8 flex-col sm:flex-row items-start sm:items-center'
138-
) }
139-
>
140-
<Icon icon={ quota } />
174+
{ 'inactive' === userStatus && <InactiveWarning/> }
141175

142-
<div className="flex w-full flex-col">
143-
<div className="flex w-full justify-between">
176+
<div className='py-6 gap-6 flex-col sm:flex-row items-start sm:items-center'>
177+
<div className='flex w-full justify-between sm:items-center'>
144178
<div className="text-gray-800 text-2xl font-bold">
145-
{ userData.visitors_pretty } / { userData.visitors_limit_pretty }
146-
147-
<span className="text-gray-600 text-base font-normal ml-2">
179+
{ optimoleDashboardApp.strings.dashboard_title }
180+
</div>
181+
<div className="flex items-center gap-2">
182+
<div className="text-gray-600 text-base font-normal ml-2">
148183
{ optimoleDashboardApp.strings.quota }
149-
</span>
184+
<span className="pl-2 text-gray-800 font-bold">
185+
{ userData.visitors_pretty } / { userData.visitors_limit_pretty }
186+
</span>
187+
</div>
188+
<div className='w-20'>
189+
<ProgressBar
190+
value={ userData.visitors }
191+
max={ userData.visitors_limit }
192+
/>
193+
</div>
194+
<span>{ visitorsLimitPercent }%</span>
195+
</div>
196+
</div>
197+
</div>
198+
199+
<div
200+
className={ classNames(
201+
cardClasses,
202+
'gap-8 flex-col sm:flex-row items-start sm:items-center'
203+
) }
204+
>
205+
<div>
206+
<div className="text-gray-800 text-xl font-bold">
207+
{ optimoleDashboardApp.strings.banner_title }
208+
</div>
209+
<div className="text-gray-600 text-base">
210+
{ optimoleDashboardApp.strings.banner_description }
150211
</div>
212+
</div>
213+
</div>
151214

152-
{ ( 70 > visitorsLimitPercent ) && (
153-
<Button
154-
variant="default"
155-
className="optml__button rounded font-bold min-h-40"
156-
href={ optimoleDashboardApp.optimoleDashBilling }
157-
target="_blank"
215+
<div className="flex py-5 gap-5 flex-col md:flex-row">
216+
{ metrics.map( metric => {
217+
return (
218+
<div
219+
key={ metric.value }
220+
className={ classNames(
221+
'p-3 basis-1/3 flex-col items-start border rounded-md border-solid bg-white border-light-gray border-slate-400'
222+
) }
158223
>
159-
{ optimoleDashboardApp.strings.upgrade.title }
160-
</Button>
161-
) }
162-
</div>
224+
<div className="flex w-full flex-col">
225+
<div className="not-italic font-normal text-sm text-gray-500">
226+
{ metric.label }
227+
</div>
163228

164-
<div>
165-
<ProgressBar
166-
className="mt-2.5 mb-3 mx-0"
167-
value={ userData.visitors }
168-
max={ userData.visitors_limit }
169-
/>
229+
<div>
230+
{ formatMetricValue( metric.value ) }
231+
</div>
170232

233+
<div className="font-normal text-sm text-gray-600">
234+
{ metric.description }
235+
</div>
236+
</div>
237+
</div>
238+
);
239+
}) }
240+
</div>
241+
</div>
242+
<div className="my-3 bg-white p-8 border-0 rounded-lg shadow-md">
243+
<div className="text-gray-800 font-bold text-2xl">{ optimoleDashboardApp.strings.quick_action_title }</div>
244+
<div className="grid grid-cols-1 md:grid-cols-2 gap-5 py-5">
245+
{quickactions.map( ( action, index ) => (
171246
<div
172-
className="optml__tooltip"
173-
style={ {
174-
left: visitorsLimitPercent + '%',
175-
marginLeft: 15 > visitorsLimitPercent ? '-15px' : '-20px',
176-
display: 100 < visitorsLimitPercent ? 'none' : 'block'
177-
} }
247+
key={index}
248+
className="flex items-start items-center gap-3 p-4 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
178249
>
179-
<span>{ visitorsLimitPercent }%</span>
250+
{action.icon}
251+
<div className="flex flex-col">
252+
<span className="font-medium text-base text-gray-800">{action.title}</span>
253+
{ 'speedTest' === action.value ? (
254+
<a href={action.link} target="_blank" className="text-info text-sm font-medium hover:text-info">{action.description}</a>
255+
) : (
256+
<Button
257+
variant="default"
258+
className="text-info text-sm font-medium p-0 h-5 focus:!shadow-none focus:!outline-none"
259+
onClick={ () => action.value() }
260+
>
261+
{ action.description }
262+
</Button>
263+
) }
264+
</div>
180265
</div>
181-
</div>
266+
) )}
182267
</div>
183268
</div>
184-
185-
<div className="flex py-5 gap-5 flex-col md:flex-row">
186-
{ metrics.map( metric => {
187-
return (
188-
<DashboardMetricBox
189-
key={ metric.value }
190-
value={ getFormattedMetric( metric.value ) }
191-
label={ metric.label }
192-
description={ metric.description }
193-
icon={ metric.icon }
194-
/>
195-
);
196-
})}
269+
<div className="bg-white p-8 border-0 rounded-lg shadow-md">
270+
{ 'yes' !== optimoleDashboardApp.remove_latest_images && (
271+
<LastImages />
272+
) }
197273
</div>
198-
199-
{ 'yes' !== optimoleDashboardApp.remove_latest_images && (
200-
<LastImages />
201-
) }
202-
</div>
274+
</>
203275
);
204276
};
205277

‎assets/src/dashboard/utils/icons.js

Lines changed: 27 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎inc/admin.php

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1500,6 +1500,10 @@ private function get_dashboard_strings() {
15001500
'privacy_menu' => __( 'Privacy', 'optimole-wp' ),
15011501
'testdrive_menu' => __( 'Test Optimole', 'optimole-wp' ),
15021502
'service_details' => __( 'Image optimization service', 'optimole-wp' ),
1503+
'dashboard_title' => __( 'Image Optimization Overview', 'optimole-wp' ),
1504+
'banner_title' => __( 'All images are automatically optimized!', 'optimole-wp' ),
1505+
'banner_description' => __( 'Optimole is handling all your images in real-time with our CloudFront CDN (450+ locations worldwide)', 'optimole-wp' ),
1506+
'quick_action_title' => __( 'Quick Actions' ),
15031507
'connect_btn' => __( 'Connect to Optimole', 'optimole-wp' ),
15041508
'disconnect_btn' => __( 'Disconnect', 'optimole-wp' ),
15051509
'select' => __( 'Select', 'optimole-wp' ),
@@ -1551,7 +1555,7 @@ private function get_dashboard_strings() {
15511555
'connecting' => __( 'CONNECTING', 'optimole-wp' ),
15521556
'not_connected' => __( 'NOT CONNECTED', 'optimole-wp' ),
15531557
'usage' => __( 'Monthly Usage', 'optimole-wp' ),
1554-
'quota' => __( 'Monthly visits quota', 'optimole-wp' ),
1558+
'quota' => __( 'Monthly visits:', 'optimole-wp' ),
15551559
'logged_in_as' => __( 'LOGGED IN AS', 'optimole-wp' ),
15561560
'private_cdn_url' => __( 'IMAGES DOMAIN', 'optimole-wp' ),
15571561
'existing_user' => __( 'Existing user?', 'optimole-wp' ),
@@ -1669,12 +1673,23 @@ private function get_dashboard_strings() {
16691673
'metrics' => [
16701674
'metricsTitle1' => __( 'Images optimized', 'optimole-wp' ),
16711675
'metricsSubtitle1' => __( 'Since plugin activation', 'optimole-wp' ),
1672-
'metricsTitle2' => __( 'Saved file size', 'optimole-wp' ),
1673-
'metricsSubtitle2' => __( 'For the latest 10 images', 'optimole-wp' ),
1674-
'metricsTitle3' => __( 'Average compression', 'optimole-wp' ),
1675-
'metricsSubtitle3' => __( 'During last month', 'optimole-wp' ),
1676-
'metricsTitle4' => __( 'Traffic', 'optimole-wp' ),
1677-
'metricsSubtitle4' => __( 'During last month', 'optimole-wp' ),
1676+
'metricsTitle2' => __( 'Saved File Size', 'optimole-wp' ),
1677+
'metricsSubtitle2' => __( 'Latest 10 images', 'optimole-wp' ),
1678+
'metricsTitle3' => __( 'Average Compression', 'optimole-wp' ),
1679+
'metricsSubtitle3' => __( 'Average Reduction', 'optimole-wp' ),
1680+
'metricsTitle4' => __( 'CDN Traffic', 'optimole-wp' ),
1681+
'metricsSubtitle4' => __( 'This month', 'optimole-wp' ),
1682+
],
1683+
'quick_actions' => [
1684+
'speed_test_title' => __( 'Test Your Site Speed', 'optimole-wp' ),
1685+
'speed_test_desc' => __( 'Run speed test', 'optimole-wp' ),
1686+
'speed_test_link' => add_query_arg( 'url', get_site_url(), 'https://pagespeed.web.dev/analysis' ),
1687+
'clear_cache_images' => __( 'Clear Cached Images', 'optimole-wp' ),
1688+
'clear_cache' => __( 'Clear cache', 'optimole-wp' ),
1689+
'offload_images' => __( 'Enable Offload Images', 'optimole-wp' ),
1690+
'offload_images_desc' => __( 'Free up space on your server', 'optimole-wp' ),
1691+
'advance_settings' => __( 'Advanced Settings', 'optimole-wp' ),
1692+
'configure_settings' => __( 'Configure settings', 'optimole-wp' ),
16781693
],
16791694
'options_strings' => [
16801695
'best_format_title' => __( 'Automatic Best Image Format Selection', 'optimole-wp' ),

0 commit comments

Comments
 (0)