| 1 |
<template> |
| 2 |
<div> |
| 3 |
<header class="ezcache-screen-header"> |
| 4 |
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">> |
| 5 |
<path d="M3,22V8H7V22H3M10,22V2H14V22H10M17,22V14H21V22H17Z" /> |
| 6 |
</svg> |
| 7 |
{{ $wp.trans('stats') }} |
| 8 |
</header> |
| 9 |
|
| 10 |
|
| 11 |
<div v-if="error"> |
| 12 |
<p class="notice notice-error inline">{{ error }}</p> |
| 13 |
</div> |
| 14 |
<div v-else class="row"> |
| 15 |
<div class="col-12 col-xl-4 my-2"> |
| 16 |
<TogglePanel> |
| 17 |
<div class="stats-block"> |
| 18 |
<svg class="stats-block-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">> |
| 19 |
<path d="M93 14.7H7c-2.6 0-4.8 2.1-4.8 4.8V62c0 2.6 2.1 4.8 4.8 4.8h39v13.1H35.6c-1.5 0-2.8 1.2-2.8 2.8s1.2 2.8 2.8 2.8h28.8c1.5 0 2.8-1.2 2.8-2.8s-1.2-2.8-2.8-2.8H54V66.8h39c2.6 0 4.8-2.1 4.8-4.8V19.4c0-2.6-2.2-4.7-4.8-4.7zm-.7 46.6H7.8V20.2h84.5v41.1z"/> |
| 20 |
</svg> |
| 21 |
<div> |
| 22 |
<p class="stats-block-title" v-text="$wp.trans('desktop')"></p> |
| 23 |
<p class="stats-block-size ltr"> |
| 24 |
<Loader v-if="isLoading"></Loader> |
| 25 |
<span v-else> |
| 26 |
<strong>{{ stats.desktop_count }}</strong> / {{ prettyBytes(stats.desktop_size) }} |
| 27 |
</span> |
| 28 |
</p> |
| 29 |
<p class="stats-block-description" v-text="$wp.trans('desktop_stats_description')"></p> |
| 30 |
</div> |
| 31 |
</div> |
| 32 |
</TogglePanel> |
| 33 |
</div> |
| 34 |
|
| 35 |
<div class="col-12 col-xl-4 my-2"> |
| 36 |
<TogglePanel> |
| 37 |
<div class="stats-block"> |
| 38 |
<svg class="stats-block-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">> |
| 39 |
<path d="M74.6 2.9H25.4c-2.6 0-4.7 2.1-4.7 4.7v84.9c0 2.6 2.1 4.7 4.7 4.7h49.3c2.6 0 4.7-2.1 4.7-4.7V7.6c-.1-2.6-2.2-4.7-4.8-4.7zm-.8 88.7H26.2V8.4h47.7l-.1 83.2z"/> |
| 40 |
<path d="M46.4 16.9h7.5c1.1 0 2-.9 2-2s-.9-2-2-2h-7.5c-1.1 0-2 .9-2 2s.9 2 2 2z"/> |
| 41 |
<circle cx="62.9" cy="14.9" r="2.5"/> |
| 42 |
<circle cx="50" cy="83.1" r="3.8"/> |
| 43 |
</svg> |
| 44 |
<div> |
| 45 |
<p class="stats-block-title" v-text="$wp.trans('mobile')"></p> |
| 46 |
<p class="stats-block-size ltr"> |
| 47 |
<Loader v-if="isLoading"></Loader> |
| 48 |
<span v-else> |
| 49 |
<strong>{{ stats.mobile_count }}</strong> / {{ prettyBytes(stats.mobile_size) }} |
| 50 |
</span> |
| 51 |
</p> |
| 52 |
<p class="stats-block-description" v-text="$wp.trans('mobile_stats_description')"></p> |
| 53 |
</div> |
| 54 |
</div> |
| 55 |
</TogglePanel> |
| 56 |
</div> |
| 57 |
|
| 58 |
<div class="col-12 col-xl-4 my-2"> |
| 59 |
<TogglePanel> |
| 60 |
<div class="stats-block"> |
| 61 |
<svg class="stats-block-icon" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">> |
| 62 |
<path d="M82 14.8H65.8C65.3 8 59.5 2.6 52.5 2.6H47c-6.9 0-12.6 5.4-13.1 12.2H18c-2.4 0-4.2 1.8-4.2 4.2l3.7 64.4c.4 7.8 6.8 13.9 14.7 13.9h35.5c7.9 0 14.3-6 14.8-13.9l3.9-64.2V19c-.1-2.3-2-4.2-4.4-4.2zM47 8.1h5.5c3.9 0 7.2 3 7.7 6.7H39.4c.5-3.8 3.7-6.7 7.6-6.7zm29.9 75c-.3 5-4.4 8.8-9.3 8.8H32.1c-4.9 0-8.9-3.8-9.2-8.7l-3.6-62.8h61.4l-3.8 62.7z"/> |
| 63 |
<path d="M60.5 41.4v20.9c0 1.5 1.2 2.8 2.8 2.8s2.8-1.2 2.8-2.8V41.4c0-1.5-1.2-2.8-2.8-2.8s-2.8 1.3-2.8 2.8z"/> |
| 64 |
<path d="M36.4 38.6c-1.5 0-2.8 1.2-2.8 2.8v20.9c0 1.5 1.2 2.8 2.8 2.8s2.8-1.2 2.8-2.8V41.4c0-1.5-1.2-2.8-2.8-2.8z"/> |
| 65 |
<path d="M50.4 34.6c-1.5 0-2.8 1.2-2.8 2.8v28.9c0 1.5 1.2 2.8 2.8 2.8s2.8-1.2 2.8-2.8V37.4c0-1.5-1.2-2.8-2.8-2.8z"/> |
| 66 |
</svg> |
| 67 |
<div> |
| 68 |
<p class="stats-block-title" v-text="$wp.trans('expired')"></p> |
| 69 |
<p class="stats-block-size ltr"> |
| 70 |
<Loader v-if="isLoading"></Loader> |
| 71 |
<span v-else> |
| 72 |
<strong>{{ expired_count }}</strong> / {{ prettyBytes(expired_size) }} |
| 73 |
</span> |
| 74 |
</p> |
| 75 |
<p class="stats-block-description" v-text="$wp.trans('expired_stats_description')"></p> |
| 76 |
</div> |
| 77 |
</div> |
| 78 |
</TogglePanel> |
| 79 |
</div> |
| 80 |
|
| 81 |
<div class="col-12 col-xl-4 my-2"> |
| 82 |
<TogglePanel> |
| 83 |
<div class="stats-block"> |
| 84 |
<svg class="stats-block-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">> |
| 85 |
<path d="M27.8 27.4c-1.1-1.1-2.8-1.1-3.9 0L4 47.3c-.7.8-1.1 1.7-1.1 2.7 0 1 .4 1.9 1.1 2.7l19.9 19.9c.5.5 1.2.8 1.9.8s1.4-.3 1.9-.8c1.1-1.1 1.1-2.8 0-3.9L9.1 50l18.7-18.7c1.1-1.1 1.1-2.8 0-3.9z"/> |
| 86 |
<path d="M96 47.3L76.1 27.4c-1.1-1.1-2.8-1.1-3.9 0s-1.1 2.8 0 3.9L90.9 50 72.2 68.7c-1.1 1.1-1.1 2.8 0 3.9.5.5 1.2.8 1.9.8s1.4-.3 1.9-.8l20-19.9c.7-.7 1.1-1.6 1.1-2.7 0-1-.4-1.9-1.1-2.7z"/> |
| 87 |
<path d="M60.3 30.7c-1.4-.7-3-.1-3.7 1.3L38.5 69.2c-.7 1.4-.1 3 1.3 3.7.4.2.8.3 1.2.3 1 0 2-.6 2.5-1.5l18.1-37.3c.6-1.4 0-3.1-1.3-3.7z"/> |
| 88 |
</svg> |
| 89 |
<div> |
| 90 |
<p class="stats-block-title" v-text="$wp.trans('javascript')"></p> |
| 91 |
<p class="stats-block-size ltr"> |
| 92 |
<Loader v-if="isLoading"></Loader> |
| 93 |
<span v-else> |
| 94 |
<strong>{{ stats.js_count }}</strong> / {{ prettyBytes(stats.js_size) }} |
| 95 |
</span> |
| 96 |
</p> |
| 97 |
<p class="stats-block-description" v-text="$wp.trans('javascript_stats_description')"></p> |
| 98 |
</div> |
| 99 |
</div> |
| 100 |
</TogglePanel> |
| 101 |
</div> |
| 102 |
<div class="col-12 col-xl-4 my-2"> |
| 103 |
<TogglePanel> |
| 104 |
<div class="stats-block"> |
| 105 |
<svg class="stats-block-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">> |
| 106 |
<path d="M97.5 36.1L64 2.6c-.8-.8-1.8-1.2-3-1.2-1.1 0-2.2.4-3 1.2L30.3 30.5c-7.1 7.1-7.7 17.8-1.9 25.5l-24 24C.1 84.3.1 91.2 4.4 95.4c2.1 2.1 4.9 3.2 7.7 3.2s5.6-1.1 7.7-3.2l23.9-23.9c3.5 2.7 7.7 4.1 11.9 4.1 5 0 10-1.9 13.9-5.7l28-27.9c.8-.8 1.2-1.8 1.2-3s-.4-2.1-1.2-2.9zM16 91.5c-2.1 2.1-5.5 2.1-7.7 0-2.1-2.1-2.1-5.5 0-7.7L32 60.1l7.7 7.7L16 91.5zM65.8 66c-5.6 5.4-14.5 5.5-19.9 0L34.2 54.3c-5.6-5.6-5.6-14.3 0-19.9l4.6-4.6 31.6 31.6-4.6 4.6zm8.4-8.5L42.6 25.9 61.1 7.5l31.6 31.6-18.5 18.4z"/> |
| 107 |
<path d="M42.2 43.1c-2 0-3.6 1.6-3.6 3.6s1.6 3.6 3.6 3.6 3.6-1.6 3.6-3.6-1.6-3.6-3.6-3.6z"/> |
| 108 |
<path d="M53.3 54.2c-2 0-3.6 1.6-3.6 3.6s1.6 3.6 3.6 3.6 3.6-1.6 3.6-3.6-1.6-3.6-3.6-3.6z"/> |
| 109 |
</svg> |
| 110 |
<div> |
| 111 |
<p class="stats-block-title" v-text="$wp.trans('css')"></p> |
| 112 |
<p class="stats-block-size ltr"> |
| 113 |
<Loader v-if="isLoading"></Loader> |
| 114 |
<span v-else> |
| 115 |
<strong>{{ stats.css_count }}</strong> / {{ prettyBytes(stats.css_size) }} |
| 116 |
</span> |
| 117 |
</p> |
| 118 |
<p class="stats-block-description" v-text="$wp.trans('css_stats_description')"></p> |
| 119 |
</div> |
| 120 |
</div> |
| 121 |
</TogglePanel> |
| 122 |
</div> |
| 123 |
<div class="col-12 col-xl-4 my-2"> |
| 124 |
<TogglePanel> |
| 125 |
<div class="stats-block"> |
| 126 |
<svg class="stats-block-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">> |
| 127 |
<path d="M87.4 2.2H12.6c-2.4 0-4.2 1.8-4.2 4.1v87.4c0 2.4 1.8 4.1 4.2 4.1h74.8c2.3 0 4.2-2 4.2-4.3V6.3c0-2.4-1.8-4.1-4.2-4.1zm-1.3 5.5V52c-1.1.7-2 1.3-3 2-2.3 1.5-4.5 3.5-6.6 5.4-5.9 5.2-11.5 10.2-18.9 7.4-1.5-.5-2.9-1.8-4.3-3l-.7-.6c-3.7-3-7.9-6.5-13-7.9-8.6-2.7-16.3 2.3-23.1 6.6-.8.5-1.7 1.1-2.5 1.6V7.7h72.1zM13.9 92.3V69.8c1.8-1 3.6-2.2 5.4-3.3 6.1-3.9 12.3-7.9 18.6-6 4 1.2 7.6 4.1 11.1 6.9l.5.4c1.7 1.5 3.7 3.2 6.1 4.1 2.2.8 4.2 1.2 6.2 1.2 7.5 0 13.4-5.2 18.3-9.6 2-1.8 4-3.5 6-4.9v33.8H13.9z"/> |
| 128 |
<path d="M64.3 44.7c7.3 0 13.1-5.9 13.1-13.1s-5.9-13.2-13.1-13.2-13.2 5.9-13.2 13.2S57 44.7 64.3 44.7zm0-20.9c4.2 0 7.6 3.4 7.6 7.7s-3.4 7.6-7.6 7.6c-4.2 0-7.7-3.4-7.7-7.6s3.5-7.7 7.7-7.7z"/> |
| 129 |
</svg> |
| 130 |
<div> |
| 131 |
<p class="stats-block-title" v-text="$wp.trans('webp_images')"></p> |
| 132 |
<p class="stats-block-size ltr"> |
| 133 |
<Loader v-if="isLoading"></Loader> |
| 134 |
<span v-else> |
| 135 |
<strong>{{ stats.webp_images }}</strong> / {{ prettyBytes(stats.webp_images_size) }} |
| 136 |
</span> |
| 137 |
</p> |
| 138 |
<p class="stats-block-description" v-text="$wp.trans('webp_stats_description')"></p> |
| 139 |
</div> |
| 140 |
</div> |
| 141 |
</TogglePanel> |
| 142 |
</div> |
| 143 |
</div> |
| 144 |
</div> |
| 145 |
</template> |
| 146 |
|
| 147 |
<script> |
| 148 |
import * as prettyBytes from 'pretty-bytes' |
| 149 |
import Loader from "../Components/Loader"; |
| 150 |
import TogglePanel from "../Components/TogglePanel"; |
| 151 |
|
| 152 |
export default { |
| 153 |
components: {Loader, TogglePanel}, |
| 154 |
data() { |
| 155 |
return { |
| 156 |
isLoading: true, |
| 157 |
stats: { |
| 158 |
mobile_count: 0, |
| 159 |
desktop_count: 0, |
| 160 |
mobile_expired_count: 0, |
| 161 |
desktop_expired_count: 0, |
| 162 |
mobile_size: 0, |
| 163 |
desktop_size: 0, |
| 164 |
mobile_expired_size: 0, |
| 165 |
desktop_expired_size: 0, |
| 166 |
raw_data: 0, |
| 167 |
css_size: 0, |
| 168 |
css_count: 0, |
| 169 |
js_count: 0, |
| 170 |
js_size: 0, |
| 171 |
css_expired_count: 0, |
| 172 |
css_expired_size: 0, |
| 173 |
js_expired_count: 0, |
| 174 |
js_expired_size: 0, |
| 175 |
webp_images: 0, |
| 176 |
webp_images_original_size: 0, |
| 177 |
webp_images_size: 0 |
| 178 |
}, |
| 179 |
error: null |
| 180 |
}; |
| 181 |
}, |
| 182 |
computed: { |
| 183 |
expired_count() { |
| 184 |
return this.stats.desktop_expired_count + this.stats.mobile_expired_count + this.stats.js_expired_count + this.stats.css_expired_count; |
| 185 |
}, |
| 186 |
expired_size() { |
| 187 |
return this.stats.desktop_expired_size + this.stats.mobile_expired_size + this.stats.js_expired_size + this.stats.css_expired_size; |
| 188 |
} |
| 189 |
}, |
| 190 |
beforeDestroy() { |
| 191 |
this.$eventBus.$off('wpb.cache_cleared', this.onClearCache); |
| 192 |
}, |
| 193 |
mounted() { |
| 194 |
this.$eventBus.$on('wpb.cache_cleared', this.onClearCache); |
| 195 |
this.fetchStats(); |
| 196 |
}, |
| 197 |
methods: { |
| 198 |
prettyBytes, |
| 199 |
onClearCache() { |
| 200 |
this.stats = { |
| 201 |
mobile_count: 0, |
| 202 |
desktop_count: 0, |
| 203 |
mobile_expired_count: 0, |
| 204 |
desktop_expired_count: 0, |
| 205 |
mobile_size: 0, |
| 206 |
desktop_size: 0, |
| 207 |
mobile_expired_size: 0, |
| 208 |
desktop_expired_size: 0, |
| 209 |
raw_data: 0, |
| 210 |
css_size: 0, |
| 211 |
css_count: 0, |
| 212 |
js_count: 0, |
| 213 |
js_size: 0, |
| 214 |
css_expired_count: 0, |
| 215 |
css_expired_size: 0, |
| 216 |
js_expired_count: 0, |
| 217 |
js_expired_size: 0, |
| 218 |
webp_images: 0, |
| 219 |
webp_images_original_size: 0, |
| 220 |
webp_images_size: 0 |
| 221 |
}; |
| 222 |
}, |
| 223 |
fetchStats() { |
| 224 |
this.isLoading = true; |
| 225 |
|
| 226 |
window.axios.get(this.$wp.rest_url + 'ezcache/v1/cache') |
| 227 |
.then(response => { |
| 228 |
if(response.data.success) { |
| 229 |
this.stats = Object.assign(this.stats, response.data.data); |
| 230 |
} else { |
| 231 |
this.error = response.data.data.error; |
| 232 |
} |
| 233 |
}) |
| 234 |
.catch(e => { |
| 235 |
console.error(e); |
| 236 |
this.error = e; |
| 237 |
}) |
| 238 |
.then(() => this.isLoading = false) |
| 239 |
} |
| 240 |
} |
| 241 |
}; |
| 242 |
</script> |
| 243 |
|
