use JS Classes (CDN) with react (rewrite code), vanillaJS works

Question

I would like to use JS classes from a cdn within a react component.

This is the cdn: https://cdn.jsdelivr.net/gh/Mikhus/canvas-gauges@gh-pages/download/2.1.7/all/gauge.min.js

I have already written the vanillaJS Code, that works well, however I have not idea how to implement this with react.

The object that is drawn into a canvas is first instantiated with a set of different values, then it is drawn on the canvas, then you can access the values from outside. I works well with vanillaJS!!

CDN or local file:

 <script src="./lib/canvas-gauges.min.js"></script>

html canvas:

<canvas
  id="barometer"
 </canvas>

instantiating object and drawing it on the canvas:

const barometer = new RadialGauge({
  renderTo: canvas,  
  title: 'hPa', 
  width: 400,
  height: 400,
  units: `${location}`,
  minValue: 960,
  maxValue: 1060,
  majorTicks: [
    "",
    "970",
    "980",
    "990",
    "1000",
    "1010",
    "1020",
    "1030",
    "1040",
    "1050",
    "",
 
  ],
  minorTicks: 10,
  ticksAngle: 270,
  startAngle: 45,
  strokeTicks: true,
  highlights: [
    {
        "from": 960,
        "to": 1005,
        "color": "rgba(0,0,255,0.8)"
    },

    {
        "from": 1005,
        "to": 1023,
        "color": "rgba(0, 151, 19, 0.3)"
    },

    {
        "from": 1023,
        "to": 1060,
        "color": "rgba(241, 90, 34, 0.9)"
    }
],
  valueInt: 1,
  valueDec: 0,
  colorPlate: "beige",
  colorMajorTicks: "#686868",
  colorMinorTicks: "#686868",
  colorTitle: "#000",
  colorUnits: "#000",
  colorNumbers: "#686868",
  valueBox: true,
  colorNeedleShadowUp: true,
  colorNeedleShadowDown: true,
  colorNeedle: "#f59042",
  colorNeedleEnd: "#f59042",
  colorNeedleCircleOuter: "rgba(200, 200, 200, 1)",
  colorNeedleCircleOuterEnd: "rgba(200, 200, 200, 1)",
  borderShadowWidth: 0,
  borders: false,
  borderInnerWidth: 0,
  borderMiddleWidth: 0,
  borderOuterWidth: 20,
  colorBorderOuter: "silver",
  colorBorderOuterEnd: "black",
  needleType: "arrow",
  needleWidth: 2,
  needleCircleSize: 7,
  needleCircleOuter: true,
  needleCircleInner: false,
  animationDuration: 1500,
  animationRule: "dequint",
  fontNumbers: "Arial",
  fontTitle: "Arial",
  fontUnits: "Arial",
  fontValue: "Arial",
  fontValueStyle: "italic",
  fontNumbersSize: 16,
 // fontNumbersStyle: "italic",
  fontNumbersWeight: "bold",
  fontTitleSize: 16,
  fontUnitsSize: 16,
  fontValueSize: 16,
  animatedValue: true,
  
    
});
barometer.draw();

Then the values of that object can be accessed simply like this:

barometer.value = 1024;

Now, I would like to do the same thing with react!

There is also a node module called react-canvas-gauges, here I can make an import like this: import { RadialGauge, LinearGauge} from "react-canvas-gauges"; I can render then:

  render() {
 <RadialGauge
         title= "hPa" 
         width = "400"... />
 }

The point is, I figured out that I must update the value from "OUTSIDE", instantiating the object, drawing it on the canvas and then updating the value, and that is not possible (or against the philosophy of react) doing this with these JSX Components from "OUTSIDE"

use JS Classes (CDN) with react (rewrite code), vanillaJS works

0 Answers0