Merge branch 'master' of https://github.com/JennChao/carbon-charts in…

…to linearGradient

* 'master' of https://github.com/JennChao/carbon-charts:
  v0.37.0
  Merge pull request carbon-design-system#780 from natashadecoste/fix-meter-max-val
  feat: enable or disable scatter dot on charts except scatter chart (carbon-design-system#769)
  feat: create options for tick rotation (carbon-design-system#770)

CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.37.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.4...v0.37.0) (2020-09-11)
+
+
+### Features
+
+* create options for tick rotation ([#770](https://github.com/carbon-design-system/carbon-charts/issues/770)) ([4063c8a](https://github.com/carbon-design-system/carbon-charts/commit/4063c8a0f4d441589116759b32f2b214fad46154))
+* enable or disable scatter dot on charts except scatter chart ([#769](https://github.com/carbon-design-system/carbon-charts/issues/769)) ([3131942](https://github.com/carbon-design-system/carbon-charts/commit/313194217318719152d6a14c2a3cba957b8fc009))
+
+
+
+
+
 ## [0.36.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.3...v0.36.4) (2020-09-10)
 
 **Note:** Version bump only for package @carbon/charts-monorepo

lerna.json

@@ -12,5 +12,5 @@
 			]
 		}
 	},
-	"version": "0.36.4"
+	"version": "0.37.0"
 }

packages/angular/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.37.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.4...v0.37.0) (2020-09-11)
+
+**Note:** Version bump only for package @carbon/charts-angular
+
+
+
+
+
 ## [0.36.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.3...v0.36.4) (2020-09-10)
 
 **Note:** Version bump only for package @carbon/charts-angular

