Responsive design - chart

Author: aarathyKeyvalue

.eslintrc

@@ -10,8 +10,7 @@
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
-    },
-    "project": "./tsconfig.json"
+    }
   },
   "plugins": [
     "@typescript-eslint",

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?$"
 };

src/lib/dot-matrix/Chart.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { v4 } from 'uuid';
 import {
   getNumberOfDots,
-  getContainerWidth,
   getStyles,
   hasOverlapping
 } from './utils/utils';
@@ -20,18 +19,25 @@ const Chart = (props: ChartProps) : JSX.Element => {
     styles,
     data,
     overlappingValues,
-    total
+    total,
+    width
   } = props;
   const {
     rows = DEFAULT_ROWS,
     columns = DEFAULT_COLUMNS
   } = dimensions;
 
+  const getDotWidth = (): number => {
+    let dotWidth = 35;
+    if (width) {
+      dotWidth = width / columns - 19;
+    }
+    return dotWidth;
+  }
   return (
     <div
       className={classes.dotsContainer}
       style={{
-        width: `${getContainerWidth(columns)}rem`,
         ...getStyles(Elements.DotsContainer, styles)
       }}
     >
@@ -44,6 +50,8 @@ const Chart = (props: ChartProps) : JSX.Element => {
                   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))
                   }}
                 />
@@ -52,6 +60,8 @@ const Chart = (props: ChartProps) : JSX.Element => {
                   className={classes.eachDot}
                   style={{
                     backgroundColor: dataItem?.color,
+                    width: `${getDotWidth()}px`,
+                    height: `${getDotWidth()}px`,
                     ...(getStyles(Elements.Dot, styles))
                   }}
                   key={v4()}

src/lib/dot-matrix/DotMatrix.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import classes from './styles.module.scss';
 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 { getLegendPosition, getStyles, findContainerWidth } from "./utils/utils";
 import {
   Elements,
   DEFAULT_COLUMNS,
@@ -23,28 +23,50 @@ const DotMatrix = (props: DotMatrixPropType): JSX.Element => {
     legendPosition = DEFAULT_LEGEND_POSITION
   } = props;
 
+  const [width, setWidth] = useState<number>(0);
   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)
         }}
       >
-        <Chart
-          styles={styles}
-          dimensions={dimensions}
-          data={data}
-          total={total}
-          overlappingValues={overlappingValues}
-        />
-        {showLegend && (
-          <Legend
+        <div 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>

src/lib/dot-matrix/constants.ts

@@ -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 {
@@ -35,5 +24,3 @@ export const DEFAULT_ROWS = 5;
 export const DEFAULT_COLUMNS = 12;
 
 export const DEFAULT_LEGEND_POSITION = 'right';
-
-export const CONTAINER_WIDTH_CONVERSION_FACTOR = 2.6;

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

@@ -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: calc(100% - 100px);
     .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/types.d.ts

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

src/lib/dot-matrix/utils/utils.ts

@@ -1,12 +1,10 @@
 import { DataPointType, StyleProp } from "../types";
-import { CONTAINER_WIDTH_CONVERSION_FACTOR, Elements } from '../constants';
+import { 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);
 }
 
-export const getContainerWidth = (columns: number): number => columns * CONTAINER_WIDTH_CONVERSION_FACTOR;
-
 export const isColorPresent = (dataPoints: DataPointType[], color: string, dataValues: DataPointType[] = []): boolean => {
   const findColor = dataPoints?.find((e) => e.color === color);
   const colorInLocal = dataValues?.find((e) => e.color === color);
@@ -40,4 +38,13 @@ export const getStyles = (element: Elements, styles: StyleProp): object => {
 
 export const hasOverlapping = (values: number[], indexRow: number, indexColumn: number): boolean => (
   indexColumn === 0 && indexRow > 0 && values[indexRow - 1] < 1 && values[indexRow - 1] !== 0
-);
+);
+
+export const findContainerWidth = (id: string):number => {
+  const element = document.getElementById(id);
+  let value = 0;
+  if (element) {
+    value = element.clientWidth;
+  }
+  return value;
+}

src/lib/tests/dotMatrix.test.tsx

@@ -51,7 +51,7 @@ test("If the color is used in the Dot Matrix Chart", async () => {
   if (dom) {
     const dot = await getById(dom.container, "each-category-0-0");
     if (!dot) throw Error("Dot Absent");
-    expect(dot.style._values).toEqual({ "background-color": `black` })
+    expect(dot.style._values["background-color"]).toBe('black')
   } else {
     throw Error("No DOM Found");
   }