From 84e7b7976de6463ead0bd6b619364bee327185ed Mon Sep 17 00:00:00 2001 From: prajwalism Date: Sun, 7 Jul 2024 12:54:16 +0545 Subject: [PATCH 1/2] refactor: remove ununsed packages and move types from dependcies to dev-dependencies --- src/frontend/package.json | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/src/frontend/package.json b/src/frontend/package.json index 5d364219..90252315 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -2,30 +2,20 @@ "dependencies": { "@mapbox/mapbox-gl-draw": "^1.4.2", "@mapbox/mapbox-gl-draw-static-mode": "^1.0.1", - "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-popover": "^1.0.6", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", - "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-tooltip": "^1.0.6", "@reduxjs/toolkit": "^1.9.3", "@tailwindcss/container-queries": "^0.1.1", "@tanstack/react-query": "^4.32.6", "@tanstack/react-query-devtools": "^4.32.6", "@tanstack/react-table": "^8.9.3", - "@terraformer/wkt": "^2.2.0", "@turf/area": "^7.0.0", "@turf/bbox": "^7.0.0", "@turf/centroid": "^7.0.0", "@turf/flatten": "^7.0.0", "@turf/length": "^7.0.0", - "@types/file-saver": "^2.0.5", - "@types/geojson": "^7946.0.10", - "@types/mapbox__mapbox-gl-draw": "^1.4.0", - "@types/papaparse": "^5.3.8", - "@types/react-transition-group": "^4.4.6", - "@types/terraformer__wkt": "^2.0.0", - "@types/turf": "^3.5.32", "autoprefixer": "^10.4.14", "axios": "^1.3.4", "class-variance-authority": "^0.6.1", @@ -37,7 +27,6 @@ "geojson": "^0.5.0", "geojson-validation": "^1.0.2", "html2canvas": "^1.4.1", - "lucide-react": "^0.260.0", "maplibre-gl": "^3.2.0", "papaparse": "^5.4.1", "react": "^18.2.0", @@ -49,10 +38,8 @@ "react-router-dom": "^6.10.0", "react-toastify": "^9.1.3", "react-transition-group": "^4.4.5", - "recharts": "^2.7.2", "redux-persist": "^6.0.0", "redux-saga": "^1.2.3", - "reselect": "^4.1.8", "shpjs": "^5.0.1", "tailwind-merge": "^1.14.0", "tailwindcss-animate": "^1.0.6", @@ -61,11 +48,18 @@ }, "devDependencies": { "@tanstack/eslint-plugin-query": "^4.29.4", + "@types/file-saver": "^2.0.5", + "@types/geojson": "^7946.0.10", "@types/geojson-validation": "^1.0.3", + "@types/mapbox__mapbox-gl-draw": "^1.4.0", "@types/node": "^18.15.11", + "@types/papaparse": "^5.3.8", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", + "@types/react-transition-group": "^4.4.6", "@types/shpjs": "^3.4.7", + "@types/terraformer__wkt": "^2.0.0", + "@types/turf": "^3.5.32", "@typescript-eslint/eslint-plugin": "^5.59.5", "@typescript-eslint/parser": "^5.59.5", "@vitejs/plugin-react": "^3.1.0", From f1377ff1fc1094202e8b7ef964eb38a7515dd04b Mon Sep 17 00:00:00 2001 From: prajwalism Date: Sun, 7 Jul 2024 12:54:38 +0545 Subject: [PATCH 2/2] refactor: remove unused code and components --- .../common/Charts/BarChart/index.tsx | 137 ----------- .../common/Charts/CaptureComponent/index.tsx | 29 --- .../common/Charts/ChartContainer/index.tsx | 110 --------- .../common/Charts/ChartHeader/index.tsx | 89 ------- .../common/Charts/ChartLegend/index.tsx | 49 ---- .../common/Charts/DonutChart/index.tsx | 56 ----- .../common/Charts/DonutLegendItem/index.tsx | 28 --- .../Charts/HorizontalBarChart/index.tsx | 23 -- .../Charts/HorizontalBarLabel/index.tsx | 30 --- .../common/Charts/LegendItem/index.tsx | 18 -- .../common/Charts/NoDataComponent/index.tsx | 13 - .../common/Charts/ScatterChart/index.tsx | 66 ----- .../common/Charts/StackedChart/index.tsx | 136 ---------- .../common/Charts/constants/index.ts | 33 --- .../components/common/Charts/types/index.tsx | 38 --- .../Charts/utils/getChartFillOfType.tsx | 20 -- .../common/Charts/utils/getChartOfType.tsx | 20 -- .../components/common/Charts/utils/index.ts | 232 ------------------ src/frontend/src/utils/sagaUtils.ts | 134 ++-------- 19 files changed, 14 insertions(+), 1247 deletions(-) delete mode 100644 src/frontend/src/components/common/Charts/BarChart/index.tsx delete mode 100644 src/frontend/src/components/common/Charts/CaptureComponent/index.tsx delete mode 100644 src/frontend/src/components/common/Charts/ChartContainer/index.tsx delete mode 100644 src/frontend/src/components/common/Charts/ChartHeader/index.tsx delete mode 100644 src/frontend/src/components/common/Charts/ChartLegend/index.tsx delete mode 100644 src/frontend/src/components/common/Charts/DonutChart/index.tsx delete mode 100644 src/frontend/src/components/common/Charts/DonutLegendItem/index.tsx delete mode 100644 src/frontend/src/components/common/Charts/HorizontalBarChart/index.tsx delete mode 100644 src/frontend/src/components/common/Charts/HorizontalBarLabel/index.tsx delete mode 100644 src/frontend/src/components/common/Charts/LegendItem/index.tsx delete mode 100644 src/frontend/src/components/common/Charts/NoDataComponent/index.tsx delete mode 100644 src/frontend/src/components/common/Charts/ScatterChart/index.tsx delete mode 100644 src/frontend/src/components/common/Charts/StackedChart/index.tsx delete mode 100644 src/frontend/src/components/common/Charts/constants/index.ts delete mode 100644 src/frontend/src/components/common/Charts/types/index.tsx delete mode 100644 src/frontend/src/components/common/Charts/utils/getChartFillOfType.tsx delete mode 100644 src/frontend/src/components/common/Charts/utils/getChartOfType.tsx delete mode 100644 src/frontend/src/components/common/Charts/utils/index.ts diff --git a/src/frontend/src/components/common/Charts/BarChart/index.tsx b/src/frontend/src/components/common/Charts/BarChart/index.tsx deleted file mode 100644 index 0b3f5a90..00000000 --- a/src/frontend/src/components/common/Charts/BarChart/index.tsx +++ /dev/null @@ -1,137 +0,0 @@ -import { - BarChart, - Bar, - XAxis, - YAxis, - CartesianGrid, - Tooltip, - ResponsiveContainer, - Text, - Legend, -} from 'recharts'; -import { ChartFills } from '../constants'; -import { IChartProps } from '../types'; - -function truncateString(str: string, num: number) { - // If the length of str is less than or equal to num - // just return str--don't truncate it. - if (str.length <= num) { - return str; - } - // Return str truncated with '...' concatenated to the end of str. - return `${str.slice(0, num)}...`; -} - -const CustomizedLabel = (props: any) => { - // eslint-disable-next-line react/prop-types - const { x, y, payload } = props; - return ( - - {truncateString(payload?.value?.toString() || '', 7)} - - ); -}; - -const CustomTooltip = ({ active, payload, label }: any) => { - if (active && payload && payload.length) { - return ( -
-

{label}

- {payload?.map((item: any) => { - if (item.dataKey !== 'name') - return ( -
-
-
- {item.dataKey} -
-

{item.value}

-
- ); - return <>; - })} -
- ); - } - - return null; -}; - -export default function CustomBarChart({ - data, - fills = ChartFills, - scrollable = false, - width = '150%', -}: IChartProps) { - // const keys = Object.keys(data.length > 0 ? data[0] : {}); - const dataObject = data.length > 0 ? data[0] : {}; - - const { name, ...datax } = dataObject; - const keys = Object.keys(datax); - - return ( - - - - } - interval={0} - /> - - - {keys.length > 1 && } - - } /> - {keys.map((key, i) => { - return ( - - ); - })} - - - ); -} diff --git a/src/frontend/src/components/common/Charts/CaptureComponent/index.tsx b/src/frontend/src/components/common/Charts/CaptureComponent/index.tsx deleted file mode 100644 index bca0052b..00000000 --- a/src/frontend/src/components/common/Charts/CaptureComponent/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import html2canvas from 'html2canvas'; - -interface ICaptureComponentProps { - componentRef: React.RefObject; - captureName: string; -} - -export default function CaptureComponent({ - componentRef, - captureName, -}: ICaptureComponentProps) { - const style = document.createElement('style'); - document.head.appendChild(style); - style.sheet?.insertRule( - 'body > div:last-child img { display: inline-block; }', - ); - - const elementToRemove = componentRef.current.querySelector('.actions'); - const parentElement = elementToRemove.parentNode; - parentElement.removeChild(elementToRemove); - html2canvas(componentRef.current).then((canvas: any) => { - const link = document.createElement('a'); - link.download = captureName; - link.href = canvas.toDataURL(); - link.click(); - - parentElement.appendChild(elementToRemove); - }); -} diff --git a/src/frontend/src/components/common/Charts/ChartContainer/index.tsx b/src/frontend/src/components/common/Charts/ChartContainer/index.tsx deleted file mode 100644 index 4d539468..00000000 --- a/src/frontend/src/components/common/Charts/ChartContainer/index.tsx +++ /dev/null @@ -1,110 +0,0 @@ -/* eslint-disable no-unused-vars */ -/* eslint-disable react/prop-types */ - -import { HtmlHTMLAttributes, useRef } from 'react'; -import { cn } from '@Utils/index'; -import RoundedContainer from '@Components/common/RoundedContainer'; -import getChartOfType from '../utils/getChartOfType'; -import getChartFillOfType from '../utils/getChartFillOfType'; -import { IChartHeaderProps } from '../ChartHeader'; -import { ChartTypes, ILegendProps } from '../types'; -import { ChartFills } from '../constants'; - -interface ICustomChartContainerProps - extends HtmlHTMLAttributes, - Omit { - header: (props: IChartHeaderProps) => JSX.Element; - type: ChartTypes; - data: T[]; - legend?: (props: ILegendProps) => JSX.Element; - xLabel?: string; - yLabel?: string; - scrollable?: boolean; - fillWithType?: boolean; - fill?: string[]; - hasHeader?: boolean; -} - -export default function ChartContainer({ - header, - legend, - xLabel, - yLabel, - className, - data, - type, - chartTitle, - hasDownloadBtn, - scrollable = false, - fillWithType = false, - fill, - hasHeader = true, -}: ICustomChartContainerProps) { - const componentRef = useRef(null); - const chart = getChartOfType(type); - - const fills = fill || (fillWithType ? getChartFillOfType(type) : ChartFills); - - return ( - - {hasHeader && header && ( -
-
- {header({ - chartTitle, - hasDownloadBtn, - downloadComponentRef: componentRef, - })} -
-
- )} - - {yLabel && !(type === 'donut') ? ( -
-

- {yLabel} -

-
- ) : null} - -
- {chart && chart({ data, fills, scrollable })} -
- {xLabel && !(type === 'donut') ? ( -
-

{xLabel}

-
- ) : null} - {legend && ( -
- {legend({ - data, - type, - fills, - })} -
- )} - - ); -} diff --git a/src/frontend/src/components/common/Charts/ChartHeader/index.tsx b/src/frontend/src/components/common/Charts/ChartHeader/index.tsx deleted file mode 100644 index b6f76ddc..00000000 --- a/src/frontend/src/components/common/Charts/ChartHeader/index.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import { useCallback } from 'react'; -import Papa from 'papaparse'; -import FileSaver from 'file-saver'; -import useOutsideClick from '@Hooks/useOutsideClick'; -import ToolTip from '@Components/RadixComponents/ToolTip'; -import { FlexColumn } from '@Components/common/Layouts'; -import CaptureComponent from '../CaptureComponent'; - -export interface IChartHeaderProps { - chartTitle: string; - hasDownloadBtn?: boolean; - downloadComponentRef: React.RefObject; - data?: any; -} - -export default function ChartHeader({ - chartTitle, - hasDownloadBtn, - downloadComponentRef, - data, -}: IChartHeaderProps) { - const [toggleRef, toggle, handleToggle] = useOutsideClick(); - - const handleDownloadPng = () => { - CaptureComponent({ - componentRef: downloadComponentRef, - captureName: chartTitle, - }); - }; - const handleDownloadCsv = useCallback(async () => { - if (!data) return; - const csv = Papa.unparse(data); - const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' }); - - FileSaver.saveAs(blob, `${chartTitle}.csv`); - }, [data, chartTitle]); - - return ( -
-

- {chartTitle} -

- -
- {hasDownloadBtn && ( -
} - onClick={handleToggle} - tabIndex={0} - role="button" - onKeyDown={() => {}} - className="actions naxatw-w-40px hover:naxatw-bg-primary-50 naxatw-flex naxatw-cursor-pointer naxatw-rounded-lg naxatw-p-1" - > - -
- )} -
- {toggle && ( - -
{}} - onClick={handleDownloadPng} - className="hover:naxatw-bg-primary-50 naxatw-py-3" - > - Export as PNG -
-
{}} - onClick={handleDownloadCsv} - className="hover:naxatw-bg-primary-50 naxatw-py-3" - > - Export as CSV -
- - )} -
- ); -} diff --git a/src/frontend/src/components/common/Charts/ChartLegend/index.tsx b/src/frontend/src/components/common/Charts/ChartLegend/index.tsx deleted file mode 100644 index 9ed65a30..00000000 --- a/src/frontend/src/components/common/Charts/ChartLegend/index.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import LegendItem from '../LegendItem'; -import DonutLegendItem from '../DonutLegendItem'; -import { ILegendProps, PieChartDataItem } from '../types'; -import { - calculatePercentage, - removeKeyFromObject, - getSumOfKey, -} from '../utils'; - -export default function ChartLegend({ - data, - type = 'bar', - fills = ['#418FDE', '#FF671F'], -}: ILegendProps) { - if (type === 'donut') { - const maxValue = getSumOfKey(data as PieChartDataItem[], 'value'); - return ( -
-
- {data.map((key: any, index: any) => ( - - ))} -
-
- ); - } - - const keys: string[] = Object.keys( - removeKeyFromObject(data[0], 'name' as keyof (typeof data)[0]), - ); - return ( -
-
- {keys.map((key, index) => ( - - ))} -
-
- ); -} diff --git a/src/frontend/src/components/common/Charts/DonutChart/index.tsx b/src/frontend/src/components/common/Charts/DonutChart/index.tsx deleted file mode 100644 index c91b6858..00000000 --- a/src/frontend/src/components/common/Charts/DonutChart/index.tsx +++ /dev/null @@ -1,56 +0,0 @@ -/* eslint-disable react/no-array-index-key */ -import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts'; -import { IChartProps } from '../types'; - -const CustomTooltip = ({ active, payload }: any) => { - if (active && payload && payload.length) { - const tooltipTextColor = payload[0].payload.fill; // dynamic => changes acc to fill - return ( -
-

