@carbon/charts-angular 1.8.0 → 1.9.0-rc.3

package/.eslintrc.json

@@ -0,0 +1,51 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "!**/*",
+    ".storybook/**/*.html"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates",
+        "plugin:prettier/recommended",
+        "plugin:storybook/recommended"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "lib",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "ibm",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended",
+        "plugin:@angular-eslint/template/accessibility",
+        "plugin:prettier/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}

package/.storybook/carbon-charts-theme.ts

@@ -0,0 +1,8 @@
+import { create } from '@storybook/theming'
+
+export default create({
+	base: 'dark',
+	brandTitle: 'Carbon Charts - Angular',
+	brandTarget: '_self'
+	// fontBase: '"IBM Plex Sans", Arial, sans-serif' // throws off Storybook's icon alignment (only applies to left navigation)
+})

package/.storybook/main.ts

@@ -0,0 +1,39 @@
+import type { StorybookConfig } from '@storybook/angular'
+
+const config: StorybookConfig = {
+	stories: ['../src/stories/**/*.mdx', '../src/stories/**/*.stories.@(js|jsx|ts|tsx)'],
+	staticDirs: ['../../core/.storybook/assets'],
+	addons: [
+		{
+			name: '@storybook/addon-essentials',
+			options: {
+				actions: false
+			}
+		}
+	],
+	framework: {
+		name: '@storybook/angular',
+		options: {}
+	},
+	logLevel: 'error',
+	docs: {
+		autodocs: 'tag'
+	},
+	webpackFinal: async (config) => {
+		config?.module?.rules?.push({
+			test: /\.css$/,
+			use: ['style-loader', 'css-loader']
+		})
+		config.performance = {
+			hints: 'warning',
+			maxAssetSize: 1024 * 1024 * 2.5, // 2.5 MB
+			maxEntrypointSize: 1024 * 1024 * 5 // 5 MB
+		}
+		return config
+	},
+	features: {
+		storyStoreV7: false // required for storiesOf API
+	}
+}
+
+export default config

package/.storybook/manager-head.html

@@ -0,0 +1,22 @@
+<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" />

package/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api'
+import carbonChartsTheme from './carbon-charts-theme'
+
+addons.setConfig({
+	theme: carbonChartsTheme
+})

package/.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<link rel="preconnect" crossorigin="anonymous" href="https://fonts.googleapis.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" />
+<script>
+	window.global = window
+</script>

package/.storybook/preview.ts

@@ -0,0 +1,42 @@
+import type { Preview } from '@storybook/angular'
+import { themes } from '@storybook/theming'
+import '@carbon/charts/demo/styles.css'
+
+const preview: Preview = {
+	parameters: {
+		actions: { argTypesRegex: '^on[A-Z].*' },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/
+			}
+		},
+		docs: {
+			theme: themes.dark
+		},
+		backgrounds: {
+			// --cds-background
+			default: 'g100',
+			values: [
+				{
+					name: 'g100',
+					value: '#161616'
+				},
+				{
+					name: 'g90',
+					value: '#262626'
+				},
+				{
+					name: 'g10',
+					value: '#f4f4f4'
+				},
+				{
+					name: 'white',
+					value: '#fff'
+				}
+			]
+		}
+	}
+}
+
+export default preview

package/.storybook/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../tsconfig.lib.json",
+  "compilerOptions": {
+    "baseUrl": "../",
+    "allowSyntheticDefaultImports": true,
+    "declaration": false,
+    "declarationMap": false,
+    "strict": true
+  },
+  "exclude": [
+    "../src/test.ts",
+    "../src/**/*.spec.ts"
+  ],
+  "include": [
+    "../src/**/*",
+    "./preview.ts"
+  ],
+  "files": [
+    "./typings.d.ts"
+  ]
+}

package/.storybook/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md' {
+	const content: string
+	export default content
+}

package/README.md

@@ -10,8 +10,6 @@
 
 **[Storybook demo sources](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data)**
 
-**[Angular 13 example](https://github.com/nstuyvesant/carbon-charts-angular-13)**
-
 ## Getting started
 
 Run the following command using [npm](https://www.npmjs.com/):

package/angular.json

@@ -0,0 +1,91 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "./",
+  "projects": {
+    "charts-angular": {
+      "projectType": "library",
+      "root": ".",
+      "sourceRoot": "src",
+      "prefix": "ibm",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
+          }
+        },
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "tsConfig": ".storybook/tsconfig.json",
+            "browserTarget": "charts-angular:build",
+            "compodoc": false,
+            "compodocArgs": [
+              "-e",
+              "json",
+              "-d",
+              "./"
+            ],
+            "port": 9006,
+            "quiet": true
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "tsConfig": ".storybook/tsconfig.json",
+            "browserTarget": "charts-angular:build",
+            "compodoc": false,
+            "compodocArgs": [
+              "-e",
+              "json",
+              "-d",
+              "./"
+            ],
+            "outputDir": "demo/bundle",
+            "quiet": true
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "./**/*.ts",
+              "./**/*.html"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false,
+    "packageManager": "yarn",
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
+  }
+}

package/carbon.yml

@@ -0,0 +1,277 @@
+# 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:
+    Tell accurate stories around data with beautiful and accessible
+    visualizations.
+  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

package/ng-package.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./dist",
+  "lib": {
+    "entryFile": "src/index.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "@angular/common",
+    "@angular/core",
+    "@carbon/charts",
+    "@carbon/icons-angular",
+    "@carbon/telemetry"
+  ]
+}