<?php

$chart = array();

if ( isset( $stats ) ) {
		$chart['percentage'] = $stats['display-percentage'];
} else {
	$chart['percentage'] = 0;
};

$chart['size'] = 160;
$chart['radius'] = $chart['size'] / 2 * 0.9;
$chart['main-radius'] = $chart['radius'] * 0.88;
$chart['center'] = $chart['size'] / 2;
$chart['stroke'] = $chart['radius'] / 2;
$chart['dash-stroke'] = $chart['radius'] / 4;
$chart['inner-radius'] = $chart['radius'] - $chart['stroke'] / 2;
$chart['circle-size'] = 2 * pi() * $chart['main-radius'];
$chart['dash-array-size'] = $chart['percentage'] / 100 * $chart['circle-size'];

?>
<style>

div.tiny-optimization-chart svg circle.main {
	stroke-width: <?php echo $chart['dash-stroke'] ?>;
	stroke-dasharray: <?php echo $chart['dash-array-size'] . ' ' . $chart['circle-size'] ?>;
}

div.tiny-optimization-chart div.value {
	min-width: <?php echo $chart['size'] ?>px;
}

<?php if ( isset( $stats ) ) { ?>
	@keyframes shwoosh {
		from {
			stroke-dasharray: <?php echo '0' . ' ' . $chart['circle-size'] ?>
		}
		to {
			stroke-dasharray: <?php echo $chart['dash-array-size'] . ' ' . $chart['circle-size'] ?>
		}
	}
<?php } ?>

</style>

<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'] ?>" >
	<svg width="<?php echo $chart['size'] ?>" height="<?php echo $chart['size'] ?>">
		<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'] ?>"/>
		<circle class="inner" r="<?php echo $chart['inner-radius'] ?>" cx="<?php echo $chart['center'] ?>" cy="<?php echo $chart['center'] ?>" />
	</svg>
	<div class="value">
		<div class="percentage" id="savings-percentage"><span><?php echo $chart['percentage'] ?></span>%</div>
		<div class="label" ><?php esc_html_e( 'savings', 'tiny-compress-images' ); ?></div>
	</div>
</div>