fix(core angular react): fix tooltip styling

affects: @carbon/charts-angular, @carbon/charts, @carbon/charts-react fix tooltip styling
carbon-design-system · Aug 22, 2018 · 80b36f5 · 80b36f5
1 parent a0d2f90
commit 80b36f5
Show file tree

Hide file tree

Showing 11 changed files with 37 additions and 22 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,4 +5,6 @@ node_modules
 .vscode/
 .idea/
 *.log
-packages/react/build
+packages/core/demo/bundle/
+packages/react/build/
+storybook-dist
diff --git a/packages/angular/demo/assets/favicon.ico b/packages/angular/demo/assets/favicon.ico
diff --git a/packages/angular/demo/package.json b/packages/angular/demo/package.json
@@ -8,7 +8,7 @@
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "storybook": "start-storybook -p 9005 -c .storybook"
+    "storybook": "start-storybook -p 9005 -c .storybook -s ./assets"
   },
   "private": true,
   "dependencies": {

diff --git a/packages/core/demo/index.html b/packages/core/demo/index.html
@@ -7,7 +7,7 @@
 		<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
 		<link rel="shortcut icon" href="favicon.ico" />
 
-		<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,700" rel="stylesheet">
+		<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,600,700" rel="stylesheet">
 
 		<link href="https://unpkg.com/carbon-components/css/carbon-components.min.css" rel="stylesheet">
 	</head>

diff --git a/packages/core/demo/index.ts b/packages/core/demo/index.ts
@@ -105,7 +105,14 @@ const changeDemoData = (chartType: any, oldData: any, delay?: number) => {
 		const firstTry = Math.max(0.5 * currentVal, currentVal * Math.random() * (Math.random() * 5));
 		const result = currentVal > 0 ? Math.min(2 * currentVal, firstTry) : Math.max(2 * currentVal, firstTry);
 
-		return Math.floor(result);
+		if (Math.random() > 0.5
+			|| chartType.indexOf("stacked") !== -1
+			|| chartType.indexOf("pie") !== -1
+			|| chartType.indexOf("donut") !== -1) {
+			return Math.floor(result);
+		} else {
+			return Math.floor(result) * -1;
+		}
 	};
 
 	switch (chartType) {

diff --git a/packages/core/src/base-chart.ts b/packages/core/src/base-chart.ts
@@ -787,7 +787,7 @@ export class BaseChart {
 		// Draw tooltip
 		const tooltip = d3.select(this.holder).append("div")
 			.attr("class", "tooltip chart-tooltip")
-			.style("border-color", this.colorScale[d.datasetLabel](d.label))
+			// .style("border-color", this.colorScale[d.datasetLabel](d.label))
 			.style("top", d3.mouse(this.holder as SVGSVGElement)[1] - Configuration.tooltip.magicTop2 + "px");
 
 		// TODOCARBON - Remove
@@ -805,7 +805,6 @@ export class BaseChart {
 			`;
 		} else {
 			tooltipHTML += `
-				${d.label}<br/>
 				<b>${d.datasetLabel}:</b> ${formattedValue}<br/>
 			`;
 		}

diff --git a/packages/core/src/pie-chart.ts b/packages/core/src/pie-chart.ts
@@ -265,7 +265,7 @@ export class PieChart extends BaseChart {
 		const tooltip = d3.select(this.holder).append("div")
 			.attr("class", "tooltip chart-tooltip")
 			.style("top", d3.mouse(this.holder as SVGSVGElement)[1] - Configuration.tooltip.magicTop2 + "px")
-			.style("border-color", this.colorScale[this.displayData.datasets[0].label](d.data.label)); // TODO - Support multiple datasets
+			// .style("border-color", this.colorScale[this.displayData.datasets[0].label](d.data.label)); // TODO - Support multiple datasets
 
 		// TODOCARBON - Remove
 		// Tools.addCloseBtn(tooltip, "xs")
@@ -279,15 +279,16 @@ export class PieChart extends BaseChart {
 			<p>${d.data.label}</p>
 		`;
 
-		if (d.data.label === Configuration.pie.label.other) {
-			const { items } = d.data;
+		// TODOCARBON - Switch to popover onclick
+		// if (d.data.label === Configuration.pie.label.other) {
+		// 	const { items } = d.data;
 
-			items.map(item => {
-				tooltipHTML += `
-					<p>${item.label}: ${item.value.toLocaleString()}</p>
-				`;
-			});
-		}
+		// 	items.map(item => {
+		// 		tooltipHTML += `
+		// 			<b>${item.label}:</b> ${item.value.toLocaleString()}<br />
+		// 		`;
+		// 	});
+		// }
 
 		tooltip.append("div").attr("class", "text-box").html(tooltipHTML);
 		if (d3.mouse(this.holder as SVGSVGElement)[0] + (tooltip.node() as Element).clientWidth > this.holder.clientWidth) {

diff --git a/packages/core/src/style.scss b/packages/core/src/style.scss
@@ -258,12 +258,14 @@ div.chart-overlay {
 }
 
 .tooltip {
-	background-color: #484848;
-    color: #fff;
-	box-shadow: 0 0 10px 0 rgba(0,0,0,0.16);
+	background-color: #fff;
+	border: 1px solid #DFE3E6;
+	padding: .25rem .5rem;
 	display: block;
+	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1);
 	@include fonts();
 	font-size: 12px;
+	font-weight: 300;
 	position: absolute;
 	padding: 10px;
 	border-radius: 3px;
@@ -272,13 +274,17 @@ div.chart-overlay {
 	z-index: 1059;
 
 	p {
-		margin-bottom: 5px;
+		font-size: 12px;
 
 		&.bignum {
-			margin-top: 15px;
-			font-size: 27px;
+			font-size: 19px;
+			font-weight: 600;
 		}
 	}
+
+	b {
+		font-weight: 600;
+	}
 }
 
 #carbon-charts-patterns svg {

diff --git a/packages/react/assets/favicon.ico b/packages/react/assets/favicon.ico
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -7,7 +7,7 @@
 		"test": "echo \"Error: no test specified\" && exit 1",
 		"start": "webpack -w",
 		"build": "webpack",
-		"storybook": "start-storybook -p 9006 -c .storybook"
+		"storybook": "start-storybook -p 9006 -c .storybook -s ./assets"
 	},
 	"repository": {
 		"type": "git",

diff --git a/src/assets/demo-stacked-bar.jpg b/src/assets/demo-stacked-bar.jpg