fix: plugin - add deep checks to determine whether to redraw chart (#284

)

It is currently necessary to do a deep equality check on the config object and the style object to determine whether a chart should be re-rendered/re-created.

[DHIS2-6597]

packages/plugin/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/data-visualizer-plugin",
-    "version": "32.0.3",
+    "version": "32.0.5",
     "description": "DHIS2 Data Visualizer plugin",
     "main": "./build/index.js",
     "license": "BSD-3-Clause",

packages/plugin/src/ChartPlugin.js

@@ -1,8 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-
+import isEqual from 'lodash-es/isEqual';
 import { createChart } from 'd2-charts-api';
-
 import { apiFetchVisualization } from './api/visualization';
 import {
     apiFetchAnalytics,
@@ -32,18 +31,21 @@ class ChartPlugin extends Component {
     }
 
     componentDidUpdate(prevProps) {
-        if (this.props.config !== prevProps.config) {
+        if (!isEqual(this.props.config, prevProps.config)) {
             this.renderChart();
             return;
         }
 
-        if (this.props.filters !== prevProps.filters) {
+        if (!isEqual(this.props.filters, prevProps.filters)) {
             this.renderChart();
             return;
         }
 
         // id set by DV app, style works in dashboards
-        if (this.props.id !== prevProps.id || !isEqual(this.props.style, prevProps.style)) {
+        if (
+            this.props.id !== prevProps.id ||
+            !isEqual(this.props.style, prevProps.style)
+        ) {
             this.recreateChart(0); // disable animation
             return;
         }