Merge pull request #710 from sophiiae/pie-align-center

* improvement: align center flag for non-axis charts and legend * style: formatting the code * fix: fix centering offset for pie * improvement: use enum for chart and legend alignment add enum, set default alignment, add center and right alignment for non-axis charts and legend Co-authored-by: Fei <[email protected]>
carbon-design-system · Jul 21, 2020 · 3c1c570 · 3c1c570
1 parent 8827f55
commit 3c1c570
Show file tree

Hide file tree

Showing 14 changed files with 243 additions and 39 deletions.
diff --git a/packages/core/demo/data/bar.ts b/packages/core/demo/data/bar.ts
@@ -115,6 +115,24 @@ export const simpleBarOptionsCustomTicks = {
 	}
 };
 
+export const simpleBarCenteredLegendData = simpleBarData;
+
+export const simpleBarCenteredLegendOptions = {
+	title: "Simple bar (centered legend)",
+	axes: {
+		left: {
+			mapsTo: "value"
+		},
+		bottom: {
+			mapsTo: "group",
+			scaleType: "labels"
+		}
+	},
+	legend: {
+		alignment: "center"
+	}
+}
+
 // Simple bar with long labels
 export const simpleBarLongLabelData = [
 	{
@@ -191,6 +209,24 @@ export const simpleHorizontalBarOptions = {
 	}
 };
 
+export const simpleHorizontalBarCenteredLegendData = simpleBarData;
+
+export const simpleHorizontalBarCenteredLegendOptions = {
+	title: "Simple horizontal bar (centered legend)",
+	axes: {
+		left: {
+			mapsTo: "group",
+			scaleType: "labels"
+		},
+		bottom: {
+			mapsTo: "value"
+		}
+	},
+	legend: {
+		alignment: "center"
+	}
+}
+
 export const simpleHorizontalBarLongLabelOptions = {
 	title: "Simple horizontal bar (truncated labels)",
 	axes: {

diff --git a/packages/core/demo/data/donut.ts b/packages/core/demo/data/donut.ts
@@ -12,6 +12,22 @@ export const donutOptions = {
 	}
 };
 
+export const donutCenteredData = pieData;
+
+export const donutCenteredOptions = {
+	title: "Donut (centered)",
+	resizable: true,
+	legend: {
+		alignment: "center"
+	},
+	donut: {
+		center: {
+			label: "Browsers"
+		},
+		alignment: "center"
+	}
+}
+
 // donut - empty state
 export const donutEmptyStateData = [];
 export const donutEmptyStateOptions = {

diff --git a/packages/core/demo/data/index.ts b/packages/core/demo/data/index.ts
@@ -154,20 +154,25 @@ let allDemoGroups = [
 				chartType: chartTypes.SimpleBarChart,
 				isDemoExample: false
 			},
+			{
+				options: barDemos.simpleBarCenteredLegendOptions,
+				data: barDemos.simpleBarCenteredLegendData,
+				chartType: chartTypes.SimpleBarChart
+			},
 			{
 				options: barDemos.simpleBarLongLabelOptions,
 				data: barDemos.simpleBarLongLabelData,
 				chartType: chartTypes.SimpleBarChart,
 				isDemoExample: true
 			},
 			{
-				options: barDemos.simpleBarTimeSeriesOptions,
-				data: barDemos.simpleBarTimeSeriesData,
+				options: barDemos.simpleBarFixedDomainOptions,
+				data: barDemos.simpleBarData,
 				chartType: chartTypes.SimpleBarChart
 			},
 			{
-				options: barDemos.simpleBarFixedDomainOptions,
-				data: barDemos.simpleBarData,
+				options: barDemos.simpleBarTimeSeriesOptions,
+				data: barDemos.simpleBarTimeSeriesData,
 				chartType: chartTypes.SimpleBarChart
 			},
 			{
@@ -246,6 +251,11 @@ let allDemoGroups = [
 				data: barDemos.simpleHorizontalBarData,
 				chartType: chartTypes.SimpleBarChart
 			},
+			{
+				options: barDemos.simpleHorizontalBarCenteredLegendOptions,
+				data: barDemos.simpleHorizontalBarCenteredLegendData,
+				chartType: chartTypes.SimpleBarChart
+			},
 			{
 				options: barDemos.simpleHorizontalBarLongLabelOptions,
 				data: barDemos.simpleHorizontalBarLongLabelData,
@@ -352,6 +362,11 @@ let allDemoGroups = [
 				data: donutDemos.donutData,
 				chartType: chartTypes.DonutChart
 			},
+			{
+				options: donutDemos.donutCenteredOptions,
+				data: donutDemos.donutCenteredData,
+				chartType: chartTypes.DonutChart
+			},
 			{
 				options: donutDemos.donutEmptyStateOptions,
 				data: donutDemos.donutEmptyStateData,
@@ -372,38 +387,43 @@ let allDemoGroups = [
 			"Line charts plot data at regular intervals connected by lines. You can use line visualizations to show trends over time and compare several data sets.",
 		demos: [
 			{
-				options: lineDemos.lineTimeSeriesOptions,
-				data: lineDemos.lineTimeSeriesData,
+				options: lineDemos.lineOptions,
+				data: lineDemos.lineData,
 				chartType: chartTypes.LineChart
 			},
 			{
-				options: lineDemos.lineTimeSeriesCustomDomainOptions,
-				data: lineDemos.lineTimeSeriesData,
+				options: lineDemos.lineCenteredLegendOptions,
+				data: lineDemos.lineCenteredLegendData,
 				chartType: chartTypes.LineChart
 			},
 			{
-				options: lineDemos.lineTimeSeriesDenseOptions,
-				data: lineDemos.lineTimeSeriesDenseData,
+				options: lineDemos.lineLongLabelOptions,
+				data: lineDemos.lineLongLabelData,
 				chartType: chartTypes.LineChart
 			},
 			{
-				options: lineDemos.lineOptions,
+				options: lineDemos.lineCustomDomainOptions,
 				data: lineDemos.lineData,
 				chartType: chartTypes.LineChart
 			},
 			{
-				options: lineDemos.lineLongLabelOptions,
-				data: lineDemos.lineLongLabelData,
+				options: lineDemos.lineSelectedGroupsOptions,
+				data: lineDemos.lineSelectedGroupsData,
 				chartType: chartTypes.LineChart
 			},
 			{
-				options: lineDemos.lineCustomDomainOptions,
-				data: lineDemos.lineData,
+				options: lineDemos.lineTimeSeriesOptions,
+				data: lineDemos.lineTimeSeriesData,
 				chartType: chartTypes.LineChart
 			},
 			{
-				options: lineDemos.lineSelectedGroupsOptions,
-				data: lineDemos.lineSelectedGroupsData,
+				options: lineDemos.lineTimeSeriesCustomDomainOptions,
+				data: lineDemos.lineTimeSeriesData,
+				chartType: chartTypes.LineChart
+			},
+			{
+				options: lineDemos.lineTimeSeriesDenseOptions,
+				data: lineDemos.lineTimeSeriesDenseData,
 				chartType: chartTypes.LineChart
 			},
 			{
@@ -413,14 +433,14 @@ let allDemoGroups = [
 				isDemoExample: false
 			},
 			{
-				options: lineDemos.lineTimeSeriesHorizontalOptions,
-				data: lineDemos.lineTimeSeriesData,
+				options: lineDemos.lineHorizontalOptions,
+				data: lineDemos.lineData,
 				chartType: chartTypes.LineChart,
 				isDemoExample: false
 			},
 			{
-				options: lineDemos.lineHorizontalOptions,
-				data: lineDemos.lineData,
+				options: lineDemos.lineTimeSeriesHorizontalOptions,
+				data: lineDemos.lineTimeSeriesData,
 				chartType: chartTypes.LineChart,
 				isDemoExample: false
 			},
@@ -466,6 +486,11 @@ let allDemoGroups = [
 				data: pieDemos.pieData,
 				chartType: chartTypes.PieChart
 			},
+			{
+				options: pieDemos.pieCenteredOptions,
+				data: pieDemos.pieCenteredData,
+				chartType: chartTypes.PieChart
+			},
 			{
 				options: pieDemos.pieEmptyStateOptions,
 				data: pieDemos.pieEmptyStateData,
@@ -708,6 +733,11 @@ let allDemoGroups = [
 				options: radarDemos.radarOptions,
 				chartType: chartTypes.RadarChart
 			},
+			{
+				data: radarDemos.radarCenteredData,
+				options: radarDemos.radarCenteredOptions,
+				chartType: chartTypes.RadarChart
+			},
 			{
 				data: radarDemos.radarWithMissingDataData,
 				options: radarDemos.radarWithMissingDataOptions,

diff --git a/packages/core/demo/data/line.ts b/packages/core/demo/data/line.ts
@@ -39,6 +39,27 @@ export const lineOptions = {
 	}
 };
 
+export const lineCenteredLegendData = lineData;
+
+export const lineCenteredLegendOptions = {
+	title: "Line (centered legend)",
+	axes: {
+		bottom: {
+			title: "2019 Annual Sales Figures",
+			mapsTo: "key",
+			scaleType: "labels"
+		},
+		left: {
+			mapsTo: "value",
+			title: "Conversion rate",
+			scaleType: "linear"
+		}
+	},
+	legend: {
+		alignment: "center"
+	}
+}
+
 export const lineLongLabelData = [
 	{ group: "Dataset 1", key: "Qty", value: 34200 },
 	{ group: "Dataset 1", key: "More", value: 23500 },

diff --git a/packages/core/demo/data/pie.ts b/packages/core/demo/data/pie.ts
@@ -12,6 +12,19 @@ export const pieOptions = {
 	resizable: true
 };
 
+export const pieCenteredData = pieData;
+
+export const pieCenteredOptions = {
+	title: "Pie (centered)",
+	resizable: true,
+	legend: {
+		alignment: "center"
+	},
+	pie: {
+		alignment: "center"
+	}
+}
+
 // pie - empty state
 export const pieEmptyStateData = [];
 export const pieEmptyStateOptions = {

diff --git a/packages/core/demo/data/radar.ts b/packages/core/demo/data/radar.ts
@@ -24,6 +24,25 @@ export const radarOptions = {
 	}
 };
 
+export const radarCenteredData = radarData;
+
+export const radarCenteredOptions = {
+	title: "Radar (centered)",
+	radar: {
+		axes: {
+			angle: "feature",
+			value: "score"
+		},
+		alignment: "center"
+	},
+	data: {
+		groupMapsTo: "product"
+	},
+	legend: {
+		alignment: "center"
+	}
+}
+
 // radar with missing data
 export const radarWithMissingDataData = [
 	{ group: "Sugar", key: "London", value: 25 },

diff --git a/packages/core/src/components/essentials/legend.ts b/packages/core/src/components/essentials/legend.ts
@@ -114,6 +114,11 @@ export class Legend extends Component {
 		if (legendClickable && addedLegendItems.size() > 0) {
 			this.addEventListeners();
 		}
+
+		const alignment = Tools.getProperty(legendOptions,"alignment");
+
+		const alignmentOffset = DOMUtils.getAlignmentOffset(alignment, svg, this.getParent());
+		svg.attr("transform", `translate(${alignmentOffset}, 0)`);
 	}
 
 	breakItemsIntoLines(addedLegendItems) {

diff --git a/packages/core/src/components/graphs/pie.ts b/packages/core/src/components/graphs/pie.ts
@@ -226,8 +226,16 @@ export class Pie extends Component {
 		// Render pie label callouts
 		this.renderCallouts(calloutData);
 
+		const optionName = Tools.getProperty(options, "donut") ? "donut" : "pie";
+		const alignment = Tools.getProperty(
+			options,
+			optionName,
+			"alignment"
+		);
+		const alignmentOffset = DOMUtils.getAlignmentOffset(alignment, svg, this.getParent());
+
 		// Position Pie
-		const pieTranslateX = radius + options.pie.xOffset;
+		const pieTranslateX = radius + options.pie.xOffset + alignmentOffset;
 		let pieTranslateY = radius + options.pie.yOffset;
 		if (calloutData.length > 0) {
 			pieTranslateY += options.pie.yOffsetCallout;