Pollster 2018

<html>
<head>
    <meta charset="utf-8" />
    <script src="./plotly-1.35.2.min.js"></script>
    <script src="./plotly-locale-cs.js"></script>
</head>
<body>
    <div id="tester" style="width:900px;height:800px;"></div>
    Pozn: intervaly jsou jen hrubý odhad na ukázku
    <script>

var hex2rgba = (str, a) => str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16+n,r),[0,0,0,a||1]);

var electionData = [
            {name:"Zelení", value: 0.0146, color:"#06b15d"},
            {name:"Svobodní", value: 0.0156, color:"#009982"},
            {name:"STAN", value: 0.0518, color:"#5d8c00"},
            {name:"TOP 09", value: 0.0531, color:"#723769"},
            {name:"KDU-ČSL", value: 0.0580, color:"#e6ac21"},
            {name:"ČSSD", value: 0.0727, color:"#F07D00"},
            {name:"KSČM", value: 0.0776, color:"#8c0000"},
            {name:"SPD", value: 0.1064, color:"#ea2329"},
            {name:"Piráti", value: 0.1079, color:"#000000"},
            {name:"ODS", value: 0.1132, color:"#004494"},
            {name:"ANO", value: 0.2964, color:"#261060"}
        ];
        var electionDate = '2017-10-21';

var dates = ['2017-12-17', '2018-01-24', '2018-02-15', '2018-03-15'];

var parties = [
            {name:"Zelení", data:[0.015, 'nan', 0.1, 0.1], color:"#06b15d"},
            {name:"Svobodní", data:[null, 0.015, 0.01, 0.01], color:"#009982"},
            {name:"TOP 09", data:[0.045, 0.04, 0.035, 0.045], color:"#723769"},
            {name:"STAN", data:[0.04, 0.03, 0.03, 0.045], color:"#5d8c00"},
            {name:"KDU-ČSL", data:[0.065, 0.05, 0.035, 0.045], color:"#e6ac21"},
            {name:"SPD", data:[0.065, 0.075, 0.065, 0.065], color:"#ea2329"},
            {name:"KSČM", data:[0.075, 0.08, 0.1, 0.11], color:"#8c0000"},
            {name:"ČSSD", data:[0.1, 0.125, 0.12, 0.11], color:"#F07D00"},
            {name:"Piráti", data:[0.115, 0.125, 0.13, 0.125], color:"#000000"},
            {name:"ODS", data:[0.115, 0.12, 0.105, 0.125], color:"#004494"},
            {name:"ANO", data:[0.355, 0.305, 0.335, 0.305], color:"#261060"}
        ];

var currentEstimates = [
            {name:"Zelení", data:[0.1], color:"#06b15d"},
            {name:"Svobodní", data:[0.01], color:"#009982"},
            {name:"TOP 09", data:[0.045], color:"#723769"},
            {name:"STAN", data:[0.045], color:"#5d8c00"},
            {name:"KDU-ČSL", data:[0.045], color:"#e6ac21"},
            {name:"SPD", data:[0.065], color:"#ea2329"},
            {name:"KSČM", data:[0.11], color:"#8c0000"},
            {name:"ČSSD", data:[0.11], color:"#F07D00"},
            {name:"Piráti", data:[0.125], color:"#000000"},
            {name:"ODS", data:[0.125], color:"#004494"},
            {name:"ANO", data:[0.305], color:"#261060"}
        ]

var elections = electionData.map( obj => {
            var d = {
                type: 'scatter',
                mode: 'markers',
                x: [electionDate],
                y: [obj.value * 100],
                name: "Volby: " + obj.name,
                legendgroup: obj.name,
                showlegend: false,
                marker: {
                    size: 20,
                    color: "rgba(" + hex2rgba(obj.color, 1).join(',') + ")",
                    // border: {
                    //     color: //"rgba(" + hex2rgba(obj.color).join(',') + ")",
                    //     arearatio: 1
                    // }
                }
            }
            return d
        })

var limit = [{
            x: [electionDate, data[0]['x'][data[0]['x'].length - 1]],
            y: [5, 5],
            name: '5% hranice',
            mode: 'lines',
            // showlegend: false,
            hoverinfo: 'skip',
            fill: 'tozeroy',
            line: {
                color: "red",
                dash: 'dot',
                width: 3
            }
        }]

var bounds = [];
        for (var i = 0; i < upper.length; i++) {
            bounds.push(lower[i]);
            bounds.push(upper[i]);
        }

data = bounds.concat(data);
        data = elections.concat(data);
        data = limit.concat(data);
        data = currents.concat(data);

var layout = {
            xaxis: {
                type: 'date',
                title: 'Datum průzkumu'
            },
            yaxis: {
                title: 'Volební model',
                ticksuffix: '%',
                showticksuffix: 'all' // or 'first' or 'all' (the default)
            },
            title:'Volební modely CVVM',
            showlegend: true,
            legend: {
                traceorder: 'reversed'
            },
            annotations: [
                {
                    xref: 'paper',
                    yref: 'paper',
                    x: 0.0,
                    y: 1.05,
                    xanchor: 'left',
                    yanchor: 'top',
                    text: 'Cool chart',

showarrow: true
                }
            ]
        };
        // for (var i = 0; i < parties.length; i++) {
        //     var result = {
        //         xref: 'paper',
        //         x: 0.95,
        //         y: parties[i]['data'][3] * 100,
        //         xanchor: 'left',
        //         yanchor: 'middle',
        //         text: Math.round(parties[i]['data'][3] * 100) + "%",
        //         showarrow: false,
        //         legendgroup: parties[i]['name'], // does not work
        //         font: {
        //             color: parties[i]['color']
        //         }
        //     }
        //     layout.annotations.push(result)
        // }

var config = {
            displaylogo: false,
            staticPlot: false,
            locale: 'cs'
        }

TESTER = document.getElementById('tester');
        Plotly.plot('tester', data, layout, config);
    </script>
</body>
</html>