Add Chart examples to claycss.com

Fixes liferay#456
kienD · Feb 21, 2018 · 416bb92 · 416bb92
1 parent b5d98ce
commit 416bb92
Show file tree

Hide file tree

Showing 21 changed files with 1,183 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "scripts": {
     "a11y": "metal-a11y --packages ./packages -c demos/a11y.html",
     "build": "lerna run build",
+    "compile": "lerna run compile",
     "checkFormat": "npm run prettier -- --list-different",
     "coveralls": "node node_modules/coveralls/bin/coveralls.js < coverage/lcov.info",
     "format": "npm run prettier -- --write",
@@ -12,7 +13,10 @@
     "mcritic": "mcritic packages/ --ignore '**/{browserslist-config-clay-components,claycss.com,generator-metal-clay,node_modules}/**'",
     "prettier": "prettier-eslint packages/clay-*/src/*.js packages/clay-*/src/**/*.js",
     "start": "http-server . -p 4000",
-    "test": "npm run build && npm run jest && npm run a11y"
+    "test": "npm run build && npm run jest && npm run a11y",
+    "electric": "npm run compile && cd packages/claycss.com && el",
+    "web": "npm run electric -- run",
+    "deploy": "npm run electric -- deploy"
   },
   "devDependencies": {
     "babel-preset-metal": "^4.1.0",

diff --git a/packages/claycss.com/electric.config.js b/packages/claycss.com/electric.config.js
@@ -1,6 +1,7 @@
 'use strict';
 
 const clay = require('clay');
+const fs = require('fs');
 const gulp = require('gulp');
 const path = require('path');
 
@@ -27,12 +28,17 @@ if (clayPath) {
 	);
 }
 
+const excludedComponents = /.*pagination/;
+const metalComponents = ['electric-quartz-components']
+	.concat(fs.readdirSync('../').filter(f => f.match(/^clay-.*/) && !f.match(excludedComponents)));
+
+
 module.exports = {
 	frontMatterHook: function(data) {
 		return generateIconData(data);
 	},
 	codeMirrorLanguages: ['xml', 'htmlmixed', 'soy'],
-	metalComponents: ['electric-quartz-components'],
+	metalComponents: metalComponents,
 	resolveModules: ['../../node_modules'],
 	sassOptions: {
 		includePaths: ['node_modules', clayIncludePaths],
@@ -51,5 +57,8 @@ module.exports = {
 		{
 			src: path.join(clayJSPath, 'svg4everybody.js'),
 		},
+		{
+			src: path.join('../clay-charts/build/clay-charts.css'),
+		},
 	],
 };
diff --git a/packages/claycss.com/src/pages/docs/components/charts/advanced/axis_label.md b/packages/claycss.com/src/pages/docs/components/charts/advanced/axis_label.md
@@ -0,0 +1,82 @@
+---
+title: "Axis Label"
+description: ""
+layout: "guide"
+weight: 0
+---
+
+###### {$page.description}
+
+<article id="1">
+
+{call ClayChart.render}
+	{param columns: [
+		[
+			'id': 'data1',
+			'data': [10, 70, 30, 120, 20, 10],
+			'axis': 'y'
+		],
+		[
+			'id': 'data2',
+			'data': [100, 150, 120, 90, 10, 55],
+			'axis': 'y2'
+		]
+	] /}
+	{param axisY: [
+		'label': 'Y Axis Label'
+	] /}
+	{param axisY2: [
+		'label': 'Y2 Axis Label',
+		'show': true
+	] /}
+{/call}
+
+
+```soy
+{call ClayChart.render}
+	{param columns: [
+		[
+			'id': 'data1',
+			'data': [10, 70, 30, 120, 20, 10],
+			'axis': 'y'
+		],
+		[
+			'id': 'data2',
+			'data': [100, 150, 120, 90, 10, 55],
+			'axis': 'y2'
+		]
+	] /}
+	{param axisY: [
+		'label': 'Y Axis Label'
+	] /}
+	{param axisY2: [
+		'label': 'Y2 Axis Label',
+		'show': true
+	] /}
+{/call}
+```
+
+```jsx
+<Chart
+	columns={[
+		{
+			id: 'data1',
+			data: [10, 70, 30, 120, 20, 10],
+			axis: 'y'
+		},
+		{
+			id: 'data2',
+			data: [100, 150, 120, 90, 10, 55],
+			axis: 'y2'
+		}
+	]}
+	axisY={
+		label: 'Y Axis Label'
+	}
+	axisY2={
+		label: 'Y2 Axis Label',
+		show: true
+	}
+/>
+```
+</article>
diff --git a/packages/claycss.com/src/pages/docs/components/charts/advanced/axis_range.md b/packages/claycss.com/src/pages/docs/components/charts/advanced/axis_range.md
@@ -0,0 +1,76 @@
+---
+title: "Axis Range"
+description: ""
+layout: "guide"
+weight: 1
+---
+
+###### {$page.description}
+
+<article id="1">
+
+{call ClayChart.render}
+	{param columns: [
+		[
+			'id': 'data1',
+			'data': [10, 90, 30, 120, 20, 160],
+			'axis': 'y'
+		],
+		[
+			'id': 'data2',
+			'data': [200, 150, 120, 90, 10, 75],
+			'axis': 'y2'
+		]
+	] /}
+	{param axisY2: [
+		'max': 230,
+		'min': 10,
+		'show': true
+	] /}
+{/call}
+
+
+```soy
+{call ClayChart.render}
+	{param columns: [
+		[
+			'id': 'data1',
+			'data': [10, 90, 30, 120, 20, 160],
+			'axis': 'y'
+		],
+		[
+			'id': 'data2',
+			'data': [200, 150, 120, 90, 10, 75],
+			'axis': 'y2'
+		]
+	] /}
+	{param axisY2: [
+		'max': 230,
+		'min': 10,
+		'show': true
+	] /}
+{/call}
+```
+
+```jsx
+<Chart
+	columns={[
+		{
+			id: 'data1',
+			data: [10, 90, 30, 120, 20, 160],
+			axis: 'y'
+		},
+		{
+			id: 'data2',
+			data: [200, 150, 120, 90, 10, 75],
+			axis: 'y2'
+		}
+	]}
+	axisY2={
+		max: 230,
+		min: 10,
+		show: true
+	}
+/>
+```
+</article>
diff --git a/packages/claycss.com/src/pages/docs/components/charts/advanced/data_color.md b/packages/claycss.com/src/pages/docs/components/charts/advanced/data_color.md
@@ -0,0 +1,61 @@
+---
+title: "Data Color"
+description: ""
+layout: "guide"
+weight: 2
+---
+
+###### {$page.description}
+
+<article id="1">
+
+{call ClayChart.render}
+	{param columns: [
+		[
+			'id': 'data1',
+			'data': [10, 90, 30, 120, 20, 160],
+			'color': 'hotpink'
+		],
+		[
+			'id': 'data2',
+			'data': [200, 150, 120, 90, 10, 75],
+			'color': 'cadetblue'
+		]
+	] /}
+{/call}
+
+
+```soy
+{call ClayChart.render}
+	{param columns: [
+		[
+			'id': 'data1',
+			'data': [10, 90, 30, 120, 20, 160],
+			'color': 'hotpink'
+		],
+		[
+			'id': 'data2',
+			'data': [200, 150, 120, 90, 10, 75],
+			'color': 'cadetblue'
+		]
+	] /}
+{/call}
+```
+
+```jsx
+<Chart
+	columns={[
+		{
+			id: 'data1',
+			data: [10, 90, 30, 120, 20, 160],
+			color: 'hotpink'
+		},
+		{
+			id: 'data2',
+			data: [200, 150, 120, 90, 10, 75],
+			color: 'cadetblue'
+		}
+	]}
+/>
+```
+</article>
diff --git a/packages/claycss.com/src/pages/docs/components/charts/advanced/grid_lines.md b/packages/claycss.com/src/pages/docs/components/charts/advanced/grid_lines.md
@@ -0,0 +1,78 @@
+---
+title: "Gridlines"
+description: ""
+layout: "guide"
+weight: 3
+---
+
+###### {$page.description}
+
+<article id="1">
+
+{call ClayChart.render}
+	{param columns: [
+		[
+			'id': 'data1',
+			'data': [10, 70, 30, 120, 20, 10]
+		],
+		[
+			'id': 'data2',
+			'data': [100, 150, 120, 90, 10, 55]
+		]
+	] /}
+	{param grid: [
+		'x': [
+			'show': true
+		],
+		'y': [
+			'show': false
+		]
+	] /}
+{/call}
+
+```soy
+{call ClayChart.render}
+	{param columns: [
+		[
+			'id': 'data1',
+			'data': [10, 70, 30, 120, 20, 10]
+		],
+		[
+			'id': 'data2',
+			'data': [100, 150, 120, 90, 10, 55]
+		]
+	] /}
+	{param grid: [
+		'x': [
+			'show': true
+		],
+		'y': [
+			'show': false
+		]
+	] /}
+{/call}
+```
+
+```jsx
+<Chart
+	columns={[
+		{
+			id: 'data1',
+			data: [10, 70, 30, 120, 20, 10]
+		},
+		{
+			id: 'data2',
+			data: [100, 150, 120, 90, 10, 55]
+		}
+	]}
+	grid={
+		x: {
+			show: true
+		},
+		y: {
+			show: true
+		}
+	}
+/>
+```
+</article>
diff --git a/packages/claycss.com/src/pages/docs/components/charts/advanced/index.md b/packages/claycss.com/src/pages/docs/components/charts/advanced/index.md
@@ -0,0 +1,26 @@
+---
+title: "Advanced Examples"
+url: "/docs/components/charts/avanced/axis_label.html"
+weight: 4
+---
+
+{namespace pageChartsAdvancedIndex}
+
+/**
+ *
+ */
+{template .render}
+{/template}
+
+/**
+ * @param page
+ */
+{template .soyweb}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="refresh" content="0; URL='{$page.url}'">
+</head>
+</html>
+{/template}