account-status-connected.php
11 months ago
account-status-create-advanced.php
11 months ago
account-status-create-simple.php
4 years ago
account-status-loading.php
4 years ago
bulk-optimization-form.php
1 year ago
bulk-optimization-upgrade-notice.php
4 years ago
bulk-optimization.php
1 year ago
compress-details-processing.php
4 years ago
compress-details.php
10 months ago
dashboard-widget.php
1 year ago
optimization-chart.php
4 years ago
settings.php
11 months ago
optimization-chart.php
56 lines
| 1 | <?php |
| 2 | |
| 3 | $chart = array(); |
| 4 | |
| 5 | if ( isset( $stats ) ) { |
| 6 | $chart['percentage'] = $stats['display-percentage']; |
| 7 | } else { |
| 8 | $chart['percentage'] = 0; |
| 9 | }; |
| 10 | |
| 11 | $chart['size'] = 160; |
| 12 | $chart['radius'] = $chart['size'] / 2 * 0.9; |
| 13 | $chart['main-radius'] = $chart['radius'] * 0.88; |
| 14 | $chart['center'] = $chart['size'] / 2; |
| 15 | $chart['stroke'] = $chart['radius'] / 2; |
| 16 | $chart['dash-stroke'] = $chart['radius'] / 4; |
| 17 | $chart['inner-radius'] = $chart['radius'] - $chart['stroke'] / 2; |
| 18 | $chart['circle-size'] = 2 * pi() * $chart['main-radius']; |
| 19 | $chart['dash-array-size'] = $chart['percentage'] / 100 * $chart['circle-size']; |
| 20 | |
| 21 | ?> |
| 22 | <style> |
| 23 | |
| 24 | div.tiny-optimization-chart svg circle.main { |
| 25 | stroke-width: <?php echo $chart['dash-stroke'] ?>; |
| 26 | stroke-dasharray: <?php echo $chart['dash-array-size'] . ' ' . $chart['circle-size'] ?>; |
| 27 | } |
| 28 | |
| 29 | div.tiny-optimization-chart div.value { |
| 30 | min-width: <?php echo $chart['size'] ?>px; |
| 31 | } |
| 32 | |
| 33 | <?php if ( isset( $stats ) ) { ?> |
| 34 | @keyframes shwoosh { |
| 35 | from { |
| 36 | stroke-dasharray: <?php echo '0' . ' ' . $chart['circle-size'] ?> |
| 37 | } |
| 38 | to { |
| 39 | stroke-dasharray: <?php echo $chart['dash-array-size'] . ' ' . $chart['circle-size'] ?> |
| 40 | } |
| 41 | } |
| 42 | <?php } ?> |
| 43 | |
| 44 | </style> |
| 45 | |
| 46 | <div id="optimization-chart" class="tiny-optimization-chart" data-full-circle-size="<?php echo $chart['circle-size'] ?>" data-percentage-factor="<?php echo $chart['main-radius'] ?>" > |
| 47 | <svg width="<?php echo $chart['size'] ?>" height="<?php echo $chart['size'] ?>"> |
| 48 | <circle class="main" transform="rotate(-90, <?php echo $chart['center'] ?>, <?php echo $chart['center'] ?>)" r="<?php echo $chart['main-radius'] ?>" cx="<?php echo $chart['center'] ?>" cy="<?php echo $chart['center'] ?>"/> |
| 49 | <circle class="inner" r="<?php echo $chart['inner-radius'] ?>" cx="<?php echo $chart['center'] ?>" cy="<?php echo $chart['center'] ?>" /> |
| 50 | </svg> |
| 51 | <div class="value"> |
| 52 | <div class="percentage" id="savings-percentage"><span><?php echo $chart['percentage'] ?></span>%</div> |
| 53 | <div class="label" ><?php esc_html_e( 'savings', 'tiny-compress-images' ); ?></div> |
| 54 | </div> |
| 55 | </div> |
| 56 |