@carbon/charts-angular 0.58.1 → 0.59.0-beta.0

package/.storybook/addons.js

@@ -0,0 +1,2 @@
+import "@storybook/addon-options/register";
+import '@storybook/addon-knobs/register';

package/.storybook/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="800"><defs><path id="a" d="M402.002 65H736v557.94H402.002z"/><path id="c" d="M65 295.764h106.706v247.479H65z"/></defs><g fill="none" fill-rule="evenodd"><path fill="#FF75B8" d="M251.796 197.647l-50.559-67.093c-54.285 40.138-96.035 96.261-118.296 161.416l80.408 24.584c16.993-48.006 48.15-89.316 88.447-118.907"/><path fill="#00B4FF" d="M400.5 651.997c-100.162 0-186.649-58.553-227.099-143.297l-74.88 38.153C152.885 658.814 267.679 735.997 400.5 735.997c98.515 0 187.111-42.46 248.489-110.078l-61.441-57.295c-46.038 51.185-112.784 83.373-187.048 83.373"/><path fill="#FF3A54" d="M398 149.017V65.022c-72.221.528-139.018 23.859-193.532 63.173l50.572 67.11c40.011-28.415 88.693-45.421 141.301-46.274l1.659-.014z"/><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#9639FF" d="M652 400.497c0 63.196-23.309 120.949-61.799 165.129l61.46 57.314C704.138 563.732 736 485.836 736 400.497 736 215.706 586.603 65.81 402.002 65v84.001C540.211 149.81 652 262.098 652 400.497" mask="url(#b)"/><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path fill="#007F7A" d="M149 400.497c0-28.027 4.584-54.983 13.044-80.159l-80.373-24.574C70.852 328.718 65 363.924 65 400.497c0 51.047 11.401 99.432 31.795 142.746l74.911-38.17C157.126 473.227 149 437.811 149 400.497" mask="url(#d)"/></g></svg>

package/.storybook/config.js

@@ -0,0 +1,22 @@
+import { configure } from '@storybook/angular';
+import { setOptions } from '@storybook/addon-options';
+
+setOptions({
+	name: 'Carbon Charts - Angular',
+	showAddonPanel: true,
+	sortStoriesByKind: true,
+	panelPosition: 'bottom',
+	showDownPanel: true,
+});
+
+// load global styles
+require('!style-loader!css-loader!@carbon/charts/demo/styles.css');
+
+const req = require.context('../stories', true, /.stories.ts$/);
+function loadStories() {
+	req.keys().forEach((filename) => {
+		req(filename);
+	});
+}
+
+configure(loadStories, module);

package/.storybook/manager-head.html

@@ -0,0 +1,45 @@
+<meta
+	name="keywords"
+	content="IBM, design, system, Carbon, design system, data visualization, charts, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud, angular"
+/>
+
+<meta
+	name="description"
+	content="This is the core Angular version of Carbon Charts, an implementation of Carbon Design System's data-visualization patterns."
+/>
+
+<!-- Open Graph -->
+<meta property="og:title" content="Carbon Charts - Angular" />
+<meta property="og:site_name" content="Carbon Charts" />
+<meta
+	property="og:description"
+	content="This is the Angular version of Carbon Charts, an implementation of Carbon Design System's data-visualization patterns."
+/>
+<meta
+	property="og:image"
+	content="https://charts.carbondesignsystem.com/angular/share.png"
+/>
+<meta
+	property="og:url"
+	content="http://charts.carbondesignsystem.com/angular"
+/>
+
+<!-- Favicon -->
+<link rel="icon" href="logo.svg" />
+
+<!-- Social -->
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:image:alt" content="Carbon Charts - Angular" />
+<meta
+	name="twitter:image"
+	content="https://charts.carbondesignsystem.com/angular/share.png"
+/>
+<meta name="twitter:site" content="@_carbondesign" />
+
+<!-- Storybook override -->
+<script>
+	setTimeout(function () {
+		document.querySelector('div.sidebar-header > div > a').innerHTML =
+			'Carbon Charts - Angular';
+	}, 1000);
+</script>

package/.storybook/preview-head.html

@@ -0,0 +1,10 @@
+<link
+	rel="preconnect"
+	crossorigin="anonymous"
+	href="https://fonts.gstatic.com"
+/>
+<link
+	href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400|IBM+Plex+Sans:400,600&display=swap"
+	rel="stylesheet"
+	crossorigin="anonymous"
+/>

package/.storybook/tsconfig.json

@@ -0,0 +1,10 @@
+{
+	"extends": "../tsconfig.json",
+	"exclude": [
+		"../src/test.ts",
+		"../src/**/*.spec.ts",
+		"./node_modules",
+		"../../node_modules"
+	],
+	"include": ["../src/**/*"]
+}

package/angular.json

