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 <[email protected]>
linhenry0417 · Jul 23, 2020 · 5dd3bb6 · 5dd3bb6
1 parent 377c39f
commit 5dd3bb6
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/packages/core/src/components/graphs/scatter.ts b/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],

diff --git a/packages/core/src/styles/graphs/_scatter-stacked.scss b/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;
+	}
+}
diff --git a/packages/core/src/styles/graphs/index.scss b/packages/core/src/styles/graphs/index.scss
@@ -2,5 +2,6 @@
 @import "./bubble";
 @import "./line";
 @import "./scatter";
+@import "./scatter-stacked";
 @import "./radar";
 @import "./gauge";