naikus/svg-gauge

Minimalistic, animated SVG gauge. Zero dependencies

svg-gauge's Issues

Add min/max value labels and maybe threshold value labels

I'll provide some pictures about my idea. I would like an option to add these value labels.

right now

with value labels

is it already possible perhaps? please explain if it is
Thanks
Emir

Allow label function to return svg elements to be rendered as labels e.g. svg:text

I would like to create a gauge with an icon in the middle and the value below it. For the icon i have created a webfont and it does seem to render. However my tspans that i would like to use to have 2 lines are not rendered. I can actually see the full string (<tspan....)

testIcon(value: string): string {
     return '<tspan x="0" dy="1.2em"></tspan><tspan x="0" dy="1.2em">' + value + '</tspan>';
}

Is there any other way to have 2 lines in the middle of the gauge? Or am i missing something else?

CSS for value-text not working

Hi

Changing the value of font-size for .value-text doesn't seem to have any effect on the font size when the label is displayed:

.gauge-container > .gauge > .value-text {
fill: rgb(47, 227, 255);
font-family: sans-serif;
font-weight: bold;
font-size: 0.8em;
}

I've tried using your fiddle demo to and it doesn't have any effect - am I looking at the wrong class?

M.

Changing color while value increase

Hello,

Is it possible to implement changing color when value displayed on the gauge gradually increase ? For example, begin from green and finish to red.

Thank you a lot for your consideration.

Is there a color option for setting the value of the dial (bkg color)?

The option color works great for setting the color of the value. Is there a option to dynamically set the color for the bkg dial?

It would be great if given an existing gauge you could perform:

setGaugeValueColor
setGaugeDialColor

just like you can currently perform setValueAnimated

Animations not working in React

Hi and thanks so much for making this!!

I was having issues getting my gauges to animate in a react project and thought maybe it was my setup. I created a codesandbox and just pasted the exact react example from the readme and the animations still do not fire.

Animations seem to work fine in a pure JS project.

You can check out the code sandbox here.

Let me know if I'm doing anything wrong.

Experiencing a ReferenceError: k is not defined (gauge.js)

I am implementing this neat svg-gauge via the wrapper that @mattlewis92 made here

I am experiencing a ReferenceError, k is not defined when I try to run my Angular 8 app with an svg-gauge in it.

Per the console error, it seems that this is the line of code that I am battling:
https://github.com/naikus/svg-gauge/blob/master/src/gauge.js#L96

Would you be able to modify this line (or I could create a PR..?),

FROM

