<div class="infodial make-inview orange" data-value="27" data-total="100">
<div class="infodialtext sibling-margins-off">
<span class="d-block text-center infodialnumber make-counter">27%</span>
<span class="d-block text-center">of registered voters approve</span>
</div>
</div>
<div class="infodial make-inview {{infodial_color}}" data-value="{{infodial_current}}" data-total="{{infodial_max}}">
<div class="infodialtext sibling-margins-off">
<span class="d-block text-center infodialnumber make-counter">{{infodial_number}}</span>
<span class="d-block text-center">{{infodial_desc}}</span>
</div>
</div>
{
"infodial_color": "orange",
"infodial_current": "27",
"infodial_max": "100",
"infodial_number": "27%",
"infodial_desc": "of registered voters approve"
}
document.addEventListener("DOMContentLoaded", function() {
// this script takes information from the HTML to make charts.
// there can be up to 5 slices in each chart.
// each data value must be a string that can be parsed into an integer.
var dials = document.querySelectorAll(".infodial");
Array.prototype.forEach.call(dials, function (dialnode) {
var dialCurrent = dialnode.getAttribute('data-value');
var dialTotal = dialnode.getAttribute('data-total');
// create the svg for the chart
// the size of the svg doesn't really matter as long as it's a square
// this is because we are using percentages for everything
var dial = document.createElementNS('http://www.w3.org/2000/svg','svg');
dial.setAttribute('class','chart');
dial.setAttribute('viewbox','0 0 100 100');
dial.setAttribute('preserveAspectRatio','xMidYMid meet');
dial.setAttribute('width',100);
dial.setAttribute('height',100);
// create the info dial ring
var dialDial = document.createElementNS('http://www.w3.org/2000/svg','circle');
dialDial.classList.add("dial");
dialDial.setAttribute('r','50%');
dialDial.setAttribute('cx','50%');
dialDial.setAttribute('cy','50%');
dial.append(dialDial);
// create the display of current value
var dialReading = document.createElementNS('http://www.w3.org/2000/svg','circle');
dialReading.classList.add("reading");
dialReading.setAttribute('r','50%');
dialReading.setAttribute('cx','50%');
dialReading.setAttribute('cy','50%');
dial.append(dialReading);
// insert the chart
dialnode.querySelector('.infodialtext').before(dial);
// display the current value
var currentValueLength = (dialCurrent / dialTotal) * 314.159;
dialReading.style.strokeDasharray = currentValueLength + '% 314.159%';
dialReading.style.strokeDashoffset = '0%';
});
});
$infodial-break:380px !default;
$infodial-fontsize:4rem !default;
$color-infodial-empty:#f2f2f2;
.infodial {
display:flex;
flex-direction:column;
margin:0 auto;
position:relative;
width:100%;
@media (min-width:$infodial-break) {
&::before {
content:"";
display:block;
height:0;
padding-top:100%;
width:100%;
z-index:1;
}
}
.infodialtext {
justify-content:center;
display:flex;
flex-direction:column;
margin-top:1rem;
@media (min-width:$infodial-break) {
height:100%;
left:25%;
margin-top:0;
position:absolute;
width:50%;
z-index:3;
}
.infodialnumber {
@include condensed-font;
font-size:$infodial-fontsize;
line-height:1;
&.make-counter {
display:inline-flex !important;
height:$infodial-fontsize;
justify-content:center;
}
}
}
.chart {
border-radius:50%;
height:auto;
transform:rotate(-90deg);
width:100%;
@media (min-width:$infodial-break) {
height:100%;
position:absolute;
}
.dial {
fill:transparent;
stroke-width:15%;
stroke:$color-infodial-empty;
}
.reading {
fill:transparent;
stroke-width:15%;
stroke-dasharray:1 314.159%;
stroke-dashoffset:1;
transition:all 1s;
}
}
&.purple {
.infodialtext .infodialnumber {
color:var(--purple);
}
.chart .reading {
stroke:var(--purple);
}
}
&.orange {
.infodialtext .infodialnumber {
color:var(--orange);
}
.chart .reading {
stroke:var(--orange);
}
}
&.green {
.infodialtext .infodialnumber {
color:var(--green);
}
.chart .reading {
stroke:var(--green);
}
}
&.blue {
.infodialtext .infodialnumber {
color:var(--blue);
}
.chart .reading {
stroke:var(--blue);
}
}
&.not-inview {
.chart .reading {
@media (prefers-reduced-motion: no-preference) {
stroke-dasharray:1% ($mathPI * 100%) !important;
stroke-dashoffset:1% !important;
}
}
}
}
There are no notes for this item.