From 94a86507239a3723776d8c0a048454fe9037e4a2 Mon Sep 17 00:00:00 2001 From: Jae Sung Park Date: Tue, 16 Jan 2018 15:41:24 +0900 Subject: [PATCH] feat(axis): Inten to ship axis.x.tick.tooltip Add element showing full category text when the option is set Fix #236 Close #240 --- spec/axis-spec.js | 23 ++++++++++----- src/axis/Axis.js | 67 +++++++++++++++++------------------------- src/axis/bb.axis.js | 14 ++++++--- src/config/Options.js | 18 ++++++++++++ src/internals/scale.js | 2 +- 5 files changed, 72 insertions(+), 52 deletions(-) diff --git a/spec/axis-spec.js b/spec/axis-spec.js index 331870166..1901dae13 100644 --- a/spec/axis-spec.js +++ b/spec/axis-spec.js @@ -244,14 +244,12 @@ describe("AXIS", function() { }); }); - it("should set axis.x.tick.format", () => { + it("set options axis.x.tick.format", () => { args.axis.x = { tick: { format: () => "very long tick text on x axis" } }; - - expect(true).to.be.ok; }); it("should split x axis tick text to multiple lines", () => { @@ -325,13 +323,11 @@ describe("AXIS", function() { }); }); - it("should set big values in y", () => { + it("set options data.columns, big values in y", () => { args.data.columns = [ ["data1", 3000000000000000, 200, 100, 400, 150, 250], ["data2", 50, 20, 10, 40, 15, 25] ]; - - expect(true).to.be.ok; }); it("should not split y axis tick text to multiple lines", () => { @@ -428,7 +424,10 @@ describe("AXIS", function() { }, axis: { x: { - type: "category" + type: "category", + tick: { + tooltip: true + } } } }; @@ -482,6 +481,16 @@ describe("AXIS", function() { } }); }); + + it("should set tooltip", () => { + const ticks = chart.internal.main.select(".bb-axis-x") + .selectAll("g.tick"); + const categories = chart.categories(); + + ticks.each(function(d, i) { + expect(d3.select(this).select("title").text()).to.be.equal(categories[i]); + }); + }); }); describe("rotated", () => { diff --git a/src/axis/Axis.js b/src/axis/Axis.js index 164e3b9d5..a48fafe80 100644 --- a/src/axis/Axis.js +++ b/src/axis/Axis.js @@ -54,12 +54,14 @@ export default class Axis { tickValues, withOuterTick, withoutTransition, withoutRotateTickText) { const $$ = this.owner; const config = $$.config; + const isCategory = $$.isCategorized(); const axisParams = { - isCategory: $$.isCategorized(), + isCategory, withOuterTick, tickMultiline: config.axis_x_tick_multiline, tickWidth: config.axis_x_tick_width, tickTextRotate: withoutRotateTickText ? 0 : config.axis_x_tick_rotate, + tickTitle: isCategory && config.axis_x_tick_tooltip && $$.api.categories(), withoutTransition, orgXScale: $$.x }; @@ -77,8 +79,9 @@ export default class Axis { // Set tick axis.tickFormat(tickFormat).tickValues(newTickValues); - if ($$.isCategorized()) { + if (isCategory) { axis.tickCentered(config.axis_x_tick_centered); + if (isEmpty(config.axis_x_tick_culling)) { config.axis_x_tick_culling = false; } @@ -99,6 +102,7 @@ export default class Axis { $$.isTimeSeries() ); } + if (axis) { axis.tickValues(tickValues); } else { @@ -116,7 +120,7 @@ export default class Axis { const axisParams = { withOuterTick, withoutTransition, - tickTextRotate: withoutRotateTickText ? 0 : config.axis_y_tick_rotate, + tickTextRotate: withoutRotateTickText ? 0 : config.axis_y_tick_rotate }; const axis = bbAxis(axisParams) .scale(scale) @@ -190,18 +194,8 @@ export default class Axis { getLabelOptionByAxisId(axisId) { const $$ = this.owner; - const config = $$.config; - let option; - - if (axisId === "y") { - option = config.axis_y_label; - } else if (axisId === "y2") { - option = config.axis_y2_label; - } else if (axisId === "x") { - option = config.axis_x_label; - } - return option; + return $$.config[`axis_${axisId}_label`]; } getLabelText(axisId) { @@ -223,13 +217,7 @@ export default class Axis { const option = this.getLabelOptionByAxisId(axisId); if (isString(option)) { - if (axisId === "y") { - config.axis_y_label = text; - } else if (axisId === "y2") { - config.axis_y2_label = text; - } else if (axisId === "x") { - config.axis_x_label = text; - } + config[`axis_${axisId}_label`] = text; } else if (option) { option.text = text; } @@ -272,6 +260,7 @@ export default class Axis { } else { label = id === "y" ? this.getYAxisLabelPosition() : this.getXAxisLabelPosition(); } + return label; } @@ -302,6 +291,7 @@ export default class Axis { } else { x = position.isMiddle ? -$$.height / 2 : 0; } + return x; } @@ -319,6 +309,7 @@ export default class Axis { } else { dx = position.isBottom ? "0.5em" : "0"; } + return dx; } @@ -336,6 +327,7 @@ export default class Axis { } else { anchor = position.isMiddle ? "middle" : "end"; } + return anchor; } @@ -435,24 +427,13 @@ export default class Axis { let scale; let axis; - if (id === "y") { - scale = $$.y.copy().domain($$.getYDomain(targetsToShow, "y")); - axis = this.getYAxis( - scale, - $$.yOrient, - config.axis_y_tick_format, - $$.yAxisTickValues, - false, - true, - true - ); - } else if (id === "y2") { - scale = $$.y2.copy().domain($$.getYDomain(targetsToShow, "y2")); + if (/^y2?$/.test(id)) { + scale = $$[id].copy().domain($$.getYDomain(targetsToShow, id)); axis = this.getYAxis( scale, - $$.y2Orient, - config.axis_y2_tick_format, - $$.y2AxisTickValues, + $$[`${id}Orient`], + config[`axis_${id}_tick_format`], + $$[`${id}AxisTickValues`], false, true, true @@ -486,14 +467,18 @@ export default class Axis { .each(function() { d3Select(this).selectAll("text") .each(function() { - const box = this.getBoundingClientRect(); + const boxWidth = this.getBoundingClientRect().width; - if (maxWidth < box.width) { maxWidth = box.width; } + maxWidth < boxWidth && (maxWidth = boxWidth); }); + dummy.remove(); }); } - $$.currentMaxTickWidths[id] = maxWidth <= 0 ? $$.currentMaxTickWidths[id] : maxWidth; + + $$.currentMaxTickWidths[id] = maxWidth <= 0 ? + $$.currentMaxTickWidths[id] : maxWidth; + return $$.currentMaxTickWidths[id]; } @@ -528,9 +513,11 @@ export default class Axis { if (!isValue(p)) { return defaultValue; } + if (padding.unit === "ratio") { return padding[key] * domainLength; } + // assume padding is pixels if unit is not specified return this.convertPixelsToAxisPadding(p, domainLength); } diff --git a/src/axis/bb.axis.js b/src/axis/bb.axis.js index d5a4e0935..bc558c78f 100644 --- a/src/axis/bb.axis.js +++ b/src/axis/bb.axis.js @@ -6,11 +6,11 @@ import { scaleLinear as d3ScaleLinear, select as d3Select } from "d3"; -import {isArray, isDefined, isFunction} from "../internals/util"; +import {isArray, toArray, isDefined, isFunction} from "../internals/util"; // Features: // 1. category axis -// 2. ceil values of translate/x/y to int for half pixel antialiasing +// 2. ceil values of translate/x/y to int for half pixel anti-aliasing // 3. multiline tick text let tickTextCharSize; @@ -48,7 +48,7 @@ export default function(params = {}) { if (scale.ticks) { return scale.ticks( - ...(tickArguments ? Array.prototype.slice.call(tickArguments) : []) + ...(tickArguments ? toArray(tickArguments) : []) ).map(v => ( // round the tick value if is number /(string|number)/.test(typeof v) && !isNaN(v) ? @@ -398,6 +398,12 @@ export default function(params = {}) { pathUpdate.attr("d", `M${outerTickSize},${range[0]}H0V${range[1]}H${outerTickSize}`); } + // Append <title> for tooltip display + params.tickTitle && textUpdate.append("title") + .each(function(index) { + d3Select(this).text(params.tickTitle[index]); + }); + if (scale1.bandwidth) { const x = scale1; const dx = x.bandwidth() / 2; @@ -493,7 +499,7 @@ export default function(params = {}) { return tickArguments; } - tickArguments = Array.prototype.slice.call(args); + tickArguments = toArray(args); return axis; }; diff --git a/src/config/Options.js b/src/config/Options.js index 519c03f74..3637a4358 100644 --- a/src/config/Options.js +++ b/src/config/Options.js @@ -1395,6 +1395,24 @@ export default class Options { */ axis_x_tick_width: null, + /** + * Set to display system tooltip for tick text + * - **Note:** Only available for category axis type (`axis.x.type='category'`) + * @name axis․x․tick․tooltip + * @memberOf Options + * @type {Boolean} + * @default false + * @example + * axis: { + * x: { + * tick: { + * tooltip: true + * } + * } + * } + */ + axis_x_tick_tooltip: false, + /** * Set max value of x axis range. * @name axis․x․max diff --git a/src/internals/scale.js b/src/internals/scale.js index 92714d2bd..65b54d42c 100644 --- a/src/internals/scale.js +++ b/src/internals/scale.js @@ -138,6 +138,6 @@ extend(ChartInternal.prototype, { $$.y2AxisTickValues, config.axis_y2_tick_outer); // update for arc - if ($$.updateArc) { $$.updateArc(); } + $$.updateArc && $$.updateArc(); }, });