Merge pull request #818 from julien/issue-813

Implement predictive Chart
liferay · Apr 19, 2018 · 32055fe · 32055fe
2 parents a53fcec + eb44a9d
commit 32055fe
Show file tree

Hide file tree

Showing 79 changed files with 884 additions and 163 deletions.
diff --git a/.soycriticrc.json b/.soycriticrc.json
@@ -7,9 +7,13 @@
     {
       "regex": "(\\S+)",
       "replace": "{$1}"
+    },
+    {
+      "regex": "Clay(\\S+)",
+      "replace": "{$1}"
     }
   ],
   "implicitParams": {
     "Chart*": ["_loading"]
   }
-}
+}
diff --git a/packages/clay-charts/demos/index.html b/packages/clay-charts/demos/index.html
@@ -163,6 +163,11 @@ <h2>Bubble</h2>
 		<div id="bubble"></div>
 	</div>
 
+	<div class="clay-chart-example">
+		<h2>Predictive Forecasting</h2>
+		<div id="predictive"></div>
+	</div>
+
 	<div id="controls" style="display: none;">
 		<label>
 			Change type:
@@ -463,6 +468,64 @@ <h2>Bubble</h2>
 			type: 'bubble'
 		}, '#bubble');
 
+		var predictiveChart = new metal.PredictiveChart({
+			axisXTickFormat: '%b',
+			data: [
+				{
+					data: [
+						130,
+						340,
+						200,
+						500,
+						80,
+						240,
+						40,
+						[370, 400, 430],
+						[210, 240, 270],
+						[150, 180, 210],
+						[60, 90, 120],
+						[310, 340, 370]
+					],
+					id: 'Product 1'
+				},
+				{
+					data: [
+						210,
+						160,
+						50,
+						125,
+						230,
+						110,
+						90,
+						{low: 170, mid: 200, high: 230},
+						{low: 10, mid: 40, high: 70},
+						{low: 350, mid: 380, high: 410},
+						{low: 260, mid: 290, high: 320},
+						{low: 30, mid: 70, high: 100}
+					],
+					id: 'Product 2'
+				}
+			],
+			predictionDate: new Date('2018-07-01'),
+			timeseries: [
+				'2018-01-01',
+				'2018-02-01',
+				'2018-03-01',
+				'2018-04-01',
+				'2018-05-01',
+				'2018-06-01',
+				'2018-07-01',
+				'2018-08-01',
+				'2018-09-01',
+				'2018-10-01',
+				'2018-11-01',
+				'2018-12-01'
+			]
+		}, '#predictive');
+		predictiveChart.on('chartError', err => {
+			console.log('Chart Error', err);
+		});
+
 		function createChartControls(chart, type, data) {
 			var element = document.getElementById(type);
 

diff --git a/packages/clay-charts/src/AreaLineChart.js b/packages/clay-charts/src/AreaLineChart.js
@@ -1,6 +1,8 @@
-import {Config} from 'metal-state';
 import Chart from './Chart';
+import Soy from 'metal-soy';
+import templates from './AreaLineChart.soy.js';
 import types from './utils/types';
+import {Config} from 'metal-state';
 
 /**
  * AreaLine Chart Component
@@ -19,5 +21,7 @@ AreaLineChart.STATE = {
 	type: Config.oneOf(types.area).value('area'),
 };
 
+Soy.register(AreaLineChart, templates);
+
 export {AreaLineChart};
 export default AreaLineChart;
diff --git a/packages/clay-charts/src/AreaLineChart.soy b/packages/clay-charts/src/AreaLineChart.soy
@@ -0,0 +1,8 @@
+{namespace ClayAreaLineChart}
+
+/**
+ * This renders the component's whole content.
+ */
+{template .render}
+	{call ClayChart.render /}
+{/template}
diff --git a/packages/clay-charts/src/AreaSplineChart.js b/packages/clay-charts/src/AreaSplineChart.js
@@ -1,4 +1,6 @@
 import Chart from './Chart';
+import Soy from 'metal-soy';
+import templates from './AreaSplineChart.soy.js';
 import types from './utils/types';
 import {Config} from 'metal-state';
 
@@ -19,5 +21,7 @@ AreaSplineChart.STATE = {
 	type: Config.oneOf(types.area).value('area-spline'),
 };
 
+Soy.register(AreaSplineChart, templates);
+
 export {AreaSplineChart};
 export default AreaSplineChart;
diff --git a/packages/clay-charts/src/AreaSplineChart.soy b/packages/clay-charts/src/AreaSplineChart.soy
@@ -0,0 +1,8 @@
+{namespace ClayAreaSplineChart}
+
+/**
+ * This renders the component's whole content.
+ */
+{template .render}
+	{call ClayChart.render /}
+{/template}
diff --git a/packages/clay-charts/src/AreaStepChart.js b/packages/clay-charts/src/AreaStepChart.js
@@ -1,4 +1,6 @@
 import Chart from './Chart';
+import Soy from 'metal-soy';
+import templates from './AreaStepChart.soy.js';
 import types from './utils/types';
 import {Config} from 'metal-state';
 
@@ -19,5 +21,7 @@ AreaStepChart.STATE = {
 	type: Config.oneOf(types.area).value('area-step'),
 };
 
+Soy.register(AreaStepChart, templates);
+
 export {AreaStepChart};
 export default AreaStepChart;
diff --git a/packages/clay-charts/src/AreaStepChart.soy b/packages/clay-charts/src/AreaStepChart.soy
@@ -0,0 +1,8 @@
+{namespace ClayAreaStepChart}
+
+/**
+ * This renders the component's whole content.
+ */
+{template .render}
+	{call ClayChart.render /}
+{/template}
diff --git a/packages/clay-charts/src/BarChart.js b/packages/clay-charts/src/BarChart.js
@@ -1,4 +1,6 @@
 import Chart from './Chart';
+import Soy from 'metal-soy';
+import templates from './BarChart.soy.js';
 import types from './utils/types';
 import {Config} from 'metal-state';
 
@@ -19,5 +21,7 @@ BarChart.STATE = {
 	type: Config.oneOf(types.point).value('bar'),
 };
 
+Soy.register(BarChart, templates);
+
 export {BarChart};
 export default BarChart;
diff --git a/packages/clay-charts/src/BarChart.soy b/packages/clay-charts/src/BarChart.soy
@@ -0,0 +1,8 @@
+{namespace ClayBarChart}
+
+/**
+ * This renders the component's whole content.
+ */
+{template .render}
+	{call ClayChart.render /}
+{/template}
diff --git a/packages/clay-charts/src/BubbleChart.js b/packages/clay-charts/src/BubbleChart.js
@@ -1,4 +1,6 @@
 import Chart from './Chart';
+import Soy from 'metal-soy';
+import templates from './BubbleChart.soy.js';
 import {Config} from 'metal-state';
 
 /**
@@ -27,5 +29,7 @@ BubbleChart.STATE = {
 	type: Config.string().value('bubble'),
 };
 
+Soy.register(BubbleChart, templates);
+
 export {BubbleChart};
 export default BubbleChart;
diff --git a/packages/clay-charts/src/BubbleChart.soy b/packages/clay-charts/src/BubbleChart.soy
@@ -0,0 +1,8 @@
+{namespace ClayBubbleChart}
+
+/**
+ * This renders the component's whole content.
+ */
+{template .render}
+	{call ClayChart.render /}
+{/template}
diff --git a/packages/clay-charts/src/Chart.soy b/packages/clay-charts/src/Chart.soy
@@ -35,7 +35,7 @@
  * This renders the component's loading graphic.
  */
 {template .loading}
-	<div aria-hidden="true" class="loading-icon loading-icon-dotted">
-		<span class="loading-icon-indicator"></span>
+	<div aria-hidden="true" class="loading-icon">
+		<span class="loading-animation"></span>
 	</div>
 {/template}
diff --git a/packages/clay-charts/src/ChartBase.js b/packages/clay-charts/src/ChartBase.js
@@ -171,7 +171,7 @@ const ChartBase = {
 		const config = {
 			area: state.area,
 			axis,
-			bindto: this.refs.chart,
+			bindto: this.element.querySelector('[ref="chart"]'),
 			bubble: state.bubble,
 			color: color,
 			data,
@@ -515,12 +515,15 @@ const ChartBase = {
 	 * @protected
 	 */
 	_handleLoadingChanged({newVal}) {
+		const chart = this.element.querySelector('[ref="chart"]');
+		const placeholder = this.element.querySelector('[ref="placeholder"]');
+
 		if (!newVal) {
-			this.refs.chart.removeAttribute('hidden');
-			this.refs.placeholder.setAttribute('hidden', 'hidden');
+			chart.removeAttribute('hidden');
+			placeholder.setAttribute('hidden', 'hidden');
 		} else {
-			this.refs.chart.setAttribute('hidden', 'hidden');
-			this.refs.placeholder.removeAttribute('hidden');
+			chart.setAttribute('hidden', 'hidden');
+			placeholder.removeAttribute('hidden');
 		}
 	},
 
@@ -702,7 +705,7 @@ ChartBase.STATE = {
 				max: Config.number(),
 			}),
 			fit: Config.bool(),
-			format: Config.func(),
+			format: Config.oneOfType([Config.func(), Config.string()]),
 			multiline: Config.bool(),
 			outer: Config.bool(),
 			rotate: Config.number(),
@@ -1140,8 +1143,14 @@ ChartBase.STATE = {
 		Config.shapeOf({
 			class: Config.string(),
 			enabled: Config.oneOf(['x', 'y']).required(),
-			end: Config.number().required(),
-			start: Config.number().required(),
+			end: Config.oneOfType([
+				Config.number(),
+				Config.string(),
+			]).required(),
+			start: Config.oneOfType([
+				Config.number(),
+				Config.string(),
+			]).required(),
 		})
 	),
 

diff --git a/packages/clay-charts/src/DonutChart.js b/packages/clay-charts/src/DonutChart.js
@@ -1,4 +1,6 @@
 import Chart from './Chart';
+import Soy from 'metal-soy';
+import templates from './DonutChart.soy.js';
 import types from './utils/types';
 import {Config} from 'metal-state';
 
@@ -19,5 +21,7 @@ DonutChart.STATE = {
 	type: Config.oneOf(types.percentage).value('donut'),
 };
 
+Soy.register(DonutChart, templates);
+
 export {DonutChart};
 export default DonutChart;
diff --git a/packages/clay-charts/src/DonutChart.soy b/packages/clay-charts/src/DonutChart.soy
@@ -0,0 +1,8 @@
+{namespace ClayDonutChart}
+
+/**
+ * This renders the component's whole content.
+ */
+{template .render}
+	{call ClayChart.render /}
+{/template}
diff --git a/packages/clay-charts/src/GaugeChart.js b/packages/clay-charts/src/GaugeChart.js
@@ -1,4 +1,6 @@
 import Chart from './Chart';
+import Soy from 'metal-soy';
+import templates from './GaugeChart.soy.js';
 import types from './utils/types';
 import {Config} from 'metal-state';
 
@@ -19,5 +21,7 @@ GaugeChart.STATE = {
 	type: Config.oneOf(types.gauge).value('gauge'),
 };
 
+Soy.register(GaugeChart, templates);
+
 export {GaugeChart};
 export default GaugeChart;
diff --git a/packages/clay-charts/src/GaugeChart.soy b/packages/clay-charts/src/GaugeChart.soy
@@ -0,0 +1,8 @@
+{namespace ClayGaugeChart}
+
+/**
+ * This renders the component's whole content.
+ */
+{template .render}
+	{call ClayChart.render /}
+{/template}
diff --git a/packages/clay-charts/src/LineChart.js b/packages/clay-charts/src/LineChart.js
@@ -1,4 +1,6 @@
 import Chart from './Chart';
+import Soy from 'metal-soy';
+import templates from './LineChart.soy.js';
 import types from './utils/types';
 import {Config} from 'metal-state';
 
@@ -19,5 +21,7 @@ LineChart.STATE = {
 	type: Config.oneOf(types.point).value('line'),
 };
 
+Soy.register(LineChart, templates);
+
 export {LineChart};
 export default LineChart;
diff --git a/packages/clay-charts/src/LineChart.soy b/packages/clay-charts/src/LineChart.soy
@@ -0,0 +1,8 @@
+{namespace ClayLineChart}
+
+/**
+ * This renders the component's whole content.
+ */
+{template .render}
+	{call ClayChart.render /}
+{/template}
diff --git a/packages/clay-charts/src/PieChart.js b/packages/clay-charts/src/PieChart.js
@@ -1,4 +1,6 @@
 import Chart from './Chart';
+import Soy from 'metal-soy';
+import templates from './PieChart.soy.js';
 import types from './utils/types';
 import {Config} from 'metal-state';
 
@@ -19,5 +21,7 @@ PieChart.STATE = {
 	type: Config.oneOf(types.percentage).value('pie'),
 };
 
+Soy.register(PieChart, templates);
+
 export {PieChart};
 export default PieChart;
diff --git a/packages/clay-charts/src/PieChart.soy b/packages/clay-charts/src/PieChart.soy
@@ -0,0 +1,8 @@
+{namespace ClayPieChart}
+
+/**
+ * This renders the component's whole content.
+ */
+{template .render}
+	{call ClayChart.render /}
+{/template}