Angular chart detail exploration

I'm looking to implement a drill-down option for a Kendo pie chart in angular using only one data source. Below are the specific data points I want to display in the pie chart:

{kind: 'Asia', share: 0.175, parentID: '' },
{kind: 'America', share: 0.238, parentID: '' },
{kind: 'Europe', share: 0.118, parentID: '' },
{kind: 'Africa', share: 0.052, parentID: '' }

When a user clicks on a slice, I want the chart to drill down based on the parent ID.

{kind: 'SL', share: 0.225, parentID: 'Asia' },
{kind: 'India', share: 0.192, parentID: 'Asia' },
{kind: 'Russia', share: 0.192, parentID: 'Europe' },
{kind: 'France', share: 0.192, parentID: 'Europe' }

Here is the code snippet for reference: https://stackblitz.com/edit/angular-myxeux-ugcarp?file=app%2Fapp.component.ts

angulartypescriptchartskendo-uidrilldown

Answer №1

Based on the code provided and your requirements, it seems that you need to filter your data whenever a specific slice is clicked in order to drill down based on the parentID. I have made some modifications to your code below:

 public initialData: any[] = this.data.filter(
    (element) => element.parentID == ''
  );
  public filtredData: any[] = this.initialData;

  public onClick(e) {
    this.initialData.length != this.filtredData.length
      ? (this.filtredData = this.initialData)
      : this.data.filter((element) => element.parentID == e.dataItem.kind)
          .length == 0
      ? (this.filtredData = this.initialData)
      : (this.filtredData = this.data.filter(
          (element) => element.parentID == e.dataItem.kind
        ));
  }

Remember to update the data source of your Kendo component to filtredData

<kendo-chart-series-item
            type="donut" [data]="filtredData"
            categoryField="kind" field="share">

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

Angular ngFor directive is unable to iterate through nested data

