From e434491dc72bcc3c1c0e263ef8e20465c12a0c97 Mon Sep 17 00:00:00 2001 From: JennChao Date: Thu, 27 Aug 2020 11:35:33 +0800 Subject: [PATCH 1/4] feat: enable or disable scatter dot on charts except scatter chart --- packages/core/src/charts/scatter.ts | 4 +++- .../core/src/components/graphs/scatter-stacked.ts | 11 +++++++++++ packages/core/src/components/graphs/scatter.ts | 7 +++++++ packages/core/src/configuration.ts | 1 + packages/core/src/interfaces/charts.ts | 4 ++++ 5 files changed, 26 insertions(+), 1 deletion(-) diff --git a/packages/core/src/charts/scatter.ts b/packages/core/src/charts/scatter.ts index 94b0205d35..122aa4009e 100644 --- a/packages/core/src/charts/scatter.ts +++ b/packages/core/src/charts/scatter.ts @@ -44,7 +44,9 @@ export class ScatterChart extends AxisChart { new TwoDimensionalAxes(this.model, this.services), new Grid(this.model, this.services), new Ruler(this.model, this.services), - new Scatter(this.model, this.services), + new Scatter(this.model, this.services, { + ignoreScatterDisabled: true + }), new Skeleton(this.model, this.services, { skeleton: Skeletons.GRID }) diff --git a/packages/core/src/components/graphs/scatter-stacked.ts b/packages/core/src/components/graphs/scatter-stacked.ts index c788e81672..e706ca78c7 100644 --- a/packages/core/src/components/graphs/scatter-stacked.ts +++ b/packages/core/src/components/graphs/scatter-stacked.ts @@ -1,11 +1,22 @@ // Internal Imports import { Scatter } from "./scatter"; import { Roles } from "../../interfaces"; +import { Tools } from "../../tools"; export class StackedScatter extends Scatter { type = "scatter-stacked"; render(animate: boolean) { + const isScatterEnabled = Tools.getProperty(this.model.getOptions(), "scatterDotEnabled"); + console.log("!!! this.configs.ignoreScatterDisabled: ", this.configs.ignoreScatterDisabled); + if (!this.configs.ignoreScatterDisabled) { + console.log("!!! in first if"); + if (!isScatterEnabled) { + console.log("!!! in second if"); + console.log("!!! this.model.getOptions(): ", this.model.getOptions()); + return; + } + } // Grab container SVG const svg = this.getContainerSVG({ withinChartClip: true }); diff --git a/packages/core/src/components/graphs/scatter.ts b/packages/core/src/components/graphs/scatter.ts index 94879bf3d3..08c657251b 100644 --- a/packages/core/src/components/graphs/scatter.ts +++ b/packages/core/src/components/graphs/scatter.ts @@ -51,6 +51,13 @@ export class Scatter extends Component { } render(animate: boolean) { + const isScatterEnabled = Tools.getProperty(this.model.getOptions(), "scatterDotEnabled"); + if (!this.configs.ignoreScatterDisabled) { + if (!isScatterEnabled) { + return; + } + } + // Grab container SVG const svg = this.getContainerSVG({ withinChartClip: true }); diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts index 44848794b4..d2ad4626b3 100644 --- a/packages/core/src/configuration.ts +++ b/packages/core/src/configuration.ts @@ -146,6 +146,7 @@ const axisChart: AxisChartOptions = Tools.merge({}, chart, { axes, timeScale, grid, + scatterDotEnabled: true, zoomBar: { top: { enabled: false, diff --git a/packages/core/src/interfaces/charts.ts b/packages/core/src/interfaces/charts.ts index 112f9dd07c..81f58f79a4 100644 --- a/packages/core/src/interfaces/charts.ts +++ b/packages/core/src/interfaces/charts.ts @@ -117,6 +117,10 @@ export interface AxisChartOptions extends BaseChartOptions { * zoombar configuration */ zoomBar?: ZoomBarsOptions; + /** + * enable or disable scatter dot + */ + scatterDotEnabled?: boolean; } /** From f55700cce1f159521b08f6a5a706f66eb21d8383 Mon Sep 17 00:00:00 2001 From: JennChao Date: Fri, 28 Aug 2020 17:15:55 +0800 Subject: [PATCH 2/4] refactor: rename variable --- packages/core/src/charts/scatter.ts | 2 +- packages/core/src/components/graphs/scatter-stacked.ts | 6 +----- packages/core/src/components/graphs/scatter.ts | 2 +- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/core/src/charts/scatter.ts b/packages/core/src/charts/scatter.ts index 122aa4009e..a68216b5de 100644 --- a/packages/core/src/charts/scatter.ts +++ b/packages/core/src/charts/scatter.ts @@ -45,7 +45,7 @@ export class ScatterChart extends AxisChart { new Grid(this.model, this.services), new Ruler(this.model, this.services), new Scatter(this.model, this.services, { - ignoreScatterDisabled: true + alwaysEnableScatterDot: true }), new Skeleton(this.model, this.services, { skeleton: Skeletons.GRID diff --git a/packages/core/src/components/graphs/scatter-stacked.ts b/packages/core/src/components/graphs/scatter-stacked.ts index e706ca78c7..85ac329003 100644 --- a/packages/core/src/components/graphs/scatter-stacked.ts +++ b/packages/core/src/components/graphs/scatter-stacked.ts @@ -8,12 +8,8 @@ export class StackedScatter extends Scatter { render(animate: boolean) { const isScatterEnabled = Tools.getProperty(this.model.getOptions(), "scatterDotEnabled"); - console.log("!!! this.configs.ignoreScatterDisabled: ", this.configs.ignoreScatterDisabled); - if (!this.configs.ignoreScatterDisabled) { - console.log("!!! in first if"); + if (!this.configs.alwaysEnableScatterDot) { if (!isScatterEnabled) { - console.log("!!! in second if"); - console.log("!!! this.model.getOptions(): ", this.model.getOptions()); return; } } diff --git a/packages/core/src/components/graphs/scatter.ts b/packages/core/src/components/graphs/scatter.ts index 08c657251b..e02c9e488a 100644 --- a/packages/core/src/components/graphs/scatter.ts +++ b/packages/core/src/components/graphs/scatter.ts @@ -52,7 +52,7 @@ export class Scatter extends Component { render(animate: boolean) { const isScatterEnabled = Tools.getProperty(this.model.getOptions(), "scatterDotEnabled"); - if (!this.configs.ignoreScatterDisabled) { + if (!this.configs.alwaysEnableScatterDot) { if (!isScatterEnabled) { return; } From 77ebcf32b9cf47694bc7edfed89779ca4e92f0e1 Mon Sep 17 00:00:00 2001 From: JennChao Date: Mon, 7 Sep 2020 18:12:45 +0800 Subject: [PATCH 3/4] fix: always enable scatter dot for bubble chart --- packages/core/src/charts/bubble.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/core/src/charts/bubble.ts b/packages/core/src/charts/bubble.ts index e90e212481..97e28a702f 100644 --- a/packages/core/src/charts/bubble.ts +++ b/packages/core/src/charts/bubble.ts @@ -44,7 +44,9 @@ export class BubbleChart extends AxisChart { new TwoDimensionalAxes(this.model, this.services), new Grid(this.model, this.services), new Ruler(this.model, this.services), - new Bubble(this.model, this.services), + new Bubble(this.model, this.services, { + alwaysEnableScatterDot: true + }), new Skeleton(this.model, this.services, { skeleton: Skeletons.GRID }) From a141dfc7f54ca693169d1958d654dca7d3781664 Mon Sep 17 00:00:00 2001 From: JennChao Date: Fri, 11 Sep 2020 14:25:05 +0800 Subject: [PATCH 4/4] refactor: have enabled option within points --- packages/core/src/charts/bubble.ts | 4 +-- packages/core/src/charts/scatter.ts | 4 +-- .../core/src/components/graphs/scatter.ts | 8 ++--- packages/core/src/configuration.ts | 34 ++++++++++--------- packages/core/src/interfaces/charts.ts | 9 ++--- 5 files changed, 28 insertions(+), 31 deletions(-) diff --git a/packages/core/src/charts/bubble.ts b/packages/core/src/charts/bubble.ts index 97e28a702f..e90e212481 100644 --- a/packages/core/src/charts/bubble.ts +++ b/packages/core/src/charts/bubble.ts @@ -44,9 +44,7 @@ export class BubbleChart extends AxisChart { new TwoDimensionalAxes(this.model, this.services), new Grid(this.model, this.services), new Ruler(this.model, this.services), - new Bubble(this.model, this.services, { - alwaysEnableScatterDot: true - }), + new Bubble(this.model, this.services), new Skeleton(this.model, this.services, { skeleton: Skeletons.GRID }) diff --git a/packages/core/src/charts/scatter.ts b/packages/core/src/charts/scatter.ts index a68216b5de..94b0205d35 100644 --- a/packages/core/src/charts/scatter.ts +++ b/packages/core/src/charts/scatter.ts @@ -44,9 +44,7 @@ export class ScatterChart extends AxisChart { new TwoDimensionalAxes(this.model, this.services), new Grid(this.model, this.services), new Ruler(this.model, this.services), - new Scatter(this.model, this.services, { - alwaysEnableScatterDot: true - }), + new Scatter(this.model, this.services), new Skeleton(this.model, this.services, { skeleton: Skeletons.GRID }) diff --git a/packages/core/src/components/graphs/scatter.ts b/packages/core/src/components/graphs/scatter.ts index e1da4033d7..f1fa52f612 100644 --- a/packages/core/src/components/graphs/scatter.ts +++ b/packages/core/src/components/graphs/scatter.ts @@ -51,11 +51,9 @@ export class Scatter extends Component { } render(animate: boolean) { - const isScatterEnabled = Tools.getProperty(this.model.getOptions(), "scatterDotEnabled"); - if (!this.configs.alwaysEnableScatterDot) { - if (!isScatterEnabled) { - return; - } + const isScatterEnabled = Tools.getProperty(this.model.getOptions(), "points", "enabled") || Tools.getProperty(this.model.getOptions(), "bubble", "enabled"); + if (!isScatterEnabled) { + return; } // Grab container SVG diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts index 150275da67..42da444f03 100644 --- a/packages/core/src/configuration.ts +++ b/packages/core/src/configuration.ts @@ -150,7 +150,6 @@ const axisChart: AxisChartOptions = Tools.merge({}, chart, { axes, timeScale, grid, - scatterDotEnabled: true, zoomBar: { top: { enabled: false, @@ -198,14 +197,28 @@ const stackedBarChart: StackedBarChartOptions = Tools.merge({}, baseBarChart, { } as StackedBarOptions) } as BarChartOptions); +/** + * options specific to scatter charts + */ +const scatterChart: ScatterChartOptions = Tools.merge({}, axisChart, { + points: { + // default point radius to 4 + radius: 4, + fillOpacity: 0.3, + filled: true, + enabled: true + } +} as ScatterChartOptions); + /** * options specific to line charts */ -const lineChart: LineChartOptions = Tools.merge({}, axisChart, { +const lineChart: LineChartOptions = Tools.merge({}, scatterChart, { points: { // default point radius to 3 radius: 3, - filled: false + filled: false, + enabled: true } } as LineChartOptions); @@ -223,18 +236,6 @@ const areaChart: AreaChartOptions = Tools.merge({}, lineChart, { */ const stackedAreaChart = areaChart; -/** - * options specific to scatter charts - */ -const scatterChart: ScatterChartOptions = Tools.merge({}, axisChart, { - points: { - // default point radius to 4 - radius: 4, - fillOpacity: 0.3, - filled: true - } -} as ScatterChartOptions); - /** * options specific to bubble charts */ @@ -251,7 +252,8 @@ const bubbleChart: BubbleChartOptions = Tools.merge({}, axisChart, { (smallerChartDimension * 25) / 400 ]; }, - fillOpacity: 0.2 + fillOpacity: 0.2, + enabled: true } } as BubbleChartOptions); diff --git a/packages/core/src/interfaces/charts.ts b/packages/core/src/interfaces/charts.ts index 81f58f79a4..357bd8a8bb 100644 --- a/packages/core/src/interfaces/charts.ts +++ b/packages/core/src/interfaces/charts.ts @@ -117,10 +117,6 @@ export interface AxisChartOptions extends BaseChartOptions { * zoombar configuration */ zoomBar?: ZoomBarsOptions; - /** - * enable or disable scatter dot - */ - scatterDotEnabled?: boolean; } /** @@ -151,6 +147,7 @@ export interface ScatterChartOptions extends AxisChartOptions { radius: number; fillOpacity?: number; filled?: boolean; + enabled?: boolean; }; } @@ -175,6 +172,10 @@ export interface BubbleChartOptions extends AxisChartOptions { * Opacity of the fills used within each circle */ fillOpacity?: number; + /** + * enabled scatter dot or not + */ + enabled?: boolean; }; }