Merge branch 'test-tooltip' into title-truncation

carbon-design-system · Oct 28, 2019 · e515734 · e515734
2 parents a4bda5e + 0d04b04
commit e515734
Show file tree

Hide file tree

Showing 23 changed files with 220 additions and 62 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.24](https://github.com/IBM/carbon-charts/compare/v0.16.23...v0.16.24) (2019-10-25)
+
+
+### Bug Fixes
+
+* **core, react, angular, vue:** default width & height to 100%, and call setOptions on option change ([db251b4](https://github.com/IBM/carbon-charts/commit/db251b4))
+
+
+
+
+
+## [0.16.23](https://github.com/IBM/carbon-charts/compare/v0.16.22...v0.16.23) (2019-10-25)
+
+**Note:** Version bump only for package @carbon/charts-monorepo
+
+
+
+
+
+## [0.16.22](https://github.com/IBM/carbon-charts/compare/v0.16.21...v0.16.22) (2019-10-25)
+
+**Note:** Version bump only for package @carbon/charts-monorepo
+
+
+
+
+
 ## [0.16.21](https://github.com/IBM/carbon-charts/compare/v0.16.20...v0.16.21) (2019-10-24)
 
 

diff --git a/lerna.json b/lerna.json
@@ -12,5 +12,5 @@
 			]
 		}
 	},
-	"version": "0.16.21"
+	"version": "0.16.24"
 }
diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md
@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.24](https://github.com/IBM/carbon-charts/compare/v0.16.23...v0.16.24) (2019-10-25)
+
+
+### Bug Fixes
+
+* **core, react, angular, vue:** default width & height to 100%, and call setOptions on option change ([db251b4](https://github.com/IBM/carbon-charts/commit/db251b4))
+
+
+
+
+
+## [0.16.23](https://github.com/IBM/carbon-charts/compare/v0.16.22...v0.16.23) (2019-10-25)
+
+**Note:** Version bump only for package @carbon/charts-angular
+
+
+
+
+
+## [0.16.22](https://github.com/IBM/carbon-charts/compare/v0.16.21...v0.16.22) (2019-10-25)
+
+**Note:** Version bump only for package @carbon/charts-angular
+
+
+
+
+
 ## [0.16.21](https://github.com/IBM/carbon-charts/compare/v0.16.20...v0.16.21) (2019-10-24)
 
 

diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -1,7 +1,7 @@
 {
 	"$schema": "../../node_modules/ng-packagr/package.schema.json",
 	"name": "@carbon/charts-angular",
-	"version": "0.16.21",
+	"version": "0.16.24",
 	"description": "Carbon charting components for Angular",
 	"main": "index.js",
 	"scripts": {
@@ -40,7 +40,7 @@
 		"scss"
 	],
 	"dependencies": {
-		"@carbon/charts": "^0.16.21"
+		"@carbon/charts": "^0.16.24"
 	},
 	"peerDependencies": {
 		"@angular/common": "^6.0.0 || ^7.0.0",

diff --git a/packages/angular/src/base-chart.component.ts b/packages/angular/src/base-chart.component.ts
@@ -29,7 +29,7 @@ export class BaseChart implements AfterViewInit, OnInit {
 		this._data = newData;
 
 		if (dataExistsAlready) {
-			this.chart.setData(newData);
+			this.chart.model.setData(newData);
 		}
 	}
 
@@ -47,7 +47,7 @@ export class BaseChart implements AfterViewInit, OnInit {
 		this._options = newOptions;
 
 		if (optionsExistAlready) {
-			this.chart.setOptions(newOptions);
+			this.chart.model.setOptions(newOptions);
 		}
 	}
 
@@ -85,15 +85,11 @@ export class BaseChart implements AfterViewInit, OnInit {
 		// Width prop is mandatory for the wrappers
 		if (this.width) {
 			this.options.width = this.width;
-		} else if (!this.options.width) {
-			console.error("Missing `width` Input!");
 		}
 
 		// Height prop is mandatory for the wrappers
 		if (this.height) {
 			this.options.height = this.height;
-		} else if (!this.options.height) {
-			console.error("Missing `height` Input!");
 		}
 	}
 

diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.24](https://github.com/IBM/carbon-charts/compare/v0.16.23...v0.16.24) (2019-10-25)
+
+
+### Bug Fixes
+
+* **core, react, angular, vue:** default width & height to 100%, and call setOptions on option change ([db251b4](https://github.com/IBM/carbon-charts/commit/db251b4))
+
+
+
+
+
+## [0.16.23](https://github.com/IBM/carbon-charts/compare/v0.16.22...v0.16.23) (2019-10-25)
+
+**Note:** Version bump only for package @carbon/charts
+
+
+
+
+
+## [0.16.22](https://github.com/IBM/carbon-charts/compare/v0.16.21...v0.16.22) (2019-10-25)
+
+**Note:** Version bump only for package @carbon/charts
+
+
+
+
+
 ## [0.16.21](https://github.com/IBM/carbon-charts/compare/v0.16.20...v0.16.21) (2019-10-24)
 
 

diff --git a/packages/core/demo/chart-types.ts b/packages/core/demo/chart-types.ts
@@ -43,6 +43,11 @@ export const chartTypes = [
 		options: simpleBarOptions,
 		data: simpleBarData
 	},
+	{
+		id: "scatter-time-series",
+		options: scatterTimeSeriesOptions,
+		data: scatterTimeSeriesData
+	},
 	{
 		id: "scatter",
 		options: scatterOptions,
@@ -63,6 +68,16 @@ export const chartTypes = [
 		options: stackedBarTimeSeriesOptions,
 		data: stackedBarTimeSeriesData
 	},
+	{
+		id: "pie",
+		options: pieOptions,
+		data: pieData
+	},
+	{
+		id: "donut",
+		options: donutOptions,
+		data: donutData
+	},
 	{
 		id: "line-time-series",
 		options: lineTimeSeriesOptions,
@@ -82,20 +97,5 @@ export const chartTypes = [
 		id: "line-step-time-series",
 		options: stepTimeSeriesOptions,
 		data: stepTimeSeriesData
-	},
-	{
-		id: "pie",
-		options: pieOptions,
-		data: pieData
-	},
-	{
-		id: "donut",
-		options: donutOptions,
-		data: donutData
-	},
-	{
-		id: "scatter-time-series",
-		options: scatterTimeSeriesOptions,
-		data: scatterTimeSeriesData
 	}
 ];
diff --git a/packages/core/demo/demo-data/line.ts b/packages/core/demo/demo-data/line.ts
@@ -321,13 +321,10 @@ export const scatterTimeSeriesData = lineTimeSeriesData;
 
 export const scatterTimeSeriesOptions = {
 	title: "Scatter (time series)",
-	legend: {
-		position: "top"
-	},
 	axes: {
 		bottom: {
-			title: "2018 Annual Sales Figures",
-			type: "labels",
+			title: "2019 Annual Sales Figures",
+			type: "time",
 			secondary: true
 		},
 		left: {

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@carbon/charts",
-  "version": "0.16.21",
+  "version": "0.16.24",
   "description": "Carbon charting components",
   "main": "./bundle.js",
   "module": "./index.js",

diff --git a/packages/core/src/components/essentials/tooltip-bar.ts b/packages/core/src/components/essentials/tooltip-bar.ts
@@ -31,23 +31,25 @@ export class TooltipBar extends Tooltip {
 
 				const hoveredElement = e.detail.hoveredElement.node();
 
-				// if there is a provided tooltip HTML function
-				if (Tools.getProperty(this.model.getOptions(), "tooltip", "customHTML")) {
-					tooltipTextContainer.html(this.model.getOptions().tooltip.customHTML(hoveredElement));
-				} else if (e.detail.multidata) {
+				let defaultTooltip;
+				if (e.detail.multidata) {
 					// multi tooltip
-					tooltipTextContainer.html(this.getMultilineTooltipHTML(e.detail.multidata));
-					// Position the tooltip
-					this.positionTooltip();
+					defaultTooltip = this.getMultilineTooltipHTML(e.detail.multidata);
 				} else {
-					const data = e.detail.hoveredElement.datum();
-					tooltipTextContainer.html(this.getTooltipHTML(data));
-
-					const position = this.getTooltipPosition(hoveredElement);
+					defaultTooltip = this.getTooltipHTML(e.detail.hoveredElement.datum());
+				}
 
-					// Position the tooltip relative to the bars
-					this.positionTooltip(position);
+				// if there is a provided tooltip HTML function call it and pass the defaultTooltip
+				if (Tools.getProperty(this.model.getOptions(), "tooltip", "customHTML")) {
+					tooltipTextContainer.html(this.model.getOptions().tooltip.customHTML(hoveredElement, defaultTooltip));
+				} else {
+					// default tooltip
+					tooltipTextContainer.html(defaultTooltip);
 				}
+
+				const position = this.getTooltipPosition(hoveredElement);
+				// Position the tooltip relative to the bars
+				this.positionTooltip(e.detail.multidata ? undefined : position );
 				// Fade in
 				this.tooltip.classed("hidden", false);
 			}

diff --git a/packages/core/src/components/essentials/tooltip.ts b/packages/core/src/components/essentials/tooltip.ts
@@ -43,15 +43,21 @@ export class Tooltip extends Component {
 
 				let data = select(event.target).datum() as any;
 
-				// if there is a provided tooltip HTML function
-				if (Tools.getProperty(this.model.getOptions(), "tooltip", "customHTML")) {
-					tooltipTextContainer.html(this.model.getOptions().tooltip.customHTML(data));
-				} else if (e.detail.multidata) {
+				// Generate default tooltip
+				let defaultTooltip;
+				if (e.detail.multidata) {
 					// multi tooltip
 					data = e.detail.multidata;
-					tooltipTextContainer.html(this.getMultilineTooltipHTML(data));
+					defaultTooltip = this.getMultilineTooltipHTML(data);
+				} else {
+					defaultTooltip = this.getTooltipHTML(data);
+				}
+				// if there is a provided tooltip HTML function call it
+				if (Tools.getProperty(this.model.getOptions(), "tooltip", "customHTML")) {
+					tooltipTextContainer.html(this.model.getOptions().tooltip.customHTML(data, defaultTooltip));
 				} else {
-					tooltipTextContainer.html(this.getTooltipHTML(data));
+					// Use default tooltip
+					tooltipTextContainer.html(defaultTooltip);
 				}
 
 				// Position the tooltip

diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts
@@ -98,6 +98,8 @@ export const timeScale: TimeScaleOptions = {
  * Base chart options common to any chart
  */
 const chart: BaseChartOptions = {
+	width: "100%",
+	height: "100%",
 	resizable: true,
 	theme: ChartTheme.DEFAULT,
 	tooltip: baseTooltip,

diff --git a/packages/core/src/interfaces/charts.ts b/packages/core/src/interfaces/charts.ts
@@ -21,11 +21,11 @@ export interface BaseChartOptions {
 	/**
 	 * Optionally specify a width for the chart
 	 */
-	width?: number;
+	width?: number | string;
 	/**
 	 * Optionally specify a height for the chart
 	 */
-	height?: number;
+	height?: number | string;
 	/**
 	 * Optional function to generate the fill color based on datasetLabel, label, and/or value
 	 */

diff --git a/packages/core/src/interfaces/components.ts b/packages/core/src/interfaces/components.ts
@@ -55,6 +55,7 @@ export interface TooltipOptions {
 	formatter?: Function;
 	/**
 	 * custom function for returning tooltip HTML
+	 * passed an array or object with the data, and then the default tooltip markup
 	 */
 	customHTML?: Function;
 	/**

diff --git a/packages/core/webpack.config.js b/packages/core/webpack.config.js
@@ -80,7 +80,7 @@ module.exports = {
 	devServer: {
 		contentBase: "./demo",
 		host: "0.0.0.0",
-		port: 9001,
+		port: process.env.PORT || 9001,
 		historyApiFallback: true,
 		disableHostCheck: true
 	}

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.24](https://github.com/IBM/carbon-charts/compare/v0.16.23...v0.16.24) (2019-10-25)
+
+
+### Bug Fixes
+
+* **core, react, angular, vue:** default width & height to 100%, and call setOptions on option change ([db251b4](https://github.com/IBM/carbon-charts/commit/db251b4))
+
+
+
+
+
+## [0.16.23](https://github.com/IBM/carbon-charts/compare/v0.16.22...v0.16.23) (2019-10-25)
+
+**Note:** Version bump only for package @carbon/charts-react
+
+
+
+
+
+## [0.16.22](https://github.com/IBM/carbon-charts/compare/v0.16.21...v0.16.22) (2019-10-25)
+
+**Note:** Version bump only for package @carbon/charts-react
+
+
+
+
+
 ## [0.16.21](https://github.com/IBM/carbon-charts/compare/v0.16.20...v0.16.21) (2019-10-24)
 
 **Note:** Version bump only for package @carbon/charts-react

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@carbon/charts-react",
-	"version": "0.16.21",
+	"version": "0.16.24",
 	"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.16.21"
+		"@carbon/charts": "^0.16.24"
 	},
 	"peerDependencies": {
 		"react": "^16.6.3",
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,5 +12,5 @@ @@
     			]
     		}
     	},
-    	"version": "0.16.21"
+    	"version": "0.16.24"
     }