/*
    Resources links
    - keenio website -> https://keen.github.io/dashboards/
    - d3 API -> https://github.com/d3/d3/blob/master/API.md
    - crossfilter API -> https://github.com/square/crossfilter/wiki/API-Reference
    - dc examples -> http://dc-js.github.io/dc.js/examples/
    - dc API -> http://dc-js.github.io/dc.js/docs/html/
*/
const lineChart = dc.lineChart("#line-chart");
const pieChart = dc.pieChart("#pie-chart");
const barChart = dc.rowChart("#bar-chart");
const barChart2 = dc.rowChart("#bar-chart2");
const lineChart2 = dc.lineChart("#line-chart2");

const log = console.log;

// const lineChart2 = dc.lineChart("#line-chart2");

d3.csv("data1.csv").then(function(data) {

        data.forEach(d => {
            d.date = new Date(d.Created);
        });
        

        //date with processed dates
        log("data:",data);

        //multi-dimensional filter
        const data2 = data;
        // console.log("xxx:",JSON.stringify(data1));

       let ndx = crossfilter(data2);

        //dimensions
        let dateDimension = ndx.dimension(function(d) { return d.date; });
        let typeDimension = ndx.dimension(function(d) { return d.types; });
        let barTypeDimension = ndx.dimension(function(d) { return d.types});
        let barTypeDimension2 = ndx.dimension(function(d) { return d.pid});
        let lineTypeDimension = ndx.dimension(function(d) { return d.class});



        //groups
        let dateGroup = dateDimension.group().reduceSum(function(d) { return d.count_files; });
        let typeGroup = typeDimension.group().reduceCount(function(d) { return d.types; });
        let barTypeGroup2 = barTypeDimension2.group().reduceCount(function(d) { return d.types; });
        let lineTypeGroup = lineTypeDimension.group().reduceCount(function(d) { 
            console.log("--->")
            return d.class; }
            );

        console.log("xxx:", barTypeGroup2.top(Infinity));

        let barTypeGroup = barTypeDimension.group();
        var reducer_time_est_max = reductio().max(function(d) { 
            // console.log("max:",d.Time_estimate);
            return parseFloat(d.t_est)
        });
        var time_est_max = reducer_time_est_max(barTypeGroup).top(Infinity);

        console.log("-=====>>", reducer_time_est_max(barTypeGroup).top(Infinity))



        //Time trend
        lineChart
            .width(300)
            .height(setHeight(lineChart))
            // .useViewBoxResizing(true)
            .elasticY(true)
            .dimension(dateDimension)
            .group(dateGroup)
            .renderVerticalGridLines(true)
            .renderHorizontalGridLines(true)
            .x(d3.scaleTime() .domain([d3.min(data, d => d.date), d3.max(data, d => d.date)]))
            .yAxisLabel("Total")
            .xAxisLabel("Time")
            .renderArea(true);

            var po = lineTypeGroup.top(Infinity);
            let res = po.map(o => o.key);
            console.log("@#$:", res);

            console.log("lineTypeGroup:", lineTypeGroup.top(Infinity));
            console.log("barTypeGroup2:", barTypeGroup2.top(Infinity));




  lineTypeGroup = lineTypeGroup.reduceCount(function(d) { 
    return d.bar; }
    );

lineTypeGroup.order(function(p) {
    return p;
});

lineTypeGroup.all = function() {
    return lineTypeGroup.top(Infinity);
}

    lineChart2
        .height(200)
        .width(lineChart2.width()*0.95) //give it a width
        // .margins({top: 10, right: 10, bottom: 20, left: 100})//give it margin left of 100 so that the y axis ticks dont cut off
        .dimension(lineTypeDimension)
        .group(lineTypeGroup) 
        .ordering(function(kv) { 
            console.log("val:",kv.value);
            return -kv.value; })
        .x(d3.scaleOrdinal( ))
        .xUnits(dc.units.ordinal)
        .interpolate('linear')
        .elasticY(true)
        .renderArea(true)
         .renderlet(function(chart){chart.selectAll("circle.dot").style("fill-opacity", 1).on('mousemove', null).on('mouseout', null);})

        // .renderTitle(true)
        .renderLabel(true)
        .xAxis().ticks(3).tickFormat(function(d) {
            return d;
        });


        //Pay types
        console.log("dategroup:",dateGroup);
        pieChart
            .width(300)
            .height(setHeight(pieChart))
            // .useViewBoxResizing(true)
            .dimension(typeDimension)
            .group(typeGroup);

        barChart
            .height(200)
        .cap(Infinity)
            .width(barChart.width()*0.95) //give it a width
            // .margins({top: 10, right: 10, bottom: 20, left: 100})//give it margin left of 100 so that the y axis ticks dont cut off
            .dimension(barTypeDimension)
            .group(reducer_time_est_max(barTypeGroup))
            .valueAccessor(function(p) { 
                return parseFloat(p.value.max) || 0;
                })  
            .ordering(function (d) {
                return -d.value.max;
            })
            .elasticX(true)
            .gap(2);
        barChart.on('preRedraw', function() {
          console.log("-=====>>", reducer_time_est_max(barTypeGroup).top(Infinity))
          console.log("-2=====>>", barChart.group().all())
 
        })

        barChart2
            .height(200)
            .width(barChart2.width()*0.95) //give it a width
            // .margins({top: 10, right: 10, bottom: 20, left: 100})//give it margin left of 100 so that the y axis ticks dont cut off
            .dimension(barTypeDimension2)
            .group(barTypeGroup2) 
            .data(function (d) {
                return d.order(function (d) {
                    return +d;
                }).top(10)
            })
            .gap(2);

        dc.renderAll();

        function setHeight(chart) {
            return chart.width() * 0.6;
        };

});