reactjs - dataTable cols don't span to the correct width (dc.js,crossfilter, d3 v4.2.8,React) -
the datatable doesn't span required colspan/width. tried change react way in https://facebook.github.io/react/docs/dom-elements.html , entering .on('renderlet', function (table) {table.selectall style, in dc.css (dc-tabe-row,dc-table-column,.dc-data-table),by applying width on table chart etc. have:
print screen 1: 
print screen 2: 
the tablechart.js code:
import react, { proptypes } 'react'; import reactdom "react-dom"; import * d3 'd3'; import dc "dc"; import * crossfilter 'crossfilter'; import {jumbotron } 'react-bootstrap'; import functiondchelper './functiondchelper'; import {scaletime, scalelinear} 'd3-scale'; class tablechart extends react.component { componentdidmount() { var bitratetablechart = dc.datatable(this.refs.tablechart); var { datedimension } = functiondchelper.generatevalues(this.props.data); bitratetablechart .dimension(datedimension) // data table not use crossfilter group rather closure grouping function .group(function (d) { var format = d3.format('02d'); return d.bitdate.getfullyear() + '/' + format((d.bitdate.getmonth() + 1)); }) .columns( [ 'datetime', 'channel_id', 'bitrate' ]) .ordering(function (d ) { return d.bitdate; }) /// sortby(function (d) { return d.bitdate; }) // (_optional_) custom renderlet post-process chart using [d3](http://d3js.org) .on('renderlet', function (table) { table.selectall('.dc-table-group').classed('info', true); }) .size(15) bitratetablechart.render();// dc.renderall(); } render() { return( <div classname="row"> <div classname="table table-hover dc-data-table dc-table-row" ref="tablechart"> </div> </div> ) } } export default tablechart; the container.js code:
import react 'react' import reactdom "react-dom"; import reactgridlayout "react-grid-layout"; import header "../components/header.js"; import linechart "../components/linechart.js"; import timechart "../components/timechart.js"; import tablechart "../components/tablechart.js"; class dashboard extends react.component { render() { var layout = [ {i: 'a', x: 0, y: 0, w: 2, h: 2,minw: 2, maxw: 4}, {i: 'b', x: 1, y: 1, w: 3, h: 2}, {i: 'c', x: 4, y: 0, w: 1, h: 2}, {i: 'd', x: 5, y: 0, w: 1, h: 2}, {i: 'e', x: 6, y: 0, w: 1, h: 2}, {i: 'f', x: 7, y: 0, w: 1, h: 2} ]; return ( <div> <div > <linechart data={this.props.data} rangeslider={this.dctimechart}/> </div> <div > <tablechart data={this.props.data} style={divstyle} /> </div> </div> ) } } export default dashboard; the dcfunctionhelper.js code:
import crossfilter 'crossfilter'; import * d3 'd3'; import dc 'dc'; var mindate,min15,bitrateweekminintervalgroupmove,maxdate,minintervalweekbitrategroup,datedimension,dateformat,numberformat,maxbit; function nonzero_min(chart) { dc.override(chart, 'yaxismin', function () { var min = d3.min(chart.data(), function (layer) { return d3.min(layer.values, function (p) { return p.y + p.y0; }); }); return dc.utils.subtract(min, chart.yaxispadding()); }); return chart; } // 15 min interval - copied https://github.com/mbostock/d3/blob/master/src/time/interval.js var d3_date = date; function d3_time_interval(local, step, number) { function round(date) { var d0 = local(date), d1 = offset(d0, 1); return date - d0 < d1 - date ? d0 : d1; } function ceil(date) { step(date = local(new d3_date(date - 1)), 1); return date; } function offset(date, k) { step(date = new d3_date(+date), k); return date; } function range(t0, t1, dt) { var time = ceil(t0), times = []; if (dt > 1) { while (time < t1) { if (!(number(time) % dt)) times.push(new date(+time)); step(time, 1); } } else { while (time < t1) times.push(new date(+time)), step(time, 1); } return times; } function range_utc(t0, t1, dt) { try { d3_date = d3_date_utc; var utc = new d3_date_utc(); utc._ = t0; return range(utc, t1, dt); } { d3_date = date; } } local.floor = local; local.round = round; local.ceil = ceil; local.offset = offset; local.range = range; var utc = local.utc = d3_time_interval_utc(local); utc.floor = utc; utc.round = d3_time_interval_utc(round); utc.ceil = d3_time_interval_utc(ceil); utc.offset = d3_time_interval_utc(offset); utc.range = range_utc; return local; } function d3_time_interval_utc(method) { return function (date, k) { try { d3_date = d3_date_utc; var utc = new d3_date_utc(); utc._ = date; return method(utc, k)._; } { d3_date = date; } }; } // generalization of d3.time.minute copied from- https://github.com/mbostock/d3/blob/master/src/time/minute.js function n_minutes_interval(nmins) { var denom = 6e4 * nmins; return d3_time_interval(function (date) { return new d3_date(math.floor(date / denom) * denom); }, function (date, offset) { date.settime(date.gettime() + math.floor(offset) * denom); // dst breaks setminutes }, function (date) { return date.getminutes(); }); } min15 = n_minutes_interval(15); dateformat = d3.timeformat('%y/%m/%d/%h:%m'); //dateformat = d3.timeparse ('%y/%m/%d/%h:%m'); // parse date / time //var dateformat = d3.timeparse("%d-%b-%y"); numberformat = d3.format('d'); //### crossfilter dimensions function generatevalues(data) { data.foreach(function (d) { d.bitdate = new date(d.datetime); //d.datetime = dateformat.parse(d.datetime); // d.month = d3.time.month(d.bitdate); // d.week = d3.time.week(d.bitdate); d.bitrate = string(d.bitrate).match(/\d+/); //d.bitrate = +d.bitrate; }); var crossfiltereddata = crossfilter(data); var = crossfiltereddata.groupall(); // dimension full date datedimension = crossfiltereddata.dimension(function (d) { return d.bitdate; }); maxbit = d3.max(data, function (d) { return +d["bitrate"]; }); //alert(maxbit); //group bitrate per week, 15 mininterval - maintain running tallies bitrateweekminintervalgroupmove = datedimension.group(min15).reduce( /* callback when data added current filter results */ function (p, v) { ++p.count; p.bitrate = +v.bitrate; p.total += +v.bitrate; p.avg = p.count ? math.round(p.total / p.count) : 0; return p; }, /* callback when data removed current filter results */ function (p, v) { --p.count; p.bitrate = +v.bitrate; p.total -= +v.bitrate; p.avg = p.count ? math.round(p.total / p.count) : 0; return p; }, /* initialize p */ function () { return { count: 0, bitrate: 0, total: 0, avg: 0 }; } ); try { mindate = datedimension.bottom(1)[0].datetime; } catch(err) { mindate = new date("2016-06-14 0:00"); } try { maxdate = datedimension.top(1)[0].datetime; } catch(err) { maxdate = new date("2016-06-18 23:55"); } return { min15, mindate, maxdate, bitrateweekminintervalgroupmove,minintervalweekbitrategroup, datedimension, maxbit }; } export default { generatevalues, nonzero_min, dateformat, numberformat }; any appreciated !
