vitalif-js
/
dimple
mirror of https://github.com/vitalif/dimple
1
0
Fork 0
Code Issues Releases Wiki Activity

Made tooltips always on top

master
John Kiernander 2013-06-24 09:35:51 +01:00
parent bfe3038665
commit fe6449b4a6
9 changed files with 126 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
data/example_data.tsv
View File

@ -1726,4 +1726,4 @@ Date Month Channel Owner Brand Pack Size Pack Type SKU Price Tier Unit Sales Sal
01/12/2012 Dec-12 Supermarkets Tyrell Corp Kappa 8 Standard Kappa 8 Pack Standard Regular 11263 703847 36.56 1788.2 62.49 702058.8 655473.24 46585.56 -10565 -625137 1.02 -1588.22 1.61 -623548.78 -582171.91 -41376.87
01/12/2012 Dec-12 Supermarkets Tyrell Corp Kappa 12 Standard Kappa 12 Pack Standard Regular 4999 377208 39 958.34 75.46 376249.66 351283.18 24966.48 1864 128842 4.93 327.34 -3.76 128514.66 119986.56 8528.1
01/12/2012 Dec-12 Supermarkets Tyrell Corp Kappa 18 Standard Kappa 18 Pack Standard Regular 5330 339454 31.78 862.42 63.69 338591.58 316124.13 22467.45 -1763 -103005 -0.35 -261.69 1.31 -102743.31 -95925.65 -6817.66
01/12/2012 Dec-12 Supermarkets Wayne Ent Pi 12 Giftset Pi 12 Pack Giftset Regular 176 14269 5.97 36.25 81.07 14232.75 13288.51 944.24 4 -3 0.12 -0.01 -1.91 -2.99 -2.79 -0.2
01/12/2012 Dec-12 Supermarkets Wayne Ent Pi 12 Giftset Pi 12 Pack Giftset Regular 176 14269 5.97 36.25 81.07 14232.75 13288.51 944.24 4 -3 0.12 -0.01 -1.91 -2.99 -2.79 -0.2
1 Date Month Channel Owner Brand Pack Size Pack Type SKU Price Tier Unit Sales Sales Value Distribution Cost of Sales Price Gross Profit Indirect Costs Operating Profit Unit Sales Monthly Change Sales Value Monthly Change Distribution Monthly Change Cost of Sales Monthly Change Price Monthly Change Gross Profit Monthly Change Indirect Costs Monthly Change Operating Profit Monthly Change
1726 01/12/2012 Dec-12 Supermarkets Tyrell Corp Kappa 8 Standard Kappa 8 Pack Standard Regular 11263 703847 36.56 1788.2 62.49 702058.8 655473.24 46585.56 -10565 -625137 1.02 -1588.22 1.61 -623548.78 -582171.91 -41376.87
1727 01/12/2012 Dec-12 Supermarkets Tyrell Corp Kappa 12 Standard Kappa 12 Pack Standard Regular 4999 377208 39 958.34 75.46 376249.66 351283.18 24966.48 1864 128842 4.93 327.34 -3.76 128514.66 119986.56 8528.1
1728 01/12/2012 Dec-12 Supermarkets Tyrell Corp Kappa 18 Standard Kappa 18 Pack Standard Regular 5330 339454 31.78 862.42 63.69 338591.58 316124.13 22467.45 -1763 -103005 -0.35 -261.69 1.31 -102743.31 -95925.65 -6817.66
1729 01/12/2012 Dec-12 Supermarkets Wayne Ent Pi 12 Giftset Pi 12 Pack Giftset Regular 176 14269 5.97 36.25 81.07 14232.75 13288.51 944.24 4 -3 0.12 -0.01 -1.91 -2.99 -2.79 -0.2

108
dist/dimple.v1.js vendored
View File

