jakezatecky / d3-funnel

A JavaScript library for rendering funnel charts using the D3.js framework.
http://jakezatecky.github.io/d3-funnel/
MIT License
330 stars 97 forks source link

TypeError: d3_funnel__WEBPACK_IMPORTED_MODULE_0__.D3Funnel is not a constructor #208

Closed Allusgod closed 1 year ago

Allusgod commented 1 year ago

I have added the d3-funnel in my Angular project. but While running it show the above error.

html Code is

<div class="funnel-wrapper">
    <div id="funnel"></div>
</div>

Ts Code is

import { Component, AfterViewInit } from '@angular/core';
import { D3Funnel } from "d3-funnel";

@Component({
  selector: 'app-funnel-chart',
  templateUrl: './funnel-chart.component.html',
  styleUrls: ['./funnel-chart.component.css']
})
export class FunnelChartComponent implements AfterViewInit {

  public funnel: any;

  public ngAfterViewInit() {
    this.drawFunnelChart();
  }

  private drawFunnelChart(){
    let options;

    if (!options) {
      options = {
        block: {
          minHeight: 15,
          highlight: true,
          barOverlay: false,
        },
        label: {
          enabled: true,
          fontFamily: null,
          fontSize: '14px',
          fill: 'white',
          format: '{l}: {f}',
        },
        tooltip: {
          enabled: true,
          format: '{l}: {f}',
        },
        chart: {
          animate: 100,
          width: 500,
          height: 400,
          inverted: true,
          bottomPinch: 1,
        },
      };
    }
    this.funnel = new D3Funnel('#funnel');

    this.funnel.draw(
      [
        {
          label: 'Total 1',
          value: 90,
          backgroundColor: '#FF9D1F',
        },
        {
          label: 'Total 2',
          value: 60,
          backgroundColor: '#ac9a1F',
        },
        {
          label: 'with compliance standard',
          value: 15,
          backgroundColor: '#428DEC',
        },
        {
          label: 'Pass',
          value: 10,
          backgroundColor: '#00d2d3',
        },
        {
          label: 'Pass',
          value: 50,
          backgroundColor: '',
        },
      ],
      options
    );
  }

}
Allusgod commented 1 year ago

It was my mistake. I tried just import D3Funnel from "d3-funnel";