From 455944e75038a4c301763100bd6a8385b510a396 Mon Sep 17 00:00:00 2001 From: Jae Sung Park Date: Wed, 21 Sep 2022 11:18:18 +0900 Subject: [PATCH] feat(api): Enhance .config() to return generation options Get generation options object from the API call Fix #2864 --- src/Chart/api/chart.ts | 14 +++++++++++--- src/ChartInternal/ChartInternal.ts | 5 +++-- src/config/Store/State.ts | 1 + src/config/config.ts | 8 +++++++- test/api/chart-spec.ts | 8 ++++++-- test/plugin/sparkline/sparkline-spec.ts | 2 +- types/chart.d.ts | 4 +++- 7 files changed, 32 insertions(+), 10 deletions(-) diff --git a/src/Chart/api/chart.ts b/src/Chart/api/chart.ts index 6e71893aa..7f2aa6d6b 100644 --- a/src/Chart/api/chart.ts +++ b/src/Chart/api/chart.ts @@ -142,7 +142,9 @@ export default { }, /** - * Get or set single config option value. + * Get or set config option value. + * - **NOTE:** for without parameter occasion + * - will return all specified generation options object only. (will exclude any other options not specified at the initialization) * @function config * @instance * @memberof Chart @@ -152,9 +154,13 @@ export default { * - **NOTE:** Doesn't guarantee work in all circumstances. It can be applied for limited options only. * @returns {*} * @example + * * // Getter * chart.config("gauge.max"); * + * // without any arguments, it returns generation config object + * chart.config(); // {data: { ... }, axis: { ... }, ...} + * * // Setter * chart.config("gauge.max", 100); * @@ -163,11 +169,11 @@ export default { */ config(name: string, value?: any, redraw?: boolean): any { const $$ = this.internal; - const {config} = $$; + const {config, state} = $$; const key = name?.replace(/\./g, "_"); let res; - if (key in config) { + if (name && key in config) { if (isDefined(value)) { config[key] = value; res = value; @@ -176,6 +182,8 @@ export default { } else { res = config[key]; } + } else { + res = state.orgConfig; } return res; diff --git a/src/ChartInternal/ChartInternal.ts b/src/ChartInternal/ChartInternal.ts index 885985701..96ca8b49f 100644 --- a/src/ChartInternal/ChartInternal.ts +++ b/src/ChartInternal/ChartInternal.ts @@ -468,8 +468,9 @@ export default class ChartInternal { } // Define g for chart area - main.append("g").attr("class", $COMMON.chart) - .attr("clip-path", state.clip.path); + main.append("g") + .classed($COMMON.chart, true) + .attr("clip-path", hasAxis ? state.clip.path : null); $$.callPluginHook("$init"); diff --git a/src/config/Store/State.ts b/src/config/Store/State.ts index f0bd33f11..8e0115466 100644 --- a/src/config/Store/State.ts +++ b/src/config/Store/State.ts @@ -127,6 +127,7 @@ export default class State { hasPositiveValue: true, orgAreaOpacity: "0.2", + orgConfig: {}, // user original genration config // ID strings hiddenTargetIds: [], diff --git a/src/config/config.ts b/src/config/config.ts index 1e0cd71eb..d280489c2 100644 --- a/src/config/config.ts +++ b/src/config/config.ts @@ -4,13 +4,14 @@ */ import {isDefined, isObjectType} from "../module/util"; import Options from "./Options/Options"; +import type {ChartOptions} from "../../types/options"; /** * Load configuration option * @param {object} config User's generation config value * @private */ -export function loadConfig(config: Options): void { +export function loadConfig(config: ChartOptions): void { const thisConfig: Options = this.config; let target; let keys; @@ -38,4 +39,9 @@ export function loadConfig(config: Options): void { thisConfig[key] = read; } }); + + // only should run in the ChartInternal context + if (this.api) { + this.state.orgConfig = config; + } } diff --git a/test/api/chart-spec.ts b/test/api/chart-spec.ts index a8b1b61e1..d3342e85a 100644 --- a/test/api/chart-spec.ts +++ b/test/api/chart-spec.ts @@ -116,7 +116,7 @@ describe("API chart", () => { expect(bb.instance.indexOf(chart) === -1).to.be.true; - const el = document.getElementById("chart"); + const el = document.getElementById("chart"); // should revert removing className and styles expect(el.classList.contains("bb")).to.be.false; @@ -221,7 +221,7 @@ describe("API chart", () => { it("check for the axis config update", () => { const axisYTick = chart.$.main.selectAll(`.${$AXIS.axisY} .tick`); - const expected = []; + const expected: {[key: string]: number}[] = []; // axis y tick is outer axisYTick.each(function() { @@ -253,5 +253,9 @@ describe("API chart", () => { expect(+tspan.getAttribute("x")).to.be.equal(Math.abs(expected[i].tspan)); }); }); + + it("should return generation options object.", () => { + expect(args).to.be.deep.equal(chart.config()); + }); }); }); diff --git a/test/plugin/sparkline/sparkline-spec.ts b/test/plugin/sparkline/sparkline-spec.ts index 97cc5acbe..abfffb0ae 100644 --- a/test/plugin/sparkline/sparkline-spec.ts +++ b/test/plugin/sparkline/sparkline-spec.ts @@ -96,7 +96,7 @@ describe("PLUGIN: SPARKLINE", () => { it("check for the dimension & tooltip", () => { const last = document.querySelectorAll(selector)[2]; - const {width, height} = last.querySelector(`.${$AREA.areas} path`).getBoundingClientRect(); + const {width, height} = last.querySelector(`.${$AREA.areas} path`)?.getBoundingClientRect() ?? {width:0, height: 0}; // chart element should occupy the whole dimension of given size expect({width, height}).to.be.deep.equal(args.size); diff --git a/types/chart.d.ts b/types/chart.d.ts index 3d2e6aa16..e5734ca8f 100644 --- a/types/chart.d.ts +++ b/types/chart.d.ts @@ -515,11 +515,13 @@ export interface Chart { /** * Get or set single config option value. + * - **NOTE:** + * - without parameter, will return all specified generation options object only. (will exclude any other options not specified at the initialization) * @param optionName The option key name. * @param value The value accepted for indicated option. * @param redraw Set to redraw with the new option changes. (NOTE: Doesn't guarantee work in all circumstances. It can be applied for limited options only) */ - config(optionName: string, value?: any, redraw?: boolean): any; + config(optionName?: string, value?: any, redraw?: boolean): any; } export interface GridOperations {