@carbon/charts 0.59.0-beta.0 → 1.0.3

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

@@ -1,121 +0,0 @@
-import marked from 'marked';
-
-export const vueTutorial = {
-	name: 'Vue',
-	type: 'getting-started',
-	content: 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.
-
-[Vue wrappers - storybook](https://carbon-design-system.github.io/carbon-charts/vue)
-
- 
-## Install
-
-**with yarn:**
-\`\`\`bash
-yarn add @carbon/charts-vue d3
-\`\`\`
-
-**with npm:**
-\`\`\`bash
-npm install --save @carbon/charts-vue 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:
- 
-
-###### hello-world.vue
-\`\`\`vue
-<script>
-  import Vue from "vue";
-  import "@carbon/charts/styles.css";
-  import chartsVue from "@carbon/charts-vue";
-
-  Vue.use(chartsVue);
-
-  export default {
-    name: "HelloWorld",
-    components: {},
-    data() {
-      return {
-        stackedBarData: [
-			// refer to tabular data format tutorial
-		  ],
-        stackedBarOptions: {
-          // refer to chart specific options
-        },
-      };
-    },
-    template:
-      '<ccv-stacked-bar-chart :data="stackedBarData" :options="stackedBarOptions"></ccv-bar-chart>',
-  };
-</script>
-\`\`\`
-
-
-&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
-+ **[Storybook - Demos](https://carbon-design-system.github.io/carbon-charts/vue)**
-+ **[Storybook - Story Sources](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/vue/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
-[Vue Storybook](https://github.com/storybookjs/storybook/tree/next/app/vue) for developing components.
-
-**Start the server:**
-\`\`\`bash
-cd packages/vue
-yarn storybook
-\`\`\`
-
-Open browser to \`http://localhost:6006/\`.
-
-&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/index.ts

@@ -1,14 +0,0 @@
-// getting started tutorial exports
-export * from './getting-started/vanilla';
-export * from './getting-started/angular';
-export * from './getting-started/react';
-export * from './getting-started/vue';
-
-// other tutorials
-export * from './api';
-export * from './tabular-data-format';
-export * from './themes';
-export * from './event-listeners';
-export * from './color-palette';
-export * from './dual-axes';
-export * from './combo-charts';

package/stories/tutorials/tabular-data-format.ts

@@ -1,134 +0,0 @@
-import marked from 'marked';
-
-export const tabularTutorial = {
-	name: 'Tabular data format',
-	content: marked(`
-# Tabular data format
-
-The default data format in Carbon Charts has a tabular nature.
-
-This means more flexibility for our users in terms of the shape
-of the data they can provide to the library.
-
-\`\`\`js
-const simpleBarData = [
-    { group: "Qty", value: 65000 },
-    { group: "More", value: 29123 },
-    { group: "Sold", value: 35213 },
-    { group: "Restocking", value: 51213 },
-    { group: "Misc", value: 16932 }
-];
-\`\`\`
-
-Imagine an **array where each element is a datapoint.**
-
-Now we need to introduce some new fields into our \`axes\`
-options in order to map keys within our datapoints to axis values.
-
-##### Additions to charting options:
-*Note:* **This section does not apply to any
-non-axis charting components (e.g. pie & donut)**
-
-We'd still need a way to know which keys map to
-your values (\`rangeIdentifier\`) and which map to
-the labels you'd be showing on an axis (\`domainIdentifier\`).
-
-These identifiers can be set through the \`mapsTo\`
-option within each axis, and are defeaulted to \`value\`
-& (\`key\` or \`date\` - depending on whether your datapoints
-include dates).
-
-**Although the library will set fallback
-\`mapsTo\` defaults, you should always set your own.**
-
-\`\`\`js
-const simpleBarOptions = {
-    title: "Simple bar (discrete)",
-    axes: {
-        left: {
-            mapsTo: "value"
-        },
-        bottom: {
-            mapsTo: "group",
-            scaleType: "labels"
-        }
-    }
-};
-\`\`\`
-
-##### 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 },
-	{ group: "L22I P66EP L22I P66EP L22I P66EP", value: 65000 },
-	{ group: "JQAI 2M4L1", value: 75000 },
-	{ group: "J9DZ F37AP", value: 1200 },
-	{ group: "YEL48 Q6XK YEL48", value: 10000 },
-	{ group: "Misc", value: 25000 }
-];
-\`\`\`
-
-##### 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.
-
-\`\`\`js
-const simpleBarOptions = {
-    data: {
-		groupMapsTo: "category"
-	}
-};
-
-const simpleBarData = [
-    { category: "Qty", value: 65000 },
-    { category: "More", value: 29123 },
-    { category: "Sold", value: 35213 },
-    { category: "Restocking", value: 51213 },
-    { category: "Misc", value: 16932 }
-];
-\`\`\`
-
-For bubble charts you're able to customize the "radius" identifier:
-\`\`\`js
-export const bubbleDoubleLinearOptions = {
-	title: "Bubble (linear)",
-	axes: {
-		bottom: {
-			title: "No. of employees",
-			mapsTo: "sales",
-			includeZero: false
-		},
-		left: {
-			title: "Annual sales",
-			mapsTo: "profit",
-			includeZero: false
-		}
-	},
-	bubble: {
-		radiusMapsTo: "surplus"
-	}
-};
-
-const bubbleDoubleLinearData = [
-	{ group: "Dataset 1", sales: 10000, profit: 32100, surplus: 50000 },
-	{ group: "Dataset 1", sales: 12000, profit: 23500, surplus: 34000 },
-	{ group: "Dataset 1", sales: 14000, profit: 53100, surplus: 63000 },
-	{ group: "Dataset 1", sales: 15000, profit: 42300, surplus: 43000 },
-	{ group: "Dataset 1", sales: 16000, profit: 12300, surplus: 55000 },
-	{ group: "Dataset 2", sales: 11000, profit: 12400, surplus: 25000 },
-	{ group: "Dataset 2", sales: 13000, profit: 34500, surplus: 35000 },
-	{ group: "Dataset 2", sales: 13500, profit: 23100, surplus: 55000 },
-	{ group: "Dataset 2", sales: 15500, profit: 63200, surplus: 35000 },
-	{ group: "Dataset 2", sales: 15750, profit: 24300, surplus: 64000 }
-];
-\`\`\`
-
-**Default value for \`radiusMapsTo\` is \`radius\`**
-`),
-};

