feat(core): add title element to main SVG (carbon-design-system#704)

* feat(core, angular, vue, react, svelte): add title element to main SVG * format
theiliad · Jul 14, 2020 · 2f021b4 · 2f021b4
1 parent c899054
commit 2f021b4
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 57 deletions.
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -1,27 +1,20 @@
 # Change Log
 
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
 ## [0.33.1](https://github.com/carbon-design-system/carbon-charts/compare/v0.33.0...v0.33.1) (2020-07-08)
 
-
 ### Bug Fixes
 
-* fix bar chart tooltip data ([#692](https://github.com/carbon-design-system/carbon-charts/issues/692)) ([05e4bb3](https://github.com/carbon-design-system/carbon-charts/commit/05e4bb364ac96697aefa4c2096b391fc248e2369))
-
-
-
-
+-   fix bar chart tooltip data
+    ([#692](https://github.com/carbon-design-system/carbon-charts/issues/692))
+    ([05e4bb3](https://github.com/carbon-design-system/carbon-charts/commit/05e4bb364ac96697aefa4c2096b391fc248e2369))
 
 # [0.33.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.32.12...v0.33.0) (2020-07-07)
 
 **Note:** Version bump only for package @carbon/charts
 
-
-
-
-
 # Change Log
 
 All notable changes to this project will be documented in this file. See

diff --git a/packages/core/demo/data/bar.ts b/packages/core/demo/data/bar.ts
@@ -46,13 +46,13 @@ export const groupedBarSelectedGroupsOptions = {
 	},
 	axes: {
 		left: {
-			mapsTo: "value",
+			mapsTo: "value"
 		},
 		bottom: {
 			scaleType: "labels",
 			mapsTo: "key"
-		},
-	},
+		}
+	}
 };
 
 // Horizontal Grouped

diff --git a/packages/core/demo/data/index.ts b/packages/core/demo/data/index.ts
@@ -385,7 +385,7 @@ let allDemoGroups = [
 			{
 				options: lineDemos.lineSelectedGroupsOptions,
 				data: lineDemos.lineSelectedGroupsData,
-				chartType: chartTypes.LineChart,
+				chartType: chartTypes.LineChart
 			},
 			{
 				options: lineDemos.lineTimeSeriesRotatedTicksOptions,

diff --git a/packages/core/demo/data/line.ts b/packages/core/demo/data/line.ts
@@ -138,7 +138,7 @@ export const lineSelectedGroupsData = [
 	{ group: "Dataset 4", key: "More", value: 1200 },
 	{ group: "Dataset 4", key: "Sold", value: 9000 },
 	{ group: "Dataset 4", key: "Restocking", value: 24000, audienceSize: 10 },
-	{ group: "Dataset 4", key: "Misc", value: 3000, audienceSize: 10 },
+	{ group: "Dataset 4", key: "Misc", value: 3000, audienceSize: 10 }
 ];
 
 export const lineSelectedGroupsOptions = {
@@ -150,14 +150,14 @@ export const lineSelectedGroupsOptions = {
 		bottom: {
 			title: "2019 Annual Sales Figures",
 			mapsTo: "key",
-			scaleType: "labels",
+			scaleType: "labels"
 		},
 		left: {
 			mapsTo: "value",
 			title: "Conversion rate",
-			scaleType: "linear",
-		},
-	},
+			scaleType: "linear"
+		}
+	}
 };
 
 export const lineTimeSeriesData = [

diff --git a/packages/core/src/components/axes/axis.ts b/packages/core/src/components/axes/axis.ts
@@ -283,7 +283,7 @@ export class Axis extends Component {
 			const axisTitleRef = DOMUtils.appendOrSelect(
 				container,
 				`text.axis-title`
-			).html((isDataEmpty || isDataLoading) ? "" : axisOptions.title);
+			).html(isDataEmpty || isDataLoading ? "" : axisOptions.title);
 
 			switch (axisPosition) {
 				case AxisPositions.LEFT:

diff --git a/packages/core/src/components/essentials/legend.ts b/packages/core/src/components/essentials/legend.ts
@@ -20,7 +20,7 @@ export class Legend extends Component {
 	render() {
 		const svg = this.getContainerSVG().attr(
 			"role",
-			`${Roles.GRAPHICS_DOCUMENT} ${Roles.DOCUMENT}`,
+			`${Roles.GRAPHICS_DOCUMENT} ${Roles.DOCUMENT}`
 		);
 		const options = this.model.getOptions();
 		const legendOptions = Tools.getProperty(options, "legend");
@@ -224,17 +224,21 @@ export class Legend extends Component {
 				lastYPosition = yPosition;
 
 				// Test if legendItems are placed in the correct direction
-				const testHorizontal = (!legendOrientation ||
-					legendOrientation === LegendOrientations.HORIZONTAL) &&
-					legendItem.select("rect.checkbox").attr("y") === '0';
+				const testHorizontal =
+					(!legendOrientation ||
+						legendOrientation === LegendOrientations.HORIZONTAL) &&
+					legendItem.select("rect.checkbox").attr("y") === "0";
 
-				const testVertical = legendOrientation === LegendOrientations.VERTICAL &&
-					legendItem.select("rect.checkbox").attr("x") === '0';
+				const testVertical =
+					legendOrientation === LegendOrientations.VERTICAL &&
+					legendItem.select("rect.checkbox").attr("x") === "0";
 
-				const hasCorrectLegendDirection = testHorizontal || testVertical;
+				const hasCorrectLegendDirection =
+					testHorizontal || testVertical;
 
 				// Render checkbox check icon
-				if (hasDeactivatedItems &&
+				if (
+					hasDeactivatedItems &&
 					legendItem.select("g.check").empty() &&
 					hasCorrectLegendDirection
 				) {

diff --git a/packages/core/src/components/layout/layout.ts b/packages/core/src/components/layout/layout.ts
@@ -164,10 +164,9 @@ export class LayoutComponent extends Component {
 			);
 
 			if (d.data.id === "legend") {
-				const svgSize = DOMUtils.getSVGElementSize(
-					select(this),
-					{ useAttrs: true }
-				);
+				const svgSize = DOMUtils.getSVGElementSize(select(this), {
+					useAttrs: true
+				});
 
 				if (svgSize.height < 40) {
 					matchingSVGDimensions.height = svgSize.height;

diff --git a/packages/core/src/model.ts b/packages/core/src/model.ts
@@ -357,20 +357,24 @@ export class ChartModel {
 		}
 
 		// Updates selected groups
-		const updatedActiveItems = dataGroups.filter(group => group.status === ACTIVE);
+		const updatedActiveItems = dataGroups.filter(
+			(group) => group.status === ACTIVE
+		);
 		const options = this.getOptions();
 
 		const hasUpdatedDeactivatedItems = dataGroups.some(
-			group => group.status === DISABLED
+			(group) => group.status === DISABLED
 		);
 
 		// If there are deactivated items, map the item name into selected groups
 		if (hasUpdatedDeactivatedItems) {
-			options.data.selectedGroups = updatedActiveItems.map(activeItem => activeItem.name);
+			options.data.selectedGroups = updatedActiveItems.map(
+				(activeItem) => activeItem.name
+			);
 		} else {
 			// If every item is active, clear array
 			options.data.selectedGroups = [];
-		};
+		}
 
 		// dispatch legend filtering event with the status of all the dataLabels
 		this.services.events.dispatchEvent(Events.Legend.ITEMS_UPDATE, {
@@ -522,20 +526,22 @@ export class ChartModel {
 
 		// check if selectedGroups can be applied to chart with current data groups
 		if (options.data.selectedGroups.length) {
-			const hasAllSelectedGroups = options.data.selectedGroups
-				.every(groupName => uniqueDataGroups.includes(groupName));
+			const hasAllSelectedGroups = options.data.selectedGroups.every(
+				(groupName) => uniqueDataGroups.includes(groupName)
+			);
 			if (!hasAllSelectedGroups) {
 				options.data.selectedGroups = [];
-			};
+			}
 		}
 
 		// Get group status based on items in selected groups
-		const getStatus = (groupName) => 
-			!options.data.selectedGroups.length || options.data.selectedGroups.includes(groupName)
+		const getStatus = (groupName) =>
+			!options.data.selectedGroups.length ||
+			options.data.selectedGroups.includes(groupName)
 				? ACTIVE
 				: DISABLED;
 
-		return uniqueDataGroups.map(groupName => ({
+		return uniqueDataGroups.map((groupName) => ({
 			name: groupName,
 			status: getStatus(groupName)
 		}));

diff --git a/packages/core/src/services/essentials/dom-utils.ts b/packages/core/src/services/essentials/dom-utils.ts
@@ -204,17 +204,19 @@ export class DOMUtils extends Service {
 	}
 
 	addSVGElement() {
-		const chartsprefix = Tools.getProperty(
-			this.model.getOptions(),
-			"style",
-			"prefix"
-		);
+		const options = this.model.getOptions();
+		const chartsprefix = Tools.getProperty(options, "style", "prefix");
+
 		const svg = select(this.getHolder())
 			.append("svg")
 			.classed(`${settings.prefix}--${chartsprefix}--chart-svg`, true)
 			.attr("height", "100%")
 			.attr("width", "100%");
 
+		svg.append("title").text(
+			Tools.getProperty(options, "title") || "Chart"
+		);
+
 		this.svg = svg.node();
 	}
 

diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
@@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 **Note:** Version bump only for package @carbon/charts-vue
 
-
-
-
-
 # [0.33.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.32.12...v0.33.0) (2020-07-07)
 
 **Note:** Version bump only for package @carbon/charts-vue
 
-
-
-
-
 ## [0.32.12](https://github.com/carbon-design-system/carbon-charts/compare/v0.32.11...v0.32.12) (2020-06-26)
 
 **Note:** Version bump only for package @carbon/charts-vue