vue-bulma / peity

A Vue version of an excellent peity library for beautiful mini <svg> graphs.

vue-bulma

A modern UI framework based on Vue and Bulma.

Install

Install with npm:

$ npm i vue-bulma --save

Install with yarn:

$ yarn add vue-bulma

Example

import Vue from 'vue'
import * as components from 'vue-bulma'

// In the global registration
for (const [key, value] of Object.entries(components)) {
  const name = value.name || `vb-${key.toLowerCase()}`
  Vue.component(name, value)
}

Development

We use Lerna to manage multiple packages.

$ npm i lerna --global 

$ yarn bootstrap

Open Examples

$ yarn dev

Format packages

$ yarn run format

Create a package

# vue-bulma-container
$ lerna create vue-bulma-container
$ lerna add vue packages/vue-bulma-container/
$ lerna add bulma packages/vue-bulma-container/
$ cd packages/vue-bulma-container/
$ mkdir src
$ touch src/main.js
$ touch src/style.scss

Add to vue-bulma

$ lerna add vue-bulma-container packages/vue-bulma/

Team

Lead Maintainers

• fundon, https://twitter.com/_fundon, https://www.npmjs.com/~fundon

Collaborators

• fundon, https://twitter.com/_fundon, https://www.npmjs.com/~fundon

License

Licensed under MIT.

peity's Issues

When hiding and re-displaying, Peity is recreated and adds an additional chart.

I have Peity hosted inside another component that gets filtered based on data. if it is filtered and then unhidden, the chart will be duplicated since the dom is recreated.

Current fix is to empty the innerHtml of the container:

mounted() {
      
      this.$el.parentNode.innerHtml = "";
      
      this.chart = new Peity(this.$el, this.type, this.data, this.options)
      this.chart.draw()
},

Update colors

The value of the pie chart updates properly but the color does not. Any way to force a redraw?

  data () {
    return {
      data: '100/100',
      fillColor: 'green'
    }
  },

  mounted() {
    setTimeout(() => {
      this.data = '50/100'
      this.fillColor = 'red'
    }, 1000);
  },

Error when try to build

Hi, I'm trying to build the lib but I'm getting this error:

> yarn build
yarn build v0.16.1
$ webpack -p --config build/webpack.min.conf.js
Hash: e2415a0aae97a1e511bb
Version: webpack 1.14.0
Time: 1823ms
           Asset     Size  Chunks             Chunk Names
vue-peity.min.js  12.3 kB       0  [emitted]  main
    + 7 hidden modules

ERROR in vue-peity.min.js from UglifyJs
SyntaxError: Unexpected token punc «(», expected punc «:» [./src/lib/bar.js:14,0]

ERROR in vue-peity.min.js from UglifyJs
SyntaxError: Unexpected token punc «(», expected punc «:» [./src/lib/bar.js:14,0]

The same occurs running the build with -> npm run-script build