feat(core, angular, react, vue): Update chart width & height through …

…options

packages/angular/src/bar-chart-grouped.component.ts

@@ -14,18 +14,15 @@ import { GroupedBarChart } from "@carbon/charts";
  */
 @Component({
 	selector: "ibm-grouped-bar-chart",
-	template: `
-		<div #nChart class="ibm-chart-container">
-		</div>
-	`
+	template: ``
 })
 export class GroupedBarChartComponent extends BaseChart implements AfterViewInit {
 	/**
-	 * Runs after view init to create a chart, attach it to `chartRef` and draw it.
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
 	 */
 	ngAfterViewInit() {
 		this.chart = new GroupedBarChart(
-			this.chartRef.nativeElement,
+			this.elementRef.nativeElement,
 			{
 				data: this.data,
 				options: this.options

packages/angular/src/bar-chart-simple.component.ts

@@ -14,18 +14,15 @@ import { SimpleBarChart } from "@carbon/charts";
  */
 @Component({
 	selector: "ibm-simple-bar-chart",
-	template: `
-		<div #nChart class="ibm-chart-container">
-		</div>
-	`
+	template: ``
 })
 export class SimpleBarChartComponent extends BaseChart implements AfterViewInit {
 	/**
-	 * Runs after view init to create a chart, attach it to `chartRef` and draw it.
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
 	 */
 	ngAfterViewInit() {
 		this.chart = new SimpleBarChart(
-			this.chartRef.nativeElement,
+			this.elementRef.nativeElement,
 			{
 				data: this.data,
 				options: this.options

packages/angular/src/bar-chart-stacked.component.ts

@@ -14,18 +14,15 @@ import { StackedBarChart } from "@carbon/charts";
  */
 @Component({
 	selector: "ibm-stacked-bar-chart",
-	template: `
-		<div #nChart class="ibm-chart-container">
-		</div>
-	`
+	template: ``
 })
 export class StackedBarChartComponent extends BaseChart implements AfterViewInit {
 	/**
-	 * Runs after view init to create a chart, attach it to `chartRef` and draw it.
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
 	 */
 	ngAfterViewInit() {
 		this.chart = new StackedBarChart(
-			this.chartRef.nativeElement,
+			this.elementRef.nativeElement,
 			{
 				data: this.data,
 				options: this.options

packages/angular/src/base-chart.component.ts

@@ -3,7 +3,8 @@ import {
 	Input,
 	ViewChild,
 	OnInit,
-	AfterViewInit
+	AfterViewInit,
+	ElementRef
 } from "@angular/core";
 
 /**
@@ -13,12 +14,11 @@ import {
  */
 @Component({
 	selector: "ibm-base-chart",
-	template: `
-		<div #nChart class="ibm-chart-container">
-		</div>
-	`
+	template: ``
 })
 export class BaseChart implements AfterViewInit, OnInit {
+	constructor(protected elementRef: ElementRef) {}
+
 	/**
 	 * Data passed to charts library for displaying
 	 */

packages/angular/src/donut-chart.component.ts

@@ -14,26 +14,21 @@ import { DonutChart } from "@carbon/charts";
  */
 @Component({
 	selector: "ibm-donut-chart",
-	template: `
-		<div #nChart class="ibm-chart-container">
-		</div>
-	`
+	template: ``
 })
 export class DonutChartComponent extends BaseChart implements AfterViewInit {
 	/**
-	 * Runs after view init to create a chart, attach it to `chartRef` and draw it.
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
 	 */
 	ngAfterViewInit() {
 		this.chart = new DonutChart(
-			this.chartRef.nativeElement,
+			this.elementRef.nativeElement,
 			{
 				data: this.data,
 				options: this.options
 			}
 		);
 
 		Object.assign(this, this.chart);
-
-		// TODO - Fix issues with center updating
 	}
 }

packages/angular/src/line-chart.component.ts

@@ -14,18 +14,15 @@ import { LineChart } from "@carbon/charts";
  */
 @Component({
 	selector: "ibm-line-chart",
-	template: `
-		<div #nChart class="ibm-chart-container">
-		</div>
-	`
+	template: ``
 })
 export class LineChartComponent extends BaseChart implements AfterViewInit {
 	/**
-	 * Runs after view init to create a chart, attach it to `chartRef` and draw it.
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
 	 */
 	ngAfterViewInit() {
 		this.chart = new LineChart(
-			this.chartRef.nativeElement,
+			this.elementRef.nativeElement,
 			{
 				data: this.data,
 				options: this.options

packages/angular/src/pie-chart.component.ts

@@ -14,18 +14,15 @@ import { PieChart } from "@carbon/charts";
  */
 @Component({
 	selector: "ibm-pie-chart",
-	template: `
-		<div #nChart class="ibm-chart-container">
-		</div>
-	`
+	template: ``
 })
 export class PieChartComponent extends BaseChart implements AfterViewInit {
 	/**
-	 * Runs after view init to create a chart, attach it to `chartRef` and draw it.
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
 	 */
 	ngAfterViewInit() {
 		this.chart = new PieChart(
-			this.chartRef.nativeElement,
+			this.elementRef.nativeElement,
 			{
 				data: this.data,
 				options: this.options

packages/angular/src/scatter-chart.component.ts

@@ -14,18 +14,15 @@ import { ScatterChart } from "@carbon/charts";
  */
 @Component({
 	selector: "ibm-scatter-chart",
-	template: `
-		<div #nChart class="ibm-chart-container">
-		</div>
-	`
+	template: ``
 })
 export class ScatterChartComponent extends BaseChart implements AfterViewInit {
 	/**
-	 * Runs after view init to create a chart, attach it to `chartRef` and draw it.
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
 	 */
 	ngAfterViewInit() {
 		this.chart = new ScatterChart(
-			this.chartRef.nativeElement,
+			this.elementRef.nativeElement,
 			{
 				data: this.data,
 				options: this.options

packages/angular/stories/commons.ts

@@ -1,5 +1,5 @@
 export const addWidthAndHeight = options => {
-	options.height = 500;
+	options.height = "500px";
 	options.width = "100%";
 
 	return options;

packages/core/demo/demo-data/bar.ts

@@ -58,9 +58,6 @@ export const groupedBarOptions = {
 		bottom: {
 			scaleType: "labels",
 			secondary: true,
-		},
-		top: {
-			scaleType: "labels",
 		}
 	}
 };

packages/core/demo/index.ts

@@ -185,6 +185,8 @@ chartTypes.forEach(type => {
 				break;
 		}
 
+		// Add `height` to the chart options
+		type.options.height = "500px";
 
 		// Initialize chart
 		charts[type.id] = new classToInitialize(

packages/core/src/chart.ts

@@ -22,7 +22,6 @@ import { Tools } from "./tools";
 import {
 	DOMUtils,
 	Events,
-	Themes,
 	Transitions
 } from "./services/index";
 
@@ -31,8 +30,7 @@ export class Chart {
 	services: any = {
 		domUtils: DOMUtils,
 		events: Events,
-		transitions: Transitions,
-		themes: Themes
+		transitions: Transitions
 	};
 	model: ChartModel = new ChartModel(this.services);
 
@@ -82,6 +80,12 @@ export class Chart {
 			return;
 		}
 
+		// Update all services
+		Object.keys(this.services).forEach(serviceName => {
+			const serviceObj = this.services[serviceName];
+			serviceObj.update();
+		});
+
 		// Render all components
 		this.components.forEach(component => component.render(animate));
 

packages/core/src/interfaces/charts.ts

@@ -21,11 +21,11 @@ export interface BaseChartOptions {
 	/**
 	 * Optionally specify a width for the chart
 	 */
-	width?: number | string;
+	width?: string;
 	/**
 	 * Optionally specify a height for the chart
 	 */
-	height?: number | string;
+	height?: string;
 	/**
 	 * Optional function to generate the fill color based on datasetLabel, label, and/or value
 	 */

packages/core/src/services/essentials/dom-utils.ts

@@ -119,6 +119,8 @@ export class DOMUtils extends Service {
 	}
 
 	protected svg: Element;
+	protected width: string;
+	protected height: string;
 
 	init() {
 		// Add width & height to the chart holder if necessary, and add a classname
@@ -132,23 +134,32 @@ export class DOMUtils extends Service {
 		}
 	}
 
+	update() {
+		this.styleHolderElement();
+	}
+
 	styleHolderElement() {
 		const holderElement = this.getHolder() as HTMLElement;
-		const { width, height } = this.model.getOptions();
 
 		// Add class to chart holder
 		select(this.getHolder()).classed(`${settings.prefix}--chart-holder`, true);
 
-		// If width exists in options
-		if (width) {
+		// In order for resize events to not clash with these updates
+		// We'll check if the width & height values passed in options
+		// Have changed, before setting them to the holder
+		const { width, height } = this.model.getOptions();
+		if (width !== this.width) {
 			// Apply formatted width attribute to chart
-			holderElement.style.width = Tools.formatWidthHeightValues(width);
+			holderElement.style.width = width;
+
+			this.width = width;
 		}
 
-		// If height exists in options
-		if (height) {
-			// Apply formatted height attribute to chart
-			holderElement.style.height = Tools.formatWidthHeightValues(height);
+		if (height !== this.height) {
+			// Apply formatted width attribute to chart
+			holderElement.style.height = height;
+
+			this.height = height;
 		}
 	}
 

packages/core/src/services/index.ts

@@ -1,7 +1,6 @@
 // Essentials
 export * from "./essentials/dom-utils";
 export * from "./essentials/events";
-export * from "./essentials/themes";
 export * from "./essentials/transitions";
 
 // MISC

packages/core/src/styles/_chart-holder.scss

@@ -1,4 +1,5 @@
 .#{$prefix}--chart-holder {
-	background-color: $ui-background;
 	position: relative;
+	display: block;
+	background-color: $ui-background;
 }

packages/core/src/tools.ts

@@ -78,18 +78,6 @@ export namespace Tools {
 		};
 	}
 
-	export function formatWidthHeightValues(value) {
-		const stringValue = value.toString();
-
-		// If the value provided contains any letters
-		// Return it the same way
-		if (stringValue.match(/[a-z]/i)) {
-			return stringValue;
-		}
-
-		return stringValue + "px";
-	}
-
 	/**
 	 * Capitalizes first letter of a string
 	 *

packages/react/src/base-chart.js

@@ -16,16 +16,6 @@ export default class BaseChart extends React.Component {
 		this.data = props.data || {};
 		this.options = props.options || {};
 
-		// Width prop is mandatory for the wrappers
-		if (props.width) {
-			this.options.width = props.width;
-		}
-
-		// Height prop is mandatory for the wrappers
-		if (props.height) {
-			this.options.height = props.height;
-		}
-
 		Object.assign(this, this.chart);
 	}
 

packages/react/stories/commons.js

@@ -1,5 +1,5 @@
 export const addWidthAndHeight = options => {
-	options.height = 500;
+	options.height = "500px";
 	options.width = "100%";
 
 	return options;

packages/vue/stories/commons.js

@@ -1,5 +1,5 @@
 export const addWidthAndHeight = options => {
-	options.height = 500;
+	options.height = "500px";
 	options.width = "100%";
 
 	return options;