subarroca / ng-gauge

Gauge generic component made with angular2 and SVG
https://subarroca.github.io/ng-gauge/
13 stars 6 forks source link

any code demo ??? #4

Closed yaronmil closed 7 years ago

baxelson12 commented 7 years ago

@yaronmil In component:

  gaugeTemplate = {
    bgRadius: 20,
    bgColor: "grey",
    rounded: true,
    reverse: false,
    animationSecs: 5,
    labels: [
      new GaugeLabel({
        color: 'black',
        text: 'Pending',
        x: 0,
        y: 2,
        fontSize: '.5em'
      })
    ],
    segments: [
      new GaugeSegment({
        value: 50,
        color: "#7cc17c",
        borderWidth: 5,
        radius: 40
      }),
      new GaugeSegment({
        value: 75,
        color: "#5a5a8a",
        borderWidth: 5,
        radius: 30
      })
    ]
  };

in Html:

<ng2-kw-gauge
  [bgRadius] = gaugeTemplate.bgRadius
  [bgColor] = gaugeTemplate.bgColor
  [rounded] = gaugeTemplate.rounded
  [reverse] = gaugeTemplate.reverse
  [animationSecs] = gaugeTemplate.animationSecs
  [segments] = gaugeTemplate.segments
  [labels] = gaugeTemplate.labels
>
</ng2-kw-gauge>
yaronmil commented 7 years ago

thanks !