Prototype ny embedside

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Embedded chart</title>
    <link href="https://doc.api.no/data/styleguide/build/styleguide/public/css/design0.css" rel="stylesheet" type="text/css">
    <link href="https://www.ba.no/vis/kommunebasen/stylesheets/lib/c3.min.css" rel="stylesheet" type="text/css">
    <link href="https://www.ba.no/vis/kommunebasen/stylesheets/lib/kommunebasen.c3.css" rel="stylesheet" type="text/css">

html,body
        {
            height:100%;
            width:100%;
            margin:0;padding:0;
        }
        body {
            font-family: "Open Sans", "Helvetica Neue", sans-serif;
        }
        div.table
        {
            display:table;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        div.table > div.row
        {
            display:table-row;
            width: 100%;
        }
        div.table > div.row > div.cell
        {
            display:table-cell;
        }

#page > div.row.flex
        {
            height:100%;
            overflow: hidden;
        }

h1 {
            font-size: 22px;
            font-weight: 600;
            margin: 0px;
            padding: 0px 0px 0px 5px;
            clear: none;
        }

button {
            border-radius: 3px;
            padding: 3px 5px;
            cursor: pointer;
            float:right;
            margin: 3px 7px 3px 5px;
        }

/* TODO: Set style for active button*/
        button.active {
            color: #555;
        }

#embedGraph {
            display: table-cell;
            height: 100%;
            vertical-align: middle;
            text-align: center;
            padding: 0px;
            margin: 0px;
            background: gray;
        }

.loader {
            margin:auto;
        }
        .hidden {
            display: none;
        }

#overlay {
            position: fixed;
            top: 0;
            bottom: 0;
            background-color: rgba(255,255,255,0.7);
        }
        #graphDescription {
            position: static;
            padding: 10px;
            height: 100%;
            overflow-y: auto;
        }

</style>
</head>
<body>
    <div id="page" class="table">
        <div class="row">
            <button id="descriptionButton">Info</button>
            <h1 id="graphTitle"></h1>
        </div>
        <div id="contentRow" class="row flex">
            <div id="embedGraph">
                    <div class="loader am-spinner"></div>
            </div>
        </div>
    </div>
    <div id="overlay" class="hidden">
        <div id="graphDescription">
            Her finner vi beskrivelse av datasettet.
            Inkludert en lenke som man kan klikke på uten å være raskere enn Lucky Luke.
            Jeg må lage denne beskrivelsen litt lang nå slik at vi ser hva som skjer teksten trenger mer plass
            enn det som er tilgjengelig. Ideelt sett skal vi da få vertikal scroll inni overlayboksen,
            men det gjenstår å se om det er det som faktisk skjer. Jeg må innrømme at jeg er veldig spent
            for selv om jeg føler at jeg byner å få kontroll på dette med data og internett og html og sånn nå,
            så er det alltid så masse nytt å lære. Det gjelder jo i livet forøvrig også det altså,
            det er jo ikke unikt for data og internett, men jeg føler at utviklingen på dette området kanskje
            går litt fortere enn, for eksempel, utviklingen innen byggfag eller apotekernæringen,
            men det er mulig jeg er ignorant.
            <p></p><a href="amedia.no" target="_blank">Her er lenka forresten</a></p>
        </div>
    </div>
    <script>
        document.getElementById("graphTitle").innerHTML = "En ganske lang figurtittel som muligens vil brekke over flere linjer (men ikke sikkert)";
        var embedElement = document.getElementById("embedGraph"),
                buttonElement = document.getElementById("descriptionButton"),
                overlayElement = document.getElementById("overlay");

setTimeout(function(){
            var bbox = calculateBBoxBelow(embedElement);
            overlayElement.style.top = bbox.top+"px";
            var chart = c3.generate({
                bindto: embedElement,
                size: bbox.size,
                data: {
                    x: 'x',
                    columns: [
                        ['x', 2010, 2011, 2012, 2013, 2014, 2015, 2016],
                        ['Oyslo', 30, 200, 100, 400, 150, 250, 233],
                        ['Bjarum', 50, 20, 10, 40, 15, 25, 34],
                        ['Djammen', 40, 44, 65, 47, 34, 67, 65],
                        ['Biargen', 20, 45, 10, 44, 87, 54, 20],
                        ['Hoygesund', 100, 150, 300, 200, 100, 50, 70],
                        ['Toinsberg', 45, 34, 10, 87, 46, 35, 80]
                    ]
                },
                point: {
                    r: 4
                },
                padding: {
                    right: 12
                },
                margin: {
                    left: 0
                },
                axis: {
                    x: {
                        show: true,
                        tick: {
                            centered: true
                        }
                    },
                    y: {
                        show: true,
                        label: {
                            text: "Kroner per innbygger",
                            position: 'outer-middle'
                        },
                        tick: {
                            format: function (d) { return d.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "); }
                        }
                    }
                }
            });

//Update chart on window resize
            window.onresize = function(){
                var bbox = calculateBBoxBelow(embedElement);
                overlayElement.style.top = bbox.top+"px";
                chart.resize(bbox.size);
                return;
            };

//Show info on button click
            buttonElement.onclick = function(){
                toggleOverlay(buttonElement, overlayElement);
                return;
            }

}, 1000);

//Toggle overlay by checking its current class
        function toggleOverlay(btn, overlay){
            btn.classList.toggle("active");
            overlay.classList.toggle("hidden");
            return;
        }

//Calculate window width and heigth available from the top of element el and down
        function calculateBBoxBelow(el){
            var t = el.offsetTop,
                    w = window.innerWidth
                            || document.documentElement.clientWidth
                            || document.body.clientWidth,
                    h = (window.innerHeight
                            || document.documentElement.clientHeight
                            || document.body.clientHeight) - t - 5,
                    bbox = {
                        top: t,
                        size: {
                            width: w,
                            height: h
                        }
                    };
            return bbox;
        }

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js