hellocomet / vue-svg-gauge Goto Github PK

View Code? Open in Web Editor NEW

79.0 5.0 22.0 1.39 MB

Customizable gauge component with gradients and animations for VueJs

Home Page: https://hellocomet.github.io/vue-svg-gauge/

License: MIT License

Vue 80.90% JavaScript 14.36% HTML 4.74%

vue-svg-gauge's Introduction

vue-svg-gauge

An easily customizable gauge for VueJS with gradients and animations

Demo

You can find a demo here

Installation

npm i vue-svg-gauge --save

yarn add -D vue-svg-gauge

Import

ES6

The following examples can also be used with CommonJS by replacing ES6-specific syntax with CommonJS equivalents.

import Vue from 'vue'
import { VueSvgGauge } from 'vue-svg-gauge'

new Vue({
  components: {
    VueSvgGauge,
  }
})

Globals as a pluggin

import Vue from 'vue'
import App from './App.vue'
import VueSvgGauge from 'vue-svg-gauge'

Vue.use(VueSvgGauge)

new Vue({
  render: h => h(App),
}).$mount('#app')

Globals (via the script tag)

Add a script tag pointing to dist/vue-svg-gauge.min.js after adding Vue.

<html>
  <head>
    ...
  </head>
  <body>
    <div id="app">
      <vue-svg-gauge></vue-svg-gauge>
    </div>

    <script src="path/to/vue.js"></script>
    <script src="path/to/dist/vue-svg-gauge.min.js"></script>
    <script>
      new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>

Usage

Once installed, it can be user in any template as

<VueSvgGauge
  :start-angle="-110"
  :end-angle="110"
  :value="3"
  :separator-step="1"
  :min="0"
  :max="4"
  :gauge-color="[{ offset: 0, color: '#347AB0'}, { offset: 100, color: '#8CDFAD'}]"
  :scale-interval="0.1"
/>
<!--  or  -->
<vue-svg-gauge
  :start-angle="-110"
  :end-angle="110"
  :value="3"
  :separator-step="0"
  :min="0"
  :max="10"
  gauge-color="#8CDFAD"
  :scale-interval="0.1"
/>

Props

Props	Type	Value	Default
value	Number	Value of the gauge, must be contained between min and max. If not, it will be set to min if inferior, or max if superior	70
min	Number	Minimum value reachable	0
max	Number	Maximum value reachable	100
startAngle	Number	Start angle of the gauge. Can go from -360° to 360° but must be smaller than endAngle	-90
endAngle	Number	End angle of the gauge. Can go from -360° to 360° but must be greater than startAngle	90
innerRadius	Number	inner radius that will determine the thickness of the gauge	60
separatorStep	Number	Number of steps between each separator (will display a separator each min + (n * separatorStep)). Won't display any if 0 or null	10
separatorThickness	Number	Thickness of the separators, unit is in degree	4
gaugeColor	String,Array	Color of the gauge, can either be a simple color or a gradient	[{ offset: 0, color: '#347AB0' }, { offset: 100, color: '#8CDFAD' }]
baseColor	String	Color of the empty gauge	#DDDDDD
scaleInterval	Number	Interval between the scale line, based on min and max. Won't display any if 0 or null	5
transitionDuration	Number	Transition duration time in ms. If set to `0`, there will be no transition	1500
easing	String	Animation easing option	Circular.Out

Notes :

the reference angle is 0 on top of the gauge.
you can find the documentation about the different animation functions here

Slot

There is a main slot allowing you to display any kind of html you want in your gauge.

Example

<VueSvgGauge
  :start-angle="-110"
  :end-angle="110"
  :value="random"
  :separator-step="20"
  :scale-interval="10"
  :inner-radius="80"
>
  <div class="inner-text">
    <span>Let's make this <b>fun</b> !</span>
  </div>
</VueSvgGauge>

.inner-text {
  // allow the text to take all the available space in the svg on top of the gauge
  height: 100%;
  width: 100%;

  span {
    max-width: 100px;
    color: red;
    // ...
  }
}

Dependencies

You will need to install vue ~2.5.22 to use this package properly

Also vue-svg-gauge relies on the tweenJs library for animations.

Made with ❤️ at comet

vue-svg-gauge's People

Contributors

Stargazers

Watchers

vue-svg-gauge's Issues

resize vue-svg-gauge

Hello,
I'm new user of vue.
I was able to add vue-svg-gauge to my project.

I do not know how to position and resize the gauge. Finally I would like to have 2 gauges Left/Right.

Thank you very much for your help
Thierry

Request to remove inner-shadow filter

Is your feature request related to a problem? Please describe.
There is a hard definition of an inner shadow which cannot be removed or configured. I would argue that it shouldn't be present if the component is supposed to be somewhat unopinionated. The developer should however have some means of styling the masked sections (?)

Describe the solution you'd like
My suggestion would be to remove the inner shadow filter or make it configurable.

Additional context
Add any other context or screenshots about the feature request here.

Resulting in:

