tobiasz1985528 / flot

Automatically exported from code.google.com/p/flot
MIT License
0 stars 0 forks source link

Review right-to-left direction behavior #74

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago
What steps will reproduce the problem?
1. Css: html/body { direction: rtl } so the vertical scrollbar is on the 
left.
2. Flot container (div or whatever) must have css direction: ltr (but I 
guess that's another bug...)
3. Option grid: { hoverable: true }

What is the expected output? What do you see instead?
In IE6 highlighted items (bars for example) are shifted to the right, so 
if you hover above a specific bar flot will highlight the bar which is 
about 20px to the right.

What version of the product are you using? On what operating system?
Flot 0.5, IE6+7.

Please provide any additional information below.
Possible fix: jquery.flot.js line 1623:

lastMousePos.pageX = e.clientX + (de && de.scrollLeft || b.scrollLeft || 
0) - (de && document.body.currentStyle.direction == "rtl" && 
((de.offsetWidth - de.clientWidth == 0) && de.getBoundingClientRect().left 
|| (de.offsetWidth - de.clientWidth)));

Where (de.offsetWidth - de.clientWidth == 0) is for IE7, otherwise 
(de.offsetWidth - de.clientWidth) actually calculates the width of the 
left scrollbar.

Original issue reported on code.google.com by meyuc...@gmail.com on 31 Oct 2008 at 10:57

GoogleCodeExporter commented 8 years ago
I can see that the expression in jQuery has changed too, I got the original one 
from
there. I've updated it now to:

lastMousePos.pageX = e.clientX + (de && de.scrollLeft || b.scrollLeft || 0) -
(de.clientLeft || 0);
lastMousePos.pageY = e.clientY + (de && de.scrollTop || b.scrollTop || 0) -
(de.clientTop || 0);

I just committed this to SVN. Did it fix the problem? Otherwise I think there's 
a bug
in jQuery too. :)

Original comment by olau%iol...@gtempaccount.com on 3 Nov 2008 at 11:03

GoogleCodeExporter commented 8 years ago
It fixed the problem in IE6, but I think it should be (de && de.clientLeft || 
0);

Another problem with RTL is that the plot is messed up unless it's container 
direction is set to LTR, but then all child elements are also LTR so the legend 
for 
example isn't in the right direction for RTL languages. This can also be fixed 
by 
setting the .legend css class with direction: rtl which overrides the 
container's 
direction. Nevertheless, I think RTL should be handled inside the library, 
maybe by 
defining <canvas> to always be LTR, I tried that but when highlighting stopped 
working I terminated the test due to lack of time:

if (target.css("direction") != "ltr")
    canvas.css("direction", "ltr");

Original comment by meyuc...@gmail.com on 3 Nov 2008 at 1:34

GoogleCodeExporter commented 8 years ago
Shouldn't the plot itself be reversed in RTL languages? Or is a left-to-right 
plot OK
if the legend is reversed? When you say that it's messed up, is this only in IE 
or is
the problem also with other browsers?

Original comment by olau%iol...@gtempaccount.com on 3 Nov 2008 at 2:02

GoogleCodeExporter commented 8 years ago
I guess it's much better for the plot itself to be RTL (for example Microsoft 
Excel's default chart direction for Hebrew is RTL), but if there's no other 
choice 
LTR is also acceptable. It would be great if you could implement RTL 
capabilities 
(according to the context - the target's direction).

Anyway, .plot .legend { direction: rtl; } fixes the legend even if the target 
element is LTR. Maybe this logic should be inside flot.

FF3 is fine, with IE6/7 the canvas is aligned left and out of the screen 
(negative 
horizontal position I guess). It should be quite simple to try it yourself with 
css 
html { direction: rtl; }.

Original comment by meyuc...@gmail.com on 3 Nov 2008 at 5:00

GoogleCodeExporter commented 8 years ago

Original comment by dnsch...@gmail.com on 8 May 2012 at 8:54

GoogleCodeExporter commented 8 years ago
Has this bug been already resolved ? If yes, in which version ?

Original comment by me.ankit...@gmail.com on 24 May 2012 at 6:44

GoogleCodeExporter commented 8 years ago
I am also facing similar issue, while laying out the chart in Right-to-left 
fashion, chart is not taking clicks on the bars, whereas in Left-to-Right it 
just works fine. Suspecting this would be an issue with flot not intrinsically 
supporting Right-to-Left. I am using flot v0.7.

Original comment by me.ankit...@gmail.com on 24 May 2012 at 6:46