const log = console.log;
var focus = new dc.barChart('#focus');
var range = new dc.barChart('#range');


var dim = {},     // Stores all crossfilter dimensions
groups = {},  // Stores all crossfilter groups
cf;



 function ordinal_to_linear_group(group, sort) {
    var _ord2int, _int2ord;
    return {
        all: function() {
            var ret = group.all();
            if(sort) // NEW
              ret = ret.slice().sort(sort);
            _ord2int = {};
            _int2ord = [];
            ret.forEach(function(d, i) {
                _ord2int[d.key] = i;
                _int2ord[i] = d.key;
            });
            return ret;
        },
        ord2int: function(o) {
            if(!_ord2int)
                this.all();
            return _ord2int[o];
        },
        int2ord: function(i) {
            if(!_int2ord)
                this.all();
            return _int2ord[i];
        }
    };
}



d3.csv("info.csv").then(function(data) {
        // console.log("data:",data);

        data.forEach(d => {
            // var parts = d.Created.split('/');
            d.date = new Date(d.Created)[0];
        });
        draw_charts(data);
});

function draw_charts(data)
{


 

    cf = crossfilter(data); // Main crossfilter objects





        let barTypeDimension = cf.dimension(function(d) { return d.cid});

        let barTypeGroup = barTypeDimension.group();
        var reducer_time_est_max = reductio().max(function(d) { 
            return parseFloat(d.probability)
        });
        var pred_prob_max = reducer_time_est_max(barTypeGroup).top(Infinity);
        console.log('==>', pred_prob_max);


        var group = ordinal_to_linear_group(barTypeGroup, (a,b) => d3.descending(a.value.max, b.value.max));
  
        var linear_domain = [-0.5, 100 - 0.5];
        focus
            .width(1000).height(330)
            .margins({left: 60, top: 0, right: 10, bottom: 145})
            .x(d3.scaleLinear().domain(linear_domain))
            .xUnits(dc.units.integers)
            // .x(d3.scaleOrdinal())
            // .xUnits(dc.units.ordinal)
             .valueAccessor(function(p) { 

                 return parseFloat(p.value.max) || 0; 
                 })  
            .ordering(function (d) {
          
             console.log("workssss");
                return -d.value.max || 0;
            })
            
            .keyAccessor(kv => group.ord2int(kv.key))
            .centerBar(true)
            .yAxisLabel('counts')
            .elasticY(true)
            .brushOn(false)
            .dimension(barTypeDimension)
            .mouseZoomable(true)
            .zoomScale([4,8])
            .group(reducer_time_est_max(barTypeGroup))
            .title(kv => kv.key)
            .transitionDuration(0);

        focus.xAxis()
            .tickFormat(function(d) { return group.int2ord(d); });

        // equivalent of javascript: link, don't know why those didn't work
        d3.select('#reset-focus').on('click', () => {
          focus.filterAll();
          dc.redrawAll();
        })
        d3.select('#reset-all').on('click', () => {
          dc.filterAll();
          dc.redrawAll();
        })

        // unfortunately we have to recreate click-selection, since a focus chart
        // ordinarily filters to the visible area (and we don't want a brush either)
        var focusFilter = [];
        focus.filterHandler(function() {}); // disable built-in filtering
        focus.applyFilter = function() { // non-standard method
            if(focusFilter.length)
                this.dimension().filterFunction(function(k) {
                    return focusFilter.includes(k);
                });
            else this.dimension().filter(null);
        };
        focus.filterAll = function() {
            focusFilter = [];
            this.applyFilter();
        };
        focus.fadeDeselectedArea = function (brushSelection) {
            var _chart = this;
            var bars = _chart.chartBodyG().selectAll('rect.bar');
            if (focusFilter.length) {
                bars.classed(dc.constants.SELECTED_CLASS, function (d) {
                    return focusFilter.includes(d.data.key);
                });
                bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
                    return !focusFilter.includes(d.data.key);
                });
            } else {
                bars.classed(dc.constants.SELECTED_CLASS, false);
                bars.classed(dc.constants.DESELECTED_CLASS, false);
            }
        };
        focus.on('pretransition', function(chart) {
            chart.selectAll('rect.bar').on('click.ordinal-select', function(d) {
                var i = focusFilter.indexOf(d.data.key);
                if(i >= 0)
                    focusFilter.splice(i, 1);
                else
                    focusFilter.push(d.data.key);
                chart.applyFilter();
                chart.redrawGroup();
            });
        });

        focus.on('preRedraw', function(chart) {
            var domain = chart.x().domain(),
                min = Math.ceil(domain[0]), max = Math.floor(domain[1]);
            chart.xAxis().tickValues(d3.range(min, max+1));
        });

        range.filterHandler(function() {}); // disable built-in filtering
        range
            .margins({left: 74, top: 0, right: 20, bottom: 2})
            .width(1000).height(20)
            .x(d3.scaleLinear().domain(linear_domain))
            .xUnits(dc.units.integers)
            .keyAccessor(kv => group.ord2int(kv.key))
            .elasticY(true)
            .brushOn(true)
            .dimension(barTypeDimension)
            .group(barTypeGroup)
            .valueAccessor(function(p) { 

                 return parseFloat(p.value.max) || 0; 
                 }) 
            .transitionDuration(0);

        focus
            .rangeChart(range)


    dc.renderAll();


}