Noncommital Premarital Mischief

    @kagronick/kgauge-vue

    1.0.7 • Public • Published

    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

    Examples

    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/

    Install

    npm i @kagronick/kgauge-vue

    DownloadsWeekly Downloads

    135

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    145 kB

    Total Files

    17

    Last publish

    Collaborators

    • kagronick