Responsive design - git comments

Author: aarathyKeyvalue

.eslintrc

@@ -30,7 +30,9 @@
     "max-len":["warn", 150],
     "space-before-blocks":"error",
     "prefer-spread": ["off"],
-    "react-hooks/exhaustive-deps": "off"
+    "react-hooks/exhaustive-deps": "off",
+    "arrow-parens": "error",
+    "arrow-spacing": "error"
   },
   "settings": {
     "react": {

.github/workflows/deploy.yml

@@ -24,6 +24,7 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: 16.x
+          scope: '@keyvaluesystems'
 
       - name: Install dependencies
         run: npm install
@@ -81,11 +82,7 @@ jobs:
         run: npm run build
 
       - name: Publish package
-        uses: JS-DevTools/npm-publish@v1
-        with:
-          access: 'public'
-          check-version: true
-          token: ${{ secrets.NPM_AUTH_TOKEN }}
+        run: npm publish --access public --//registry.npmjs.org/:_authToken=${{ secrets.NPM_AUTH_TOKEN }}
         if: success()
 
       - name: Revert package.json and package-lock.json

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-dot-matrix-chart",
+  "name": "@keyvaluesystems/react-dot-matrix-chart",
   "version": "0.2.2",
   "description": "A Dot Matrix Chart component",
   "main": "build/index.js",

src/lib/dot-matrix/Chart.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { v4 } from 'uuid';
 import {
   getNumberOfDots,
@@ -8,8 +8,10 @@ import {
 import {
   Elements,
   DEFAULT_COLUMNS,
-  DEFAULT_ROWS
-} from "./constants";
+  DEFAULT_ROWS,
+  DEFAULT_ROW_WIDTH,
+  DEFAULT_ROW_GAP
+} from './constants';
 import { ChartProps, DataPointType } from './types';
 import classes from './styles.module.scss';
 
@@ -27,13 +29,10 @@ const Chart = (props: ChartProps) : JSX.Element => {
     columns = DEFAULT_COLUMNS
   } = dimensions;
 
-  const getDotWidth = (): number => {
-    let dotWidth = 35;
-    if (width) {
-      dotWidth = width / columns - 19;
-    }
-    return dotWidth;
-  }
+  const dotWidth = useMemo(
+    () => (width ? width / columns - DEFAULT_ROW_GAP : DEFAULT_ROW_WIDTH),
+    [width]
+  );
   return (
     <div
       className={classes.dotsContainer}
@@ -49,20 +48,22 @@ const Chart = (props: ChartProps) : JSX.Element => {
                 <div
                   className={classes.eachDot}
                   style={{
-                    backgroundImage: `linear-gradient(to right, ${data[rowIndex - 1].color} 20%, ${dataItem?.color} 50%)`,
-                    width: `${getDotWidth()}px`,
-                    height: `${getDotWidth()}px`,
-                    ...(getStyles(Elements.Dot, styles))
+                    backgroundImage: `linear-gradient(to right, ${
+                      data[rowIndex - 1].color
+                    } 20%, ${dataItem?.color} 50%)`,
+                    width: `${dotWidth}px`,
+                    height: `${dotWidth}px`,
+                    ...getStyles(Elements.Dot, styles)
                   }}
                 />
               )) || (
                 <div
                   className={classes.eachDot}
                   style={{
                     backgroundColor: dataItem?.color,
-                    width: `${getDotWidth()}px`,
-                    height: `${getDotWidth()}px`,
-                    ...(getStyles(Elements.Dot, styles))
+                    width: `${dotWidth}px`,
+                    height: `${dotWidth}px`,
+                    ...getStyles(Elements.Dot, styles)
                   }}
                   key={v4()}
                   id={`each-category-${rowIndex}-${columnIndex}`}
@@ -73,6 +74,6 @@ const Chart = (props: ChartProps) : JSX.Element => {
         </React.Fragment>
       ))}
     </div>
-  )
+  );
 };
-export default Chart;
+export default Chart;

src/lib/dot-matrix/DotMatrix.tsx

@@ -1,16 +1,17 @@
-import React, { useEffect, useState } from "react";
+import React from 'react';
 import classes from './styles.module.scss';
-import { DotMatrixPropType } from "./types";
+import { DotMatrixPropType } from './types';
 import { useDotMatrix } from './custom-hooks/useDotMatrix';
