Implement radar chart | Fixes #1080

packages/clay-charts/demos/index.html

@@ -168,6 +168,11 @@ <h2>Predictive Forecasting</h2>
 		<div id="predictive"></div>
 	</div>
 
+	<div class="clay-chart-example">
+		<h2>Radar</h2>
+		<div id="radar"></div>
+	</div>
+
 	<div id="controls" style="display: none;">
 		<label>
 			Change type:
@@ -526,6 +531,29 @@ <h2>Predictive Forecasting</h2>
 			console.log('Chart Error', err);
 		});
 
+		var radarChart = new metal.RadarChart({
+			data: [
+				{
+					data: [330, 350, 200, 380, 150],
+					id: 'data1',
+				},
+				{
+					data: [130, 100, 30, 200, 80],
+					id: 'data2',
+				},
+				{
+					data: [230, 150, 85, 300, 250],
+					id: 'data3',
+				},
+				{
+					data: ['Data A', 'Data B', 'Data C', 'Data D', 'Data E'],
+					id: 'x',
+				},
+			],
+			labels: true,
+			x: 'x',
+		}, '#radar');
+
 		function createChartControls(chart, type, data) {
 			var element = document.getElementById(type);
 

packages/clay-charts/demos/jsx.html

@@ -146,6 +146,11 @@ <h2>Predictive Forecasting</h2>
 		<div id="predictive"></div>
 	</div>
 
+	<div class="clay-chart-example">
+		<h2>Radar</h2>
+		<div id="radar"></div>
+	</div>
+
 	<div id="controls" style="display: none;">
 		<label>
 			Change type:
@@ -444,6 +449,29 @@ <h2>Predictive Forecasting</h2>
 			console.log('Chart Error', err);
 		});
 
