<div class="gauge-chart" data-progress="82">
  <div class="info">
    <div class="value">82</div>
    <div class="what">Users aquired</div>
  </div>
  <svg width="400" height="400" viewBox="-50 -50 100 100"></svg>
</div>

/*
 * File: _gauge_chart.scss
 * Location /src/scss/components
 * Gauge chart component
 */

.gauge-chart {
    position: relative;
    .info {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        flex-direction: column;
        .value {
            font-size: 5rem;
        }
        .what {
            color: var(--color-mid);
            font-size: 1.2rem;
            width: 94%;
            text-align: center;
            text-transform: uppercase;
        }
    }
    svg {
        width: 100%;
        path {
            stroke: var(--primary-color);
            stroke-width: 0;
            fill: #fff;
            stroke-dasharray: 1 4;
            &.gauge {
                stroke: 000;
                stroke-width: 8;
                fill: none;
            }
            &.bg {
                stroke: var(--primary-color);
                stroke-width: 8;
                fill: none;
                opacity: 0.1;
            }
            &.dotted {
                stroke: var(--primary-color);
                stroke-width: 0.3;
                stroke-dasharray: 1 3;
                stroke-linejoin: round;
                stroke-linecap: round;
                fill: none;
                opacity: 0.3;
            }
        }
    }
}

/*
 * File: _gauge_chart.js
 * Location /src/js/components
 * Gauge chart component
 */

(function() {
    var gauge = document.querySelector('.gauge-chart');
    var svg = gauge.querySelector('svg');

    function calc(degree, radius) {
        var radian = degree * Math.PI / 180
        const x = Math.cos(radian) * radius;
        const y = Math.sin(radian) * radius;
        return { x, y };
    }

    const progress = gauge.getAttribute('data-progress');

    var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    var radian = 90 * Math.PI / 180
    const x = Math.cos(radian) * 20;
    const y = Math.sin(radian) * 20;
    var mask = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    const perc1 = calc(150, 45);
    const perc = calc(150 + (240 * progress / 100), 45);
    mask.setAttribute('d', `M${0},${0} L${perc1.x},${perc1.y} A45,45 0 1 1 ${perc.x},${perc.y} Z`);

    var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
    var maskDef = document.createElementNS('http://www.w3.org/2000/svg', 'mask');
    maskDef.id = 'mask';
    svg.appendChild(defs);
    defs.appendChild(maskDef);
    maskDef.appendChild(mask);

    const bg1 = calc(150, 40);
    const bg2 = calc(30, 40);
    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    path.setAttribute('d', `M${bg1.x},${bg1.y} A40,40 0 1 1 ${bg2.x},${bg2.y}`);
    path.classList.add('bg');
    svg.appendChild(g);
    g.appendChild(path);

    const one = calc(150, 40);
    const two = calc(30, 40);
    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    path.setAttribute('d', `M${one.x},${one.y} A40,40 0 1 1 ${two.x},${two.y}`);
    path.classList.add('gauge');
    path.setAttribute('mask', 'url(#mask)');
    svg.appendChild(g);
    g.appendChild(path);



    const three = calc(150, 32);
    const four = calc(30, 32);
    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path.classList.add('dotted');
    path.setAttribute('d', `M${three.x},${three.y} A32,32 0 1 1 ${four.x},${four.y}`);
    path.classList.add('gauge');
    svg.appendChild(path);


})();