@ -317,6 +317,10 @@ var dimple = {
// The group within which to put all of this chart's objects
this._group = svg.append("g");
// The group within which to put tooltips. This is not initialised here because
// the group would end up behind other chart contents in a multi chart output. It will
// therefore be added and removed by the mouse enter/leave events
this._tooltipGroup = null;
// Colors assigned to chart contents. E.g. a series value.
this._assignedColors = {};
// The next colour index to use, this value is cycled around for all default colours
@ -1932,10 +1936,10 @@ var dimple = {
filter.push(d.aggField[k]);
}
uniqueValues.forEach(function (e) {
match = match || (e.join("/") === filter.join("/"));
match = match || (e === filter.join("/"));
}, this);
if (!match) {
uniqueValues.push(filter);
uniqueValues.push(filter.join("/"));
}
}, this);
@ -1963,7 +1967,7 @@ var dimple = {
.data(uniqueValues)
.transition()
.duration(duration)
.attr("class", function (d) { return "series area " + d.join("_").replace(" ", ""); })
.attr("class", function (d) { return "series area " + d.replace(" ", ""); })
.attr("d", function (d) {
var seriesData,
baseline = [],
@ -2119,15 +2123,17 @@ var dimple = {
h = 0,
box,
overlap,
rows = [],
// Create a group for the hover objects
g = chart._group.append("g")
.attr("class", "hoverShapes");
rows = [];
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// On hover make the line marker visible immediately
selectedShape.style("opacity", 1);
// Add a ring around the data point
g.append("circle")
chart._tooltipGroup.append("circle")
.attr("cx", cx)
.attr("cy", cy)
.attr("r", r)
@ -2144,7 +2150,7 @@ var dimple = {
// Add a drop line to the x axis
if (dropDest.y !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", cx)
.attr("y1", (cy < dropDest.y ? cy + r + 4 : cy - r - 4))
.attr("x2", cx)
@ -2163,7 +2169,7 @@ var dimple = {
// Add a drop line to the y axis
if (dropDest.x !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
.attr("y1", cy)
.attr("x2", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
@ -2181,7 +2187,7 @@ var dimple = {
}
// Add a group for text
t = g.append("g");
t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group
box = t.append("rect");
@ -2279,10 +2285,9 @@ var dimple = {
leaveEventHandler: function (e, shape, chart, series) {
// Return the opacity of the marker
d3.select(shape).style("opacity", (series.lineMarkers ? dimple._helpers.opacity(e, chart, series) : 0));
// Clear all hover shapes
chart._group
.selectAll(".hoverShapes")
.remove();
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
}
};
@ -2413,14 +2418,16 @@ var dimple = {
yRunning = 0,
// The maximum bounds of the text elements
w = 0,
h = 0,
// Create a group for the hover objects
g = chart._group.append("g")
.attr("class", "hoverShapes");
h = 0;
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// Add a drop line to the x axis
if (!series.x._hasCategories() && dropDest.y !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", (x < series.x._origin ? x + 1 : x + width - 1))
.attr("y1", (y < dropDest.y ? y + height : y))
.attr("x2", (x < series.x._origin ? x + 1 : x + width - 1))
@ -2439,7 +2446,7 @@ var dimple = {
// Add a drop line to the y axis
if (!series.y._hasCategories() && dropDest.x !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", (x < dropDest.x ? x + width : x))
.attr("y1", (y < series.y._origin ? y + 1 : y + height - 1))
.attr("x2", (x < dropDest.x ? x + width : x))
@ -2457,7 +2464,7 @@ var dimple = {
}
// Add a group for text
t = g.append("g");
t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group
box = t.append("rect");
@ -2566,10 +2573,9 @@ var dimple = {
// Handle the mouse leave event
leaveEventHandler: function (chart) {
// Clear all hover shapes
chart._group
.selectAll(".hoverShapes")
.remove();
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
}
};
@ -2697,13 +2703,15 @@ var dimple = {
// The maximum bounds of the text elements
w = 0,
h = 0,
overlap,
// Create a group for the hover objects
g = chart._group.append("g")
.attr("class", "hoverShapes");
overlap;
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// Add a ring around the data point
g.append("circle")
chart._tooltipGroup.append("circle")
.attr("cx", cx)
.attr("cy", cy)
.attr("r", r)
@ -2720,7 +2728,7 @@ var dimple = {
// Add a drop line to the x axis
if (dropDest.y !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", cx)
.attr("y1", (cy < dropDest.y ? cy + r + 4 : cy - r - 4))
.attr("x2", cx)
@ -2739,7 +2747,7 @@ var dimple = {
// Add a drop line to the y axis
if (dropDest.x !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
.attr("y1", cy)
.attr("x2", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
@ -2757,7 +2765,7 @@ var dimple = {
}
// Add a group for text
t = g.append("g");
t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group
box = t.append("rect");
@ -2853,10 +2861,9 @@ var dimple = {
// Handle the mouse leave event
leaveEventHandler: function (chart) {
// Clear all hover shapes
chart._group
.selectAll(".hoverShapes")
.remove();
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
}
};
@ -3062,16 +3069,18 @@ var dimple = {
t,
box,
rows = [],
overlap,
// Create a group for the hover objects
g = chart._group.append("g")
.attr("class", "hoverShapes");
overlap;
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// On hover make the line marker visible immediately
selectedShape.style("opacity", 1);
// Add a ring around the data point
g.append("circle")
chart._tooltipGroup.append("circle")
.attr("cx", cx)
.attr("cy", cy)
.attr("r", r)
@ -3088,7 +3097,7 @@ var dimple = {
// Add a drop line to the x axis
if (dropDest.y !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", cx)
.attr("y1", (cy < dropDest.y ? cy + r + series.lineWeight + 2 : cy - r - series.lineWeight - 2))
.attr("x2", cx)
@ -3107,7 +3116,7 @@ var dimple = {
// Add a drop line to the y axis
if (dropDest.x !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", (cx < dropDest.x ? cx + r + series.lineWeight + 2 : cx - r - series.lineWeight - 2))
.attr("y1", cy)
.attr("x2", (cx < dropDest.x ? cx + r + series.lineWeight + 2 : cx - r - series.lineWeight - 2))
@ -3125,7 +3134,7 @@ var dimple = {
}
// Add a group for text
t = g.append("g");
t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group
box = t.append("rect");
@ -3223,10 +3232,9 @@ var dimple = {
leaveEventHandler: function (e, shape, chart, series) {
// Return the opacity of the marker
d3.select(shape).style("opacity", (series.lineMarkers ? dimple._helpers.opacity(e, chart, series) : 0));
// Clear all hover shapes
chart._group
.selectAll(".hoverShapes")
.remove();
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
}
};

4
dist/dimple.v1.min.js vendored
View File

File diff suppressed because one or more lines are too long

19
examples/advanced_trellis_bar.html
View File

@ -9,29 +9,24 @@
var months = dimple.getUniqueValues(data, "Date");
// Set the bounds for the charts
var row = 2,
col = 3,
var row = 0,
col = 0,
top = 25,
left = 60,
inMarg = 15,
width = 115,
height = 90;
// Sort the months in descending order so that when tooltips are drawn
// they won't be behind the chart on the right. This is because all
// chart shapes (including tooltips) are grouped.
months.sort(function (a, b) { return Date.parse(b) - Date.parse(a); });
// Pick the latest 12 dates
months = months.slice(0, 12);
months = months.slice(months.length - 12);
// Draw a chart for each of the 12 dates
months.forEach(function (month) {
// Wrap to the row above
if (col < 0) {
row -= 1;
col = 3;
if (left + ((col + 1) * (width + inMarg)) > parseFloat(svg.attr("width"))) {
row += 1;
col = 0;
}
// Filter for the month in the iteration
@ -88,7 +83,7 @@
x.titleShape.remove();
// Move to the next column
col -= 1;
col += 1;
}, this);
});

4
src/objects/chart/begin.js
View File

@ -33,6 +33,10 @@
// The group within which to put all of this chart's objects
this._group = svg.append("g");
// The group within which to put tooltips. This is not initialised here because
// the group would end up behind other chart contents in a multi chart output. It will
// therefore be added and removed by the mouse enter/leave events
this._tooltipGroup = null;
// Colors assigned to chart contents. E.g. a series value.
this._assignedColors = {};
// The next colour index to use, this value is cycled around for all default colours

31
src/objects/plot/area.js
View File

@ -30,10 +30,10 @@
filter.push(d.aggField[k]);
}
uniqueValues.forEach(function (e) {
match = match || (e.join("/") === filter.join("/"));
match = match || (e === filter.join("/"));
}, this);
if (!match) {
uniqueValues.push(filter);
uniqueValues.push(filter.join("/"));
}
}, this);
@ -61,7 +61,7 @@
.data(uniqueValues)
.transition()
.duration(duration)
.attr("class", function (d) { return "series area " + d.join("_").replace(" ", ""); })
.attr("class", function (d) { return "series area " + d.replace(" ", ""); })
.attr("d", function (d) {
var seriesData,
baseline = [],
@ -217,15 +217,17 @@
h = 0,
box,
overlap,
rows = [],
// Create a group for the hover objects
g = chart._group.append("g")
.attr("class", "hoverShapes");
rows = [];
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// On hover make the line marker visible immediately
selectedShape.style("opacity", 1);
// Add a ring around the data point
g.append("circle")
chart._tooltipGroup.append("circle")
.attr("cx", cx)
.attr("cy", cy)
.attr("r", r)
@ -242,7 +244,7 @@
// Add a drop line to the x axis
if (dropDest.y !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", cx)
.attr("y1", (cy < dropDest.y ? cy + r + 4 : cy - r - 4))
.attr("x2", cx)
@ -261,7 +263,7 @@
// Add a drop line to the y axis
if (dropDest.x !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
.attr("y1", cy)
.attr("x2", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
@ -279,7 +281,7 @@
}
// Add a group for text
t = g.append("g");
t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group
box = t.append("rect");
@ -377,10 +379,9 @@
leaveEventHandler: function (e, shape, chart, series) {
// Return the opacity of the marker
d3.select(shape).style("opacity", (series.lineMarkers ? dimple._helpers.opacity(e, chart, series) : 0));
// Clear all hover shapes
chart._group
.selectAll(".hoverShapes")
.remove();
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
}
};

23
src/objects/plot/bar.js
View File

@ -124,14 +124,16 @@
yRunning = 0,
// The maximum bounds of the text elements
w = 0,
h = 0,
// Create a group for the hover objects
g = chart._group.append("g")
.attr("class", "hoverShapes");
h = 0;
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// Add a drop line to the x axis
if (!series.x._hasCategories() && dropDest.y !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", (x < series.x._origin ? x + 1 : x + width - 1))
.attr("y1", (y < dropDest.y ? y + height : y))
.attr("x2", (x < series.x._origin ? x + 1 : x + width - 1))
@ -150,7 +152,7 @@
// Add a drop line to the y axis
if (!series.y._hasCategories() && dropDest.x !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", (x < dropDest.x ? x + width : x))
.attr("y1", (y < series.y._origin ? y + 1 : y + height - 1))
.attr("x2", (x < dropDest.x ? x + width : x))
@ -168,7 +170,7 @@
}
// Add a group for text
t = g.append("g");
t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group
box = t.append("rect");
@ -277,10 +279,9 @@
// Handle the mouse leave event
leaveEventHandler: function (chart) {
// Clear all hover shapes
chart._group
.selectAll(".hoverShapes")
.remove();
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
}
};

25
src/objects/plot/bubble.js
View File

@ -121,13 +121,15 @@
// The maximum bounds of the text elements
w = 0,
h = 0,
overlap,
// Create a group for the hover objects
g = chart._group.append("g")
.attr("class", "hoverShapes");
overlap;
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// Add a ring around the data point
g.append("circle")
chart._tooltipGroup.append("circle")
.attr("cx", cx)
.attr("cy", cy)
.attr("r", r)
@ -144,7 +146,7 @@
// Add a drop line to the x axis
if (dropDest.y !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", cx)
.attr("y1", (cy < dropDest.y ? cy + r + 4 : cy - r - 4))
.attr("x2", cx)
@ -163,7 +165,7 @@
// Add a drop line to the y axis
if (dropDest.x !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
.attr("y1", cy)
.attr("x2", (cx < dropDest.x ? cx + r + 4 : cx - r - 4))
@ -181,7 +183,7 @@
}
// Add a group for text
t = g.append("g");
t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group
box = t.append("rect");
@ -277,10 +279,9 @@
// Handle the mouse leave event
leaveEventHandler: function (chart) {
// Clear all hover shapes
chart._group
.selectAll(".hoverShapes")
.remove();
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
}
};

25
src/objects/plot/line.js
View File

@ -199,16 +199,18 @@
t,
box,
rows = [],
overlap,
// Create a group for the hover objects
g = chart._group.append("g")
.attr("class", "hoverShapes");
overlap;
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
chart._tooltipGroup = chart.svg.append("g");
// On hover make the line marker visible immediately
selectedShape.style("opacity", 1);
// Add a ring around the data point
g.append("circle")
chart._tooltipGroup.append("circle")
.attr("cx", cx)
.attr("cy", cy)
.attr("r", r)
@ -225,7 +227,7 @@
// Add a drop line to the x axis
if (dropDest.y !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", cx)
.attr("y1", (cy < dropDest.y ? cy + r + series.lineWeight + 2 : cy - r - series.lineWeight - 2))
.attr("x2", cx)
@ -244,7 +246,7 @@
// Add a drop line to the y axis
if (dropDest.x !== null) {
g.append("line")
chart._tooltipGroup.append("line")
.attr("x1", (cx < dropDest.x ? cx + r + series.lineWeight + 2 : cx - r - series.lineWeight - 2))
.attr("y1", cy)
.attr("x2", (cx < dropDest.x ? cx + r + series.lineWeight + 2 : cx - r - series.lineWeight - 2))
@ -262,7 +264,7 @@
}
// Add a group for text
t = g.append("g");
t = chart._tooltipGroup.append("g");
// Create a box for the popup in the text group
box = t.append("rect");
@ -360,10 +362,9 @@
leaveEventHandler: function (e, shape, chart, series) {
// Return the opacity of the marker
d3.select(shape).style("opacity", (series.lineMarkers ? dimple._helpers.opacity(e, chart, series) : 0));
// Clear all hover shapes
chart._group
.selectAll(".hoverShapes")
.remove();
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
}
}
};