can't show data in my react dc bar chart

[vgurnani-systango]

@soloman1124
data beings used:
[{"time":"2017-04-10T06:54:29.970Z","temperature":53.96,"humidity":47.83,"pressure":99118.99,"soil":900.56},{"time":"2017-04-10T05:15:00.310Z","temperature":55.62,"humidity":44.08,"pressure":99122.33,"soil":893.56},{"time":"2017-04-10T03:35:32.076Z","temperature":54.83,"humidity":45.78,"pressure":99156.3,"soil":883.67},{"time":"2017-04-10T01:56:02.550Z","temperature":56.36,"humidity":42.57,"pressure":99121.34,"soil":868.44},{"time":"2017-04-10T00:16:33.596Z","temperature":68.76,"humidity":28.53,"pressure":99029.12,"soil":840.44},{"time":"2017-04-09T22:37:11.260Z","temperature":75.86,"humidity":22.12,"pressure":99003.13,"soil":799.22},{"time":"2017-04-09T20:57:42.431Z","temperature":75.8,"humidity":23.9,"pressure":99050.52,"soil":775.22},{"time":"2017-04-09T19:18:11.602Z","temperature":72.67,"humidity":25.15,"pressure":99122.48,"soil":779.89},{"time":"2017-04-09T17:38:38.624Z","temperature":66.89,"humidity":28.16,"pressure":98582.25,"soil":781},{"time":"2017-04-08T17:18:20.007Z","temperature":63.15,"humidity":29.73,"pressure":98712.93,"soil":776.67},{"time":"2017-04-08T15:38:49.374Z","temperature":57.77,"humidity":33.14,"pressure":98786.52,"soil":805.67},{"time":"2017-04-08T13:59:16.122Z","temperature":53.38,"humidity":34.62,"pressure":98784.54,"soil":840.56},{"time":"2017-04-08T12:19:42.216Z","temperature":44.3,"humidity":45.86,"pressure":98677.95,"soil":880.33},{"time":"2017-04-08T10:40:07.143Z","temperature":37.06,"humidity":58.76,"pressure":98550.98,"soil":889.78}]

import React, { Component } from 'react';
import crossfilter from 'crossfilter';
import d3 from 'd3';
import {BarChart} from 'react-dc'

class Crossfilter extends Component {
constructor() {
super();
this.state = { data : [], readings: [] };
}

componentDidMount() {
this.props.data.map((data,index)=>{
data.date = new Date(Date.parse(data.time))
data.id = index
data.humidity = data.humidity
data.pressure = data.pressure
this.state.readings.push(data)
})
}

render() {
var cross = crossfilter(this.state.readings);
var all = cross.groupAll();
var date = cross.dimension(function (d) { return d.date; });
var dates = date.group(d3.time.day);

var alldim = cross.dimension(function(d) {return d;});
var HumidityGroupStats = HumidityDimension.group().reduce(
function(p,v){
++p.count;
p.sumHumidity +=v.humidity;
p.avgHumidity = p.count ? Math.round(p.sumHumidity100 / p.count)/100 : 0;
return p;
},
function(p,v){
--p.count;
p.sumHumidity -=v.humidity;
p.avgHumidity = p.count ? Math.round(p.sumHumidity100 / p.count)/100 : 0;
return p;
},
function(){
return {count:0, sumHumidity:0, avgHumidity:0};
}
);

const {children} = this.props;



return (
     <BarChart dimension={date} group={dates} x={d3.time.scale()
    .domain([new Date(new Date()-(86400*30*1000)), new Date()])
    .rangeRound([0, 10 * 90])} xUnits={d3.time.days.utc}  elasticY={true}
    gap={3}
    round={d3.time.day.round}/>
)

}
}

export default Crossfilter;

see the bottom most bar graph is generated using your library and I can't see data unlike other bar charts I just see dates mapped on x axis & graph doesn't shows any data