├── .babelrc
├── .editorconfig
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── dist
    ├── vue-c3.cjs.js
    ├── vue-c3.esm.js
    └── vue-c3.umd.js
├── docs
    ├── .babelrc
    ├── assets
    │   ├── logo_black.png
    │   └── logo_black.svg
    ├── dist
    │   └── build.js
    ├── favicon.png
    ├── index.html
    ├── package.json
    ├── src
    │   ├── App.vue
    │   ├── Header.vue
    │   ├── c3.min.css
    │   ├── highlight.scss
    │   ├── main.js
    │   └── style.scss
    └── webpack.config.js
├── package.json
├── rollup.config.js
└── src
    ├── VueC3.vue
    ├── events.js
    └── index.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [ "@babel/preset-env" ]
3 | }
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | package-lock.json
3 | node_modules/
4 | npm-debug.log
5 | yarn-error.log
6 | demo/dist
7 | *.map
8 | *.sketch
9 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | docs
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 - 2018 Christoph Biering
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-c3
 2 | 
 3 | > vue-c3 is a reusable vue component for [c3](https://github.com/c3js/c3) charts
 4 | 
 5 | [![forthebadge](http://forthebadge.com/images/badges/built-with-love.svg)](http://forthebadge.com)
 6 | [![forthebadge](http://forthebadge.com/images/badges/made-with-vue.svg)](http://forthebadge.com)
 7 | [![forthebadge](http://forthebadge.com/images/badges/uses-js.svg)](http://forthebadge.com)
 8 | 
 9 | ## Install
10 | 
11 | ```bash
12 | npm install --save vue-c3
13 | 
14 | # and if it's not already installed:
15 | npm install --save c3
16 | ```
17 | 
18 | ## Usage
19 | 
20 | In your vue-component:
21 | 
22 | ```vue
23 | <template>
24 |   <div>
25 |     <vue-c3 :handler="handler"></vue-c3>
26 |   </div>
27 | </template>
28 | 
29 | <script>
30 |   import Vue from 'vue'
31 |   import VueC3 from 'vue-c3'
32 | 
33 |   export default {
34 |     name: ...,
35 |     components: {
36 |       VueC3
37 |     },
38 | 
39 |     data () {
40 |       return {
41 |         handler: new Vue()
42 |       }
43 |     }
44 |   }
45 | </script>
46 | ```
47 | 
48 | You can use the handler to send events to the `vue-c3` component:
49 | 
50 | To initialize the c3 chart call:
51 | 
52 | ```vue
53 | 
54 | <script>
55 |   ...
56 |   export default {
57 |     name: ...,
58 | 
59 |     mounted () {
60 |       // to init the graph call:
61 |       const options = {
62 |         data: {
63 |           columns: [
64 |             ['data1', 2, 4, 1, 5, 2, 1],
65 |             ['data2', 7, 2, 4, 6, 10, 1]
66 |           ],
67 |           ...
68 |         },
69 |         ...
70 |       }
71 |       this.handler.$emit('init', options)
72 |     }
73 |   }
74 | </script>
75 | ```
76 | 
77 | ### Events
78 | 
79 | An overview of all events which can be submitted to the `.$emit(name, ..)` method:
80 | 
81 | |Name|Parameters|Description|
82 | |:--:|:--:|:--|
83 | |`init`|[options](http://c3js.org/reference.html)|Use this method before anything else to generate the chart|
84 | |`destroy`|-|Used to destroy the chart|
85 | |`dispatch`|[api](http://c3js.org/reference.html#api)|Access the c3 chart object directly to use the api|
86 | 
87 | For example you can use `this.handler.$emit('dispatch', (chart) => chart.resize())` to resize the chart.
88 | 
89 | For more information about c3 see the documentation [http://c3js.org/reference.html](http://c3js.org/reference.html).
90 | 
91 | ## License
92 | 
93 | Copyright (c) 2017 - 2018 Christoph Biering, Licensed under the [MIT license](./LICENSE).
94 | 


--------------------------------------------------------------------------------
/dist/vue-c3.cjs.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 4 | 
 5 | var c3 = _interopDefault(require('c3'));
 6 | 
 7 | const INIT     = 'init';
 8 | const DESTROY  = 'destroy';
 9 | const DISPATCH = 'dispatch';
10 | 
11 | var VueC3 = {
12 | render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vuec3-chart"})},
13 | staticRenderFns: [],
14 |     name: 'vuec3',
15 | 
16 |     // TODO: support for options prop
17 |     props: {
18 |       handler: {
19 |         required: true,
20 |         type: Object
21 |       }
22 |     },
23 | 
24 |     data: function () {
25 |       return {
26 |         $chart: null
27 |       }
28 |     },
29 | 
30 |     methods: {
31 |       destroyChart: function () {
32 |         if (this.$chart) {
33 |           this.$chart = this.$chart.destroy();
34 |         }
35 |       },
36 | 
37 |       initChart: function (options) {
38 |         if (this.$chart) {
39 |           this.destroyChart();
40 |         }
41 |         if (!options) {
42 |           options = {};
43 |         }
44 |         options.bindto = this.$el;
45 |         this.$chart = c3.generate(options);
46 |       },
47 | 
48 |       dispatchChart: function (cb) {
49 |         if (cb && this.$chart) {
50 |           cb.call(null, this.$chart);
51 |         }
52 |       }
53 |     },
54 | 
55 |     mounted: function () {
56 |       if (this.handler) {
57 |         this.handler.$on(INIT, this.initChart);
58 |         this.handler.$on(DESTROY, this.destroyChart);
59 |         this.handler.$on(DISPATCH, this.dispatchChart);
60 |       }
61 |     },
62 | 
63 |     beforeDestroy: function () {
64 |       this.destroyChart();
65 |     }
66 |   };
67 | 
68 | module.exports = VueC3;
69 | 


--------------------------------------------------------------------------------
/dist/vue-c3.esm.js:
--------------------------------------------------------------------------------
 1 | import c3 from 'c3';
 2 | 
 3 | const INIT     = 'init';
 4 | const DESTROY  = 'destroy';
 5 | const DISPATCH = 'dispatch';
 6 | 
 7 | var VueC3 = {
 8 | render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vuec3-chart"})},
 9 | staticRenderFns: [],
10 |     name: 'vuec3',
11 | 
12 |     // TODO: support for options prop
13 |     props: {
14 |       handler: {
15 |         required: true,
16 |         type: Object
17 |       }
18 |     },
19 | 
20 |     data: function () {
21 |       return {
22 |         $chart: null
23 |       }
24 |     },
25 | 
26 |     methods: {
27 |       destroyChart: function () {
28 |         if (this.$chart) {
29 |           this.$chart = this.$chart.destroy();
30 |         }
31 |       },
32 | 
33 |       initChart: function (options) {
34 |         if (this.$chart) {
35 |           this.destroyChart();
36 |         }
37 |         if (!options) {
38 |           options = {};
39 |         }
40 |         options.bindto = this.$el;
41 |         this.$chart = c3.generate(options);
42 |       },
43 | 
44 |       dispatchChart: function (cb) {
45 |         if (cb && this.$chart) {
46 |           cb.call(null, this.$chart);
47 |         }
48 |       }
49 |     },
50 | 
51 |     mounted: function () {
52 |       if (this.handler) {
53 |         this.handler.$on(INIT, this.initChart);
54 |         this.handler.$on(DESTROY, this.destroyChart);
55 |         this.handler.$on(DISPATCH, this.dispatchChart);
56 |       }
57 |     },
58 | 
59 |     beforeDestroy: function () {
60 |       this.destroyChart();
61 |     }
62 |   };
63 | 
64 | export default VueC3;
65 | 


--------------------------------------------------------------------------------
/dist/vue-c3.umd.js:
--------------------------------------------------------------------------------
 1 | (function (global, factory) {
 2 |   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('c3')) :
 3 |   typeof define === 'function' && define.amd ? define(['c3'], factory) :
 4 |   (global.howLongUntilLunch = factory(global.c3));
 5 | }(this, (function (c3) { 'use strict';
 6 | 
 7 |   c3 = c3 && c3.hasOwnProperty('default') ? c3['default'] : c3;
 8 | 
 9 |   const INIT     = 'init';
10 |   const DESTROY  = 'destroy';
11 |   const DISPATCH = 'dispatch';
12 | 
13 |   var VueC3 = {
14 |   render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vuec3-chart"})},
15 |   staticRenderFns: [],
16 |       name: 'vuec3',
17 | 
18 |       // TODO: support for options prop
19 |       props: {
20 |         handler: {
21 |           required: true,
22 |           type: Object
23 |         }
24 |       },
25 | 
26 |       data: function () {
27 |         return {
28 |           $chart: null
29 |         }
30 |       },
31 | 
32 |       methods: {
33 |         destroyChart: function () {
34 |           if (this.$chart) {
35 |             this.$chart = this.$chart.destroy();
36 |           }
37 |         },
38 | 
39 |         initChart: function (options) {
40 |           if (this.$chart) {
41 |             this.destroyChart();
42 |           }
43 |           if (!options) {
44 |             options = {};
45 |           }
46 |           options.bindto = this.$el;
47 |           this.$chart = c3.generate(options);
48 |         },
49 | 
50 |         dispatchChart: function (cb) {
51 |           if (cb && this.$chart) {
52 |             cb.call(null, this.$chart);
53 |           }
54 |         }
55 |       },
56 | 
57 |       mounted: function () {
58 |         if (this.handler) {
59 |           this.handler.$on(INIT, this.initChart);
60 |           this.handler.$on(DESTROY, this.destroyChart);
61 |           this.handler.$on(DISPATCH, this.dispatchChart);
62 |         }
63 |       },
64 | 
65 |       beforeDestroy: function () {
66 |         this.destroyChart();
67 |       }
68 |     };
69 | 
70 |   return VueC3;
71 | 
72 | })));
73 | 


--------------------------------------------------------------------------------
/docs/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [ "@babel/preset-env" ]
3 | }
4 | 


--------------------------------------------------------------------------------
/docs/assets/logo_black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/biering/vue-c3/0f608d63c1a7e0104ef0db7b31d42dffe14ef8e0/docs/assets/logo_black.png


--------------------------------------------------------------------------------
/docs/assets/logo_black.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #FFFFFF;">
 3 |     <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
 4 |     <title>Artboard Copy</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <defs>
 7 |         <linearGradient x1="103.923094%" y1="100%" x2="-17.0209444%" y2="66.9471569%" id="linearGradient-1">
 8 |             <stop stop-color="#020001" offset="0%"></stop>
 9 |             <stop stop-color="#F77062" offset="100%"></stop>
10 |         </linearGradient>
11 |     </defs>
12 |     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
13 |         <g id="Artboard-Copy" stroke-width="10">
14 |             <g id="circle" transform="translate(3.000000, 3.000000)">
15 |                 <circle id="underlay-circle" stroke="url(#linearGradient-1)" opacity="0.0849184783" cx="29" cy="29" r="20"></circle>
16 |                 <path d="M29,49 C40.045695,49 49,40.045695 49,29 C49,17.954305 40.045695,9 29,9 L29,9 C17.954305,9 9,17.954305 9,29" id="overlay-circle" stroke="#131314" stroke-linecap="round" transform="translate(29.000000, 29.000000) rotate(-135.000000) translate(-29.000000, -29.000000) "></path>
17 |             </g>
18 |         </g>
19 |     </g>
20 | </svg>


--------------------------------------------------------------------------------
/docs/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/biering/vue-c3/0f608d63c1a7e0104ef0db7b31d42dffe14ef8e0/docs/favicon.png


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>vue-c3 Demo</title>
 6 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1">
 7 | 
 8 |     <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,700" rel="stylesheet">
 9 |     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
10 |     <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
11 |   </head>
12 |   <body>
13 |     <div id="app"></div>
14 |     <script src="dist/build.js"></script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-c3-demo",
 3 |   "version": "1.0.0",
 4 |   "scripts": {
 5 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
 6 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 7 |   },
 8 |   "dependencies": {
 9 |     "vue": "^2.0.0"
10 |   },
11 |   "devDependencies": {
12 |     "@babel/core": "^7.0.0-beta.46",
13 |     "@babel/preset-env": "^7.0.0-beta.46",
14 |     "babel-loader": "^8.0.0-beta.2",
15 |     "cross-env": "^5.1.5",
16 |     "css-loader": "^0.28.11",
17 |     "node-sass": "^4.9.0",
18 |     "sass-loader": "^7.0.1",
19 |     "vue-loader": "^15.0.10",
20 |     "vue-style-loader": "^4.1.0",
21 |     "vue-template-compiler": "^2.0.0",
22 |     "webpack": "^4.8.2",
23 |     "webpack-cli": "^2.1.3",
24 |     "webpack-dev-server": "^3.1.4"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/docs/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <main class="main">
  3 |     <header-view></header-view>
  4 | 
  5 |     <h1>VueUp</h1>
  6 | 
  7 |     <div class="links">
  8 |       <a href="https://www.npmjs.com/package/vueup">
  9 |         npm
 10 |       </a>
 11 |       <span class="divider">|</span>
 12 |       <a href="https://github.com/chryb/vueup">
 13 |         github
 14 |       </a>
 15 |     </div>
 16 | 
 17 |     <div class="chart">
 18 |       <vue-c3 :handler="handler"></vue-c3>
 19 |     </div>
 20 | 
 21 | 
 22 |     <button @click="addData">Load Data</button>
 23 | 
 24 |     <p>
 25 |       Simple, lightweight and super fast global notification popup for Vue.js.
 26 |     </p>
 27 | 
 28 |     <p>
 29 |       With VueUp you can easily notify your users about certain actions and effects.
 30 |     </p>
 31 | 
 32 |     <p>
 33 |       For more information see <a href="https://github.com/chryb/vueup">VueUp on Github</a>.
 34 |     </p>
 35 | 
 36 |     <footer>
 37 |       Released under the <a href="//github.com/chryb/vueup/blob/master/LICENSE">MIT</a> license.
 38 |       <a href="//github.com/chryb/vueup">View source.</a>
 39 |     </footer>
 40 |   </main>
 41 | </template>
 42 | 
 43 | <script>
 44 |   import Vue from 'vue'
 45 |   import VueC3 from 'plugin'
 46 | 
 47 |   import HeaderView from './Header.vue'
 48 | 
 49 |   export default {
 50 |     name: 'app',
 51 |     components: {
 52 |       HeaderView,
 53 |       VueC3
 54 |     },
 55 | 
 56 |     data () {
 57 |       return {
 58 |         handler: new Vue()
 59 |       }
 60 |     },
 61 | 
 62 |     mounted () {
 63 |       const options = {
 64 |         data: {
 65 |           columns: [
 66 |             ['data1', 2, 4, 1, 5, 2, 1, 3, 1, 3, 5, 3, 2, 7, 8, 9, 7, 3, 1],
 67 |             ['data2', 7, 2, 4, 6, 10, 1, 4, 7, 8, 12, 14, 8, 5, 2, 5, 2, 2, 1]
 68 |           ]
 69 |         }
 70 |       }
 71 | 
 72 |       this.handler.$emit('init', options)
 73 |     },
 74 | 
 75 |     methods: {
 76 |       addData () {
 77 |         this.handler.$emit('dispatch', (chart) => {
 78 |           let data1 = chart.data('data1')[0].values.map(v => v.value)
 79 |           let data2 = chart.data('data2')[0].values.map(v => v.value)
 80 | 
 81 |           data1.unshift(Math.floor(Math.random() * 15))
 82 |           // data1 = data1.shift()
 83 |           data2.unshift(Math.floor(Math.random() * 15))
 84 |           // data2 = data2.shift()
 85 | 
 86 |           chart.load({
 87 |             columns: [
 88 |               ['data1', ...data1],
 89 |               ['data2', ...data2]
 90 |             ]
 91 |           })
 92 |         })
 93 |       }
 94 |     }
 95 |   }
 96 | </script>
 97 | 
 98 | <style>
 99 |   @import './c3.min.css';
100 | </style>
101 | 
102 | <style lang="scss">
103 |   @import './style.scss';
104 |   @import './highlight.scss';
105 | </style>
106 | 


--------------------------------------------------------------------------------
/docs/src/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="header">
 3 |     <div class="wrap">
 4 |       <div class="logo">
 5 |         <a href="http://chryb.me">
 6 |           <img src="assets/logo_black.svg"/>
 7 |         </a>
 8 |       </div>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 |   export default {
15 |     name: 'header-view'
16 |   }
17 | </script>
18 | 
19 | <style lang="scss" scoped>
20 |   .header {
21 |     width: 100%;
22 |     position: absolute;
23 |     top: 0;
24 |     left: 0;
25 |   }
26 | 
27 |   .header .wrap {
28 |     max-width: 960px;
29 |     margin-left: auto;
30 |     margin-right: auto;
31 |     padding-top: 40px;
32 |   }
33 | 
34 |   .header .wrap .logo {
35 |     font-family: "Rubik", sans-serif;
36 |     font-size: 34px;
37 |   }
38 | 
39 |   .header .wrap .logo img {
40 |     width: 50px;
41 |     height: 50px;
42 |   }
43 | 
44 |   .header .wrap .links {
45 |     float: right;
46 |     margin-top: -42px;
47 |   }
48 | 
49 |   .header .wrap .links .item {
50 | 
51 |   }
52 | 
53 |   .header .wrap .links .item a {
54 |     text-decoration: none;
55 |     color: #999;
56 |   }
57 | 
58 |   .header .wrap .links .item a:hover {
59 |     color: #131314;
60 |   }
61 | 
62 | </style>
63 | 


--------------------------------------------------------------------------------
/docs/src/c3.min.css:
--------------------------------------------------------------------------------
1 | .c3 svg{font:10px sans-serif;-webkit-tap-highlight-color:transparent}.c3 line,.c3 path{fill:none;stroke:#000}.c3 text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.c3-bars path,.c3-event-rect,.c3-legend-item-tile,.c3-xgrid-focus,.c3-ygrid{shape-rendering:crispEdges}.c3-chart-arc path{stroke:#fff}.c3-chart-arc text{fill:#fff;font-size:13px}.c3-grid line{stroke:#aaa}.c3-grid text{fill:#aaa}.c3-xgrid,.c3-ygrid{stroke-dasharray:3 3}.c3-text.c3-empty{fill:grey;font-size:2em}.c3-line{stroke-width:1px}.c3-circle._expanded_{stroke-width:1px;stroke:#fff}.c3-selected-circle{fill:#fff;stroke-width:2px}.c3-bar{stroke-width:0}.c3-bar._expanded_{fill-opacity:1;fill-opacity:.75}.c3-target.c3-focused{opacity:1}.c3-target.c3-focused path.c3-line,.c3-target.c3-focused path.c3-step{stroke-width:2px}.c3-target.c3-defocused{opacity:.3!important}.c3-region{fill:#4682b4;fill-opacity:.1}.c3-brush .extent{fill-opacity:.1}.c3-legend-item{font-size:12px}.c3-legend-item-hidden{opacity:.15}.c3-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.c3-title{font:14px sans-serif}.c3-tooltip-container{z-index:10}.c3-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;-webkit-box-shadow:7px 7px 12px -9px #777;-moz-box-shadow:7px 7px 12px -9px #777;box-shadow:7px 7px 12px -9px #777;opacity:.9}.c3-tooltip tr{border:1px solid #ccc}.c3-tooltip th{background-color:#aaa;font-size:14px;padding:2px 5px;text-align:left;color:#fff}.c3-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff;border-left:1px dotted #999}.c3-tooltip td>span{display:inline-block;width:10px;height:10px;margin-right:6px}.c3-tooltip td.value{text-align:right}.c3-area{stroke-width:0;opacity:.2}.c3-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}.c3-chart-arcs .c3-chart-arcs-background{fill:#e0e0e0;stroke:none}.c3-chart-arcs .c3-chart-arcs-gauge-unit{fill:#000;font-size:16px}.c3-chart-arcs .c3-chart-arcs-gauge-max{fill:#777}.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000}.c3-chart-arc.c3-target g path{opacity:1}.c3-chart-arc.c3-target.c3-focused g path{opacity:1}
2 | 


--------------------------------------------------------------------------------
/docs/src/highlight.scss:
--------------------------------------------------------------------------------
 1 | .code-wrap {
 2 |   text-align: left;
 3 |   margin-top: 30px;
 4 |   margin-bottom: 30px;
 5 |   border-radius: 6px;
 6 |   background-color: #444;
 7 | 
 8 |   > code {
 9 |     font-family: "Roboto Mono", monospace;
10 |     color: #fff;
11 |     font-size: 13px;
12 |     font-size: 0.9em;
13 |   }
14 | }
15 | 
16 | code .string {
17 |   color: #F58F29;
18 | }
19 | 
20 | code .method {
21 |   color: #EC368D;
22 |   font-weight: bold;
23 | }
24 | 
25 | code .comment {
26 |   color: #999;
27 | }
28 | 
29 | code .number {
30 |   color: #51E5FF;
31 | }
32 | 


--------------------------------------------------------------------------------
/docs/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | new Vue({
5 |   el: '#app',
6 |   render: h => h(App)
7 | })
8 | 


--------------------------------------------------------------------------------
/docs/src/style.scss:
--------------------------------------------------------------------------------
  1 | $main-color: #FF0F80;
  2 | 
  3 | body, html {
  4 |   top: 0;
  5 |   left: 0;
  6 |   margin: 0;
  7 |   padding: 0;
  8 | }
  9 | 
 10 | * {
 11 |   box-sizing: border-box;
 12 |   -webkit-font-smoothing: antialiased;
 13 | }
 14 | 
 15 | body {
 16 |   font-family: "Roboto", sans-serif;
 17 |   background-color: #fff;
 18 |   font-size: 16px;
 19 |   letter-spacing: .9px;
 20 | }
 21 | 
 22 | /* elements */
 23 | 
 24 | .links {
 25 |   .divider {
 26 |     color: #999;
 27 |     margin: 0 10px;
 28 |   }
 29 | }
 30 | 
 31 | .chart {
 32 |   margin: 30px 0;
 33 | }
 34 | 
 35 | 
 36 | h1, h2 {
 37 |   font-family: "Roboto", sans-serif;
 38 |   font-weight: 700;
 39 |   color: #333;
 40 |   margin-bottom: 30px;
 41 |   margin-top: 30px;
 42 | }
 43 | 
 44 | h1 {
 45 |   font-size: 1.625em;
 46 |   letter-spacing: 6px;
 47 |   border-left: 3px solid #454545;
 48 |   padding-left: 20px;
 49 |   text-transform: uppercase;
 50 | }
 51 | 
 52 | h2 {
 53 |   font-size: 24px;
 54 |   letter-spacing: 1.9px;
 55 |   margin-top: 40px;
 56 | }
 57 | 
 58 | p {
 59 |   color: #606c77;
 60 |   font-size: 1.1em;
 61 |   font-weight: 300;
 62 |   letter-spacing: .01em;
 63 |   line-height: 1.6;
 64 | }
 65 | 
 66 | p > code {
 67 |   background: #f4f5f5;
 68 |   border-radius: .4rem;
 69 |   font-size: 86%;
 70 |   margin: 0 .2rem;
 71 |   padding: .2rem .5rem;
 72 |   white-space: nowrap;
 73 |   font-weight: bold;
 74 | }
 75 | 
 76 | .main {
 77 |   margin: 15vh auto 20px;
 78 |   -webkit-font-smoothing: antialiased;
 79 |   -moz-osx-font-smoothing: grayscale;
 80 |   max-width: 650px;
 81 |   padding-top: 40px;
 82 | }
 83 | 
 84 | .button {
 85 |   background: none;
 86 |   border: none;
 87 |   color: black;
 88 |   background-color: transparent;
 89 |   border: 1px solid black;
 90 |   border-radius: 2px;
 91 |   cursor: pointer;
 92 |   padding: 10px 20px;
 93 |   font-size: 18px;
 94 |   outline: none;
 95 |   margin-left: auto;
 96 |   margin-right: auto;
 97 |   margin-bottom: 60px;
 98 |   font-size: 0.8rem;
 99 |   text-transform: uppercase;
100 |   font-weight: bold;
101 | 
102 |   &:hover {
103 |     background-color: black;
104 |     color: #fff;
105 |   }
106 | }
107 | 
108 | .separator {
109 |   height: 1px;
110 |   background-color: rgba(0, 0, 0, 0.1);
111 |   width: 100%;
112 | }
113 | 
114 | footer {
115 |   margin-top: 60px;
116 |   margin-bottom: 20px;
117 |   line-height: 2;
118 | }
119 | 
120 | a {
121 |   color: $main-color;
122 |   text-decoration: none;
123 |   font-size: 1.1em;
124 |   font-weight: 300;
125 |   letter-spacing: .01em;
126 |   line-height: 1.6;
127 | 
128 |   &:hover {
129 |     text-decoration: underline;
130 |   }
131 | }
132 | 


--------------------------------------------------------------------------------
/docs/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin')
 4 | 
 5 | function resolve (dir) {
 6 |   return path.join(__dirname, dir)
 7 | }
 8 | 
 9 | module.exports = {
10 | 
11 |   mode: 'production',
12 | 
13 |   entry: './src/main.js',
14 | 
15 |   output: {
16 |     path: path.resolve(__dirname, './dist'),
17 |     publicPath: '/dist/',
18 |     filename: 'build.js'
19 |   },
20 | 
21 |   module: {
22 |     rules: [
23 |       {
24 |         test: /\.vue$/,
25 |         loader: 'vue-loader',
26 |         options: {
27 |           loaders: {
28 |             'css': 'vue-style-loader!css-loader',
29 |             'scss': 'vue-style-loader!css-loader!sass-loader',
30 |             'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
31 |           }
32 |         }
33 |       },
34 |       {
35 |         test: /\.scss$/,
36 |         use: [
37 |           {
38 |             loader: 'style-loader'
39 |           },
40 |           {
41 |             loader: 'css-loader'
42 |           },
43 |           {
44 |             loader: 'sass-loader'
45 |           }
46 |         ]
47 |       },
48 |       {
49 |         test: /\.js$/,
50 |         loader: 'babel-loader',
51 |         exclude: /node_modules/
52 |       }
53 |     ]
54 |   },
55 | 
56 |   resolve: {
57 |     modules: [
58 |       'node_modules'
59 |     ],
60 | 
61 |     alias: {
62 |       'vue$': 'vue/dist/vue.esm.js',
63 |       'plugin': path.resolve(__dirname, "../dist/vue-c3.min.js")
64 |     }
65 |   },
66 | 
67 |   devServer: {
68 |     historyApiFallback: true,
69 |     noInfo: true
70 |   },
71 | 
72 |   performance: {
73 |     hints: false
74 |   },
75 | 
76 |   devtool: '#eval-source-map',
77 | 
78 |   plugins: [
79 |     new webpack.DefinePlugin({
80 |       'process.env.NODE_ENV': '"production"'
81 |     }),
82 |     new VueLoaderPlugin()
83 |   ]
84 | }
85 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-c3",
 3 |   "version": "1.2.11",
 4 |   "description": "vue-c3 is a reusable vue component for c3 charts",
 5 |   "author": "“Christoph <chryb.q@gmail.com> (http://www.chryb.me)",
 6 |   "license": "MIT",
 7 |   "private": false,
 8 |   "main": "dist/vue-c3.cjs.js",
 9 |   "module": "dist/vue-c3.esm.js",
10 |   "browser": "dist/vue-c3.umd.js",
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "https://github.com/chryb/vue-c3.git"
14 |   },
15 |   "bugs": {
16 |     "url": "https://github.com/chryb/vue-c3/issues"
17 |   },
18 |   "scripts": {
19 |     "build": "rollup -c"
20 |   },
21 |   "keywords": [
22 |     "vue",
23 |     "c3",
24 |     "d3",
25 |     "component",
26 |     "graph"
27 |   ],
28 |   "peerDependencies": {
29 |     "vue": "^2.0.0",
30 |     "c3": "^0.5.4"
31 |   },
32 |   "devDependencies": {
33 |     "@babel/core": "^7.0.0-beta.46",
34 |     "@babel/preset-env": "^7.0.0-beta.46",
35 |     "rollup": "^0.60.7",
36 |     "rollup-plugin-commonjs": "^9.1.3",
37 |     "rollup-plugin-node-resolve": "^3.3.0",
38 |     "rollup-plugin-scss": "^0.4.0",
39 |     "rollup-plugin-uglify": "^4.0.0",
40 |     "rollup-plugin-vue2": "^0.8.0",
41 |     "vue-template-compiler": "^2.0.0"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import resolve from 'rollup-plugin-node-resolve'
 2 | import commonjs from 'rollup-plugin-commonjs'
 3 | import scss from 'rollup-plugin-scss'
 4 | import vue from 'rollup-plugin-vue2'
 5 | 
 6 | import pkg from './package.json'
 7 | 
 8 | export default [
 9 | 	// browser-friendly UMD build
10 | 	{
11 | 		input: 'src/index.js',
12 | 		output: {
13 | 			name: 'howLongUntilLunch',
14 | 			file: pkg.browser,
15 | 			format: 'umd'
16 | 		},
17 | 		plugins: [
18 | 			resolve(), // so Rollup can find `ms`
19 |       commonjs(), // so Rollup can convert `ms` to an ES module
20 |       scss(),
21 |       vue()
22 | 		],
23 |     external: [ 'c3', 'vue' ]
24 | 	},
25 | 
26 | 	// CommonJS (for Node) and ES module (for bundlers) build.
27 | 	// (We could have three entries in the configuration array
28 | 	// instead of two, but it's quicker to generate multiple
29 | 	// builds from a single configuration where possible, using
30 | 	// an array for the `output` option, where we can specify
31 | 	// `file` and `format` for each target)
32 | 	{
33 | 		input: 'src/index.js',
34 | 		external: ['ms'],
35 | 		output: [
36 | 			{ file: pkg.main, format: 'cjs' },
37 | 			{ file: pkg.module, format: 'es' }
38 |     ],
39 |     plugins: [
40 |       scss(),
41 |       vue()
42 |     ],
43 |     external: [ 'c3', 'vue' ]
44 | 	}
45 | ]
46 | 


--------------------------------------------------------------------------------
/src/VueC3.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="vuec3-chart"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 |   import c3 from 'c3'
 7 |   import * as events from './events'
 8 | 
 9 |   export default {
10 |     name: 'vuec3',
11 | 
12 |     // TODO: support for options prop
13 |     props: {
14 |       handler: {
15 |         required: true,
16 |         type: Object
17 |       }
18 |     },
19 | 
20 |     data: function () {
21 |       return {
22 |         $chart: null
23 |       }
24 |     },
25 | 
26 |     methods: {
27 |       destroyChart: function () {
28 |         if (this.$chart) {
29 |           this.$chart = this.$chart.destroy()
30 |         }
31 |       },
32 | 
33 |       initChart: function (options) {
34 |         if (this.$chart) {
35 |           this.destroyChart();
36 |         }
37 |         if (!options) {
38 |           options = {};
39 |         }
40 |         options.bindto = this.$el;
41 |         this.$chart = c3.generate(options);
42 |       },
43 | 
44 |       dispatchChart: function (cb) {
45 |         if (cb && this.$chart) {
46 |           cb.call(null, this.$chart);
47 |         }
48 |       }
49 |     },
50 | 
51 |     mounted: function () {
52 |       if (this.handler) {
53 |         this.handler.$on(events.INIT, this.initChart);
54 |         this.handler.$on(events.DESTROY, this.destroyChart);
55 |         this.handler.$on(events.DISPATCH, this.dispatchChart);
56 |       }
57 |     },
58 | 
59 |     beforeDestroy: function () {
60 |       this.destroyChart()
61 |     }
62 |   }
63 | </script>
64 | 


--------------------------------------------------------------------------------
/src/events.js:
--------------------------------------------------------------------------------
1 | export const INIT     = 'init'
2 | export const DESTROY  = 'destroy'
3 | export const DISPATCH = 'dispatch'
4 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import VueC3 from './VueC3.vue'
2 | export default VueC3
3 | 


--------------------------------------------------------------------------------