Skip to content

Commit

Permalink
feat(line): Intent to ship bubble/line/scatter zerobased
Browse files Browse the repository at this point in the history 
Implementation for bubble/line/scatter types zerobased option.

Fix #1149
Close #1150
  • Loading branch information
@michkami @netil
michkami authored and netil committed Dec 5, 2019
1 parent 2874fdc commit e45fb33
Show file tree
Hide file tree
Showing 7 changed files with 215 additions and 3 deletions.
1 change: 1 addition & 0 deletions AUTHORS.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,4 @@ Kimberly Baum <https://github.com/kimberlybaum>
Dylan Praul <[email protected]>
Christophe Coevoet <[email protected]>
Jung Hoon Park <[email protected]>
Kamil Michalski <[email protected]>
54 changes: 54 additions & 0 deletions spec/internals/data-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1444,6 +1444,60 @@ describe("DATA", () => {

expect(texts.size()).to.be.equal(data.length);
});

it("should be zerobased", () => {
args.scatter = {zerobased: true};
chart = util.generate(args);

const tickNodes = chart.$.svg.select(`.${CLASS.axisY}`).selectAll("g.tick");
const tickElements = tickNodes.nodes();

const translateValues = [
"translate(0,426)",
"translate(0,389)",
"translate(0,352)",
"translate(0,314)",
"translate(0,277)",
"translate(0,240)",
"translate(0,202)",
"translate(0,165)",
"translate(0,127)",
"translate(0,90)",
"translate(0,53)",
"translate(0,15)"
];

tickNodes.each((data, index) => {
expect(d3Select(tickElements[index]).attr("transform")).to.be.equal(translateValues[index]);
});
});

it("should not be zerobased", () => {
args.scatter = {zerobased: false};
chart = util.generate(args);

const tickNodes = chart.$.svg.select(`.${CLASS.axisY}`).selectAll("g.tick");
const tickElements = tickNodes.nodes();

const translateValues = [
"translate(0,402)",
"translate(0,367)",
"translate(0,331)",
"translate(0,296)",
"translate(0,260)",
"translate(0,225)",
"translate(0,189)",
"translate(0,154)",
"translate(0,118)",
"translate(0,83)",
"translate(0,47)",
"translate(0,12)"
];

tickNodes.each((data, index) => {
expect(d3Select(tickElements[index]).attr("transform")).to.be.equal(translateValues[index]);
});
});
});

describe("on scatter + line type", () => {
Expand Down
58 changes: 58 additions & 0 deletions spec/shape/shape.bubble-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,64 @@ describe("SHAPE BUBBLE", () => {
chart.internal.getBubbleR({value})
);
});

it("set options [bubble.zerobased=true]", () => {
args.bubble = {
zerobased: true
};
});

it("should be zerobased", () => {
chart = util.generate(args);

const tickNodes = chart.$.svg.select(`.${CLASS.axisY}`).selectAll("g.tick");
const tickElements = tickNodes.nodes();

const translateValues = [
"translate(0,426)",
"translate(0,377)",
"translate(0,328)",
"translate(0,279)",
"translate(0,230)",
"translate(0,181)",
"translate(0,131)",
"translate(0,82)",
"translate(0,33)"
];

tickNodes.each((data, index) => {
expect(d3Select(tickElements[index]).attr("transform")).to.be.equal(translateValues[index]);
});
});

it("set options [bubble.zerobased=false]", () => {
args.bubble = {
zerobased: false
};
});

it("should not be zerobased", () => {
chart = util.generate(args);

const tickNodes = chart.$.svg.select(`.${CLASS.axisY}`).selectAll("g.tick");
const tickElements = tickNodes.nodes();

const translateValues = [
"translate(0,390)",
"translate(0,345)",
"translate(0,300)",
"translate(0,255)",
"translate(0,209)",
"translate(0,164)",
"translate(0,119)",
"translate(0,74)",
"translate(0,29)"
];

tickNodes.each((data, index) => {
expect(d3Select(tickElements[index]).attr("transform")).to.be.equal(translateValues[index]);
});
});
});

