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

package/.prettierignore

@@ -0,0 +1,2 @@
+dist/
+demo/bundle/

package/.storybook/addons.js

@@ -0,0 +1,3 @@
+import '@storybook/addon-links/register';
+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,20 @@
+import { configure } from '@storybook/vue';
+import { withOptions } from '@storybook/addon-options';
+
+withOptions({
+	name: 'Carbon Charts - Vue',
+	sortStoriesByKind: true,
+	showDownPanel: true,
+	showAddonPanel: true,
+	panelPosition: 'bottom',
+});
+
+// load global styles
+require('!style-loader!css-loader!@carbon/charts/demo/styles.css');
+
+const req = require.context('../stories', true, /.stories.js$/);
+function loadStories() {
+	req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

package/.storybook/manager-head.html

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

@@ -0,0 +1,3 @@
+module.exports = {
+	presets: ['@vue/app'],
+};

package/build.sh

@@ -0,0 +1,17 @@
+#!/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 "building with vue-cli"
+vue-cli-service build --target lib --name charts-vue ./src/index.js --no-clean
+
+echo "copying metadata"
+cp *.md dist/
+cp package.json dist/

package/carbon.yml

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

package/demo/bundle/iframe.html

@@ -0,0 +1,74 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Storybook</title><meta name="viewport" content="width=device-width,initial-scale=1"><base target="_parent"><style>:not(.sb-show-main) > .sb-main,
+  :not(.sb-show-nopreview) > .sb-nopreview,
+  :not(.sb-show-errordisplay) > .sb-errordisplay {
+    display: none;
+  }
+
+  .sb-wrapper {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 20px;
+    font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    overflow: auto;
+  }
+
+  .sb-heading {
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+    margin: 10px 0;
+    padding-right: 25px;
+  }
+
+  .sb-nopreview {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+  }
+
+  .sb-nopreview_main {
+    margin: auto;
+    padding: 30px;
+    border-radius: 10px;
+    background: rgba(0,0,0,0.03);
+  }
+
+  .sb-nopreview_heading {
+    text-align: center;
+  }
+
+  .sb-errordisplay {
+    border: 20px solid rgb(187, 49, 49);
+    background: #222;
+    color: #fff;
+    z-index: 999999;
+  }
+
+  .sb-errordisplay_code {
+    padding: 10px;
+    background: #000;
+    color: #eee;
+    font-family: "Operator Mono", "Fira Code Retina", "Fira Code", "FiraCode-Retina", "Andale Mono", "Lucida Console", Consolas, Monaco, monospace;
+  }
+
+  .sb-errordisplay pre {
+    white-space: pre-wrap;
+  }</style><script>/* globals window */
+  /* eslint-disable no-underscore-dangle */
+  try {
+    if (window.top !== window) {
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+      window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn('unable to connect to top frame for connecting dev tools');
+  }</script><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"><style>#root[hidden],
+      #docs-root[hidden] {
+        display: none !important;
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.0d94d5d42375f7fef2b1.bundle.js"></script><script src="vendors~main.0d94d5d42375f7fef2b1.bundle.js"></script><script src="main.0d94d5d42375f7fef2b1.bundle.js"></script></body></html>

package/demo/bundle/index.html

@@ -0,0 +1,22 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Storybook</title><meta name="viewport" content="width=device-width,initial-scale=1"><style>html, body {
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }</style><script>/* globals window */
+  /* eslint-disable no-underscore-dangle */
+  try {
+    if (window.top !== window) {
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn('unable to connect to top frame for connecting dev tools');
+  }</script><meta name="keywords" content="IBM, design, system, Carbon, design system, data visualization, charts, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud, vue"><meta name="description" content="This is the Vue version of Carbon Charts, an implementation of Carbon Design System's data-visualization patterns."><meta property="og:title" content="Carbon Charts - Vue"><meta property="og:site_name" content="Carbon Charts"><meta property="og:description" content="This is the Vue version of Carbon Charts, an implementation of Carbon Design System's data-visualization patterns."><meta property="og:image" content="https://charts.carbondesignsystem.com/vue/share.png"><meta property="og:url" content="http://charts.carbondesignsystem.com/vue"><link rel="icon" href="logo.svg"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:image:alt" content="Carbon Charts - Vue"><meta name="twitter:image" content="https://charts.carbondesignsystem.com/vue/share.png"><meta name="twitter:site" content="@_carbondesign"><script>setTimeout(function() {
+		document.querySelector('div.sidebar-header > div > a').innerHTML =
+			'Carbon Charts - Vue';
+	}, 1000);</script><style>#root[hidden],
+      #docs-root[hidden] {
+        display: none !important;
+      }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['DOCS_MODE'] = false;</script><script src="runtime~main.6b70b35614cf83eab770.bundle.js"></script><script src="vendors~main.b106196c63c677766ace.bundle.js"></script><script src="main.e5ba094561390c707589.bundle.js"></script></body></html>

package/demo/bundle/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>