carbon-design-system · cal-smith · May 9, 2019 · Apr 28, 2019 · Apr 28, 2019 · Apr 28, 2019
@@ -1,13 +1,37 @@
+import {
+	colors as colorsService,
+	themes
+} from "../../src/index"
+
+const urlParams = new URLSearchParams(window.location.search);
+const theme = parseInt(urlParams.get('theme'));
+let themeToUse = [
+	colorsService.purple(60),
+	colorsService.teal(30),
+	colorsService.magenta(50),
+	colorsService.cyan(40),
+	colorsService.magenta(80),
+	colorsService.purple(80),
+	colorsService.cyan(80)		
+]
+
+switch(theme) {
+	case 2:
+		themeToUse = themes.HC_1;
+		break;
+	case 3:
+		themeToUse = themes.HC_2;
+		break;
+	case 4:
+		themeToUse = themes.HC_3;
+		break;
+	case 5:
+		themeToUse = themes.HC_4;
+		break;
+}
+
 export const colors = window["isExperimental"] ?
-	[
-		"#418cff", // Blue 60
-		"#3dbb61", // Green 40
-		"#ee538b", // Magenta 50
-		"#0058a1", // Cyan 70
-		"#fb4b53", // Red 50
-		"#8a3ffc", // Purple 60
-		"#00bab6" // Teal 40
-	]:
+	themeToUse:
 	[
 		"#00a68f",
 		"#3b1a40",

@@ -132,9 +132,6 @@ export const lineOptions = {
 			]
 		}
 	},
-	points: {
-		radius: 4
-	},
 	legendClickable: true,
 	containerResizable: true
 };

@@ -20,7 +20,7 @@
 
 	<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,600,700" rel="stylesheet">
 
-	<link href="https://unpkg.com/carbon-components@9.61.1/css/carbon-components.css" rel="stylesheet">
+	<link href="https://unpkg.com/carbon-components@10.1.0/css/carbon-components.css" rel="stylesheet">
 </head>
 
 <body>
@@ -239,6 +239,6 @@ <h3>A reusable framework-agnostic D3 charting library.</h3>
 	</div>
 </body>
 
-<script src="https://unpkg.com/carbon-components@9.8.0/scripts/carbon-components.min.js" type="text/javascript"></script>
+<script src="https://unpkg.com/carbon-components@10.1.0/scripts/carbon-components.min.js" type="text/javascript"></script>
 
 </html>
@@ -10,46 +10,6 @@ body {
 	font-family: "IBM Plex Sans", Arial, sans-serif;
 }
 
