fix(bug): comparison as value change returns blank page b/342265977 (#41

)

Addressing bug that returns blank screen when using comparison in viz.

src/lib/comparison_data_point.js

@@ -0,0 +1,15 @@
+/**
+ * Functions to get percentages and value changes in comparison points
+ */
+
+export const getProgressPerc = (dataPoint, compDataPoint) => {
+  return Math.round((dataPoint.value / compDataPoint?.value) * 100);
+};
+
+export const getPercChange = progressPerc => {
+  return progressPerc - 100;
+};
+
+export const getValueChange = (dataPoint, compDataPoint) => {
+  return dataPoint.value - compDataPoint?.value;
+};

src/multiple_value/ComparisonDataPoint.tsx

@@ -1,8 +1,10 @@
-import React, { PureComponent, useState } from "react";
+import React, {  } from "react";
 import styled from 'styled-components'
 // @ts-ignore
-import {formatType, lighten} from '../functions/common'
+import {lighten} from '../lib/common';
 import SSF from "ssf";
+// @ts-ignore
+import {getProgressPerc, getPercChange, getValueChange} from '../lib/comparison_data_point';
 
 let ComparisonDataPointGroup = styled.div`
   flex: 1;
@@ -102,11 +104,12 @@ export const ComparisonDataPoint: React.FC<{
   config: any,
   compDataPoint: any,
   dataPoint: any,
-  percChange: number,
-  valueChange: number,
-  progressPerc: number,
   handleClick: (i: any, j: any)=>{},
-}> = ({ config, compDataPoint, dataPoint, percChange, valueChange, progressPerc, handleClick }) => {
+}> = ({ config, compDataPoint, dataPoint, handleClick }) => {
+
+  let progressPerc = getProgressPerc(dataPoint, compDataPoint);
+  let percChange = getPercChange(progressPerc);
+  let valueChange = getValueChange(dataPoint, compDataPoint);
 
   function tryFormatting(formatString: string, value: number, defaultString: string) {
     try {
@@ -119,7 +122,6 @@ export const ComparisonDataPoint: React.FC<{
 
   return (
     <ComparisonDataPointGroup>
-
     {config[`comparison_style_${compDataPoint.name}`] !== 'percentage_change' ? null : (
       <ComparisonPercentageChange data-value={percChange} onClick={() => { handleClick(compDataPoint, event) }}>
         {percChange >= 0 ? <UpArrow pos={config[`pos_is_bad_${compDataPoint.name}`]}/> : <DownArrow pos={config[`pos_is_bad_${compDataPoint.name}`]}/>}
@@ -129,7 +131,7 @@ export const ComparisonDataPoint: React.FC<{
     {config[`comparison_style_${compDataPoint.name}`] !== 'value_change' ? null : (
       <ComparisonPercentageChange data-value={valueChange} onClick={() => { handleClick(compDataPoint, event) }}>
         {valueChange >= 0 ? <UpArrow pos={config[`pos_is_bad_${compDataPoint.name}`]}/> : <DownArrow pos={config[`pos_is_bad_${compDataPoint.name}`]}/>}
-        {valueChange.toLocaleString('en-US')}
+        {valueChange?.toLocaleString('en-US')}
       </ComparisonPercentageChange>
     )}
 

src/multiple_value/multiple_value.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { ComparisonDataPoint } from './ComparisonDataPoint';
+import {ComparisonDataPoint} from './ComparisonDataPoint';
 import ReactHtmlParser from 'react-html-parser';
 import DOMPurify from 'dompurify';
 
@@ -115,13 +115,13 @@ class MultipleValue extends React.PureComponent {
   handleClick = (cell, event) => {
     cell.link !== undefined
       ? LookerCharts.Utils.openDrillMenu({
-        links: cell.link,
-        event: event,
-      })
+          links: cell.link,
+          event: event,
+        })
       : LookerCharts.Utils.openDrillMenu({
-        links: [],
-        event: event,
-      });
+          links: [],
+          event: event,
+        });
   };
 
   recalculateSizing = () => {
@@ -143,36 +143,34 @@ class MultipleValue extends React.PureComponent {
     });
   };
 
+  checkData = compDataPoint => {
+    return !compDataPoint | (typeof !compDataPoint === 'undefined');
+  };
+
   render() {
-    const { config, data } = this.props;
+    const {config, data} = this.props;
     let message;
     let display = false;
 
     return (
       <DataPointsWrapper
         layout={this.getLayout()}
         font={config['grouping_font']}
-        style={{ fontSize: `${this.state.fontSize}em` }}
+        style={{fontSize: `${this.state.fontSize}em`}}
       >
         {data.map((dataPoint, index) => {
           const compDataPoint = dataPoint.comparison;
-          let progressPerc;
-          let percChange;
-          let valueChange;
           if (compDataPoint < 0 || compDataPoint > 0) {
             display = false;
-            progressPerc = Math.round(
-              (dataPoint.value / compDataPoint.value) * 100
-            );
-            percChange = progressPerc - 100;
-            valueChange = dataPoint.value - compDataPoint.value;
           } else if (compDataPoint === 0 || compDataPoint === null) {
             display = true;
             message = (
               <a>
-                {'Comparison point can not be zero. Adjust the value to continue.'}
+                {
+                  'Comparison point can not be zero. Adjust the value to continue.'
+                }
               </a>
-            )
+            );
           }
           return (
             <>
@@ -205,14 +203,11 @@ class MultipleValue extends React.PureComponent {
                       : dataPoint.formattedValue}
                   </DataPointValue>
                 </DataPoint>
-                {!compDataPoint ? null : (
+                {this.checkData(compDataPoint) ? null : (
                   <ComparisonDataPoint
                     config={config}
                     compDataPoint={compDataPoint}
                     dataPoint={dataPoint}
-                    percChange={percChange}
-                    valueChange={valueChange}
-                    progressPerc={progressPerc}
                     handleClick={this.handleClick}
                   />
                 )}

src/multiple_value/multiple_value_container.js

@@ -2,9 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import isEqual from 'lodash/isEqual';
 import MultipleValue from './multiple_value';
-import {formatValue} from '../functions/number_date_format';
+import {formatValue} from '../lib/number_date_format';
 import {PLOT_CONFIG} from '../constants/plot_config';
-import {addBaseTagToHeadElement} from '../functions/add_base_element_to_head';
+import {addBaseTagToHeadElement} from '../lib/add_base_element_to_head';
 
 let currentOptions = {};
 let currentConfig = {};

src/tests/ComparisonDataPoint.test.js

@@ -0,0 +1,29 @@
+import {
+  getProgressPerc,
+  getPercChange,
+  getValueChange,
+} from '../lib/comparison_data_point';
+
+const dataPoint = {value: 100};
+const compDataPoint = {value: 20};
+let progressPerc;
+
+describe('getProgressPerc', () => {
+  test('should get correct percentage', () => {
+    expect((progressPerc = getProgressPerc(dataPoint, compDataPoint))).toEqual(
+      '500'
+    );
+  });
+});
+
+describe('getPercChange', () => {
+  test('should get correct percentage', () => {
+    expect(getPercChange(progressPerc)).toEqual('400');
+  });
+});
+
+describe('getValueChange', () => {
+  test('should get correct value', () => {
+    expect(getValueChange(dataPoint, compDataPoint)).toEqual('80');
+  });
+});