feat(react wrappers storybook): full react wrappers

affects: @peretz/charts-angular, @peretz/charts, @peretz/charts-react, @peretz/charts-angular-storybook Full react wrappers ISSUES CLOSED: #117, #115, #120, #121
carbon-design-system · Aug 13, 2018 · 4a456ee · 4a456ee
1 parent 0bba515
commit 4a456ee
Show file tree

Hide file tree

Showing 10 changed files with 340 additions and 15 deletions.
diff --git a/packages/angular/demo/src/stories/bar-demo-data.js b/packages/angular/demo/src/stories/bar-demo-data.js
@@ -1,4 +1,4 @@
-import { colors, randomizeValue } from "../helpers/commons";
+import { colors } from "../helpers/commons";
 
 export const groupedBarData = {
 	labels: ["Qty", "More", "Sold", "Restocking", "Misc"],

diff --git a/packages/angular/demo/src/stories/line-demo-data.js b/packages/angular/demo/src/stories/line-demo-data.js
@@ -0,0 +1,119 @@
+import { colors } from "../helpers/commons";
+
+export const curvedLineData = {
+	labels: ["Qty", "More", "Sold", "Restocking", "Misc"],
+	datasets: [
+		{
+			label: "Dataset 1",
+			backgroundColors: [colors[0]],
+			data: [
+				65000,
+				79000,
+				49213,
+				51213,
+				16932
+			]
+		},
+		{
+			label: "Dataset 2",
+			backgroundColors: [colors[1]],
+			data: [
+				80000,
+				21312,
+				56456,
+				21312,
+				0
+			]
+		},
+		{
+			label: "Dataset 3",
+			backgroundColors: [colors[2]],
+			data: [
+				12312,
+				34232,
+				39232,
+				12312,
+				34234
+			]
+		}
+	]
+};
+
+export const curvedLineOptions = {
+	accessibility: false,
+	scales: {
+		x: {
+			title: "2018 Annual Sales Figures",
+		},
+		y: {
+			formatter: axisValue => {
+				return `${axisValue / 1000}k`;
+			},
+		},
+		y2: {
+			ticks: {
+				max: 1,
+				min: 0
+			}
+		}
+	},
+	curve: "curveNatural",
+	legendClickable: true,
+	containerResizable: true,
+};
+
+
+export const lineData = {
+	labels: ["Qty", "More", "Sold", "Restocking", "Misc"],
+	datasets: [
+		{
+			label: "Dataset 1",
+			backgroundColors: [colors[0]],
+			data: [
+				0,
+				0,
+				0,
+				0,
+				0
+			]
+		},
+		{
+			label: "Dataset 2",
+			backgroundColors: [colors[1]],
+			data: [
+				0,
+				10000,
+				20000,
+				30000,
+				40000
+			]
+		},
+		{
+			label: "Dataset 3",
+			backgroundColors: [colors[2]],
+			data: [
+				0,
+				20000,
+				40000,
+				60000,
+				80000
+			]
+		}
+	]
+};
+
+export const lineOptions = {
+	accessibility: false,
+	scales: {
+		x: {
+			title: "2018 Annual Sales Figures",
+		},
+		y: {
+			formatter: axisValue => {
+				return `${axisValue / 1000}k`;
+			},
+		}
+	},
+	legendClickable: true,
+	containerResizable: true,
+};
diff --git a/packages/angular/src/bar-chart.component.ts b/packages/angular/src/bar-chart.component.ts
@@ -5,7 +5,7 @@ import {
 } from "@angular/core";
 
 import { BaseChart } from "./base-chart.component";
-import { BarChart } from "../../core/src/bar-chart";
+import { BarChart } from "@peretz/charts";
 
 /**
  * Wrapper around `BarChart` in peretz charts library

diff --git a/packages/core/src/tools.ts b/packages/core/src/tools.ts
@@ -24,12 +24,15 @@ export namespace Tools {
 		let classNames = `close--${size}`;
 		classNames = color ? " close--" + color : classNames;
 
-		const iconHolder = document.createElement("div");
-		iconHolder.innerHTML = `<peretz-icon set="arrows_chevrons" icon="chevron_up" size="sm" class="icon--white-sm"></peretz-icon>`;
+		const iconHolder = document.createElement("span");
+		iconHolder.innerHTML = `<peretz-icon set="core_set" icon="x" size="sm"></peretz-icon>`;
 		closeBtn.attr("class", classNames)
 			.attr("type", "button")
 			.attr("aria-label", "Close");
 
+		closeBtn.node()
+			.appendChild(iconHolder);
+
 			// TODO - Finish
 			// console.log(iconHolder);
 		return closeBtn;

diff --git a/packages/core/webpack.build.js b/packages/core/webpack.build.js
@@ -29,15 +29,16 @@ module.exports = [{
 	module: {
 		loaders: [
 			// all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
-			{ test: /\.tsx?$/, loader: "ts-loader" },
+			{ test: /\.ts$/, loaders: ["ts-loader", "@peretz/icon-loader"] },
 			{ test: /\.html?$/, loaders: ["html-loader", "@peretz/icon-loader"] },
 			{
 				test: /\.scss$/,
 				loaders: [
 					"style-loader",
 					"css-loader",
 					"postcss-loader",
-					"sass-loader"
+					"sass-loader",
+					"@peretz/icon-loader"
 				]
 			},
 			{

diff --git a/packages/core/webpack.config.js b/packages/core/webpack.config.js
@@ -16,15 +16,16 @@ module.exports = {
 	module: {
 		loaders: [
 			// all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
-			{ test: /\.tsx?$/, loader: "ts-loader" },
+			{ test: /\.ts$/, loaders: ["ts-loader", "@peretz/icon-loader"] },
 			{ test: /\.html?$/, loaders: ["html-loader", "@peretz/icon-loader"] },
 			{
 				test: /\.s?css$/,
 				loaders: [
 					"style-loader",
 					"css-loader",
 					"postcss-loader",
-					"sass-loader"
+					"sass-loader",
+					"@peretz/icon-loader"
 				]
 			},
 			{

diff --git a/packages/core/webpack.test.js b/packages/core/webpack.test.js
@@ -8,19 +8,19 @@ module.exports = [{
 		loaders: [
 			{
 				test: /\.ts$/,
-				loader: "ts-loader"
+				loader: ["ts-loader", "@peretz/icon-loader"]
 			},
 			{
 				test: /\.html$/,
-				loader: "html-loader"
+				loaders: ["html-loader", "@peretz/icon-loader"]
 			},
 			{
 				test: /\.css$/,
-				loader: "raw-loader"
+				loader: ["raw-loader", "@peretz/icon-loader"]
 			},
 			{
 				test: /\.scss$/,
-				loaders: ["raw-loader", "sass-loader"]
+				loaders: ["raw-loader", "sass-loader", "@peretz/icon-loader"]
 			},
 			{
 				test   : /\.(ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,

diff --git a/packages/react/src/base-chart.js b/packages/react/src/base-chart.js
@@ -8,9 +8,10 @@ export default class BaseChart extends React.Component {
 		this.options = props.options;
 	}
 
-	componentWillUnmount() {
-		this.chart.removeChart();
-	}
+	// TODO
+	// componentWillUnmount() {
+	// 	this.chart.removeChart();
+	// }
 
 	/**
 	 * Calls `setData()` from the chart library.

diff --git a/packages/react/stories/line-demo-data.js b/packages/react/stories/line-demo-data.js
@@ -0,0 +1,119 @@
+import { colors } from "../helpers/commons";
+
+export const curvedLineData = {
+	labels: ["Qty", "More", "Sold", "Restocking", "Misc"],
+	datasets: [
+		{
+			label: "Dataset 1",
+			backgroundColors: [colors[0]],
+			data: [
+				65000,
+				79000,
+				49213,
+				51213,
+				16932
+			]
+		},
+		{
+			label: "Dataset 2",
+			backgroundColors: [colors[1]],
+			data: [
+				80000,
+				21312,
+				56456,
+				21312,
+				0
+			]
+		},
+		{
+			label: "Dataset 3",
+			backgroundColors: [colors[2]],
+			data: [
+				12312,
+				34232,
+				39232,
+				12312,
+				34234
+			]
+		}
+	]
+};
+
+export const curvedLineOptions = {
+	accessibility: false,
+	scales: {
+		x: {
+			title: "2018 Annual Sales Figures",
+		},
+		y: {
+			formatter: axisValue => {
+				return `${axisValue / 1000}k`;
+			},
+		},
+		y2: {
+			ticks: {
+				max: 1,
+				min: 0
+			}
+		}
+	},
+	curve: "curveNatural",
+	legendClickable: true,
+	containerResizable: true,
+};
+
+
+export const lineData = {
+	labels: ["Qty", "More", "Sold", "Restocking", "Misc"],
+	datasets: [
+		{
+			label: "Dataset 1",
+			backgroundColors: [colors[0]],
+			data: [
+				0,
+				0,
+				0,
+				0,
+				0
+			]
+		},
+		{
+			label: "Dataset 2",
+			backgroundColors: [colors[1]],
+			data: [
+				0,
+				10000,
+				20000,
+				30000,
+				40000
+			]
+		},
+		{
+			label: "Dataset 3",
+			backgroundColors: [colors[2]],
+			data: [
+				0,
+				20000,
+				40000,
+				60000,
+				80000
+			]
+		}
+	]
+};
+
+export const lineOptions = {
+	accessibility: false,
+	scales: {
+		x: {
+			title: "2018 Annual Sales Figures",
+		},
+		y: {
+			formatter: axisValue => {
+				return `${axisValue / 1000}k`;
+			},
+		}
+	},
+	legendClickable: true,
+	containerResizable: true,
+};