Legend addition with component separation and changes in Readme

Author: aarathyKeyvalue

README.md

@@ -7,7 +7,7 @@
 <a href="https://www.npmjs.com/package/react-dot-matrix-chart"><img src="https://badgen.net/npm/v/react-dot-matrix-chart?color=blue" alt="npm version"></a> <a href="https://www.npmjs.com/package/react-dot-matrix-chart" ><img src="https://img.shields.io/npm/dw/react-dot-matrix-chart?label=Downloads" /></a> <a href="https://github.com/KeyValueSoftwareSystems/react-dot-matrix-chart"><img src="https://github.com/KeyValueSoftwareSystems/react-dot-matrix-chart/actions/workflows/deploy.yml/badge.svg" alt="" /></a>
 
 <div align="center">
-<img src="./screenshot.png" alt="" width="416" height="199"/>
+<img src="./screenshot.png" alt="" width="573" height="199"/>
 </div>
 
 
@@ -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,18 +175,24 @@ 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={{
-    Title: () => ({...styles}),
     Container: () => ({...styles}),
-    Dot: () => ({...styles})
+    DotsContainer: () => ({...styles}),
+    Dot: () => ({...styles}),
+    LegendContainer: () => ({...styles}),
+    LegendName: () => ({...styles}),
+    LegendDot: () => ({...styles})
   }}
 />
 
 ```
 
--  `Title` - overrides the chart title style
 -  `Container` - overrides the dot matrix chart container style
--  `Dot` - overrides the style of each dot in the chart
+-  `DotsContainer` - overrides the dot matrix chart dots container style
+-  `Dot` - overrides the style of each dot in the chart
+-  `LegendContainer` - overrides the legend (details) container style
+-  `LegendName` - overrides the legend name style
+-  `LegendDot` - overrides the legend dot style

screenshot.png

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

screenshotPartial.png

@@ -1,75 +1,51 @@
 import React from "react";
-import { v4 } from 'uuid';
 import classes from './styles.module.scss';
-import { DotMatrixPropType, DataPointType } from "./types";
+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,
-  DEFAULT_ROWS
+  DEFAULT_ROWS,
+  DEFAULT_LEGEND_POSITION
 } from "./constants";
-import { getNumberOfDots, getContainerWidth } from './utils/utils';
 const DotMatrix = (props: DotMatrixPropType): JSX.Element => {
   const {
     dataPoints,
     dimensions = {
       rows: DEFAULT_ROWS,
       columns: DEFAULT_COLUMNS
     },
-    styles = {}
+    styles = {},
+    showLegend,
+    legendPosition = DEFAULT_LEGEND_POSITION
   } = props;
 
-  const {
-    rows = DEFAULT_ROWS,
-    columns = DEFAULT_ROWS
-  } = dimensions;
-
   const [data, total, overlappingValues] = useDotMatrix(dataPoints, dimensions);
-  const getStyles = (element: Elements): object => {
-    const getElementStyle = styles[element];
-    if (getElementStyle) {
-      return getElementStyle();
-    }
-    return {};
-  };
-
-
   return (
     <div className={classes.container}>
       <div
-        className={classes.dotsContainer}
+        className={classes.dotsWithLegend}
         style={{
-          width: `${getContainerWidth(columns)}rem`,
-          ...getStyles(Elements.Container)
+          ...getStyles(Elements.Container, styles),
+          ...(getLegendPosition(legendPosition) as React.CSSProperties)
         }}
       >
-        {data?.map((eachPoint: DataPointType, rowIndex: number) => (
-          <React.Fragment key={v4()}>
-            {eachPoint && Array.apply(null, Array(getNumberOfDots(eachPoint, 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 && (
-                  <div
-                    className={classes.eachDot}
-                    style={{
-                      backgroundImage: `linear-gradient(to right, ${data[rowIndex - 1].color} 20%, ${eachPoint?.color} 50%)`,
-                      ...(getStyles(Elements.Dot))
-                    }}
-                  />
-                )) || (
-                  <div
-                    className={classes.eachDot}
-                    style={{
-                      backgroundColor: eachPoint?.color,
-                      ...(getStyles(Elements.Dot))
-                    }}
-                    key={v4()}
-                    id={`each-category-${rowIndex}-${columnIndex}`}
-                  />
-                )}
-              </div>
-            ))}
-          </React.Fragment>
-        ))}
+        <Chart
+          styles={styles}
+          dimensions={dimensions}
+          data={data}
+          total={total}
+          overlappingValues={overlappingValues}
+        />
+        {showLegend && (
+          <Legend
+            styles={styles}
+            data={data}
+          />
+        )}
       </div>
     </div>
   )

src/lib/dot-matrix/Chart.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { v4 } from 'uuid';
+import { getStyles } from './utils/utils';
+import { DataPointType, LegendProps } from "./types";
+import {
+  Elements
+} from './constants';
+import classes from './styles.module.scss';
+
+const Legend = (props: LegendProps): JSX.Element => {
+  const {
+    styles,
+    data
+  } = props;
+  return (
+    <div
+      className={classes.legends}
+      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, styles))
+            }}
+          />
+          <div
+            className={classes.name}
+            style={{ ...getStyles(Elements.LegendName, styles)}}
+          >
+            {point.name}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+};
+
+export default Legend;

src/lib/dot-matrix/DotMatrix.tsx

@@ -23,11 +23,17 @@ export const COLOR_PALATTE = [
 
 export enum Elements {
   Container = "Container",
-  Dot = "Dot"
+  DotsContainer = "DotsContainer",
+  Dot = "Dot",
+  LegendContainer = "LegendContainer",
+  LegendDot = "LegendDot",
+  LegendName = "LegendName"
 }
 
 export const DEFAULT_ROWS = 5;
 
 export const DEFAULT_COLUMNS = 12;
 
+export const DEFAULT_LEGEND_POSITION = 'right';
+
 export const CONTAINER_WIDTH_CONVERSION_FACTOR = 2.6;