Merge branch 'master' of https://github.com/carbon-design-system/carb…

…on-charts into feat-scatter-custompoints

CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.27.0](https://github.com/IBM/carbon-charts/compare/v0.26.1...v0.27.0) (2020-01-20)
+
+
+### Bug Fixes
+
+* **chart:** update isLegendEnabled instead of isEnabled ([d413a8c](https://github.com/IBM/carbon-charts/commit/d413a8c))
+* **enabled:** rename visible to enabled ([ac4862f](https://github.com/IBM/carbon-charts/commit/ac4862f))
+* **lint:** whitespace tslint issue ([53216f5](https://github.com/IBM/carbon-charts/commit/53216f5))
+
+
+### Features
+
+* **chart:** legend.visible = false to hide the legend ([6461128](https://github.com/IBM/carbon-charts/commit/6461128))
+
+
+
+
+
+## [0.26.1](https://github.com/IBM/carbon-charts/compare/v0.26.0...v0.26.1) (2020-01-20)
+
+
+### Bug Fixes
+
+* **axis:** better support small time scales ([8cfa595](https://github.com/IBM/carbon-charts/commit/8cfa595))
+* **axis:** fix lint issue ([debeed9](https://github.com/IBM/carbon-charts/commit/debeed9))
+* **axis:** fix linting errors ([f810d4a](https://github.com/IBM/carbon-charts/commit/f810d4a))
+* **axis:** remove confusing timeRangeToExtend property ([0456e24](https://github.com/IBM/carbon-charts/commit/0456e24))
+* **config:** add additional property to control extension ([2da3404](https://github.com/IBM/carbon-charts/commit/2da3404))
+* **configuration:** fix default baseBarChart options ([1a6dcef](https://github.com/IBM/carbon-charts/commit/1a6dcef))
+* **yarn:** error in the lock file for date-fns ([396e9c4](https://github.com/IBM/carbon-charts/commit/396e9c4))
+
+
+
+
+
 # [0.26.0](https://github.com/IBM/carbon-charts/compare/v0.25.0...v0.26.0) (2020-01-16)
 
 

lerna.json

@@ -12,5 +12,5 @@
 			]
 		}
 	},
-	"version": "0.26.0"
+	"version": "0.27.0"
 }

packages/angular/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.27.0](https://github.com/IBM/carbon-charts/compare/v0.26.1...v0.27.0) (2020-01-20)
+
+**Note:** Version bump only for package @carbon/charts-angular
+
+
+
+
+
+## [0.26.1](https://github.com/IBM/carbon-charts/compare/v0.26.0...v0.26.1) (2020-01-20)
+
+**Note:** Version bump only for package @carbon/charts-angular
+
+
+
+
+
 # [0.26.0](https://github.com/IBM/carbon-charts/compare/v0.25.0...v0.26.0) (2020-01-16)
 
 **Note:** Version bump only for package @carbon/charts-angular

packages/angular/package.json

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

packages/core/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.27.0](https://github.com/IBM/carbon-charts/compare/v0.26.1...v0.27.0) (2020-01-20)
+
+
+### Bug Fixes
+
+* **chart:** update isLegendEnabled instead of isEnabled ([d413a8c](https://github.com/IBM/carbon-charts/commit/d413a8c))
+* **enabled:** rename visible to enabled ([ac4862f](https://github.com/IBM/carbon-charts/commit/ac4862f))
+* **lint:** whitespace tslint issue ([53216f5](https://github.com/IBM/carbon-charts/commit/53216f5))
+
+
+### Features
+
+* **chart:** legend.visible = false to hide the legend ([6461128](https://github.com/IBM/carbon-charts/commit/6461128))
+
+
+
+
+
+## [0.26.1](https://github.com/IBM/carbon-charts/compare/v0.26.0...v0.26.1) (2020-01-20)
+
+
+### Bug Fixes
+
+* **axis:** better support small time scales ([8cfa595](https://github.com/IBM/carbon-charts/commit/8cfa595))
+* **axis:** fix lint issue ([debeed9](https://github.com/IBM/carbon-charts/commit/debeed9))
+* **axis:** fix linting errors ([f810d4a](https://github.com/IBM/carbon-charts/commit/f810d4a))
+* **axis:** remove confusing timeRangeToExtend property ([0456e24](https://github.com/IBM/carbon-charts/commit/0456e24))
+* **config:** add additional property to control extension ([2da3404](https://github.com/IBM/carbon-charts/commit/2da3404))
+* **configuration:** fix default baseBarChart options ([1a6dcef](https://github.com/IBM/carbon-charts/commit/1a6dcef))
+
+
+
+
+
 # [0.26.0](https://github.com/IBM/carbon-charts/compare/v0.25.0...v0.26.0) (2020-01-16)
 
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/charts",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "Carbon charting components",
   "main": "./bundle.js",
   "module": "./index.js",
@@ -47,6 +47,7 @@
     "@carbon/utils-position": "1.1.1",
     "babel-polyfill": "6.26.0",
     "carbon-components": "10.5.0",
+    "date-fns": "2.8.1",
     "lodash-es": "4.17.15",
     "resize-observer-polyfill": "1.5.0"
   },

packages/core/src/axis-chart.ts

@@ -61,23 +61,27 @@ export class AxisChart extends Chart {
 			}
 		};
 
+		const isLegendEnabled = this.model.getOptions().legend.enabled !== false;
+
 		// Decide the position of the legend in reference to the chart
 		let fullFrameComponentDirection = LayoutDirection.COLUMN;
-		const legendPosition = Tools.getProperty(this.model.getOptions(), "legend", "position");
-		if (legendPosition === LegendPositions.LEFT) {
-			fullFrameComponentDirection = LayoutDirection.ROW;
+		if (isLegendEnabled) {
+			const legendPosition = Tools.getProperty(this.model.getOptions(), "legend", "position");
+			if (legendPosition === LegendPositions.LEFT) {
+				fullFrameComponentDirection = LayoutDirection.ROW;
 
-			if (!this.model.getOptions().legend.orientation) {
-				this.model.getOptions().legend.orientation = LegendOrientations.VERTICAL;
-			}
-		} else if (legendPosition === LegendPositions.RIGHT) {
-			fullFrameComponentDirection = LayoutDirection.ROW_REVERSE;
+				if (!this.model.getOptions().legend.orientation) {
+					this.model.getOptions().legend.orientation = LegendOrientations.VERTICAL;
+				}
+			} else if (legendPosition === LegendPositions.RIGHT) {
+				fullFrameComponentDirection = LayoutDirection.ROW_REVERSE;
 
-			if (!this.model.getOptions().legend.orientation) {
-				this.model.getOptions().legend.orientation = LegendOrientations.VERTICAL;
+				if (!this.model.getOptions().legend.orientation) {
+					this.model.getOptions().legend.orientation = LegendOrientations.VERTICAL;
+				}
+			} else if (legendPosition === LegendPositions.BOTTOM) {
+				fullFrameComponentDirection = LayoutDirection.COLUMN_REVERSE;
 			}
-		} else if (legendPosition === LegendPositions.BOTTOM) {
-			fullFrameComponentDirection = LayoutDirection.COLUMN_REVERSE;
 		}
 
 		const legendSpacerComponent = {
@@ -98,7 +102,7 @@ export class AxisChart extends Chart {
 					this.model,
 					this.services,
 					[
-						legendComponent,
+						...(isLegendEnabled ? [ legendComponent ] : [ ]),
 						legendSpacerComponent,
 						graphFrameComponent
 					],

packages/core/src/chart.ts

@@ -149,24 +149,27 @@ export class Chart {
 			}
 		};
 
+		const isLegendEnabled = this.model.getOptions().legend.enabled !== false;
 		// TODORF - REUSE BETWEEN AXISCHART & CHART
 		// Decide the position of the legend in reference to the chart
 		let fullFrameComponentDirection = LayoutDirection.COLUMN;
-		const legendPosition = Tools.getProperty(this.model.getOptions(), "legend", "position");
-		if (legendPosition === "left") {
-			fullFrameComponentDirection = LayoutDirection.ROW;
+		if (isLegendEnabled) {
+				const legendPosition = Tools.getProperty(this.model.getOptions(), "legend", "position");
+			if (legendPosition === "left") {
+				fullFrameComponentDirection = LayoutDirection.ROW;
 
-			if (!this.model.getOptions().legend.orientation) {
-				this.model.getOptions().legend.orientation = LegendOrientations.VERTICAL;
-			}
-		} else if (legendPosition === "right") {
-			fullFrameComponentDirection = LayoutDirection.ROW_REVERSE;
+				if (!this.model.getOptions().legend.orientation) {
+					this.model.getOptions().legend.orientation = LegendOrientations.VERTICAL;
+				}
+			} else if (legendPosition === "right") {
+				fullFrameComponentDirection = LayoutDirection.ROW_REVERSE;
 
-			if (!this.model.getOptions().legend.orientation) {
-				this.model.getOptions().legend.orientation = LegendOrientations.VERTICAL;
+				if (!this.model.getOptions().legend.orientation) {
+					this.model.getOptions().legend.orientation = LegendOrientations.VERTICAL;
+				}
+			} else if (legendPosition === "bottom") {
+				fullFrameComponentDirection = LayoutDirection.COLUMN_REVERSE;
 			}
-		} else if (legendPosition === "bottom") {
-			fullFrameComponentDirection = LayoutDirection.COLUMN_REVERSE;
 		}
 
 		const legendSpacerComponent = {
@@ -187,7 +190,7 @@ export class Chart {
 					this.model,
 					this.services,
 					[
-						legendComponent,
+						...(isLegendEnabled ? [ legendComponent ] : [ ]),
 						legendSpacerComponent,
 						graphFrameComponent
 					],

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

@@ -11,6 +11,23 @@ import { scaleBand, scaleLinear, scaleTime, scaleLog, scaleOrdinal } from "d3-sc
 import { axisBottom, axisLeft, axisRight, axisTop } from "d3-axis";
 import { min, extent } from "d3-array";
 import { timeFormatDefaultLocale } from "d3-time-format";
+import {
+	differenceInYears,
+	addYears,
+	subYears,
+	differenceInMonths,
+	addMonths,
+	subMonths,
+	differenceInDays,
+	addDays,
+	subDays,
+	differenceInHours,
+	addHours,
+	subHours,
+	differenceInMinutes,
+	addMinutes,
+	subMinutes
+} from "date-fns";
 
 export class Axis extends Component {
 	type = "axes";
@@ -130,17 +147,27 @@ export class Axis extends Component {
 		}
 
 		if (axisOptions.scaleType === ScaleTypes.TIME) {
-			if (Tools.getProperty(options, "timeScale", "addSpaceOnEdges")) {
-				// TODO - Need to account for non-day incrementals as well
-				const [startDate, endDate] = domain;
-				startDate.setDate(startDate.getDate() - 1);
-				endDate.setDate(endDate.getDate() + 1);
+			const spaceToAddToEdges = Tools.getProperty(options, "timeScale", "addSpaceOnEdges");
+			if (spaceToAddToEdges) {
+				const startDate = new Date(domain[0]);
+				const endDate = new Date(domain[1]);
+				if (differenceInYears(endDate, startDate) > 1) {
+					return [subYears(startDate, spaceToAddToEdges), addYears(endDate, spaceToAddToEdges)];
+				}
+				if (differenceInMonths(endDate, startDate) > 1) {
+					return [subMonths(startDate, spaceToAddToEdges), addMonths(endDate, spaceToAddToEdges)];
+				}
+				if (differenceInDays(endDate, startDate) > 1) {
+					return [subDays(startDate, spaceToAddToEdges), addDays(endDate, spaceToAddToEdges)];
+				} else if (differenceInHours(endDate, startDate) > 1) {
+					return [subHours(startDate, spaceToAddToEdges), addHours(endDate, spaceToAddToEdges)];
+				} else if (differenceInMinutes(endDate, startDate) > 1) {
+					return [subMinutes(startDate, spaceToAddToEdges), addMinutes(endDate, spaceToAddToEdges)];
+				}
+				// Other
+				return [startDate, endDate];
 			}
 
-			return [
-				new Date(domain[0]),
-				new Date(domain[1])
-			];
 		}
 
 		// TODO - Work with design to improve logic

packages/core/src/configuration.ts

@@ -33,6 +33,7 @@ import {
 export const legend: LegendOptions = {
 	position: LegendPositions.BOTTOM,
 	clickable: true,
+	enabled: true,
 	items: {
 		status: {
 			ACTIVE: 1,
@@ -95,7 +96,7 @@ export const barChartTooltip: BarTooltipOptions = Tools.merge({}, axisChartToolt
 const axes: AxesOptions = { };
 
 const timeScale: TimeScaleOptions = {
-	addSpaceOnEdges: true
+	addSpaceOnEdges: 1,
 };
 
 /**
@@ -131,7 +132,7 @@ const baseBarChart: BarChartOptions = Tools.merge({}, axisChart, {
 		maxWidth: 16
 	},
 	timeScale: Tools.merge(timeScale, {
-		addSpaceOnEdges: true
+		addSpaceOnEdges: 1
 	} as TimeScaleOptions),
 	tooltip: barChartTooltip
 } as BarChartOptions);

packages/core/src/interfaces/axis-scales.ts

@@ -56,5 +56,5 @@ export interface AxesOptions {
  * customize time series scales
  */
 export interface TimeScaleOptions {
-	addSpaceOnEdges?: boolean;
+	addSpaceOnEdges?: number;
 }

packages/core/src/interfaces/components.ts

@@ -33,6 +33,10 @@ export interface LegendOptions {
 	 * the clickability of legend items
 	 */
 	clickable?: boolean;
+	/**
+	 * is the legend visible or not
+	 */
+	enabled?: boolean;
 	items?: {
 		status?: {
 			ACTIVE?: Number;

packages/react/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.27.0](https://github.com/IBM/carbon-charts/compare/v0.26.1...v0.27.0) (2020-01-20)
+
+**Note:** Version bump only for package @carbon/charts-react
+
+
+
+
+
+## [0.26.1](https://github.com/IBM/carbon-charts/compare/v0.26.0...v0.26.1) (2020-01-20)
+
+**Note:** Version bump only for package @carbon/charts-react
+
+
+
+
+
 # [0.26.0](https://github.com/IBM/carbon-charts/compare/v0.25.0...v0.26.0) (2020-01-16)
 
 **Note:** Version bump only for package @carbon/charts-react

packages/react/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@carbon/charts-react",
-	"version": "0.26.0",
+	"version": "0.27.0",
 	"description": "Carbon charting components for React",
 	"main": "./bundle.js",
 	"scripts": {
@@ -44,7 +44,7 @@
 	},
 	"homepage": "https://github.com/IBM/carbon-charts#readme",
 	"dependencies": {
-		"@carbon/charts": "^0.26.0"
+		"@carbon/charts": "^0.27.0"
 	},
 	"peerDependencies": {
 		"react": "^16.6.3",