Opened 9 years ago
Closed 5 years ago
#14351 closed defect (patchwelcome)
Selectable Legend doesn't function properly with Mouse Indicator
| Reported by: | lampshade9909 | Owned by: | cjolif |
|---|---|---|---|
| Priority: | high | Milestone: | 1.13 |
| Component: | Charting | Version: | 1.7.1 |
| Keywords: | Charing, Selectable Legend Mouse Indicator | Cc: | |
| Blocked By: | Blocking: |
Description
Below is simple code for a chart containing a Selectable Legend and Mouse Indicator. This bug consists of the checkboxes becoming dead unusable until the user refreshes the page. In order to recreate this bug, do the following: Set up an HTML page with the below code. Once the chart loads, UNCHECK a box in the Selectable Legend. Then CLICK AND HOLD the mouse button down. While holding the mouse button down, MOVE THE MOUSE ALL OVER THE CHART for a few seconds. Within a very short period of time the checkboxes will break. If the checkboxes have not yet broken, uncheck another checkbox and repeat click/moving the mouse.
MY CODE
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Monthly Sales</title>
<!-- required for Tooltip: a default dijit theme: -->
<link rel="stylesheet" href="/media/js/dojo/dijit/themes/claro/claro.css">
<!-- imports the DOJO java script library -->
<script src="/media/js/dojo/dojo/dojo.js"
type="text/javascript" data-dojo-config="isDebug: true,parseOnLoad: true">
</script>
<style type="text/css">
@import "/media/js/dojo/dojo/resources/dojo.css";
@import "/media/js/dojo/dijit/themes/claro/claro.css";
@import "/media/js/dojo/dojox/charting/resources/Legend.css";
</style>
<style>
.bars{
width:300px;
height:200px;
}
</style>
<script>
dojo.require("dojox.charting.Chart");
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.axis2d.Default");
dojo.require("dojox.charting.plot2d.Bars");
dojo.require("dojox.charting.themes.Claro");
dojo.require("dojox.charting.widget.SelectableLegend");
dojo.require("dojox.charting.action2d.Highlight");
dojo.require("dojox.charting.action2d.MouseIndicator");
// When the DOM is ready and resources are loaded...
dojo.ready(function() {
var chart1 = new dojox.charting.Chart2D("simplechart");
chart1.addPlot("default", {type: "Lines", markers: true, tension:3, shadows: {dx: 2, dy: 2, dw: 2}});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true, min: -20, max:40});
chart1.addSeries("Average", [4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4], {marker: "m-3,0 c0,-2 3,-2 3,0 m-3,0 c0,2 3,2 3,0", color:"red", fill:"red"});
chart1.addSeries("High", [4,4,4,5,5,5,6,6,4,4,4,5,5,5,6,6,4,4,4,5,5,5,6,6,4,4,4,5,5,5,6,6,4,4,4,5,5,5,6,6,4,4,4,5,5,5,6,6,4,4,4,5,5,5,6,6,4,4,4,5,5,5,6,6,4,4,4,5,5,5,6,6,4,4,4,5,5,5,6,6,4,4,4,5,5,5,6,6], {marker: "m-3,0 c0,-2 3,-2 3,0 m-3,0 c0,2 3,2 3,0", color:"red", fill:"red"});
chart1.addSeries("Low", [4,4,4,3,3,3,2,2,4,4,4,3,3,3,2,2,4,4,4,3,3,3,2,2,4,4,4,3,3,3,2,2,4,4,4,3,3,3,2,2,4,4,4,3,3,3,2,2,4,4,4,3,3,3,2,2,4,4,4,3,3,3,2,2,4,4,4,3,3,3,2,2,4,4,4,3,3,3,2,2,4,4,4,3,3,3,2,2], {marker: "m-3,0 c0,-2 3,-2 3,0 m-3,0 c0,2 3,2 3,0", color:"red", fill:"red"});
// HERE IS THE MOUSE INDICATOR
new dojox.charting.action2d.MouseIndicator(chart1, "default", { series: "High",
font: "normal normal bold 12pt Tahoma", fillFunc: function(v){
return v.y>4?"red":"green";
}, labelFunc: function(v){
return "x: "+v.x+", y:"+v.y;
}});
chart1.render();
// AND HERE IS THE SELECTABLE LEGEND
var barsLegend = new dojox.charting.widget.SelectableLegend({chart: chart1},"legend");
});
</script>
</head>
<body class="claro">
<div id="simplechart" style="width: 600px; height: 300px;"></div>
<div id="legend"></div>
</body>
</html>
The source file "/media/js/dojo/dojo/dojo.js" is my build built from the below build script using the below profile using the most recent version of Dojo from the repository:
MY BUILD SCRIPT
./build.sh action=release,clean profile=standard releaseDir=myrelease
MY PROFILE
dependencies = {
//Strip all console.* calls except console.warn and console.error. This is basically a work-around
//for trac issue: http://bugs.dojotoolkit.org/ticket/6849 where Safari 3's console.debug seems
//to be flaky to set up (apparently fixed in a webkit nightly).
//But in general for a build, console.warn/error should be the only things to survive anyway.
stripConsole: "normal",
layers: [
{
name: "../dijit/dijit.js",
dependencies: [
"dijit.dijit"
]
},
{
name: "../dijit/dijit-all.js",
layerDependencies: [
"../dijit/dijit.js"
],
dependencies: [
"dijit.dijit-all"
]
},
{
name: "../dojox/grid/DataGrid.js",
dependencies: [
"dojox.grid.DataGrid"
]
},
{
name: "../dojox/gfx.js",
dependencies: [
"dojox.gfx"
]
},
// FIXME:
// we probably need a better structure for this layer and need to
// add some of the most common themes
{
name: "../dojox/charting/widget/Chart2D.js",
dependencies: [
"dojox.charting.widget.Chart2D",
"dojox.charting.widget.Sparkline",
"dojox.charting.widget.Legend",
"dojox.charting.widget.SelectableLegend",
"dijit.form.CheckBox"
]
},
{
name: "../dojox/charting/widget/Chart.js",
dependencies: [
"dojox.charting.widget.Chart",
"dojox.charting.widget.Sparkline",
"dojox.charting.widget.Legend",
"dojox.charting.widget.SelectableLegend",
"dojox.charting.axis2d.Default",
"dojox.charting.plot2d.Bars",
"dojox.charting.plot2d.Lines",
"dojox.charting.action2d.MouseZoomAndPan",
"dojox.charting.action2d.MouseIndicator",
"dijit.form.CheckBox"
]
},
{
name: "../dojox/dtl.js",
dependencies: [
"dojox.dtl",
"dojox.dtl.Context",
"dojox.dtl.tag.logic",
"dojox.dtl.tag.loop",
"dojox.dtl.tag.date",
"dojox.dtl.tag.loader",
"dojox.dtl.tag.misc",
"dojox.dtl.ext-dojo.NodeList"
]
},
{
name: "../dojox/mobile.js",
dependencies: [
"dojox.mobile"
]
},
{
name: "../dojox/mobile/app.js",
dependencies: [
"dojox.mobile.app"
]
},
{
name: "../dojox/mobile/compat.js",
dependencies: [
"dojox.mobile.compat"
]
},
{
name: "../dojox/mobile/app/compat.js",
dependencies: [
"dojox.mobile.app.compat"
]
}
],
prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ]
]
}
Attachments (2)
Change History (15)
Changed 9 years ago by
| Attachment: | Screen Shot 2011-11-30 at 4.27.48 PM.png added |
|---|
comment:1 Changed 9 years ago by
| Component: | DojoX Widgets → Charting |
|---|---|
| Milestone: | 1.6.2 → tbd |
| Owner: | changed from dante to Eugene Lazutkin |
| Priority: | high → normal |
comment:2 Changed 9 years ago by
| Owner: | changed from Eugene Lazutkin to cjolif |
|---|
You are using MouseIndicator & setting the affected version to 1.6.1. But MouseIndicator was not in 1.6.1. Can you please clarify? Thanks.
comment:3 Changed 9 years ago by
| Milestone: | tbd → future |
|---|---|
| Status: | new → assigned |
| Version: | 1.6.1 → 1.7.1 |
I have tried in 1.7.1 and do reproduce. I suspect the user improperly filled the version field. I'm not sure yet whether the problem is actually with the MouseIndicator? or the SelectableLegend? itself.
comment:4 Changed 9 years ago by
It seems the problem occurs in two cases:
- when SelectableLegend._highlight is called. Overriding SelectableLegend._highlight to be no-op workarounds that issue for those who do not need highlight.
- when the user drags the mouse indicator outside the chart plot area bounds. This one can be worked around by setting autoScroll to false on the MouseIndicator.
comment:5 Changed 9 years ago by
| Milestone: | future → 1.8 |
|---|
comment:7 Changed 9 years ago by
The second part contains two sub-issues:
- the change of visibility that SelectableLegend makes is not persistent, and redrawing the chart (as the autoScroll will do) make the series re-appear
- once the series is re-created the SelectableLegend is not refresh to take into account the new GFX shapes (see http://bugs.dojotoolkit.org/ticket/14060#comment:1)
comment:8 Changed 9 years ago by
| Milestone: | 1.8 → 2.0 |
|---|
I'm wondering if we should not take the opportunity of re-architecturing SelectableLegend when fixing this. That is, instead of hiding the shapes, have a notion of hidden series that are not rendered at all by the plots. However that would mean behavior for stacked or pie chart would be different as the hidden series would probably be ignored in the computation of the stacking or of the pie slices percentages. As this would a kind of incompatibility (even if the current behavior of getting a blank slice for example sounds like a bug to me), it might worth waiting for 2.0 to implement this...
Changed 9 years ago by
| Attachment: | patchSelectedLegend.diff added |
|---|
comment:10 Changed 9 years ago by
I don't know if it's correct place to add it. But it's refer to cjolif remarks (second part). This patch allow to avoid blank slice/area in pie or Stacked chart.
For me it's clearly a bug. SelectedLegend couldn't be used for this kind of chart.
So it's would be great if it could be included also in 1.8.
comment:11 Changed 9 years ago by
Well forget this patch. I update it and create new ticket #15421 . May be could fix this one too... I haven't test
comment:12 Changed 6 years ago by
Preview mode has a bug in Chrome (not Firefox) on OSX: when the comment is rendered for preview, the spacing between paragraphs is not shown. The actual final (not previewed) comment seems to be rendered ok.
Source about vigrx plus review
comment:13 Changed 5 years ago by
| Milestone: | 2.0 → 1.12 |
|---|---|
| Resolution: | → patchwelcome |
| Status: | assigned → closed |
Given that no one has shown interest in creating a patch in the past 4+ years, I'm closing this as patchwelcome.
An image of the checkboxes broken. One Series is checked, and two are unchecked; however, all three series are displayed on the chart (hence it being broken)