package/stories/tutorials/themes.ts

@@ -1,10 +0,0 @@
-import marked from 'marked';
-
-export const themesTutorial = {
-	name: 'Themes',
-	content: marked(`
-# Themes
-
-Coming soon
-`),
-};

package/stories/tutorials.stories.ts

@@ -1,42 +0,0 @@
-import { storiesOf } from '@storybook/html';
-
-import '../demo/styles.scss';
-
-// import tutorial MD strings
-import * as TUTORIALS from './tutorials/index';
-
-// Syntax highlighting
-const hljs = require('highlight.js/lib/core');
-hljs.registerLanguage('js', require('highlight.js/lib/languages/javascript'));
-hljs.registerLanguage('bash', require('highlight.js/lib/languages/bash'));
-
-hljs.registerLanguage(
-	'typescript',
-	require('highlight.js/lib/languages/typescript')
-);
-
-const gettingStartedStories = storiesOf('Docs|Getting Started', module);
-const tutorialStories = storiesOf('Docs|Tutorials', module);
-
-Object.keys(TUTORIALS).forEach((tutorialKey) => {
-	const tutorial = TUTORIALS[tutorialKey];
-
-	const storiesToAddTo =
-		tutorial.type === 'getting-started'
-			? gettingStartedStories
-			: tutorialStories;
-
-	storiesToAddTo.add(tutorial.name, () => {
-		// container creation
-		const container = document.createElement('div');
-		container.setAttribute('class', 'container tutorial');
-
-		container.innerHTML = tutorial.content;
-
-		container.querySelectorAll('pre code').forEach((block) => {
-			hljs.highlightBlock(block);
-		});
-
-		return container;
-	});
-});

