Commit 06403df4 authored by Nikolay Gromov's avatar Nikolay Gromov

Круговые диаграммы: переделал на SVG

parent d32702cb
......@@ -1460,16 +1460,20 @@
<h2 class="blocks-library__item-title">Круговые диаграммы</h2>
<div class="pie-chart">0%</div>
<div class="pie-chart">20%</div>
<div class="pie-chart">40%</div>
<div class="pie-chart" data-border="4">20%</div>
<div class="pie-chart" data-size="200" data-border="10">40%</div>
<div class="pie-chart">90%</div>
<div class="pie-chart">80%</div>
<div class="pie-chart">100%</div>
<div class="pie-chart">110%</div>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre class="code">
<code>&lt;div class="pie-chart">20%&lt;/div></code>
<code>&lt;div class="pie-chart">0%&lt;/div></code>
<code>&lt;div class="pie-chart" data-border="4">20%&lt;/div></code>
<code>&lt;div class="pie-chart" data-size="200" data-border="10">40%&lt;/div></code>
</pre>
</div>
</div>
......
document.addEventListener('DOMContentLoaded', function(){
// Автор кода — Лия Веру
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
$$('.pie-chart').forEach(function(pie) {
var p = pie.textContent;
pie.style.animationDelay = '-' + parseFloat(p) + 's';
pie.setAttribute('data-percent', p)
});
var charts = $$('.pie-chart');
for (var i = 0; i < charts.length; i++) {
var size = charts[i].getAttribute('data-size');
if(!size) size = 100;
var border = charts[i].getAttribute('data-border');
if(!border) border = 20;
var radius = (size / 2) - (border / 2);
var fullStroke = 2 * 3.141592 * radius;
var percentText = parseFloat(charts[i].textContent);
var percent = fullStroke / 100 * percentText;
var nameSpace = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(nameSpace, 'svg');
var circle = document.createElementNS(nameSpace, 'circle');
var circleBack = document.createElementNS(nameSpace, 'circle');
var title = document.createElementNS(nameSpace, 'title');
var span = document.createElement('span');
span.className = 'pie-chart__descr';
span.innerHTML = charts[i].textContent;
svg.setAttribute('class', 'pie-chart__svg');
svg.setAttribute('viewBox', '0 0 ' + size + ' ' + size);
svg.setAttribute('width', size);
svg.setAttribute('height', size);
circleBack.setAttribute('r', (size / 2));
circleBack.setAttribute('class', 'pie-chart__circle-back');
circleBack.setAttribute('cx', size / 2);
circleBack.setAttribute('cy', size / 2);
circle.setAttribute('class', 'pie-chart__circle');
circle.setAttribute('r', radius);
circle.setAttribute('cx', size / 2);
circle.setAttribute('cy', size / 2);
circle.setAttribute('stroke-dasharray', percent + ' ' + fullStroke);
circle.setAttribute('stroke-width', border);
title.textContent = charts[i].textContent;
charts[i].textContent = '';
svg.appendChild(title);
svg.appendChild(circleBack);
svg.appendChild(circle);
charts[i].appendChild(svg);
charts[i].appendChild(span);
}
});
......@@ -8,65 +8,31 @@ $font-size: 14px !default;
$gray-light: hsl(0, 0%, 60%) !default;
$gray-lighter: hsl(0, 0%, 80%) !default;
.pie-chart {
.js .pie-chart {
$block-name: &; // #{$block-name}__element
display: inline-block;
position: relative;
width: 100px;
line-height: 100px;
border-radius: 50%;
background: $gray-lighter;
background-image: linear-gradient(to right, transparent 50%, $gray-light 0);
color: transparent;
font-size: 0;
text-align: center;
&:before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation: pie-chart-spin 50s linear infinite, pie-chart-bg 100s step-end infinite;
animation-play-state: paused;
animation-delay: inherit;
&__svg {
display: block;
transform: rotate(-90deg);
}
&:after {
content: attr(data-percent);
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 60%;
height: 60%;
display: flex;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: #fff;
font-size: $font-size;
color: $text-color;
&__circle-back {
fill: $gray-lighter;
}
@keyframes pie-chart-spin {
to {
transform: rotate(0.5turn);
}
&__circle {
fill: $gray-lighter;
stroke: $gray-light;
}
@keyframes pie-chart-bg {
50% {
background: $gray-light;
}
&__descr {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment