Create data API to replace columns in Charts

Fixes liferay#526

packages/clay-charts/demos/data/dummy-data-columns-1.json

@@ -0,0 +1,21 @@
+{
+	"data": [
+		{
+			"data": [20, 60, 80, 100, 60, 40],
+			"id": "sample_data_special",
+			"name": "First data"
+		},
+		{
+			"data": [500, 230, 110, 410, 150, 250],
+			"id": "data2"
+		},
+		{
+			"data": [550, 290, 350, 240, 190, 25],
+			"id": "data3"
+		},
+		{
+			"data": [100, 130, 310, 520, 580, 210],
+			"id": "data4"
+		}
+	]
+}

packages/clay-charts/demos/data/dummy-data-columns-2.json

@@ -0,0 +1,14 @@
+{
+	"data": [
+		{
+			"color": "darkblue",
+			"data": [30, 90, 60, 50, 35, 80],
+			"id": "data1",
+			"name": "Data 1 (darkblue)"
+		},
+		{
+			"data": [100, 200, 300, 400, 150, 250],
+			"id": "data2"
+		}
+	]
+}

packages/clay-charts/demos/geomap.html

@@ -27,6 +27,12 @@ <h3>Metal Geomap</h3>
 	</div>
 
 	<script type="text/javascript">
+		var data = {
+			features: [{
+				properties: {},
+			}],
+		};
+
 		var geomap = new metal.Geomap({
 			color: {
 				range: {
@@ -36,7 +42,23 @@ <h3>Metal Geomap</h3>
 				selected: '#ff3300',
 				value: 'gdp_md_est',
 			},
-			data: 'data/world-low-res.geo.json',
+
+			// Pass data as a string
+			// data: 'data/world-low-res.geo.json',
+
+			// Pass data as an object
+			// data: {
+			//   features: [{
+			//     properties: {},
+			//   }],
+			// },
+
+			// Pass data as a Promise
+			data: () => {
+				return fetch('data/world-low-res.geo.json')
+					.then(res => res.json());
+			},
+
 		}, '#map');
 
 

packages/clay-charts/demos/index.html

@@ -338,8 +338,41 @@ <h2>Bubble</h2>
 			]
 		};
 
-		var lineChart = new metal.LineChart({
-			columns: dummyData.columns_1,
+		var lineChartData = {
+			columns_1: 'data/dummy-data-columns-1.json',
+			columns_2: 'data/dummy-data-columns-2.json',
+			columns_3: function() {
+				return Promise.resolve([
+					{
+						data: [230, 190, 300, 500, 300, 400],
+						id: 'data1',
+						name: 'Data 1 (this data set has 3 columns)'
+					},
+					{
+						data: [50, 20, 10, 40, 15, 25],
+						id: 'data2'
+					},
+					{
+						data: [130, 150, 200, 300, 200, 100],
+						id: 'data3'
+					}
+				])
+			},
+			columns_4: [
+				{
+					data: [50, 20, 10, 40, 15, 25],
+					id: 'data1',
+					name: 'Data 1'
+				},
+				{
+					data: [130, 150, 200, 300, 200, 100],
+					id: 'data2'
+				}
+			]
+		};
+
+		var lineChartWithData = new metal.LineChart({
+			columns: lineChartData.columns_1,
 			tooltip: {
 				format: {
 					value(d) {
@@ -352,45 +385,45 @@ <h2>Bubble</h2>
 					position: 'right'
 			},
 		}, '#line');
-		createChartControls(lineChart, 'line');
+		createChartControls(lineChartWithData, 'line', lineChartData);
 
 		var splineChart = new metal.SplineChart({
-			columns: dummyData.columns_1
+			data: dummyData.columns_1
 		}, '#spline');
 		createChartControls(splineChart, 'spline');
 
 		var stepChart = new metal.StepChart({
-			columns: dummyData.columns_1
+			data: dummyData.columns_1
 		}, '#step');
 		createChartControls(stepChart, 'step');
 
 		var areaLineChart = new metal.AreaLineChart({
-			columns: dummyData.columns_1
+			data: dummyData.columns_1
 		}, '#area');
 		createChartControls(areaLineChart, 'area');
 
 		var areaSplineChart = new metal.AreaSplineChart({
-			columns: dummyData.columns_2
+			data: dummyData.columns_2
 		}, '#area-spline');
 		createChartControls(areaSplineChart, 'area-spline');
 
 		var areaStepChart = new metal.AreaStepChart({
-			columns: dummyData.columns_3
+			data: dummyData.columns_3
 		}, '#area-step');
 		createChartControls(areaStepChart, 'area-step');
 
 		var barChart = new metal.BarChart({
-			columns: dummyData.columns_1
+			data: dummyData.columns_1
 		}, '#bar');
 		createChartControls(barChart, 'bar');
 
 		var scatterChart = new metal.ScatterChart({
-			columns: dummyData.columns_1
+			data: dummyData.columns_1
 		}, '#scatter');
 		createChartControls(scatterChart, 'scatter');
 
 		var pieChart = new metal.PieChart({
-			columns: dummyPercentData.columns_1,
+			data: dummyPercentData.columns_1,
 			color: {
 				tiles: true
 			},
@@ -409,25 +442,25 @@ <h2>Bubble</h2>
 		createChartControls(pieChart, 'pie', dummyPercentData);
 
 		var donutChart = new metal.DonutChart({
-			columns: dummyPercentData.columns_1,
+			data: dummyPercentData.columns_1,
 		}, '#donut');
 		createChartControls(donutChart, 'donut', dummyPercentData);
 
 		var gaugeChart = new metal.GaugeChart({
-			columns: dummyGaugeData.columns_1
+			data: dummyGaugeData.columns_1
 		}, '#gauge');
 		createChartControls(gaugeChart, 'gauge', dummyGaugeData);
 
 		var bubbleChart = new metal.BubbleChart({
 			bubble: {
 				maxR: 50
 			},
-			columns: dummyData.columns_1,
+			data: dummyData.columns_1,
 			labels: false,
 			point: {
 				pattern: ['circle']
 			},
-			type: 'bubble',
+			type: 'bubble'
 		}, '#bubble');
 
 		function createChartControls(chart, type, data) {
@@ -451,7 +484,8 @@ <h2>Bubble</h2>
 
 			dataSelect.addEventListener('change', function(event) {
 				chart.loading = false;
-				chart.columns = data ? data[dataSelect.value] : dummyData[dataSelect.value];
+
+				chart.data = data ? data[dataSelect.value] : dummyData[dataSelect.value];
 			});
 
 			element.parentNode.appendChild(chartControls);