@@ -0,0 +1,68 @@
+{
+	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+	"version": 1,
+	"newProjectRoot": "projects",
+	"projects": {
+		"charts-angular": {
+			"root": "",
+			"sourceRoot": "src",
+			"projectType": "library",
+			"prefix": "sc",
+			"architect": {
+				"build": {
+					"builder": "@angular-devkit/build-ng-packagr:build",
+					"options": {
+						"tsConfig": "./tsconfig.json",
+						"project": "./ng-package.json"
+					}
+				},
+				"test": {
+					"builder": "@angular-devkit/build-angular:karma",
+					"options": {
+						"main": "src/test.ts",
+						"karmaConfig": "./karma.conf.js",
+						"tsConfig": "./tsconfig.spec.json"
+					}
+				},
+				"lint": {
+					"builder": "@angular-devkit/build-angular:tslint",
+					"options": {
+						"tsConfig": ["./tsconfig.json", "./tsconfig.spec.json"],
+						"exclude": ["./node_modules", "../../node_modules"]
+					}
+				}
+			}
+		},
+		"charts-angular-e2e": {
+			"root": "e2e",
+			"sourceRoot": "e2e",
+			"projectType": "application",
+			"architect": {
+				"e2e": {
+					"builder": "@angular-devkit/build-angular:protractor",
+					"options": {
+						"protractorConfig": "./protractor.conf.js",
+						"devServerTarget": "charts-angular:serve"
+					}
+				},
+				"lint": {
+					"builder": "@angular-devkit/build-angular:tslint",
+					"options": {
+						"tsConfig": ["e2e/tsconfig.e2e.json"],
+						"exclude": ["./node_modules", "../../node_modules"]
+					}
+				}
+			}
+		}
+	},
+	"defaultProject": "charts-angular",
+	"schematics": {
+		"@schematics/angular:component": {
+			"prefix": "ibm",
+			"styleext": "css"
+		},
+		"@schematics/angular:directive": {
+			"prefix": "ibm"
+		}
+	}
+}

package/build.sh

@@ -0,0 +1,13 @@
+#!/usr/bin/env bash
+
+set -e
+
+rm -rf dist
+
+echo "linking local packages (non-lerna)"
+# we run this outside of lerna, since lerna seems to have issues with correctly linking to the dist
+rm -f node_modules/@carbon/charts
+ln -sf $(pwd)/../core/dist node_modules/@carbon/charts
+
+echo "compile with angular cli"
+ng build

package/carbon.yml

@@ -0,0 +1,275 @@
+# yaml-language-server: $schema=https://unpkg.com/@carbon-platform/schemas@v1/carbon-resources.schema.json
+library:
+  id: carbon-charts-angular
+  name: Carbon Charts Angular
+  description: Angular implementation of Carbon Charts
+  inherits: carbon-charts
+  externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/getting-started
+  demoLinks:
+    - type: storybook
+      name: Storybook
+      action: link
+      url: https://charts.carbondesignsystem.com/angular
+assets:
+  alluvial:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/complex-charts#alluvialsankey-diagrams
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/complex-charts-alluvial
+  area-simple:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#area-(simple)
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-area-simple
+  area-stacked:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts/#area-(stacked)
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-area-stacked
+  bar-floating:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#bar-(floating)
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-bar-floating
+  bar-grouped:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#bar-(grouped)
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-bar-grouped
+  bar-simple:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#bar-(simple)
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-bar-simple
+  bar-stacked:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts/#bar-(stacked)
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-bar-stacked
+  boxplot:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#boxplot
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-boxplot
+  bubble:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#bubble
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-bubble
+  bullet:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts/#bullet
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-bullet
+  circle-pack:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/complex-charts#circle-packs
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/complex-charts-circle-pack
+  combo:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/getting-started
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-combo
+  donut:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#donut
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-donut
+  gauge:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts/#gauge
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-gauge
+  heatmap:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/complex-charts#heat-maps
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/complex-charts-heatmap
+  histogram:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#histogram
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-histogram
+  line:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#line
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-line
+  lollipop:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#lollipop
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-lollipop
+  meter:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts/#meter
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-meter
+  meter-proportional:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts/#meter
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-meter-proportional
+  network-diagram:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/complex-charts#network-diagrams
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/diagrams
+  pie:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#pie
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-pie
+  radar:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#radar
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-radar
+  scatter:
+    name: Scatter
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#scatter
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-scatter
+  sparkline:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/getting-started
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-sparkline
+  step:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/getting-started
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-step
+  tree:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/complex-charts#tree-diagrams
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/complex-charts-tree
+  treemap:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/complex-charts#tree-maps
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/complex-charts-treemap
+  word-cloud:
+    status: stable
+    framework: angular
+    externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#word-cloud
+    demoLinks:
+      - type: storybook
+        name: Storybook
+        action: link
+        url: https://charts.carbondesignsystem.com/angular/?path=/story/simple-charts-word-cloud