feat(core): addition of titles within svg chart

carbon-design-system · Jun 27, 2019 · 56380bb · 56380bb
1 parent d0df5bc
commit 56380bb
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 5 deletions.
diff --git a/packages/core/src/base-axis-chart.ts b/packages/core/src/base-axis-chart.ts
@@ -152,7 +152,7 @@ export class BaseAxisChart extends BaseChart {
 	 *************************************/
 	// TODO - Refactor
 	getChartSize(container = this.container) {
-		let ratio, marginForLegendTop;
+		let ratio, marginForLegendTop, marginForChartTitle;
 		if (container.node().clientWidth > Configuration.charts.widthBreak) {
 			ratio = Configuration.charts.magicRatio;
 			marginForLegendTop = 0;
@@ -163,8 +163,11 @@ export class BaseAxisChart extends BaseChart {
 
 		// Store computed actual size, to be considered for change if chart does not support axis
 		const marginsToExclude = Configuration.charts.margin.left + Configuration.charts.margin.right;
+
+		marginForChartTitle = this.options.chartTitle ? Configuration.charts.marginForChartTitle : 0;
+
 		const computedChartSize = {
-			height: container.node().clientHeight - marginForLegendTop,
+			height: container.node().clientHeight - marginForLegendTop - marginForChartTitle,
 			width: (container.node().clientWidth - marginsToExclude) * ratio
 		};
 

diff --git a/packages/core/src/base-chart.ts b/packages/core/src/base-chart.ts
@@ -166,6 +166,7 @@ export class BaseChart {
 				// Perform the draw or update chart
 				if (initialDraw) {
 					this.initialDraw();
+					this.drawTitle(this.options.chartTitle);
 				} else {
 					if (removedItems.length > 0 || newItems.length > 0) {
 						this.addOrUpdateLegend();
@@ -270,7 +271,7 @@ export class BaseChart {
 
 	// TODO - Refactor
 	getChartSize(container = this.container) {
-		let ratio, marginForLegendTop;
+		let ratio, marginForLegendTop, marginForChartTitle;
 		if (container.node().clientWidth > Configuration.charts.widthBreak) {
 			ratio = Configuration.charts.magicRatio;
 			marginForLegendTop = 0;
@@ -281,8 +282,11 @@ export class BaseChart {
 
 		// Store computed actual size, to be considered for change if chart does not support axis
 		const marginsToExclude = 0;
+
+		marginForChartTitle = this.options.chartTitle ? Configuration.charts.marginForChartTitle : 0;
+
 		const computedChartSize = {
-			height: container.node().clientHeight - marginForLegendTop,
+			height: container.node().clientHeight - marginForLegendTop - marginForChartTitle,
 			width: (container.node().clientWidth - marginsToExclude) * ratio
 		};
 
@@ -363,6 +367,32 @@ export class BaseChart {
 		resizeObserver.observe(this.holder);
 	}
 
+	/**
+	 * Draws title within the Chart's svg element.
+	 * @param title
+	 */
+	drawTitle(title: string) {
+		if (title) {
+			this.svg
+			.append("text")
+			.classed("chart-title", true)
+			.text(title);
+		}
+		const titleMargin = Configuration.charts.marginForChartTitle;
+
+
+		// retrieve the current transformations (specific to each chart type)
+		const transform = this.innerWrap.attr("transform");
+		const translateArr = transform.substring(transform.indexOf("(") + 1, transform.indexOf(")")).split(",");
+
+
+		// add padding for title, keep other translations
+		this.innerWrap
+		.attr("transform", `translate(${translateArr[0]}, ${+translateArr[1] + titleMargin})`);
+
+
+	}
+
 	setClickableLegend() {
 		const self = this;
 		const c = select(this.holder);

diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts
@@ -82,6 +82,10 @@ export interface BaseChartOptions {
 	 * boolean to enable/disable legend interactivity
 	 */
 	legendClickable?: boolean;
+	/**
+	 * optional title for chart
+	 */
+	chartTitle?: string;
 	/**
 	 * boolean to prevent the container from resizing
 	 */
@@ -501,6 +505,7 @@ export const charts = {
 	minWidth: 150,
 	widthBreak: 600,
 	marginForLegendTop: 40,
+	marginForChartTitle: 24,
 	magicRatio: 0.7,
 	magicMoreForY2Axis: 70,
 	axisCharts: {

diff --git a/packages/core/src/pie-chart.ts b/packages/core/src/pie-chart.ts
@@ -127,7 +127,7 @@ export class PieChart extends BaseChart {
 			.attr("height", `${diameter}px`);
 
 		this.innerWrap
-			.style("transform", `translate(${radius}px,${radius}px)`)
+			.attr("transform", `translate(${radius},${radius})`)
 			.attr("width", `${diameter}px`)
 			.attr("height", `${diameter}px`)
 			.attr("preserveAspectRatio", "xMinYMin");

diff --git a/packages/core/src/style.scss b/packages/core/src/style.scss
@@ -17,10 +17,22 @@ div.chart-holder {
 	position: relative;
 	@include fonts();
 
+
 	// Chart elements
 	svg.chart-svg {
 		overflow: visible !important;
 
+		/*
+		Chart titles
+		*/
+		.chart-title {
+			font-size: 14px;
+			line-height: 16px;
+			font-weight: 600;
+			padding-bottom: 8px;
+			dominant-baseline: hanging;
+		}
+
 		/*
 		Axes
 		*/
@@ -148,7 +160,9 @@ div.chart-holder {
 		}
 
 		text {
+			font-family: "IBM Plex Sans condensed";
 			font-size: 12px;
+			line-height: 16px;
 			max-width: 100px;
 			text-overflow: ellipsis;
 			white-space: nowrap;