Merge pull request carbon-design-system#606 from natashadecoste/event…

…-listeners * change storybook tutorial structure * vanilla/angular content * update vanilla * add angular content * react get started * getting started tutorials * update * update styles * clean up file * review changes * update the options and data * update options section * event listener tutorial * add example for event listening * Update packages/core/stories/tutorials/event-listeners.ts Co-authored-by: Eliad Moosavi <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]>
theiliad · May 13, 2020 · ce17e25 · ce17e25
1 parent 2c3ed9c
commit ce17e25
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 8 deletions.
diff --git a/packages/core/stories/tutorials.stories.ts b/packages/core/stories/tutorials.stories.ts
@@ -5,6 +5,7 @@ import "../demo/styles.scss";
 // import tutorial MD strings
 import {
 	tabularTutorial,
+	eventListenersTutorial,
 	reactTutorial,
 	angularTutorial,
 	vanillaTutorial,
@@ -80,8 +81,6 @@ gettingStartedStories.add("Vue", () => {
 	return container;
 });
 
-
-
 // Add the tutorial(s) after getting started
 tutorialStories.add("Tabular data format", () => {
 	// container creation
@@ -96,3 +95,18 @@ tutorialStories.add("Tabular data format", () => {
 
 	return container;
 });
+
+// Add the tutorial(s) after getting started
+tutorialStories.add("Event listeners", () => {
+	// container creation
+	const container = document.createElement("div");
+	container.setAttribute("class", "container tutorial");
+
+	container.innerHTML = eventListenersTutorial;
+
+	container.querySelectorAll("pre code").forEach((block) => {
+		hljs.highlightBlock(block);
+	});
+
+	return container;
+});
diff --git a/packages/core/stories/tutorials/event-listeners.ts b/packages/core/stories/tutorials/event-listeners.ts
@@ -0,0 +1,20 @@
+import marked from "marked";
+
+export const eventListenersTutorial = marked(`
+# Events in Carbon Charts
+Event dispatching for chart elements allows applications to trigger custom UI actions and states when users interact with the charts.
+
+You can see the current dispatched events [here](https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_events_.html).
+
+&nbsp;
+### Listening for events
+To listen for event just use a reference to the chart to add an event listener for one of the dispatched events above.
+This is an example for adding an event listener for a mouseover event on bar chart \`rect\`s.
+
+\`\`\`js
+barChart.services.events.addEventListener("bar-onmouseover", e => {
+	console.log(e.detail);
+});
+\`\`\`
+
+`);
diff --git a/packages/core/stories/tutorials/getting-started/angular.ts b/packages/core/stories/tutorials/getting-started/angular.ts
@@ -2,6 +2,7 @@ import marked from "marked";
 
 export const angularTutorial = marked(`
 # Carbon Charts - Angular
+
 The Carbon Charts Angular library provides a collection of reusable charting components to build websites
 and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior
 in prototype and production work.
@@ -80,7 +81,8 @@ See tutorial on tabular data format for more information on chart data.
 
 &nbsp;
 ## Options
-You can see the options for all charts
+
+You can see the default options for all charts
 [here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/src/configuration.ts).
 
 &nbsp;
@@ -91,6 +93,7 @@ You can see the options for all charts
 
 &nbsp;
 ## Guidance
+
 Please refer to the
 [Carbon Design Systems guidance](https://www.carbondesignsystem.com/data-visualization/chart-types)
 on using the different charts available in this library.
@@ -119,6 +122,7 @@ View available components [here](https://github.com/carbon-design-system/carbon-
 
 &nbsp;
 ## Troubleshoot
+
 If you experience any issues while getting set up with Carbon Charts, please head over to the
 [GitHub repo](https://github.com/carbon-design-system/carbon-charts) for more guidelines and support.
 Please [create an issue](https://github.com/carbon-design-system/carbon-charts/issues) if your issue

diff --git a/packages/core/stories/tutorials/getting-started/react.ts b/packages/core/stories/tutorials/getting-started/react.ts
@@ -2,6 +2,7 @@ import marked from "marked";
 
 export const reactTutorial = marked(`
 # Carbon Charts - React
+
 The Carbon Charts library provides a collection of reusable charting components to
 build websites and user interfaces. Adopting the library enables developers to use
 consistent markup, styles, and behavior in prototype and production work.
@@ -66,10 +67,10 @@ See tutorial on tabular data format for more information on chart data.
 
 &nbsp;
 ## Options
+
 You can see the options for all charts
 [here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/src/configuration.ts).
 
-
 &nbsp;
 ## Demos and Examples
 + **[Storybook - Demos](https://carbon-design-system.github.io/carbon-charts/react)**
@@ -78,6 +79,7 @@ You can see the options for all charts
 
 &nbsp;
 ## Guidance
+
 Please refer to the
 [Carbon Design Systems guidance](https://www.carbondesignsystem.com/data-visualization/chart-types)
 on using the different charts available in this library.
@@ -106,6 +108,7 @@ View available components [here](https://github.com/carbon-design-system/carbon-
 
 &nbsp;
 ## Troubleshoot
+
 If you experience any issues while getting set up with Carbon Charts, please head over to
 the [GitHub repo](https://github.com/carbon-design-system/carbon-charts)
 for more guidelines and support.

diff --git a/packages/core/stories/tutorials/getting-started/vanilla.ts b/packages/core/stories/tutorials/getting-started/vanilla.ts
@@ -2,6 +2,7 @@ import marked from "marked";
 
 export const vanillaTutorial = marked(`
 # Carbon Charts - VanillaJS
+
 The Carbon Charts Vanilla library provides a collection of reusable charting components
 to build websites and user interfaces. Adopting the library enables developers to use
 consistent markup, styles, and behavior in prototype and production work.
@@ -92,16 +93,17 @@ See tutorial on tabular data format for more information on chart data.
 
 &nbsp;
 ## Options
+
 You can see the options for all charts
 [here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/src/configuration.ts).
 
-
 &nbsp;
 ## Demos and Examples
 + **[Demos - Data & options used](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data)**
 
 &nbsp;
 ## Guidance
+
 Please refer to the
 [Carbon Design Systems guidance](https://www.carbondesignsystem.com/data-visualization/chart-types)
 on using the different charts available in this library.
@@ -116,7 +118,6 @@ before starting any work.
 We recommend the use of
 [Webpack Dev Server](https://github.com/webpack/webpack-dev-server) for developing components.
 
-
 **Start the server:**
 \`\`\`bash
 cd packages/core
@@ -131,6 +132,7 @@ View available components [here](https://github.com/carbon-design-system/carbon-
 
 &nbsp;
 ## Troubleshoot
+
 If you experience any issues while getting set up with Carbon Charts, please head
 over to the [GitHub repo](https://github.com/carbon-design-system/carbon-charts)
 for more guidelines and support.

diff --git a/packages/core/stories/tutorials/getting-started/vue.ts b/packages/core/stories/tutorials/getting-started/vue.ts
@@ -2,6 +2,7 @@ import marked from "marked";
 
 export const vueTutorial = marked(`
 # Carbon Charts - Vue
+
 The Carbon Charts Vue library provides a collection of reusable charting components
 to build websites and user interfaces. Adopting the library enables developers to use consistent markup,
 styles, and behavior in prototype and production work.
@@ -61,6 +62,7 @@ See tutorial on tabular data format for more information on chart data.
 
 &nbsp;
 ## Options
+
 You can see the options for all charts
 [here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/src/configuration.ts).
 
@@ -72,6 +74,7 @@ You can see the options for all charts
 
 &nbsp;
 ## Guidance
+
 Please refer to the
 [Carbon Design Systems guidance](https://www.carbondesignsystem.com/data-visualization/chart-types)
 on using the different charts available in this library.
@@ -100,6 +103,7 @@ View available components [here](https://github.com/carbon-design-system/carbon-
 
 &nbsp;
 ## Troubleshoot
+
 If you experience any issues while getting set up with Carbon Charts,
 please head over to the [GitHub repo](https://github.com/carbon-design-system/carbon-charts) for more
 guidelines and support. Please [create an issue](https://github.com/carbon-design-system/carbon-charts/issues)

diff --git a/packages/core/stories/tutorials/index.ts b/packages/core/stories/tutorials/index.ts
@@ -1,7 +1,9 @@
-export * from "./tabular-data-format";
-
 // getting started tutorial exports
 export * from "./getting-started/angular";
 export * from "./getting-started/react";
 export * from "./getting-started/vue";
 export * from "./getting-started/vanilla";
+
+// other tutorials
+export * from "./tabular-data-format";
+export * from "./event-listeners";
diff --git a/packages/core/stories/tutorials/tabular-data-format.ts b/packages/core/stories/tutorials/tabular-data-format.ts
@@ -82,8 +82,10 @@ const simpleBarOptions = {
 \`\`\`
 
 ##### Non-axis chart types:
+
 In the case of pie & donut the library will
 always look for the \`value\` key within your datapoints:
+
 \`\`\`js
 export const pieData = [
 	{ group: "2V2N 9KYPM version 1", value: 20000 },
@@ -96,6 +98,7 @@ export const pieData = [
 \`\`\`
 
 ##### Customizable options:
+
 You're able to customize the \`groupMapsTo\`
 which is used to determine the key within your data that
 identifies the grouping of the datapoints.
@@ -157,6 +160,7 @@ const bubbleDoubleLinearData = [
 
 You're also able to provide a custom
 \`color range\` to be used within the color scale.
+
 \`\`\`
 const simpleBarOptions = {
 	color: {