I am struggling to make angular show some important information. Below is the necessary data: information = [ { title: 'title1', details: [ { id: 1, description: 'some info' }, ...

angularangular13angular14

Error while parsing module: Parenthesized pattern encountered. You might require a suitable loader to process this type of file

After running the commands ng init and ng server, a brand new angular 2 application was created. However, an error output was received: chunk {1} styles.bundle.js, styles.bundle.map (styles) 9.96 kB {3} [initial] [rendered] chunk {2} vendor.bundle.j ...

angularwebpack

What is the best way to connect my Angular 2 project to the "$wakanda" service in order to access and retrieve data efficiently?

Recently, I started a new project on the wakanda.io platform using angular2 and backend technologies. After creating some database entities, I now need to retrieve data from the database on the client side. To do this, I am looking for a way to import the ...

javascriptangularjsangularwakanda

The specific function type 'number' cannot be assigned to type 'U'

When I encounter this issue, U is defined as a number and should be returning the number as well. The error message reads: Type 'number' is not assignable to type 'U'. function foo<T extends string, U extends number>(a: T): U { ...

typescripttypescript-generics

What is the best way to retrieve the file path of a imported Angular module?

I am trying to figure out how to retrieve the path of the BarComponent within the code snippet below. Specifically, I need to obtain '../bar/bar.component'. When dealing with a module loaded from a package such as Component module, I would like t ...

angulartypescript

Sorting an array of objects using an array of corresponding IDs

Given an array activeIds which contains the ids of active services and another array servicesList which holds objects of various services. For example, let's consider: activeIds = [202, 204] serviceList = [{ "id":201, ...

javascriptarraysangularobject

Extract a parameter value from a URL included in a GET request. Error message: "Property cannot be read due to TypeError."

Trying to extract data from the URL route parameters in a GET request has become quite a challenge. It seemed to work perfectly fine before, without any changes. Now, nothing seems to be working as expected. I have scattered console.log statements all ove ...

node.jstypescriptexpressurl-parametersget-request

Send over the necessary props containing the todoListId to the component

I am currently working on a Todo project, where I need to create tasks by passing three elements to the task API: "todoListId", "title", and "content". However, I am facing an issue with passing the "todoListId" element. How can I achieve this? In my cod ...

reactjstypescriptredux

My Angular2 application hosted on Heroku is experiencing issues with accessing configuration variables

I am currently developing a web page using Angular2 and I am interested in utilizing configuration variables from Heroku to keep certain sensitive information, such as API URLs, hidden from my script. I have already configured 2 variables on the settings p ...

angularheroku

The error I encountered with the Typescript React <Select> onChange handler type was quite

Having an issue while trying to attach an onChange event handler to a Select component from material-ui: <Select labelId="demo-simple-select-label" id="demo-simple-select" value={values.country} onChange={handleCountryChange} ...

javascriptreactjstypescriptmaterial-ui

When I first set up Angular Cli, instead of smoothly running, it throws an error

Recently, I've been attempting to set up the most recent version of angular-cli so that I can kickstart a new project. However, an odd problem keeps arising whenever I try to execute the following command: npm install -g angular-cli@latest Despite s ...

angularnpmangular-cli

Calculating the number of days left within a month using dayjs

Currently, I'm facing a challenge that seems to have no easy online solution, and if there's one thing I find particularly frustrating; it's dealing with dates. My current task involves calculating a person's age in months and days. Fo ...

javascriptangulardayjs

Limiting JSDoc/TypeScript type to a specific array element

Utilizing TypeScript with JSDoc poses a challenge as I aim to restrict a variable to one of the known values stored in an array. I am aware that it can be achieved like so: /** @type {'one'|'two'|'three'} */ let v = 'fo ...

typescriptjsdoc

How is it possible for Typescript to let me create an object without explicitly defining all mandatory fields?

After creating a class and instantiating an object from it through the constructor, I expected to receive an error message indicating missing properties. However, despite the fact that the class description specified required fields, I was able to create a ...

typescript

Challenges with E-commerce Project's Wishlist Feature

Currently, I am working on a project where clicking on the 'fa-heart' icon should toggle between solid and regular states to add or remove an item from the wishlist. However, my attempts so far have resulted in all product icons changing together ...

angular

Utilizing NgStyle and Property Binding in Angular to Manipulate Data (or a Different Approach)

Currently, I am diving into Angular programming and encountering an issue with property bindings. Let me share a snippet of my code: // TS FILE data[ {"id": "1", "name": "tester", "rev": "1"}, {"id": "2", "name": "tester", "rev": "1"}, {"id": "3", "name" ...

javascripthtmlcssangulartypescript

The Angular 2 and TypeScript error stating that the argument of type response is not assignable is causing issues

In my Angular application, I have a service that includes a value defined as: private client_comments = new BehaviorSubject([]); When attempting to update this value with the response from an HTTP request, I encountered the following error message: A ...

angulartypescripthttp

Unlocking the power of NgRx entity: Leveraging updateOne and updateMany with effects

As a newcomer to NgRx entities, I am struggling to understand how to leverage it for updating my state. My preference is to handle the action directly within my effect. Below is the code snippet for my effect: updateItem$ = createEffect(() => this. ...

angularngrxngrx-storengrx-effectsngrx-entity

Encountering the ObjectUnsubscribedErrorImpl while utilizing angular datatable with angular version 7

I am encountering an issue when trying to display a DataTable in a modal window. Initially, everything works as expected and I can see the screen perfectly. However, after closing the modal window and opening it again, the DataTable no longer shows the sea ...

angulartypescriptdatatable

This function CameraPreview.takePicture() does not have a return value

Recently, I've been working on updating an old app that was using an outdated version of the camera-preview plugin. The previous version had a method called setOnPictureTakenHandler which allowed me to easily retrieve the image URL. However, the new ...

androidcordovatypescriptionic-frameworkionic2