diff --git a/src/functions/add_base_element_to_head.js b/src/lib/add_base_element_to_head.js similarity index 100% rename from src/functions/add_base_element_to_head.js rename to src/lib/add_base_element_to_head.js diff --git a/src/functions/common.js b/src/lib/common.js similarity index 100% rename from src/functions/common.js rename to src/lib/common.js diff --git a/src/lib/comparison_data_point.js b/src/lib/comparison_data_point.js new file mode 100644 index 0000000..5d1c728 --- /dev/null +++ b/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; +}; diff --git a/src/functions/number_date_format.js b/src/lib/number_date_format.js similarity index 100% rename from src/functions/number_date_format.js rename to src/lib/number_date_format.js diff --git a/src/multiple_value/ComparisonDataPoint.tsx b/src/multiple_value/ComparisonDataPoint.tsx index 26c836d..99f1937 100644 --- a/src/multiple_value/ComparisonDataPoint.tsx +++ b/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 ( - {config[`comparison_style_${compDataPoint.name}`] !== 'percentage_change' ? null : ( { handleClick(compDataPoint, event) }}> {percChange >= 0 ? : } @@ -129,7 +131,7 @@ export const ComparisonDataPoint: React.FC<{ {config[`comparison_style_${compDataPoint.name}`] !== 'value_change' ? null : ( { handleClick(compDataPoint, event) }}> {valueChange >= 0 ? : } - {valueChange.toLocaleString('en-US')} + {valueChange?.toLocaleString('en-US')} )} diff --git a/src/multiple_value/multiple_value.js b/src/multiple_value/multiple_value.js index 2556f4a..398ffff 100644 --- a/src/multiple_value/multiple_value.js +++ b/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,8 +143,12 @@ 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; @@ -152,27 +156,21 @@ class MultipleValue extends React.PureComponent { {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 = ( - {'Comparison point can not be zero. Adjust the value to continue.'} + { + 'Comparison point can not be zero. Adjust the value to continue.' + } - ) + ); } return ( <> @@ -205,14 +203,11 @@ class MultipleValue extends React.PureComponent { : dataPoint.formattedValue} - {!compDataPoint ? null : ( + {this.checkData(compDataPoint) ? null : ( )} diff --git a/src/multiple_value/multiple_value_container.js b/src/multiple_value/multiple_value_container.js index b4aa4e7..25ed6d2 100755 --- a/src/multiple_value/multiple_value_container.js +++ b/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 = {}; diff --git a/src/tests/ComparisonDataPoint.test.js b/src/tests/ComparisonDataPoint.test.js new file mode 100644 index 0000000..24f2e33 --- /dev/null +++ b/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'); + }); +});