Merge pull request #581 from accurat/radar

* Radar setup * Radar: create center and spokes * Radar refactor * Radar: Do not render anything if width or height are 0 * Radar: create blobs (wip) * Radar: set colors * Radar: refactor * Radar: create x axes * Radar: refactor * Radar: fix color opacity * Radar: Compute ticks with a minimum value * Radar: draw y axis * Radar: y axes start from the min tick value * Radar: add exit for x axes * Radar: blob creation refactor * Radar: rename classes * Radar: fix class name * Radar: mini refactor * Radar: fix blobs bind * Radar: style changes * Radar: fix min radius logic * Radar: bind displayData to x axes not data * Radar: add transitions * Radar: add key labels (wip) * Radar: change margin value * Radar: fix labels position * fix(core): fix backwards compatibility for pie/donut (#576) * fix(core): fix pie model to ignore dataset name when converting to tabular * apply review changes * provide all datapoint info to stacked bar tooltips (#573) * Merge pull request #574 from theiliad/axis-formatters * optimize axis tick formatting * Update packages/core/src/components/axes/axis.ts Co-Authored-By: natashadecoste <[email protected]> * optimize axis formatter for time-scale when user has already provided one Co-authored-by: natashadecoste <[email protected]> * v0.30.12 * fix(core): Support for Horizontal Line and Scatter Chart * fix line graph update issues * v0.30.13 * Change method name * v0.30.14 * Fix linting problem about methods order * v0.30.15 * Radar: fix y axes transitions * Code comments for tools.ts (#416) * update documentation for tools.ts * docs(tools.ts): api documentation Co-authored-by: Eliad Moosavi <[email protected]> * remove bbox dependency on pie labels * Merge pull request #588 from accurat/invalid-time-value-bug * Fix bug `RangeError Invalid time value` * Extends domain refactor * Time series: add example with addSpaceOnEdge = 0 * Rename functions * Change method order * v0.30.16 * v0.30.17 * Radar: use the new .join d3 method * Use join to manage enter, update, exit logic * Radar: fill missing data * Radar: fix animations but need a refactor * Radar: add events * Radar: add tooltip * Radar: miss an import * Radar: use groupMapsTo * Radar: number of spokes doesn't change * Radar: use groupMapsTo for data mapping * Radar: show NA when data are missing * Radar: add y labels * Radar: remove events on blobs * Radar: left align * Radar: create rectangles over x axis * Radar: make x axis dashed on mouse over * Radar: add dots * Radar: move utility functions in another file * Radar: fix radial label placement for negative angles * Radar: refactor * Radar: radialLabelPlacement refactor * Radar: better logic to center chart * Radar: fix x axis style when overed * Radar: change blobs opacity * Radar: create y axes transition * Radar: create x axes transition * Radar: create blobs transition * Radar: x and y labels transition * Radar: fix transitions * Radar: more left space for y labels * Radar: remove unused imports * Radar: use the right transitions * Radar: remove logs * Radar: remove debug stuff * Radar: update y labels * Radar: fix Firefox bug * Radar: move constants to configuration * Radar: rename variables * Radar: fix typo * Radar: update comments * Radar: move lodash methods inside Tools * Radar: add examples and make radar more generic * Radar: fix tooltip value * Radar: fix tooltip data order * Radar: fix radar default formatter * Radar: fix showing dots * Radar: use variable instead of recompute value * Radar: create enums from textAnchor and dominantBaseline values * Radar: put dots radius to radar configuration * Radar: use tabs instead of spaces * Radar: use helper function for accesing properties * Radar: get property from options Co-authored-by: natashadecoste <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]> Co-authored-by: carbon-bot <[email protected]> Co-authored-by: Serena Girardi <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]>
carbon-design-system · May 8, 2020 · f9cccca · f9cccca
1 parent 9b6c9c3
commit f9cccca
Show file tree

Hide file tree

Showing 15 changed files with 852 additions and 1 deletion.
diff --git a/packages/core/demo/data/index.ts b/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;
 

diff --git a/packages/core/demo/data/radar.ts b/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"
+	}
+};
diff --git a/packages/core/src/charts/index.ts b/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";
diff --git a/packages/core/src/charts/radar.ts b/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;
+	}
+}
diff --git a/packages/core/src/components/essentials/tooltip-radar.ts b/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>";
+	}
+}