packages/angular/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@carbon/charts-angular",
-	"version": "0.36.4",
+	"version": "0.37.0",
 	"description": "Carbon charting components for Angular",
 	"main": "index.js",
 	"scripts": {
@@ -40,7 +40,7 @@
 		"scss"
 	],
 	"dependencies": {
-		"@carbon/charts": "^0.36.4"
+		"@carbon/charts": "^0.37.0"
 	},
 	"peerDependencies": {
 		"@angular/common": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",

packages/core/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.37.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.4...v0.37.0) (2020-09-11)
+
+
+### Features
+
+* create options for tick rotation ([#770](https://github.com/carbon-design-system/carbon-charts/issues/770)) ([4063c8a](https://github.com/carbon-design-system/carbon-charts/commit/4063c8a0f4d441589116759b32f2b214fad46154))
+* enable or disable scatter dot on charts except scatter chart ([#769](https://github.com/carbon-design-system/carbon-charts/issues/769)) ([3131942](https://github.com/carbon-design-system/carbon-charts/commit/313194217318719152d6a14c2a3cba957b8fc009))
+
+
+
+
+
 ## [0.36.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.3...v0.36.4) (2020-09-10)
 
 **Note:** Version bump only for package @carbon/charts

packages/core/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@carbon/charts",
-	"version": "0.36.4",
+	"version": "0.37.0",
 	"description": "Carbon charting components",
 	"main": "./bundle.js",
 	"module": "./index.js",

packages/core/src/components/axes/axis.ts

@@ -10,6 +10,7 @@ import {
 import { Tools } from "../../tools";
 import { ChartModel } from "../../model";
 import { DOMUtils } from "../../services";
+import { TickRotations } from "../../interfaces/enums";
 import * as Configuration from "../../configuration";
 import {
 	computeTimeIntervalName,
@@ -29,9 +30,6 @@ export class Axis extends Component {
 	scale: any;
 	scaleType: ScaleTypes;
 
-	// Track whether zoom domain needs to update in a render
-	zoomDomainChanging = false;
-
 	constructor(model: ChartModel, services: any, configs?: any) {
 		super(model, services, configs);
 
@@ -40,31 +38,8 @@ export class Axis extends Component {
 		}
 
 		this.margins = this.configs.margins;
-		this.init();
-	}
-
-	init() {
-		this.services.events.addEventListener(
-			Events.ZoomBar.SELECTION_START,
-			this.handleZoomBarSelectionStart
-		);
-		this.services.events.addEventListener(
-			Events.ZoomBar.SELECTION_END,
-			this.handleZoomBarSelectionEnd
-		);
 	}
 
-	handleZoomBarSelectionStart = () => {
-		this.zoomDomainChanging = true;
-	};
-
-	handleZoomBarSelectionEnd = () => {
-		this.zoomDomainChanging = false;
-		// need another update after zoom bar selection is completed
-		// to make sure the tick rotation is calculated correctly
-		this.services.events.dispatchEvent(Events.Model.UPDATE);
-	};
-
 	render(animate = true) {
 		const { position: axisPosition } = this.configs;
 		const options = this.model.getOptions();
@@ -439,41 +414,56 @@ export class Axis extends Component {
 			axisPosition === AxisPositions.BOTTOM ||
 			axisPosition === AxisPositions.TOP
 		) {
-			let rotateTicks = false;
-
-			// If we're dealing with a discrete scale type
-			// We're able to grab the spacing between the ticks
-			if (scale.step) {
-				const textNodes = invisibleAxisRef
-					.selectAll("g.tick text")
-					.nodes();
-
-				// If any ticks are any larger than the scale step size
-				rotateTicks = textNodes.some(
-					(textNode) =>
-						DOMUtils.getSVGElementSize(textNode, { useBBox: true })
-							.width >= scale.step()
-				);
-			} else {
-				// When dealing with a continuous scale
-				// We need to calculate an estimated size of the ticks
-				const minTickSize =
-					Tools.getProperty(
-						axisOptions,
-						"ticks",
-						"rotateIfSmallerThan"
-					) || Configuration.axis.ticks.rotateIfSmallerThan;
-				const ticksNumber = isTimeScaleType
-					? axis.tickValues().length
-					: scale.ticks().length;
-				const estimatedTickSize = width / ticksNumber / 2;
-				rotateTicks = isTimeScaleType
-					? estimatedTickSize < minTickSize * 2 // datetime tick could be very long
-					: estimatedTickSize < minTickSize;
+			let shouldRotateTicks = false;
+			// user could decide if tick rotation is required during zoom domain changing
+			const tickRotation = Tools.getProperty(
+				axisOptions,
+				"ticks",
+				"rotation"
+			);
+
+			if (tickRotation === TickRotations.ALWAYS) {
+				shouldRotateTicks = true;
+			} else if (tickRotation === TickRotations.NEVER) {
+				shouldRotateTicks = false;
+			} else if (!tickRotation || tickRotation === TickRotations.AUTO) {
+				// if the option is not set or set to AUTO
+
+				// depending on if tick rotation is necessary by calculating space
+				// If we're dealing with a discrete scale type
+				// We're able to grab the spacing between the ticks
+				if (scale.step) {
+					const textNodes = invisibleAxisRef
+						.selectAll("g.tick text")
+						.nodes();
+
+					// If any ticks are any larger than the scale step size
+					shouldRotateTicks = textNodes.some(
+						(textNode) =>
+							DOMUtils.getSVGElementSize(textNode, {
+								useBBox: true
+							}).width >= scale.step()
+					);
+				} else {
+					// When dealing with a continuous scale
+					// We need to calculate an estimated size of the ticks
+					const minTickSize =
+						Tools.getProperty(
+							axisOptions,
+							"ticks",
+							"rotateIfSmallerThan"
+						) || Configuration.axis.ticks.rotateIfSmallerThan;
+					const ticksNumber = isTimeScaleType
+						? axis.tickValues().length
+						: scale.ticks().length;
+					const estimatedTickSize = width / ticksNumber / 2;
+					shouldRotateTicks = isTimeScaleType
+						? estimatedTickSize < minTickSize * 2 // datetime tick could be very long
+						: estimatedTickSize < minTickSize;
+				}
 			}
 
-			// always rotate ticks if zoomDomain is changing to avoid rotation flips during zoomDomain changing
-			if (rotateTicks || this.zoomDomainChanging) {
+			if (shouldRotateTicks) {
 				if (!isNumberOfTicksProvided) {
 					axis.ticks(
 						this.getNumberOfFittingTicks(
@@ -690,15 +680,5 @@ export class Axis extends Component {
 			.on("mouseover", null)
 			.on("mousemove", null)
 			.on("mouseout", null);
-
-		// Remove zoom bar event listeners
-		this.services.events.removeEventListener(
-			Events.ZoomBar.SELECTION_START,
-			this.handleZoomBarSelectionStart
-		);
-		this.services.events.removeEventListener(
-			Events.ZoomBar.SELECTION_END,
-			this.handleZoomBarSelectionEnd
-		);
 	}
 }

packages/core/src/components/essentials/title-meter.ts

@@ -73,7 +73,7 @@ export class MeterTitle extends Title {
 
 		// create a group for the icon/inner path
 		const statusGroup = DOMUtils.appendOrSelect(svg, `g.status-indicator`)
-			.classed(`status--${status}`, status !== null)
+			.attr("class", status !== null ? `status-indicator status--${status}` : "")
 			.attr("transform", `translate(${containerWidth - radius}, 0)`);
 
 		const data = status ? [status] : [];

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

@@ -330,7 +330,7 @@ export class Gauge extends Component {
 		// Draw the arrow with status
 		const status = Tools.getProperty(options, "gauge", "status");
 		DOMUtils.appendOrSelect(deltaArrow, "polygon.gauge-delta-arrow")
-			.classed(`status--${status}`, status !== null)
+			.attr("class", status !== null ? `gauge-delta-arrow status--${status}` : "")
 			.attr("fill", () => (status === null ? "currentColor" : null))
 			.attr("points", self.getArrow(delta));
 

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

@@ -33,10 +33,10 @@ export class Meter extends Component {
 			.attr("height", Tools.getProperty(options, "meter", "height"));
 
 		// value larger than 100 will display as 100% on meter chart
-		const dataset = data.value <= 100 ? data : (data["value"] = 100);
+		const maximumBarWidth = data.value >= 100;
 
 		// rect with the value binded
-		const value = svg.selectAll("rect.value").data([dataset]);
+		const value = svg.selectAll("rect.value").data([data]);
 
 		// if user provided a color for the bar, we dont want to attach a status class
 		const userProvidedScale = Tools.getProperty(options, "color", "scale");
@@ -50,14 +50,14 @@ export class Meter extends Component {
 			.attr("x", 0)
 			.attr("y", 0)
 			.attr("height", Tools.getProperty(options, "meter", "height"))
-			.classed(`status--${status}`, status != null && !userProvidedScale)
+			.attr("class", status != null && !userProvidedScale ? `value status--${status}` : "")
 			.transition(
 				this.services.transitions.getTransition(
 					"meter-bar-update",
 					animate
 				)
 			)
-			.attr("width", (d) => xScale(d.value))
+			.attr("width", (d) => maximumBarWidth ? xScale(100) : xScale(d.value))
 			.attr("fill", (d) => self.model.getFillColor(d[groupMapsTo]))
 			// a11y
 			.attr("role", Roles.GRAPHICS_SYMBOL)
@@ -69,11 +69,11 @@ export class Meter extends Component {
 
 		// update the peak if it is less than the value, it should be equal to the value
 		const updatedPeak =
-			peakValue !== null && peakValue < dataset.value
-				? dataset.value
+			peakValue !== null && peakValue < data.value
+				? data.value
 				: peakValue;
 		// dont display peak if there isnt one
-		const peakData = updatedPeak === null ? [] : [updatedPeak];
+		const peakData = updatedPeak === null || maximumBarWidth ? [] : [updatedPeak];
 
 		// if a peak is supplied within the domain, we want to render it
 		const peak = svg.selectAll("line.peak").data(peakData);

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

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