These are chat archives for jdubray/sam

18th
Apr 2017
Jean-Jacques Dubray
@jdubray
Apr 18 2017 17:05

@pfurini I am coincidentally building a dashboard with C3 graphs and DataTables tables and so far SAM works like a charm.
Step 1: The theme generates basic structure and instantiates corresponding objects (graphs and tables) (this is called by State.render)
Step 2: The display function (in charge of displaying the state representation has been computed by State.render) has a post-processing step where the corresponding DataTables are made

Theme.js creates the basic HTML state representation

       table(params) {
        params.id         = params.id             || newId('table-') ;   // table id
                 ....
                // register table for DataTables magic
                dataTables.push({type: params.type, id: params.id})
        // Headers which start with ! are hidden
        return `
                    <div class="col-lg-${col} col-md-${col} col-sm-${col} col-xs-${col}">
                        <div class="panel panel-blue">
                            <div class="panel-heading">
                                <h4>${params.title || ''}</h4>
                            </div>
                            <div class="panel-body">
                                <div class="${tableType}">
                                    <table id="${params.id}" class="table ${striped} ${bordered} ${margin}" ...

                                                         ...

My standard display method (please note the advanced vdom algorithm...)

            var display = function(representation) {
                    preparePage(model) ;
                    if (representation.header) { document.getElementById('header-representation').innerHTML = representation.header ; }
                    if (representation.page) { document.getElementById('page-representation').innerHTML = representation.page ; }
                    if (representation.footer) { document.getElementById('footer-representation').innerHTML = representation.footer ; }
                    initElements() ;
                    checkBackButton(model) ;
            }

As a post-processing step (to display) InitElement:

       dataTables.forEach(function(table) {
            if (!table.initialized) {
                      table.initialized = true ;
                      table.id = table.id || 'xyz' ;
                      (table.type === 'responsive')     ? $(`#${table.id}`).DataTable({
                                                            responsive: true,
                                                            'iDisplayLength': table.displayLength || 5
                                                        })
Same technique works for C3 graphs