@carbon/charts 0.59.0-beta.0 → 1.0.3

package/stories/tutorials/color-palette.ts

@@ -1,80 +0,0 @@
-import marked from 'marked';
-
-export const colorPaletteTutorial = {
-	name: 'Color palette',
-	content: marked(`
-# Color palette
-
-Carbon charts recently updated the default color palettes for \`@carbon/charts\` to follow the new IBM Design Language data vizualization palette.
-This means more accessibility and usability in terms of the color variants provided by the library.
-
-_For more guidance on using the IBM Design Language dataviz palette, see [here](https://www.carbondesignsystem.com/data-visualization/color-palettes/)_
-
-___
-
-## Using a dafault palette
-You can add the following chart options if you want to choose a color palette option from the IBM dataviz palette.
-By default, carbon-charts will assign the first color option for the appropriate amount of data groups (ex. charts with 4 data groups will get the first option for the 4-color palettes).
-
-
-\`\`\`
-const verySimpleBarData = [
-    { group: "Qty", value: 65000 },
-    { group: "More", value: 29123 }
-]; // bar chart with 2 data groups "Qty" and "More"
-
-const verySimpleBarOptions = {
-	color: {
-		pairing: {
-			option: 2 // use the second color palette option for 2-group charts
-		}
-	}
-};
-\`\`\`
-
-Refer to the Carbon Design Website for the full index of color palette options (by group size).
-
-___
-
-## Using a different size color palette
-**Note: It is not suggested to use a color palette designed for a different number of data groups than the chart is rendering.**
-
-\`\`\`
-// line chart with 2 data groups "Saturday" and "Sunday" initially but expecting
-// 3 data groups on some data loads when long weekend "Friday" or "Monday" is included
-const lineData = [
-    { group: "Saturday", sales: 65000 },
-    { group: "Sunday", sales: 29123 }
-];
-
-const lineOptions = {
-	color: {
-		pairing: {
-			numberOfVariants: 3; // use a palette with 3 color variants
-			option: 2 // use the 2nd option of 3 color charts
-		}
-	}
-};
-\`\`\`
-
-___
-
-## Using a custom color scale
-
-You're also able to provide a custom
-\`color range\` to be used within the color scale.
-You are expected to define values for _all the data groups_ in your chart. If less data groups are provided than the chart contains, it will
-default to using the IBM Design Language dataviz palette.
-
-\`\`\`
-const simpleBarOptions = {
-	color: {
-		scale: {
-			"Dataset 1": "blue",
-			"Dataset 2": "red"
-		} // chart only has 2 data groups
-	}
-};
-\`\`\`
-`),
-};

package/stories/tutorials/combo-charts.ts

