Error: [X] does not behave like a function

I am utilizing angular4 along with dc.js to generate drill down charts.

Here is the snippet of the code I am using:

import { Component, ViewChild } from '@angular/core';
import { OnInit, AfterViewInit } from '@angular/core/src/metadata/lifecycle_hooks';
import { DataSource } from '@angular/cdk/collections';

import * as dc from 'dc';
import * as d3 from 'd3';
import * as crossfilter from 'crossfilter2';

import { LoaderService } from '../../services/loader.service';
import { CitsChartService } from './../../services/citsChart.service';

@Component({
  selector: 'app-cits-chart',
  templateUrl: './cits-chart.component.html',
  styleUrls: ['./cits-chart.component.css']
})

export class CitsChartComponent implements OnInit, AfterViewInit {
  isShowProgressbar = false;
  ticketData;
  localTktData;
  tktAssignedToBarChart;
  tktDataTable;
  pageStartRow = 0;
  ndx;
  all;

  constructor(private _loaderSrvc: LoaderService,
    private _citsChartService: CitsChartService) { }

  ngOnInit() {

  }

  ngAfterViewInit() {

    this._citsChartService.getCITSData().subscribe(data => {
      this.ticketData = data;
      this.drawChart();
      this._loaderSrvc.display(false);
    });
  }

  public redrawAll() {
    dc.redrawAll();
  }

  drawChart() {

    this.tktAssignedToBarChart = dc.barChart('#tktAssignedToBarChart');
    this.tktDataTable = dc.dataTable('#tktTable');
    let assignedtoDim, assignedToGroup, tktTableDim;

    this.ndx = crossfilter(this.ticketData);

    this.all = this.ndx.groupAll();

    assignedtoDim = this.ndx.dimension(function (d) {
      return (d.handlerUsername ? d.handlerUsername : 'None');
    }),
      assignedToGroup = assignedtoDim.group().reduceCount();

    this.tktAssignedToBarChart
      .width(assignedtoDim.group().all().length * 50)
      .height(260)
      .dimension(assignedtoDim)
      .group(this.remove_empty_bins(assignedToGroup))
      .x(d3.scale.ordinal())
      .xUnits(dc.units.ordinal)
      .brushOn(false)
      .xAxisLabel('Assigned To')
      .yAxisLabel('No. of Tickets')
      .gap(5)
      .elasticY(true)
      .elasticX(true)
      .barPadding(0.2)
      .outerPadding(0.5)
      .controlsUseVisibility(true)
      .on('renderlet', function (d) {
        d.selectAll('g.x text').attr('dx', '-10').attr(
          'dy', '0').attr('transform', 'rotate(-55)').attr('style', 'text-anchor:end');
        d.selectAll('svg').attr('height', '300');
        d.selectAll('g .x-axis-label').attr('transform', 'translate(476,293)');
      })
      .on('filtered', function () {
        this.updateTable('reset');
      })
      ;

    tktTableDim = this.ndx.dimension(function (d) {
      return [d.issueId];
    });

    this.tktDataTable
      .dimension(tktTableDim)
      .group(function (d) {
        return '';
      })
      .columns([
        function (d) {
          return d.projectName;
        },
        function (d) {
          return d.issueId;
        },
        function (d) {
          return d.summary;
        },
        function (d) {
          return d.status;
        },
        function (d) {
          return d.reporterUsername;
        },
        function (d) {
          return d.handlerUsername;
        },
        function (d) {
          return d.severity;
        },
        function (d) {
          return d.dateSubmitted;
        }
      ])
      .sortBy(function (d) {
        return d.issueId;
      })
      .order(d3.ascending)
      .size(Infinity)
      .on('renderlet', function (table) {
        table.selectAll('.dc-table-group').classed('visible-print-inline', true);
      });

    this.updateTable('reset');

    dc.renderAll();
  }

  remove_empty_bins(source_group) {
    return {
      all: function () {
        return source_group.all().filter(function (d) {
          return d.value !== 0;
        });
      }
    };
  }