for(k in s) {

TO

for(let k in s) {

I am hoping that this will solve my problems.
If you have any other advice, it will be much appreciated.

Screenshot:

https://angular-ssr-example.coltenkrauter.com
https://github.com/coltenkrauter/angular-ssr-example

Dynamic setMaxValue

Can be setMaxValue dynamic like setValueAnimated or setValue ?

Error in docs: options for valueTextClass

In the docs, it specifies valueTextClass to set the class for the value-text element.

Looking in the code at line 85, valueTextClass is in fact valueClass:

valueClass: "value-text"

Feature: Add destroy manage to work with lifecycle hooks

Hello! In my app, I'm using svg-gauge and it looks wonderful!.
I would like to have a destroy function on the gauge object, to remove the gauge again. This helps to mount/unmount new templates..
Right now I have to remove the gauge container child elements on my own. Maybe there are also some eventlisteners that need to be removed

SetMaxValue does not update the label if "this.max" is used in the label

Title says it all. Basically, I have using the configuration below for labels

label: function(value) {
    return Math.round(value) + "/" + this.max;
}

But, when I use the setMaxValue() function there, it will not update the this.max in the label.

svg-gauge/src/gauge.js

Lines 303 to 305 in 5fd44a3

	setMaxValue: function(max) {
	limit = max;
	},

I tried to replace this.max by this.limit, as it is the internal variable, but the label shows as NaN instead.

svg-gauge/src/gauge.js

Lines 303 to 305 in 5fd44a3

	setMaxValue: function(max) {
	limit = max;
	},

ViewBox

Hey. Are u planning add viewBox feature in the nearest future?

Use in a vue component?

Hi,

Is it possible to use this in a vue component (vue-svg-gauge has some bugs that make it unusable for me)?

Thanks
MArtyn

Gradient Stroke

Is there any option to add gradient stroke?

Some nice improvements that could be useful

Hello, nice component. It would be great to have this kind of features added:

1. Usage in non square container
   If you set dialStartAngle to180 and dialEndAngle to 0, gauge will stay on the top half of its container. If you downsize container's height, gauge will resize. Is there any way to make it not resizable?

2. Floating point support
   Is there any way to set a gauge value to a floating point number (i.e. 10.5) and have it shown?

3. Min/Max values on dial and name/unit
   It would be a nice improvement to add the min/max values on dial (with option to enable/disable them and customize font/size, ...) and optionally a measurement unit near gauge value

Thanks,
Stefano

In the old webview, the number display position is wrong

for example，android 8.0

-

Allow arbitrary values

Current implementation uses normalized values (constrained inside min/max), but this is not always desired. Eg. i use it for displaying sensor values, the gauges are constrained to display interested range, but values sometime goes out of these boundaries. All works OK, but the gauge stays to display normalized (min or max) value in label, which is false value of course.

Please, use normalized values only for internal calculations (drawing) and allow to show real values for label.

Release as a module

Hello,

Would it be possible to release this as a npm module on https://www.npmjs.com/ ?

Show meter handle

[Feature request] Setters for reactives options

Hi i would like to request this feature.

I'm using your project with vueJs and I am perfonrming an ajax call to retrieve my data, so I would like to instanciate as soon as I create my component the gauge (maybe with min and max to some default values) and, when the ajax returns me the data use them to populate the gauge.

So it would be nice to have this feature.

Thanks!

PS.

right now i use a "workaround" setting the max value to 100 and calculating all in percentages.

Bug for animate zero value

Maybe this is a bug or I'm not doing it correct.

If I set the setValueAnimated to 0 it animates to 100.

http://codepen.io/HejdesGit/pen/YGbAyX

Br,
Johan

Side note, nice work on the gauge :)

Floating Point Number

Is There Any option to set and view floating point number in value parameter. I want to see sensor data in floating point number.

Ticks support

Would love to see the ticks support in the gauges.

For my user case I would love to see a possibility to define OK, WARN, CRITICAL levels of a gauge value which would be visible by defining the ticks (or thresholds) in the gauge. Currently we use colors to do this, however colors are sometimes difficult to interpret by our users especially when they are not used to gauge to move too much and don't see the change in color in typical operation.

This might also improve accessibility of using the plugin in atypical operations.

Gauge is not defined

i am getting error while working with electron js..

index.js:224 Uncaught ReferenceError: Gauge is not defined

Add TypeScript types

This library is great, but it was a struggle to get going with TS. Here is what I have so far:

declare module 'svg-gauge' {
  export interface Instance {
    setMaxValue: (max: number) => void
    setValue: (val: number) => void
    setValueAnimated: (val: number, duration: number) => void
    getValue: () => number
  }

  export interface Opts {
    viewBox: string
    /**
     * The angle in degrees to start the dial
     * @default 135
     */
    dialStartAngle?: number
    /** The angle in degrees to end the dial. This MUST be less than dialStartAngle
     * @default 45
     */
    dialEndAngle?: number
    /** The radius of the gauge
     * @default 40
     */
    radius?: number
    /** The minimum value for the gauge. This can be a negative value
     * @default 0
     */
    min?: number
    /** The maximum value for the gauge
     * @default 100
     */
    max?: number
    /** Getter for the label that will be rendered in the center. */
    label?: (currentValue: number) => string
    /** Whether to show the value at the center of the gauge
     * @default true
     */
    showValue?: boolean
    /** 	The CSS class of the gauge
     * @default 'gauge'
     */
    gaugeClass?: string
    /** The CSS class of the gauge's dial
     * @default 'dial'
     */
    dialClass?: string
    /** The CSS class of the gauge's fill
     * @default 'value'
     */
    valueDialClass?: string
    /** The CSS class of the gauge's text
     * @default '(value-text)'
     */
    valueClass?: string
    /**
     * An optional function that can return a color for current value
     */
    color?: (currentValue: number) => string
    /** An optional string that specifies the crop region
     * @default '(0 0 100 100)'
     */
    viewBox?: string
  }

  export = (element: HTMLDivElement, props: Partial<Opts>) => Instance
}

Then for usage, the provided React example converted to use these types

import React, { FC, useEffect, useRef } from 'react'
import SvgGauge, { Opts, Instance } from 'svg-gauge'

const defaultOptions: Partial<Opts> = {
  max: 100
}

const Gauge: FC<{ value: number }> = ({ value }) => {
  const gaugeEl = useRef<HTMLDivElement>(null)
  const gaugeRef = useRef<Instance | null>(null)
  useEffect(() => {
    if (!gaugeRef.current) {
      if (!gaugeEl.current) return
      const options = { ...defaultOptions, color: (value) => value < 70 ? 'green' : 'yellow' }
      gaugeRef.current = SvgGauge(gaugeEl.current, options)
      gaugeRef.current?.setValue(1)
    }
    gaugeRef.current?.setValueAnimated(value, 1)
  }, [value])

  return (
    <div style={{ height: '500px', width: '500px' }}>
      <div ref={gaugeEl} className='gauge-container' style={{ position: 'relative' }}>
        <span style={{ position: 'absolute', left: '45%', bottom: '70%' }}>km/hr</span>
      </div>
    </div>
  )
}

I'm rather unfamiliar with the library, so i could be way off. This is just what I have so far and is working for my simplistic use case.

Is it possible to remove the padding from within the SVG?

Amazing work... I'm noticing that all the SVGs generated with gauges have padding within the SVG, is it possible to have the gauge use the all the space in the SVG?

Given that the gauge currently has some random padding within the SVG it makes it near impossible to create an SVG that matches a design.

Thanks again for this, appreciate any tips. Thanks

Changing the direction of animation

Hiya!

Just wanted to ask if there is, or will be, an option to change the direction of the gauge animating from anti-clockwise to clockwise.

Thanks.

Gauge color not changing in IE11

In your CodePen demo, the color of gauge .two never changes as the value changes. Instead, the color remains the value it was set in your CSS ("orange").

I believe this is an issue where the style attribute of an SVG element, such as a <path />, cannot be set using JavaScript.

Color Text Value

Hi!

.gauge-container.one > .gauge > .value-text {
fill: rgb(47, 227, 255);
}

.gauge-container.three > .gauge > .value-text {
fill: #C9DE3C;
}

Not working?

SpaceX Gauge customization

Hi @naikus, great job!
This is not properly an issue, but how can I have the famous SpaceX gauge?

I can adjust the angles like below, but I don't see how to configure the unit for example
dialStartAngle: 90,
dialEndAngle: 0,

Thank you

Multiple values

Hey there.

I realize that there are no needles to display multiple values, but what would be the best way to indicate something like an average value as an indicator?

Thanks in advance!

Decimal places and ºC symbol

I'm trying to configure gauge 3 to display temperature in °C. How do I display the temperature with two decimal places and the °C symbol?

Gauge label transform not working on Safari

The gauge label, which is svg , doesn't work (gets ignored) when we try to apply a class with a transform inside.
The solution is to add the inside a group: and apply to the class the group.

Editing and positioning svg

I Have been trying to position that number right in the middle of the circle but it seems impossible without being able to amend the SVG itself. It would be nice if that was somehow possible.

Round corner stroke in path

Is there any way to make the round corner. example given below

Is it possible to display decimals in labels

Hi,

This is more a question than an issue.
Is it possible to display decimals in gauge label?

Thanks for the work!

Add Min/Max labels?

I'd love to see the ability to show labels at the min/max values of the gauge (like near the bottom next to the ends of a .three gauge)

-

Error: <path> attribute d: Expected number, "…0 A 40 40 0 1 1 NaN NaN".

Facing this error on instantiating svg-gauge.
"Error: attribute d: Expected number, "…0 A 40 40 0 1 1 NaN NaN". "
this setAttribute call is causing the error

svg-gauge/src/gauge.js

Line 279 in ab68cda

gaugeValuePath.setAttribute("d", pathString(radius, startAngle, angle + startAngle, flag));

function getGauge(myHtmlElement) like.

Hello,

Is there a way to do something like this :
myGauge = getGauge(document.getElementById("gauge0")).
or myGauge = getGauge(myHtmlElement).

Thank you,

Guillaume.