I am working with 2 components, where one component includes a grid and the other component contains D3 charts. The component in which I am trying to render the chart has a build Column definition function as shown below. I have shared the component that I am attempting to render inside the Ag-grid cell.
To view the error message on console while rendering the custom component in Ag-Grid, click here.
Ag Grid coldef:
// The buildColumnDefinition function provides the attributes required by the grid
// -------Mapping model in column definition------------
private buildColumnDefinition(columnModel: ColumnModel): ColDef {
return {
headerName: columnModel.name,
field: columnModel.accessor,
sort: columnModel.sort,
filter: columnModel.filter,
cellRendererFramework: columnModel.componentRenderer
};
Custom cell renderer component:
//The following code is from the component I am trying to render----//
import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';
@Component({
selector: 'app-bar-chart',
templateUrl: './bar-chart.component.html',
styleUrls: ['./bar-chart.component.scss']
})// Bar chart component rendered in the cell redenderer
export class BarChartComponent implements OnInit {
constructor() { }
ngOnInit(): void {
this.createChart();// Creating chart here
}
randomIntFromInterval(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);//Generating random numbers for the charts
}
//Function to create bar charts
createChart() {
const random = this.randomIntFromInterval(10, 100);
const w = 100;
const h = 30;
const padding = 1;
const dataset = [random];
const svg = d3.selectAll('#mychart').attr('width', w).attr('height', h);
const nodes = svg.selectAll('.rect').data(dataset)
.enter()
.append('g')
.classed('rect', true);
nodes.append('rect')
.attr('x', () => 0)
.attr('y', (d, i) => i * (h / dataset.length))
.attr('height', () => 20)
.attr('width', (d) => d + '%')
.attr('fill', () => '#169bd5');
nodes.append('rect')
.attr('x', (d) => d + '%')
.attr('y', (d, i) => i * (h / dataset.length))
.attr('height', () => 20)
.attr('width', (d) => (100 - d) + '%')
.attr('fill', () => '#FFFFFF');
}