diff --git a/src/components/charts/BarChartComponent/data.js b/src/components/charts/BarChartComponent/data.js index 010fb5c68..09e7ead27 100644 --- a/src/components/charts/BarChartComponent/data.js +++ b/src/components/charts/BarChartComponent/data.js @@ -1,22 +1,36 @@ -const mapDataset = (dataset, labelField) => Object.keys(dataset) +const mapDataset = (dataset, prevData, labelField) => Object.keys(dataset) .filter(key => key[0] !== '_' && key !== labelField) .map(key => ({ key, - value: dataset[key] + value: dataset[key], + valuePrev: prevData[key] })); export const drawData = (svg, dimensions, ranges, data, labelField, initialAnimation, prev) => { + + // console.log('----Draw----'); + // console.log(prev); + // console.log(data); + console.log('**************************************'); + let chartData = []; + data.map((item, index) => { + // console.log(item); + // console.log(index); + chartData.push({data: item, prevData: prev ? prev[index] : 0}); + }); + + // console.log(chartData); const groups = svg.select('g.datasets') .selectAll('g') - .data(data); + .data(chartData); const bars = groups.enter().append('g') .classed('bar-group', true) .merge(groups) .attr('transform', d => 'translate(' + - ranges.x0(d[labelField]) + ', 0)') + ranges.x0(d.data[labelField]) + ', 0)') .selectAll('rect') - .data(d => mapDataset(d, labelField)) + .data(d => mapDataset(d.data, d.prevData, labelField)) bars.enter().append('rect') .classed('bar', true) @@ -24,28 +38,48 @@ export const drawData = (svg, dimensions, ranges, data, labelField, initialAnima .attr('x', d => ranges.x1(d.key)) .attr('width', ranges.x1.bandwidth()) - .attr('y', initialAnimation ? dimensions.height : prev => - { console.log(ranges.y(prev.value)); - console.log(dimensions.height); - console.log('-------'); + .attr('y', initialAnimation ? dimensions.height : d => { + console.log(d.value); + + + // console.log(dimensions.height); + - return dimensions.height - 20 - // return dimensions.height - ranges.y(prev.value) + return ranges.y(d.value) + // return dimensions.height - ranges.y(d.value) // ranges.y(d.value) } ) - .attr('height', initialAnimation ? 0 : prev => { - return 20; - // return ranges.y(prev.value) + .attr('height', initialAnimation ? 0 : d => { + // console.log(ranges.y(d.value)); + + console.log('--------------------------'); + + return dimensions.height - ranges.y(d.value); + // return ranges.y(d.value) // dimensions.height - ranges.y(d.value) + } ) .transition() .duration(6000) - .attr('y', d => ranges.y(d.value)) + .attr('y', d => { + console.log(d.value); + return ranges.y(d.value); + } ) .attr('height', d => dimensions.height - ranges.y(d.value)) + + + // .attr('y', initialAnimation ? d => ranges.y(d.value) : d => 40) + // .attr('height', initialAnimation ? d => dimensions.height - ranges.y(d.value) : d => dimensions.height - 40) + .attr('fill', d => ranges.z(d.key)) + + + // console.log("============================"); + // console.log(prev); + }; \ No newline at end of file diff --git a/src/components/charts/BarChartComponent/index.js b/src/components/charts/BarChartComponent/index.js index 835c5c6bf..78b795b5c 100644 --- a/src/components/charts/BarChartComponent/index.js +++ b/src/components/charts/BarChartComponent/index.js @@ -69,6 +69,10 @@ class BarChartComponent extends Component { const { data, groupBy } = this.props; const { dimensions, ranges } = this.prepare(); + // console.log('----componentDraw----'); + // console.log(prev); + // console.log(data); + drawData(this.svg, dimensions, ranges, data, groupBy.fieldName, initialAnimmation, prev); }