package/tsconfig.json

@@ -1,28 +0,0 @@
-{
-	"compilerOptions": {
-		"composite": true,
-		"baseUrl": ".",
-		"declaration": true,
-		"lib": ["es2015", "dom"],
-		"esModuleInterop": true,
-		"sourceMap": true,
-		"mapRoot": "./",
-		"module": "esnext",
-		"moduleResolution": "node",
-		"resolveJsonModule": true,
-		"outDir": "./dist/build",
-		"rootDir": ".",
-		"target": "es5",
-		"inlineSources": true,
-		"types": ["node", "jasmine"],
-		"typeRoots": ["./node_modules/@types", "./custom.d.ts"]
-	},
-	"exclude": [
-		"./src/**/*.spec.ts",
-		"./src/tests",
-		"./node_modules",
-		"../../node_modules"
-	],
-	"references": [{ "path": "src" }, { "path": "demo" }],
-	"files": []
-}

package/tslint.json

@@ -1,100 +0,0 @@
-{
-	"rules": {
-		"callable-types": true,
-		"class-name": true,
-		"comment-format": [true, "check-space"],
-		"curly": true,
-		"eofline": true,
-		"forin": true,
-		"import-blacklist": [true, "rxjs"],
-		"import-spacing": true,
-		"indent": [true, "tabs"],
-		"interface-over-type-literal": true,
-		"label-position": true,
-		"max-line-length": [true, 140],
-		"member-access": false,
-		"member-ordering": [
-			true,
-			{
-				"order": [
-					"public-static-field",
-					"protected-static-field",
-					"private-static-field",
-					"public-static-method",
-					"protected-static-method",
-					"private-static-method",
-					"public-instance-field",
-					"protected-instance-field",
-					"private-instance-field",
-					"public-constructor",
-					"protected-constructor",
-					"private-constructor",
-					"public-instance-method",
-					"protected-instance-method",
-					"private-instance-method"
-				]
-			}
-		],
-		"no-arg": true,
-		"no-bitwise": true,
-		"no-console": [true, "debug", "info", "time", "timeEnd", "trace"],
-		"no-construct": true,
-		"no-debugger": true,
-		"no-duplicate-variable": true,
-		"no-empty": false,
-		"no-empty-interface": true,
-		"no-eval": true,
-		"no-inferrable-types": [true, "ignore-params"],
-		"no-shadowed-variable": true,
-		"no-string-literal": false,
-		"no-string-throw": true,
-		"no-switch-case-fall-through": true,
-		"no-trailing-whitespace": true,
-		"no-unused-expression": true,
-		"no-use-before-declare": true,
-		"no-var-keyword": true,
-		"object-literal-sort-keys": false,
-		"one-line": [
-			true,
-			"check-open-brace",
-			"check-catch",
-			"check-else",
-			"check-whitespace"
-		],
-		"prefer-const": true,
-		"quotemark": [true, "double"],
-		"radix": true,
-		"semicolon": [true, "always"],
-		"triple-equals": [true, "allow-null-check"],
-		"typedef-whitespace": [
-			true,
-			{
-				"call-signature": "nospace",
-				"index-signature": "nospace",
-				"parameter": "nospace",
-				"property-declaration": "nospace",
-				"variable-declaration": "nospace"
-			}
-		],
-		"typeof-compare": true,
-		"unified-signatures": true,
-		"variable-name": false,
-		"whitespace": [
-			true,
-			"check-branch",
-			"check-decl",
-			"check-operator",
-			"check-separator",
-			"check-module",
-			"check-type"
-		],
-		"space-before-function-paren": [true, "named"],
-		"trailing-comma": [
-			true,
-			{
-				"multiline": "never",
-				"singleline": "never"
-			}
-		]
-	}
-}