{% extends 'website/base.html' %}
{% load static %}
{% block title %}
    Vega-Lite Bar Chart
{% endblock %}

{% block javascript %}
    <script src="https://cdn.jsdelivr.net/npm/vega@4"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@3.0.0-rc12"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
    <script>
        // Assign the specification to a local variable vlSpec.
        var vlSpec = {
                $schema: 'https://vega.github.io/schema/vega-lite/v3.json',
                width: 1600,
                height: 300,

                encoding: {
                    x: {
                        field: 'start_date',
                        type: 'temporal',
                        axis: {
                            title: '',
                            format: "%H:%M",
                            labelFontSize: 16
                        },
                        scale: {
                            'domain': ["2018_02_14_5:00", "2018_02_14_23:00"]
                        }

                    },

                    x2: {
                        field: 'end_date',
                        type: 'temporal',
                        scale: {
                            'domain': ["2018_02_14_5:00", "2018_02_14_23:00"]
                        }
                    },
                    y: {
                        field: 'service',
                        type: 'nominal',
                        axis: {
                            title: 'Services',
                            titleFontSize: 18,
                            labelFontSize: 16
                        }
                    }
                },
                data: {
                    format: {
                        type: "json",
                        parse: {
                            "start_date": "date:'%Y_%m_%d_%H:%M'",
                            "end_date": "date:'%Y_%m_%d_%H:%M'",
                            "middle": "date:'%Y_%m_%d_%H:%M'"
                        }
                    },
                    values: [
                        {
                            service: 'JOIGNY 16 (B = 60)',
                            start_date: "2018_02_14_17:10",
                            start_place_long: "JOIGNY (89) - COLLEGE MARIE NOEL - 7 BOULEVARD GODALMING",
                            start_place_short: "JOIGNY",
                            end_date: "2018_02_14_17:35",
                            end_place_long: "JOIGNY (89) - LYCEE DAVIER - PKG 21 - AVENUE PIERRE CURIE",
                            end_place_short: "JOIGNY",
                            middle: "2018_02_14_17:22",
                            ratio: 0.33,
                            nb_child: 20,
                            ratio_child: "20/60",

                            segment: "89-526NAVR\t"
                        }, {
                            service: 'JOIGNY 19 (B = 60)',
                            start_date: "2018_02_14_17:05",
                            start_place: "JOIGNY (89) - COLLEGE MARIE NOEL - 7 BOULEVARD GODALMING",
                            start_place_short: "JOIGNY",
                            end_place: "JOIGNY (89) - LECHERES",
                            end_place_short: "JOIGNY",
                            end_date: "2018_02_14_17:47",
                            middle: "2018_02_14_17:26",
                            ratio: 0.66,
                            nb_child: 40,
                            ratio_child: "40/60",
                            segment: "89-JOI-R\t "
                        },
                        {
                            service: 'JOIGNY 19 (B = 60)',
                            start_date: "2018_02_14_8:05",
                            start_place: "BRANCHES (89) - MAIRIE ABRI - ROUTE DE GUERCHY",
                            end_date: "2018_02_14_8:25",
                            end_place: "BRANCHES (89) - ECOLE - 1 RTE DE GUERCHY",
                            end_place_short: "BRANCHES",
                            start_place_short: "BRANCHES",
                            middle: "2018_02_14_8:15",
                            ratio: 0.33,
                            nb_child: 20,
                            ratio_child: "20/60",

                            segment: "89-316-A\t"
                        }, {
                            service: 'JOIGNY 16 (B = 60)',
                            start_date: "2018_02_14_16:25",
                            start_place: "VERLIN (89) - ECOLE - RUE DE SAINT JULIEN",
                            end_date: "2018_02_14_16:55",
                            end_place: "VERLIN (89) - ECOLE - RUE DE SAINT JULIEN",
                            start_place_short: "BRANCHES",
                            end_place_short: "BRANCHES",
                            middle: "2018_02_14_16:40",
                            ratio: 0.58,
                            nb_child: 35,
                            ratio_child: "35/60",
                            segment: "89-469-R\t"
                        }
                        , {
                            service: 'JOIGNY 19 (B = 60)',
                            start_date: "2018_02_14_6:05",
                            start_place: "JOIGNY dazd(89) - COLLEGE MARIE NOEL - 7 BOULEVARD GODALMING",
                            start_place_short: "JOIGazdazdNY",
                            end_place: "JOIGNY (89) adad- LECHERES",
                            end_place_short: "JOIGazdazdNY",
                            end_date: "2018_02_14_6:47",
                            middle: "2018_02_14_6:26",
                            ratio: 0.,
                            nb_child: 0,
                            ratio_child: "40/60",
                            segment: "89-JOI-R\t "
                        }, {
                            service: 'JOIGNY 19 (B = 60)',
                            start_date: "2018_02_14_6:05",
                            start_place: "JOIGNY dazd(89) - COLLEGE MARIE NOEL - 7 BOULEVARD GODALMING",
                            start_place_short: "JOIGazdazdNY",
                            end_place: "JOIGNY (89) adad- LECHERES",
                            end_place_short: "JOIGazdazdNY",
                            end_date: "2018_02_14_6:47",
                            middle: "2018_02_14_6:26",
                            ratio: 1,
                            nb_child: 0,
                            ratio_child: "40/60",
                            segment: "89-JOI-R\t "
                        }
                    ]
                },
                layer: [
                    // Bars
                    {
                        mark: {
                            type: 'bar'

                        },
                        encoding: {
                            color: {
                                field: "ratio",
                                type: "quantitative",
                                scale: {
                                    "scheme": {
                                        name: "redblue",
                                        extent: [0., 1]
                                    }
                                }
                            },
                            tooltip: [{
                                field: "segment",
                                title : "Segment",
                                type: "ordinal"
                            }, {
                                field: "start_place",
                                title : 'Départ',
                                type: "ordinal"
                            }, {
                                field: "end_place",
                                title : 'Arrivée',
                                type: "ordinal"
                            }, {
                                field: "start_date",
                                type: "temporal",
                                title : 'Heure départ',
                                timeUnit: "hoursminutes"
                            }, {
                                field: "end_date",
                                title : 'Heure arrivée',
                                type: "temporal",
                                timeUnit: "hoursminutes"
                            }, {
                                field: "nb_child",
                                title : "Nombre d'enfants",
                                type: "quantitative"
                            }]
                        },
                        selection: {
                            what_the_fuck: {
                                type: "interval",
                                bind: "scales",
                                zoom: "wheel!",
                                "translate": "[mousedown, window:mouseup] > window:mousemove!",
                            }
                        }
                    },

                    // Segment name
                    {
                        mark: {
                            type: "text",
                            align: "center",
                            baseline: "middle",
                            fontSize: 12,
                            color: "black",
                            dx: 3,
                            fontWeight: "bold"
                        },
                        encoding: {
                            text: {
                                field: "segment",
                                type: "nominal"
                            },
                            x: {
                                field: 'middle',
                                type: 'temporal'
                            }
                        }
                    },// Segment name
                    {
                        mark: {
                            type: "text",
                            align: "center",
                            baseline: "middle",
                            fontSize: 12,
                            color: "black",
                            dx: 3,
                            dy: 15,
                            fontWeight: "bold"
                        },
                        encoding: {
                            text: {
                                field: "ratio_child",
                                type: "nominal"
                            },
                            x: {
                                field: 'middle',
                                type: 'temporal'
                            }
                        }
                    },

                    {
                        mark: {
                            type: "text",
                            align: "left",
                            baseline: "middle",
                            dx: 3,
                            dy: -50,
                            fontWeight: "bold"

                        },
                        encoding: {
                            text: {
                                field: "start_date",
                                type: "temporal",
                                timeUnit: "hoursminutes"
                            }
                        }
                    },
                    // end time text
                    {
                        // Segment name
                        mark: {
                            type: "text",
                            align: "right",
                            baseline: "middle",
                            dx: -3,
                            dy: -35,
                            fontWeight: "bold"
                        },
                        encoding: {
                            x: {
                                field: 'end_date',
                                type: 'temporal',
                                axis: {
                                    title: ''
                                }
                            },
                            text: {
                                field: "end_date",
                                type: "temporal", timeUnit: "hoursminutes"
                            }
                        }
                    },
                    {
                        mark: {
                            type: "text",
                            align: "left",
                            baseline: "middle",
                            dx: 3,
                            dy: 35,
                            fontWeight: "bold"
                        },
                        encoding: {
                            text: {
                                field: "start_place_short",
                                type: "nominal"
                            }
                        }
                    },
                    {
                        mark: {
                            type: "text",
                            align: "right",
                            baseline: "middle",
                            dx: -3,
                            dy: 50,
                            fontWeight: "bold"

                        },
                        encoding: {
                            x: {
                                field: 'end_date',
                                type: 'temporal',
                                axis: {
                                    title: ''
                                }
                            },
                            text: {
                                field: "end_place_short",
                                type: "nominal"
                            }
                        }
                    }

                ]
            }
        ;

        // Embed the visualization in the container with id `vis`
        vegaEmbed('#vis', vlSpec);
    </script>

{% endblock %}
{% block stylesheet %}
    <style media="screen">
        /* Add space between Vega-Embed links  */
        .vega-actions a {
            margin-right: 5px;
        }
    </style>
    <link rel="stylesheet" href="{% static 'website/css/example_graphicage.css' %}"/>

{% endblock %}
{% block content %}
    <div class="row justify-content-md-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header header-elements-inline">
                    <h2> Exemple de graphicage dynamique</h2>
                </div>
                <div class="card-body scrollable-image">
                    <div id="vis">
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}