Ngx-charts: tree-map cell value formatting won't render correctly

[afm497]

I'm submitting a ... (check one with "x")

• [X ] bug report - search github for a similar issue or PR before submitting
• [ ] feature request
• [ ] support request - use StackOverflow (add the ngx-charts tag) or the gitter chat for support questions

Current behavior

When specifying a function for valueFormatting option in ngx-charts-tree-map, if html is returned in the function, it will not be rendered, but output as text that just happens to look like html. For example, take the following function:

    valueFormat(c): string {
        return `<span class="mat-display-1">${c.value}</span>`;
    }

this will result in the unrendered html being displayed for the value.

Expected behavior

Expectation is that this should behave the same way that label formatting does, where you can return html in a function that will be rendered correctly. For example, take the folllowing function used as the labelFormatting option on the chart :

    labelFormat(c): string {
        return `<span class="mat-display-1">${c.label}</span>`;
    }

This will correctly render the label with the returned html.

Reproduction of the problem

Will try to set this up, have not used these kind of tools before.

What is the motivation / use case for changing the behavior?

Trying to use this component in a wall board setting where the text needs to be very very very large as it is being display on a giant screen and read from far away.

Please tell us about your environment:

• MacOS
• IntelliJ
• npm,
• no http server, it's being served from CDN

• ngx-charts version: x.x.x
  

8.1.0, have not tested/used on earlier versions.

• Angular version: x.x.x
  

6.0.5

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  

all

• Language: [all | TypeScript X.X | ES6/7 | ES5]

all

[nos-nart]

473 pie-chart's labelFormatting implemented with different functionality than number-card and tree-map

[annmarie-switzer]

For me, I can't get valueFormatting to work at all.

chart.data = [
    {
        name: 'My Number',
        'value': 2176,
        'extra: {
            'amount': 52
        }
    }
]

valueFormatting(c) {
    return 'Hello'
}



md5-cb0112f8a88d79e85171ac1d657b85c4



<ngx-charts-tree-map
    *ngIf="chart.data.length > 0"
    [customColors]="customColors"
    [results]="chart.data"
    [valueFormatting]="valueFormatting"
    (select)="onSelect($event)">
    <ng-template #tooltipTemplate let-model="model">
        <span class="tooltip-label">{{model.name}}</span>
        <span class="tooltip-val">{{model.value}} MB &#8226; {{model.extra.amount}} Docs</span>
    </ng-template>
</ngx-charts-tree-map>

The value is not affected at all. It will always be 2,176, in this example. Note that the value includes a comma when displayed, even if the value in the data array has no comma. This is also true if the number is a decimal. For example, 2176.00 will display as 2,176.

labelFormatting works as expected.

[tvdaredevil]

@annmarie-switzer Same problem here... no matter what I return from value formatting including an empty string, its always retains the original value

[tvdaredevil]

After much research, I looked into the source code of the library. For some reason the tree-map library was developed in a way such that if animations were set to true (which is default behavior) the values could never be overwritten.
Simply set the following:

<ngx-charts-tree-map
    *ngIf="chart.data.length > 0"
    [customColors]="customColors"
    [results]="chart.data"
    [valueFormatting]="valueFormatting"
    [animations="false"
    (select)="onSelect($event)">
    <ng-template #tooltipTemplate let-model="model">
        <span class="tooltip-label">{{model.name}}</span>
        <span class="tooltip-val">{{model.value}} MB &#8226; {{model.extra.amount}} Docs</span>
    </ng-template>
</ngx-charts-tree-map>