Skip to content

Commit

Permalink
feat(options): Pass instance arg to callbacks
Browse files Browse the repository at this point in the history 
Pass instance argument for callback options to facilitate the usage.

Fix #989
  • Loading branch information
@netil
netil authored Jul 24, 2019
1 parent f9cf2d1 commit 61cf047
Show file tree
Hide file tree
Showing 5 changed files with 104 additions and 37 deletions.
58 changes: 58 additions & 0 deletions spec/internals/bb-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,4 +279,62 @@ describe("Interface & initialization", () => {
});
});
});

describe("check for callbacks if instance param is passed", () => {
let chart;
const spy = sinon.spy();

before(() => {
const args = {
data: {
columns: [
["data1", 300, 350, 300]
]
}
};

["beforeinit", "init", "rendered", "afterinit", "resize", "resized", "over", "out"]
.forEach(v => {
args[`on${v}`] = ctx => spy(v, ctx);
});

chart = util.generate(args);
});

beforeEach(() => spy.resetHistory());

it("check for the init callbacks", () => {
const expected = ["beforeinit", "init", "rendered", "afterinit"];

spy.args.forEach((v, i) => {
expect(v[0]).to.be.equal(expected[i]);
expect(v[1]).to.be.equal(chart);
});
});

it("check for the resize callbacks", () => {
const expected = ["resize", "resized"];

// when
chart.internal.resizeFunction();

spy.args.forEach((v, i) => {
expect(v[0]).to.be.equal(expected[i]);
expect(v[1]).to.be.equal(chart);
});
});

it("check for the onover/out callbacks", () => {
const expected = ["over", "out"];

// when
chart.$.svg.on("mouseenter")();
chart.$.svg.on("mouseleave")();

spy.args.forEach((v, i) => {
expect(v[0]).to.be.equal(expected[i]);
expect(v[1]).to.be.equal(chart);
});
});
});
});
2 changes: 1 addition & 1 deletion spec/plugin/stanford/stanford-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {compareEpochs, getCentroid, getRegionArea, pointInRegion} from "../../..
describe("STANFORD", () => {
let chart;
let stanford = new Stanford({ epochs: [30, 35] });
const args = {
let args = {
data: {
x: "x",
columns: [
Expand Down
48 changes: 28 additions & 20 deletions src/config/Options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,61 +222,66 @@ export default class Options {
* @name onover
* @memberof Options
* @type {Function}
* @default function(){}
* @default undefined
* @example
* onover: function() {
* // @param {Chart} ctx - Instance itself
* onover: function(ctx) {
* ...
* }
*/
onover: () => {},
onover: undefined,

/**
* Set a callback to execute when mouse/touch leaves the chart.
* @name onout
* @memberof Options
* @type {Function}
* @default function(){}
* @default undefined
* @example
* onout: function() {
* // @param {Chart} ctx - Instance itself
* onout: function(ctx) {
* ...
* }
*/
onout: () => {},
onout: undefined,

/**
* Set a callback to execute when user resizes the screen.
* @name onresize
* @memberof Options
* @type {Function}
* @default function(){}
* @default undefined
* @example
* onresize: function() {
* // @param {Chart} ctx - Instance itself
* onresize: function(ctx) {
* ...
* }
*/
onresize: () => {},
onresize: undefined,

/**
* SSet a callback to execute when screen resize finished.
* @name onresized
* @memberof Options
* @type {Function}
* @default function(){}
* @default undefined
* @example
* onresized: function() {
* // @param {Chart} ctx - Instance itself
* onresized: function(ctx) {
* ...
* }
*/
onresized: () => {},
onresized: undefined,

/**
* Set a callback to execute before the chart is initialized
* @name onbeforeinit
* @memberof Options
* @type {Function}
* @default function(){}
* @default undefined
* @example
* onbeforeinit: function() {
* // @param {Chart} ctx - Instance itself
* onbeforeinit: function(ctx) {
* ...
* }
*/
Expand All @@ -287,22 +292,24 @@ export default class Options {
* @name oninit
* @memberof Options
* @type {Function}
* @default function(){}
* @default undefined
* @example
* oninit: function() {
* // @param {Chart} ctx - Instance itself
* oninit: function(ctx) {
* ...
* }
*/
oninit: () => {},
oninit: undefined,

/**
* Set a callback to execute after the chart is initialized
* @name onafterinit
* @memberof Options
* @type {Function}
* @default function(){}
* @default undefined
* @example
* onafterinit: function() {
* // @param {Chart} ctx - Instance itself
* onafterinit: function(ctx) {
* ...
* }
*/
Expand All @@ -315,7 +322,8 @@ export default class Options {
* @type {Function}
* @default undefined
* @example
* onrendered: function() {
* // @param {Chart} ctx - Instance itself
* onrendered: function(ctx) {
* ...
* }
*/
Expand Down
16 changes: 8 additions & 8 deletions src/internals/ChartInternal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default class ChartInternal {
$$.callPluginHook("$beforeInit");

// can do something
callFn($$.config.onbeforeinit, $$);
callFn($$.config.onbeforeinit, $$, $$.api);
}

afterInit() {
Expand All @@ -52,7 +52,7 @@ export default class ChartInternal {
$$.callPluginHook("$afterInit");

// can do something
callFn($$.config.onafterinit, $$);
callFn($$.config.onafterinit, $$, $$.api);
}

init() {
Expand Down Expand Up @@ -229,8 +229,8 @@ export default class ChartInternal {
const isTouch = $$.inputType === "touch";

$$.svg
.on(isTouch ? "touchstart" : "mouseenter", () => callFn(config.onover, $$))
.on(isTouch ? "touchend" : "mouseleave", () => callFn(config.onout, $$));
.on(isTouch ? "touchstart" : "mouseenter", () => callFn(config.onover, $$, $$.api))
.on(isTouch ? "touchend" : "mouseleave", () => callFn(config.onout, $$, $$.api));
}

config.svg_classname && $$.svg.attr("class", config.svg_classname);
Expand Down Expand Up @@ -312,7 +312,7 @@ export default class ChartInternal {
$$.updateDimension();

// oninit callback
config.oninit.call($$);
callFn(config.oninit, $$, $$.api);

$$.redraw({
withTransition: false,
Expand Down Expand Up @@ -782,7 +782,7 @@ export default class ChartInternal {
// callback function after redraw ends
const afterRedraw = flow || config.onrendered ? () => {
flowFn && flowFn();
callFn(config.onrendered, $$);
callFn(config.onrendered, $$, $$.api);
} : null;

if (afterRedraw) {
Expand Down Expand Up @@ -1175,7 +1175,7 @@ export default class ChartInternal {
const config = $$.config;

$$.resizeFunction = $$.generateResize();
$$.resizeFunction.add(config.onresize.bind($$));
$$.resizeFunction.add(() => callFn(config.onresize, $$, $$.api));

if (config.resize_auto) {
$$.resizeFunction.add(() => {
Expand All @@ -1190,7 +1190,7 @@ export default class ChartInternal {
});
}

$$.resizeFunction.add(config.onresized.bind($$));
$$.resizeFunction.add(() => callFn(config.onresized, $$, $$.api));

// attach resize event
window.addEventListener("resize", $$.resizeFunction);
Expand Down
17 changes: 9 additions & 8 deletions types/options.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import { Axis } from "./axis";
import { ChartTypes, d3Selection, DataItem, PrimitiveArray } from "./types";
import Stanford from "./plugin/stanford/index";
import { Chart } from "./chart";

export interface ChartOptions {
/**
Expand Down Expand Up @@ -513,42 +514,42 @@ export interface ChartOptions {
/**
* Set a callback to execute when the chart is initialized.
*/
oninit?(): void;
oninit?(ctx: Chart): void;

/**
* Set a callback to execute after the chart is initialized
*/
onafterinit?(): void;
onafterinit?(ctx: Chart): void;

/**
* Set a callback to execute before the chart is initialized
*/
onbeforeinit?(): void;
onbeforeinit?(ctx: Chart): void;

/**
* Set a callback which is executed when the chart is rendered. Basically, this callback will be called in each time when the chart is redrawed.
*/
onrendered?(): void;
onrendered?(ctx: Chart): void;

/**
* Set a callback to execute when mouse/touch enters the chart.
*/
onover?(): void;
onover?(ctx: Chart): void;

/**
* Set a callback to execute when mouse/touch leaves the chart.
*/
onout?(): void;
onout?(ctx: Chart): void;

/**
* Set a callback to execute when user resizes the screen.
*/
onresize?(): void;
onresize?(ctx: Chart): void;

/**
* Set a callback to execute when screen resize finished.
*/
onresized?(): void;
onresized?(ctx: Chart): void;

/**
* Set 'clip-path' attribute for chart element.
Expand Down

0 comments on commit 61cf047

Please sign in to comment.