fix(core, react, angular, vue): default width & height to 100%, and c…

…all setOptions on option change
carbon-design-system · Oct 25, 2019 · db251b4 · db251b4
1 parent 7cf4db8
commit db251b4
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 14 deletions.
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/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/react/src/base-chart.js b/packages/react/src/base-chart.js
@@ -19,21 +19,18 @@ export default class BaseChart extends React.Component {
 		// Width prop is mandatory for the wrappers
 		if (props.width) {
 			this.options.width = props.width;
-		} else if (!this.options.width) {
-			console.error("Missing `width` prop!");
 		}
 
 		// Height prop is mandatory for the wrappers
 		if (props.height) {
 			this.options.height = props.height;
-		} else if (!this.options.height) {
-			console.error("Missing `height` prop!");
 		}
 
 		Object.assign(this, this.chart);
 	}
 
 	componentDidUpdate() {
-		this.chart.setData(this.props.data);
+		this.chart.model.setData(this.props.data);
+		this.chart.model.setOptions(this.props.options);
 	}
 }
diff --git a/packages/vue/src/ccv-base-chart.vue b/packages/vue/src/ccv-base-chart.vue
@@ -13,10 +13,16 @@ export default {
 	watch: {
 		data: {
 			handler: function(newData) {
-				this.coreChart.setData(newData);
+				this.coreChart.model.setData(newData);
 			},
 			deep: true,
 		},
+		options: {
+			handler: function(newOptions) {
+				this.coreChart.model.setOptions(newOptions);
+			},
+			deep: true,
+		}
 	},
 };
 </script>