describe("with dimension data", () => {
Expand Down
48 changes: 48 additions & 0 deletions spec/shape/shape.line-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -498,6 +498,54 @@ describe("SHAPE LINE", () => {
expect(chart.internal.config.line_classes).to.include('line-class-1');
expect(chart.internal.config.line_classes).to.include('line-class-2');
});

it("should not be zerobased", () => {
args.line.zerobased = false;
chart = util.generate(args);

const tickNodes = chart.$.svg.select(`.${CLASS.axisY}`).selectAll("g.tick");
const tickElements = tickNodes.nodes();

const translateValues = [
"translate(0,391)",
"translate(0,347)",
"translate(0,303)",
"translate(0,258)",
"translate(0,214)",
"translate(0,170)",
"translate(0,125)",
"translate(0,81)",
"translate(0,37)"
];

tickNodes.each((data, index) => {
expect(d3Select(tickElements[index]).attr("transform")).to.be.equal(translateValues[index]);
});
});

it("should be zerobased", () => {
args.line.zerobased = true;
chart = util.generate(args);

const tickNodes = chart.$.svg.select(`.${CLASS.axisY}`).selectAll("g.tick");
const tickElements = tickNodes.nodes();

const translateValues = [
"translate(0,426)",
"translate(0,378)",
"translate(0,330)",
"translate(0,282)",
"translate(0,233)",
"translate(0,185)",
"translate(0,137)",
"translate(0,88)",
"translate(0,40)"
];

tickNodes.each((data, index) => {
expect(d3Select(tickElements[index]).attr("transform")).to.be.equal(translateValues[index]);
});
});
});

describe("area linear gradient", () => {
Expand Down
37 changes: 35 additions & 2 deletions src/config/Options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2991,6 +2991,7 @@ export default class Options {
* - step-before
* - step-after
* @property {Boolean|Array} [line.point=true] Set to false to not draw points on linecharts. Or pass an array of line ids to draw points for.
* @property {Boolean} [line.zerobased=false] Set if min or max value will be 0 on line chart.
* @example
* line: {
* connectNull: true,
Expand All @@ -3008,14 +3009,43 @@ export default class Options {
* // show data points for only indicated datas
* point: [
* "data1", "data3"
* ]
* ],
*
* zerobased: false
* }
*/
line_connectNull: false,
line_step_type: "step",
line_zerobased: false,
line_classes: undefined,
line_point: true,

/**
* Set scatter options
* @name scatter
* @memberof Options
* @type {Object}
* @property {Boolean} [scatter.zerobased=false] Set if min or max value will be 0 on scatter chart.
* @example
* scatter: {
* connectNull: true,
* step: {
* type: "step-after"
* },
*
* // hide all data points ('point.show=false' also has similar effect)
* point: false,
*
* // show data points for only indicated datas
* point: [
* "data1", "data3"
* ],
*
* zerobased: false
* }
*/
scatter_zerobased: false,

/**
* Set bar options
* @name bar
Expand Down Expand Up @@ -3089,6 +3119,7 @@ export default class Options {
* @memberof Options
* @type {Object}
* @property {Number|Function} [bubble.maxR=35] Set the max bubble radius value
* @property {Boolean} [bubble.zerobased=false] Set if min or max value will be 0 on bubble chart.
* @example
* bubble: {
* // ex) If 100 is the highest value among data bound, the representation bubble of 100 will have radius of 50.
Expand All @@ -3100,10 +3131,12 @@ export default class Options {
* // ex. of d param - {x: Fri Oct 06 2017 00:00:00 GMT+0900, value: 80, id: "data2", index: 5}
* ...
* return Math.sqrt(d.value * 2);
* }
* },
* zerobased: false
* }
*/
bubble_maxR: 35,
bubble_zerobased: false,

/**
* Set area options
Expand Down
3 changes: 2 additions & 1 deletion src/internals/domain.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,8 @@ extend(ChartInternal.prototype, {
let yDomainMax = $$.getYDomainMax(yTargets);

const center = config[`axis_${axisId}_center`];
let isZeroBased = ($$.hasType("bar", yTargets) && config.bar_zerobased) || ($$.hasType("area", yTargets) && config.area_zerobased);
let isZeroBased = ["area", "bar", "bubble", "line", "scatter"]
.some(v => $$.hasType(v, yTargets) && config[`${v}_zerobased`]);
const isInverted = config[`axis_${axisId}_inverted`];
const showHorizontalDataLabel = $$.hasDataLabel() && config.axis_rotated;
const showVerticalDataLabel = $$.hasDataLabel() && !config.axis_rotated;
Expand Down
17 changes: 17 additions & 0 deletions types/options.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,11 @@ export interface ChartOptions {
type: "step" | "step-before" | "step-after";
};

/**
* Set if min or max value will be 0 on line chart.
*/
zerobased?: boolean;

/**
* If set, used to set a css class on each line.
*/
Expand All @@ -224,6 +229,13 @@ export interface ChartOptions {
point?: boolean | string[];
};

scatter?: {
/**
* Set if min or max value will be 0 on scatter chart.
*/
zerobased?: boolean;
};

area?: {
/**
* Set background area above the data chart line.
Expand Down Expand Up @@ -308,6 +320,11 @@ export interface ChartOptions {
* Set the max bubble radius value
*/
maxR?: ((d: {}) => number) | number;

/**
* Set if min or max value will be 0 on bubble chart.
*/
zerobased?: boolean;
};

radar?: {
Expand Down

0 comments on commit e45fb33

Please sign in to comment.