Opened 8 years ago

Closed 4 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)

Screen Shot 2011-11-30 at 4.27.48 PM.png (100.4 KB) - added by lampshade9909 8 years ago.
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)
patchSelectedLegend.diff (7.2 KB) - added by Mathevet julien 8 years ago.

Download all attachments as: .zip

Change History (15)

Changed 8 years ago by lampshade9909

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)

comment:1 Changed 8 years ago by bill

Component: DojoX WidgetsCharting
Milestone: 1.6.2tbd
Owner: changed from dante to Eugene Lazutkin
Priority: highnormal

comment:2 Changed 8 years ago by cjolif

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.

Last edited 8 years ago by cjolif (previous) (diff)

comment:3 Changed 8 years ago by cjolif

Milestone: tbdfuture
Status: newassigned
Version: 1.6.11.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.

Last edited 8 years ago by cjolif (previous) (diff)

comment:4 Changed 8 years ago by cjolif

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.
Last edited 8 years ago by cjolif (previous) (diff)

comment:5 Changed 8 years ago by cjolif

Milestone: future1.8

comment:6 Changed 8 years ago by cjolif

In [27496]:

refs #14351. Fixes the first part of the issue (+ some strict coding fixes).

comment:7 Changed 8 years ago by cjolif

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)
Last edited 8 years ago by cjolif (previous) (diff)

comment:8 Changed 8 years ago by cjolif

Milestone: 1.82.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...

comment:9 Changed 8 years ago by cjolif

See also: #2123

Changed 8 years ago by Mathevet julien

Attachment: patchSelectedLegend.diff added

comment:10 Changed 8 years ago by Mathevet julien

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 8 years ago by Mathevet julien

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 5 years ago by jessica99

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 4 years ago by dylan

Milestone: 2.01.12
Resolution: patchwelcome
Status: assignedclosed

Given that no one has shown interest in creating a patch in the past 4+ years, I'm closing this as patchwelcome.

Note: See TracTickets for help on using tickets.