@@ -1,114 +0,0 @@
-import marked from 'marked';
-
-export const comboChartTutorial = {
-	name: 'Combo charts',
-	content: marked(`
-# Combo charts
-Combo charts allow users to visually compare complex datasets by superimposing different graphing components within one chart.
-Combination charts **may or may not** use dual axes although it is common that they do. For more information on dual axes with **carbon-charts**, please see the [dual axes tutorial](/?path=/story/docs-tutorials--dual-axes-charts).
-
-*Note: \`ComboChart\` extends axis chart functionality and should only comprise of graphs/components that use axes.*
-
-____
-
-### Using the carbon-charts defaults
-
-There is support for using pre-existing carbon-charts graphs and combining them together within a \`ComboChart\`.
-The charts that can be seamlessly combined are all different **axis charts only**. This is the **recommended way to use \`ComboCharts\`**.
-
-Supported \`ChartTypes\` to combine:
-- \`LineChart\`
-- \`ScatterChart\`
-- \`StackedScatterChart\`
-- \`AreaChart\`
-- \`StackedAreaChart\`
-- \`BarChart\`
-- \`GroupedBarChart\`
-- \`StackedBarChart\`
-
-Below is an example of combining a carbon-charts \`AreaChart\` with a \`LineChart\`.
-
-\`\`\`
-import { ChartTypes } from "@carbon/charts/interfaces/enums";
-const verySimpleComboData = [
-    { group: "Dataset 1", value: 650, date: "Tuesday" },
-	{ group: "Dataset 2", value: 296, date: "Tuesday" }
-	...more data
-];
-
-const comboOptions = {
-	...otherOptions // global options apply to all the charts listed in chartTypes (where relevant)
-	axes: {...}
-	comboChartTypes: [ // takes an array of objects
-		{
-			type: ChartTypes.AREA // use a valid ChartType from enums
-			options: {}, // component specific options (i.e, turn on the scatter points, adjust scatter radius)
-			correspondingDatasets: ["Dataset 1"] // the datasets that we want to map with this type of chart
-		},
-		{
-			type: ChartTypes.LINE // use a valid ChartType from enums
-			options: {
-				points: {
-					enabled: false // disabling the scatter points on the LineChart here won't affect the points in the AreaChart
-				}
-			}, // component specific options
-			correspondingDatasets: ["Dataset 2"]
-		}]
-};
-\`\`\`
-
-See the storybook demos for more combinations of charts and configurations.
-
-____
-
-### Using custom graphs & components
-Custom components and **independent** carbon-charts components can also be rendered into a \`ComboChart\`. This allows
-users to create their own components and combine them with the pre-existing componentry offered.
-
-Below is an example of combining a carbon-charts \`AreaChart\` with a standalone \`Line\` class constructor.
-
-**Reminder: \`ComboChart\` extends axis chart functionality and should only comprise of graphs/components that use axes.**
-
-
-\`\`\`
-// import standalone componentry
-import { Line } from "@carbon/charts/components/graphs/Line";
-import { options } from "@carbon/charts/configuration"; // need to include base options for the carbon-chart if you are using a component separately
-import { ChartTypes } from "@carbon/charts/interfaces/enums";
-
-const verySimpleComboData = [
-    { group: "Dataset 1", value: 650, date: "Tuesday" },
-	{ group: "Dataset 2", value: 296, date: "Tuesday" }
-	...more data
-];
-
-const comboOptions = {
-	...otherOptions // global options apply to all the charts listed in chartTypes (where relevant)
-	axes: {...}
-	comboChartTypes: [ // takes an array of objects
-		{
-			type: ChartTypes.AREA // use a valid ChartType from enums
-			options: {},
-			correspondingDatasets: ["Dataset 1"] // the datasets that we want to map with this type of chart
-		},
-		{
-			type: Line // using an imported class constructor
-			// add the base options for that type of chart if it is in the carbon-charts library and any additional configurations needed
-			options: Object.assign({}, options.lineChart,  {
-				points: {
-					enabled: false // disabling the scatter points on the LineChart here won't affect the points in the AreaChart
-				}
-			}), // component specific options
-			correspondingDatasets: ["Dataset 2"]
-		}]
-};
-\`\`\`
-
-Users can omit using any defaults (chartTypes) and build up the charts with independent class contructors if they choose. In the case where all the types are constructors,
-ComboChart **will still render some additional componetry for axis-charts** in addition to the custom/standalone components in the options.
-
-Keep in mind that when using components/graphs independently, the library will not enforce any type checking.
-This enables the user to extend \`ComboChart\` to cover complex cases but also leaves responsibility on the developers to use the right chart combinations.
-
-`),
-};

package/stories/tutorials/dual-axes.ts

