vue-speedometer

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

IMPORTANT v3.0 is released which is a complete rewrite with composition api/SFC (single file components). Minimum required vue version is v3.3. If you are using Vue 3 composition api, please upgrade to v3

Note: v2.x is still compatible with Vue 3. Please use latest v1.x (v1.8.0 at the time of writing) if you are using Vue 2.

Usage:

pnpm: pnpm add vue-speedometer

Yarn: yarn add vue-speedometer

NPM: npm install --save vue-speedometer

// import the component
<script setup>
import VueSpeedometer from "vue-speedometer"
</script>
// and use it in your component like
<template>
  <VueSpeedometer />
</template>

Slim Build (Experimental):

There is a Slim build available without bundling d3. This project uses d3 micro bundles. If your project also uses d3 microbundles, you can opt for slim build. Necessary d3 dependencies required for slim build to work are - d3-array, d3-color, d3-ease, d3-format, d3-interpolate, d3-scale, d3-selection, d3-shape, d3-transition.

// sample slim build usage
import VueSpeedometer from "vue-speedometer/slim"
// and use it
<VueSpeedometer />

Examples:

You can view Live Examples here

Configuration Options:

Examples

You can view Live Examples here

Default with no config - Live Example

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

With configurations - Live Example

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

Custom Segment Labels - Live Example

// 'customSegmentLabels' prop takes an array of 'CustomSegmentLabel' Object
/*
type CustomSegmentLabel = {
  text?: string
  position?: OUTSIDE/INSIDE
  fontSize?: string
  color?: string
}
*/

export default {
  components: { VueSpeedometer },
  template: `
    <div>
      <vue-speedometer 
      :width="500"
      :needleHeightRatio="0.7"
      :value="777"
      currentValueText="Happiness Level"
      :customSegmentLabels='[
        {
          text: "Very Bad",
          position: "INSIDE",
          color: "#555",
        },
        {
          text: "Bad",
          position: "INSIDE",
          color: "#555",
        },
        {
          text: "Ok",
          position: "INSIDE",
          color: "#555",
          fontSize: "19px",
        },
        {
          text: "Good",
          position: "INSIDE",
          color: "#555",
        },
        {
          text: "Very Good",
          position: "INSIDE",
          color: "#555",
        },
      ]'
      :ringWidth="47"
      :needleTransitionDuration="3333"
      needleTransition="easeElastic"
      needleColor="#a7ff83"
      textColor="#d8dee9"
    />
    </div>
  `,
}

/>

Custom Segment Colors - Live Example

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

  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

// 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

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

// 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

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

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
• [x] Typescript support

Tests:

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

// 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

  // vue.config.js
  module.exports = {
  runtimeCompiler: true
  }

Changelog:

View Changelog

Ports:

• React: react-d3-speedometer
• Svelte: svelte-speedometer

About

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

License:

MIT