  updateTable(operation) {

    if (operation === 'Next') {
      this.pageStartRow += 10;
    } else if (operation === 'Previous') {
      this.pageStartRow -= 10;
    } else {
      this.pageStartRow = 0;
    }

    d3.select('#previous').attr('disabled', this.pageStartRow === 0 ? 'true' : null);
    d3.select('#next').attr('disabled', (this.pageStartRow + 10) >= this.all.value() ? 'true' : null);

    d3.select('#recStart').text(this.pageStartRow + 1);
    d3.select('#recEnd').text((this.pageStartRow + 10) >= this.all.value() ?
      this.all.value() : this.pageStartRow + 10);

    this.tktDataTable.beginSlice(this.pageStartRow);
    this.tktDataTable.endSlice(this.pageStartRow + 10);

    this.tktDataTable.redraw();
  }
}

Encountering an error when trying to implement .on('filtered', function () {}), as shown below.

ERROR 
TypeError: this.updateTable is not a function
Stack trace:
CitsChartComponent.prototype.drawChart/<@webpack-internal:///../../../../../src/app/components/cits-chart/cits-chart.component.ts:137:13
event@webpack-internal:///../../../../d3/d3.js:504:40
_dc/dc.baseMixin/_chart._invokeFilteredListener@webpack-internal:///../../../../dc/dc.js:1818:13
_dc/dc.baseMixin/_chart.filter@webpack-internal:///../../../../dc/dc.js:2104:9
_dc/dc.coordinateGridMixin/<@webpack-internal:///../../../../dc/dc.js:3728:9
_dc/dc.baseMixin/_chart.onClick/<@webpack-internal:///../../../../dc/dc.js:2154:13
_dc/dc.events.trigger@webpack-internal:///../../../../dc/dc.js:860:9
_dc/dc.baseMixin/_chart.onClick@webpack-internal:///../../../../dc/dc.js:2153:9
_dc/dc.barChart/<@webpack-internal:///../../../../dc/dc.js:5780:9
d3_selection_onListener/<@webpack-internal:///../../../../d3/d3.js:1120:9
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:425:17
onInvokeTask@webpack-internal:///../../../core/esm5/core.js:4941:24
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:424:17
Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:192:28
ZoneTask.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:499:24
invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:1540:9
globalZoneAwareCallback@webpack-internal:///../../../../zone.js/dist/zone.js:1566:17

The issue lies in the following code snippet

this.tktAssignedToBarChart
      .width(assignedtoDim.group().all().length * 50)
      |
      |
      |
      |
      |
      .on('filtered', function () {
        this.updateTable('reset');
      })
      ;
angulartypescriptdc.js

Answer №1

To resolve your issue in Typescript, it is recommended that you update your callback function from function(foo) {} to (foo) => {}.

Using the fat arrow notation will ensure proper handling of the context (this).

For further details, you may refer to the documentation here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Different ways to modify the style of a MenuItem component in PrimeNG

Seeking advice on customizing the look of a MenuItem in PrimeNG. Here's what I have attempted so far: <p-menu [style]="{'width': '400px'}" #menuOpcoesLista popup="popup" [model]="opcoesListaCS" appendTo="body"></p-menu> ...

cssangularprimeng

Combine an array of arrays with its elements reversed within the same array

I am working with an array of numbers that is structured like this: const arrayOfArrays: number[][] = [[1, 2], [1, 3]]; The desired outcome is to have [[1, 2], [2, 1], [1, 3], [3, 1]]. I found a solution using the following approach: // initialize an e ...

javascripttypescript

The MSI installer for electron-builder is rejecting the asar file due to its excessive

My Angular application requires an MSI installer, but I encountered an error while trying to create one for the electron app I developed using `npm run electron`. The error message states: Error LGHT0263 : 'C:...\release\win-unpacked&bsol ...

angularnpmelectronelectron-builderasar

Experiencing the 'invalid_form_data' error while attempting to upload a file to the Slack API via the files.upload method in Angular 8

I am currently working on a project that involves collecting form data, including a file upload. I am trying to implement a feature where the uploaded file is automatically sent to a Slack channel upon submission of the form. Despite following the guidance ...

javascriptangulartypescriptslackslack-api

What is the best way to ensure a specific row remains at the bottom of an Angular table with Material when sorting?

My data table contains a list of items with a row at the end showing the totals. | name | value1 | value2 | --------------------------- | Emily | 3 | 5 | | Finn | 4 | 6 | | Grace | 1 | 3 | | TOTAL | 8 | 14 | I&apos ...

angulartypescriptangular-material

