Is there an Angular 16+, HightChart integration made to update the chart when pivot change the report?

Question

I'm currently integrating the angular wrapper and using the app-wdr-pivot component, also have integrated HightCharts for Angular. Until now I'm not being able to dynamically update the chart when I change something on the pivot.

At this moment the only thing that I could make is recover the pivot reference through the 'ready' EventEmitter.

My app-wdr-pivot implementation:

<app-wbr-pivot #pivotTable 
            *ngIf="rowsPopulated" 
            [toolbar]="true" 
            [width]="'100%'" 
            [height]="500"
            [report]="{ dataSource: { data: rows } }" 
            (ready)="pivotChange($event)">
            WebDataRocks will appear here
        </app-wbr-pivot>

My highcharts-chart implementation:

<highcharts-chart 
            [Highcharts]="Highcharts" 
            [constructorType]="chartConstructor" 
            [options]="chartOptions"
            [(update)]="updateFlag" 
            [oneToOne]="oneToOneFlag" 
            [runOutsideAngular]="runOutsideAngular"
            style="width: 100%; height: 400px; display: block;">
        </highcharts-chart>

My component.ts values:

@ViewChild('pivotTable') pivotTable: WebdatarocksComponent;
//(Values as integration site example)
columnFilters: any = {};
  selectionType = SelectionType;
  rowSelected = false;
  loadingData = false;
  rowsPopulated: boolean = false

  Highcharts: typeof Highcharts = Highcharts; // required
  chartConstructor: string = 'chart'; // optional string, defaults to 'chart'
  chartOptions: Highcharts.Options = {
    series: [{
      data: [1, 2, 3],
      type: 'line'
    }],
    title: { text: this.title }
  }; // required
  //chartCallback: Highcharts.ChartCallbackFunction = function (chart) { ... } // optional function, defaults to null
  updateFlag: boolean = false; // optional boolean
  oneToOneFlag: boolean = true; // optional boolean, defaults to false
  runOutsideAngular: boolean = false; // optional boolean, defaults to false
//...MORE IRRELEVANT CODE...
pivotChange($event){
    console.log('(°-°) pivotChange', $event)
  }

that last console.log statement throws:

addCalculatedMeasure: b => h.vk(b)
addCondition: b => h.ox(b)
clear: () => h.clear()
clearFilter: b => h.vn(b)
closeFieldsList: () => h.Cx()
collapseAllData: () => h.Dx()
collapseData: b => h.rp(b)
connectTo: b => h.zr(b)
customizeCell: b => h.LW(b)
dispose: () => { h.la(); }
expandAllData: (b = !0) => h.Ux(b)
expandData: b => h.xp(b)
exportTo: (b, a = null, c = null) => h.Aj(b, a, c)
getAllConditions: () => h.yD()
getAllHierarchies: () => h.Gu()
getAllMeasures: () => h.Gn()
getCell: (b, a) => h.Ld(b, a)
getColumns: () => h.Ku()
getCondition: b => h.ED(b)
getData: (b, a, c) => h.getData(b, a, c)
getFilter: b => h.ID(b)
getFilterProperties: b => h.JD(b)
getFormat: b => h.Ne(b)
getMeasures: () => h.Pu()
getMembers: (b, a, c) => h.Ay(b, a, c)
getOptions: () => h.Cp()
getReport: b => h.Dp(b)
getReportFilters: () => h.Qu()
getRows: () => h.Ru()
getSelectedCell: () => h.Su()
getSort: b => h.PD(b)
load: b => h.load(b)
off: (b, a) => h.E_(b, a)
on: (b, a) => h.TN(b, a)
open: () => h.open()
openFieldsList: () => h.nv()
print: (b = null) => h.print(b)
refresh: () => h.refresh()
removeAllCalculatedMeasures: () => h.eq()
removeAllConditions: () => h.Jz()
removeCalculatedMeasure: b => h.fo(b)
removeCondition: b => h.Kz(b)
removeSelection: () => h.ws()
replaceHierarchyCaption: b => h.Lz(b)
runQuery: b => h.Qz(b)
save: (b = { filename: "report.json" }, a = null, c = null, e = null, g = !1) => {…}
setBottomX: (b, a, c) => h.uv(b, a, c)
setFilter: (b, a, c = !1) => h.wv(b, a, c)
setFormat: (b, a) => h.jq(b, a)
setOptions: b => h.Uj(b)
setReport: b => h.xv(b)
setSelectedCell: (b, a) => h.Is(b, a)
setSort: (b, a) => h.jo(b, a)
setTopX: (b, a, c) => h.zv(b, a, c)
sortValues: (b, a, c, e) => h.dA(b, a, c, e)
updateData: (b, a) => h.dl(b, a)
version: "Version 1.4.14"

and finally my specific problem is how to get the data currently represented in the pivot to update the chart through the reference to chartOptions. If there anione with a similar project or some kind of example it will be awesome. I apologise in advance for spelling/grammar errors, this isn't my native tongue.

Answer 1

I could make it work, get the data from the pivot and update the chart, this is how: On the WDR Pivot you should use the @Output update like this

<app-wbr-pivot #pivotTable 
            *ngIf="rowsPopulated" 
            [toolbar]="true" 
            [width]="'100%'" 
            [height]="500"
            [report]="{ dataSource: { data: rows } }"
            (update)="pivotChange()">
            WebDataRocks will appear here
        </app-wbr-pivot>

and in your pivotChange() method do:

pivotChange() {
    let data = this.pivotTable.webDataRocks.getData({}, (data) => {
      let simplifyedData = data.data.map(item => item['v0'])
      this.chartOptions.series[0] = {
        type: 'line',
        data: simplifyedData
      }
      this.updateFlag = true
    })
  }

change updateFlag to true is the key to update HighCharts. Hopefully this will help someone :).