How to use the britecharts/dist/umd/donut.min function in britecharts

this.tooltipContainerSelector = '.bar-chart .metadata-group';
        break;
      case ChartType.Brush:
        this.chart = brush();
        this.chartSelector = '.brush-chart';
        this.chartClickSelector = ''; // No click selector.
        this.tooltipContainerSelector = ''; // No tooltip selector.
        break;
      case ChartType.Bullet:
        this.chart = bullet();
        this.chartSelector = '.bullet-chart';
        this.chartClickSelector = '.bullet-chart .range, .bullet-chart .measure, .bullet-chart .marker-line';
        this.tooltipContainerSelector = ''; // No tooltip selector.
        break;
      case ChartType.Donut:
        this.chart = donut();
        this.chartSelector = '.donut-chart';
        this.chartClickSelector = '.donut-chart .arc';
        this.tooltipContainerSelector = ''; // No tooltip selector.
        break;
      case ChartType.GroupedBar:
        this.chart = groupedBar();
        this.chartSelector = '.grouped-bar';
        this.chartClickSelector = '.grouped-bar .bar';
        this.tooltipContainerSelector = '.grouped-bar .metadata-group';
        break;
      case ChartType.Heatmap:
        this.chart = heatmap();
        this.chartSelector = '.heatmap';
        this.chartClickSelector = '.heatmap .box';
        this.tooltipContainerSelector = ''; // No tooltip selector.
        break;

private drawChart() {
    this.donut = donut();

    let donutContainer = d3Selection.select(this.el).select('.donut-chart-container'),
      containerWidth = donutContainer.node() ? donutContainer.node().getBoundingClientRect().width : false;

    if (containerWidth) {
      this.donut.width(containerWidth);

      for (let option in this.chartConfig['properties']) {
        if (this.donut.hasOwnProperty(option) && option !== 'colorSchema') {
          this.donut[option](this.chartConfig['properties'][option]);
        }
      }

      if (this.chartConfig.hasOwnProperty('colors')) {
        if (this.chartConfig['colors'].hasOwnProperty('colorSchema')) {
          if (colors.colorSchemas.hasOwnProperty(this.chartConfig['colors']['colorSchema'])) {

DonutChartComponent.prototype.drawChart = function () {
        var _this = this;
        this.donut = donut();
        var donutContainer = d3Selection.select(this.el).select('.donut-chart-container'), containerWidth = donutContainer.node() ? donutContainer.node().getBoundingClientRect().width : false;
        if (containerWidth) {
            this.donut.width(containerWidth);
            for (var option in this.chartConfig['properties']) {
                if (this.donut.hasOwnProperty(option) && option !== 'colorSchema') {
                    this.donut[option](this.chartConfig['properties'][option]);
                }
            }
            if (this.chartConfig.hasOwnProperty('colors')) {
                if (this.chartConfig['colors'].hasOwnProperty('colorSchema')) {
                    if (colors.colorSchemas.hasOwnProperty(this.chartConfig['colors']['colorSchema'])) {
                        this.donut.colorSchema(colors.colorSchemas[this.chartConfig['colors']['colorSchema']]);
                    }
                }
                else if (this.chartConfig['colors'].hasOwnProperty('customSchema')) {
                    this.donut.colorSchema(this.chartConfig['colors']['customSchema']);

mounted() {
    const container = d3Selection.select('.c-episode-rating-state-chart');
    const containerWidth = container.node() ? container.node().getBoundingClientRect().width : false;

    const donutChart = new DonutChart();

    if (containerWidth) {
      const colors = ['#FFAB40', '#bdbdbd', '#69F0AE', '#40C4FF'];

      donutChart
        .width(containerWidth)
        .height(containerWidth - 35)
        .externalRadius(containerWidth / 2.5)
        .internalRadius(containerWidth / 5)
        .colorSchema(colors);

      container.datum(this.dataset).call(donutChart);
    }
  },
};