feat: enable or disable scatter dot on charts except scatter chart (#769

)

* feat: enable or disable scatter dot on charts except scatter chart

* refactor: rename variable

* fix: always enable scatter dot for bubble chart

* refactor: have enabled option within points

packages/core/src/components/graphs/scatter-stacked.ts

@@ -1,11 +1,18 @@
 // 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");
+		if (!this.configs.alwaysEnableScatterDot) {
+			if (!isScatterEnabled) {
+				return;
+			}
+		}
 		// Grab container SVG
 		const svg = this.getContainerSVG({ withinChartClip: true });
 

packages/core/src/components/graphs/scatter.ts

@@ -51,6 +51,11 @@ export class Scatter extends Component {
 	}
 
 	render(animate: boolean) {
+		const isScatterEnabled = Tools.getProperty(this.model.getOptions(), "points", "enabled") ||  Tools.getProperty(this.model.getOptions(), "bubble", "enabled");
+		if (!isScatterEnabled) {
+			return;
+		}
+
 		// Grab container SVG
 		const svg = this.getContainerSVG({ withinChartClip: true });
 

packages/core/src/configuration.ts

@@ -197,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);
 
@@ -222,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
  */
@@ -250,7 +252,8 @@ const bubbleChart: BubbleChartOptions = Tools.merge({}, axisChart, {
 				(smallerChartDimension * 25) / 400
 			];
 		},
-		fillOpacity: 0.2
+		fillOpacity: 0.2,
+		enabled: true
 	}
 } as BubbleChartOptions);
 

packages/core/src/interfaces/charts.ts

@@ -147,6 +147,7 @@ export interface ScatterChartOptions extends AxisChartOptions {
 		radius: number;
 		fillOpacity?: number;
 		filled?: boolean;
+		enabled?: boolean;
 	};
 }
 
@@ -171,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;
 	};
 }