D3 v4 Bar chart shows 1 pixel wide bars - dc.js

Question

I am new to all D3/react coding. I am converting D3 v3 example to D3 v4 (React-DC). I am able to convert for Pie chart and Row chart. But I am stuck at Bar Chart and Area Chart. It seems to be a minor issue, as I can see the rendered charts but with following issues (sorry in advance for a lengthy content):
Bar chart: The bars are 1 pixel wide. I checked on DC js FAQ page in github, they say I have to set xUnits. But, I have xUnits defined, but still it won't work.
Area chart (Stacked): Only shows one? I don't see the rest of the stacks.
I converted this working d3.js v3 example
<BarChart
dimension={byYear}
group={byYearGroup}
x={d3.time.scale()}
renderHorizontalGridLines={true}
elasticX={true}
xUnits={d3.time.years}
ordinalColors={colors}
/>
<AreaChart
dimension={byYear}
group={rockByYearGroup}
x={d3.time.scale()}
renderHorizontalGridLines={true}
elasticX={true}
xUnits={d3.time.years}
renderArea={true}
stack={[popByYearGroup, funkSoulByYearGroup, electroByYearGroup, hipHopByYearGroup]}
xyTipsOn={true}
brushOn={false}
ordinalColors={colors}
/>
Output:
to this d3.js v4 example
<BarChart
dimension={byYear}
group={byYearGroup}
x={d3.scaleTime()}
renderHorizontalGridLines={true}
elasticX={true}
xUnits={d3.timeYears}
ordinalColors={colors}
/>
<AreaChart
dimension={byYear}
group={rockByYearGroup}
x={d3.scaleTime()}
renderHorizontalGridLines={true}
elasticX={true}
xUnits={d3.timeYears}
renderArea={true}
stack={[popByYearGroup, funkSoulByYearGroup, electroByYearGroup, hipHopByYearGroup]}
xyTipsOn={true}
brushOn={false}
ordinalColors={colors}
/>
Output:
These are my imports on the page:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import crossfilter from 'crossfilter'
import {BarChart, AreaChart, PieChart, RowChart, ScatterPlot, SeriesChart} from './reactdc/react-dc'
import './reactdc/react-dc.css'
import albums from './data/albums'
import * as d3 from 'd3';
import dc from 'dc'
Also, I have converted the coordinate-grid-mixin.js to v4 standards:
import React from 'react'
import PropTypes from 'prop-types'
import {compose, withProps} from '../utils'
import colorMixin from './color-mixin'
import marginMixin from './margin-mixin'
import baseMixin from './base-mixin'
const coordinateGridMixin = withProps({
brushOn: PropTypes.bool,
clipPadding: PropTypes.number,
elasticX: PropTypes.bool,
elasticY: PropTypes.bool,
focus: PropTypes.arrayOf(PropTypes.number),
mouseZoomable: PropTypes.bool,
//rangeChart??????
renderHorizontalGridLines: PropTypes.bool,
renderVerticalGridLines: PropTypes.bool,
round: PropTypes.func,
useRightYAxis: PropTypes.bool,
x: PropTypes.any.isRequired, // TO DO : PropTypes.any d3 quantitive scale or ordinal scale
xAxis: {
propTypes: PropTypes.shape({
orient: PropTypes.string,
ticks: PropTypes.array,
tickValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, Date])),
tickSize: PropTypes.arrayOf(PropTypes.number),
innerTickSize: PropTypes.number,
outerTickSize: PropTypes.number,
tickPadding: PropTypes.number,
tickFormat: PropTypes.func
}),
setter(method, val){
Object.entries(val).forEach(([key, value]) => method()[key](value))
}
},
xAxisLabel: {
propTypes: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
labelText: PropTypes.string.isRequired,
padding: PropTypes.number.isRequired
})]),
setter(method, val){
if (val.labelText && val.padding){
method(val.labelText, val.padding)
}else{
method(val)
}
}
},
xAxisPadding: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
xAxisUnit: PropTypes.string,
y: PropTypes.any, // TO DO : d3 scale
xUnits: PropTypes.func,
yAxis: {
propTypes: PropTypes.shape({
orient: PropTypes.string,
ticks: PropTypes.array,
tickValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, Date])),
tickSize: PropTypes.arrayOf(PropTypes.number),
innerTickSize: PropTypes.number,
outerTickSize: PropTypes.number,
tickPadding: PropTypes.number,
tickFormat: PropTypes.func
}),
setter(method, val){
Object.entries(val).forEach(([key, value]) => method()[key](value))
}
},
yAxisLabel: {
propTypes: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
labelText: PropTypes.string.isRequired,
padding: PropTypes.number.isRequired
})]),
setter(method, val){
if (val.labelText && val.padding){
method(val.labelText, val.padding)
}else{
method(val)
}
}
},
yAxisPadding: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
zoomOutRestrict: PropTypes.bool,
zoomScale: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.arrayOf(PropTypes.instanceOf(Date))])
})
export default compose(coordinateGridMixin, colorMixin, marginMixin, baseMixin)
I am not sure what am I missing. There are not many v4 example on web either.
My library versions if it would help:
{
"dependencies": {
"crossfilter": "^1.3.12",
"d3": "^4.13.0",
"d3-scale": "^2.0.0",
"d3-shape": "^1.2.0",
"dc": "^2.1.9",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.0",
"recompose": "^0.26.0"
}
Update #1
I did some more digging and found that the following line of code in dc.js file return nothing.
var units = _chart.xUnits()(_chart.x().domain()[0], _chart.x().domain()[1], _chart.x().domain());
When I step into this line, it calls a range function (a modified version from newer d3.js (v.4.13.0) -> interval.js file) which is moved to interval.js file and expects step value as the last parameter.
interval.range = function(start, stop, step) {
var range = [], previous;
start = interval.ceil(start);
step = step == null ? 1 : Math.floor(step);
if (!(start < stop) || !(step > 0)) return range; // also handles Invalid Date
do range.push(previous = new Date(+start)), offseti(start, step), floori(start);
while (previous < start && start < stop);
return range;
};
as compared to this older version which works because the last parameter accepts an array
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;
}