Zones not showing in React

[w00dStok]

Hello, I am having an issue. I have a react component that utilizes a gauge. When I put the code in JSFiddle, it looks exactly how I want it to (as standard HTML, not react). When I bring it to my react compnent, the zones do not seem to be getting used. All I get is the blue gauge and it doesn't seem like all the styling works, such as line width. Here is the code:

import { Gauge } from 'gaugeJS';

class GaugeComponent extends Component {

  componentDidMount() {
    //var gauge = new Gauge(document.getElementById("foo"))
    const opts = {
        angle: 0.0,
        lineWidth: 0.7,
        pointer: {
          length: 0.5,
          strokeWidth: 0.035,
          color: '#000000'
        },
        staticZones: [
          {strokeStyle: "#F03E3E", min: 0, max: 30},
          {strokeStyle: "#FFDD00", min: 30, max: 60},
          {strokeStyle: "#30B32D", min: 60, max: 120},
          {strokeStyle: "#FFDD00", min: 120, max: 150},
          {strokeStyle: "#F03E3E", min: 150, max: 180}
        ],
        highDpiSupport: true
    };
    var tagert = document.getElementById("foo");
    var gauge = new Gauge(target).setOptions(opts);
    gauge.minValue = 0;
    gauge.maxValue = 180;
    gauge.set(132);
  }

  render() {
    return (
      <div>
        <canvas id="foo"></canvas>
      </div>
    );
  }
}

export default GaugeComponent;```

[kplindegaard]

Does it look as if no options were set at all?

[w00dStok]

Pretty much.

[kplindegaard]

I have no clue about React, sorry. Never used it. But since you report that the appearance is as if the options were never set, does it help to split the construction of the gauge and setting the options into two?

var gauge = new Gauge(target);
gauge.setOptions(opts);

I would also recommend to use the .setMinValue() function instead of accessing the property directly. Not that it makes any difference here but in general.

[hangy233]

I guess it's probably because you are using version 1.2.2 from npm. I tried yopur code with ver 1.3.2 from github repo and it works well. @kplindegaard could you release the latest version 1.3.2 to npm @w00dStok I think before it's updated on npm you can try npm install it from github repo npm install git://github.com/bernii/gauge.js.git#v1.3.2

and remember to change the package name:

import { Gauge } from 'gauge.js';

[w00dStok]

@johanye When I try to install, it I get the following error:

Error: Command failed: git -c core.longpaths=true config --get remote.origin.url

Is this something on my end or github's?

EDIT: When I tried it on my mac, it worked fine. Not sure if it is a windows thing.

[hangy233]

@w00dStok I tried the command on my windows machine. it went through. Have no idea about this error. An alternative way is to download the gauge.js file directly from github.

[kplindegaard]

I have asked gonzaler to update the npm package gaugeJS.

[kplindegaard]

@w00dStok You could alternatively use bower instead of npm. bower install gauge.js will give you the latest version (v1.3.2).

[kplindegaard]

@w00dStok The npm package is now updated with v1.3.2. Happy coding. @johanye Thanks for the tip. Tthanks also to gonzaler, the package owner of gaugeJS.