Merge branch 'main' of github.com:KeyValueSoftwareSystems/react-dot-matrix-chart-

Author: aarathyKeyvalue

.eslintrc

@@ -10,8 +10,7 @@
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
-    },
-    "project": "./tsconfig.json"
+    }
   },
   "plugins": [
     "@typescript-eslint",
@@ -31,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

jest.config.js

@@ -1,15 +1,16 @@
+/* eslint-disable no-undef */
 module.exports = {
-    // Other configuration above...
+  // Other configuration above...
 
-    // Add the next three options if using TypeScript
-    moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
-    preset: "ts-jest",
-    roots: ["<rootDir>/src"],
-    transform: {
-        "^.+\\.[t|j]sx?$": "ts-jest",
-        "^.+\\.svg?$": "<rootDir>/transform.js",
-        "^.+\\.scss?$": "<rootDir>/transform.js"
-    },
-    "testEnvironment": "jsdom",
-    testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
+  // Add the next three options if using TypeScript
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
+  preset: "ts-jest",
+  roots: ["<rootDir>/src"],
+  transform: {
+    "^.+\\.[t|j]sx?$": "ts-jest",
+    "^.+\\.svg?$": "<rootDir>/transform.js",
+    "^.+\\.scss?$": "<rootDir>/transform.js"
+  },
+  "testEnvironment": "jsdom",
+  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$"
 };

package-lock.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-dot-matrix-chart",
-  "version": "0.2.1",
+  "name": "@keyvaluesystems/react-dot-matrix-chart",
+  "version": "0.2.3",
   "description": "A Dot Matrix Chart component",
   "main": "build/index.js",
   "source": "src/lib/index.tsx",

package.json

@@ -1,16 +1,17 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { v4 } from 'uuid';
 import {
   getNumberOfDots,
-  getContainerWidth,
   getStyles,
   hasOverlapping
 } from './utils/utils';
 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';
 
@@ -20,18 +21,22 @@ const Chart = (props: ChartProps) : JSX.Element => {
     styles,
     data,
     overlappingValues,
-    total
+    total,
+    width
   } = props;
   const {
     rows = DEFAULT_ROWS,
     columns = DEFAULT_COLUMNS
   } = dimensions;
 
+  const dotWidth = useMemo(
+    () => (width ? width / columns - DEFAULT_ROW_GAP : DEFAULT_ROW_WIDTH),
+    [width]
+  );
   return (
     <div
       className={classes.dotsContainer}
       style={{
-        width: `${getContainerWidth(columns)}rem`,
         ...getStyles(Elements.DotsContainer, styles)
       }}
     >
@@ -43,16 +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%)`,
-                    ...(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,
-                    ...(getStyles(Elements.Dot, styles))
+                    width: `${dotWidth}px`,
+                    height: `${dotWidth}px`,
+                    ...getStyles(Elements.Dot, styles)
                   }}
                   key={v4()}
                   id={`each-category-${rowIndex}-${columnIndex}`}
@@ -63,6 +74,6 @@ const Chart = (props: ChartProps) : JSX.Element => {
         </React.Fragment>
       ))}
     </div>
-  )
+  );
 };
-export default Chart;
+export default Chart;

src/lib/dot-matrix/Chart.tsx

@@ -1,16 +1,17 @@
-import React 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 } 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,11 +20,16 @@ const DotMatrix = (props: DotMatrixPropType): JSX.Element => {
       columns: DEFAULT_COLUMNS
     },
     styles = {},
-    showLegend,
+    showLegend = false,
     legendPosition = DEFAULT_LEGEND_POSITION
   } = props;
 
+  const width = useChartContainerWidth('dots-container', [
+    showLegend,
+    legendPosition
+  ]);
   const [data, total, overlappingValues] = useDotMatrix(dataPoints, dimensions);
+
   return (
     <div className={classes.container}>
       <div
@@ -33,22 +39,24 @@ const DotMatrix = (props: DotMatrixPropType): JSX.Element => {
           ...(getLegendPosition(legendPosition) as React.CSSProperties)
         }}
       >
-        <Chart
-          styles={styles}
-          dimensions={dimensions}
-          data={data}
-          total={total}
-          overlappingValues={overlappingValues}
-        />
-        {showLegend && (
-          <Legend
+        <div className={classes.chartContainer} id="dots-container">
+          <Chart
             styles={styles}
+            dimensions={dimensions}
             data={data}
+            total={total}
+            width={width}
+            overlappingValues={overlappingValues}
           />
+        </div>
+        {showLegend && (
+          <div>
+            <Legend styles={styles} data={data} />
+          </div>
         )}
       </div>
     </div>
-  )
+  );
 };
 
-export default DotMatrix;
+export default DotMatrix;

src/lib/dot-matrix/DotMatrix.tsx

@@ -1,24 +1,13 @@
 export const COLOR_PALATTE = [
-  '#B8255F',
-  '#96C3EB',
-  '#DB4035',
-  '#4073FF',
-  '#FF9933',
-  '#884DFF',
-  '#FAD000',
-  '#AF38EB',
-  '#AFB83B',
-  '#EB96EB',
-  '#7ECC49',
-  '#E05194',
-  '#299438',
-  '#FF8D85',
-  '#6ACCBC',
-  '#808080',
-  '#158FAD',
-  '#B8B8B8',
-  '#14AAF5',
-  '#CCAC93'
+  '#fd7f6f',
+  '#7eb0d5',
+  '#b2e061',
+  '#bd7ebe',
+  '#ffb55a',
+  '#ffee65',
+  '#beb9db',
+  '#fdcce5',
+  '#8bd3c7'
 ];
 
 export enum Elements {
@@ -36,4 +25,6 @@ export const DEFAULT_COLUMNS = 12;
 
 export const DEFAULT_LEGEND_POSITION = 'right';
 
-export const CONTAINER_WIDTH_CONVERSION_FACTOR = 2.6;
+export const DEFAULT_ROW_WIDTH = 35;
+
+export const DEFAULT_ROW_GAP = 6;

src/lib/dot-matrix/constants.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/custom-hooks/useChartContainerWidth.ts

@@ -1,18 +1,17 @@
 .container {
-  margin: 10px;
-  width: fit-content;
+  padding: 10px;
+  width: inherit;
   .dotsWithLegend {
     width: 100%;
     display: flex;
-    gap: 50px;
-    justify-content: space-between;
+    gap: 20px;
     align-items: end;
   }
   .dotsContainer {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
-    width: 490px;
+    width: 100%;
     .eachDot {
       border-radius: 50%;
       width: 2.2rem;
@@ -39,5 +38,6 @@
     gap: 5px;
     border: 1px solid gainsboro;
     padding: 7px;
+    width: max-content;
   }
 }

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

@@ -8,7 +8,8 @@ export interface ChartProps {
   styles: StyleProp,
   data: DataPointType[],
   overlappingValues: number[],
-  total: number
+  total: number,
+  width: number
 }
 
 export type DimensionProp = {