[Plot] Avoid displaying bad labels
Avoid displaying bad labels for tick marks, or in the coordinates shown on hover. Done in the context of refactoring to support WTD-625.
This commit is contained in:
@@ -16,8 +16,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="gl-plot-coords"
|
<div class="gl-plot-coords"
|
||||||
ng-if="subplot.isHovering()">
|
ng-if="subplot.isHovering() && subplot.getHoverCoordinates()">
|
||||||
{{subplot.getHoverCoordinates().join(', ')}}
|
{{subplot.getHoverCoordinates()}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="gl-plot-axis-area gl-plot-y">
|
<div class="gl-plot-axis-area gl-plot-y">
|
||||||
|
|||||||
@@ -33,6 +33,7 @@ define(
|
|||||||
domainOffset,
|
domainOffset,
|
||||||
mousePosition,
|
mousePosition,
|
||||||
marqueeStart,
|
marqueeStart,
|
||||||
|
hoverCoordinates,
|
||||||
isHovering = false;
|
isHovering = false;
|
||||||
|
|
||||||
// Utility, for map/forEach loops. Index 0 is domain,
|
// Utility, for map/forEach loops. Index 0 is domain,
|
||||||
@@ -43,6 +44,11 @@ define(
|
|||||||
formatter.formatDomainValue)(v);
|
formatter.formatDomainValue)(v);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Utility function for filtering out empty strings.
|
||||||
|
function isNonEmpty(v) {
|
||||||
|
return typeof v === 'string' && v !== "";
|
||||||
|
}
|
||||||
|
|
||||||
// Converts from pixel coordinates to domain-range,
|
// Converts from pixel coordinates to domain-range,
|
||||||
// to interpret mouse gestures.
|
// to interpret mouse gestures.
|
||||||
function mousePositionToDomainRange(mousePosition) {
|
function mousePositionToDomainRange(mousePosition) {
|
||||||
@@ -79,6 +85,16 @@ define(
|
|||||||
return [ position[0] - domainOffset, position[1] ];
|
return [ position[0] - domainOffset, position[1] ];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Update the currnet hover coordinates
|
||||||
|
function updateHoverCoordinates() {
|
||||||
|
hoverCoordinates = mousePosition &&
|
||||||
|
mousePositionToDomainRange(mousePosition)
|
||||||
|
.map(formatValue)
|
||||||
|
.filter(isNonEmpty)
|
||||||
|
.join(", ");
|
||||||
|
}
|
||||||
|
|
||||||
// Update the drawable marquee area to reflect current
|
// Update the drawable marquee area to reflect current
|
||||||
// mouse position (or don't show it at all, if no marquee
|
// mouse position (or don't show it at all, if no marquee
|
||||||
// zoom is in progress)
|
// zoom is in progress)
|
||||||
@@ -191,10 +207,7 @@ define(
|
|||||||
* coordinates over which the mouse is hovered
|
* coordinates over which the mouse is hovered
|
||||||
*/
|
*/
|
||||||
getHoverCoordinates: function () {
|
getHoverCoordinates: function () {
|
||||||
return mousePosition ?
|
return hoverCoordinates;
|
||||||
mousePositionToDomainRange(
|
|
||||||
mousePosition
|
|
||||||
).map(formatValue) : [];
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Handle mouse movement over the chart area.
|
* Handle mouse movement over the chart area.
|
||||||
@@ -203,6 +216,7 @@ define(
|
|||||||
hover: function ($event) {
|
hover: function ($event) {
|
||||||
isHovering = true;
|
isHovering = true;
|
||||||
mousePosition = toMousePosition($event);
|
mousePosition = toMousePosition($event);
|
||||||
|
updateHoverCoordinates();
|
||||||
if (marqueeStart) {
|
if (marqueeStart) {
|
||||||
updateMarqueeBox();
|
updateMarqueeBox();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,11 +16,11 @@ define(
|
|||||||
*/
|
*/
|
||||||
function PlotFormatter() {
|
function PlotFormatter() {
|
||||||
function formatDomainValue(v) {
|
function formatDomainValue(v) {
|
||||||
return moment.utc(v).format(DATE_FORMAT);
|
return isNaN(v) ? "" : moment.utc(v).format(DATE_FORMAT);
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatRangeValue(v) {
|
function formatRangeValue(v) {
|
||||||
return v.toFixed(1);
|
return isNaN(v) ? "" : v.toFixed(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -84,13 +84,15 @@ define(
|
|||||||
|
|
||||||
it("provides hovering coordinates", function () {
|
it("provides hovering coordinates", function () {
|
||||||
// Should be empty when not hovering
|
// Should be empty when not hovering
|
||||||
expect(subplot.getHoverCoordinates()).toEqual([]);
|
expect(subplot.getHoverCoordinates())
|
||||||
|
.toBeUndefined();
|
||||||
|
|
||||||
// Start hovering
|
// Start hovering
|
||||||
subplot.hover({ target: mockElement });
|
subplot.hover({ target: mockElement });
|
||||||
|
|
||||||
// Should now have coordinates to display
|
// Should now have coordinates to display
|
||||||
expect(subplot.getHoverCoordinates().length).toEqual(2);
|
expect(subplot.getHoverCoordinates())
|
||||||
|
.toEqual(jasmine.any(String));
|
||||||
});
|
});
|
||||||
|
|
||||||
it("supports marquee zoom", function () {
|
it("supports marquee zoom", function () {
|
||||||
|
|||||||
Reference in New Issue
Block a user