/* Round float to two decimals only */

function roundToTwo(num) {
    return +(Math.round(num + "e+2")  + "e-2");
}

function build_chart(div_selector, data_url, entity_name, category_type) {

    const main_elt = document.getElementById("main")

    const margin = {top: 60, right: 150, bottom: 200, left: 90},

        width = main_elt.offsetWidth * 0.95 - margin.left - margin.right,

        height = 600 - margin.top - margin.bottom;

    const height_ratio = 1.2;    // how murch room to give above chart for lisibility

    const tooltip_offset = {dx: 0, dy: 100}
    const tooltip_offset_dot = {dx: 20, dy: 60}

    const y_ticks_num = 5        // dont show to many y ticks for lisibility

    const legendRectSize = 15; // size of rectangle in legend

    // const legend_cell_size = 15; // size of legend colored scare
    // const legend_x = width + 20; // begin legend a bit after the end of the chart
    // const legend_y = 600 - margin.bottom + 20; // begin legend a bit after the end of the chart

    const dot_radius = 6;        // size of total line dot

    const xScale = d3.scaleBand()
        .range([0, width])

        .padding(0.4);

    const yScale = d3.scaleLinear()

        .range([height, 0]);

    var colorScale = d3.scaleOrdinal([]); //  Will be really set later by category type

    //
    // Configure chart by the category given as arg
    //

    var chart_title = ""
    var category_title = ""

    var draw_total_line = () => void 0;
    var draw_categories_bars = () => void 0;

    if (category_type == 'capacity') {

        chart_title = "Charges par fonction"
        category_title = "Fonction"
        //draw_total_line
        draw_categories_bars = draw_categories_grouped

        colorScale = d3.scaleOrdinal(d3.schemeSet3);