Radar

packages/core/demo/data/index.ts

@@ -6,6 +6,7 @@ import * as pieDemos from "./pie";
 import * as scatterDemos from "./scatter";
 import * as stepDemos from "./step";
 import * as timeSeriesAxisDemos from "./time-series-axis";
+import * as radarDemos from "./radar";
 
 export * from "./bar";
 export * from "./bubble";
@@ -14,6 +15,7 @@ export * from "./line";
 export * from "./pie";
 export * from "./scatter";
 export * from "./step";
+export * from "./radar";
 
 import {
 	createChartSandbox,
@@ -66,6 +68,11 @@ export const chartTypes = {
 		vanilla: "DonutChart",
 		angular: "ibm-donut-chart",
 		vue: "ccv-donut-chart"
+	},
+	RadarChart: {
+		vanilla: "RadarChart",
+		angular: "ibm-radar-chart",
+		vue: "ccv-radar-chart"
 	}
 };
 
@@ -336,6 +343,26 @@ let allDemoGroups = [
 				chartType: chartTypes.LineChart
 			}
 		]
+	},
+	{
+		title: "Radar",
+		demos: [
+			{
+				data: radarDemos.radarData,
+				options: radarDemos.radarOptions,
+				chartType: chartTypes.RadarChart
+			},
+			{
+				data: radarDemos.radarWithMissingDataData,
+				options: radarDemos.radarWithMissingDataOptions,
+				chartType: chartTypes.RadarChart
+			},
+			{
+				data: radarDemos.radarDenseData,
+				options: radarDemos.radarDenseOptions,
+				chartType: chartTypes.RadarChart
+			}
+		]
 	}
 ] as any;
 

packages/core/demo/data/radar.ts

@@ -0,0 +1,103 @@
+
+// simple radar
+export const radarData = [
+	{ product: "Product 1", feature: "Price", score: 60 },
+	{ product: "Product 1", feature: "Usability", score: 92 },
+	{ product: "Product 1", feature: "Availability", score: 5 },
+	{ product: "Product 1", feature: "Performance", score: 85 },
+	{ product: "Product 1", feature: "Quality", score: 60 },
+	{ product: "Product 2", feature: "Price", score: 70 },
+	{ product: "Product 2", feature: "Usability", score: 63 },
+	{ product: "Product 2", feature: "Availability", score: 78 },
+	{ product: "Product 2", feature: "Performance", score: 50 },
+	{ product: "Product 2", feature: "Quality", score: 30 }
+];
+export const radarOptions = {
+	title: "Radar",
+	radar: {
+		axes: {
+			angle: "feature",
+			value: "score"
+		}
+	},
+	data: {
+		groupMapsTo: "product"
+	}
+};
+
+// radar with missing data
+export const radarWithMissingDataData = [
+	{ group: "Sugar", key: "London", value: 25 },
+	{ group: "Oil", key: "London", value: 6 },
+	{ group: "Water", key: "London", value: 12 },
+	{ group: "Sugar", key: "Milan", value: 13 },
+	{ group: "Oil", key: "Milan", value: 6 },
+	{ group: "Water", key: "Milan", value: 28 },
+	{ group: "Sugar", key: "Paris", value: 19 },
+	{ group: "Oil", key: "Paris", value: 16 },
+	{ group: "Water", key: "Paris", value: 10 },
+	{ group: "Sugar", key: "New York", value: 11 },
+	{ group: "Oil", key: "New York", value: 18 },
+	{ group: "Water", key: "New York", value: 8 },
+	{ group: "Sugar", key: "Sydney", value: 12 },
+	{ group: "Oil", key: "Sydney", value: 16 }
+];
+export const radarWithMissingDataOptions = {
+	title: "Radar - Missing data"
+};
+
+// radar dense
+export const radarDenseData = [
+	{ month: "January", activity: "Eating", hoursAvg: 2 },
+	{ month: "January", activity: "Drinking", hoursAvg: 6 },
+	{ month: "January", activity: "Sleeping", hoursAvg: 6 },
+	{ month: "January", activity: "Working", hoursAvg: 8 },
+	{ month: "January", activity: "Walking", hoursAvg: 1 },
+	{ month: "January", activity: "Running", hoursAvg: 0.5 },
+	{ month: "January", activity: "Cycling", hoursAvg: 1 },
+	{ month: "January", activity: "Swimming", hoursAvg: 0 },
+	{ month: "February", activity: "Eating", hoursAvg: 1.5 },
+	{ month: "February", activity: "Drinking", hoursAvg: 9 },
+	{ month: "February", activity: "Sleeping", hoursAvg: 7 },
+	{ month: "February", activity: "Working", hoursAvg: 9 },
+	{ month: "February", activity: "Walking", hoursAvg: 2 },
+	{ month: "February", activity: "Running", hoursAvg: 2 },
+	{ month: "February", activity: "Cycling", hoursAvg: 0 },
+	{ month: "February", activity: "Swimming", hoursAvg: 1.5 },
+	{ month: "March", activity: "Eating", hoursAvg: 3 },
+	{ month: "March", activity: "Drinking", hoursAvg: 5 },
+	{ month: "March", activity: "Sleeping", hoursAvg: 5 },
+	{ month: "March", activity: "Working", hoursAvg: 6 },
+	{ month: "March", activity: "Walking", hoursAvg: 3 },
+	{ month: "March", activity: "Running", hoursAvg: 9 },
+	{ month: "March", activity: "Cycling", hoursAvg: 1 },
+	{ month: "March", activity: "Swimming", hoursAvg: 7 },
+	{ month: "April", activity: "Eating", hoursAvg: 5 },
+	{ month: "April", activity: "Drinking", hoursAvg: 1 },
+	{ month: "April", activity: "Sleeping", hoursAvg: 4 },
+	{ month: "April", activity: "Working", hoursAvg: 2 },
+	{ month: "April", activity: "Walking", hoursAvg: 5 },
+	{ month: "April", activity: "Running", hoursAvg: 4 },
+	{ month: "April", activity: "Cycling", hoursAvg: 6 },
+	{ month: "April", activity: "Swimming", hoursAvg: 3 },
+	{ month: "May", activity: "Eating", hoursAvg: 7 },
+	{ month: "May", activity: "Drinking", hoursAvg: 0 },
+	{ month: "May", activity: "Sleeping", hoursAvg: 5 },
+	{ month: "May", activity: "Working", hoursAvg: 4 },
+	{ month: "May", activity: "Walking", hoursAvg: 8 },
+	{ month: "May", activity: "Running", hoursAvg: 2 },
+	{ month: "May", activity: "Cycling", hoursAvg: 3 },
+	{ month: "May", activity: "Swimming", hoursAvg: 1 }
+];
+export const radarDenseOptions = {
+	title: "Radar - Dense",
+	radar: {
+		axes: {
+			angle: "activity",
+			value: "hoursAvg"
+		}
+	},
+	data: {
+		groupMapsTo: "month"
+	}
+};

