work in progress #200

src/components/charts/BarChartComponent/data.js

@@ -1,51 +1,85 @@
-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)
     .merge(bars)
         .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);
+
 };

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);
     }