vis-init.js

/**
 * Copyright (c) 2019
 *
 * @summary d3 script for charts of AggreSet
 * @author Elitza Vasileva
 * @author Bernhard Pointner
 */

let cf;
let charts = [];
let dataTable = null;

document.addEventListener("DOMContentLoaded", function(e) {
    console.time("Time of whole init process");

    // init data table
    //https://datatables.net/
    dataTable = $('#vis-data-table').DataTable({
        paging: true, // false to disable pagination (or any other option)
        searching: true,
        sort: false,
        "columnDefs": [
            { "name": "ID",   "targets": "mId" },
            { "name": "Title",  "targets": "t" },
            { "name": "Rating", "targets": "rating" },
            { "name": "Watched",  "targets": "watched" },
            { "name": "Genres",  "targets": "genres" }
        ]
    });

    /*

        "columns": [
            { "name": "mId" },
            { "name": "t" },
            { "name": "rating" },
            { "name": "watched" }
        ]
     */

    // Client data loader (csv)
    let data_csv = new DataCSV();
    data_csv.readAll(init);
});
/**
 * Initializes all the charts and the crossfilter by a response obtained by the data reading
 * @param res
 */
function init(res) {

    cf = new Crossfilter(res);

    let aggreSet = new VisChart("aggreset", "Relations in Genres", "", "#dummy-main-vis", ".main-vis-container",
        chartTypes.AGGRESET, true, cf.dimensions.genres, cf.groups.genres, cf.descriptions.genres, cf.filters.genres, cf.selected.genres, cf.hovered.genres, cf.filterCustomData.bind(cf), updateAll, previewAll);
    aggreSet.initChart();


    let visCategories = new VisChart("vis-categories", "Genres", "", "#dummy-categories", ".categories-vis-container",
        chartTypes.HORIZONTAL_BAR, true, cf.dimensions.genres, cf.groups.genres, cf.descriptions.genres, cf.filters.genres, cf.selected.genres, cf.hovered.genres, cf.filterCustomData.bind(cf), updateAll, previewAll);
    visCategories.initChart();


    let genresPerMovie = new VisChart("vis-number-genres", "# of Genres", "", "#dummy-filter", ".filter-vis-container>div",
        chartTypes.VERTICAL_BAR, false, cf.dimensions.num_genres, cf.groups.num_genres, cf.descriptions.num_genres, cf.filters.num_genres, cf.selected.num_genres, cf.hovered.num_genres, cf.filterCustomData.bind(cf), updateAll, previewAll);
    genresPerMovie.initChart();

    let ratings = new VisChart("vis-ratings", "Ratings", "(acc. method: round)", "#dummy-filter", ".filter-vis-container>div",
        chartTypes.VERTICAL_BAR, false, cf.dimensions.ratings, cf.groups.ratings, cf.descriptions.ratings, cf.filters.ratings, cf.selected.ratings, cf.hovered.ratings, cf.filterCustomData.bind(cf), updateAll, previewAll);
    ratings.initChart();

    let watched = new VisChart("vis-watched", "Watched", "(acc. method: interval)", "#dummy-filter", ".filter-vis-container>div",
        chartTypes.VERTICAL_BAR, false, cf.dimensions.watched, cf.groups.watched, cf.descriptions.watched, cf.filters.watched, cf.selected.watched, cf.hovered.watched, cf.filterCustomData.bind(cf), updateAll, previewAll);
    watched.initChart();


    charts.push(aggreSet);
    charts.push(visCategories);
    charts.push(genresPerMovie);
    charts.push(ratings);
    charts.push(watched);

    updateDataTable();

    console.timeEnd("Time of whole init process");
}

/**
 * Update method for all the charts
 */
function updateAll(update_data) {
    charts.forEach(el => {
        //console.log(el);
        el.update();
    });

    if(update_data)
        updateDataTable();
}

/**
 * Preview method for all the charts
 * @param reset  if true reset preview sata to active data
 */
function previewAll(reset) {
    charts.forEach(el => {
        //console.log(el);
        el.preview(reset);
    });
}

/**
 * Update global data table
 */
function updateDataTable() {
    let rows = cf.getAllFilteredRows();

    dataTable.clear();

    rows.forEach((row,i) => {
        dataTable.row.add( [
            row.mId,
            row.t,
            row.rating,
            row.watched,
            cf.genres.filter(el=>row[cf.cat_identifier+el.key]).map(el=>el.title).join(", ")
        ])
    });

    dataTable.draw();
}