= args => <>
26 | {Object.keys(args).map((v, i) => )}
27 | ;
28 |
29 | export const Line = SingleTemplate.bind({});
30 | // More on args: https://storybook.js.org/docs/react/writing-stories/args
31 | Line.args = {
32 | data: {
33 | columns,
34 | type: line()
35 | }
36 | };
37 |
38 | export const Bar = SingleTemplate.bind({});
39 | Bar.args = {
40 | data: {
41 | columns,
42 | type: bar()
43 | }
44 | };
45 |
46 | export const Pie = SingleTemplate.bind({});
47 | Pie.args = {
48 | data: {
49 | columns,
50 | type: pie()
51 | }
52 | };
53 |
54 | export const Combination = SingleTemplate.bind({});
55 | Combination.args = {
56 | data: {
57 | columns,
58 | types: {
59 | data1: bar(),
60 | data2: line()
61 | }
62 | }
63 | };
64 |
65 | export const Multiple = MultiTemplate.bind({});
66 | Multiple.args = [
67 | {
68 | data: {
69 | columns,
70 | type: bar()
71 | }
72 | },
73 | {
74 | data: {
75 | columns,
76 | type: line()
77 | }
78 | }
79 | ];
80 |
--------------------------------------------------------------------------------
/config/deploy.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | setup() {
4 | # version
5 | VERSION=$(node -pe "require('./package.json').version")
6 |
7 | # Current branch
8 | CUR_BRANCH=$(git rev-parse --abbrev-ref HEAD)
9 |
10 | # folder to be pushed
11 | DIST_FOLDER=release
12 |
13 | # destination folder
14 | DEST_FOLDER=release
15 |
16 | # destination remote name
17 | # use GH environment variable "CI" to determine the run
18 | # https://docs.github.com/en/actions/reference/environment-variables#default-environment-variables
19 | if [[ "$CI" == "true" ]]; then
20 | DEST_REMOTE=origin
21 | else
22 | DEST_REMOTE=upstream
23 | fi
24 |
25 | # if this is the @next release channel, do not deploy doc & build files to gh-pages
26 | if [[ $VERSION == *"next"* ]]; then
27 | exit 1
28 | # DIST_TAG=next
29 | else
30 | DIST_TAG=latest
31 | fi
32 |
33 | echo $VERSION
34 | echo $DIST_TAG
35 | }
36 |
37 | build() {
38 | # commit message string
39 | COMMIT_MESSAGE="skip:$VERSION-release"
40 |
41 | echo "*** Releasing docs for ${VERSION} on ${CUR_BRANCH} --> ${DEST_REMOTE} ***"
42 |
43 | # create release directory
44 | rm -rf release && mkdir -p release/$VERSION
45 |
46 | # build & copy to release path
47 | npm run build && npm run jsdoc
48 | cp -r doc dist* release/$VERSION/
49 |
50 | # copy built files to dist_tag folder
51 | mkdir release/$DIST_TAG
52 | cp -r doc dist* release/$DIST_TAG
53 | }
54 |
55 | push() {
56 | # Add new remote with access token in the git URL for authentication
57 | if [[ "$CI" == "true" ]]; then
58 | git config --global user.email "alberto.park@gmail.com"
59 | git config --global user.name "netil"
60 |
61 | # git remote set-url ${DEST_REMOTE} https://netil:${{ secrets.GH_TOKEN }}@github.com/naver/billboard.js.git > /dev/null 2>&1
62 | fi
63 |
64 | # push to github pages
65 | npx gh-pages --dist $DIST_FOLDER --dest $DEST_FOLDER --add --remote $DEST_REMOTE --message $COMMIT_MESSAGE
66 | }
67 |
68 | setup
69 | build
70 | push
71 |
--------------------------------------------------------------------------------
/src/ChartInternal/internals/style.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | import type {d3Selection} from "../../../types/types";
6 | import {$SHAPE} from "../../config/classes";
7 | import {addCssRules, isFunction, isString} from "../../module/util";
8 | import type {IDataRow} from "../data/IData";
9 |
10 | export default {
11 | /**
12 | * Add props color css rule to given selector
13 | * @param {boolean} withShape Set shpes' prefix class
14 | * @param {string} selector CSS selector
15 | * @param {Array} props CSS props list
16 | * @param {function} propsFn Function to retrieve value or determine for props
17 | * @returns {function}
18 | * @private
19 | */
20 | setCssRule(withShape: boolean, selector: string, props: string[], propsFn: Function): Function {
21 | const $$ = this;
22 | const {config, state: {cssRule, style}} = $$;
23 |
24 | return config.boost_useCssRule ?
25 | (selection: d3Selection) => {
26 | selection.each((d: IDataRow) => {
27 | const res = propsFn && propsFn?.call($$, d);
28 | const shapeSelector = `${
29 | withShape ? `.${$SHAPE.shapes + $$.getTargetSelectorSuffix(d.id)}` : ""
30 | }${selector}`;
31 |
32 | (selector in cssRule) && style.sheet.deleteRule(cssRule[shapeSelector]);
33 | $$.state.cssRule[shapeSelector] = addCssRules(
34 | style,
35 | shapeSelector,
36 | props.filter(Boolean).map(v => (
37 | isString(res) && v.indexOf(":") === -1 ? `${v}: ${res}` : (v || "")
38 | ))
39 | );
40 | });
41 | } :
42 | () => {};
43 | },
44 |
45 | /**
46 | * Get style prop value
47 | * @param {function|string} v Value
48 | * @returns {string|null}
49 | * @private
50 | */
51 | getStylePropValue(v: Function | string): string | null {
52 | const {config: {boost_useCssRule: useCssRule}} = this;
53 |
54 | return useCssRule ? null : isFunction(v) ? v.bind(this) : v as string;
55 | }
56 | };
57 |
--------------------------------------------------------------------------------
/src/Chart/api/legend.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | /**
6 | * Define legend
7 | * @ignore
8 | */
9 | const legend = {
10 | /**
11 | * Show legend for each target.
12 | * - **NOTE:** Legend APIs aren't supported for `treemap` type.
13 | * @function legend․show
14 | * @instance
15 | * @memberof Chart
16 | * @param {string|Array} targetIds
17 | * - If targetIds is given, specified target's legend will be shown.
18 | * - If only one target is the candidate, String can be passed.
19 | * - If no argument is given, all of target's legend will be shown.
20 | * @example
21 | * // Show legend for data1.
22 | * chart.legend.show("data1");
23 | *
24 | * // Show legend for data1 and data2.
25 | * chart.legend.show(["data1", "data2"]);
26 | *
27 | * // Show all legend.
28 | * chart.legend.show();
29 | */
30 | show: function(targetIds?: string | string[]): void {
31 | const $$ = this.internal;
32 |
33 | $$.showLegend($$.mapToTargetIds(targetIds));
34 | $$.updateAndRedraw({withLegend: true});
35 | },
36 |
37 | /**
38 | * Hide legend for each target.
39 | * @function legend․hide
40 | * @instance
41 | * @memberof Chart
42 | * @param {string|Array} targetIds
43 | * - If targetIds is given, specified target's legend will be hidden.
44 | * - If only one target is the candidate, String can be passed.
45 | * - If no argument is given, all of target's legend will be hidden.
46 | * @example
47 | * // Hide legend for data1.
48 | * chart.legend.hide("data1");
49 | *
50 | * // Hide legend for data1 and data2.
51 | * chart.legend.hide(["data1", "data2"]);
52 | *
53 | * // Hide all legend.
54 | * chart.legend.hide();
55 | */
56 | hide: function(targetIds?: string | string[]): void {
57 | const $$ = this.internal;
58 |
59 | $$.hideLegend($$.mapToTargetIds(targetIds));
60 | $$.updateAndRedraw({withLegend: true});
61 | }
62 | };
63 |
64 | export default {legend};
65 |
--------------------------------------------------------------------------------
/test/api/legend-spec.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | /* eslint-disable */
6 | import {beforeAll, describe, expect, it} from "vitest";
7 | import util from "../assets/util";
8 | import {$LEGEND} from "../../src/config/classes";
9 |
10 | describe("API legend", () => {
11 | let chart;
12 |
13 | beforeAll(() => {
14 | return new Promise((resolve) => {
15 | chart = util.generate({
16 | data: {
17 | x: "x",
18 | columns: [
19 | ["x", "a", "b", "c", "d", "e"],
20 | ["data1", 30, 200, 100, 400, 150],
21 | ["data2", 5000, 2000, 1000, 4000, 1500]
22 | ]
23 | },
24 | axis: {
25 | x: {
26 | type: "category"
27 | }
28 | },
29 | onrendered: resolve
30 | });
31 | });
32 | });
33 |
34 | it("it should hide all legends", () => {
35 | chart.legend.hide();
36 |
37 | chart.internal.$el.svg.selectAll(`.${$LEGEND.legendItem}`).each(function() {
38 | expect(+this.style.opacity).to.be.equal(0);
39 | });
40 | });
41 |
42 | it("it should show all hide legends", () => new Promise(done => {
43 | chart.legend.show();
44 |
45 | setTimeout(() => {
46 | chart.internal.$el.svg.selectAll(`.${$LEGEND.legendItem}`).each(function() {
47 |
48 | expect(this.style.opacity).to.be.equal("");
49 | });
50 |
51 | done(1);
52 | }, 350)
53 | }));
54 |
55 | it("it should hide 'data1' legend", () => {
56 | chart.legend.hide("data1");
57 |
58 | chart.internal.$el.svg.selectAll(`.${$LEGEND.legendItem}`).each(function(v) {
59 | expect(this.style.opacity).to.be.equal(v === "data1" ? "0" : "");
60 | });
61 | });
62 |
63 |
64 | it("it should show 'data1' legend", () => new Promise(done => {
65 | chart.legend.show("data1");
66 |
67 | setTimeout(() => {
68 | chart.internal.$el.svg.selectAll(`.${$LEGEND.legendItem}`).each(function(v) {
69 | expect(this.style.opacity).to.be.equal("");
70 | });
71 |
72 | done(1);
73 | }, 350);
74 | }));
75 | });
76 |
--------------------------------------------------------------------------------
/config/util.js:
--------------------------------------------------------------------------------
1 | import {dirname, resolve} from "path";
2 | import {fileURLToPath} from "url";
3 | import {execSync} from "child_process";
4 | import {existsSync, readFileSync, writeFileSync} from "fs";
5 |
6 | const __filename = fileURLToPath(import.meta.url);
7 | const __dirname = dirname(__filename);
8 |
9 | /**
10 | * Get banner object
11 | */
12 | function getBanner() {
13 | return JSON.parse(
14 | execSync(`node ${resolvePath("./template/banner.js")}`, {encoding: "utf-8"})
15 | );
16 | }
17 |
18 | /**
19 | * Resolve path
20 | * @param {string} path Path to resolve
21 | * @param {boolean} checkExists Check if dir exists
22 | */
23 | function resolvePath(path, checkExists = true) {
24 | let resolved = resolve(__dirname, path);
25 |
26 | // if not exists, try to resolve 1 level down
27 | if (checkExists && !existsSync(resolved)) {
28 | resolved = resolve(__dirname, path.replace(/^\.\.\//, ""));
29 | }
30 |
31 | return resolved;
32 | }
33 |
34 | /**
35 | * Read json from the root of the project.
36 | * @param {string} path Path from the root
37 | * @param {boolean} isJson If the value is JSON
38 | */
39 | function readFile(path, isJson = false) {
40 | const res = readFileSync(resolvePath(`../${path}`), "utf8");
41 |
42 | return isJson ? JSON.parse(res) : res;
43 | }
44 |
45 | /**
46 | * Write json to file
47 | * @param {string} target Path from the root
48 | * @param {object} value Value to write
49 | * @param {boolean} isJson If the value is JSON
50 | */
51 | function writeFile(target, value, isJson = false) {
52 | writeFileSync(target, isJson ? JSON.stringify(value) : value, {flag: "w"}, e => {
53 | console.error(e);
54 | });
55 | }
56 |
57 | function readJson(path) {
58 | return readFile(path, true);
59 | }
60 |
61 | function writeJson(target, value) {
62 | return writeFile(target, value, true);
63 | }
64 |
65 | export {
66 | __dirname,
67 | getBanner,
68 | readFile,
69 | readJson,
70 | resolvePath,
71 | writeFile,
72 | writeJson
73 | };
74 |
--------------------------------------------------------------------------------
/test/esm/donut-spec.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | /* eslint-disable */
6 | /* global describe, beforeEach, it, expect */
7 | import {beforeEach, describe, expect, it} from "vitest";
8 | import bb, {donut} from "../../src/index.esm";
9 |
10 | describe("ESM donut", function() {
11 | let chart;
12 |
13 | const args: any = {
14 | data: {
15 | columns: [
16 | ["data1", 30],
17 | ["data2", 120]
18 | ],
19 | type: donut()
20 | },
21 | point: {
22 | pattern: [
23 | '',
24 | ]
25 | },
26 | legend: {
27 | usePoint: true
28 | }
29 | };
30 |
31 | beforeEach(() => {
32 | chart = bb.generate(args);
33 | });
34 |
35 | it("should tooltip.hide() work", () => new Promise(done => {
36 | const {internal} = chart;
37 | const {hideGridFocus} = internal;
38 |
39 | internal.hideGridFocus = null;
40 |
41 | setTimeout(() => {
42 | // when
43 | chart.tooltip.show({index: 0});
44 |
45 | expect(chart.tooltip.hide()).to.not.throw;
46 | expect(chart.$.tooltip.style("display")).to.be.equal("none");
47 |
48 | // revert internal method
49 | internal.hideGridFocus = hideGridFocus;
50 |
51 | done(1);
52 | }, 350);
53 | }));
54 |
55 | it("shouldn't throw error on call of tooltip API.", () => {
56 | delete chart.internal.config.axis_y_label;
57 |
58 | expect(
59 | chart.tooltip.show({x:0})
60 | ).to.not.throw;
61 |
62 | chart.internal.config.axis_y_label = {};
63 | });
64 |
65 | it("should point.pattern def element appended.", () => {
66 | const defs = chart.internal.$el.defs.selectAll("[id*=point-data]");
67 |
68 | expect(defs.size()).to.be.equal(chart.data().length);
69 | });
70 | });
71 |
--------------------------------------------------------------------------------
/demo/benchmark/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Benchmark
7 |
8 |
9 |
10 |
11 | Benchmark
12 | 1) billboard.js
13 |
16 |
17 | 2) Data matrix:
18 | Data Series: x
19 | Data Size:
20 |
21 |
22 | 3) Transition:
26 |
27 |
28 |
29 | 4) Type:
44 |
45 |
46 | 5) Boost options: (3.5.0+)
47 | boost.useCssRule
48 | boost.useWorker
49 |
50 |
51 | 6) Run! -
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
--------------------------------------------------------------------------------
/DEVELOPMENT.md:
--------------------------------------------------------------------------------
1 | ## How to start developing billboard.js?
2 |
3 | For anyone interested in developing billboard.js, follow the instructions below.
4 | > Required Node.js version: `10.10.0+`
5 |
6 | ### Development Environment
7 |
8 | #### 1. Clone the repository
9 |
10 | Clone the billboard.js repository and install the dependency modules.
11 |
12 | ```bash
13 | # Create a folder and move.
14 | $ mkdir billboard.js && cd billboard.js
15 |
16 | # Clone the repository.
17 | $ git clone https://github.com/naver/billboard.js.git
18 | ```
19 |
20 | #### 2. Install dependencies
21 | `npm` and `Yarn` are supported.
22 |
23 | ```
24 | # Install the dependency modules.
25 | $ npm install
26 |
27 | # or
28 | $ yarn
29 | ```
30 |
31 | #### 3. Build
32 |
33 | Use npm script to build billboard.js
34 |
35 | ```bash
36 | # Run webpack-dev-server for development
37 | $ npm start
38 |
39 | # Build
40 | $ npm run build
41 |
42 | # Generate jsdoc
43 | $ npm run jsdoc
44 | ```
45 |
46 | Two folders will be created after the build is completed.
47 |
48 | - **dist** folder: Includes the **billboard.js** and **billboard.min.js** files.
49 | - **doc** folder: Includes API documentation. The home page for the documentation is **doc/index.html**.
50 |
51 | ### Linting
52 |
53 | To maintain the same code style and quality, we adopted [ESLint](https://eslint.org/). The [rules](https://github.com/naver/eslint-config-naver/tree/master/rules) are based on the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) with some modifications.
54 | Setup your editor for check or run the below command for linting.
55 |
56 | ```bash
57 | $ npm run lint
58 | ```
59 |
60 | ### Test
61 |
62 | Once you created a branch and finished the development, you must perform a test with `npm test` command before the push to a remote repository.
63 |
64 | ```bash
65 | $ npm test
66 | ```
67 | Running the `npm test` command will start [Mocha](https://mochajs.org/) tests via [Karma-runner](https://karma-runner.github.io/).
68 |
69 | ## Bug Report
70 |
71 | If you find a bug, please report to us by posting [issues](https://github.com/naver/billboard.js/issues) on GitHub.
72 |
--------------------------------------------------------------------------------
/packages/react/stories/assets/plugin.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/ChartInternal/shape/bubble.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | import {KEY} from "../../module/Cache";
6 | import {getMinMax, isFunction, isNumber, isObject} from "../../module/util";
7 |
8 | export default {
9 | /**
10 | * Initializer
11 | * @private
12 | */
13 | initBubble(): void {
14 | const $$ = this;
15 | const {config} = $$;
16 |
17 | if ($$.hasType("bubble")) {
18 | config.point_show = true;
19 | config.point_type = "circle";
20 | }
21 | },
22 |
23 | /**
24 | * Get user agent's computed value
25 | * @returns {number}
26 | * @private
27 | */
28 | getBaseLength(): number {
29 | const $$ = this;
30 | const {width, height} = $$.state;
31 | const cacheKey = KEY.bubbleBaseLength;
32 | let baseLength = $$.cache.get(cacheKey);
33 |
34 | if (!baseLength) {
35 | $$.cache.add(cacheKey, baseLength = getMinMax("min", [width, height]));
36 | }
37 |
38 | return baseLength;
39 | },
40 |
41 | /**
42 | * Get the radius value for bubble circle
43 | * @param {object} d Data object
44 | * @returns {number}
45 | * @private
46 | */
47 | getBubbleR(d): number {
48 | const $$ = this;
49 | let maxR = $$.config.bubble_maxR;
50 |
51 | if (isFunction(maxR)) {
52 | maxR = maxR.bind($$.api)(d);
53 | } else if (!isNumber(maxR)) {
54 | maxR = ($$.getBaseLength() / ($$.getMaxDataCount() * 2)) + 12;
55 | }
56 |
57 | const max = getMinMax("max", $$.getMinMaxData().max.map(d => (
58 | $$.isBubbleZType(d) ? $$.getBubbleZData(d.value, "y") : (
59 | isObject(d.value) ? d.value.mid : d.value
60 | )
61 | )));
62 | const maxArea = maxR * maxR * Math.PI;
63 | const area = ($$.isBubbleZType(d) ? $$.getBubbleZData(d.value, "z") : d.value) *
64 | (maxArea / max);
65 |
66 | return Math.sqrt(area / Math.PI);
67 | },
68 |
69 | /**
70 | * Get bubble dimension data
71 | * @param {object|Array} d data value
72 | * @param {string} type - y or z
73 | * @returns {number}
74 | * @private
75 | */
76 | getBubbleZData(d, type: "y" | "z"): number {
77 | return isObject(d) ? d[type] : d[type === "y" ? 0 : 1];
78 | }
79 | };
80 |
--------------------------------------------------------------------------------
/src/Chart/api/x.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | import {isArray, isObject} from "../../module/util";
6 |
7 | export default {
8 | /**
9 | * Get and set x values for the chart.
10 | * @function x
11 | * @instance
12 | * @memberof Chart
13 | * @param {Array} x If x is given, x values of every target will be updated. If no argument is given, current x values will be returned as an Object whose keys are the target ids.
14 | * @returns {object} xs
15 | * @example
16 | * // Get current x values
17 | * chart.x();
18 | *
19 | * // Update x values for all targets
20 | * chart.x([100, 200, 300, 400, ...]);
21 | */
22 | x(x?: number[]): {[key: string]: number[]} {
23 | const $$ = this.internal;
24 | const {axis, data} = $$;
25 | const isCategorized = axis.isCustomX() && axis.isCategorized();
26 |
27 | if (isArray(x)) {
28 | if (isCategorized) {
29 | this.categories(x);
30 | } else {
31 | $$.updateTargetX(data.targets, x);
32 |
33 | $$.redraw({
34 | withUpdateOrgXDomain: true,
35 | withUpdateXDomain: true
36 | });
37 | }
38 | }
39 |
40 | return isCategorized ? this.categories() : data.xs;
41 | },
42 |
43 | /**
44 | * Get and set x values for the chart.
45 | * @function xs
46 | * @instance
47 | * @memberof Chart
48 | * @param {Array} xs If xs is given, specified target's x values will be updated. If no argument is given, current x values will be returned as an Object whose keys are the target ids.
49 | * @returns {object} xs
50 | * @example
51 | * // Get current x values
52 | * chart.xs();
53 | *
54 | * // Update x values for all targets
55 | * chart.xs({
56 | * data1: [10, 20, 30, 40, ...],
57 | * data2: [100, 200, 300, 400, ...]
58 | * });
59 | */
60 | xs(xs?: {[key: string]: number[]}): {[key: string]: number[]} {
61 | const $$ = this.internal;
62 |
63 | if (isObject(xs)) {
64 | $$.updateTargetXs($$.data.targets, xs);
65 |
66 | $$.redraw({
67 | withUpdateOrgXDomain: true,
68 | withUpdateXDomain: true
69 | });
70 | }
71 |
72 | return $$.data.xs;
73 | }
74 | };
75 |
--------------------------------------------------------------------------------
/src/config/Options/shape/candlestick.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | /**
6 | * candlestick config options
7 | */
8 | export default {
9 | /**
10 | * Set candlestick options
11 | * @name candlestick
12 | * @memberof Options
13 | * @type {object}
14 | * @property {object} candlestick Candlestick object
15 | * @property {number} [candlestick.width] Change the width.
16 | * @property {number} [candlestick.width.ratio=0.6] Change the width by ratio.
17 | * @property {number} [candlestick.width.max] The maximum width value for ratio.
18 | * @property {number} [candlestick.width.dataname] Change the width for indicated dataset only.
19 | * @property {number} [candlestick.width.dataname.ratio=0.6] Change the width of bar chart by ratio.
20 | * @property {number} [candlestick.width.dataname.max] The maximum width value for ratio.
21 | * @property {object} [candlestick.color] Color setting.
22 | * @property {string|object} [candlestick.color.down] Change down(bearish) value color.
23 | * @property {string} [candlestick.color.down.dataname] Change down value color for indicated dataset only.
24 | *
25 | * @see [Demo](https://naver.github.io/billboard.js/demo/##Chart.CandlestickChart)
26 | * @example
27 | * candlestick: {
28 | * width: 10,
29 | *
30 | * // or
31 | * width: {
32 | * ratio: 0.2,
33 | * max: 20
34 | * },
35 | *
36 | * // or specify width per dataset
37 | * width: {
38 | * data1: 20,
39 | * data2: {
40 | * ratio: 0.2,
41 | * max: 20
42 | * }
43 | * },
44 | * color: {
45 | * // spcify bearish color
46 | * down: "red",
47 | *
48 | * // or specify color per dataset
49 | * down: {
50 | * data1: "red",
51 | * data2: "blue",
52 | * }
53 | * }
54 | * }
55 | */
56 | candlestick_width: undefined,
57 | candlestick_width_ratio: 0.6,
58 | candlestick_width_max: undefined,
59 | candlestick_color_down: "red"
60 | };
61 |
--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import {resolve} from "node:path";
2 | import {defineConfig} from "vitest/config";
3 | import { playwright } from "@vitest/browser-playwright";
4 |
5 | export default defineConfig({
6 | optimizeDeps: {
7 | include: ["@vitest/coverage-istanbul"]
8 | },
9 | css: {
10 | preprocessorOptions: {
11 | scss: {
12 | silenceDeprecations: ["legacy-js-api"]
13 | }
14 | }
15 | },
16 | test: {
17 | testTimeout: 3_500,
18 | hookTimeout: 5_000,
19 | globals: true,
20 | coverage: {
21 | provider: "istanbul",
22 | reporter: ["text-summary", "html", "lcovonly"],
23 | enabled: true,
24 | include: [
25 | `src/**/**.{ts, tsx}`,
26 | ]
27 | },
28 | include: [
29 | "test/**/*-spec.ts"
30 | ],
31 | exclude: [
32 | "src/**/**",
33 | "demo/**/**",
34 | "config/**/**",
35 | "packages/**/**",
36 | ],
37 | setupFiles: [
38 | "test/assets/common.css",
39 | "src/scss/billboard.scss"
40 | ],
41 | pool: "threads",
42 | browser: {
43 | enabled: true,
44 | provider: playwright(),
45 | headless: true,
46 | viewport: {
47 | width: 800,
48 | height: 600
49 | },
50 | instances: [
51 | {
52 | browser: "chromium"
53 | }
54 | ],
55 | screenshotFailures: false
56 | },
57 | alias: [
58 | {
59 | find: /(.*)\/module\/util/i,
60 | replacement: "./test/assets/module/util",
61 | customResolver(source, importer, options) {
62 | if (/src/.test(importer)) {
63 | return resolve(__dirname, source + ".ts");
64 | }
65 | },
66 | }
67 | ],
68 | css: {
69 | include: [
70 | /.+/
71 | ]
72 | },
73 | open: true
74 | }
75 | });
76 |
--------------------------------------------------------------------------------
/src/ChartInternal/internals/title.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | import {$TEXT} from "../../config/classes";
6 | import {isNumber, setTextValue} from "../../module/util";
7 |
8 | /**
9 | * Get the text position
10 | * @param {string} pos right, left or center
11 | * @param {number} width chart width
12 | * @returns {string|number} text-anchor value or position in pixel
13 | * @private
14 | */
15 | function getTextXPos(pos = "left", width?: number | any): number | "start" | "middle" | "end" {
16 | const isNum = isNumber(width);
17 | let position;
18 |
19 | if (pos.indexOf("center") > -1) {
20 | position = isNum ? width / 2 : "middle";
21 | } else if (pos.indexOf("right") > -1) {
22 | position = isNum ? width : "end";
23 | } else {
24 | position = isNum ? 0 : "start";
25 | }
26 |
27 | return position;
28 | }
29 |
30 | export default {
31 | /**
32 | * Initializes the title
33 | * @private
34 | */
35 | initTitle(): void {
36 | const $$ = this;
37 | const {config, $el} = $$;
38 |
39 | if (config.title_text) {
40 | $el.title = $el.svg.append("g");
41 |
42 | const text = $el.title
43 | .append("text")
44 | .style("text-anchor", getTextXPos(config.title_position))
45 | .attr("class", $TEXT.title);
46 |
47 | setTextValue(text, config.title_text, [0.3, 1.5]);
48 | }
49 | },
50 |
51 | /**
52 | * Redraw title
53 | * @private
54 | */
55 | redrawTitle(): void {
56 | const $$ = this;
57 | const {config, state: {current}, $el: {title}} = $$;
58 |
59 | if (title) {
60 | const x = getTextXPos(config.title_position, current.width);
61 | const y = (config.title_padding.top || 0) +
62 | $$.getTextRect($$.$el.title, $TEXT.title).height;
63 |
64 | title.attr("transform", `translate(${x}, ${y})`);
65 | }
66 | },
67 |
68 | /**
69 | * Get title padding
70 | * @returns {number} padding value
71 | * @private
72 | */
73 | getTitlePadding(): number {
74 | const $$ = this;
75 | const {$el: {title}, config} = $$;
76 |
77 | return (config.title_padding.top || 0) +
78 | (title ? $$.getTextRect(title, $TEXT.title).height : 0) +
79 | (config.title_padding.bottom || 0);
80 | }
81 | };
82 |
--------------------------------------------------------------------------------
/config/webpack/theme.cjs:
--------------------------------------------------------------------------------
1 | const {mergeWithCustomize, customizeObject} = require("webpack-merge");
2 | const webpack = require("webpack");
3 | const fs = require("fs");
4 | const path = require("path");
5 | const CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin;
6 | const WebpackCleanPlugin = require("webpack-clean");
7 | const banner = require("../template/banner.cjs");
8 | const {EsbuildPlugin} = require("esbuild-loader");
9 | const MiniCssExtractPlugin = require("mini-css-extract-plugin");
10 |
11 | const srcPath = "./src/scss/theme/";
12 | const distPath = path.resolve(__dirname, "../../dist/theme/");
13 | const tmpExt = "tmp";
14 | const rx = /\.scss$/;
15 |
16 | // construct entry point
17 | const entry = {};
18 |
19 | fs.readdirSync(path.resolve(__dirname, `../../${srcPath}`)).forEach(file => {
20 | if (rx.test(file)) {
21 | const key = file.replace(rx, "");
22 | const dist = srcPath + file;
23 |
24 | entry[key] = dist;
25 | entry[`${key}.min`] = dist;
26 | }
27 | });
28 |
29 | const config = {
30 | entry,
31 | output: {
32 | path: distPath,
33 | filename: `[name].${tmpExt}`
34 | },
35 | module: {
36 | rules: [
37 | {
38 | test: rx,
39 | use: [
40 | MiniCssExtractPlugin.loader,
41 | "css-loader",
42 | "sass-loader"
43 | ]
44 | }
45 | ],
46 | },
47 | optimization: {
48 | minimize: true,
49 | minimizer: [
50 | new EsbuildPlugin({
51 | include: /\.min\.css$/,
52 | target: "es2015",
53 | css: true,
54 | format: undefined
55 | })
56 | ]
57 | },
58 | plugins: [
59 | // clean before build
60 | new CleanWebpackPlugin({
61 | cleanOnceBeforeBuildPatterns: [distPath],
62 | verbose: true,
63 | dry: false,
64 | beforeEmit: true
65 | }),
66 |
67 | // clean after build
68 | new WebpackCleanPlugin(Object.keys(entry).map(v => `${v}.${tmpExt}`), {
69 | basePath: distPath
70 | }),
71 | new MiniCssExtractPlugin({
72 | filename: "[name].css"
73 | }),
74 | new webpack.BannerPlugin({
75 | banner: banner.production,
76 | entryOnly: true
77 | })
78 | ]
79 | };
80 |
81 | module.exports = common => mergeWithCustomize({
82 | customizeObject: customizeObject({
83 | entry: "replace",
84 | output: "replace",
85 | module: "replace"
86 | })
87 | })(common, config);
88 |
--------------------------------------------------------------------------------
/test/shape/shape-spec.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | /* eslint-disable */
6 | /* global describe, beforeEach, it, expect */
7 | import {beforeEach, beforeAll, describe, expect, it} from "vitest";
8 | import util from "../assets/util";
9 |
10 | describe("SHAPE", () => {
11 | let chart;
12 | let args;
13 |
14 | beforeEach(() => {
15 | chart = util.generate(args);
16 | });
17 |
18 | describe("shapes rendering", () => {
19 | beforeAll(() => {
20 | args = {
21 | data: {
22 | columns: [
23 | ["data1", 100, 200, 300, 400, 500],
24 | ["data2", -100, -200, -300, -400, -500]
25 | ],
26 | types: {
27 | data1: "area-step",
28 | data2: "bar"
29 | },
30 | axes: {
31 | data1: "y",
32 | data2: "y2"
33 | },
34 | labels: {
35 | show: true
36 | }
37 | },
38 | area: {
39 | linearGradient: true
40 | },
41 | axis: {
42 | y: {
43 | show: true,
44 | min: -1000,
45 | max: 1000
46 | },
47 | y2: {
48 | show: true,
49 | min: -1000,
50 | max: 1000
51 | }
52 | },
53 | legend: {
54 | show: false
55 | }
56 | };
57 | });
58 |
59 | it("area/bars combination with positive and negative values", () => {
60 | const expectedY = 228;
61 |
62 | // check area
63 | let rect = chart.$.line.areas.node().getBoundingClientRect();
64 |
65 | expect(rect.y + rect.height).to.be.equal(expectedY);
66 |
67 | // check area data label text position
68 | chart.$.text.texts.filter(d => d.id === "data1").each(function() {
69 | expect(this.getBoundingClientRect().y).to.be.below(expectedY);
70 | });
71 |
72 | // check bars
73 | let height = 0;
74 |
75 | chart.$.bar.bars.each(function() {
76 | rect = this.getBoundingClientRect();
77 |
78 | expect(rect.y).to.be.equal(expectedY);
79 | expect(rect.height).to.be.above(height);
80 |
81 | height = rect.height;
82 | });
83 |
84 | // check bars data label text position
85 | chart.$.text.texts.filter(d => d.id === "data2").each(function() {
86 | expect(this.getBoundingClientRect().y).to.be.above(expectedY);
87 | });
88 | });
89 | });
90 | });
91 |
--------------------------------------------------------------------------------
/src/config/Options/shape/line.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | /**
6 | * line config options
7 | */
8 | export default {
9 | /**
10 | * Set line options
11 | * @name line
12 | * @memberof Options
13 | * @type {object}
14 | * @property {object} line Line object
15 | * @property {boolean} [line.connectNull=false] Set if null data point will be connected or not.
16 | * If true set, the region of null data will be connected without any data point. If false set, the region of null data will not be connected and get empty.
17 | * @property {Array} [line.classes=undefined] If set, used to set a css class on each line.
18 | * @property {boolean} [line.step.type=step] Change step type for step chart.
19 | * **Available values:**
20 | * - step
21 | * - step-before
22 | * - step-after
23 | * @property {boolean} [line.step.tooltipMatch=false] Set to `true` for `step-before` and `step-after` types to have cursor/tooltip match to hovered step's point instead of nearest point.
24 | * @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.
25 | * @property {boolean} [line.zerobased=false] Set if min or max value will be 0 on line chart.
26 | * @example
27 | * line: {
28 | * connectNull: true,
29 | * classes: [
30 | * "line-class1",
31 | * "line-class2"
32 | * ],
33 | * step: {
34 | * type: "step-after",
35 | *
36 | * // to have cursor/tooltip match to hovered step's point instead of nearest point.
37 | * tooltipMatch: true
38 | * },
39 | *
40 | * // hide all data points ('point.show=false' also has similar effect)
41 | * point: false,
42 | *
43 | * // show data points for only indicated datas
44 | * point: [
45 | * "data1", "data3"
46 | * ],
47 | *
48 | * zerobased: false
49 | * }
50 | */
51 | line_connectNull: false,
52 | line_step_type: <"step" | "step-before" | "step-after">"step",
53 | line_step_tooltipMatch: false,
54 | line_zerobased: false,
55 | line_classes: undefined,
56 | line_point: true
57 | };
58 |
--------------------------------------------------------------------------------
/webpack.config.cjs:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | const pkg = require("./package.json");
3 | const path = require("path");
4 | const webpack = require("webpack");
5 | const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
6 | const WebpackBar = require("webpackbar");
7 |
8 | const {env} = process;
9 | const config = {
10 | entry: {
11 | billboard: [
12 | "./src/scss/billboard.scss",
13 | "./src/index.ts"
14 | ]
15 | },
16 | output: {
17 | path: path.resolve(__dirname, "dist"),
18 | chunkFilename: "[name].bundle.js",
19 | filename: "[name].js",
20 | libraryTarget: "umd",
21 | umdNamedDefine: true,
22 | globalObject: "this",
23 | publicPath: "/dist"
24 | },
25 | externals: ({context, request}, callback) => {
26 | // every 'd3-*' import, will be externally required as their name except root as 'd3'
27 | if (/^d3-/.test(request)) {
28 | return callback(null, {
29 | commonjs: request,
30 | commonjs2: request,
31 | amd: request,
32 | root: "d3"
33 | });
34 | }
35 |
36 | callback();
37 | },
38 | devtool: false,
39 | resolve: {
40 | extensions: [".ts", ".js"]
41 | },
42 | // https://webpack.js.org/migrate/5/#need-to-support-an-older-browser-like-ie-11
43 | target: ["web", "es5"],
44 | module: {
45 | rules: [
46 | {
47 | test: /\.[jt]s$/,
48 | loader: "esbuild-loader",
49 | options: {
50 | target: "es2015"
51 | },
52 | exclude: {
53 | and: [/node_modules/],
54 | not: [/(d3\-.*)$/, /internmap/]
55 | }
56 | },
57 | {
58 | test: /(\.[jt]s)$/,
59 | loader: "string-replace-loader",
60 | options: {
61 | search: /__VERSION__/ig,
62 | replace: env.VERSION || pkg.version
63 | }
64 | }
65 | ]
66 | },
67 | optimization: {
68 | usedExports: true
69 | },
70 | plugins: [
71 | new webpack.optimize.ModuleConcatenationPlugin(),
72 | new WebpackBar()
73 | ],
74 | node: false,
75 | stats: "minimal",
76 | mode: "none"
77 | };
78 |
79 | module.exports = () => {
80 | let mode = "development";
81 |
82 | if (env.NODE_ENV) {
83 | mode = env.NODE_ENV;
84 | }
85 |
86 | env.ANALYZER && config.plugins.push(
87 | new BundleAnalyzerPlugin()
88 | );
89 |
90 | mode === "packaged" && delete config.externals;
91 |
92 | return require(`./config/webpack/${mode}.cjs`)(config, env);
93 | };
94 |
--------------------------------------------------------------------------------
/packages/react/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@billboard.js/react",
3 | "version": "1.1.1",
4 | "description": "React component for billboard.js",
5 | "main": "dist/billboardjs-react.js",
6 | "types": "dist/types/index.d.ts",
7 | "type": "module",
8 | "exports": {
9 | ".": {
10 | "types": "./dist/types/index.d.ts",
11 | "import": "./dist/billboardjs-react.js",
12 | "require": "./dist/billboardjs-react.cjs"
13 | }
14 | },
15 | "scripts": {
16 | "dev": "vite",
17 | "build": "tsc && vite build && tsc --emitDeclarationOnly",
18 | "build:test": "vite --config vite.config.test.ts build",
19 | "preview": "npm run build:test && vite preview",
20 | "test": "npm run build:test && vitest",
21 | "test:ui": "npm test -- --ui",
22 | "coverage": "npm run build:test && vitest run",
23 | "storybook": "start-storybook -p 6006",
24 | "build-storybook": "build-storybook",
25 | "deploy": "npm run coverage && npm run build"
26 | },
27 | "repository": {
28 | "type": "git",
29 | "url": "https://github.com/naver/billboard.js/tree/master/packages/react"
30 | },
31 | "keywords": [
32 | "billboard.js",
33 | "chart",
34 | "graph",
35 | "react",
36 | "svg"
37 | ],
38 | "files": [
39 | "dist",
40 | "src",
41 | "README.md"
42 | ],
43 | "author": "NAVER Corp.",
44 | "license": "MIT",
45 | "readmeFilename": "README.md",
46 | "peerDependencies": {
47 | "billboard.js": ">=3.0.0",
48 | "react": ">=16.8.0"
49 | },
50 | "devDependencies": {
51 | "@babel/core": "^7.25.2",
52 | "@playwright/test": "^1.46.1",
53 | "@storybook/addon-actions": "^8.2.9",
54 | "@storybook/addon-console": "^3.0.0",
55 | "@storybook/addon-essentials": "^8.2.9",
56 | "@storybook/addon-interactions": "^8.2.9",
57 | "@storybook/addon-links": "^8.2.9",
58 | "@storybook/builder-vite": "^8.2.9",
59 | "@storybook/react": "^8.2.9",
60 | "@storybook/testing-library": "^0.2.2",
61 | "@types/react": "^18.3.4",
62 | "@types/react-dom": "^18.3.0",
63 | "@vitejs/plugin-react": "^4.3.1",
64 | "@vitest/coverage-c8": "^0.33.0",
65 | "@vitest/coverage-v8": "^2.0.5",
66 | "@vitest/ui": "^2.0.5",
67 | "babel-loader": "^9.1.3",
68 | "billboard.js": "^3.12.4",
69 | "jsdom": "^24.1.1",
70 | "playwright": "^1.46.1",
71 | "react": "^18.3.1",
72 | "react-dom": "^18.3.1",
73 | "typescript": "^5.5.4",
74 | "vite": "^5.4.2",
75 | "vitest": "^2.0.5"
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/config/webpack/plugin.cjs:
--------------------------------------------------------------------------------
1 | const {mergeWithCustomize, customizeObject} = require("webpack-merge");
2 | const webpack = require("webpack");
3 | const fs = require("fs");
4 | const path = require("path");
5 | const CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin;
6 | const banner = require("../template/banner.cjs");
7 | const {EsbuildPlugin} = require("esbuild-loader");
8 |
9 | const srcPath = "./src/Plugin/";
10 | const distPath = path.resolve(__dirname, "../../dist/plugin/");
11 | const prefix = require("../const.json").pluginPrefix;
12 |
13 | // construct entry point
14 | const entry = {};
15 |
16 | fs.readdirSync(path.resolve(__dirname, `../../${srcPath}`), {
17 | withFileTypes: true
18 | })
19 | .filter(dirent => dirent.isDirectory())
20 | .forEach(({name}) => {
21 | entry[name] = `${srcPath}${name}/index.ts`;
22 | });
23 |
24 | const config = {
25 | entry,
26 | output: {
27 | path: distPath,
28 | filename: `${prefix}-[name].js`,
29 | library: ["bb", "plugin", "[name]"],
30 | libraryExport: "default",
31 | publicPath: "/dist/plugin"
32 | },
33 | plugins: [
34 | new webpack.BannerPlugin({
35 | banner: banner.production + banner.plugin,
36 | entryOnly: true
37 | })
38 | ]
39 | };
40 |
41 | module.exports = (common, env) => {
42 | const mode = env?.MODE;
43 |
44 | if (env && /^pkgd/.test(mode)) {
45 | delete common.externals;
46 |
47 | config.output.path = `${distPath}/pkgd`;
48 |
49 | for (const key in config.entry) {
50 | config.entry[`${key}.pkgd`] = ["core-js/stable", config.entry[key]];
51 | delete config.entry[key];
52 | }
53 | } else if (!mode) {
54 | config.plugins.push(new CleanWebpackPlugin({
55 | cleanOnceBeforeBuildPatterns: [distPath],
56 | verbose: true,
57 | dry: false,
58 | beforeEmit: true
59 | }));
60 | }
61 |
62 | // minify for plugin & plugin pkgd
63 | if (/min$/.test(mode)) {
64 | config.mode = "production";
65 | config.output.filename = config.output.filename.replace(".js", ".min.js");
66 |
67 | config.optimization = {
68 | usedExports: true,
69 | minimize: true,
70 | minimizer: [
71 | new EsbuildPlugin({
72 | target: "es2015",
73 | format: undefined
74 | })
75 | ]
76 | };
77 | }
78 |
79 | return mergeWithCustomize({
80 | customizeObject: customizeObject({
81 | entry: "replace",
82 | output: "append"
83 | })
84 | })(common, config);
85 | };
86 |
--------------------------------------------------------------------------------
/test/internals/class-spec.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | /* eslint-disable */
6 | import {beforeAll, describe, expect, it} from "vitest";
7 | import util from "../assets/util";
8 |
9 | describe("CLASS", function() {
10 | let chart;
11 |
12 | beforeAll(() => {
13 | return new Promise((resolve) => {
14 | chart = util.generate({
15 | data: {
16 | columns: [
17 | ["data1", 30, 200, 100, 400, 150, 250],
18 | ["data2 prefix", 50, 20, 10, 40, 15, 25],
19 | ["data3 мужчины", 150, 120, 110, 140, 115, 125]
20 | ]
21 | },
22 | onrendered: resolve
23 | });
24 | });
25 | });
26 |
27 | describe("internal.getTargetSelectorSuffix", () => {
28 | it("should not replace any characters", () => {
29 | const input = "data1";
30 | const expected = `-${input}`;
31 | const suffix = chart.internal.getTargetSelectorSuffix(input);
32 |
33 | expect(suffix).to.be.equal(expected);
34 | });
35 |
36 | it("should replace space to '-'", () => {
37 | const input = "data1 suffix";
38 | const expected = "-data1-suffix";
39 | const suffix = chart.internal.getTargetSelectorSuffix(input);
40 |
41 | expect(suffix).to.be.equal(expected);
42 | });
43 |
44 | it("should replace space to '-' with multibyte characters", () => {
45 | const input = "data1 suffix 한글 日本語";
46 | const expected = "-data1-suffix-한글-日本語";
47 | const suffix = chart.internal.getTargetSelectorSuffix(input);
48 |
49 | expect(suffix).to.be.equal(expected);
50 | });
51 |
52 | it("should replace special characters to '-'", () => {
53 | const input = "data1 !@#$%^&*()_=+,.<>\"':;[]/|?~`{}\\";
54 | const expected = "-data1--------------------------------";
55 | const suffix = chart.internal.getTargetSelectorSuffix(input);
56 |
57 | expect(suffix).to.be.equal(expected);
58 | });
59 |
60 | it("should replace control/extended ascii characters", () => {
61 | const input = " data test name ";
62 | const expected = `--da-ta---test--name-`;
63 | const suffix = chart.internal.getTargetSelectorSuffix(input);
64 |
65 | expect(suffix).to.be.equal(expected);
66 | });
67 | });
68 |
69 | describe("multibyte characters on chart", () => {
70 | it("should replace space to '-' with multibyte characters", () => {
71 | const selector = ".bb-target-data3-мужчины";
72 |
73 | expect(chart.$.main.select(selector).size()).to.be.equal(1);
74 | });
75 | });
76 | });
77 |
--------------------------------------------------------------------------------
/packages/react/stories/assets/stackalt.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/config/const.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | /**
6 | * Chart type constant
7 | * @private
8 | */
9 | export const TYPE = {
10 | AREA: "area",
11 | AREA_LINE_RANGE: "area-line-range",
12 | AREA_SPLINE: "area-spline",
13 | AREA_SPLINE_RANGE: "area-spline-range",
14 | AREA_STEP: "area-step",
15 | AREA_STEP_RANGE: "area-step-range",
16 | BAR: "bar",
17 | BUBBLE: "bubble",
18 | CANDLESTICK: "candlestick",
19 | DONUT: "donut",
20 | FUNNEL: "funnel",
21 | GAUGE: "gauge",
22 | LINE: "line",
23 | PIE: "pie",
24 | POLAR: "polar",
25 | RADAR: "radar",
26 | SCATTER: "scatter",
27 | SPLINE: "spline",
28 | STEP: "step",
29 | TREEMAP: "treemap"
30 | };
31 |
32 | /**
33 | * Chart type module and its method from ChartInternal class, needed to be initialized.
34 | * @private
35 | */
36 | export const TYPE_METHOD_NEEDED = {
37 | AREA: "initArea",
38 | AREA_LINE_RANGE: "initArea",
39 | AREA_SPLINE: "initArea",
40 | AREA_SPLINE_RANGE: "initArea",
41 | AREA_STEP: "initArea",
42 | AREA_STEP_RANGE: "initArea",
43 | BAR: "initBar",
44 | BUBBLE: "initCircle",
45 | CANDLESTICK: "initCandlestick",
46 | DONUT: "initArc",
47 | FUNNEL: "initFunnel",
48 | GAUGE: "initArc",
49 | LINE: "initLine",
50 | PIE: "initArc",
51 | POLAR: "initPolar",
52 | RADAR: "initCircle",
53 | SCATTER: "initCircle",
54 | SPLINE: "initLine",
55 | STEP: "initLine",
56 | TREEMAP: "initTreemap"
57 | };
58 |
59 | /**
60 | * chart types by category
61 | * @private
62 | */
63 | export const TYPE_BY_CATEGORY = {
64 | Area: [
65 | TYPE.AREA,
66 | TYPE.AREA_SPLINE,
67 | TYPE.AREA_SPLINE_RANGE,
68 | TYPE.AREA_LINE_RANGE,
69 | TYPE.AREA_STEP,
70 | TYPE.AREA_STEP_RANGE
71 | ],
72 | AreaRange: [
73 | TYPE.AREA_SPLINE_RANGE,
74 | TYPE.AREA_LINE_RANGE,
75 | TYPE.AREA_STEP_RANGE
76 | ],
77 | Arc: [
78 | TYPE.PIE,
79 | TYPE.DONUT,
80 | TYPE.GAUGE,
81 | TYPE.POLAR,
82 | TYPE.RADAR
83 | ],
84 | Line: [
85 | TYPE.LINE,
86 | TYPE.SPLINE,
87 | TYPE.AREA,
88 | TYPE.AREA_SPLINE,
89 | TYPE.AREA_SPLINE_RANGE,
90 | TYPE.AREA_LINE_RANGE,
91 | TYPE.STEP,
92 | TYPE.AREA_STEP,
93 | TYPE.AREA_STEP_RANGE
94 | ],
95 | Step: [
96 | TYPE.STEP,
97 | TYPE.AREA_STEP,
98 | TYPE.AREA_STEP_RANGE
99 | ],
100 | Spline: [
101 | TYPE.SPLINE,
102 | TYPE.AREA_SPLINE,
103 | TYPE.AREA_SPLINE_RANGE
104 | ]
105 | };
106 |
--------------------------------------------------------------------------------
/src/config/Options/interaction/interaction.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | /**
6 | * interaction config options
7 | */
8 | export default {
9 | /**
10 | * Interaction options
11 | * @name interaction
12 | * @memberof Options
13 | * @type {object}
14 | * @property {object} interaction Intersection object
15 | * @property {boolean} [interaction.enabled=true] Indicate if the chart should have interactions.
16 | * If `false` is set, all of interactions (showing/hiding tooltip, selection, mouse events, etc) will be disabled.
17 | * @property {boolean} [interaction.brighten=true] Make brighter for the selected area (ex. 'pie' type data selected area)
18 | * @property {boolean} [interaction.inputType.mouse=true] enable or disable mouse interaction
19 | * @property {boolean} [interaction.inputType.touch=true] enable or disable touch interaction
20 | * @property {boolean|number} [interaction.inputType.touch.preventDefault=false] enable or disable to call event.preventDefault on touchstart & touchmove event. It's usually used to prevent document scrolling.
21 | * - **NOTE**: When `true` is set, touch events are bound with [`{passive: false}`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) option.
22 | * @property {boolean} [interaction.onout=true] Enable or disable "onout" event.
23 | * When is disabled, defocus(hiding tooltip, focused gridline, etc.) event won't work.
24 | * @see [Demo: touch.preventDefault](https://naver.github.io/billboard.js/demo/#Interaction.PreventScrollOnTouch)
25 | * @example
26 | * interaction: {
27 | * enabled: false,
28 | * brighten: false,
29 | * inputType: {
30 | * mouse: true,
31 | * touch: false
32 | *
33 | * // or declare preventDefault explicitly.
34 | * // In this case touch inputType is enabled by default
35 | * touch: {
36 | * preventDefault: true
37 | *
38 | * // or threshold pixel value (pixel moved from touchstart to touchmove)
39 | * preventDefault: 5
40 | * }
41 | * },
42 | *
43 | * // disable "onout" event
44 | * onout: false
45 | * }
46 | */
47 | interaction_enabled: true,
48 | interaction_brighten: true,
49 | interaction_inputType_mouse: true,
50 | interaction_inputType_touch: {},
51 | interaction_onout: true
52 | };
53 |
--------------------------------------------------------------------------------
/packages/react/test/basic.test.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import {afterAll, beforeAll, describe, test} from "vitest";
3 | import {preview} from "vite";
4 | import type {PreviewServer} from "vite";
5 | import {chromium} from "playwright";
6 | import type {Browser, Page} from "playwright";
7 | import {expect} from "@playwright/test";
8 |
9 | describe("basic", async () => {
10 | let server: PreviewServer;
11 | let browser: Browser;
12 | let page: Page;
13 |
14 | beforeAll(async () => {
15 | server = await preview({
16 | preview: {
17 | port: 3000,
18 | open: false
19 | }
20 | });
21 |
22 | browser = await chromium.launch();
23 | page = await browser.newPage();
24 |
25 | await page.goto("http://localhost:3000");
26 | });
27 |
28 | afterAll(async () => {
29 | await browser.close();
30 | await new Promise((resolve, reject) => {
31 | server.httpServer
32 | .close(error => error ? reject(error) : resolve());
33 | });
34 | });
35 |
36 | test("should generate chart correctly.", async () => {
37 | const elements = await page.evaluate(() => document.querySelectorAll(".bb").length);
38 |
39 | // @ts-ignore
40 | const instances = await page.evaluate(() => window.charts);
41 |
42 | expect(elements).toEqual(3);
43 | expect(instances.length).toEqual(3);
44 |
45 | const legendText = await page.locator(".bb .bb-legend-item-data4 text");
46 |
47 | expect(legendText).toHaveText("data4");
48 |
49 | // check if 2nd chart has 'style' attribute
50 | const style = await page.evaluate(() => document.querySelector(".bb:nth-child(2)")?.getAttribute("style"));
51 |
52 | expect(style).not.toBeNull();
53 |
54 | // check if 3rd chart has 'class' attribute
55 | const className = await page.evaluate(() => document.querySelector(".bb:nth-child(3)")?.className);
56 |
57 | expect(className).not.toBeNull();
58 | });
59 |
60 | test("should charts lengend be interactable.", async () => {
61 | await page.locator('text=data1data4 >> rect').first().click();
62 |
63 | // Click text=data1data4 >> rect >> nth=1
64 | await page.locator('text=data1data4 >> rect').nth(1).click();
65 | // Click text=data1data2 >> rect >> nth=0
66 | await page.locator('text=data1data2 >> rect').first().click();
67 | // Click text=data1data2 >> rect >> nth=1
68 | await page.locator('text=data1data2 >> rect').nth(1).click();
69 | });
70 |
71 | test("should area chart be generated.", async () => {
72 | const areaLen = await page.evaluate(() => document.querySelectorAll("path.bb-area").length);
73 |
74 | expect(areaLen).toEqual(2);
75 | });
76 | });
77 |
--------------------------------------------------------------------------------
/test/plugin/bubble-compare/bubble-compare-spec.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | /* eslint-disable */
6 | import {beforeEach, describe, expect, it} from "vitest";
7 | import {select as d3Select} from "d3-selection";
8 | import BubbleCompare from "../../../src/Plugin/bubblecompare";
9 | import util from "../../assets/util";
10 |
11 | describe("PLUGIN: BUBBLE-COMPARE", () => {
12 | let chart;
13 | const args = {
14 | data: {
15 | "type": "bubble",
16 | "xs": {
17 | "United States": "x0",
18 | "Korea": "x1",
19 | "France": "x2",
20 | "Japan": "x3",
21 | "Andorra": "x4"
22 | },
23 | // value x: population density
24 | // value y: Area
25 | // value z: population
26 | "columns": [
27 | ["x0", 30],
28 | ["x1", 515],
29 | ["x2", 319],
30 | ["x3", 337],
31 | ["x4", 164],
32 | ["United States", {"y": 9631418, "z": 295734134}],
33 | ["Korea", {"y": 100210, "z": 51635256}],
34 | ["France", {"y": 547030, "z": 67022000}],
35 | ["Japan", {"y": 377835, "z": 127417244}],
36 | ["Andorra", {"y": 464, "z": 76177}],
37 | ]
38 | },
39 | plugins: [
40 | new BubbleCompare({
41 | minR: 11,
42 | maxR: 74,
43 | expandScale: 1.1
44 | })
45 | ]
46 | };
47 |
48 | beforeEach(() => {
49 | chart = util.generate(args);
50 | });
51 |
52 | it("Every bubble radius should be in given radius range", () => {
53 | chart.$.circles.each(function() {
54 | const circle = d3Select(this);
55 | const {minR, maxR} = chart.plugins[0].options;
56 | const circleRadius = parseInt(circle.attr("r"), 10);
57 |
58 | expect(circleRadius).to.be.within(minR, maxR);
59 | });
60 | });
61 |
62 | it("check min and max radius", () => {
63 | const {circles} = chart.$;
64 | const {minR, maxR} = chart.plugins[0].options;
65 |
66 | const max = Math.floor(circles.filter(d => d.id === "United States").attr("r"));
67 | const min = Math.floor(circles.filter(d => d.id === "Andorra").attr("r"));
68 |
69 | expect(max).to.be.equal(maxR);
70 | expect(min).to.be.equal(minR);
71 | });
72 |
73 | it("check when bubble is expanded", () => {
74 | const {$: {circles}, internal: {$el}} = chart;
75 | const {expandScale} = chart.plugins[0].options;
76 |
77 | // when
78 | util.hoverChart(chart, "mousemove", {clientX: 50, clientY: 70});
79 |
80 | const r = circles.filter(d => d.id === "United States").attr("r");
81 |
82 | // bubble radius should be expanded
83 | expect(+r).to.be.equal(74 * expandScale);
84 | expect($el.eventRect.style("cursor")).to.be.equal("pointer");
85 | });
86 | });
87 |
--------------------------------------------------------------------------------
/src/config/Options/shape/treemap.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | /**
6 | * treemap config options
7 | */
8 | export default {
9 | /**
10 | * Set treemap options
11 | * @name treemap
12 | * @memberof Options
13 | * @type {object}
14 | * @property {object} treemap Treemap object
15 | * @property {string} [treemap.tile="binary"] Treemap tile type
16 | * - **Available tile type values:**
17 | * - binary ([d3.treemapBinary](https://github.com/d3/d3-hierarchy/blob/main/README.md#treemapBinary))
18 | * - dice ([d3.treemapDice](https://github.com/d3/d3-hierarchy/blob/main/README.md#treemapDice))
19 | * - slice ([d3.treemapSlice](https://github.com/d3/d3-hierarchy/blob/main/README.md#treemapSlice))
20 | * - sliceDice ([d3.treemapSliceDice](https://github.com/d3/d3-hierarchy/blob/main/README.md#treemapSliceDice))
21 | * - squrify ([d3.treemapSquarify](https://github.com/d3/d3-hierarchy/blob/main/README.md#treemapSquarify))
22 | * - resquarify ([d3.treemapResquarify](https://github.com/d3/d3-hierarchy/blob/main/README.md#treemapResquarify))
23 | * @property {function} [treemap.label.format] Set formatter for the label text.
24 | * - **Arguments:**
25 | * - `value {number}`: Data value
26 | * - `ratio {number}`: The `ratio` of how much space this tile occupies relative to the total area (0~1)
27 | * - `id {string}`: Data id
28 | * - `size {object}`: Tile size `{width, height}` in pixels
29 | * @property {number} [treemap.label.threshold=0.05] Set threshold ratio to show/hide labels text.
30 | * @property {number} [treemap.label.show=true] Show or hide label text.
31 | * @see [Demo: treemap](https://naver.github.io/billboard.js/demo/#Chart.TreemapChart)
32 | * @example
33 | * treemap: {
34 | * // "binary", "dice", "slice", "sliceDice", "squrify", "resquarify"
35 | * tile: "dice",
36 | *
37 | * label: {
38 | * // show or hide label text
39 | * show: false,
40 | *
41 | * // set label text formatter
42 | * format: function(value, ratio, id, size) {
43 | * // size: {width, height} - tile size in pixels
44 | * return d3.format("$")(value);
45 | *
46 | * // to multiline, return with '\n' character
47 | * // return value +"%\nLine1\n2Line2";
48 | * },
49 | *
50 | * // set ratio number
51 | * ratio: 0.05
52 | * }
53 | * }
54 | */
55 | treemap_tile: "binary",
56 | treemap_label_format: <(() => number | string) | undefined>undefined,
57 | treemap_label_threshold: 0.05,
58 | treemap_label_show: true
59 | };
60 |
--------------------------------------------------------------------------------
/src/ChartInternal/internals/format.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | import type {AxisType} from "../../../types/types";
6 | import {isArray, isFunction, isObject, isObjectType, isValue} from "../../module/util";
7 |
8 | /**
9 | * Get formatted
10 | * @param {object} $$ Context
11 | * @param {string} typeValue Axis type
12 | * @param {number} v Value to be formatted
13 | * @returns {number | string}
14 | * @private
15 | */
16 | function getFormat($$, typeValue: AxisType, v: number): number | string {
17 | const {config} = $$;
18 | const type = `axis_${typeValue}_tick_format`;
19 | const format = config[type] ? config[type] : $$.defaultValueFormat;
20 |
21 | return format.call($$.api, v);
22 | }
23 |
24 | export default {
25 | yFormat(v: number): number | string {
26 | return getFormat(this, "y", v);
27 | },
28 |
29 | y2Format(v: number): number | string {
30 | return getFormat(this, "y2", v);
31 | },
32 |
33 | /**
34 | * Get default value format function
35 | * @returns {function} formatter function
36 | * @private
37 | */
38 | getDefaultValueFormat(): Function {
39 | const $$ = this;
40 | const {defaultArcValueFormat, yFormat, y2Format} = $$;
41 | const hasArc = $$.hasArcType(null, ["gauge", "polar", "radar"]);
42 |
43 | return function(v, ratio, id) {
44 | const format = hasArc ? defaultArcValueFormat : (
45 | $$.axis && $$.axis.getId(id) === "y2" ? y2Format : yFormat
46 | );
47 |
48 | return format.call($$, v, ratio);
49 | };
50 | },
51 |
52 | defaultValueFormat(v: number | number[]): number | string {
53 | return isArray(v) ? v.join("~") : (isValue(v) ? +v : "");
54 | },
55 |
56 | defaultArcValueFormat(v, ratio): string {
57 | return `${(ratio * 100).toFixed(1)}%`;
58 | },
59 |
60 | defaultPolarValueFormat(v): string {
61 | return `${v}`;
62 | },
63 |
64 | dataLabelFormat(targetId: string): Function {
65 | const $$ = this;
66 | const dataLabels = $$.config.data_labels;
67 | const defaultFormat = v => {
68 | const delimiter = "~";
69 | let res = v;
70 |
71 | if (isArray(v)) {
72 | res = v.join(delimiter);
73 | } else if (isObject(v)) {
74 | res = Object.values(v).join(delimiter);
75 | }
76 |
77 | return res;
78 | };
79 | let format = defaultFormat;
80 |
81 | // find format according to axis id
82 | if (isFunction(dataLabels.format)) {
83 | format = dataLabels.format;
84 | } else if (isObjectType(dataLabels.format)) {
85 | if (dataLabels.format[targetId]) {
86 | format = dataLabels.format[targetId] === true ?
87 | defaultFormat :
88 | dataLabels.format[targetId];
89 | } else {
90 | format = () => "";
91 | }
92 | }
93 |
94 | return format.bind($$.api);
95 | }
96 | };
97 |
--------------------------------------------------------------------------------
/src/module/generator.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | import type {d3Transition} from "../../types/types";
6 | import {requestIdleCallback, window} from "./browser";
7 | import {isArray, isNumber, isTabVisible, runUntil} from "./util";
8 |
9 | const {setTimeout, clearTimeout} = window;
10 |
11 | /**
12 | * Generate resize queue function
13 | * @param {boolean|number} option Resize option
14 | * @returns {Fucntion}
15 | * @private
16 | */
17 | export function generateResize(option: boolean | number) {
18 | const fn: Function[] = [];
19 | let timeout;
20 |
21 | const callResizeFn = function() {
22 | // Delay all resize functions call, to prevent unintended excessive call from resize event
23 | callResizeFn.clear();
24 |
25 | if (option === false) {
26 | requestIdleCallback(() => {
27 | fn.forEach((f: Function) => f());
28 | }, {timeout: 200});
29 | } else {
30 | timeout = setTimeout(() => {
31 | fn.forEach((f: Function) => f());
32 | }, isNumber(option) ? option : 200);
33 | }
34 | };
35 |
36 | callResizeFn.clear = () => {
37 | if (timeout) {
38 | clearTimeout(timeout);
39 | timeout = null;
40 | }
41 | };
42 |
43 | callResizeFn.add = f => fn.push(f);
44 | callResizeFn.remove = f => fn.splice(fn.indexOf(f), 1);
45 |
46 | return callResizeFn;
47 | }
48 |
49 | type Transition = boolean | d3Transition;
50 |
51 | /**
52 | * Generate transition queue function
53 | * @returns {function}
54 | * @private
55 | */
56 | export function generateWait() {
57 | let transitionsToWait: Transition[] = [];
58 |
59 | // 'f' is called as selection.call(f, ...);
60 | const f = function(selection: d3Transition, callback: Function) {
61 | /**
62 | * Check if transition is complete
63 | * @returns {boolean} Whether transition is complete
64 | * @private
65 | */
66 | function loop(): boolean {
67 | let done = 0;
68 |
69 | for (let i = 0, t; (t = transitionsToWait[i]); i++) {
70 | if (t === true || t.empty?.()) {
71 | done++;
72 | continue;
73 | }
74 |
75 | // when tab isn't visible exit loop
76 | if (isTabVisible() === false) {
77 | done = transitionsToWait.length;
78 | break;
79 | }
80 |
81 | try {
82 | t.transition();
83 | } catch {
84 | done++;
85 | }
86 | }
87 |
88 | return done === transitionsToWait.length;
89 | }
90 |
91 | runUntil(() => {
92 | callback?.();
93 | }, loop);
94 | };
95 |
96 | f.add = function(t: Transition | Transition[]) {
97 | isArray(t) ? (transitionsToWait = transitionsToWait.concat(t)) : transitionsToWait.push(t);
98 | };
99 |
100 | return f;
101 | }
102 |
--------------------------------------------------------------------------------
/src/config/Options/interaction/subchart.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | /**
6 | * x Axis config options
7 | */
8 | export default {
9 | /**
10 | * Set subchart options.
11 | * - **NOTE:** Not supported for `bubble`, `scatter` and non-Axis based(pie, donut, gauge, radar) types.
12 | * @name subchart
13 | * @memberof Options
14 | * @type {object}
15 | * @property {object} subchart Subchart object
16 | * @property {boolean} [subchart.show=false] Show sub chart on the bottom of the chart.
17 | * - **NOTE:** for ESM imports, needs to import 'subchart' exports and instantiate it by calling `subchart()`.
18 | * - `show: subchart()`
19 | * @property {boolean} [subchart.showHandle=false] Show sub chart's handle.
20 | * @property {boolean} [subchart.axis.x.show=true] Show or hide x axis.
21 | * @property {boolean} [subchart.axis.x.tick.show=true] Show or hide x axis tick line.
22 | * @property {function|string} [subchart.axis.x.tick.format] Use custom format for x axis ticks - see [axis.x.tick.format](#.axis․x․tick․format) for details.
23 | * @property {boolean} [subchart.axis.x.tick.text.show=true] Show or hide x axis tick text.
24 | * @property {Array} [subchart.init.range] Set initial selection domain range.
25 | * @property {number} [subchart.size.height] Change the height of the subchart.
26 | * @property {function} [subchart.onbrush] Set callback for brush event.
27 | * Specified function receives the current zoomed x domain.
28 | * @see [Demo](https://naver.github.io/billboard.js/demo/#Interaction.SubChart)
29 | * @example
30 | * subchart: {
31 | * show: true,
32 | * showHandle: true,
33 | * size: {
34 | * height: 20
35 | * },
36 | * init: {
37 | * // specify initial range domain selection
38 | * range: [1, 2]
39 | * },
40 | * axis: {
41 | * x: {
42 | * show: true,
43 | * tick: {
44 | * show: true,
45 | * format: (x) => d3Format(".1f")(x)
46 | * text: {
47 | * show: false
48 | * }
49 | * }
50 | * }
51 | * },
52 | * onbrush: function(domain) { ... }
53 | * }
54 | * @example
55 | * // importing ESM
56 | * import bb, {subchart} from "billboard.js";
57 | *
58 | * subchart: {
59 | * show: subchart(),
60 | * ...
61 | * }
62 | */
63 | subchart_show: false,
64 | subchart_showHandle: false,
65 | subchart_size_height: 60,
66 | subchart_axis_x_show: true,
67 | subchart_axis_x_tick_show: true,
68 | subchart_axis_x_tick_format: undefined,
69 | subchart_axis_x_tick_text_show: true,
70 | subchart_init_range: undefined,
71 | subchart_onbrush: () => {}
72 | };
73 |
--------------------------------------------------------------------------------
/test/plugin/textoverlap/textoverlap-spec.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | /* eslint-disable */
6 | import {beforeEach, describe, expect, it} from "vitest";
7 | import util from "../../assets/util";
8 | import {$TEXT} from "../../../src/config/classes";
9 | import TextOverlap from "../../../src/Plugin/textoverlap";
10 |
11 | describe("PLUGIN: TEXTOVERLAP", () => {
12 | let chart;
13 | let args = {
14 | data: {
15 | columns: [
16 | ["data1", 3, 3, 10.1],
17 | ["data2", 2.5, 3.2, 10],
18 | ["data3", 2, 3.5, 10.2]
19 | ],
20 | type: "line",
21 | labels: true
22 | },
23 | axis: {
24 | y: {
25 | show: false
26 | }
27 | },
28 | plugins: [
29 | new TextOverlap({
30 | // selector: ".bb-texts text",
31 | // extent: 8,
32 | // area: 3
33 | })
34 | ]
35 | };
36 |
37 | beforeEach(() => {
38 | chart = util.generate(args);
39 | });
40 |
41 | it("should move data labels into correct position", () => {
42 | const {texts} = chart.$.text;
43 |
44 | chart.data().forEach((v, i) => {
45 | let x = i;
46 | let y = i;
47 |
48 | texts.filter(`.${$TEXT.text}-${i}`).each(function(d, j) {
49 | if (x === i) {
50 | x = +this.getAttribute("x");
51 | y = +this.getAttribute("y");
52 | } else {
53 | expect(+this.getAttribute("x")).to.be.closeTo(x, 1);
54 | expect(+this.getAttribute("y")).to.be.closeTo(y, 50);;
55 | }
56 |
57 | expect(/translate\(-?1, (-1|6)\)/.test(this.getAttribute("transform"))).to.be.true;
58 | });
59 | });
60 | });
61 |
62 | it("set options extent & area options", () => {
63 | args.plugins = [
64 | new TextOverlap({
65 | selector: ".bb-texts text",
66 | extent: 5,
67 | area: 0.35
68 | })
69 | ];
70 | });
71 |
72 | it("should move data labels into correct position with specified extent and area", () => {
73 | const expected = [
74 | {data1: "", data2: "none", data3: ""},
75 | {data1: "", data2: "", data3: ""},
76 | {data1: "none", data2: "", data3: ""}
77 | ];
78 |
79 | const {texts} = chart.$.text;
80 |
81 | chart.data().forEach((v, i) => {
82 | texts.filter(`.${$TEXT.text}-${i}`).each(function(d) {
83 | expect(this.style.display).to.be.equal(expected[d.index][d.id]);
84 | });
85 | });
86 | });
87 | });
88 |
--------------------------------------------------------------------------------
/src/Plugin/stanford/util.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | * @ignore
5 | */
6 | import {getRange, isEmpty, isFunction, isString, parseDate} from "../../module/util";
7 |
8 | /**
9 | * Check if point is in region
10 | * @param {object} point Point
11 | * @param {Array} region Region
12 | * @returns {boolean}
13 | * @private
14 | */
15 | function pointInRegion(point, region): boolean { // thanks to: http://bl.ocks.org/bycoffe/5575904
16 | // ray-casting algorithm based on
17 | // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
18 | const x = point.x;
19 | const y = point.value;
20 | let inside = false;
21 |
22 | for (let i = 0, j = region.length - 1; i < region.length; j = i++) {
23 | const xi = region[i].x;
24 | const yi = region[i].y;
25 |
26 | const xj = region[j].x;
27 | const yj = region[j].y;
28 |
29 | const intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
30 |
31 | if (intersect) {
32 | inside = !inside;
33 | }
34 | }
35 |
36 | return inside;
37 | }
38 |
39 | /**
40 | * Compare epochs
41 | * @param {object} a Target
42 | * @param {object} b Source
43 | * @returns {number}
44 | * @private
45 | */
46 | function compareEpochs(a, b): number {
47 | if (a.epochs < b.epochs) {
48 | return -1;
49 | }
50 |
51 | if (a.epochs > b.epochs) {
52 | return 1;
53 | }
54 |
55 | return 0;
56 | }
57 |
58 | /**
59 | * Get region area
60 | * @param {Array} points Points
61 | * @returns {number}
62 | * @private
63 | */
64 | function getRegionArea(points): number { // thanks to: https://stackoverflow.com/questions/16282330/find-centerpoint-of-polygon-in-javascript
65 | let area = 0;
66 | let point1;
67 | let point2;
68 |
69 | for (let i = 0, l = points.length, j = l - 1; i < l; j = i, i++) {
70 | point1 = points[i];
71 | point2 = points[j];
72 | area += point1.x * point2.y;
73 | area -= point1.y * point2.x;
74 | }
75 |
76 | area /= 2;
77 |
78 | return area;
79 | }
80 |
81 | /**
82 | * Get centroid
83 | * @param {Array} points Points
84 | * @returns {object}
85 | * @private
86 | */
87 | function getCentroid(points) {
88 | const area = getRegionArea(points);
89 |
90 | let x = 0;
91 | let y = 0;
92 | let f;
93 |
94 | for (let i = 0, l = points.length, j = l - 1; i < l; j = i, i++) {
95 | const point1 = points[i];
96 | const point2 = points[j];
97 |
98 | f = point1.x * point2.y - point2.x * point1.y;
99 | x += (point1.x + point2.x) * f;
100 | y += (point1.y + point2.y) * f;
101 | }
102 |
103 | f = area * 6;
104 |
105 | return {
106 | x: x / f,
107 | y: y / f
108 | };
109 | }
110 |
111 | export {
112 | compareEpochs,
113 | getCentroid,
114 | getRange,
115 | getRegionArea,
116 | isEmpty,
117 | isFunction,
118 | isString,
119 | parseDate,
120 | pointInRegion
121 | };
122 |
--------------------------------------------------------------------------------
/AUTHORS.txt:
--------------------------------------------------------------------------------
1 | billboard.js authors ordered by first contribution.
2 |
3 | Jae Sung Park
4 | Son Chan Uk
5 | Kim Joo Hwee
6 | Yun Hwa Heo
7 | Petr Vítek
8 | Mark Winter
9 | Hansol Lim
10 | Gyuil Han
11 | Julien Castelain
12 | Kim Jong Hyen
13 | dtc03012
14 | Kim Dong Min
15 | Russell Shingleton
16 | Matthias Komarek
17 | Tony Quetano
18 | EunChan Park
19 | Ina Ryu
20 | Lennert Claeys
21 | Bogdan Iuga
22 | Chong Jaemyung
23 | Rex
24 | Alexandre Araujo
25 | Jinwoo Oh
26 | Nirmal Guna
27 | Michael Yungerman
28 | Malte Batram
29 | Daniel Oliveira
30 | Bryce Osterhaus
31 | Austin Cawley-Edwards
32 | soyeong
33 | Cristian Necula
34 | Kimberly Baum
35 | Dylan Praul
36 | Christophe Coevoet
37 | Jung Hoon Park
38 | Kamil Michalski
39 | Zhongde Liu
40 | Wonju Jeon
41 | ECrownofFire
42 | Artem Savienkov
43 | Hamid Sarfraz
44 | Alan Hamlett
45 | Nicolas Forêt
46 | Marc Faber
47 | Donald Pipowitch
48 | Sung Oh Park
49 | Adrian Schmutzler
50 | Aziz Gazanchiyan
51 | Eben Collins
52 | Shim Heungwoon
53 | Marcos Gomez Castillo
54 | Hjalmers
55 | Won-Joon Lee
56 | Justin-Moon
57 | Haung Lee
58 | Chunmyong Park
59 | neilnaveen
60 | Frank Tackitt
61 | jongwooo
62 | Jørn Andre Sundt
63 | Erik Hopp
64 | Do Yoon Kim
65 | RobinDeeCee
66 | nekoya
67 | Ubin Park
68 | William Nolden
69 | Sergiu Statache
70 | vlaforet
71 | Alan Hamlett
72 | Allen, Brad
73 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 | on: [push, pull_request]
3 |
4 | permissions: write-all
5 |
6 | jobs:
7 | test:
8 | permissions:
9 | checks: write # for coverallsapp/github-action to create new checks
10 | contents: read # for actions/checkout to fetch code
11 | runs-on: macos-latest
12 | strategy:
13 | matrix:
14 | node-version: [20.x, 21.x, 22.x]
15 |
16 | steps:
17 | - uses: actions/checkout@v6
18 | - name: Use Node.js ${{ matrix.node-version }}
19 | uses: actions/setup-node@v6
20 | with:
21 | node-version: ${{ matrix.node-version }}
22 | cache: 'npm'
23 |
24 | - name: Install dependencies
25 | run: |
26 | npm config set package-lock false
27 | npm install --save --legacy-peer-deps
28 | sudo npx playwright install-deps
29 | npx playwright install
30 |
31 | - name: Lint
32 | run: npm run lint
33 |
34 | - name: Run Test
35 | run: npm run coverage:ci
36 |
37 | - name: Coveralls Parallel
38 | uses: coverallsapp/github-action@master
39 | with:
40 | github-token: ${{ secrets.github_token }}
41 | flag-name: run-${{ matrix.node-version }}
42 | parallel: true
43 |
44 | send_coverage:
45 | permissions:
46 | checks: write # for coverallsapp/github-action to create new checks
47 | needs: test
48 | runs-on: ubuntu-latest
49 | steps:
50 | - name: Coveralls
51 | # https://github.com/marketplace/actions/coveralls-github-action
52 | uses: coverallsapp/github-action@master
53 | with:
54 | github-token: ${{ secrets.GITHUB_TOKEN }}
55 | parallel-finished: true
56 |
57 | release:
58 | needs: send_coverage
59 | runs-on: ubuntu-latest
60 | if: contains('refs/heads/next refs/heads/latest', github.ref)
61 | steps:
62 | - name: Checkout
63 | uses: actions/checkout@v6
64 | with:
65 | fetch-depth: 0
66 | ref: ${{ github.ref }}
67 |
68 | - name: Setup Node.js
69 | uses: actions/setup-node@v6
70 | with:
71 | node-version: 20
72 | cache: 'npm'
73 |
74 | - name: Install dependencies
75 | run: |
76 | npm config set package-lock false
77 | npm config set legacy-peer-deps=true
78 | npm install
79 |
80 | - name: Publish
81 | env:
82 | GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
83 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
84 | id: publish
85 | run: npm run release
86 |
87 | - name: Deploy
88 | shell: bash
89 | run: |
90 | git remote set-url origin https://netil:${{ secrets.GH_TOKEN }}@github.com/naver/billboard.js.git > /dev/null 2>&1
91 | bash ./config/deploy.sh
92 | # https://docs.github.com/en/free-pro-team@latest/actions/reference/context-and-expression-syntax-for-github-actions
93 | if: github.ref == 'refs/heads/latest' && steps.publish.conclusion == 'success'
94 |
--------------------------------------------------------------------------------
/types/plugin/stanford/options.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | export interface StanfordOptions {
6 | /**
7 | * Set the color of the color scale.
8 | */
9 | colors?: (value: number) => string;
10 |
11 | /**
12 | * Specify the key of epochs values in the data.
13 | */
14 | epochs?: number[];
15 |
16 | /**
17 | * Show additional lines anywhere on the chart.
18 | */
19 | lines?: StanfordLineOptions[];
20 |
21 | padding?: {
22 | /**
23 | * The padding on the top of the color scale.
24 | */
25 | top?: number;
26 |
27 | /**
28 | * The padding on the right of the color scale.
29 | */
30 | right?: number;
31 |
32 | /**
33 | * The padding on the bottom of the color scale.
34 | */
35 |
36 | bottom?: number;
37 |
38 | /**
39 | * The padding on the left of the color scale.
40 | */
41 | left?: number;
42 | };
43 |
44 | /**
45 | * Show additional regions anywhere on the chart
46 | */
47 | regions?: StanfordRegionOptions[];
48 |
49 | scale?: {
50 | /**
51 | * Minimum value of the color scale. Default: lowest value in epochs
52 | */
53 | min?: number;
54 |
55 | /**
56 | * Maximum value of the color scale. Default: highest value in epochs
57 | */
58 | max?: number;
59 |
60 | /**
61 | * Width of the color scale
62 | */
63 | width?: number;
64 |
65 | /**
66 | * Format of the axis of the color scale. Use 'pow10' to format as powers of 10 or a custom function.
67 | */
68 | format?: string | ((x: number) => string);
69 | };
70 | }
71 |
72 | export interface StanfordLineOptions {
73 | /**
74 | * Starting position of the line on the x axis
75 | */
76 | x1?: number;
77 | /**
78 | * Starting position of the line on the y axis
79 | */
80 | y1?: number;
81 | /**
82 | * Ending position of the line on the x axis
83 | */
84 | x2?: number;
85 | /**
86 | * Ending position of the line on the x axis
87 | */
88 | y2?: number;
89 | /**
90 | * Set a custom css class to this line.
91 | */
92 | class?: string;
93 | }
94 |
95 | export interface StanfordRegionOptions {
96 | /**
97 | * Accepts a group of objects that has x and y.
98 | */
99 | points?: StanfordPointOptions[];
100 | /**
101 | * Sets the opacity of the region as value between 0 and 1. Default: 0.2
102 | */
103 | opacity?: number;
104 | /**
105 | * This function receives a value and percentage of the number of epochs in this region.
106 | * Return a string to place text in the middle of the region.
107 | */
108 | text?: (value: number, percentage: number) => string;
109 | /**
110 | * Set a custom css class to this region, use the fill property in css to set a background color.
111 | */
112 | class?: string;
113 | }
114 |
115 | export interface StanfordPointOptions {
116 | x?: number;
117 | y?: number;
118 | }
119 |
120 | export interface StanfordTextOptions {
121 | x?: number;
122 | y?: number;
123 | content?: string;
124 | class?: string;
125 | }
126 |
--------------------------------------------------------------------------------
/test/esm/esm-error-spec.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | /* eslint-disable */
6 | /* global describe, beforeEach, it, expect */
7 | import {describe, expect, it} from "vitest";
8 | import {bb} from "../../src/index.esm";
9 | import {TYPE, TYPE_METHOD_NEEDED} from "../../src/config/const";
10 | import {camelize} from "../../src/module/util";
11 |
12 | describe("ESM-ERROR check", function() {
13 | const args = {
14 | data: {
15 | columns: [
16 | ["data1", 300, 350, 300, 0, 100],
17 | ["data2", 130, 100, 140, 200, 150]
18 | ],
19 | type: ""
20 | },
21 | onbeforeinit: function() {}
22 | };
23 |
24 | it("when initializes wihtout specifying types, it default to 'line', but as isn't esm import usage, should throw error", () => {
25 | let fn;
26 | let proto;
27 |
28 | try {
29 | args.onbeforeinit = function() {
30 | proto = Object.getPrototypeOf(this.internal);
31 |
32 | fn = proto[TYPE_METHOD_NEEDED.LINE];
33 | delete proto[TYPE_METHOD_NEEDED.LINE];
34 | };
35 |
36 | bb.generate(args);
37 | } catch(e) {
38 | const {message} = e;
39 | const type = "line";
40 |
41 | expect(message.indexOf("[billboard.js]") > -1).to.be.true;
42 | expect(message.indexOf(type) > -1).to.be.true;
43 |
44 | proto[TYPE_METHOD_NEEDED.LINE] = fn;
45 | }
46 | });
47 |
48 | it("should throw error when needed internal method is missing.", () => {
49 | const types = Object.keys(TYPE);
50 | let fn;
51 | let errorCount = 0;
52 |
53 | types.forEach(type => {
54 | try {
55 | args.data.type = TYPE[type];
56 | const m = TYPE_METHOD_NEEDED[type];
57 |
58 | args.onbeforeinit = function() {
59 | const proto = Object.getPrototypeOf(this.internal);
60 |
61 | if (!fn || fn?.name !== m) {
62 | if (fn) {
63 | proto[fn.name] = fn;
64 | }
65 |
66 | fn = proto[m];
67 | delete proto[m];
68 | }
69 | }
70 |
71 | const chart = bb.generate(args);
72 | } catch(e) {
73 | const {message} = e;
74 | const type = camelize(args.data.type);
75 |
76 | expect(message.indexOf("[billboard.js]") > -1).to.be.true;
77 | expect(message.indexOf(type) > -1).to.be.true;
78 |
79 | errorCount++;
80 | }
81 | });
82 |
83 | expect(types.length).to.be.equal(errorCount);
84 |
85 | // recover the last deleted prototype method
86 | args.onbeforeinit = function() {
87 | Object.getPrototypeOf(this.internal)[fn?.name] = fn;
88 | }
89 |
90 | // bb.generate(args);
91 | });
92 | });
--------------------------------------------------------------------------------
/src/config/Options/shape/radar.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | /**
6 | * radar config options
7 | */
8 | export default {
9 | /**
10 | * Set radar options
11 | * - **NOTE:**
12 | * > When x tick text contains `\n`, it's used as line break.
13 | * @name radar
14 | * @memberof Options
15 | * @type {object}
16 | * @property {object} radar Radar object
17 | * @property {number} [radar.axis.max=undefined] The max value of axis. If not given, it'll take the max value from the given data.
18 | * @property {boolean} [radar.axis.line.show=true] Show or hide axis line.
19 | * @property {number} [radar.axis.text.position.x=0] x coordinate position, relative the original.
20 | * @property {number} [radar.axis.text.position.y=0] y coordinate position, relative the original.
21 | * @property {boolean} [radar.axis.text.show=true] Show or hide axis text.
22 | * @property {boolean} [radar.direction.clockwise=false] Set the direction to be drawn.
23 | * @property {number} [radar.level.depth=3] Set the level depth.
24 | * @property {boolean} [radar.level.show=true] Show or hide level.
25 | * @property {function} [radar.level.text.format] Set format function for the level value.
- Default value: `(x) => x % 1 === 0 ? x : x.toFixed(2)`
26 | * @property {boolean} [radar.level.text.show=true] Show or hide level text.
27 | * @property {number} [radar.size.ratio=0.87] Set size ratio.
28 | * @see [Demo](https://naver.github.io/billboard.js/demo/#Chart.RadarChart)
29 | * @see [Demo: radar axis](https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarAxis)
30 | * @see [Demo: radar level](https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarLevel)
31 | * @see [Demo: radar size](https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarSize)
32 | * @see [Demo: radar axis multiline](https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarAxisMultiline)
33 | * @example
34 | * radar: {
35 | * axis: {
36 | * max: 50,
37 | * line: {
38 | * show: false
39 | * },
40 | * text: {
41 | * position: {
42 | * x: 0,
43 | * y: 0
44 | * },
45 | * show: false
46 | * }
47 | * },
48 | * direction: {
49 | * clockwise: true
50 | * },
51 | * level: {
52 | * show: false,
53 | * text: {
54 | * format: function(x) {
55 | * return x + "%";
56 | * },
57 | * show: true
58 | * }
59 | * },
60 | * size: {
61 | * ratio: 0.7
62 | * }
63 | * }
64 | */
65 | radar_axis_max: undefined,
66 | radar_axis_line_show: true,
67 | radar_axis_text_show: true,
68 | radar_axis_text_position: <{x?: number, y?: number}>{},
69 | radar_level_depth: 3,
70 | radar_level_show: true,
71 | radar_level_text_format: (x: number) => (x % 1 === 0 ? x : x.toFixed(2)),
72 | radar_level_text_show: true,
73 | radar_size_ratio: 0.87,
74 | radar_direction_clockwise: false
75 | };
76 |
--------------------------------------------------------------------------------
/test/api/x-spec.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | /* eslint-disable */
6 | import {beforeEach, beforeAll, describe, expect, it} from "vitest";
7 | import util from "../assets/util";
8 | import {$AXIS} from "../../src/config/classes";
9 |
10 | describe("API x", () => {
11 | let chart;
12 | let args;
13 |
14 | beforeEach(() => {
15 | chart = util.generate(args);
16 | });
17 |
18 | describe(".x()", () => {
19 | beforeAll(() => {
20 | args = {
21 | data: {
22 | columns: [
23 | ["data1", 30, 200, 100],
24 | ["data2", 130, 100, 140]
25 | ]
26 | }
27 | };
28 | });
29 |
30 | it("check for: indexed Axis", () => {
31 | const x = chart.x();
32 | let xValue = [0, 1, 2];
33 | const checkFn = v => {
34 | expect(x[v]).to.deep.equal(xValue);
35 | };
36 |
37 | Object.keys(x).forEach(checkFn);
38 |
39 | // update x value
40 | xValue = [2,5,8];
41 | Object.keys(chart.x(xValue)).forEach(checkFn);
42 |
43 | chart.$.main.selectAll(`.${$AXIS.axisX} .tick tspan`).each(function(v, i) {
44 | expect(+this.textContent).to.be.equal(xValue[i]);
45 | });
46 | });
47 |
48 | it("set options for category Axis", () => {
49 | args = {
50 | data: {
51 | x: "x",
52 | columns: [
53 | ["x", "a", "b", "c"],
54 | ["data1", 30, 200, 100],
55 | ["data2", 130, 100, 140]
56 | ]
57 | },
58 | axis: {
59 | x: {
60 | type: "category"
61 | }
62 | }
63 | };
64 | });
65 |
66 | it("check for: category Axis", () => {
67 | const x = chart.x();
68 | let xValue = ["a", "b", "c"];
69 |
70 | expect(x).to.be.deep.equal(xValue);
71 |
72 | xValue = ["d", "e", "f"];
73 | expect(chart.x(xValue)).to.be.deep.equal(xValue);
74 |
75 | chart.$.main.selectAll(`.${$AXIS.axisX} .tick tspan`).each(function(v, i) {
76 | expect(this.textContent).to.be.equal(xValue[i]);
77 | });
78 | });
79 | });
80 |
81 | describe(".xs()", () => {
82 | let xs: any = {
83 | x1: [10, 30, 45],
84 | x2: [30, 50, 75]
85 | };
86 |
87 | beforeAll(() => {
88 | args = {
89 | data: {
90 | xs: {
91 | data1: "x1",
92 | data2: "x2"
93 | },
94 | columns: [
95 | ["x1"].concat(xs.x1),
96 | ["x2"].concat(xs.x2),
97 | ["data1", 30, 200, 100],
98 | ["data2", 20, 180, 240]
99 | ]
100 | }
101 | };
102 | });
103 |
104 | it("should return & update xs values", () => {
105 | let xsValue = chart.xs();
106 |
107 | Object.keys(xs).forEach((v, i) => {
108 | expect(xsValue[`data${i + 1}`]).to.deep.equal(xs[v]);
109 | });
110 |
111 | xs = {
112 | data1: [15, 35, 58],
113 | data2: [33, 55, 82]
114 | };
115 |
116 | xsValue = chart.xs(xs);
117 | expect(xsValue).to.be.deep.equal(xs);
118 |
119 | xsValue = xsValue.data1.concat(xsValue.data2).sort();
120 |
121 | chart.$.main.selectAll(`.${$AXIS.axisX} .tick tspan`).each(function(v, i) {
122 | expect(+this.textContent).to.be.equal(xsValue[i]);
123 | });
124 | });
125 | });
126 | });
127 |
--------------------------------------------------------------------------------
/src/module/worker.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | import {window} from "./browser";
6 |
7 | // Store blob in memory
8 | const blob = {};
9 |
10 | /**
11 | * Get Object URL
12 | * @param {function} fn Function to be executed in worker
13 | * @param {Array} depsFn Dependency functions to run given function(fn).
14 | * @returns {string}
15 | * @private
16 | */
17 | function getObjectURL(fn: Function, depsFn?: Function[]): string {
18 | const fnString = fn.toString();
19 | const key = fnString.replace(/(function|[\s\W\n])/g, "").substring(0, 15);
20 |
21 | if (!(key in blob)) {
22 | // Web Worker body
23 | blob[key] = new window.Blob([
24 | `${depsFn?.map(String).join(";") ?? ""}
25 |
26 | self.onmessage=function({data}) {
27 | const result = (${fnString}).apply(null, data);
28 | self.postMessage(result);
29 | };`
30 | ], {
31 | type: "text/javascript"
32 | });
33 | }
34 |
35 | return window.URL.createObjectURL(blob[key]);
36 | }
37 |
38 | /**
39 | * Get WebWorker instance
40 | * @param {string} src URL object as string
41 | * @returns {object} WebWorker instance
42 | * @private
43 | */
44 | export function getWorker(src) {
45 | const worker = new window.Worker(src);
46 |
47 | // handle error
48 | worker.onerror = function(e) {
49 | // eslint-disable-next-line no-console
50 | console.error ? console.error(e) : console.log(e);
51 | };
52 |
53 | return worker;
54 | }
55 |
56 | /**
57 | * Create and run on Web Worker
58 | * @param {boolean} useWorker Use Web Worker
59 | * @param {function} fn Function to be executed in worker
60 | * @param {function} callback Callback function to receive result from worker
61 | * @param {Array} depsFn Dependency functions to run given function(fn).
62 | * @returns {object}
63 | * @example
64 | * const worker = runWorker(function(arg) {
65 | * // do some tasks...
66 | * console.log("param:", A(arg));
67 | *
68 | * return 1234;
69 | * }, function(data) {
70 | * // callback after worker is done
71 | * console.log("result:", data);
72 | * },
73 | * [function A(){}]
74 | * );
75 | *
76 | * worker(11111);
77 | * @private
78 | */
79 | export function runWorker(
80 | useWorker = true,
81 | fn: Function,
82 | callback: Function,
83 | depsFn?: Function[]
84 | ): Function {
85 | let runFn = function(...args) {
86 | const res = fn(...args);
87 |
88 | callback(res);
89 | };
90 |
91 | if (window.Worker && useWorker) {
92 | const src = getObjectURL(fn, depsFn);
93 | const worker = getWorker(src);
94 |
95 | runFn = function(...args) {
96 | // trigger worker
97 | worker.postMessage(args);
98 |
99 | // listen worker
100 | worker.onmessage = function(e) {
101 | // release object URL from memory
102 | window.URL.revokeObjectURL(src);
103 |
104 | return callback(e.data);
105 | };
106 |
107 | // return new Promise((resolve, reject) => {
108 | // worker.onmessage = ({data}) => resolve(data);
109 | // worker.onerror = reject;
110 | // });
111 | };
112 | }
113 |
114 | return runFn;
115 | }
116 |
--------------------------------------------------------------------------------
/src/module/Cache.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017 ~ present NAVER Corp.
3 | * billboard.js project is licensed under the MIT license
4 | */
5 | import type {DataRow} from "../../types/types";
6 | import {isString, isValue} from "./util";
7 |
8 | /**
9 | * Constant for cache key
10 | * - NOTE: Prefixed with '$', will be resetted when .load() is called
11 | * @private
12 | */
13 | export const KEY = {
14 | bubbleBaseLength: "$baseLength",
15 | colorPattern: "__colorPattern__",
16 | dataMinMax: "$dataMinMax",
17 | dataTotalSum: "$dataTotalSum",
18 | dataTotalPerIndex: "$totalPerIndex",
19 | legendItemTextBox: "legendItemTextBox",
20 | radarPoints: "$radarPoints",
21 | radarTextWidth: "$radarTextWidth",
22 | setOverOut: "setOverOut",
23 | callOverOutForTouch: "callOverOutForTouch",
24 | textRect: "textRect"
25 | };
26 |
27 | export default class Cache {
28 | private cache = {};
29 |
30 | /**
31 | * Add cache
32 | * @param {string} key Cache key
33 | * @param {string|number|boolean|object|Array|function|null|undefined} value Value to be stored
34 | * @param {boolean} isDataType Weather the cache is data typed '{id:'data', id_org: 'data', values: [{x:0, index:0,...}, ...]}'
35 | * @returns {string|number|boolean|object|Array|function|null|undefined} Added data value
36 | * @private
37 | */
38 | add(key: string, value, isDataType = false) {
39 | this.cache[key] = isDataType ? this.cloneTarget(value) : value;
40 | return this.cache[key];
41 | }
42 |
43 | /**
44 | * Remove cache
45 | * @param {string|Array} key Cache key
46 | * @private
47 | */
48 | remove(key: string | string[]) {
49 | (isString(key) ? [key] : key)
50 | .forEach(v => delete this.cache[v]);
51 | }
52 |
53 | /**
54 | * Get cahce
55 | * @param {string|Array} key Cache key
56 | * @param {boolean} isDataType Weather the cache is data typed '{id:'data', id_org: 'data', values: [{x:0, index:0,...}, ...]}'
57 | * @returns {string|number|boolean|object|Array|function|null} Cached value
58 | * @private
59 | */
60 | get(key: string | string[], isDataType = false): any | null {
61 | // when is isDataType, key should be string array
62 | if (isDataType && Array.isArray(key)) {
63 | const targets: any[] = [];
64 |
65 | for (let i = 0, id; (id = key[i]); i++) {
66 | if (id in this.cache) {
67 | targets.push(this.cloneTarget(this.cache[id]));
68 | }
69 | }
70 |
71 | return targets;
72 | } else {
73 | const value = this.cache[key as string];
74 |
75 | return isValue(value) ? value : null;
76 | }
77 | }
78 |
79 | /**
80 | * Reset cached data
81 | * @param {boolean} all true: reset all data, false: reset only '$' prefixed key data
82 | * @private
83 | */
84 | reset(all?: boolean): void {
85 | const $$ = this;
86 |
87 | for (const x in $$.cache) {
88 | // reset the prefixed '$' key(which is internal use data) only.
89 | if (all || /^\$/.test(x)) {
90 | $$.cache[x] = null;
91 | }
92 | }
93 | }
94 |
95 | /**
96 | * Clone data target object
97 | * @param {object} target Data object
98 | * @returns {object}
99 | * @private
100 | */
101 | cloneTarget(target: DataRow): DataRow {
102 | return {
103 | id: target.id,
104 | id_org: target.id_org,
105 | values: target.values.map(d => ({x: d.x, value: d.value, id: d.id}))
106 | };
107 | }
108 | }
109 |
--------------------------------------------------------------------------------
/src/Plugin/bubblecompare/index.ts:
--------------------------------------------------------------------------------
1 | import {select as d3Select} from "d3-selection";
2 | import Plugin from "../Plugin";
3 |
4 | /**
5 | * Bubble compare diagram plugin.
6 | * Compare data 3-dimensional ways: x-axis, y-axis & bubble-size.
7 | * - **NOTE:**
8 | * - Plugins aren't built-in. Need to be loaded or imported to be used.
9 | * - Non required modules from billboard.js core, need to be installed separately.
10 | * - **Required modules:**
11 | * - [d3-selection](https://github.com/d3/d3-selection)
12 | * @class plugin-bubblecompare
13 | * @requires d3-selection
14 | * @param {object} options bubble compare plugin options
15 | * @augments Plugin
16 | * @returns {BubbleCompare}
17 | * @example
18 | * // Plugin must be loaded before the use.
19 | *
20 | *
21 | * var chart = bb.generate({
22 | * data: {
23 | * columns: [ ... ],
24 | * type: "bubble"
25 | * }
26 | * ...
27 | * plugins: [
28 | * new bb.plugin.bubblecompare({
29 | * minR: 11,
30 | * maxR: 74,
31 | * expandScale: 1.1
32 | * }),
33 | * ]
34 | * });
35 | * @example
36 | * import {bb} from "billboard.js";
37 | * import BubbleCompare from "billboard.js/dist/billboardjs-plugin-bubblecompare";
38 | *
39 | * bb.generate({
40 | * plugins: [
41 | * new BubbleCompare({ ... })
42 | * ]
43 | * })
44 | */
45 |
46 | export default class BubbleCompare extends Plugin {
47 | static version = `0.0.1`;
48 | public $$;
49 |
50 | constructor(options) {
51 | super(options);
52 |
53 | return this;
54 | }
55 |
56 | $init(): void {
57 | const {$$} = this;
58 |
59 | $$.findClosest = this.findClosest.bind(this);
60 | $$.getBubbleR = this.getBubbleR.bind(this);
61 | $$.pointExpandedR = this.pointExpandedR.bind(this);
62 | }
63 |
64 | pointExpandedR(d): number {
65 | const baseR = this.getBubbleR(d);
66 | const {expandScale = 1} = this.options;
67 |
68 | BubbleCompare.raiseFocusedBubbleLayer(d);
69 | this.changeCursorPoint();
70 |
71 | return baseR * expandScale;
72 | }
73 |
74 | static raiseFocusedBubbleLayer(d): void {
75 | d.raise && d3Select(d.node().parentNode.parentNode).raise();
76 | }
77 |
78 | changeCursorPoint(): void {
79 | this.$$.$el.eventRect.style("cursor", "pointer");
80 | }
81 |
82 | findClosest(values, pos): number {
83 | const {$$} = this;
84 |
85 | return values
86 | .filter(v => v && !$$.isBarType(v.id))
87 | .reduce((acc, cur) => {
88 | const d = $$.dist(cur, pos);
89 |
90 | return d < this.getBubbleR(cur) ? cur : acc;
91 | }, 0);
92 | }
93 |
94 | getBubbleR(d): number {
95 | const {minR, maxR} = this.options;
96 | const curVal = this.getZData(d);
97 |
98 | if (!curVal) return minR;
99 |
100 | const [min, max] = this.$$.data.targets.reduce(
101 | ([accMin, accMax], cur) => {
102 | const val = this.getZData(cur.values[0]);
103 |
104 | return [Math.min(accMin, val), Math.max(accMax, val)];
105 | },
106 | [10000, 0]
107 | );
108 | const size = min > 0 && max === min ? 0 : curVal / max;
109 |
110 | return Math.abs(size) * (maxR - minR) + minR;
111 | }
112 |
113 | getZData(d): number {
114 | return this.$$.isBubbleZType(d) ? this.$$.getBubbleZData(d.value, "z") : d.value;
115 | }
116 | }
117 |
--------------------------------------------------------------------------------