What prevents ts-morph from retrieving the classes within a TypeScript project?

Utilizing ts-morph, I am examining the inheritance relationships of classes in a project: For testing purposes, I have downloaded an open-source projectantv/x6: import { Project } from "ts-morph"; const project = new Project(); project.addDire ...

typescriptts-morph

Angular8 with the [tinymce] library for customizing editor elements and configuring multiline options

I am currently working with Angular 8 and in the template, we have the following code snippet: <editor required class="research-modal__control__input research-modal__control__input__description" formCo ...

angulartypescripttinymce

Discovering the current date in Angular 8 by utilizing the form builder

Is there a way to automatically fill a form created with FormBuilder with the system's date and time when it is created, instead of the default date format? this.creationDate = moment().format(DATE_TIME_FORMAT); I want to update the creationDate fie ...

angulartypescript

Creating an eye-catching animation in Angular 2+ by applying a checkbox check effect to each checkbox dynamically generated within a loop

When I integrated a CSS animation for checkbox "cards" into an Angular project, the transition ceased to function properly. I have limited experience with Angular and am trying to work with existing code. While I managed to get a basic animation working wi ...

angular

New design options for angular2 login page

My website typically has a standard layout with a tool and sidebar on all pages, however I want to ensure that they are not visible when the user navigates to the login or register page. In AngularJS, this was easily achieved using ui-router to define a sp ...

angularangular2-routingangular2-template

Child component in Angular fails to detect input changes

Hey there! I'm currently utilizing parent-child communication in my Angular project. In the parent component, I have an array that represents graph data. If you'd like to check out a demo of what I'm working on, feel free to click here. The ...

javascriptangularhighcharts

Slow performance on Ionic page with input fields

My ionic app is experiencing slow performance on pages with inputs. For example, a select input with 4 items has a delay of approximately 800ms, and when dismissing the keyboard, a white blank block remains on screen for about 500ms. This app consists of ...

angulartypescriptionic-frameworkionic2ionic3

Angular8's NgFor directive is designed to bind to Iterables like Arrays only

Having an issue retrieving data from Github and displaying it, as I am encountering errors. The code editor is highlighting an error with "followers" in the github-followers.component.ts file. githup-followers.component.html <div *ngFor="let follower ...

angular

Tips for implementing a real-time search feature in Angular

I require assistance. I am attempting to perform a live search using the following code: when text is entered into an input, I want my targetListOptions array, which is used in a select dropdown, to update accordingly. The code runs without errors, but not ...

angulartypescriptsearch

Find the appropriate return type for a TypeScript function based on its argument

Is it feasible in TypeScript to infer the return type of a function based on its arguments? This feature would be beneficial when extracting specific properties from, for example, a database query. Here is an illustration (https://repl.it/repls/Irresponsi ...

typescripttypestypescript-typings

Exploring dependency injection in Angular 1 using a blend of JavaScript and TypeScript

I'm currently working on integrating TypeScript into an existing Angular 1.5 application. Despite successfully using Angular services and third-party services, I am facing difficulties in injecting custom services that are written in vanilla JavaScrip ...

javascriptangularjstypescriptdependency-injection

Encountering difficulties when attempting to npm install @angular/common/http

Up until yesterday, I had no issues downloading the @angular/common/http package. However, today when I try to run npm i I keep encountering this error message: npm ERR! code EINVALIDPACKAGENAME npm ERR! Invalid package name "@angular/common/http": ...

angularnpm

Angular2 - receiving real-time notifications about service data updates

I've been facing a challenge with getting a chart component to update when a new line is added by another component. I attempted to use a service to connect the two and believed that utilizing BehaviorSubject would be the solution, but it seems like t ...

angularrxjs

Navigating through Angular NGRX to handle looping over response data

// action export class LoadPlayersWinLoseCount implements Action { readonly type = PlayersActionTypes.LOAD_PLAYERS_WIN_LOSE_COUNT; constructor(public accountId, public queryParams, public payload?: IWinlose, ) {} } // reducer export function playersW ...

angularngrx

Rearranging items within an array in a React component

Currently, I am facing a situation where I have created a list that dynamically adds a React Node upon clicking a button. The final layout of the model looks like this: https://i.sstatic.net/fG37r.png Here is the code snippet for your reference: import ...

reactjstypescriptreact-hooks