akveo / ngx-admin

Customizable admin dashboard template based on Angular 10+
https://akveo.github.io/ngx-admin/
MIT License
25.25k stars 7.95k forks source link

Dropdown crashes browser with canvas-gauges #1526

Closed gentle9 closed 5 years ago

gentle9 commented 6 years ago

Issue type

I'm submitting a ... (check one with "x")

Issue description

Current behavior: If I add the canvas-gauges library and create a new Radial Gauge the bootstrap dropdown stops to work. If I click on a dropdown the browser gets a high CPU load and is not responsive anymore. Happens on both the master and starter-kit branch.

Expected behavior: The dropdown should work and not crash the browser. I created an empty new angular project only with bootstrap and here the dropdown works normaly

Steps to reproduce: Implement canvas-gauges like below and then click on a dropdown. The dropdown doesnt have to be on the same component.

Related code: npm install canvas-gauges

In a component (for example dashboard.component.ts):

import {RadialGauge} from 'canvas-gauges';
...
@ViewChild('gauge') gauge: ElementRef;
  private gaugeElement: any;

  ngAfterContentInit() {
    this.gaugeElement = new RadialGauge({
      renderTo: this.gauge.nativeElement,
      width: 300,
      height: 300,
      units: "°C",
      title: "Temperature",
      minValue: -50,
      maxValue: 50,
      majorTicks: [
          -50,
          -40,
          -30,
          -20,
          -10,
          0,
          10,
          20,
          30,
          40,
          50
      ],
      minorTicks: 2,
      strokeTicks: true,
      highlights: [
          {
              "from": -50,
              "to": 0,
              "color": "rgba(0,0, 255, .3)"
          },
          {
              "from": 0,
              "to": 50,
              "color": "rgba(255, 0, 0, .3)"
          }
      ],
      ticksAngle: 225,
      startAngle: 67.5,
      colorMajorTicks: "#ddd",
      colorMinorTicks: "#ddd",
      colorTitle: "#eee",
      colorUnits: "#ccc",
      colorNumbers: "#eee",
      colorPlate: "#222",
      borderShadowWidth: 0,
      borders: true,
      needleType: "arrow",
      needleWidth: 2,
      needleCircleSize: 7,
      needleCircleOuter: true,
      needleCircleInner: false,
      animationDuration: 1500,
      animationRule: "linear",
      colorBorderOuter: "#333",
      colorBorderOuterEnd: "#111",
      colorBorderMiddle: "#222",
      colorBorderMiddleEnd: "#111",
      colorBorderInner: "#111",
      colorBorderInnerEnd: "#333",
      colorNeedleShadowDown: "#333",
      colorNeedleCircleOuter: "#333",
      colorNeedleCircleOuterEnd: "#111",
      colorNeedleCircleInner: "#111",
      colorNeedleCircleInnerEnd: "#222",
      valueBoxBorderRadius: 0,
      colorValueBoxRect: "#222",
      colorValueBoxRectEnd: "#333"
  }).draw();
  }

and in the html add <canvas #gauge></canvas>

Other information:

npm, node, OS, Browser

npm: 5.6.0
node: 8.9.1
Windows 10
Browser: Chrome/Firefox/Edge

Angular, Nebular

Angular: 5.1.0
Nebular-Theme: 2.0.0-rc.4
nnixaa commented 5 years ago

Closing as outdated.