- {payload[0]?.name} :{' '} - {payload[0]?.value} -

-
- ); - } - return null; -}; - -export default function CustomDonutChart({ data, fills }: IChartProps) { - return ( - - - - {data?.map((_entry: any, index: number) => ( - // eslint-disable-next-line react/no-array-index-key - - ))} - - - - - ); -} diff --git a/src/frontend/src/components/common/Charts/DonutLegendItem/index.tsx b/src/frontend/src/components/common/Charts/DonutLegendItem/index.tsx deleted file mode 100644 index 9b858bd4..00000000 --- a/src/frontend/src/components/common/Charts/DonutLegendItem/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { IDonutLegendItemProps } from '../types'; - -export default function DonutLegendItem({ - color, - name, - percentage, -}: IDonutLegendItemProps) { - return ( -
-
-
-
- {name} -
-
-
-
- {Number(percentage)?.toFixed(1)} % -
-
-
- ); -} diff --git a/src/frontend/src/components/common/Charts/HorizontalBarChart/index.tsx b/src/frontend/src/components/common/Charts/HorizontalBarChart/index.tsx deleted file mode 100644 index cb70ecf0..00000000 --- a/src/frontend/src/components/common/Charts/HorizontalBarChart/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { IChartProps } from '../types'; -import HorizontalBarLabel from '../HorizontalBarLabel'; -import { calculatePercentageAndInjectValue } from '../utils'; - -export default function HorizontalBarChart({ data }: IChartProps) { - const finalData = data - ? calculatePercentageAndInjectValue(data, 'value') - : []; - return ( -
-
- {finalData?.map((item: any) => ( - - ))} -
-
- ); -} diff --git a/src/frontend/src/components/common/Charts/HorizontalBarLabel/index.tsx b/src/frontend/src/components/common/Charts/HorizontalBarLabel/index.tsx deleted file mode 100644 index 6b4835b9..00000000 --- a/src/frontend/src/components/common/Charts/HorizontalBarLabel/index.tsx +++ /dev/null @@ -1,30 +0,0 @@ -interface IHorizontalLabelProps { - width: number; - value: string; - label: string; -} - -export default function HorizontalBarLabel({ - width, - value, - label, -}: IHorizontalLabelProps) { - return ( -
-
-
-
-

- {value} -

-

- {label} -

-
-
-
- ); -} diff --git a/src/frontend/src/components/common/Charts/LegendItem/index.tsx b/src/frontend/src/components/common/Charts/LegendItem/index.tsx deleted file mode 100644 index 17eac7f8..00000000 --- a/src/frontend/src/components/common/Charts/LegendItem/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { ILegendItemProps } from '../types'; - -export default function LegendItem({ color, name }: ILegendItemProps) { - return ( - - ); -} diff --git a/src/frontend/src/components/common/Charts/NoDataComponent/index.tsx b/src/frontend/src/components/common/Charts/NoDataComponent/index.tsx deleted file mode 100644 index 0b6d1d1f..00000000 --- a/src/frontend/src/components/common/Charts/NoDataComponent/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { FlexColumn } from '@Components/common/Layouts'; -import NoDataImage from '@Assets/images/no-data.png'; - -export default function NoDataComponent() { - return ( -
- - No Data -
No Data Available
- -
- ); -} diff --git a/src/frontend/src/components/common/Charts/ScatterChart/index.tsx b/src/frontend/src/components/common/Charts/ScatterChart/index.tsx deleted file mode 100644 index c406b6fb..00000000 --- a/src/frontend/src/components/common/Charts/ScatterChart/index.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { - CartesianGrid, - ResponsiveContainer, - Scatter, - ScatterChart, - Tooltip, - XAxis, - YAxis, -} from 'recharts'; -import { ChartFills } from '../constants'; -import { IChartProps } from '../types'; - -export default function ScatterChartComponent({ - data, - fills = ChartFills, - scrollable = false, - width = '150%', -}: IChartProps) { - return ( - - - - - - - {/* */} - - {/* */} - - - - ); -} diff --git a/src/frontend/src/components/common/Charts/StackedChart/index.tsx b/src/frontend/src/components/common/Charts/StackedChart/index.tsx deleted file mode 100644 index 3cc2e053..00000000 --- a/src/frontend/src/components/common/Charts/StackedChart/index.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import { useRef } from 'react'; -import { FlexColumn, FlexRow } from '@Components/common/Layouts'; -import RoundedContainer from '@Components/common/RoundedContainer'; -import formatNumberWithCommas from '@Utils/formatNumberWithCommas'; -import NoDataComponent from '../NoDataComponent'; -import { StackedChartFills } from '../constants'; -import { IChartHeaderProps } from '../ChartHeader'; - -interface IStackedChartProps - extends Omit { - hasHeader?: boolean; - // eslint-disable-next-line no-unused-vars - header: (props: IChartHeaderProps) => JSX.Element; - data: Record; - className?: string; - labelAlignment?: 'vertical' | 'horizontal'; -} -type IUpdatedData = { - name: string; - color: string; - width: string; - value: number; -}[]; - -export default function StackedChart({ - hasHeader = true, - header, - data, - className, - labelAlignment, - chartTitle, - hasDownloadBtn, -}: IStackedChartProps) { - const componentRef = useRef(null); - const total = - data.reduce( - (sum: number, item: Record) => sum + item.value, - 0, - ) || 0; - - const updatedData: IUpdatedData = data.map( - (item: Record, index: number) => ({ - ...item, - width: `${((item.value / total) * 100).toFixed(0)}%`, - color: StackedChartFills[index], - }), - ); - - const isDataEmpty = !!data.length; - - return ( - - {hasHeader && header && ( -
-
- {header({ - chartTitle, - hasDownloadBtn, - downloadComponentRef: componentRef, - data, - })} -
-
- )} - {isDataEmpty ? ( - - - {updatedData.map(({ name, color, width }) => ( -
- ))} - -
- {updatedData.map(({ name, value, color }) => ( - -
- - - {name} - -
- {formatNumberWithCommas(value)} -
- - - ))} -
- - ) : ( - - )} - - ); -} diff --git a/src/frontend/src/components/common/Charts/constants/index.ts b/src/frontend/src/components/common/Charts/constants/index.ts deleted file mode 100644 index a9522f53..00000000 --- a/src/frontend/src/components/common/Charts/constants/index.ts +++ /dev/null @@ -1,33 +0,0 @@ -export const ChartFills = [ - '#0664D2', - '#FF9525', - '#5BB6FF', - '#FFD85C', - '#00947C', -]; - -export const BarChartFills = ['#0664D2', '#FF9525', '#0664D2']; - -export const StackedChartFills = ['#0664D2', '#FF9525', '#42b4a2']; - -export const PieChartFills = ['#42B4A2', '#5BB6FF', '#AFDED6', '#0077E4']; - -export const donutChartFills = [ - '#0664D2', - '#FF9525', - '#5BB6FF', - '#FFD85C', - '#42B4A2', - '#BADFFF', - '#AFDED6', - '#0077E4', -]; - -export const HorizontalBarChartFills = [ - '#FF671F', - '#418FDE', - '#5CB8B2', - '#FF8042', -]; - -export const scatterChartFills = ['#FF671F', '#418FDE', '#5CB8B2', '#FF8042']; diff --git a/src/frontend/src/components/common/Charts/types/index.tsx b/src/frontend/src/components/common/Charts/types/index.tsx deleted file mode 100644 index 4340d02a..00000000 --- a/src/frontend/src/components/common/Charts/types/index.tsx +++ /dev/null @@ -1,38 +0,0 @@ -/* eslint-disable no-unused-vars */ -export interface IChartProps { - data: Record[any]; - fills?: string[]; - scrollable?: boolean; - width?: string; -} - -export type ChartTypes = - | 'bar' - | 'donut' - | 'horizontalBar' - | 'stackedChart' - | 'scatterChart'; - -export interface ILegendProps { - data: T[]; - onClick?: (key: string) => any; - type?: ChartTypes; - fills?: string[]; -} - -export interface PieChartDataItem { - name: string; - value: number; -} - -export interface IDonutLegendItemProps { - color: string; - name: string; - value: number | string; - percentage: number | string; -} - -export interface ILegendItemProps { - color: string; - name: string; -} diff --git a/src/frontend/src/components/common/Charts/utils/getChartFillOfType.tsx b/src/frontend/src/components/common/Charts/utils/getChartFillOfType.tsx deleted file mode 100644 index 525880ce..00000000 --- a/src/frontend/src/components/common/Charts/utils/getChartFillOfType.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { - BarChartFills, - ChartFills, - HorizontalBarChartFills, - donutChartFills, -} from '../constants'; -import { ChartTypes } from '../types'; - -export default function getChartFillOfType(type: ChartTypes) { - switch (type) { - case 'bar': - return BarChartFills; - case 'donut': - return donutChartFills; - case 'horizontalBar': - return HorizontalBarChartFills; - default: - return ChartFills; - } -} diff --git a/src/frontend/src/components/common/Charts/utils/getChartOfType.tsx b/src/frontend/src/components/common/Charts/utils/getChartOfType.tsx deleted file mode 100644 index ce801fa7..00000000 --- a/src/frontend/src/components/common/Charts/utils/getChartOfType.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import CustomDonutChart from '../DonutChart'; -import CustomBarChart from '../BarChart'; -import CustomHorizontalBarChart from '../HorizontalBarChart'; -import { ChartTypes } from '../types'; -import ScatterChartComponent from '../ScatterChart'; - -export default function getChartOfType(type: ChartTypes) { - switch (type) { - case 'bar': - return CustomBarChart; - case 'donut': - return CustomDonutChart; - case 'horizontalBar': - return CustomHorizontalBarChart; - case 'scatterChart': - return ScatterChartComponent; - default: - return null; - } -} diff --git a/src/frontend/src/components/common/Charts/utils/index.ts b/src/frontend/src/components/common/Charts/utils/index.ts deleted file mode 100644 index c96eb229..00000000 --- a/src/frontend/src/components/common/Charts/utils/index.ts +++ /dev/null @@ -1,232 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies */ -/* eslint-disable no-prototype-builtins */ -/* eslint-disable no-restricted-syntax */ - -/** - * - * @param obj - * @returns - */ -export function hasBinaryData(obj: Record): boolean { - if (typeof obj !== 'object') { - return false; - } - - for (const key in obj) { - if (obj.hasOwnProperty(key)) { - const value = obj[key]; - if ( - value instanceof Blob || - value instanceof File || - value instanceof ArrayBuffer - ) { - return true; - } - if (typeof value === 'object' && hasBinaryData(value)) { - return true; - } - } - } - - return false; -} - -/** - * - * @param obj - * @returns - */ -export function convertJsonToFormData(obj: Record): FormData { - const formData = new FormData(); - for (const key in obj) { - if (obj.hasOwnProperty(key)) { - const value = obj[key]; - if (Array.isArray(value)) { - for (let i = 0; i < value.length; i++) { - formData.append(key, value[i]); - } - } else { - formData.append(key, value); - } - } - } - return formData; -} - -/** - * - * @param obj1 - * @param obj2 - * @returns - */ - -export function objectsAreEqual(obj1: any, obj2: any): boolean { - if (obj1 === obj2) { - return true; - } - - if (obj1 == null || obj2 == null) { - return false; - } - - const obj1Keys = Object.keys(obj1); - const obj2Keys = Object.keys(obj2); - if (obj1Keys.length !== obj2Keys.length) { - return false; - } - - for (const key of obj1Keys) { - if (!obj2.hasOwnProperty(key)) { - return false; - } - const value1 = obj1[key]; - const value2 = obj2[key]; - if (value1 !== value2) { - return false; - } - } - - return true; -} - -/** - * This TypeScript function calculates the percentage of a value in relation to a total. - * @param {number} total - The total number or quantity that the value is being compared to. - * @param {number} value - The value parameter represents the numerical value that you want to - * calculate the percentage of. - * @returns The function `calculatePercentage` returns a number, which is the percentage calculated - * based on the `total` and `value` parameters passed to the function. If the `total` parameter is 0, - * the function returns 0. - */ -export function calculatePercentage(total: number, value: number): number { - if (total === 0) { - return 0; - } - return (value / total) * 100; -} - -/** - * This TypeScript function removes a specified key from an object and returns a new object without - * that key. - * @param {T} obj - The object from which a key needs to be removed. - * @param {K} key - The `key` parameter is the property key of the object that needs to be removed. It - * is of type `K`, which is a generic type that extends the keys of the input object `T`. This ensures - * that the `key` parameter is a valid property key of the input object. - * @returns a new object that is the same as the input object, but with the specified key removed. The - * returned object has a type of `Omit`, which means it has all the same properties as the input - * object `T`, except for the property with key `K`. - */ -export function removeKeyFromObject( - obj: T, - key: K, -): Omit { - const { [key]: omitted, ...rest } = obj; - return rest; -} - -/** - * This TypeScript function calculates the sum of a specified key in an array of objects. - * @param {Record[]} data - An array of objects where each object has one or more - * key-value pairs. - * @param {string} key - The `key` parameter is a string representing the key of the property in each - * object of the `data` array that we want to sum up. - * @returns the sum of the values of a given key in an array of objects. If the array is empty, it - * returns 0. - */ -export function getSumOfKey(data: Record[], key: string) { - if (data.length === 0) { - return 0; - } - const total = data - .map((item: any) => item[key]) - .reduce((sum: number, item: any) => { - const y = sum + +item; - return y; - }); - return total; -} - -export function calculatePercentageAndInjectValue( - arr: Record[], - key: string, -) { - const maxValue = Math.max(...arr.map(obj => obj[key])); - for (const obj of arr) { - obj.percentage = parseFloat(((obj[key] / maxValue) * 100).toFixed(2)); - } - return arr; -} - -/** - * The IntersectionOfObjects function takes two objects as input and returns a new object that contains - * only the properties that exist in both input objects. - * @param obj1 - An object of type `Record`, which means it can have any number of - * properties of any type. - * @param obj2 - The `obj2` parameter is a record object that contains key-value pairs. - * @returns The function `IntersectionOfObjects` returns a new object that contains the intersection of - * properties between `obj1` and `obj2`. - */ -export function IntersectionOfObjects( - obj1: Record, - obj2: Record, -): Record { - const obj2Keys = Object.keys(obj2); - if (!obj2Keys.length) return {}; - const intersectedObj = obj2Keys.reduce( - (acc: Record, item: string) => { - if (obj1[item]) acc[item] = obj1[item]; - return acc; - }, - {}, - ); - return intersectedObj; -} - -export function scrollToComponent(componentId: string) { - const element = document.getElementById(componentId); - - if (element) { - element.scrollIntoView({ - behavior: 'smooth', - block: 'center', - }); - // element.focus(); - // setTimeout(() => { - // }, 800); - // element.focus(); - } -} - -/** - * The function converts an input object with nested keys in the format of "name[index].nestedKey" into - * an output object with nested arrays and objects. - * @param input - The input parameter is a JavaScript object with string keys and any values. - * @returns an object with the converted input. The input is an object with string keys and any values. - * The function converts any keys that match the pattern of "name[index].nestedKey" into nested objects - * within an array. The function returns the converted object. - */ -export function convertObject(input: Record): any { - const output: Record = {}; - for (const key in input) { - if (input.hasOwnProperty(key)) { - const match = key.match(/^(.*?)\[(\d+)\]\.(.*)$/); - if (match) { - const name = match[1]; - const index = match[2]; - const nestedKey = match[3]; - - if (!output[name]) { - output[name] = []; - } - if (!output[name][index]) { - output[name][index] = {}; - } - - output[name][index][nestedKey] = input[key]; - } else { - output[key] = input[key]; - } - } - } - return output; -} diff --git a/src/frontend/src/utils/sagaUtils.ts b/src/frontend/src/utils/sagaUtils.ts index b10fca5e..87c3a173 100644 --- a/src/frontend/src/utils/sagaUtils.ts +++ b/src/frontend/src/utils/sagaUtils.ts @@ -1,22 +1,20 @@ import { put } from 'redux-saga/effects'; import { PayloadAction } from '@reduxjs/toolkit'; import { startAction, stopAction } from '@Store/actions/loader'; -// import toastActions from '@src/actions/toast'; -// import errorResponseHandler from './errorResponseHandler'; -// /** -// * -// * Wrapper function for reducing loader action boilerplate in saga. -// * -// * @param {function} fn - worker saga function -// * -// * @returns {function} function that handles loader action start and stop. -// * -// * @example -// * function loginWatcher() { -// * yield takeLatest(Types.LOGIN_REQUEST, withLoader(loginRequest)); -// * } -// */ +/** + * + * Wrapper function for reducing loader action boilerplate in saga. + * + * @param {function} fn - worker saga function + * + * @returns {function} function that handles loader action start and stop. + * + * @example + * function loginWatcher() { + * yield takeLatest(Types.LOGIN_REQUEST, withLoader(loginRequest)); + * } + */ export function withLoader(func: Function) { return function* loaderActionWrappper(action: PayloadAction) { @@ -32,108 +30,4 @@ export function withLoader(func: Function) { }; } -export const nothing = ''; - -// /** -// * -// * Wrapper function for abstracting task cancellation in redux saga. -// * -// * @param {function} workerSaga - worker saga function -// * @param {string} cancelActionType - cancel action type -// * -// * @returns {function} function that handles task cancellation out of the box. -// * -// * @example -// * yield takeLatest( -// * Types.LOGIN_REQUEST, -// * cancelable(loginRequest, Types.LOGIN_REQUEST_CANCEL), -// * ); -// */ -// export function cancelable(workerSaga, cancelActionType) { -// return function* cancelableSagaWorker(action) { -// // starts the task in the background -// const cancelableTask = yield fork(workerSaga, action); -// -// // wait for the user stop action -// yield take(cancelActionType); -// -// // cancel the background task -// // this will cause the forked task to jump into its finally block -// yield cancel(cancelableTask); -// }; -// } -// -// /** -// * -// * Wrapper function for reducing toast action boilerplate in saga. -// * -// * @param {function} fn - worker saga function -// * -// * @returns {function} function that handles toast action start and stop. -// * -// * @example -// * function loginWatcher() { -// * yield takeLatest(Types.LOGIN_REQUEST, withErrorHandler(loginRequest)); -// * } -// */ -// export function withErrorHandler(func) { -// return function* errorHandlerWrapper(action) { -// try { -// yield func(action); -// } catch (err) { -// yield put( -// toastActions.error({ -// message: errorResponseHandler(err), -// delay: 20 * 1000, -// }), -// ); -// } -// }; -// } -// -// export const getFormattedErrorMessage = err => -// err -// .map((error, index) => `${index + 1}. ${error.errorName}: ${error.details}`) -// .join(', '); -// -// /** -// * Function for catching the error in saga. -// * -// * @param {Object} error - error occured - in ui, during api call and after api call -// * -// * @returns {string} error message as string. -// */ -// export const catchHandler = error => { -// // eslint-disable-next-line no-console -// console.log({ error }); -// if (error?.response?.status) { -// if (error?.response?.status === 404) { -// return `Something's wrong${ -// error?.response?.config?.url -// ? ` in ${error?.response?.config?.url}` -// : '' -// }. Please try again later.`; -// } -// if (error?.response?.status >= 400 && error?.response?.status < 600) { -// return ``; -// } -// if (error?.response?.data?.Error) { -// if (typeof error.response.data.Error === 'string') { -// return error.response.data.Error; -// } -// return getFormattedErrorMessage(error.response.data.Error); -// } -// if (error?.response?.data) { -// if (typeof error.response.data === 'string') { -// return error.response.data; -// } -// const errorothers = Object.keys(error.response.data).map(item => ({ -// errorName: item, -// details: error.response.data[item], -// })); -// return getFormattedErrorMessage(errorothers); -// } -// return "Something's wrong. Please try again later."; -// } -// return String(error); -// }; +export const nothing = ''; \ No newline at end of file