Morioh
Login
Vuejs Components

Vuejs Components

4 years ago

Speedometer Gauge With Vue.js And D3.js

vue-speedometer

vue-speedometer is a Vue component library for showing speedometer like gauge using d3.

vue-speedometer

Usage:

NPM: npm install --save vue-speedometer

Yarn: yarn add vue-speedometer

source-js
// import the component
import VueSpeedometer from "vue-speedometer"
// and use it in your component like
export default {
  components: { VueSpeedometer }, 
  template: `<vue-speedometer />`,
}

vue-speedometer is the name of the component to be used inside Vue templates

About

vue-speedometer shares its core with react-d3-speedometer. For more info and context, please visit react-d3-speedometer

Examples

You can view Live Examples here

Default with no config - Live Example

source-js
export default {
  components: { VueSpeedometer },
  template: `<vue-speedometer />`,
}

With configurations - Live Example

source-js
export default {
  components: { VueSpeedometer },
  template: `<vue-speedometer value="333" />`,
}

Custom Segment Colors - Live Example

source-js
export default {
  components: { VueSpeedometer },
  template: `
    <div>
      <vue-speedometer
        :maxSegmentLabels="12"
        :segments="3"
        :value="470"
        :segmentColors='["tomato", "gold", "limegreen"]'
        needleColor="lightgreen"
      />
    </div>
    `,
}
  // startColor will be ignored
  // endColor will be ignored
/>

Custom Segment Stops - Live Example

source-js
  export default {
    components: { VueSpeedometer },
    template: `
      <div>
        <vue-speedometer 
          :needleHeightRatio="0.7"
          :maxSegmentLabels="5"
          :segments="3"
          :customSegmentStops="[0, 500, 750, 900, 1000]"
          :segmentColors='["firebrick", "tomato", "gold", "limegreen"]'
          :value="333"
        />
      </div>
    `,
  }
  // `segments` prop will be ignored since it will be calculated from `customSegmentStops`
  // In this case there will be `4` segments (0-500, 500-750, 750-900, 900-1000)
/>

Fluid Width Example - Live Example

source-js
// Speedometer will take the width of the parent div (500)
// any width passed will be ignored
export default {
  components: { VueSpeedometer },
  data() {
    return {
      styles: {
        width: "500px",
        height: "300px",
        background: "#EFEFEF",
      },
    }
  },
  template: `
    <div :style="styles">
      <vue-speedometer 
        :fluidWidth="true"
        :minValue="100"
        :maxValue="500"
        :value="473"
        needleColor="steelblue"
      />
      <div>
      Fluid width takes the width of the parent div (<strong>500px</strong> in this case)
      </div>
    </div>
  `,
}

Needle Transition Example - Live Example

source-js
export default {
  components: { VueSpeedometer },
  template: `
  <div>
    <vue-speedometer 
      :value="333"
      needleColor="steelblue"
      :needleTransitionDuration="4000"
      needleTransition="easeElastic"
    />
  </div>
  `,
}

Force Render component on props change - Live Example

source-js
// By default, when props change, only the value prop is updated and animated. 
// This is to maintain smooth visualization and to ignore breaking appearance changes like segments, colors etc. 
// You can override this behaviour by giving forceRender: true

export default {
  components: { VueSpeedometer },
  template: `
  <div>
    <vue-speedometer 
      :value="333"
      :forceRender="true"
      needleColor="steelblue"
      :needleTransitionDuration="4000"
      needleTransition="easeElastic"
    />
  </div>
  `,
}

Needle Height Configuration Example - Live Example

source-js
export default {
  components: { VueSpeedometer },
  template: `
    <div>
      <vue-speedometer
        :value="333"
        :needleHeightRatio="0.5"
      />
    </div>
`,
}

You can give a value between 0 and 1 to control the needle height.

Gradient Like Effect - Live Example

source-js
export default {
  components: { VueSpeedometer },
  template: `
    <div>
      <vue-speedometer
        :needleHeightRatio="0.7"
        :maxSegmentLabels="5"
        :segments="1000"
        :value="333"
      />
    </div>
  `,
}

Todos:

  • [x] Test coverage (with vue-test-utils)
  • [x] Convert entire code base to ES6
  • [x] Split core from lifecycles
  • [ ] Typescript support?

Tests:

vue-speedometer comes with a test suite using vue-test-utils.

ource-js
// navigate to root folder and run
npm test
// or 'yarn test' if you are using yarn

FAQ

  • Please refer this comment if you run into vue cli you are using the runtime only build of vue where the template compiler is not available message when running from your local setup bootstrapped with vue-cli. Basically create a vue.config.js
ource-js
// vue.config.js
module.exports = {
  runtimeCompiler: true
}

Feature Updates:

Contributing:

PRs are welcome. Please create a issue/bugfix/feature branch and create an issue with your branch details. Probably I will create a similar branch in the upstream repo so that PRs can be raised against that branch instead of master.

Notes

  • 1.0 versions are compatible with Vue Version 2.x For every subsequent major vue upgrade, vue-speedometer will be bumped to next major versions. For example 1.x will be compatible with Vue 2.0, 2.x will be compatible with Vue 3.0 so on and so forth …

Download Details:

Live Demo: https://palerdot.in/vue-speedometer/?path=/story/vue-speedometer--configuring-values

Download Link: https://github.com/palerdot/vue-speedometer/archive/master.zip

Official Website: https://github.com/palerdot/vue-speedometer

Install & Download:

# Yarn
$ yarn add vue-speedometer

# NPM
$ npm install vue-speedometer --save

#vuejs #javascript #vue-js

Speedometer Gauge With Vue.js And D3.js
60.70 GEEK