KGague - A Gauge Library for Vue

KGague is the JustGage JavaScript library remade for Vue.js. It does not use any dependencies including JustGage or Raphael. All rendering is done with the Vue rendering engine using SVGs. The gagues it produces are arc or circle shapes. The gagues animate by default with the ability to customise easing functions. As the gauges moves through different ranges you can have the color fade. e.g (Green when low, red when high) These color steps can be customised. Many other features of the Gauge can be customized as well.

KGauge is 7% of the size of Just Gage with Raphael and covers most of the features. The whole library is only 8kb minified. Compare that to JustGage which is 20kb for JustGage minified and 90kb for Raphael minified. Even if you only use Vue for KGauge your page will still be smaller.

Demo

View an interactive demo

How to use

npm i @kagronick/kgauge-vue

import KGauge from "@kagronick/kgauge-vue";
export default {
  components: {
    KGauge
  },
}

<k-gauge 
  :value="30"
  :width="500"
  :height="300"
  :max="300"
  label-text="GB" />

Or just download and add

<script src="dist/kgauge-vue.min.js"></script>

API

No properties are required but you'll probably want to set value, min, and max to get started.

| Attr. Name | Description | Default Value | |-------------------|-----------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------| | width | Width of component | 200 | | height | Height of component | 150 | | value | The value to display | 10 | | min | The minimum value | 0 | | max | The maximum value | 100 | | animationDuration | How long to animate in miliseconds. Set to 0 to disable animation. | 1000 | | doughnut | Enable doughnut mode | false | | formatFunction | A function to format the value for display. Use to add dollar signs, percent, or display values that are not whole numbers. | Math.round | | colorSteps | An array of colors to fade between | ["#a9d70b", "#f9c802", "#ff0000"] | | valueFontStyle | Font style for the value text | font-size: 35px; fill: #010101; font-weight: bold; font-family: "Arial" | | labelFontStyle | The font style for the label under the value | font: 10px Arial; fill: #b3b3b3 | | minMaxFontStyle | The font style for the min and max labels | font: 11px Arial; fill: #b4b4b4 | | animateOnLoad | Animate to initial value | true | | labelText | Text to show under value | '' | | showMinMax | Show the min and max labels | true | | minTextFormatFn | Format the min text value | (v) => v | | maxTextFormatFn | Format the max text value | (v) => v | | gaugeSize | Scaling of the gauge. Can be made negative to draw the gauge outwards from the center. | 1 | | shadowOpacity | Amount of shadow. Set to 0 to disable. | .2 | | backgroundColor | Color of background | #edebeb | | easingFunction | Easing function for animations. Can be used to bounce the gauge into position. | (t)=> t*(2-t) /* Ease out quad */ | | title | Title string | | | titleStyle | Style for the title | fill: #999999; font-size: 24px; font-weight: bold |

Changelog

06-07-2019 (1.0.7) Fixed title cut off on doughnut on small sizes

06-02-2019 (1.0.6) Fixed bug with single color step. Fixed bug with shadows disabled.

06-02-2019 (1.0.5) Allows min value to be larger than max value. Fixed issue with non-zero min value in doughnut gauges. Added min and max text format functions.

05-18-2019 (1.0.4) Fixed issue with rounding color values to show up correctly on IE.

04-15-2019 (1.0.3) Fixed spelling, allow strings for width and height, added title style, changed default sizing and positioning.

Made by Kyle Agronick with code from the original JustGage project. http://justgage.com/