Vue Radial Chart

Vue Radial Chart WIP

Abstract

The component aims to integrate a dynamic radial chart

The component allow to :

• display an array of object
• animate change of the array
• export the chart as base64 image

Table of contents

1. Software dependencies

2. Use

   1. Install component
   2. Import component in your vue file
   3. Props
      1. options
      2. data

3. Dev Setup

Software dependencies

Vue Radial Chart

• d3 (https://github.com/d3/d3)
• gsap (https://github.com/greensock/GreenSock-JS)
• vue (https://github.com/vuejs/vuejs.org)

Use

Install component

npm i vue-chart-radial --save

Import component in your vue file

please refer to data and option property after this section

<template>
    <div>
        <vue-radial-chart :options="options" :data="data"></vue-radial-chart>
    </div>
</template>

<script>
import VueRadialChart from 'vue-radial-chart'

export default {
    name: 'dummy',
    components: {
        VueRadialChart
    },
    data () {
        return {
            options : `...`,
            data: `...`
        }
    }
}
</script>

Props

1. data format

   data: {
       "todo"
   }

2. options for customization not mandatory

   options: {
       "todo"
   }

Dev Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm start

# build package component for production
npm run build

# publish npm package
npm version patch
npm publish --access public

For a detailed explanation on how things work, check out the d3 and gsap documentation.