Merge branch 'master' into documentation

CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.30.11](https://github.com/IBM/carbon-charts/compare/v0.30.10...v0.30.11) (2020-04-15)
+
+**Note:** Version bump only for package @carbon/charts-monorepo
+
+
+
+
+
+## [0.30.10](https://github.com/IBM/carbon-charts/compare/v0.30.9...v0.30.10) (2020-04-09)
+
+
+### Bug Fixes
+
+* **core:** title string contains html ascii characters  ([#547](https://github.com/IBM/carbon-charts/issues/547)) ([1a6b646](https://github.com/IBM/carbon-charts/commit/1a6b6463f576c1ba297883e734a4a953e4a22829))
+
+
+
+
+
+## [0.30.9](https://github.com/IBM/carbon-charts/compare/v0.30.8...v0.30.9) (2020-04-09)
+
+
+### Bug Fixes
+
+* **bar-stacked:** render 0 value bars ([425e11d](https://github.com/IBM/carbon-charts/commit/425e11d9dacb8bbaf9740759754eab1f0aa45843))
+
+
+
+
+
 ## [0.30.8](https://github.com/IBM/carbon-charts/compare/v0.30.7...v0.30.8) (2020-04-03)
 
 **Note:** Version bump only for package @carbon/charts-monorepo

lerna.json

@@ -12,5 +12,5 @@
 			]
 		}
 	},
-	"version": "0.30.8"
+	"version": "0.30.11"
 }

packages/angular/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.30.11](https://github.com/IBM/carbon-charts/compare/v0.30.10...v0.30.11) (2020-04-15)
+
+**Note:** Version bump only for package @carbon/charts-angular
+
+
+
+
+
+## [0.30.10](https://github.com/IBM/carbon-charts/compare/v0.30.9...v0.30.10) (2020-04-09)
+
+**Note:** Version bump only for package @carbon/charts-angular
+
+
+
+
+
+## [0.30.9](https://github.com/IBM/carbon-charts/compare/v0.30.8...v0.30.9) (2020-04-09)
+
+**Note:** Version bump only for package @carbon/charts-angular
+
+
+
+
+
 ## [0.30.8](https://github.com/IBM/carbon-charts/compare/v0.30.7...v0.30.8) (2020-04-03)
 
 **Note:** Version bump only for package @carbon/charts-angular

packages/angular/README.md

@@ -2,11 +2,11 @@
 
 > Carbon Charting Angular Wrappers
 
-**[Storybook Demos](https://carbon-design-system.github.io/carbon-charts/angular)**
+**[Storybook demos](https://carbon-design-system.github.io/carbon-charts/angular)**
 
-**[Storybook Demo Sources](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/angular/stories)**
+**[Storybook demo sources](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data)**
 
-## Getting Started
+## Getting started
 
 Run the following command using [npm](https://www.npmjs.com/):
 
@@ -21,12 +21,16 @@ instead:
 yarn add @carbon/charts @carbon/charts-angular d3
 ```
 
-## Step-by-step Instructions
+## Step-by-step instructions
 [Read on carbondesignsystem.com](https://www.carbondesignsystem.com/data-visualization/getting-started/angular)
 
-## Charting Data & Options
-Although we will definitely introduce new models in the future as we start shipping new components such as maps, Data and options follow the same model in all charts, with minor exceptions and differences in specific components, .
+## Charting data & options
+Although we will definitely introduce new models in the future as we start shipping new components such as maps, Data and options follow the same model in all charts, with minor exceptions and differences in specific components.
 
-For instance, in the case of pie and donut charts, you would only provide one data set. In the case of donut charts, you can pass in an additional field called `center` in your options configuring the donut center.
+For instance in the case of a donut chart you're able to pass in an additional field called `center` in your options configuring the donut center.
 
-There are also additional options available depending on the chart type being used, [for more examples please see here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/demo-data).
+For instructions on using the **tabular data format**, see [here](https://carbon-design-system.github.io/carbon-charts/?path=/story/tutorials--tabular-data-format)
+
+There are also additional options available depending on the chart type being used, [see our demo examples here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data).
+
+Customizable options (specific to chart type) can be found [here](https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html)

packages/angular/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@carbon/charts-angular",
-	"version": "0.30.8",
+	"version": "0.30.11",
 	"description": "Carbon charting components for Angular",
 	"main": "index.js",
 	"scripts": {
@@ -39,7 +39,7 @@
 		"scss"
 	],
 	"dependencies": {
-		"@carbon/charts": "^0.30.8"
+		"@carbon/charts": "^0.30.11"
 	},
 	"peerDependencies": {
 		"@angular/common": "^6.0.0 || ^7.0.0 || ^8.0.0",

packages/core/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.30.11](https://github.com/IBM/carbon-charts/compare/v0.30.10...v0.30.11) (2020-04-15)
+
+**Note:** Version bump only for package @carbon/charts
+
+
+
+
+
+## [0.30.10](https://github.com/IBM/carbon-charts/compare/v0.30.9...v0.30.10) (2020-04-09)
+
+
+### Bug Fixes
+
+* **core:** title string contains html ascii characters  ([#547](https://github.com/IBM/carbon-charts/issues/547)) ([1a6b646](https://github.com/IBM/carbon-charts/commit/1a6b6463f576c1ba297883e734a4a953e4a22829))
+
+
+
+
+
+## [0.30.9](https://github.com/IBM/carbon-charts/compare/v0.30.8...v0.30.9) (2020-04-09)
+
+
+### Bug Fixes
+
+* **bar-stacked:** render 0 value bars ([425e11d](https://github.com/IBM/carbon-charts/commit/425e11d9dacb8bbaf9740759754eab1f0aa45843))
+
+
+
+
+
 ## [0.30.8](https://github.com/IBM/carbon-charts/compare/v0.30.7...v0.30.8) (2020-04-03)
 
 **Note:** Version bump only for package @carbon/charts

packages/core/README.md

@@ -2,7 +2,7 @@
 
 > Carbon Charting components
 
-## Getting Started
+## Getting started
 
 Run the following command using [npm](https://www.npmjs.com/):
 
@@ -17,15 +17,21 @@ instead:
 yarn add @carbon/charts d3
 ```
 
-## Step-by-step Instructions
+## Step-by-step instructions
 [Read on carbondesignsystem.com](https://www.carbondesignsystem.com/data-visualization/getting-started/vanilla)
 
-## Sample Project
-[![Edit Carbon Charts - Vanilla](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/carbon-charts-vanilla-m9r77)
+## Codesandbox examples
+[Sample use cases can be seen here](https://carbon-design-system.github.io/carbon-charts).
 
-## Charting Data & Options
-Although we will definitely introduce new models in the future as we start shipping new components such as maps, Data and options follow the same model in all charts, with minor exceptions and differences in specific components, .
+**When opening the link above**, click on the **Edit on Codesandbox** button for each demo to see an isolated project showing you how to reproduce the demo.
 
-For instance, in the case of pie and donut charts, you would only provide one data set. In the case of donut charts, you can pass in an additional field called `center` in your options configuring the donut center.
+## Charting data & options
+Although we will definitely introduce new models in the future as we start shipping new components such as maps, Data and options follow the same model in all charts, with minor exceptions and differences in specific components.
 
-There are also additional options available depending on the chart type being used, [for more examples please see here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/demo-data).
+For instance in the case of a donut chart you're able to pass in an additional field called `center` in your options configuring the donut center.
+
+For instructions on using the **tabular data format**, see [here](https://carbon-design-system.github.io/carbon-charts/?path=/story/tutorials--tabular-data-format)
+
+There are also additional options available depending on the chart type being used, [see our demo examples here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data).
+
+Customizable options (specific to chart type) can be found [here](https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html)

packages/core/demo/styles.scss

@@ -115,6 +115,10 @@ div.container {
 	@import "../src/styles/vendor/carbon-components/scss/components/tag/tag";
 	@import "../src/styles/vendor/carbon-components/scss/components/radio-button/radio-button";
 
+	#chart-demo {
+		max-width: 700px;
+	}
+
 	.bx--grid {
 		padding: 0;
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@carbon/charts",
-	"version": "0.30.8",
+	"version": "0.30.11",
 	"description": "Carbon charting components",
 	"main": "./bundle.js",
 	"module": "./index.js",

packages/core/src/chart.ts

@@ -5,9 +5,8 @@ import {
 	LayoutGrowth,
 	LayoutDirection,
 	LegendOrientations,
-	ChartTheme,
 	Events as ChartEvents
-} from "./interfaces/index";
+} from "./interfaces";
 
 // Misc
 import { ChartModel } from "./model";
@@ -51,7 +50,7 @@ export class Chart {
 
 		// Call update() when model has been updated
 		this.services.events
-			.addEventListener("model-update", () => {
+			.addEventListener(ChartEvents.Model.UPDATE, () => {
 				this.update(true);
 			});
 
@@ -60,7 +59,7 @@ export class Chart {
 
 		// Set chart resize event listener
 		this.services.events
-			.addEventListener("chart-resize", () => {
+			.addEventListener(ChartEvents.Chart.RESIZE, () => {
 				this.update(false);
 			});
 

packages/core/src/components/axes/axis.ts

@@ -172,7 +172,7 @@ export class Axis extends Component {
 		// Position the axis title
 		if (axisOptions.title) {
 			const axisTitleRef = DOMUtils.appendOrSelect(container, `text.axis-title`)
-				.text(axisOptions.title);
+				.html(axisOptions.title);
 
 			switch (axisPosition) {
 				case AxisPositions.LEFT:

packages/core/src/components/essentials/legend.spec.ts

@@ -2,7 +2,9 @@ import { TestEnvironment } from "../../tests/index";
 
 // import the settings for the css prefixes
 import settings from "carbon-components/es/globals/js/settings";
+
 import { options } from "./../../configuration";
+import { Events } from "./../../interfaces";
 
 import { select } from "d3-selection";
 
@@ -19,17 +21,17 @@ describe("legend component", () => {
 		it("should have same amount of datasets", async function(done) {
 			const data = this.testEnvironment.chartData;
 			const uniqueDatagroups = data.map(d => d.group)
-				.filter(function(value, index, self) { 
+				.filter(function(value, index, self) {
 					return self.indexOf(value) === index;
 				});
-			
+
 			const numberOfDatagroups = uniqueDatagroups.length;
 
 			const chartEventsService = this.chart.services.events;
 
 			const renderCb = () => {
 				// Remove render event listener
-				chartEventsService.removeEventListener("render-finished", renderCb);
+				chartEventsService.removeEventListener(Events.Chart.RENDER_FINISHED, renderCb);
 
 				const numberOfLegendItems = select(`g.${settings.prefix}--${options.chart.style.prefix}--legend`).selectAll("g.legend-item").size();
 				expect(numberOfLegendItems).toEqual(numberOfDatagroups);
@@ -38,7 +40,7 @@ describe("legend component", () => {
 			};
 
 			// Add event listener for when chart render is finished
-			chartEventsService.addEventListener("render-finished", renderCb);
+			chartEventsService.addEventListener(Events.Chart.RENDER_FINISHED, renderCb);
 		});
 	});
 

packages/core/src/components/essentials/legend.ts

@@ -45,7 +45,7 @@ export class Legend extends Component {
 
 		addedLegendItems.append("text")
 			.merge(legendItems.select("text"))
-			.text(d => d.name)
+			.html(d => d.name)
 			.attr("alignment-baseline", "middle");
 
 		this.breakItemsIntoLines(addedLegendItems);

packages/core/src/components/essentials/title.spec.ts

@@ -2,7 +2,9 @@ import { TestEnvironment } from "../../tests/index";
 
 // import the settings for the css prefixes
 import settings from "carbon-components/es/globals/js/settings";
+
 import { options } from "./../../configuration";
+import { Events } from "./../../interfaces";
 
 import { select } from "d3-selection";
 
@@ -24,15 +26,15 @@ describe("title component", () => {
 				const title = select(`g.${settings.prefix}--${options.chart.style.prefix}--title`);
 
 				// Remove event listener for when chart render is finished
-				chartEventsService.removeEventListener("render-finished", renderCb);
+				chartEventsService.removeEventListener(Events.Chart.RENDER_FINISHED, renderCb);
 
 				expect(title.select("text").html()).toEqual(sampleTitle);
 
 				done();
 			};
 
 			// Add event listener for when chart render is finished
-			chartEventsService.addEventListener("render-finished", renderCb);
+			chartEventsService.addEventListener(Events.Chart.RENDER_FINISHED, renderCb);
 		});
 	});
 });

packages/core/src/components/essentials/title.ts

@@ -35,7 +35,7 @@ export class Title extends Component {
 			const substringIndex = this.getSubstringIndex(title.node(), 0, titleString.length - 1, truncatedSize);
 
 			// use the substring as the title
-			title.text(titleString.substring(0, substringIndex - 1))
+			title.html(titleString.substring(0, substringIndex - 1))
 				.append("tspan")
 				.text("...");
 
@@ -62,7 +62,7 @@ export class Title extends Component {
 		const text = DOMUtils.appendOrSelect(svg, "text.title");
 		text.attr("x", 0)
 			.attr("y", 20)
-			.text(this.model.getOptions().title);
+			.html(this.model.getOptions().title);
 
 		// title needs to first render so that we can check for overflow
 		this.truncateTitle();

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

@@ -1,7 +1,12 @@
 import { Tooltip } from "./tooltip";
 import { Tools } from "../../tools";
 import { DOMUtils } from "../../services";
-import { TooltipPosition, TooltipTypes, CartesianOrientations } from "./../../interfaces/enums";
+import {
+	TooltipPosition,
+	TooltipTypes,
+	CartesianOrientations,
+	Events
+} from "./../../interfaces";
 
 // import the settings for the css prefix
 import settings from "carbon-components/es/globals/js/settings";
@@ -21,7 +26,7 @@ export class TooltipBar extends Tooltip {
 		this.tooltip.style("max-width", null);
 
 		// listen to show-tooltip Custom Events to render the tooltip
-		this.services.events.addEventListener("show-tooltip", e => {
+		this.services.events.addEventListener(Events.Tooltip.SHOW, e => {
 			// check the type of tooltip and that it is enabled
 			if ((e.detail.type === TooltipTypes.DATAPOINT && Tools.getProperty(this.model.getOptions(), "tooltip", "datapoint", "enabled"))
 				|| (e.detail.type === TooltipTypes.GRIDLINE && Tools.getProperty(this.model.getOptions(), "tooltip", "gridline", "enabled")) ) {
@@ -76,7 +81,7 @@ export class TooltipBar extends Tooltip {
 		});
 
 		// listen to hide-tooltip Custom Events to hide the tooltip
-		this.services.events.addEventListener("hide-tooltip", () => {
+		this.services.events.addEventListener(Events.Tooltip.HIDE, () => {
 			this.tooltip.classed("hidden", true);
 		});
 	}