Cat Allergy

by maritavindedal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/sonification.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="heading">
<h1>Cats in the house dashboard</h1>
</div>
<div id="grid">
<div id="cats" class="grid-cell">
    <h2>Cats that live in the house</h2>
    <ul>
        <li>Luna</li>
        <li>Oliver</li>
        <li>Chloe</li>
        <li>Simba</li>
        <li>Bella</li>
        <li>Max</li>
        <li>Cleo</li>
        <li>Leo</li>
        <li>Nala</li>
        <li>Milo</li>
        <li>Daisy</li>
        <li>Freia</li>
    </ul>
</div>
<div id="breeds" class="grid-cell">
<h2>Breeds of the cats</h2>
    <ul>
        <li>Persian</li>
        <li>Siamese</li>
        <li>Maine</li>
        <li>Bengal</li>
        <li>Ragdoll</li>
        <li>Sphynx</li>
        <li>Abyssinian</li>
        <li>Scottish Fold</li>
        <li>Burmese</li>
        <li>Russian Blue</li>
        <li>Devon Rex</li>
        <li>Maine Coon</li>
    </ul>
</div>

<div id="chart" class="grid-cell">
    <h2 class="visually-hidden"">Allergy level</h2>
    <figure class="highcharts-figure">
        <div id="container"></div>
    </figure>
    <button id="toggle" class="btn" aria-pressed="false">Set the cats loose</button>
    <div aria-live="polite" id="toggle-button-announce"></div>
    </div>
</div>

CSS

#container {
    max-width: 400px;
}

h1 {
    font-size: 1.5rem;
    padding-left: 15px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

#grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 10px;
    max-width: 400px;
    padding: 10px;
}

.grid-cell {
    border: 2px solid #000;
    border-radius: 10px;
    padding: 10px;
}

#chart {
    grid-column: 1 / span 2;
}

.btn {
    background: #5749ad;
    color: #fff;
    border: 2px solid #5749ad;
    padding: 8px 16px;
    font-weight: 700;
    border-radius: 4px;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.btn:hover {
    background: #fff;
    color: #5749ad;
    border-color: #5749ad;
    cursor: pointer;
}

.btn:focus {
    outline: 2px solid black;
    outline-offset: 3px;
}

.btn:active {
    background: #5749ad;
    color: #fff;
    border-color: #5749ad;
}

JavaScript

const chart = Highcharts.chart('container', {
    accessibility: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    chart: {
        type: 'gauge',
        height: '80%',
        marginTop: 20
    },
    title: {
        text: 'Allergy level'
    },

    pane: {
        startAngle: -90,
        endAngle: 89.9,
        background: null,
        center: ['50%', '75%'],
        size: '110%'
    },
    yAxis: {
        min: 0,
        max: 12,
        tickInterval: 4,
        tickColor: '#000000',
        tickLength: 20,
        tickWidth: 2,
        minorTicks: true,
        minorTickWidth: 2,
        minorTicksPerMajor: 4,
        minorTickColor: '#000000',
        labels: {
            distance: 20,
            style: {
                fontSize: '16px'
            }
        },
        lineColor: '#000000',
        lineWidth: 2,
        plotBands: [{
            from: 0,
            to: 4,
            color: '#2A9D8F', // teal
            thickness: 20
        }, {
            from: 4,
            to: 8,
            color: '#F9C74F', // yellow
            thickness: 20
        }, {
            from: 8,
            to: 12,
            color: '#FF5733', // red
            thickness: 20
        }]
    },

    series: [{
        name: 'Cats',
        data: [0],
        tooltip: {
            pointFormat: '{series.name}: <b>{point.y} cats in the living room</b>'
        },
        dataLabels: {
            format: 'Cats in the living room: {y}',
            borderWidth: 0,
            color: '#000000',
            style: {
                fontSize: '16px'
            }
        },
        dial: {
            radius: '80%',
            backgroundColor: '#000000',
            baseWidth: 12,
            baseLength: '0%',
            rearLength: '0%'
        },
        pivot: {
            backgroundColor: '#000000',
            radius: 6
        }

    }]
});

const svg = document.getElementsByClassName('highcharts-root')[0];
const container =...