Green

<div class="infodial make-inview green" data-value="62" data-total="100">
    <div class="infodialtext sibling-margins-off">
        <span class="d-block text-center infodialnumber make-counter">62%</span>
        <span class="d-block text-center">of infected patients survived</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": "green",
  "infodial_current": "62",
  "infodial_max": "100",
  "infodial_number": "62%",
  "infodial_desc": "of infected patients survived"
}
  • Content:
    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%';
      });
    });
  • URL: /components/raw/infodial/infodial.js
  • Filesystem Path: source/patterns/organisms/infographics/infodial/infodial.js
  • Size: 1.9 KB
  • Content:
    $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;
          }
        }
      }
    }
  • URL: /components/raw/infodial/infodial.scss
  • Filesystem Path: source/patterns/organisms/infographics/infodial/infodial.scss
  • Size: 2.1 KB

There are no notes for this item.