JSFiddle - React, Tailwind, and code Playground

by mqchen

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<div>
    <form action="." method="post" class="showsettings">
        <div>
            <label><input type="checkbox" value="ok" name="show-riskcat" checked="checked" /> Økonomiforvaltningen</label>
            <label><input type="checkbox" value="er" name="show-riskcat" checked="checked" /> Elevens rettssikkerhet</label>
            <label><input type="checkbox" value="ep" name="show-riskcat" checked="checked" /> Elevens psykososiale miljø</label>
        </div>
        <div>
            <label>
                Vis topp
                <input type="number" min="0" value="10" name="show-riskentries" />
            </label>
        </div>
        <div>
            <label><input type="checkbox" name="show-aktortype" value="steinerskoler" checked="checked" /> Steinerskoler</label>
            <label><input type="checkbox" name="show-aktortype" value="privat grunnskole i norge" checked="checked" /> Privat grunnskole i Norge</label>
            <label><input type="checkbox" name="show-aktortype" value="privat videregåendeskole i norge" checked="checked" /> Privat videregåendeskole i Norge</label>
            <label><input type="checkbox" name="show-aktortype" value="idrettsskole" checked="checked" /> Idrettsskole</label>
        </div>
        <button type="submit" name="update">Vis</button>
    </form>
</div>

<hr />

<div class="riskgraph">
</div>

<script id="risk-entry-template" type="text/x-handlebars-template">
    <div class="riskentry">
        <div class="risklabel"><a href="{{url}}">{{label}}</a></div>
        <div class="riskbar" style="width:{{totalpercentage}}%">
            <div class="riskcomponentwrap">
                {{#each risk}}
                    <div class="riskcomponent riskcat-{{category}}" style="width:{{percentage}}%">{{risk}}</div>
                {{/each}}
                <div class="risktotal">{{total}} RP</div>
            </div>
       ...

CSS

html, body {
    font-family: Arial, sans-serif;
}
body {
    font-size: 90%;
    padding: 40px;
}


.riskgraph {

}

.riskentry {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-top: 10px;
    box-sizing: border-box;
    padding-right: 100px;
    float: left;
}

.risklabel {
    display: block;
    width: 300px;
    text-align: right;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    height: 60px;
    box-sizing: border-box;
}

.riskbar {
    float: left;
    overflow: auto;
    box-sizing: border-box;
    padding-left: 310px;
    overflow: hidden;
    display: table;
}
    .riskcomponentwrap {
        width: 100%;
        display: table-row;        
    }

    .riskbar .riskcomponent {
        box-sizing: border-box;
        display: table-cell;
        overflow: hidden;
        padding: 20px 0;
        min-width: 6px;
        
        border: 1px solid white;
        border-radius: 5px;
        -moz-background-clip: padding-box;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
    
        text-align: center;
        text-indent: -999px;
        font-size: 0.9em;
        white-space: nowrap;
        -webkit-text-overflow: clip;
        text-overflow: clip;
    }

    .riskentry:hover .riskbar .riskcomponent {
        text-indent: 0;
        padding: 20px 10px;
    }

.riskcomponent {
    color: #666;
    background: rgb(30,87,153); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(238,238,238,1) 0%, rgba(186,186,186,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(186,186,186,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(238,238,238,1) 0%,rgba(186,186,186,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(30,87,153,1)...

JavaScript

var data = [
    {
        label : "Steinerskolen på Finnmark",
        url: "#finn",
        risk : {
            "ok" : 70,
            "er" : 82,
            "ep" : 20
        },
        aktortypes : [
            "steinerskoler",
            "privat grunnskole i norge"
        ]
    },
    {
        label : "Steinerskolen i Bergen",
        url: "#finn",
        risk : {
            "ok" : 80,
            "er" : 52,
            "ep" : 10
        },
        aktortypes : [
            "steinerskoler",
            "privat grunnskole i norge"
        ]
    },
    {
        label : "Steinerskolen på Ringeriket",
        url: "#ring",
        risk : {
            "ok" : 120,
            "er" : 32,
            "ep" : 10
        },
        aktortypes : [
            "steinerskoler",
            "privat videregåendeskole i norge"
        ]
    },
    {
        label : "Nidaros Idrettsungdomsskole",
        url: "#nid",
        risk : {
            "ok" : 10,
            "er" : 76,
            "ep" : 10
        },
        aktortypes : [
            "idrettsskole",
            "privat grunnskole i norge"
        ]
    }
];


/// RISK GRAPH

var options = {
    eventNS : ".riskgraph",
    showRiskCategoryName : "show-riskcat",
    showRiskEntriesName : "show-riskentries",
    showAktorTypesName : "show-aktortype"
};

var graph = $(".riskgraph");
var showSettingsForm = $("form.showsettings");

var html = $("#risk-entry-template").html();
var tmpl = Handlebars.compile(html);

var show = {
    categories : [],
    entries : 10,
    aktortypes : []
}
    
var methods = {
    
    init : function() {
        methods._addEvents();
        show = methods._getShowSettingsFromForm(showSettingsForm);
        methods.draw(show);
    },
        
    _getShowSettingsFromForm : function(form) {
        
        var show = {};
        
        var showSettings = $(form).serializeArray();

        show.categories = [];
        show.aktortypes = [];
        
        for(var i = 0; i <...