0

I have a doughnut chart with static labels - what is changing, is only the data with values for labels. It's all about filtering data. But I have some weird issue and I can't figure out whats going on.

For example I've got something like this: labels with hidden option set to true I figure out that 'undefined' value in Array, makes item hidden so in case from picture it will be for example: [234, undefined, 21, undefined, 8].

Ok it's seems to be fine but when I use filter panel to change data in my application, and props with this Array of values is changing it's not rerendering label view, for example when I change array to [234, 100, 21, undefined, 8], label at position label1 should change 'hidden' property to false - it won't happening and I don't know why.

I paste here only render method, if u need to know something else please tell me:

render() {
    const chartOptions = {
        legend: {
            display: true,
            position: 'right',
            labels: {
                boxWidth: 12
            }
        }
    };

    const chartData =
        [{
            label: 'SomeLabel',
            data: this.props.chartData.values,
            yAxisId: 'yAxisA',
            type: 'doughnut',
            backgroundColor: ['#a3e1d4', '#dedede', '#9CC3DA', '#0475ad', '#f8ac59', '#ED5565', '#23c6c8', '#c2c2c2', '#1c84c6'],
        }];
    const title = (<h5>{this.props.title}</h5>);

    const doughnutData = {
        labels: this.props.chartData.labels,
        datasets: chartData
    };

    const clonedDoughnutData = Object.assign({}, doughnutData);

    const chart = (
        <CustomDoughnut
            data={clonedDoughnutData}
            options={chartOptions}
            height={150}
        />
    );
    const noData = (<NoData isDataVolume={false}/>);
    const waveLoader = (<WaveLoader loading={this.props.loading}/>);
    return (
        <div>
            <Tile
                loading={this.props.overlayLoading}
                title={title}
                content={this.props.loading ? waveLoader : this.props.chartData.values.length > 0 ? chart : noData}
                dynamicElementsService={this.props.dynamicElementsService}
                parentView={this.props.parentView}
                element={this.props.element}
                status={this.props.status}
                label={this.props.title}
            />
        </div>
    );
}

EDIT 1: All calculations I make in other component, then I'm dispatching them to store, and then I'm getting them from store in parent component and I'm sending values as a props to component with the chart rendering.

This is how I'm handling proper values to labels:

                const SomethingValues = [];
            this.somethingLabels.forEach(element => {
                    if (analytics.chartData.Something.Map.get(element)) {
                        somethingValues.push(analytics.chartData.Something.Map.get(element));
                    } else {
                        somethingValues.push(undefined);
                    }
                }
            );
Dominik Z
  • 161
  • 4
  • 14

0 Answers0