+import useChartContainerWidth from './custom-hooks/useChartContainerWidth';
 import Chart from './Chart';
 import Legend from './Legend';
-import { getLegendPosition, getStyles, findContainerWidth } from "./utils/utils";
+import { getLegendPosition, getStyles } from './utils/utils';
 import {
   Elements,
   DEFAULT_COLUMNS,
   DEFAULT_ROWS,
   DEFAULT_LEGEND_POSITION
-} from "./constants";
+} from './constants';
 const DotMatrix = (props: DotMatrixPropType): JSX.Element => {
   const {
     dataPoints,
@@ -19,38 +20,26 @@ const DotMatrix = (props: DotMatrixPropType): JSX.Element => {
       columns: DEFAULT_COLUMNS
     },
     styles = {},
-    showLegend,
+    showLegend = false,
     legendPosition = DEFAULT_LEGEND_POSITION
   } = props;
 
-  const [width, setWidth] = useState<number>(0);
+  const width = useChartContainerWidth('dots-container', [
+    showLegend,
+    legendPosition
+  ]);
   const [data, total, overlappingValues] = useDotMatrix(dataPoints, dimensions);
 
-  useEffect(() => {
-    findChartContainerWidth();
-  }, []);
-  useEffect(() => {
-    findChartContainerWidth();
-  }, [showLegend, legendPosition]);
-  const findChartContainerWidth = (): void => {
-    const widthValue = findContainerWidth('dots-container');
-    if (widthValue) setWidth(widthValue);
-  }
-  window.onresize = (): void => {
-    findChartContainerWidth();
-  };
   return (
-    <div
-      className={classes.container}
-    >
+    <div className={classes.container}>
       <div
         className={classes.dotsWithLegend}
         style={{
           ...getStyles(Elements.Container, styles),
           ...(getLegendPosition(legendPosition) as React.CSSProperties)
         }}
       >
-        <div id="dots-container">
+        <div className={classes.chartContainer} id="dots-container">
           <Chart
             styles={styles}
             dimensions={dimensions}
@@ -62,15 +51,12 @@ const DotMatrix = (props: DotMatrixPropType): JSX.Element => {
         </div>
         {showLegend && (
           <div>
-            <Legend
-              styles={styles}
-              data={data}
-            />
+            <Legend styles={styles} data={data} />
           </div>
         )}
       </div>
     </div>
-  )
+  );
 };
 
-export default DotMatrix;
+export default DotMatrix;

src/lib/dot-matrix/constants.ts

@@ -24,3 +24,7 @@ export const DEFAULT_ROWS = 5;
 export const DEFAULT_COLUMNS = 12;
 
 export const DEFAULT_LEGEND_POSITION = 'right';
+
+export const DEFAULT_ROW_WIDTH = 35;
+
+export const DEFAULT_ROW_GAP = 6;

src/lib/dot-matrix/custom-hooks/useChartContainerWidth.ts

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import { findContainerWidth } from '../utils/utils';
+
+const useChartContainerWidth = (
+  id: string,
+  dependencyArray: Array<boolean | string>
+): number => {
+  const [width, setWidth] = useState<number>(0);
+
+  useEffect(() => {
+    updateContainerWidth();
+  }, []);
+
+  useEffect(() => {
+    updateContainerWidth();
+  }, [...dependencyArray]);
+
+  window.onresize = (): void => {
+    updateContainerWidth();
+  };
+
+  const updateContainerWidth = (): void => {
+    const widthValue = findContainerWidth(id);
+    if (widthValue) setWidth(widthValue);
+  };
+  return width;
+};
+
+export default useChartContainerWidth;

src/lib/dot-matrix/styles.module.scss

@@ -11,7 +11,7 @@
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
-    width: calc(100% - 100px);
+    width: 100%;
     .eachDot {
       border-radius: 50%;
       width: 2.2rem;

transform.js

@@ -1,11 +1,13 @@
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
 module.exports = {
-    process() {
-      return {
-        code: `module.exports = {};`,
-      };
-    },
-    getCacheKey() {
-      // The output is always the same.
-      return "transform";
-    },
-  };
+  process () {
+    return {
+      code: `module.exports = {};`
+    };
+  },
+  getCacheKey () {
+    // The output is always the same.
+    return 'transform';
+  }
+};