fix:(core): Scatter points fix (carbon-design-system#703)

* chore(angular): add angular 9 dependency versions to peerDependencies

* fix(core): fix scatter points color and opacity

fix carbon-design-system#469

* fix theming for scatter points

Co-authored-by: Eliad Moosavi <iliadmoosavi@gmail.com>

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

@@ -144,7 +144,7 @@ export class Scatter extends Component {
 	styleCircles(selection: Selection<any, any, any, any>, animate: boolean) {
 		// Chart options mixed with the internal configurations
 		const options = this.model.getOptions();
-		const { filled } = options.points;
+		const { filled, fillOpacity } = options.points;
 		const { cartesianScales, transitions } = this.services;
 
 		const { groupMapsTo } = options.data;
@@ -210,7 +210,7 @@ export class Scatter extends Component {
 					);
 				}
 			})
-			.attr("fill-opacity", filled ? 0.2 : 1)
+			.attr("fill-opacity", filled ? fillOpacity : 1)
 			.attr("stroke", (d) =>
 				this.model.getStrokeColor(
 					d[groupMapsTo],

packages/core/src/styles/graphs/_scatter-stacked.scss

@@ -0,0 +1,10 @@
+g.#{$prefix}--#{$charts-prefix}--scatter-stacked {
+	circle.dot.unfilled {
+		fill: $ui-01;
+		stroke-width: 1.5;
+	}
+
+	circle.dot.threshold-anomaly {
+		stroke-width: 3;
+	}
+}

packages/core/src/styles/graphs/index.scss

@@ -2,5 +2,6 @@
 @import "./bubble";
 @import "./line";
 @import "./scatter";
+@import "./scatter-stacked";
 @import "./radar";
 @import "./gauge";