+		var radarChart = new metal.RadarChart({
+			data: [
+				{
+					data: [330, 350, 200, 380, 150],
+					id: 'data1',
+				},
+				{
+					data: [130, 100, 30, 200, 80],
+					id: 'data2',
+				},
+				{
+					data: [230, 150, 85, 300, 250],
+					id: 'data3',
+				},
+				{
+					data: ['Data A', 'Data B', 'Data C', 'Data D', 'Data E'],
+					id: 'x',
+				},
+			],
+			labels: true,
+			x: 'x',
+		}, '#radar');
+
 		function createChartControls(chart, type, data) {
 			var element = document.getElementById(type);
 

packages/clay-charts/src/RadarChart.js

@@ -0,0 +1,66 @@
+import Chart from './Chart';
+import Soy from 'metal-soy';
+import templates from './RadarChart.soy.js';
+import types from './utils/types';
+import {Config} from 'metal-state';
+
+/**
+ * Radar Chart Component
+ * @augments Chart
+ */
+class RadarChart extends Chart {}
+
+RadarChart.STATE = {
+	/**
+	 * Labels visibility
+	 * @default true
+	 * @instance
+	 * @memberof RadarChart
+	 * @type {Boolean}
+	 */
+	labels: Config.bool().value(true),
+
+	/**
+	 * Set radar options
+	 * @default undefined
+	 * @instance
+	 * @memberof RadarChart
+	 * @type {?Object}
+	 *
+	 */
+	radar: Config.shapeOf({
+		axis: Config.shapeOf({
+			line: Config.shapeOf({
+				show: Config.bool(),
+			}),
+			max: Config.number(),
+			text: Config.shapeOf({
+				show: Config.bool(),
+			}),
+		}),
+		level: Config.shapeOf({
+			show: Config.bool(),
+			text: Config.shapeOf({
+				format: Config.func(),
+				show: Config.bool(),
+			}),
+		}),
+		size: Config.shapeOf({
+			ratio: Config.number(),
+		}),
+	}),
+
+	/**
+	 * The variety of chart that will be rendered.
+	 * @default radar
+	 * @instance
+	 * @memberof AreaLineChart
+	 * @type {?(string|undefined)}
+	 */
+	type: Config.oneOf(types.radar).value('radar'),
+};
+
+Soy.register(RadarChart, templates);
+
+export {RadarChart};
+export default RadarChart;

packages/clay-charts/src/RadarChart.soy

@@ -0,0 +1,8 @@
+{namespace ClayRadarChart}
+
+/**
+ * This renders the component's whole content.
+ */
+{template .render}
+	{call ClayChart.render /}
+{/template}

packages/clay-charts/src/__tests__/RadarChart.js

@@ -0,0 +1,30 @@
+import {bb} from 'billboard.js';
+import RadarChart from '../RadarChart';
+
+beforeAll(() => {
+	jest.spyOn(bb, 'generate').mockImplementation();
+});
+
+beforeEach(() => {
+	bb.generate.mockReset();
+});
+
+afterAll(() => {
+	bb.generate.mockReset();
+	bb.generate.mockRestore();
+});
+
+describe('RadarChart', () => {
+	it('should be pass correct type to billboard.js', done => {
+		const chart = new RadarChart({
+			data: [],
+		});
+
+		chart.on('chartReady', () => {
+			const config = bb.generate.mock.calls[0][0];
+
+			expect(config.data.type).toBe('radar');
+			done();
+		});
+	});
+});

packages/clay-charts/src/charts.js

@@ -10,6 +10,7 @@ import Geomap from './Geomap';
 import LineChart from './LineChart';
 import PieChart from './PieChart';
 import PredictiveChart from './PredictiveChart';
+import RadarChart from './RadarChart';
 import ScatterChart from './ScatterChart';
 import SplineChart from './SplineChart';
 import StepChart from './StepChart';
@@ -30,6 +31,7 @@ export {
 	LineChart,
 	PieChart,
 	PredictiveChart,
+	RadarChart,
 	ScatterChart,
 	SplineChart,
 	StepChart,

packages/clay-charts/src/jsx/RadarChart.js

@@ -0,0 +1,13 @@
+import Chart from './Chart';
+import {RadarChart as RadarChartBase} from '../RadarChart';
+
+/**
+ * Radar Chart component.
+ * @augments Chart
+ */
+class RadarChart extends Chart {}
+
+RadarChart.PROPS = RadarChartBase.STATE;
+
+export {RadarChart};
+export default RadarChart;

packages/clay-charts/src/jsx/charts.js

@@ -10,6 +10,7 @@ import Geomap from './Geomap';
 import LineChart from './LineChart';
 import PieChart from './PieChart';
 import PredictiveChart from './PredictiveChart';
+import RadarChart from './RadarChart';
 import ScatterChart from './ScatterChart';
 import SplineChart from './SplineChart';
 import StepChart from './StepChart';
@@ -30,6 +31,7 @@ export {
 	LineChart,
 	PieChart,
 	PredictiveChart,
+	RadarChart,
 	ScatterChart,
 	SplineChart,
 	StepChart,

packages/clay-charts/src/scss/components/_radar.scss

@@ -0,0 +1,33 @@
+.bb-chart-radars {
+  .bb-levels {
+    polygon {
+      fill: none;
+      stroke: #848282;
+      stroke-width: .5px;
+    }
+
+    text {
+      fill: #848282;
+    }
+  }
+
+  .bb-axis {
+    line {
+      stroke: #848282;
+      stroke-width: .5px;
+    }
+
+    text {
+      font-size: 1.15em;
+      cursor: default;
+    }
+  }
+
+  .bb-shapes {
+    polygon {
+      fill-opacity: .2;
+      stroke-width: 1px;
+    }
+  }
+}
+

packages/clay-charts/src/scss/main.scss

@@ -10,6 +10,7 @@
 @import "components/line";
 @import "components/loading";
 @import "components/point";
+@import "components/radar";
 @import "components/region";
 @import "components/select_drag";
 @import "components/text";

packages/clay-charts/src/utils/types.js

@@ -13,6 +13,7 @@ const types = {
 		'gauge',
 		'line',
 		'pie',
+		'radar',
 		'scatter',
 		'spline',
 		'step',
@@ -40,6 +41,8 @@ const types = {
 		'spline',
 		'step',
 	],
+
+	radar: ['radar'],
 };
 
 export {types};

packages/clay-isomorphic/fixtures/expected/ClayRadarChart.render

@@ -0,0 +1 @@
+<div class="metal-chart-container"><div class="metal-chart" ref="chart"></div><div hiddenref="placeholder"><div aria-hidden="true" class="loading-icon"><span class="loading-animation"></span></div></div></div>

packages/clay-isomorphic/fixtures/input/ClayRadarChart.render

@@ -0,0 +1,3 @@
+{
+
+}