From: Tanner Linsley Date: Tue, 12 May 2015 00:12:44 +0000 (-0600) Subject: Bar attempt #5 X-Git-Tag: v2.0-alpha~34^2 X-Git-Url: http://git.ipfire.org/gitweb/?a=commitdiff_plain;h=refs%2Fpull%2F1113%2Fhead;p=thirdparty%2FChart.js.git Bar attempt #5 --- diff --git a/src/Chart.Bar.js b/src/Chart.Bar.js index 385131acc..0bd7b7e6b 100644 --- a/src/Chart.Bar.js +++ b/src/Chart.Bar.js @@ -83,6 +83,7 @@ this.eachBars(function(bar){ bar.restore(['fillColor', 'strokeColor']); }); + helpers.each(activeBars, function(activeBar){ activeBar.fillColor = activeBar.highlightFill; activeBar.strokeColor = activeBar.highlightStroke; @@ -91,14 +92,18 @@ }); } + + //Declare the extension of the default point, to cater for the options passed in to the constructor this.BarClass = Chart.Rectangle.extend({ - strokeWidth : this.options.barStrokeWidth, - showStroke : this.options.barShowStroke, - ctx : this.chart.ctx + ctx : this.chart.ctx, + _vm: {} }); - //Create a new point for each piece of data + // Build Scale + this.buildScale(data.labels); + + //Create a new bar for each piece of data helpers.each(this.data.datasets,function(dataset,datasetIndex){ dataset.metaData = []; helpers.each(dataset.data,function(dataPoint,index){ @@ -106,54 +111,39 @@ },this); },this); - + // Set defaults for bars this.eachBars(function(bar, index, datasetIndex){ helpers.extend(bar, { - value : this.data.datasets[datasetIndex].data[index], - label : this.data.labels[index], - datasetLabel: this.data.datasets[datasetIndex].label, - strokeColor : this.data.datasets[datasetIndex].strokeColor, - fillColor : this.data.datasets[datasetIndex].fillColor, - highlightFill : this.data.datasets[datasetIndex].highlightFill || this.data.datasets[datasetIndex].fillColor, - highlightStroke : this.data.datasets[datasetIndex].highlightStroke || this.data.datasets[datasetIndex].strokeColor + width : this.scale.calculateBarWidth(this.data.datasets.length), + x: this.scale.calculateBarX(this.data.datasets.length, datasetIndex, index), + y: this.scale.endPoint, }); + // Copy to view model bar.save(); }, this); - this.buildScale(data.labels); - this.BarClass.prototype.base = this.scale.endPoint; - this.update(); - - this.render(); }, update : function(){ - //Create a new point for each piece of data - helpers.each(this.data.datasets,function(dataset,datasetIndex){ - dataset.metaData = dataset.metaData || []; - helpers.each(dataset.data,function(dataPoint,index){ - dataset.metaData[index] = dataset.metaData[index] || new this.BarClass(); - },this); - },this); + this.scale.update(); this.eachBars(function(bar, index, datasetIndex){ helpers.extend(bar, { width : this.scale.calculateBarWidth(this.data.datasets.length), x: this.scale.calculateBarX(this.data.datasets.length, datasetIndex, index), - y: this.scale.endPoint, + y: this.scale.calculateY(this.data.datasets[datasetIndex].data[index]), value : this.data.datasets[datasetIndex].data[index], label : this.data.labels[index], datasetLabel: this.data.datasets[datasetIndex].label, strokeColor : this.data.datasets[datasetIndex].strokeColor, fillColor : this.data.datasets[datasetIndex].fillColor, highlightFill : this.data.datasets[datasetIndex].highlightFill || this.data.datasets[datasetIndex].fillColor, - highlightStroke : this.data.datasets[datasetIndex].highlightStroke || this.data.datasets[datasetIndex].strokeColor + highlightStroke : this.data.datasets[datasetIndex].highlightStroke || this.data.datasets[datasetIndex].strokeColor, + _start: undefined }); - bar.save(); }, this); - this.scale.update(); this.render(); }, @@ -162,17 +152,22 @@ helpers.each(dataset.metaData, callback, this, datasetIndex); },this); }, + eachValue : function(callback){ + helpers.each(this.data.datasets,function(dataset, datasetIndex){ + helpers.each(dataset.data, callback, this, datasetIndex); + },this); + }, getBarsAtEvent : function(e){ var barsArray = [], eventPosition = helpers.getRelativePosition(e), datasetIterator = function(dataset){ - barsArray.push(dataset.bars[barIndex]); + barsArray.push(dataset.metaData[barIndex]); }, barIndex; for (var datasetIndex = 0; datasetIndex < this.data.datasets.length; datasetIndex++) { - for (barIndex = 0; barIndex < this.data.datasets[datasetIndex].bars.length; barIndex++) { - if (this.data.datasets[datasetIndex].bars[barIndex].inRange(eventPosition.x,eventPosition.y)){ + for (barIndex = 0; barIndex < this.data.datasets[datasetIndex].metaData.length; barIndex++) { + if (this.data.datasets[datasetIndex].metaData[barIndex].inRange(eventPosition.x,eventPosition.y)){ helpers.each(this.data.datasets, datasetIterator); return barsArray; } @@ -186,8 +181,8 @@ var dataTotal = function(){ var values = []; - self.eachBars(function(bar){ - values.push(bar.value); + self.eachValue(function(value){ + values.push(value); }); return values; }; @@ -280,24 +275,19 @@ this.scale.update(newScaleProps); }, draw : function(ease){ + var easingDecimal = ease || 1; this.clear(); - var ctx = this.chart.ctx; - this.scale.draw(easingDecimal); //Draw all the bars for each dataset this.eachBars(function(bar, index, datasetIndex){ if (bar.hasValue()){ + // Update the bar basepoint bar.base = this.scale.endPoint; - //Transition then draw - bar.transition({ - x : this.scale.calculateBarX(this.data.datasets.length, datasetIndex, index), - y : this.scale.calculateY(bar.value), - width : this.scale.calculateBarWidth(this.data.datasets.length) - }, easingDecimal).draw(); - bar.save(); + //Transition + bar.transition(['x','y','width'], easingDecimal).draw(); } }, this); } diff --git a/src/Chart.Core.js b/src/Chart.Core.js index 68f87df9a..bb8f3ece9 100755 --- a/src/Chart.Core.js +++ b/src/Chart.Core.js @@ -1025,7 +1025,7 @@ dataIndex; for (var i = this.data.datasets.length - 1; i >= 0; i--) { - dataArray = this.data.datasets[i].points || this.data.datasets[i].bars || this.data.datasets[i].segments; + dataArray = this.data.datasets[i].metaData; dataIndex = indexOf(dataArray, ChartElements[0]); if (dataIndex !== -1){ break; @@ -1045,7 +1045,7 @@ xMin, yMin; helpers.each(this.data.datasets, function(dataset){ - dataCollection = dataset.points || dataset.bars || dataset.segments; + dataCollection = dataset.metaData; if (dataCollection[dataIndex] && dataCollection[dataIndex].hasValue()){ Elements.push(dataCollection[dataIndex]); } @@ -1175,36 +1175,50 @@ Chart.Element = function(configuration){ extend(this,configuration); this.initialize.apply(this,arguments); - this.save(); }; extend(Chart.Element.prototype,{ initialize : function(){}, - restore : function(props){ - if (!props){ - extend(this,this._vm); - } else { - each(props,function(key){ - this[key] = this._vm[key]; - },this); - } - return this; - }, - save : function(){ + save: function(){ this._vm = clone(this); delete this._vm._vm; return this; }, - update : function(newProps){ - each(newProps,function(value,key){ - this._vm[key] = this[key]; - this[key] = value; - },this); - return this; - }, - transition : function(props,ease){ - each(props,function(value,key){ - this._vm[key] = ((value - this._vm[key]) * ease) + this._vm[key]; + transition : function(props, ease){ + if(!this._start){ + this._start = clone(this._vm); + } + each(this,function(value, key){ + + // Only non-vm properties + if(key === '_vm' || !this.hasOwnProperty(key)){ + return; + } + + // Init if doesn't exist + if(!this._vm[key]){ + this._vm[key] = value || null; + return; + } + + // If transition property, do transition with ease (no pun intended) + if(props.indexOf(key) > -1){ + // Color transitions if possible + if(typeof value === 'string'){ + // TODO support color transitions + return; + } + // Everything else, presumably numbers + this._vm[key] = ((this[key] - this._start[key]) * ease) + this._start[key]; + return; + } + + // Non-transitionals + this._vm[key] = value; + },this); + if(ease === 1){ + delete this._start; + } return this; }, tooltipPosition : function(){ @@ -1331,7 +1345,7 @@ halfWidth = vm.width/2, leftX = vm.x - halfWidth, rightX = vm.x + halfWidth, - top = this.base - (this.base - vm.y), + top = vm.base - (vm.base - vm.y), halfStroke = vm.strokeWidth / 2; // Canvas doesn't allow us to stroke inside the width so we can @@ -1350,20 +1364,22 @@ // It'd be nice to keep this class totally generic to any rectangle // and simply specify which border to miss out. - ctx.moveTo(leftX, this.base); + ctx.moveTo(leftX, vm.base); ctx.lineTo(leftX, top); ctx.lineTo(rightX, top); - ctx.lineTo(rightX, this.base); + ctx.lineTo(rightX, vm.base); ctx.fill(); if (vm.showStroke){ ctx.stroke(); } }, height : function(){ - return this.base - vm.y; + var vm = this._vm; + return vm.base - vm.y; }, inRange : function(chartX,chartY){ - return (chartX >= vm.x - vm.width/2 && chartX <= vm.x + vm.width/2) && (chartY >= vm.y && chartY <= this.base); + var vm = this._vm; + return (chartX >= vm.x - vm.width/2 && chartX <= vm.x + vm.width/2) && (chartY >= vm.y && chartY <= vm.base); } }); @@ -2111,8 +2127,7 @@ return animationWrapper.chartInstance === chartInstance; }); - if (index) - { + if (index){ this.animations.splice(index, 1); } },