@@ -1,54 +0,0 @@
-import marked from 'marked';
-
-export const dualAxesTutorial = {
-	name: 'Dual axes charts',
-	content: marked(`
-# Dual Axes Charts
-
-If a chart is considered to be a **dual axes** chart, it means that the chart uses 2 **different** axes for visually mapping [ranges](https://www.mathsisfun.com/sets/domain-range-codomain.html) for the data.
-Careful consideration should be taken when using dual axes charts because they can more often misrepresent the data.
-
-Please refer to dataviz guidelines [here](https://www.carbondesignsystem.com/data-visualization/getting-started) for more information on IBM's best practices.
-
-____
-
-## Setting up a dual axes chart
-
-When using multiple Y or X axes, it is best to specify which axes will be primary (used for ranges or domain).
-Below we define options for an axis chart with **two dual axes (both vertical)** and one horizontal axis (bottom). In this case, we want to
-set up the horizontal axis (bottom) as the domain, and have the datasets' ranges mapped to the different vertical axes - "Temperature" on the left axis and "Products sold" on the right.
-
-Use the \`main\` option to define the \`left\` axis as the primary axis. The axis defined as \`main\` will be used to map **all datasets** until we set the
-\`correspondingDatasets\` on the non-primary (secondary) axis. If \`correspondingDatasets\` isn't set on the secondary axis, then the chart will render
-a read-only axis (without datasets mapped to it).
-
-\`\`\`
-const dualAxesOptions = {
-	...otherOptions,
-	axes: {
-		bottom: {
-		  mapsTo: date,
-		  scaleType: time
-		},
-		left: {
-		  mapsTo: temperature,
-		  scaleType: linear,
-		  main: true // this will be the primary axis
-		},
-		right: {
-		  mapsTo: value,
-		  scaleType: linear,
-		  // the dataset "Products sold" will map to this axis instead
-		  correspondingDatasets: [
-			"Products sold"
-		  ]
-		}
-	  },
-};
-\`\`\`
-
-Note: The library tries to determine the orientation/primary axes **without the use of \`main\`**,
-however it is best to be explicit when working with dual axes charts. If \`main\` is not specified, the library
-will try to determine the best primary/secondary assignments to make which could result in some confusion down the road.
-`),
-};

package/stories/tutorials/event-listeners.ts

@@ -1,31 +0,0 @@
-import marked from 'marked';
-
-export const eventListenersTutorial = {
-	name: 'Event listeners',
-	content: 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).
-
- 
-### 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-mouseover", e => {
-	console.log(e.detail);
-});
-\`\`\`
-
- 
-
-### Code examples
-Here are some possible solutions for event binding:
-
-- [vanilla](https://codesandbox.io/s/carbon-charts-vanilla-event-binding-9b1i5?file=/src/index.js)
-- [React](https://codesandbox.io/s/carbon-charts-react-event-binding-contributed-by-eric-lowry-upztp?file=/src/App.js)
-
-`),
-};

package/stories/tutorials/getting-started/angular.ts

@@ -1,142 +0,0 @@
-import marked from 'marked';
-
-export const angularTutorial = {
-	name: 'Angular',
-	type: 'getting-started',
-	content: 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.
-
-[Angular wrappers - storybook](https://carbon-design-system.github.io/carbon-charts/angular)
-
-
- 
-## Install
-
-**with yarn:**
-\`\`\`bash
-yarn add @carbon/charts-angular d3
-\`\`\`
-
-**with npm:**
-\`\`\`bash
-npm install --save @carbon/charts-angular d3
-\`\`\`
-
-**Note:** you'd also need to install \`carbon-components\` if you're not using a bundled version of the library.
-
- 
-## Getting started
-
-To start using the \`StackedBarChart\` component, try the example below:
- 
-
-###### app.module.ts
-\`\`\`ts
-import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
-
-import { ChartsModule } from "@carbon/charts-angular";
-
-import { AppComponent } from "./app.component";
-
-@NgModule({
-  imports: [BrowserModule, ChartsModule],
-  declarations: [AppComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-\`\`\`
-
-
-###### app.component.html
-\`\`\`html
-<ibm-stacked-bar-chart
-  class="n-chart"
-  [data]="stackedBarData"
-  [options]="stackedBarOptions"
-  #stackedBarChart
-></ibm-bar-chart>
-\`\`\`
-
-###### app.component.ts
-\`\`\`ts
-import { Component } from "@angular/core";
-import "@carbon/charts/styles.css";
-
-@Component({
-  selector: "my-app",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.css"],
-})
-export class AppComponent {
-  stackedBarData = [
-	// refer to tabular data format tutorial
-  ];
-
-  stackedBarOptions = {
-	// refer to chart specific options
-  };
-}
-\`\`\`
-
-&nbsp;
-## Data
-Data follows the same model in all charts.
-See tutorial on tabular data format for more information on chart data.
-
-&nbsp;
-## Options
-
-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;
-## Demos and Examples
-+ **[Storybook - Demos](https://carbon-design-system.github.io/carbon-charts/angular)**
-+ **[Storybook - Story Sources](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/angular/stories)**
-+ **[Storybook - 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.
-
-&nbsp;
-## Development
-Please refer to the
-[Contribution Guidelines](https://github.com/carbon-design-system/carbon-charts/blob/master/CONTRIBUTING.md)
-before starting any work.
-
-#### Using the server
-We recommend the use of [Angular Storybook](https://github.com/storybookjs/storybook/tree/next/app/angular)
-for developing components.
-
-**Start the server:**
-\`\`\`bash
-cd packages/angular
-yarn storybook
-\`\`\`
-
-Open browser to \`http://localhost:9005\`
-
-&nbsp;
-## List of available components
-View available components [here](https://github.com/carbon-design-system/carbon-charts#component-status)
-
-&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
-does not already exist.
-`),
-};