packages/core/src/charts/index.ts

@@ -6,3 +6,4 @@ export * from "./line";
 export * from "./scatter";
 export * from "./pie";
 export * from "./donut";
+export * from "./radar";

packages/core/src/charts/radar.ts

@@ -0,0 +1,53 @@
+// Internal Imports
+import { Chart } from "../chart";
+import * as Configuration from "../configuration";
+import {
+	ChartConfig,
+	RadarChartOptions
+} from "../interfaces/index";
+import { Tools } from "../tools";
+
+// Components
+import {
+	// the imports below are needed because of typescript bug (error TS4029)
+	Legend,
+	LayoutComponent,
+	TooltipRadar
+} from "../components/index";
+import { Radar } from "../components/graphs/radar";
+
+export class RadarChart extends Chart {
+	// TODO - Optimize the use of "extending"
+	constructor(holder: Element, chartConfigs: ChartConfig<RadarChartOptions>, extending = false) {
+		super(holder, chartConfigs);
+
+		// TODO - Optimize the use of "extending"
+		if (extending) {
+			return;
+		}
+
+		// Merge the default options for this chart
+		// With the user provided options
+		this.model.setOptions(
+			Tools.mergeDefaultChartOptions(
+				Configuration.options.radarChart,
+				chartConfigs.options
+			)
+		);
+
+		// Initialize data, services, components etc.
+		this.init(holder, chartConfigs);
+	}
+
+	getComponents() {
+		// Specify what to render inside the graph-frame
+		const graphFrameComponents = [
+			new Radar(this.model, this.services)
+		];
+
+		// get the base chart components and export with tooltip
+		const components: any[] = this.getChartComponents(graphFrameComponents);
+		components.push(new TooltipRadar(this.model, this.services));
+		return components;
+	}
+}

packages/core/src/components/essentials/tooltip-radar.ts

@@ -0,0 +1,33 @@
+import { Tooltip } from "./tooltip";
+import { Tools } from "../../tools";
+
+export class TooltipRadar extends Tooltip {
+	getMultilineTooltipHTML(data: any) {
+		const options = this.model.getOptions();
+		const { groupMapsTo } = options.data;
+		const { angle, value } = options.radar.axes;
+
+		// sort them so they are in the same order as the graph
+		data.sort((a, b) => b[value] - a[value]);
+
+		return  "<ul class='multi-tooltip'>" +
+			data.map(datum => {
+				const userProvidedValueFormatter = Tools.getProperty(options, "tooltip", "valueFormatter");
+				const formattedValue = userProvidedValueFormatter
+					? userProvidedValueFormatter(datum[value])
+					: datum[value];
+
+				// For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.
+				const indicatorColor = this.model.getStrokeColor(datum[groupMapsTo]);
+
+				return `
+				<li>
+					<div class="datapoint-tooltip">
+						<a style="background-color:${indicatorColor}" class="tooltip-color"></a>
+						<p class="label">${datum[groupMapsTo]}</p>
+						<p class="value">${formattedValue}</p>
+					</div>
+				</li>`;
+			}).join("") + "</ul>";
+	}
+}