Skip to content

Commit

Permalink
feat(axis): Inten to ship axis.x.tick.tooltip
Browse files Browse the repository at this point in the history 
Add <title> element showing full category text when the option is set

Fix #236
Close #240
  • Loading branch information
@netil
netil committed Jan 16, 2018
1 parent dfeddc6 commit 94a8650
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 52 deletions.
23 changes: 16 additions & 7 deletions spec/axis-spec.js
View file
Expand Up @@ -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", () => {
Expand Down Expand Up @@ -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", () => {
Expand Down Expand Up @@ -428,7 +424,10 @@ describe("AXIS", function() {
},
axis: {
x: {
type: "category"
type: "category",
tick: {
tooltip: true
}
}
}
};
Expand Down Expand Up @@ -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", () => {
Expand Down
67 changes: 27 additions & 40 deletions src/axis/Axis.js
View file
Expand Up @@ -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
};
Expand All @@ -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;
}
Expand All @@ -99,6 +102,7 @@ export default class Axis {
$$.isTimeSeries()
);
}

if (axis) {
axis.tickValues(tickValues);
} else {
Expand All @@ -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)
Expand Down Expand Up @@ -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) {
Expand All @@ -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;
}
Expand Down Expand Up @@ -272,6 +260,7 @@ export default class Axis {
} else {
label = id === "y" ? this.getYAxisLabelPosition() : this.getXAxisLabelPosition();
}

return label;
}

Expand Down Expand Up @@ -302,6 +291,7 @@ export default class Axis {
} else {
x = position.isMiddle ? -$$.height / 2 : 0;
}

return x;
}

Expand All @@ -319,6 +309,7 @@ export default class Axis {
} else {
dx = position.isBottom ? "0.5em" : "0";
}

return dx;
}

Expand All @@ -336,6 +327,7 @@ export default class Axis {
} else {
anchor = position.isMiddle ? "middle" : "end";
}

return anchor;
}

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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];
}

Expand Down Expand Up @@ -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);
}
Expand Down
14 changes: 10 additions & 4 deletions src/axis/bb.axis.js
View file
Expand Up @@ -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;

Expand Down Expand Up @@ -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) ?
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -493,7 +499,7 @@ export default function(params = {}) {
return tickArguments;
}

tickArguments = Array.prototype.slice.call(args);
tickArguments = toArray(args);

return axis;
};
Expand Down
18 changes: 18 additions & 0 deletions src/config/Options.js
View file
Expand Up @@ -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鈥鈥ick鈥ooltip
* @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鈥鈥ax
Expand Down
2 changes: 1 addition & 1 deletion src/internals/scale.js
View file
Expand Up @@ -138,6 +138,6 @@ extend(ChartInternal.prototype, {
$$.y2AxisTickValues, config.axis_y2_tick_outer);

// update for arc
if ($$.updateArc) { $$.updateArc(); }
$$.updateArc && $$.updateArc();
},
});

0 comments on commit 94a8650

Please sign in to comment.