From 29c4ad17c76dafd0bc574a99dc67112b72eb3064 Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Thu, 14 Nov 2019 01:04:38 +0200 Subject: [PATCH 1/4] Float bars: data as objects --- src/controllers/controller.bar.js | 27 +++++++++++++++ .../floatBar/data-as-objects-horizontal.js | 32 ++++++++++++++++++ .../floatBar/data-as-objects-horizontal.png | Bin 0 -> 4078 bytes .../floatBar/data-as-objects.js | 32 ++++++++++++++++++ .../floatBar/data-as-objects.png | Bin 0 -> 5203 bytes 5 files changed, 91 insertions(+) create mode 100644 test/fixtures/controller.bar/floatBar/data-as-objects-horizontal.js create mode 100644 test/fixtures/controller.bar/floatBar/data-as-objects-horizontal.png create mode 100644 test/fixtures/controller.bar/floatBar/data-as-objects.js create mode 100644 test/fixtures/controller.bar/floatBar/data-as-objects.png diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 7c30a6a4324..ac787343430 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -213,6 +213,33 @@ module.exports = DatasetController.extend({ return parseArrayOrPrimitive.apply(this, arguments); }, + /** + * Overriding object data parsing since we support mixed primitive/array + * value-scale data for float bars + * @private + */ + _parseObjectData: function(meta, data, start, count) { + var iScale = this._getIndexScale(); + var vScale = this._getValueScale(); + var iProp = iScale.isHorizontal() ? 'x' : 'y'; + var vProp = iProp === 'x' ? 'y' : 'x'; + var parsed = []; + var i, ilen, item, obj, value; + for (i = start, ilen = start + count; i < ilen; ++i) { + obj = data[i]; + item = {}; + item[iScale.id] = iScale._parseObject(obj, iProp, i); + value = obj[vProp]; + if (helpers.isArray(value)) { + parseFloatBar(value, item, vScale, i); + } else { + item[vScale.id] = vScale._parseObject(obj, vProp, i); + } + parsed.push(item); + } + return parsed; + }, + initialize: function() { var me = this; var meta; diff --git a/test/fixtures/controller.bar/floatBar/data-as-objects-horizontal.js b/test/fixtures/controller.bar/floatBar/data-as-objects-horizontal.js new file mode 100644 index 00000000000..14dbb58d7e6 --- /dev/null +++ b/test/fixtures/controller.bar/floatBar/data-as-objects-horizontal.js @@ -0,0 +1,32 @@ +module.exports = { + config: { + type: 'horizontalBar', + data: { + labels: ['a', 'b', 'c'], + datasets: [ + { + data: [{y: 'b', x: [2, 8]}, {y: 'c', x: [2, 5]}], + backgroundColor: '#ff0000' + }, + { + data: [{y: 'a', x: 10}, {y: 'c', x: [6, 10]}], + backgroundColor: '#00ff00' + } + ] + }, + options: { + legend: false, + title: false, + scales: { + xAxes: [{display: false, ticks: {min: 0}}], + yAxes: [{display: false, stacked: true}] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.bar/floatBar/data-as-objects-horizontal.png b/test/fixtures/controller.bar/floatBar/data-as-objects-horizontal.png new file mode 100644 index 0000000000000000000000000000000000000000..39b4496f5a2bc9fd081324cb6f584a6bb505fff0 GIT binary patch literal 4078 zcmeHKYfKbZ6h1QyILkwZmmoED!5|HBc}N7IC?f@t@{kH?2_UX0B>^nZMOl^>XAQ2BaCf^jsZC2e5972t5!lO?f%;eN$bS{rQKT zq$_#Z^4{$@-<(wHtM1LcwW-b@AK$$*r_NW}@H99p!>jN2xnt>-8H*`>X92g7(wlCcJU8TDa{OjfPs0yyQv?E#4R z@*uf7g9igQgV;j|^{J7ZDQm0K`Ql=asUQrm#c^St&w4b6 zF)aF0Q9We?7L42UOgh2F_ZQ$q2>Kk;sq2wk0`evXfe}?YLgdg-g9u}}mLQ7}*rA^F zXy1b2aTo%V6zBzIH4W7^5a+`QC=!9KEwNdPToF#x;|R>1ycF1V;BfE`gmJ)5NFlHx zjyu-kc_KkZnIbS*Gj}23TvgFQgi+y63lZ32&x31WESRxi#t!=@lq{&$&M356-8|wF zLzlC`-%6HA)wNlLgkaKF?GIs&sQ+|$&6^O6|NrB3dU%3c${Sd8(aD-mUu0($YOk#? z6#B&%3aw#})~T57#_`GHlU{~JeZbi&NzvEp(5Ortv@rbBdfPKxy9MRlVc4 zM0~RKyz>Q?ropns?}|AS{Zf-HU^L?u3Y6w^6MoX%I2sAbcVeGYP9(`-BU2w>EluOE zMc9z4@R}V;vpW5zS~CTxXc^mZ6EsBFCqW*@Vi}8N?5w||p|o22Ab^`4n(Y{I!;ze; zPF|O2xSu5hAC2~(pm1wsvMQU?1A}2qe2srlJ3MhzN@bZ4MEi`xC(kJ8%F1 literal 0 HcmV?d00001 diff --git a/test/fixtures/controller.bar/floatBar/data-as-objects.js b/test/fixtures/controller.bar/floatBar/data-as-objects.js new file mode 100644 index 00000000000..08ab0a9621e --- /dev/null +++ b/test/fixtures/controller.bar/floatBar/data-as-objects.js @@ -0,0 +1,32 @@ +module.exports = { + config: { + type: 'bar', + data: { + labels: ['a', 'b', 'c'], + datasets: [ + { + data: [{x: 'b', y: [2, 8]}, {x: 'c', y: [2, 5]}], + backgroundColor: '#ff0000' + }, + { + data: [{x: 'a', y: 10}, {x: 'c', y: [6, 10]}], + backgroundColor: '#00ff00' + } + ] + }, + options: { + legend: false, + title: false, + scales: { + xAxes: [{display: false, stacked: true}], + yAxes: [{display: false, ticks: {min: 0}}] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.bar/floatBar/data-as-objects.png b/test/fixtures/controller.bar/floatBar/data-as-objects.png new file mode 100644 index 0000000000000000000000000000000000000000..70c0adabab105c223d33575d19d5e8a83e9fcd6f GIT binary patch literal 5203 zcmeI0dpK2j7sr2l+t??ibEu3G2cavKipizTxEAq}nqJqp5>vU=fc z5#^f8Y2Jz<(T&_sxkT=laxJs=)A^_Q>;3C}o_QYUpM9QZKWnYeTKl)w@B90mwcKgE zVBXSs2%!b0CI(gr;qVtjqzF77$2@aEXwgzr1HE0o4*hl6*=zU4g}p6yFf(Wu+PEK+ z5aA0uiJlWRF-ZJF^My%jYUx?mpOj_wb|+^vs_e-eyrnVTaCr9isoCC%j<)>vGwqru zraI<%w4LS!%Q=<@w<EGKB z=6XnLVmHpVOX}7mNXl|=e5wRpMe3~Aqmh|qo)CuDjxFONb2rhp?I^TLQYRc?!QlwgjMOyrBK2NAtEKcpKr^eJpFzZ<#3Unv;Fz)NL6u+M_~ARy#{e`|I&j- zn{t;2uE9uEi!m-vaBpT*{fotOJ|%k@oG7ns3IU?21%Q@!(nAS7>^v)LKqDgV`1h-^ zf^)S(k_5>koVD0MR0e3Tyoc@(+yd?ACjlfSN7Yyf#dG|fLJ@X3<%lRwr1WS2TBCSr z93tXX{Mi`J-c{Fmli+XEUuXtSBro<;K=fH;u2^%$`oFKN=lD>+=80gL@?>SIA^RFH zx$Jy2&er!K@CO<8MqMm6?bo#>6I%0dvstwy z7mYr3vxBZ%k|N!pPopCb-FpOv+R(5y%}+LieNq=9B5sfmu)He%gpoxE^4;~N$4B-dA2@FTUUi;Xxda&Q@{=0xi6`D}2_S_M9 z3gtQF|12;Rq_Gt2pH#mR&Y6$#NtZrTR8vN=xi+VjQCzOEtT|FR+$&~|rnXv? zTt;bI>f;m9*l}6E4On=_osFBYn;AMIt~h(It)nXw-~$B6Ei7#&QnE%XBAEbj5Wu-V z)>x9RXq?h#0$4+U^y-hD$|&fXv4a@|xINz-tv(#Boq!DL>ZB4NK$8Ck%)~8IO@ql` zWFHg2*%i0k8_@Bb$)FT6$QpeG0S+AtDr7QsbwamzbXyp8A2kdADnoK< z-XhTVhEtOPByUv9TOKF1;ZW~uc_q<89wmz1mBk45gc9tBYS%lPf{kf35yYht{`Go5 zBYHb>cZl(2+|0t>JR{p`2x=iR&4*2)5Da!)bo9@8xTV#7bq>Xs1~2OV#s6JQ@Wt0v zfRn##3&!y{Y^wt=4gDqXnAVgTl4}VLcfJ1nd_Rk4JnSz6G`_Iw4>=@NXL0DRPc7#W z?ge)VcFy?=%#gcnloP`;PLQRvsxJ;GZVay$t+8b$jQ zgrer_!qN=ww^BfeU{icu01hfLvCu~^mR*#?h+E+BR?#;9wb;Z;hiFBh9fYJ?tL{y1 z#%r5Pn>ZBrJi@|n_vMAKcy6~j^O@Sg@nz_?uM{w={?e+4FhT^pU=>PhNXqp2GXoUj z0-~d)dsuuAo7TF|6$09!Z>14aspc~vyDX%7Oi9ZB%*7sY=WQa zs{lxYroZw}>vj^q}CjO#OsPEtm zDZ-7<;36eMElG?>f;%Ve)N(C5Jv2}oI-jBaR@q@tDNi{7*0oPlkw-lXDx(o@18c#i zMNa1u3S5*`&H>tS&|HI^4KqtISNFDllFNoQ{K&?;iAV7BUX!PRHV_V~6E?+>z$|4t z$Sgu3z(O6rEGAOYTwN4so;rLomoeWnYe?Smf5%|VBK%hAGL;(m0Yu)7$gvd!w?uD} sL#0F@?B=cM)N Date: Thu, 14 Nov 2019 01:05:58 +0200 Subject: [PATCH 2/4] Add float bar sample, pass `custom` in tooltipItem --- samples/charts/bar/float.html | 158 ++++++++++++++++++++++++++++++++++ samples/samples.js | 3 + src/core/core.tooltip.js | 1 + 3 files changed, 162 insertions(+) create mode 100644 samples/charts/bar/float.html diff --git a/samples/charts/bar/float.html b/samples/charts/bar/float.html new file mode 100644 index 00000000000..68aa9f7c110 --- /dev/null +++ b/samples/charts/bar/float.html @@ -0,0 +1,158 @@ + + + + + Bar Chart + + + + + + +
+ +
+ + + + + + + + + diff --git a/samples/samples.js b/samples/samples.js index 6e06756b204..15ece3ff568 100644 --- a/samples/samples.js +++ b/samples/samples.js @@ -19,6 +19,9 @@ }, { title: 'Stacked groups', path: 'charts/bar/stacked-group.html' + }, { + title: 'Floating', + path: 'charts/bar/float.html' }] }, { title: 'Line charts', diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index 4b83d1f7e16..bc74be71c87 100644 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -214,6 +214,7 @@ function createTooltipItem(chart, item) { return { label: indexScale ? '' + indexScale.getLabelForValue(parsed[indexScale.id]) : '', value: valueScale ? '' + valueScale.getLabelForValue(parsed[valueScale.id]) : '', + custom: parsed._custom, index: index, datasetIndex: datasetIndex, x: element._model.x, From 2c2530c3dd629371b0e5282dc0056179b144f0af Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Thu, 14 Nov 2019 09:01:50 +0200 Subject: [PATCH 3/4] Don't expose custom, CC --- samples/charts/bar/float.html | 14 -------------- src/controllers/controller.bar.js | 5 ++--- src/core/core.scale.js | 6 +++--- src/core/core.tooltip.js | 1 - 4 files changed, 5 insertions(+), 21 deletions(-) diff --git a/samples/charts/bar/float.html b/samples/charts/bar/float.html index 68aa9f7c110..b0833f528d9 100644 --- a/samples/charts/bar/float.html +++ b/samples/charts/bar/float.html @@ -73,20 +73,6 @@ title: { display: true, text: 'Chart.js Bar Chart' - }, - tooltips: { - callbacks: { - label: function(tooltipItem) { - var label = tooltipItem.label || ''; - var custom = tooltipItem.custom || {}; - - if (label) { - label += ': '; - } - label += ' [' + custom.start + ', ' + custom.end + ']'; - return label; - } - } } } }); diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index ac787343430..212ff840ebb 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -221,14 +221,13 @@ module.exports = DatasetController.extend({ _parseObjectData: function(meta, data, start, count) { var iScale = this._getIndexScale(); var vScale = this._getValueScale(); - var iProp = iScale.isHorizontal() ? 'x' : 'y'; - var vProp = iProp === 'x' ? 'y' : 'x'; + var vProp = vScale._getAxis(); var parsed = []; var i, ilen, item, obj, value; for (i = start, ilen = start + count; i < ilen; ++i) { obj = data[i]; item = {}; - item[iScale.id] = iScale._parseObject(obj, iProp, i); + item[iScale.id] = iScale._parseObject(obj, iScale._getAxis(), i); value = obj[vProp]; if (helpers.isArray(value)) { parseFloatBar(value, item, vScale, i); diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 7fafa704a59..80273e5c6a6 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1394,8 +1394,8 @@ class Scale extends Element { /** * @private */ - _getAxisID() { - return this.isHorizontal() ? 'xAxisID' : 'yAxisID'; + _getAxis() { + return this.isHorizontal() ? 'x' : 'y'; } /** @@ -1406,7 +1406,7 @@ class Scale extends Element { _getMatchingVisibleMetas(type) { var me = this; var metas = me.chart._getSortedVisibleDatasetMetas(); - var axisID = me._getAxisID(); + var axisID = me._getAxis() + 'AxisID'; var result = []; var i, ilen, meta; diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index bc74be71c87..4b83d1f7e16 100644 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -214,7 +214,6 @@ function createTooltipItem(chart, item) { return { label: indexScale ? '' + indexScale.getLabelForValue(parsed[indexScale.id]) : '', value: valueScale ? '' + valueScale.getLabelForValue(parsed[valueScale.id]) : '', - custom: parsed._custom, index: index, datasetIndex: datasetIndex, x: element._model.x, From 15634c2cd00677b9952d39be7792a3c62d1188d6 Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Thu, 14 Nov 2019 09:03:34 +0200 Subject: [PATCH 4/4] Remove commented code from samples --- samples/charts/bar/float.html | 1 - samples/charts/bar/vertical.html | 1 - 2 files changed, 2 deletions(-) diff --git a/samples/charts/bar/float.html b/samples/charts/bar/float.html index b0833f528d9..968deb9f27a 100644 --- a/samples/charts/bar/float.html +++ b/samples/charts/bar/float.html @@ -116,7 +116,6 @@ barChartData.labels.push(month); for (var index = 0; index < barChartData.datasets.length; ++index) { - // window.myBar.addData(randomScalingFactor(), index); barChartData.datasets[index].data.push([randomScalingFactor(), randomScalingFactor()]); } diff --git a/samples/charts/bar/vertical.html b/samples/charts/bar/vertical.html index ed69a436738..1cc2fd3e404 100644 --- a/samples/charts/bar/vertical.html +++ b/samples/charts/bar/vertical.html @@ -116,7 +116,6 @@ barChartData.labels.push(month); for (var index = 0; index < barChartData.datasets.length; ++index) { - // window.myBar.addData(randomScalingFactor(), index); barChartData.datasets[index].data.push(randomScalingFactor()); }