package/stories/tutorials/getting-started/react.ts

@@ -1,10 +0,0 @@
-import marked from 'marked';
-
-export const reactTutorial = {
-	name: 'React',
-	type: 'getting-started',
-	content: marked(`
-# Go to React storybook
-Too see our **React** getting started guide, go to our [React storybook site](https://charts.carbondesignsystem.com/react/?path=/story/docs-getting-started--instructions)
-`),
-};

package/stories/tutorials/getting-started/vanilla.ts

@@ -1,149 +0,0 @@
-import marked from 'marked';
-
-export const vanillaTutorial = {
-	name: 'vanilla',
-	type: 'getting-started',
-	content: marked(`
-# Carbon Charts - vanilla
-
-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.
-
- 
-## Install
-
-**with yarn:**
-\`\`\`bash
-yarn add @carbon/charts d3
-\`\`\`
-
-**with npm:**
-
-\`\`\`bash
-npm install --save @carbon/charts d3
-\`\`\`
-
-**Note:** you'd also need to install \`carbon-components\` if you're not using a bundled version of the library.
-
- 
-## Getting started
-
-To start using the \`StackedBarChart\` component, try the example below:
- 
-#### Consuming with a bundler (e.g. webpack)
-
-###### index.html
-\`\`\`html
-...
-<div id="my-bar-chart"></div>
-...
-\`\`\`
-
-###### index.js
-\`\`\`js
-import "@carbon/charts/styles.css";
-import { StackedBarChart } from "@carbon/charts";
-
-// grab chart holder DOM element
-const chartHolder = document.getElementById("my-bar-chart");
-
-// initialize the chart
-new StackedBarChart(chartHolder, {
-  data: stackedBarData,
-  options: stackedBarOptions,
-});
-\`\`\`
-
-&nbsp;
-#### Consuming in a browser environment (e.g. CDNs)
-
-###### index.html
-\`\`\`html
-<!DOCTYPE html>
-<html>
-  <head>
-    <link rel="stylesheet" href="https://unpkg.com/@carbon/charts/styles.css" />
-  </head>
-  <body>
-    <div id="my-bar-chart"></div>
-
-    <script src="https://unpkg.com/@carbon/charts/bundle.js"></script>
-    <script>
-      // grab chart holder DOM element
-      const chartHolder = document.getElementById("my-bar-chart");
-
-      const stackedBarData = [
-		// refer to tabular data format tutorial
-	  ];
-
-      const stackedBarOptions = {
-		// refer to chart specific options
-      };
-
-      // initialize the chart
-      new Charts.StackedBarChart(chartHolder, {
-        data: stackedBarData,
-        options: stackedBarOptions,
-      });
-    </script>
-  </body>
-</html>
-\`\`\`
-
-&nbsp;
-## Data
-Data follows the same model in all charts.
-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.
-
-&nbsp;
-## Development
-Please refer to the
-[Contribution Guidelines](https://github.com/carbon-design-system/carbon-charts/blob/master/CONTRIBUTING.md)
-before starting any work.
-
-#### Using the server
-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
-yarn demo:server
-\`\`\`
-
-Open browser to \`http://localhost:9006\`
-
-&nbsp;
-## List of available components
-View available components [here](https://github.com/carbon-design-system/carbon-charts#component-status)
-
-&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 does not already exist.
-`),
-};