-h1 {
-	font-weight: 600;
-}
-
-h3 {
-	margin-bottom: 40px;
-}
-
-.button {
-	display: table;
-	padding: 12px 15px;
-    margin-bottom: 10px;
-	background: #0063ff;
-	color: #fff;
-	border: none;
-	font-size: 15px;
-    text-decoration: none;
-}
-
-// Carbon overrides
-$due_blue: #0063ff;
-
-.bx--btn--primary {
-	background: $due_blue;
-	outline: none !important;
-    border: none !important;
-
-	&:hover {
-		background: #0059e4;
-	}
-
-	&:active {
-		background: #003992;
-	}
-}
-
-.bx--overflow-menu-options {
-	outline: none;
-}
-
 header.m-demo-header {
 	margin-bottom: 20px;
 	padding: 50px 0;
@@ -83,6 +43,8 @@ header.m-demo-header {
 				.bx--btn {
 					float: left;
 					margin-right: 5px;
+					max-height: 30px;
+					padding-right: 15px;
 
 					&.last {
 						margin-right: 0;
@@ -112,7 +74,16 @@ header.m-demo-header {
 		}
 
 		h1 {
-			margin-bottom: 5px;
+			font-size: 2.25rem;
+			font-weight: 600;
+			margin-top: 20px;
+			margin-bottom: 10px;
+		}
+
+		h3 {
+			font-size: 1.25rem;
+			font-weight: 300;
+			margin-bottom: 45px;
 		}
 	}
 }

@@ -22,7 +22,8 @@ const experimentalCheckbox = (experimentalSwitchWrapper.querySelector("input#tog
 const { location } = window;
 
 if (location) {
-	window["isExperimental"] = location.search.replace("?experimental=", "") === "true";
+	const urlParams = new URLSearchParams(window.location.search);
+	window["isExperimental"] = urlParams.get('experimental');
 	experimentalCheckbox.checked = window["isExperimental"];
 
 	experimentalSwitchWrapper.querySelector("label.bx--toggle__label").addEventListener("click", () => {

@@ -295,15 +295,16 @@ export interface LineChartOptions extends AxisChartOptions {
 		 * sets the radius of the point
 		 */
 		radius: number;
+		fillOpacity?: number;
 	};
 }
 /**
  * options specific to line charts
  */
 const lineOptions: LineChartOptions = Tools.merge({}, axisOptions, {
 	points: {
-		// default point radius to 4
-		radius: 4
+		// default point radius to 3
+		radius: 3
 	}
 });
 
@@ -319,6 +320,7 @@ export interface ScatterChartOptions extends AxisChartOptions {
 		 * sets the radius of the point
 		 */
 		radius: number;
+		fillOpacity?: number;
 	};
 }
 /**
@@ -327,7 +329,8 @@ export interface ScatterChartOptions extends AxisChartOptions {
 const scatterOptions: ScatterChartOptions = Tools.merge({}, axisOptions, {
 	points: {
 		// default point radius to 4
-		radius: 4
+		radius: 4,
+		fillOpacity: 0.3
 	}
 });
 
@@ -463,7 +466,7 @@ export const charts = {
 		outline: "grey"
 	},
 	points: {
-		radius: 4
+		radius: 3
 	},
 	patternFills: {
 		width: 20,
@@ -564,7 +567,7 @@ export const bars = {
 export const lines = {
 	points: {
 		strokeWidth: 4,
-		minNonFilledRadius: 4,
+		minNonFilledRadius: 3,
 		mouseover: {
 			strokeWidth: 4,
 			strokeOpacity: 0.5

@@ -10,11 +10,16 @@ import { LineChart } from "./line-chart";
 import { ComboChart } from "./combo-chart";
 import { ScatterChart } from "./scatter-chart";
 
+import colors from "./services/colors";
 import * as Configuration from "./configuration";
 const defaultColors = Configuration.options.BASE.colors;
 
+import * as themes from "./services/themes";
+
 export {
+	colors,
 	defaultColors,
+	themes,
 	BaseChart,
 	BaseAxisChart,
 	PieChart,

@@ -130,12 +130,13 @@ export class PieChart extends BaseChart {
 		// Compute the correct inner & outer radius
 		const marginedRadius = this.computeRadius();
 		this.arc = arc()
-				.innerRadius(this.options.type === "donut" ? (marginedRadius * (2 / 3)) : 0)
+				.innerRadius(this.options.type === "donut" ? (marginedRadius * (3 / 4)) : 2)
 				.outerRadius(marginedRadius);
 
 		this.pie = pie()
 			.value((d: any) => d.value)
-			.sort(null);
+			.sort(null)
+			.padAngle(0.007);
 
 		// Draw the slices
 		this.path = this.innerWrap.selectAll("path")
@@ -372,7 +373,7 @@ export class PieChart extends BaseChart {
 
 		// Resize the arc
 		this.arc = arc()
-			.innerRadius(this.options.type === "donut" ? (radius * (2 / 3)) : 0)
+			.innerRadius(this.options.type === "donut" ? (radius * (3 / 4)) : 2)
 			.outerRadius(radius);
 
 		this.innerWrap.selectAll("path")

@@ -41,6 +41,7 @@ export class ScatterChart extends BaseAxisChart {
 				.attr("cy", d => this.y(d.value))
 				.attr("r", circleRadius)
 				.attr("fill", d => this.getCircleFill(circleRadius, d))
+				.attr("fill-opacity", d => this.getCircleFillOpacity())
 				.attr("stroke", d => this.getStrokeColor(d.datasetLabel, d.label, d.value));
 
 		// Hide the overlay
@@ -69,10 +70,24 @@ export class ScatterChart extends BaseAxisChart {
 	}
 
 	getCircleFill(radius, d) {
-		const circleShouldBeFilled = radius < Configuration.lines.points.minNonFilledRadius;
+		// If the radius of the point is smaller than minimum
+		// Or the chart is only a scatter chart
+		// And not a line chart for instance
+		const circleShouldBeFilled = radius < Configuration.lines.points.minNonFilledRadius || this.constructor === ScatterChart;
+
 		return circleShouldBeFilled ? this.getStrokeColor(d.datasetLabel, d.label, d.value) : "white";
 	}
 
+	getCircleFillOpacity() {
+		// If the chart is only a scatter chart
+		// And not a line chart for instance
+		if (this.constructor === ScatterChart) {
+			return Configuration.options.SCATTER.points.fillOpacity;
+		}
+
+		return null;
+	}
+
 	interpolateValues(newData: any) {
 		const { line: margins } = Configuration.charts.margin;
 		const chartSize = this.getChartSize();
@@ -104,6 +119,7 @@ export class ScatterChart extends BaseAxisChart {
 				.transition(this.getDefaultTransition())
 				.style("opacity", 1)
 				.attr("fill", d => this.getCircleFill(circleRadius, d))
+				.attr("fill-opacity", d => this.getCircleFillOpacity())
 				.attr("stroke", d => this.getStrokeColor(d.datasetLabel, d.label, d.value));
 
 		// Remove dots that are no longer needed
@@ -184,7 +200,7 @@ export class ScatterChart extends BaseAxisChart {
 
 	reduceOpacity(exception) {
 		const circleRadius = this.getCircleRadius();
-		select(exception).attr("fill-opacity", false);
+		select(exception).attr("fill-opacity", this.getCircleFillOpacity());
 		select(exception).attr("stroke-opacity", Configuration.charts.reduceOpacity.opacity);
 		select(exception).attr("fill", (d: any) => this.getCircleFill(circleRadius, d));
 	}

@@ -0,0 +1,48 @@
+const purplePalette = {
+	30: "#d0b0ff",
+	40: "#bb8eff",
+	50: "#a970ff",
+	60: "#8a3ffc",
+	70: "#6e32c9",
+	80: "#4f2196",
+	90: "#38146b"
+};
+
+const magentaPalette = {
+	30: "#ffa0c2",
+	40: "#fa75a6",
+	50: "#ee538b",
+	60: "#d12765",
+	70: "#a11950",
+	80: "#760a3a",
+	90: "#57002b"
+};
+
+const cyanPalette = {
+	30: "#6ccaff",
+	40: "#30b0ff",
+	50: "#1193e8",
+	60: "#0072c3",
+	70: "#0058a1",
+	80: "#003d73",
+	90: "#002b50"
+};
+
+const tealPalette = {
+	30: "#20d5d2",
+	40: "#00bab6",
+	50: "#009e9a",
+	60: "#007d79",
+	70: "#006161",
+	80: "#004548",
+	90: "#003137"
+};
+
+const getColor = (obj, shade) => obj[shade];
+
+export default {
+	purple: shade => getColor(purplePalette, shade),
+	magenta: shade => getColor(magentaPalette, shade),
+	cyan: shade => getColor(cyanPalette, shade),
+	teal: shade => getColor(tealPalette, shade)
+};
diff --git a/packages/core/src/services/themes.ts b/packages/core/src/services/themes.ts
@@ -0,0 +1,26 @@
+import colors from "./colors";
+
+// Generates array of color values
+// For all available colors within the shades provided
+const generateTheme = (firstShade, secondShade) => {
+	const firstPalette = [];
+	const secondPalette = [];
+
+	const colorKeys = Object.keys(colors);
+	for (let i = 0; i < 2; i++) {
+		colorKeys.forEach((colorKey, j) => {
+			const shadeToUse = (i + j) % 2 === 0 ? secondShade : firstShade;
+			console.log("shadeToUse", colorKey, shadeToUse);
+			firstPalette.push(
+				colors[colorKey](shadeToUse)
+			);
+		});
+	}
+
+	return firstPalette.concat(secondPalette);
+};
+
+export const HC_1 = generateTheme(80, 50);
+export const HC_2 = generateTheme(70, 40);
+export const HC_3 = generateTheme(60, 40);
+export const HC_4 = generateTheme(80, 40);
@@ -47,6 +47,7 @@ div.chart-holder {
 			&.line {
 				fill: none;
 				stroke-width: 2;
+				mix-blend-mode: multiply;
 
 				&:hover {
 					cursor: default;
@@ -56,7 +57,7 @@ div.chart-holder {
 
 		circle {
 			&.dot {
-				stroke-width: 2;
+				stroke-width: 1.5;
 			}
 		}
 	}