code refactoring and readme file updation

Author: aarathyKeyvalue

README.md

@@ -19,7 +19,7 @@ Try tweaking a dot matrix using this codesandbox link <a href="https://codesandb
 
 The easiest way to use react-dot-matrix-chart is to install it from npm and build it into your app with Webpack.
 
-```
+```bash
 npm install react-dot-matrix-chart
 ```
 
@@ -33,7 +33,7 @@ You’ll need to install React separately since it isn't included in the package
 
 React Dot Matrix Chart can run in a very basic mode by just providing the `dataPoints` like given below:
 
-```
+```jsx
 
 import DotMatrix from 'react-dot-matrix-chart';
 
@@ -53,9 +53,8 @@ The datapoints is an array of objects with the following keys:
 
 An example for dataPoints array is shown below:
 
-```
-
-dataPointsArray = [
+```jsx
+const dataPointsArray = [
   {
     name: 'Category 1',
     count: 10,
@@ -77,32 +76,39 @@ dataPointsArray = [
 
 You can use `title` prop to add a Title value to the dot matrix chart
 
-```
-
+```jsx
 <DotMatrix
   dataPoints={dataPointsArray}
   title="Dot Matrix"
 />
-
 ```
 
 You can specify the number of rows or columns to be present in the chart as well using the dimensions prop.
 
-```
+```jsx
 <DotMatrix
   dataPoints={dataPointsArray}
   dimensions={
     rows: 5,
     columns: 10
   }
 />
-
 ```
 
 If the count given in the dataPoints array results in a partial percentage (decimal value), a gradient dot will be displayed as shown below
+<div  align="center">
+<img  src="./screenshotPartial.png"  alt=""  width="208"  height="199"/>
+</div>
 
-  
+We can also control the display of the legend consisting of the details regarding the colour distribution using the props 'showLegend' and 'legendPosition' as follows.
 
+```jsx
+<DotMatrix
+  dataPoints={dataPointsArray}
+  showLegend={true}
+  legendPosition="top"
+/>
+```
 ## Props
 
 
@@ -146,6 +152,20 @@ Props that can be passed to the component are listed below:
       </td>
       <td><code>undefined</code></td>
     </tr>
+    <tr>
+      <td><code><b>showLegend?:</b> boolean</code></td>
+      <td>
+        To specify whether to show the legend or not
+      </td>
+      <td><code>false</code></td>
+    </tr>
+    <tr>
+      <td><code><b>legendPosition?:</b> string</code></td>
+      <td>
+        To specify the position of the legend. The values that can be passes using this prop are 'left', 'right', 'top' and 'bottom'
+      </td>
+      <td><code>right</code></td>
+    </tr>
   </tbody>
 </table>
 
@@ -155,7 +175,7 @@ Props that can be passed to the component are listed below:
 All the default styles provided by this package are overridable using the `style` prop.
 the below code shows all the overridable styles:
 
-```
+```jsx
 <DotMatrix
   dataPoints={dataPointsArray}
   styles={{

screenshotPartial.png

@@ -1,6 +1,10 @@
 import React from 'react';
 import { v4 } from 'uuid';
-import { getNumberOfDots, getContainerWidth } from './utils/utils';
+import {
+  getNumberOfDots,
+  getContainerWidth,
+  getStyles
+} from './utils/utils';
 import {
   Elements,
   DEFAULT_COLUMNS,
@@ -12,7 +16,7 @@ import classes from './styles.module.scss';
 const Chart = (props: ChartProps) : JSX.Element => {
   const {
     dimensions = {},
-    getStyles,
+    styles,
     data,
     overlappingValues,
     total
@@ -21,32 +25,36 @@ const Chart = (props: ChartProps) : JSX.Element => {
     rows = DEFAULT_ROWS,
     columns = DEFAULT_COLUMNS
   } = dimensions;
+
+  const hasOverlapping = (values: number[], indexRow: number, indexColumn: number): boolean => (
+    indexColumn === 0 && indexRow > 0 && values[indexRow - 1] < 1 && values[indexRow - 1] !== 0
+  );
   return (
     <div
       className={classes.dotsContainer}
       style={{
         width: `${getContainerWidth(columns)}rem`,
-        ...getStyles(Elements.DotsContainer)
+        ...getStyles(Elements.DotsContainer, styles)
       }}
     >
-      {data?.map((eachPoint: DataPointType, rowIndex: number) => (
+      {data?.map((dataItem: DataPointType, rowIndex: number) => (
         <React.Fragment key={v4()}>
-          {eachPoint && Array.apply(null, Array(getNumberOfDots(eachPoint, rows, columns, total))).map((item: null, columnIndex: number) => (
+          {dataItem && Array.apply(null, Array(getNumberOfDots(dataItem, rows, columns, total))).map((item: null, columnIndex: number) => (
             <div id="dot-matrix-dots" key={v4()}>
-              {(columnIndex === 0 && rowIndex > 0 && overlappingValues[rowIndex - 1] < 1 && overlappingValues[rowIndex - 1] !== 0 && (
+              {(hasOverlapping(overlappingValues, rowIndex, columnIndex) && (
                 <div
                   className={classes.eachDot}
                   style={{
-                    backgroundImage: `linear-gradient(to right, ${data[rowIndex - 1].color} 20%, ${eachPoint?.color} 50%)`,
-                    ...(getStyles(Elements.Dot))
+                    backgroundImage: `linear-gradient(to right, ${data[rowIndex - 1].color} 20%, ${dataItem?.color} 50%)`,
+                    ...(getStyles(Elements.Dot, styles))
                   }}
                 />
               )) || (
                 <div
                   className={classes.eachDot}
                   style={{
-                    backgroundColor: eachPoint?.color,
-                    ...(getStyles(Elements.Dot))
+                    backgroundColor: dataItem?.color,
+                    ...(getStyles(Elements.Dot, styles))
                   }}
                   key={v4()}
                   id={`each-category-${rowIndex}-${columnIndex}`}

src/lib/dot-matrix/Chart.tsx

@@ -4,6 +4,7 @@ import { DotMatrixPropType } from "./types";
 import { useDotMatrix } from './custom-hooks/useDotMatrix';
 import Chart from './Chart';
 import Legend from './Legend';
+import { getLegendPosition, getStyles } from "./utils/utils";
 import {
   Elements,
   DEFAULT_COLUMNS,
@@ -23,58 +24,25 @@ const DotMatrix = (props: DotMatrixPropType): JSX.Element => {
   } = props;
 
   const [data, total, overlappingValues] = useDotMatrix(dataPoints, dimensions);
-  const getStyles = (element: Elements): object => {
-    const getElementStyle = styles[element];
-    if (getElementStyle) {
-      return getElementStyle();
-    }
-    return {};
-  };
-
-
-  const getLegendPosition = (): {flexDirection: string, alignItems: string} => {
-    let flexDirection = '';
-    let alignItems = 'end';
-    switch (legendPosition) {
-    case 'left':
-      flexDirection = 'row-reverse';
-      break;
-    case 'right':
-      flexDirection = 'row';
-      break;
-    case 'top':
-      flexDirection = 'column-reverse';
-      alignItems = 'center';
-      break;
-    case 'bottom':
-      flexDirection = 'column';
-      alignItems = 'center';
-      break;
-    default:
-      flexDirection = 'row'
-      break;
-    }
-    return { flexDirection, alignItems};
-  }
   return (
     <div className={classes.container}>
       <div
         className={classes.dotsWithLegend}
         style={{
-          ...getStyles(Elements.Container),
-          ...(getLegendPosition() as React.CSSProperties)
+          ...getStyles(Elements.Container, styles),
+          ...(getLegendPosition(legendPosition) as React.CSSProperties)
         }}
       >
         <Chart
-          getStyles={getStyles}
+          styles={styles}
           dimensions={dimensions}
           data={data}
           total={total}
           overlappingValues={overlappingValues}
         />
         {showLegend && (
           <Legend
-            getStyles={getStyles}
+            styles={styles}
             data={data}
           />
         )}

src/lib/dot-matrix/DotMatrix.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { v4 } from 'uuid';
+import { getStyles } from './utils/utils';
 import { DataPointType, LegendProps } from "./types";
 import {
   Elements
@@ -8,26 +9,26 @@ import classes from './styles.module.scss';
 
 const Legend = (props: LegendProps): JSX.Element => {
   const {
-    getStyles,
+    styles,
     data
   } = props;
   return (
     <div
       className={classes.legends}
-      style={{ ...getStyles(Elements.LegendContainer)}}
+      style={{ ...getStyles(Elements.LegendContainer, styles)}}
     >
       {data?.map((point: DataPointType) => (
         <div className={classes.legend} key={v4()}>
           <div
             className={classes.legendDot}
             style={{
               backgroundColor: point?.color,
-              ...(getStyles(Elements.LegendDot))
+              ...(getStyles(Elements.LegendDot, styles))
             }}
           />
           <div
             className={classes.name}
-            style={{ ...getStyles(Elements.LegendName)}}
+            style={{ ...getStyles(Elements.LegendName, styles)}}
           >
             {point.name}
           </div>

src/lib/dot-matrix/Legend.tsx

@@ -5,7 +5,7 @@ export interface DataPointType {
 }
 export interface ChartProps {
   dimensions?: DimensionProp,
-  getStyles: (string) => {},
+  styles: StyleProp,
   data: DataPointType[],
   overlappingValues: number[],
   total: number
@@ -16,22 +16,23 @@ export type DimensionProp = {
   columns?: number
 }
 
+export type StyleProp = {
+  Dot?: () => {},
+  DotsContainer?: () => {},
+  Container?: () => {},
+  LegendContainer?: () => {},
+  LegendName?: () => {},
+  LegendDot?: () => {}
+}
 export interface LegendProps {
-  getStyles: (string) => {},
+  styles: StyleProp,
   data: DataPointType[]
 }
 export interface DotMatrixPropType {
   dataPoints: DataPointType[],
   dimensions?: DimensionProp,
   showLegend?: boolean,
   legendPosition?: 'left' | 'right' | 'top' | 'bottom'
-  styles?: {
-    Dot?: () => {},
-    DotsContainer?: () => {},
-    Container?: () => {},
-    LegendContainer?: () => {},
-    LegendName?: () => {},
-    LegendDot?: () => {}
-  }
+  styles?: StyleProp
 }
 

src/lib/dot-matrix/types.d.ts

@@ -1,5 +1,5 @@
-import { DataPointType } from "../types";
-import { CONTAINER_WIDTH_CONVERSION_FACTOR } from '../constants';
+import { DataPointType, StyleProp } from "../types";
+import { CONTAINER_WIDTH_CONVERSION_FACTOR, Elements } from '../constants';
 export const getNumberOfDots = (point: DataPointType, rows: number, columns: number, total: number): number =>  {
   const percentage = point.count / total;
   return Math.floor(percentage * rows * columns);
@@ -11,4 +11,29 @@ export const isColorPresent = (dataPoints: DataPointType[], color: string, dataV
   const findColor = dataPoints?.find((e) => e.color === color);
   const colorInLocal = dataValues?.find((e) => e.color === color);
   return Boolean(findColor) || Boolean(colorInLocal);
-}
+}
+
+export const getLegendPosition = (legendPosition: string): {flexDirection: string, alignItems: string} => {
+  const flexDirection = {
+    left: 'row-reverse',
+    right: 'row',
+    top: 'column-reverse',
+    bottom: 'column'
+  };
+
+  const alignment = {
+    left: 'end',
+    right: 'end',
+    top: 'center',
+    bottom: 'center'
+  }
+  return { flexDirection: flexDirection[legendPosition], alignItems: alignment[legendPosition]};
+}
+
+export const getStyles = (element: Elements, styles: StyleProp): object => {
+  const getElementStyle = styles[element];
+  if (getElementStyle) {
+    return getElementStyle();
+  }
+  return {};
+};