From b09fb60142141b26ba83ab8b147b9d0519afeae4 Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Tue, 16 Mar 2021 11:53:41 +0200 Subject: [PATCH 1/3] Exclude base-line from bar size --- src/controllers/controller.bar.js | 14 +++++- src/core/core.scale.js | 15 +++++++ .../controller.bar/baseLine/bottom.js | 40 +++++++++++++++++ .../controller.bar/baseLine/bottom.png | Bin 0 -> 901 bytes test/fixtures/controller.bar/baseLine/left.js | 41 +++++++++++++++++ .../fixtures/controller.bar/baseLine/left.png | Bin 0 -> 647 bytes .../fixtures/controller.bar/baseLine/mid-x.js | 41 +++++++++++++++++ .../controller.bar/baseLine/mid-x.png | Bin 0 -> 758 bytes .../fixtures/controller.bar/baseLine/mid-y.js | 40 +++++++++++++++++ .../controller.bar/baseLine/mid-y.png | Bin 0 -> 930 bytes .../fixtures/controller.bar/baseLine/right.js | 42 ++++++++++++++++++ .../controller.bar/baseLine/right.png | Bin 0 -> 611 bytes test/fixtures/controller.bar/baseLine/top.js | 41 +++++++++++++++++ test/fixtures/controller.bar/baseLine/top.png | Bin 0 -> 895 bytes .../controller.bar/baseLine/value-x.js | 42 ++++++++++++++++++ .../controller.bar/baseLine/value-x.png | Bin 0 -> 943 bytes .../controller.bar/baseLine/value-y.js | 41 +++++++++++++++++ .../controller.bar/baseLine/value-y.png | Bin 0 -> 951 bytes test/specs/controller.bar.tests.js | 10 +++-- 19 files changed, 362 insertions(+), 5 deletions(-) create mode 100644 test/fixtures/controller.bar/baseLine/bottom.js create mode 100644 test/fixtures/controller.bar/baseLine/bottom.png create mode 100644 test/fixtures/controller.bar/baseLine/left.js create mode 100644 test/fixtures/controller.bar/baseLine/left.png create mode 100644 test/fixtures/controller.bar/baseLine/mid-x.js create mode 100644 test/fixtures/controller.bar/baseLine/mid-x.png create mode 100644 test/fixtures/controller.bar/baseLine/mid-y.js create mode 100644 test/fixtures/controller.bar/baseLine/mid-y.png create mode 100644 test/fixtures/controller.bar/baseLine/right.js create mode 100644 test/fixtures/controller.bar/baseLine/right.png create mode 100644 test/fixtures/controller.bar/baseLine/top.js create mode 100644 test/fixtures/controller.bar/baseLine/top.png create mode 100644 test/fixtures/controller.bar/baseLine/value-x.js create mode 100644 test/fixtures/controller.bar/baseLine/value-x.png create mode 100644 test/fixtures/controller.bar/baseLine/value-y.js create mode 100644 test/fixtures/controller.bar/baseLine/value-y.png diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 0d4176f279a..8f0fee6de25 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -266,7 +266,7 @@ export default class BarController extends DatasetController { me.updateSharedOptions(sharedOptions, mode, firstOpts); for (let i = start; i < start + count; i++) { - const vpixels = reset ? {base, head: base} : me._calculateBarValuePixels(i); + const vpixels = reset ? {base, head: base} : me._calculateBarValuePixels(i, base); const ipixels = me._calculateBarIndexPixels(i, ruler); const properties = { @@ -447,6 +447,18 @@ export default class BarController extends DatasetController { head = base + size; } + const actualBase = baseValue || 0; + if (base === vScale.getPixelForValue(actualBase)) { + const halfGrid = vScale.getLineWidthForValue(actualBase) / 2; + if (size > 0) { + base += halfGrid; + size -= halfGrid; + } else if (size < 0) { + base -= halfGrid; + size += halfGrid; + } + } + return { size, base, diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 19f1f26390e..5f2f9a543ea 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1604,6 +1604,21 @@ export default class Scale extends Element { } } + getLineWidthForValue(value) { + const me = this; + const grid = me.options.grid; + if (!me._isVisible() || !grid.display) { + return 0; + } + const ticks = me.ticks; + const index = ticks.findIndex(t => t.value === value); + if (index >= 0) { + const opts = grid.setContext(me.getContext(index)); + return opts.lineWidth; + } + return 0; + } + /** * @protected */ diff --git a/test/fixtures/controller.bar/baseLine/bottom.js b/test/fixtures/controller.bar/baseLine/bottom.js new file mode 100644 index 00000000000..272b8e99b3b --- /dev/null +++ b/test/fixtures/controller.bar/baseLine/bottom.js @@ -0,0 +1,40 @@ +module.exports = { + config: { + type: 'bar', + data: { + labels: ['a', 'b'], + datasets: [{ + backgroundColor: '#AAFFCC', + borderColor: '#0000FF', + borderWidth: 1, + data: [1, 2] + }] + }, + options: { + scales: { + x: { + display: false + }, + y: { + ticks: { + display: false + }, + grid: { + color: function(context) { + return context.tick.value === 0 ? 'red' : 'transparent'; + }, + lineWidth: 5, + tickLength: 0 + }, + } + }, + maintainAspectRatio: false + } + }, + options: { + canvas: { + width: 128, + height: 128 + } + } +}; diff --git a/test/fixtures/controller.bar/baseLine/bottom.png b/test/fixtures/controller.bar/baseLine/bottom.png new file mode 100644 index 0000000000000000000000000000000000000000..d7107153bb098da80a029fc2f58084bb8c2415f4 GIT binary patch literal 901 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7xzrVD|BJaSW-5dpp-KPufv{<@Bb`HCDG6V9)c^=0Kbv8(7++ktoM=H9iPbZOf!b|DKsg(`=W z+kEx2M11TY@cjRu`+wKIc>8bZpMGuIf5$F=`bSfCh73~%2ahyQh8ee6?=dm7q)cOJ z*ctmkcT|x009o_6;#|}A-G55ITxL$-YiP**)*sek35-ilmIK$n{{6MFd4-(YCs>f1 zGdiR`V-;XvG*C~7W8D0E>zRME85$ZGZtQJWxKJ;AU=I@$gNgvdJ+oBn+?s%I3guhI2;vfj9fI z7gX`{Fida|UXYz|{lL1$SmuKpY9u`8bG6BLtM$&@4io~~`NFvImT`da0#2Y? zg>?&S#(kcdAKy#eFx`;7pq#~w(Sd0$;~wq>(Fab7J20>unBx!)gx3%36Tk4C=~?7Y zi!LzhSLw$m-=9u4&9-AMpzx~}lJ9q!P&sBT={bzm<@!Iph o*N@sPyT|^V4aVF4^*`VLc>9$T9jd&?f!T|})78&qol`;+0NOWjp#T5? literal 0 HcmV?d00001 diff --git a/test/fixtures/controller.bar/baseLine/left.js b/test/fixtures/controller.bar/baseLine/left.js new file mode 100644 index 00000000000..56a68ce5479 --- /dev/null +++ b/test/fixtures/controller.bar/baseLine/left.js @@ -0,0 +1,41 @@ +module.exports = { + config: { + type: 'bar', + data: { + labels: ['a', 'b'], + datasets: [{ + backgroundColor: '#AAFFCC', + borderColor: '#0000FF', + borderWidth: 1, + data: [1, 2] + }] + }, + options: { + indexAxis: 'y', + scales: { + y: { + display: false + }, + x: { + ticks: { + display: false + }, + grid: { + color: function(context) { + return context.tick.value === 0 ? 'red' : 'transparent'; + }, + lineWidth: 5, + tickLength: 0 + }, + } + }, + maintainAspectRatio: false + } + }, + options: { + canvas: { + width: 128, + height: 128 + } + } +}; diff --git a/test/fixtures/controller.bar/baseLine/left.png b/test/fixtures/controller.bar/baseLine/left.png new file mode 100644 index 0000000000000000000000000000000000000000..ca5e1227b5cad1b5f4e8b172859e23fd53a1d834 GIT binary patch literal 647 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7xzrVDj^HaSW-5dwcg_;UNbB){8f1 zcrZ*V$m?@^@>rpO^X8_)smd>ov#wix-`ZB$VYi%d|IezmGr#`5S^bzxhry)jU;b2v zjOX@1L**8nY2XU*t8Zg^^plx^;T`i5NsH=+-!ae4qCX_9`Equ>a6|v=)OWY5xf-^Y z-n^~A@Ma~m!qI;_BSaloE%I1aGH5l(DV$(n4PanpG2f?Fu%GGJf%yBZ8BDWF9rzcp zUtl)*{%>OzP;mfb2tzs3W*(rz0Ee>Q*-U@s8kjVI=zz$CR4{AP?fW7LTniXL$bdCP z62xkF^Ua)f23TDKlMiDg8%T%3?!Uf_%fRXuFa$eHV+83qkyjtwpouW@z~M!j2PPWc zeEa^$grYC?^8~-tBur>lE_Sgn(Gvgpx`~m2!8c(hqv(P;`!p5i*)cFUFcyLWIM@Lq zsAhmBXwRv=JpO;YgU#>f2WP(g&k9tV$rjR3^5^)?lOh6b3=9uHd|wI-LXm(p2Ud;c z{)`{L0PW!FFa|1|!E}me1;f)Xrj2wE+!F$czn@hq*Wc}FNO@!54fL3dL?GB*@2_mA p_yu$l>k-L_k6)ip=WnoJnr~#8;vDqhbtO=o!PC{xWt~$(698p9?ce|a literal 0 HcmV?d00001 diff --git a/test/fixtures/controller.bar/baseLine/mid-x.js b/test/fixtures/controller.bar/baseLine/mid-x.js new file mode 100644 index 00000000000..ef6beb5c97b --- /dev/null +++ b/test/fixtures/controller.bar/baseLine/mid-x.js @@ -0,0 +1,41 @@ +module.exports = { + config: { + type: 'bar', + data: { + labels: ['a', 'b'], + datasets: [{ + backgroundColor: '#AAFFCC', + borderColor: '#0000FF', + borderWidth: 1, + data: [1, -1] + }] + }, + options: { + indexAxis: 'y', + scales: { + y: { + display: false + }, + x: { + ticks: { + display: false + }, + grid: { + color: function(context) { + return context.tick.value === 0 ? 'red' : 'transparent'; + }, + lineWidth: 5, + tickLength: 0 + }, + } + }, + maintainAspectRatio: false + } + }, + options: { + canvas: { + width: 128, + height: 128 + } + } +}; diff --git a/test/fixtures/controller.bar/baseLine/mid-x.png b/test/fixtures/controller.bar/baseLine/mid-x.png new file mode 100644 index 0000000000000000000000000000000000000000..1f4feb2e36b0b554ca6279bec8fab61b1bc2a599 GIT binary patch literal 758 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7xzrVA|{H;uum9_xA4X!ovnUE`cl5 z{Qtd`GkU43yM%LhW5^_>7Z;laRn#bah$3*YT#*Lj5uKUbR&b9z;TyC#??%5o8m5Ply_onRQSNq*uU%A+INM^ z8(DLr{}u1O^7x;mYD53aMS@q#=P)eVvY&^EPt1XVNZJZBnxIb)sQNVcS;qT)U6a;_l zZz$b-mWl1+X$B*QJB=OOJF@4nZeaK?-ND#5ubt7rVUFrC)*ePgxCpQSE$d(`VKQ`x zXG~3)Aco|I8*xF23|x1je7_gZStxMhR`_qe8=q~Dti1KMwo18SDkF!&9v&42rUb^n zO(`-Wn;AkGxDyz48dz1X0t0KKN*LR}b!~0|9#Rt+QyAtR@MS*bkh;JqKyn372wU5S z``a!qYjnPr4AQUx7-7GA6~qoOMSzV^aAQtmgur#J=cNpIjCg|Bw3w#?jh!Ks@X_|L z!eNDc=IU#QK|u}-js>DJix~x0h^~Rc8Y5f(!%iAtxduoqykqW>VrW#j5PnF=WC2$I z>k6i0S_%)Z%uo8V@kJ~{cQ literal 0 HcmV?d00001 diff --git a/test/fixtures/controller.bar/baseLine/mid-y.js b/test/fixtures/controller.bar/baseLine/mid-y.js new file mode 100644 index 00000000000..d01c00a12d8 --- /dev/null +++ b/test/fixtures/controller.bar/baseLine/mid-y.js @@ -0,0 +1,40 @@ +module.exports = { + config: { + type: 'bar', + data: { + labels: ['a', 'b'], + datasets: [{ + backgroundColor: '#AAFFCC', + borderColor: '#0000FF', + borderWidth: 1, + data: [1, -1] + }] + }, + options: { + scales: { + x: { + display: false + }, + y: { + ticks: { + display: false + }, + grid: { + color: function(context) { + return context.tick.value === 0 ? 'red' : 'transparent'; + }, + lineWidth: 5, + tickLength: 0 + }, + } + }, + maintainAspectRatio: false + } + }, + options: { + canvas: { + width: 128, + height: 128 + } + } +}; diff --git a/test/fixtures/controller.bar/baseLine/mid-y.png b/test/fixtures/controller.bar/baseLine/mid-y.png new file mode 100644 index 0000000000000000000000000000000000000000..88c21a153742db4bcb547760cd33dd99dbc2cedb GIT binary patch literal 930 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7xzrV9xY(aSW-5dplRxk2z7IWxucM z(Kr_Grq%*ZmF3PwoJ`YLPP)$W)jGAv@J&nCOg{gwIrn~69tnGEvgH0QuT2&gO^!x# z8LNnHneX4e{P1y^XMe-3`#*mziYXI+dh?<_gGChoE=~r=WQ#Qn4U4}nn9U$y(sr0@ zRG9oQ5n@PQv;F+*-+Cv$FPqx_@>zDz%hKQ<=UMF;B98C4u)gL0XVLQ={0!++u7A*A zFj-UK#>QZ=cu$)?`LJU!>+g5x!ykyYRzQo4wBVm)IA)VQ47&Rb2Ns zv|$q?!>O0689shtWN_f_kY;$mn=t=!!JFbYk@j^QR>AjwZ+pM;&-FKtcj+7y<}!+5EC#5hS@ftPeFo;2J`F~7%~_O znHd-oxHY5$7*D;FW_tYcKl_9~-XXCEHm2`g*Z=;n=B9c7X4S@AXKm18VOVwY|6FO1 zm%v8+I|Gadu>i9LOj9mjXClE0qTNDJ;g3}ePum4;e?LFHXmP(nU5>aL!-G>ZARg3C gMs-qSIO`8qOM(6K=NpIa2L=R#r>mdKI;Vst0RJ1~J^%m! literal 0 HcmV?d00001 diff --git a/test/fixtures/controller.bar/baseLine/top.js b/test/fixtures/controller.bar/baseLine/top.js new file mode 100644 index 00000000000..86a7a378d1e --- /dev/null +++ b/test/fixtures/controller.bar/baseLine/top.js @@ -0,0 +1,41 @@ +module.exports = { + config: { + type: 'bar', + data: { + labels: ['a', 'b'], + datasets: [{ + backgroundColor: '#AAFFCC', + borderColor: '#0000FF', + borderWidth: 1, + data: [-1, -2] + }] + }, + options: { + scales: { + x: { + display: false + }, + y: { + ticks: { + display: false + }, + grid: { + color: function(context) { + return context.tick.value === 0 ? 'red' : 'transparent'; + }, + borderWidth: 0, + lineWidth: 5, + tickLength: 0 + }, + } + }, + maintainAspectRatio: false + } + }, + options: { + canvas: { + width: 128, + height: 128 + } + } +}; diff --git a/test/fixtures/controller.bar/baseLine/top.png b/test/fixtures/controller.bar/baseLine/top.png new file mode 100644 index 0000000000000000000000000000000000000000..8472c0fbf0db6915ff137f0e74781229679ddaa9 GIT binary patch literal 895 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7xzrV0QC#aSW-5dwcg_u85;Z%R|Y+ z2OByIR2c+11!OxFI1acAZPY1r=yqYc8?^Swwb|#xpWQSKtuNpIZrk+Fbu!-%Ur&{_ zU@W-#=KtOwVhr~E{>R((^F#gq{;IRKled>!RQc)md~3eF`~Oz{{r0QqcICIoc|WUu z|M>R%?OkUR|GIjH906_y;{!J&FYqL=MOYhDa>eZbTj*0)Z+w7_k>LXK3&tGg^t@(W z#%T>(nI~UA@bz{!lY99=h8qP3cnrR4#PAn^)h6$>o87Za6jn$ z-{_RkhItI``OSR&8tC)>x;SgU7DECRx_?&rdzCJQTR0zx)2L9W}lWjxCsbhZ*RbY<9K&hOf7G za~Fs|&`Wq{cLTeF%NgG>-CaSxAG%y`P6g6aGoM zN^3cYy#Mo%OJMHBD!XG9-F8XwKTcaslm0KTh5ymS@b%BH^UM2x?|&b@(fti~-OgA& z(FFO!$?L-!SZ*(}XVq?C`k~BFet`FY;#al@5prIi+#Qb;$Ql&XrMB42KTGH2R43TJF)2tRHlkKWn~p}K@CuocYcEo z5VORaJ2b5_cbK*cXvp=!qCD#=?}K*N&qgAg2liK5UF`2(-Z|~5ro+txFLrS`2 zZrId#u~f7{Eo$0whE(RoueBI_x9IpYo?>&m9?CE)BXS8)pF|eqB$ULmE`S>x&A9K_OAG1wUy?7_{8!~UvQzZI?=LAf z_4}Iq6BfUl*1eEHA()jR(acTL;qjFN=eQUS<@5wK99!8qSCpaUro>W)-e6{HZ3d3b zhF*+P%h}4p7zEOir!blL@xEEZpm64x25ZI~sT+}u4l{ZKxh`0kZrIG!U?9C%WIj;BIPCbxIRd4{Zo7Xw`u9l%8jyl%NTNnn}2ID@NCibW4xut_C1tA yA|rYZ(-vQzcdHo;0v>;2`D1EuzT%boABI=v6P%}ITM7a*B7>)^pUXO@geCx~`hw~J literal 0 HcmV?d00001 diff --git a/test/fixtures/controller.bar/baseLine/value-y.js b/test/fixtures/controller.bar/baseLine/value-y.js new file mode 100644 index 00000000000..caee084df6b --- /dev/null +++ b/test/fixtures/controller.bar/baseLine/value-y.js @@ -0,0 +1,41 @@ +module.exports = { + config: { + type: 'bar', + data: { + labels: ['a', 'b'], + datasets: [{ + backgroundColor: '#AAFFCC', + borderColor: '#0000FF', + borderWidth: 1, + data: [1, 3] + }] + }, + options: { + base: 2, + scales: { + x: { + display: false + }, + y: { + ticks: { + display: false + }, + grid: { + color: function(context) { + return context.tick.value === 2 ? 'red' : 'transparent'; + }, + lineWidth: 5, + tickLength: 0 + }, + } + }, + maintainAspectRatio: false + } + }, + options: { + canvas: { + width: 128, + height: 128 + } + } +}; diff --git a/test/fixtures/controller.bar/baseLine/value-y.png b/test/fixtures/controller.bar/baseLine/value-y.png new file mode 100644 index 0000000000000000000000000000000000000000..15fe7871013270ca6760e0af47d0f139d1f37105 GIT binary patch literal 951 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7xzrV6O9YaSW-5dppN5Dfa63wclUA^Sal=;I^70!68e|vEf-+Z_ZF> zR+=%*xwh-V|HHGdzAwAGX8LdY&GMBG-j=tEzfQY*YVH5OzA{W6aiz>00pTwz8wDQN z#Fbu#u-EMG+I#PA{jZuob*1-SEuUMrfA7z|*S>wsTz}&KE^UXm^HraRn^Y?@o%z&z zzmMUg=vlcAhRrpPw<|l;xNc@wI-qm^$6F48_=|5EISfvl*I6?i0V-D*I?AUpWY6`> zzb{*NZ28aU2lC^;ufKNdOwIHuZxZuO8RvfE|9$iLt!=V$uf3=Lk_~R~?md3Di-AeQ z>FIlpfVd4^?F?N3KdqUjh_891*q{{huaDs=>*@-Q1sqfND?3yk)RG%=O6wWZxZ9_u TSf@_}W=IB4S3j3^P6 Date: Tue, 16 Mar 2021 12:21:15 +0200 Subject: [PATCH 2/3] lint --- src/controllers/controller.bar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 8f0fee6de25..cbac98e5130 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -266,7 +266,7 @@ export default class BarController extends DatasetController { me.updateSharedOptions(sharedOptions, mode, firstOpts); for (let i = start; i < start + count; i++) { - const vpixels = reset ? {base, head: base} : me._calculateBarValuePixels(i, base); + const vpixels = reset ? {base, head: base} : me._calculateBarValuePixels(i); const ipixels = me._calculateBarIndexPixels(i, ruler); const properties = { From 40307079b07c47b7a00548d667c40f2d712c970a Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Tue, 16 Mar 2021 14:31:16 +0200 Subject: [PATCH 3/3] add to types --- types/index.esm.d.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts index 936c9f938fe..3a2f5b5832a 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -1195,6 +1195,12 @@ export interface Scale extends El * @return {string} */ getLabelForValue(value: number): string; + + /** + * Returns the grid line width at given value + */ + getLineWidthForValue(value: number): number; + /** * Returns the location of the given data point. Value can either be an index or a numerical value * The coordinate (0, 0) is at the upper-left corner of the canvas