<text> fallback for IE11

I am using this in a project that requires IE11 support. I am using <text> like:

  <text :x="RADIUS" :y="RADIUS" text-anchor="middle" :font-size="RADIUS / 1.7">
    {{ value }}
  </text>

Transition duration

Would be nice to have.

0 to turn it off or a number in seconds / milliseconds.

Add max and min values on the scale

Is your feature request related to a problem? Please describe.
Would it be possible to add a maximum and minimum value onto the scale like in the picture below

Additional context

Trying to wrap vue-svg-gauge with my own .vue component - not compiling

This may just be my inexperience with compiling Vue components.

I am trying to create a library of components that are simpler to use for non-web-developers. This is using Node-RED and uibuilder for the framework and comms. The idea being that a user can write a flow in Node-RED that sends data and configuration to a selection of VueJS components to easily create UI's.

I can get vue-svg-gauge to load just fine if I use either web components style loading or when dynamically loading with http-vue-loader but I cannot, so far, get my component to compile if it wraps yours.

I've tried with both Parcel and

Here is my .vue file:

<template>
    <figure :title="config.toolTip" @click="clickOuter">
        <figcaption v-if="config.header" class="uibg-t">
            <span v-html="config.header" />
        </figcaption>
        <vue-svg-gauge
            :style="config.style"
            :start-angle="config.startAngle"
            :end-angle="config.endAngle"
            :value="value || config.value || 0"
            :separator-step="config.separatorStep"
            :min="config.min"
            :max="config.max"
            :gauge-color="config.gaugeColor"
            :scale-interval="config.scaleInterval"
        >
            <slot />
        </vue-svg-gauge>
        <figcaption v-if="config.caption" class="uibg-b">
            <span v-html="config.caption" />
        </figcaption>
    </figure>
</template>

<style scoped>
    figcaption {
        text-align: center;
    }
    .uibg-t {
        margin-bottom: 1rem;
    }
    .uibg-b {
        margin-top: 1rem;
    }
</style>

<script>

import VueSvgGauge from 'vue-svg-gauge'

export default {
    name: 'gauge',

    components: {
        VueSvgGauge
    }, // --- End of components --- //

    /** Note that props with dashes in name have to be referenced as camel case in JS */
    props: {
        'value': Number,
        'config': {
            type: Object,
            default: function() { return {
                'header': undefined,
                'toolTip': undefined,
                'caption': undefined,
                'clickEvents': false,
                'style': 'height:15rem;', // fix the default height to something reasonable
                'value': 0,
            } },
        },
    }, // -- End of props -- //

    methods: {
        /** Handle click events
         * @param {Object} e DOM/Vue event data
         */
        clickOuter: function(e){
            // Only respond to clicks if needed
            if ( this.config.clickEvents !== true ) return
            
            /** If this component is being used with Node-RED/uibuilder, Send a msg back to Node-RED. */
            if ( window.uibuilder ) uibuilder.send({
                'topic': 'gauge clicked',
                // For some reason, just passing e only gives e.isTrusted and nothing else
                'payload': {
                    componentRef: this.$vnode.data.ref,
                    componentTag: this.$vnode.componentOptions.tag,
                    eventType: e.type,

                    x: e.x, y: e.y,
                    clientX: e.clientX, clientY: e.clientY, pageX: e.pageX, pageY: e.pageY,  offsetX: e.offsetX, offsetY: e.offsetY,  layerX: e.layerX, layerY: e.layerY,  screenX: e.screenX, screenY: e.screenY, 

                    altKey: e.altKey, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey,
                },
            })
        },
    }, // -- End of methods -- //
}
</script>

Any hints as to what is going wrong would be most welcome.

inner-text placement in Safari

Describe the bug
The inner text placement in Safari on macOs and iOs looks off.

To Reproduce
Steps to reproduce the behavior:

Go to demo
See how the gauge text is displayed.

Screenshots
Chrome on macOs:

Safari on macOs:

Safari on iOs:

Desktop (please complete the following information):

OS: macOs 12.0.1 (M1)
Browser: Chrome 96.0.4664.55, Safari 15.1

Smartphone (please complete the following information):

Device: iOs simulator (iPhone 13)
Browser: Safari

Solid color in gauge for each step

I want to use solid colors instead of gradient when adding multiple objects to gauge-color array.

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
Possibility to define colors like in prop 'gauge-color' but in solid not gradient.

Describe alternatives you've considered

Additional context

Grafana is doing this by calling it "thresholds". https://play.grafana.org/d/_gFwRQuZks/google-sheets-average-temperature?editPanel=4&orgId=1

I could submit a pull-request if this is an accepted feature.

v1.2.0 available from the npm registry appears to have been deployed incorrectly.

Describe the bug
v1.2.0 available from the npm registry appears to have been deployed incorrectly.

I added vue-svg-gauge@^1.2.0 as a dependency in my project, but it seems to be missing the changes that 1.2.0 should contain. Namely, the transitionDuration prop is missing from the component and README.md.