Fix: Resolve Interval Edge Case, Console Errors & Alignment Issues (#19)

* Handled edge case of interval calculation and fixed invalid prop console error

* x-axis labels aligned centrally

* resolved type issue related to custom style

* implemented a better solution to align x-axis labels centrally

* updated storybook data

* center align x-axis markings

* Allow value box to take height on context instead of fixed height

* updated testcase

Author: manacy-keyvalue

src/data/index.ts

@@ -134,7 +134,7 @@ export const data2 = [
 
 export const data3 = [
   {
-    x: 1672617600000,
+    x: 1671117600000,
     y: 150
   },
   {

src/scatter-graph/DefaultValueBox.tsx

@@ -5,7 +5,7 @@ import { DefaultValueBoxPropTypes } from '../types/types';
 import './styles.css';
 
 const DefaultValueBox: FC<DefaultValueBoxPropTypes> = ({ x, y }): ReactElement => (
-  <div className='valueBox' data-testId='value-box'>
+  <div className='valueBox' data-testid='value-box'>
     x: {x}
     <br />
     y: {y}

src/scatter-graph/ScatterGraph.tsx

@@ -116,11 +116,11 @@ const ScatterGraph: FC<ScatterGraphPropTypes> = ({
               className='xPoints'
               style={{
                 top: graphHeight + 5,
-                left: index * (graphWidth / (xPoints.length - 1)) - 10.5,
+                left: index * (graphWidth / (xPoints.length - 1)),
                 ...getCallableStyles(styles, CallableStyleElements.XLabel, xLabel)
               }}
             >
-              {renderXLabel ? renderXLabel(xLabel) : xLabel}
+              <div className='xPointsLabel'>{renderXLabel ? renderXLabel(xLabel) : xLabel}</div>
             </div>
           ))}
         </div>

src/scatter-graph/constants.ts

@@ -6,3 +6,5 @@ export enum CallableStyleElements {
 export enum GenericStyleElements {
   Root = 'Root'
 }
+
+export const DEFAULT_INTERVAL = 1;

src/scatter-graph/styles.css

@@ -20,10 +20,14 @@
   display: flex;
 }
 
+.xPointsLabel {
+  transform: translateX(-50%);
+}
+
 .xPoints {
   position: absolute;
   line-height: 16px;
-  text-align: right;
+  text-align: center;
 }
 
 .xPoints::before {
@@ -34,11 +38,11 @@
   background-color: #9e9e9e;
   position: relative;
   top: -8px;
-  left: 10px;
+  left: -0.5px;
 }
 
 .yPointsContainer {
-  padding-right: 6px;
+  padding: 0 6px 0 8px;
 }
 
 .yPoints {
@@ -60,17 +64,15 @@
 }
 
 .valueBox {
-  height: 40px;
   border: 1px solid gray;
   border-radius: 5px;
   background-color: white;
   box-shadow: 3px 3px 4px 0px rgba(189, 189, 189, 1);
   transition: all 0.5s ease;
-  padding: 4px 10px;
+  padding: 5px 10px;
 }
 
 .valueBoxTest {
-  height: 40px;
   border: 1px solid gray;
   border-radius: 5px;
   background-color: white;

src/scatter-graph/utils.ts

@@ -1,10 +1,16 @@
 import { AxisRanges, AxisRangesArguments, CustomStyles } from '../types/types';
-import { CallableStyleElements } from './constants';
+import { CallableStyleElements, DEFAULT_INTERVAL } from './constants';
 
 // This function takes in a range of values and calculates a suitable interval to
 // divide that range into smaller segments for display purposes.
 const getInterval = (min: number, max: number): number => {
   const range = max - min;
+
+  /* Important condition, Do not remove without proper testing!
+  In the below algorithm, Math.log10(range) returns (-Infinity), when range = 0, causing bugs.
+  This condition bypasses the above flaw */
+  if (range === 0) return DEFAULT_INTERVAL;
+
   // This formula calculates an interval that is a power of 10,
   //  such as 1, 10, 100, etc., based on the magnitude of the range.
   let interval = Math.pow(10, Math.floor(Math.log10(range)));
@@ -51,7 +57,7 @@ export const getAxisRanges = (testData: AxisRangesArguments): AxisRanges => {
 
 // function to extract the style applicable to a given element when a function is exposed to user
 export const getCallableStyles = (
-  allStyles: CustomStyles,
+  allStyles: CustomStyles | object,
   element: CallableStyleElements,
   id: number | string
 ): object => {

src/tests/ScatterGraph.test.tsx

@@ -9,7 +9,7 @@ import { GraphPoint } from '../types/types';
 const getById = queryByAttribute.bind(null, 'id');
 
 test('Scatter graph Component - simple', async () => {
-  const dom = render(<ReactScatterGraph data={data} graphHeight={500} />);
+  const dom = render(<ReactScatterGraph data={[{ x: 1, y: 1 }]} graphHeight={500} />);
   const label = await getById(dom.container, 'graph-svg-wrapper');
   expect(label).not.toBeNull();
 });

src/types/types.d.ts

@@ -18,16 +18,12 @@ type StyleObjectType = React.CSSProperties;
 
 type StyleFunction = (value: number | string) => StyleObjectType;
 
-type GenericStyles = {
-  [value in GenericStyleElements]?: StyleObjectType;
+export type CustomStyles = {
+  [GenericStyleElements.Root]: StyleObjectType;
+  [CallableStyleElements.XLabel]: StyleFunction;
+  [CallableStyleElements.YLabel]: StyleFunction;
 };
 
-export type CallableStyles = {
-  [value in CallableStyleElements]?: StyleFunction;
-};
-
-export type CustomStyles = CallableStyles & GenericStyles;
-
 export type ScatterGraphPropTypes = {
   data: Array<GraphPoint>;
   graphHeight: number;

tsconfig.json

@@ -7,7 +7,6 @@
     "importHelpers": true,
     "rootDir": "src",
     "outDir": "build",
-    "strict": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,