diff --git a/client/package-lock.json b/client/package-lock.json index ed9c0c59f..a9ff79e24 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -75,7 +75,7 @@ "react-router-dom": "^6.30.0", "react-sticky": "^6.0.3", "react-virtuoso": "^4.18.1", - "recharts": "^2.15.2", + "recharts": "^3.6.0", "redux": "^5.0.1", "redux-actions": "^3.0.3", "redux-persist": "^6.0.0", @@ -7089,9 +7089,9 @@ } }, "node_modules/@types/d3-array": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz", - "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==", + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz", + "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==", "license": "MIT" }, "node_modules/@types/d3-color": { @@ -7131,9 +7131,9 @@ } }, "node_modules/@types/d3-shape": { - "version": "3.1.7", - "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz", - "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==", + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz", + "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==", "license": "MIT", "dependencies": { "@types/d3-path": "*" @@ -10033,6 +10033,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/es-toolkit": { + "version": "1.43.0", + "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.43.0.tgz", + "integrity": "sha512-SKCT8AsWvYzBBuUqMk4NPwFlSdqLpJwmy6AP322ERn8W2YLIB6JBXnwMI2Qsh2gfphT3q7EKAxKb23cvFHFwKA==", + "license": "MIT", + "workspaces": [ + "docs", + "benchmarks" + ] + }, "node_modules/esbuild": { "version": "0.27.2", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz", @@ -10373,9 +10383,9 @@ } }, "node_modules/eventemitter3": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", - "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==", + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz", + "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==", "license": "MIT" }, "node_modules/events": { @@ -10458,15 +10468,6 @@ "dev": true, "license": "MIT" }, - "node_modules/fast-equals": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz", - "integrity": "sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==", - "license": "MIT", - "engines": { - "node": ">=6.0.0" - } - }, "node_modules/fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", @@ -15374,21 +15375,6 @@ "react-dom": ">=16.8" } }, - "node_modules/react-smooth": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz", - "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==", - "license": "MIT", - "dependencies": { - "fast-equals": "^5.0.1", - "prop-types": "^15.8.1", - "react-transition-group": "^4.4.5" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" - } - }, "node_modules/react-sticky": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/react-sticky/-/react-sticky-6.0.3.tgz", @@ -15403,22 +15389,6 @@ "react-dom": ">=15" } }, - "node_modules/react-transition-group": { - "version": "4.4.5", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", - "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", - "license": "BSD-3-Clause", - "dependencies": { - "@babel/runtime": "^7.5.5", - "dom-helpers": "^5.0.1", - "loose-envify": "^1.4.0", - "prop-types": "^15.6.2" - }, - "peerDependencies": { - "react": ">=16.6.0", - "react-dom": ">=16.6.0" - } - }, "node_modules/react-virtuoso": { "version": "4.18.1", "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.18.1.tgz", @@ -15467,35 +15437,33 @@ } }, "node_modules/recharts": { - "version": "2.15.4", - "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.4.tgz", - "integrity": "sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==", + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.6.0.tgz", + "integrity": "sha512-L5bjxvQRAe26RlToBAziKUB7whaGKEwD3znoM6fz3DrTowCIC/FnJYnuq1GEzB8Zv2kdTfaxQfi5GoH0tBinyg==", "license": "MIT", + "workspaces": [ + "www" + ], "dependencies": { - "clsx": "^2.0.0", - "eventemitter3": "^4.0.1", - "lodash": "^4.17.21", - "react-is": "^18.3.1", - "react-smooth": "^4.0.4", - "recharts-scale": "^0.4.4", - "tiny-invariant": "^1.3.1", - "victory-vendor": "^36.6.8" + "@reduxjs/toolkit": "1.x.x || 2.x.x", + "clsx": "^2.1.1", + "decimal.js-light": "^2.5.1", + "es-toolkit": "^1.39.3", + "eventemitter3": "^5.0.1", + "immer": "^10.1.1", + "react-redux": "8.x.x || 9.x.x", + "reselect": "5.1.1", + "tiny-invariant": "^1.3.3", + "use-sync-external-store": "^1.2.2", + "victory-vendor": "^37.0.2" }, "engines": { - "node": ">=14" + "node": ">=18" }, "peerDependencies": { - "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" - } - }, - "node_modules/recharts-scale": { - "version": "0.4.5", - "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz", - "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==", - "license": "MIT", - "dependencies": { - "decimal.js-light": "^2.4.1" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/recharts/node_modules/clsx": { @@ -15507,6 +15475,16 @@ "node": ">=6" } }, + "node_modules/recharts/node_modules/immer": { + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz", + "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/immer" + } + }, "node_modules/redent": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", @@ -17962,9 +17940,9 @@ } }, "node_modules/victory-vendor": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz", - "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==", + "version": "37.3.6", + "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz", + "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==", "license": "MIT AND ISC", "dependencies": { "@types/d3-array": "^3.0.3", diff --git a/client/package.json b/client/package.json index 29201a675..a995956f4 100644 --- a/client/package.json +++ b/client/package.json @@ -74,7 +74,7 @@ "react-router-dom": "^6.30.0", "react-sticky": "^6.0.3", "react-virtuoso": "^4.18.1", - "recharts": "^2.15.2", + "recharts": "^3.6.0", "redux": "^5.0.1", "redux-actions": "^3.0.3", "redux-persist": "^6.0.0", diff --git a/client/src/components/dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.component.jsx b/client/src/components/dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.component.jsx index 5d3d154fb..973c62f86 100644 --- a/client/src/components/dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.component.jsx +++ b/client/src/components/dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.component.jsx @@ -60,7 +60,7 @@ export default function DashboardMonthlyEmployeeEfficiency({ data, ...cardProps return (
- + diff --git a/client/src/components/dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx b/client/src/components/dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx index 4ce1e2cef..985a41212 100644 --- a/client/src/components/dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx +++ b/client/src/components/dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx @@ -1,13 +1,11 @@ import { Card } from "antd"; import Dinero from "dinero.js"; -import { useState } from "react"; import { useTranslation } from "react-i18next"; import { Cell, Pie, PieChart, ResponsiveContainer, Sector } from "recharts"; import DashboardRefreshRequired from "../refresh-required.component"; export default function DashboardMonthlyLaborSales({ data, ...cardProps }) { const { t } = useTranslation(); - const [activeIndex, setActiveIndex] = useState(0); if (!data) return null; if (!data.monthly_sales) return ; @@ -36,19 +34,17 @@ export default function DashboardMonthlyLaborSales({ data, ...cardProps }) { return (
- + setActiveIndex(index)} > {chartData.map((entry, index) => ( @@ -95,7 +91,8 @@ const renderActiveShape = (props) => { fill, payload, // percent, - value + value, + isActive } = props; // const sin = Math.sin(-RADIAN * midAngle); // const cos = Math.cos(-RADIAN * midAngle); @@ -109,12 +106,16 @@ const renderActiveShape = (props) => { return ( - - {payload.name} - - - {Dinero({ amount: Math.round(value * 100) }).toFormat()} - + {isActive && ( + <> + + {payload.name} + + + {Dinero({ amount: Math.round(value * 100) }).toFormat()} + + + )} { endAngle={endAngle} fill={fill} /> - + {isActive && ( + + )} ); }; diff --git a/client/src/components/dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx b/client/src/components/dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx index 23ffa8a86..a01424ff9 100644 --- a/client/src/components/dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx +++ b/client/src/components/dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx @@ -1,13 +1,11 @@ import { Card } from "antd"; import Dinero from "dinero.js"; -import { useState } from "react"; import { useTranslation } from "react-i18next"; import { Cell, Pie, PieChart, ResponsiveContainer, Sector } from "recharts"; import DashboardRefreshRequired from "../refresh-required.component"; export default function DashboardMonthlyPartsSales({ data, ...cardProps }) { const { t } = useTranslation(); - const [activeIndex, setActiveIndex] = useState(0); if (!data) return null; if (!data.monthly_sales) return ; @@ -34,19 +32,17 @@ export default function DashboardMonthlyPartsSales({ data, ...cardProps }) { return (
- + setActiveIndex(index)} > {chartData.map((entry, index) => ( @@ -91,7 +87,8 @@ const renderActiveShape = (props) => { fill, payload, // percent, - value + value, + isActive } = props; // const sin = Math.sin(-RADIAN * midAngle); // const cos = Math.cos(-RADIAN * midAngle); @@ -105,12 +102,16 @@ const renderActiveShape = (props) => { return ( - - {payload.name} - - - {Dinero({ amount: Math.round(value * 100) }).toFormat()} - + {isActive && ( + <> + + {payload.name} + + + {Dinero({ amount: Math.round(value * 100) }).toFormat()} + + + )} { endAngle={endAngle} fill={fill} /> - + {isActive && ( + + )} ); }; diff --git a/client/src/components/dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx b/client/src/components/dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx index c91e6b098..e6bd95183 100644 --- a/client/src/components/dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx +++ b/client/src/components/dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx @@ -40,7 +40,7 @@ export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) { return (
- + diff --git a/client/src/components/job-costing-modal/job-costing-modal.pie.component.jsx b/client/src/components/job-costing-modal/job-costing-modal.pie.component.jsx index d1e72d45f..0fb51b07d 100644 --- a/client/src/components/job-costing-modal/job-costing-modal.pie.component.jsx +++ b/client/src/components/job-costing-modal/job-costing-modal.pie.component.jsx @@ -32,7 +32,7 @@ export default function JobCostingPieComponent({ type = "sales", costCenterData const memoizedData = useMemo(() => Calculatedata(costCenterData), [costCenterData, Calculatedata]); return ( - + - + - + diff --git a/client/src/components/scoreboard-timetickets-stats/scoreboard-timetickets.chart.component.jsx b/client/src/components/scoreboard-timetickets-stats/scoreboard-timetickets.chart.component.jsx index 9adca093b..95ea097a9 100644 --- a/client/src/components/scoreboard-timetickets-stats/scoreboard-timetickets.chart.component.jsx +++ b/client/src/components/scoreboard-timetickets-stats/scoreboard-timetickets.chart.component.jsx @@ -9,7 +9,7 @@ const graphProps = { export default function ScoreboardTimeTicketsChart({ data, chartTitle }) { return ( - + diff --git a/client/src/components/scoreboard-timetickets/scoreboard-timetickets.bar.component.jsx b/client/src/components/scoreboard-timetickets/scoreboard-timetickets.bar.component.jsx index 545d73472..60223d3e8 100644 --- a/client/src/components/scoreboard-timetickets/scoreboard-timetickets.bar.component.jsx +++ b/client/src/components/scoreboard-timetickets/scoreboard-timetickets.bar.component.jsx @@ -33,7 +33,7 @@ export function ScoreboardTicketsBar({ data, bodyshop }) { const { t } = useTranslation(); return ( }> - +