feature/IO-3497-Ant-Design-v5-to-v6 - Checkpoint (recharts)

2026-01-13 13:35:26 -05:00
parent 436a72d017
commit f4df6ed5dd
11 changed files with 112 additions and 128 deletions
--- 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",
--- 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",
--- 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 (
    <Card title={t("dashboard.titles.monthlyemployeeefficiency")} {...cardProps}>
      <div style={{ height: "100%" }}>
-        <ResponsiveContainer width="100%" height="100%">
+        <ResponsiveContainer width="100%" height="100%" minHeight={100}>
          <ComposedChart data={chartData} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
            <CartesianGrid stroke="#f5f5f5" />
            <XAxis dataKey="date" />
--- 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 <DashboardRefreshRequired {...cardProps} />;

@@ -36,19 +34,17 @@ export default function DashboardMonthlyLaborSales({ data, ...cardProps }) {
  return (
    <Card title={t("dashboard.titles.monthlylaborsales")} {...cardProps}>
      <div style={{ height: "100%" }}>
-        <ResponsiveContainer width="100%" height="100%">
+        <ResponsiveContainer width="100%" height="100%" minHeight={100}>
          <PieChart margin={0} padding={0}>
            <Pie
              data={chartData}
-              activeIndex={activeIndex}
-              activeShape={renderActiveShape}
+              shape={renderActiveShape}
              cx="50%"
              cy="50%"
              innerRadius="60%"
              //  outerRadius={80}
              fill="#8884d8"
              dataKey="value"
-              onMouseEnter={(throwaway, index) => setActiveIndex(index)}
            >
              {chartData.map((entry, index) => (
                <Cell key={`cell-${index}`} fill={entry.color} />
@@ -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 (
    <g>
-      <text x={cx} y={cy} dy={0} textAnchor="middle" fill={fill}>
-        {payload.name}
-      </text>
-      <text x={cx} y={cy} dy={16} textAnchor="middle" fill={fill}>
-        {Dinero({ amount: Math.round(value * 100) }).toFormat()}
-      </text>
+      {isActive && (
+        <>
+          <text x={cx} y={cy} dy={0} textAnchor="middle" fill={fill}>
+            {payload.name}
+          </text>
+          <text x={cx} y={cy} dy={16} textAnchor="middle" fill={fill}>
+            {Dinero({ amount: Math.round(value * 100) }).toFormat()}
+          </text>
+        </>
+      )}
      <Sector
        cx={cx}
        cy={cy}
@@ -124,15 +125,17 @@ const renderActiveShape = (props) => {
        endAngle={endAngle}
        fill={fill}
      />
-      <Sector
-        cx={cx}
-        cy={cy}
-        startAngle={startAngle}
-        endAngle={endAngle}
-        innerRadius={outerRadius + 6}
-        outerRadius={outerRadius + 10}
-        fill={fill}
-      />
+      {isActive && (
+        <Sector
+          cx={cx}
+          cy={cy}
+          startAngle={startAngle}
+          endAngle={endAngle}
+          innerRadius={outerRadius + 6}
+          outerRadius={outerRadius + 10}
+          fill={fill}
+        />
+      )}
    </g>
  );
 };
--- 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 <DashboardRefreshRequired {...cardProps} />;

@@ -34,19 +32,17 @@ export default function DashboardMonthlyPartsSales({ data, ...cardProps }) {
  return (
    <Card title={t("dashboard.titles.monthlypartssales")} {...cardProps}>
      <div style={{ height: "100%" }}>
-        <ResponsiveContainer width="100%" height="100%">
+        <ResponsiveContainer width="100%" height="100%" minHeight={100}>
          <PieChart margin={0} padding={0}>
            <Pie
              data={chartData}
-              activeIndex={activeIndex}
-              activeShape={renderActiveShape}
+              shape={renderActiveShape}
              cx="50%"
              cy="50%"
              innerRadius="60%"
              // outerRadius={80}
              fill="#8884d8"
              dataKey="value"
-              onMouseEnter={(throwaway, index) => setActiveIndex(index)}
            >
              {chartData.map((entry, index) => (
                <Cell key={`cell-${index}`} fill={entry.color} />
@@ -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 (
    <g>
-      <text x={cx} y={cy} dy={0} textAnchor="middle" fill={fill}>
-        {payload.name}
-      </text>
-      <text x={cx} y={cy} dy={16} textAnchor="middle" fill={fill}>
-        {Dinero({ amount: Math.round(value * 100) }).toFormat()}
-      </text>
+      {isActive && (
+        <>
+          <text x={cx} y={cy} dy={0} textAnchor="middle" fill={fill}>
+            {payload.name}
+          </text>
+          <text x={cx} y={cy} dy={16} textAnchor="middle" fill={fill}>
+            {Dinero({ amount: Math.round(value * 100) }).toFormat()}
+          </text>
+        </>
+      )}
      <Sector
        cx={cx}
        cy={cy}
@@ -120,15 +121,17 @@ const renderActiveShape = (props) => {
        endAngle={endAngle}
        fill={fill}
      />
-      <Sector
-        cx={cx}
-        cy={cy}
-        startAngle={startAngle}
-        endAngle={endAngle}
-        innerRadius={outerRadius + 6}
-        outerRadius={outerRadius + 10}
-        fill={fill}
-      />
+      {isActive && (
+        <Sector
+          cx={cx}
+          cy={cy}
+          startAngle={startAngle}
+          endAngle={endAngle}
+          innerRadius={outerRadius + 6}
+          outerRadius={outerRadius + 10}
+          fill={fill}
+        />
+      )}
    </g>
  );
 };
--- 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 (
    <Card title={t("dashboard.titles.monthlyrevenuegraph")} {...cardProps}>
      <div style={{ height: "100%" }}>
-        <ResponsiveContainer width="100%" height="100%">
+        <ResponsiveContainer width="100%" height="100%" minHeight={100}>
          <ComposedChart data={chartData} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
            <CartesianGrid stroke="#f5f5f5" />
            <XAxis dataKey="date" />
--- 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 (
-    <ResponsiveContainer width="100%" height={175}>
+    <ResponsiveContainer width="100%" height={175} minHeight={100}>
      <PieChart>
        <Pie
          data={memoizedData}
--- a/client/src/components/parts-status-pie/parts-status-pie.component.jsx
+++ b/client/src/components/parts-status-pie/parts-status-pie.component.jsx
@@ -60,7 +60,7 @@ export function PartsStatusPie({ bodyshop, joblines_status }) {

  return (
    <div>
-      <ResponsiveContainer width="100%" height={175}>
+      <ResponsiveContainer width="100%" height={175} minHeight={100}>
        <PieChart>
          <Pie
            data={memoizedData}
--- a/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx
+++ b/client/src/components/scoreboard-chart/scoreboard-chart.component.jsx
@@ -86,7 +86,7 @@ export function ScoreboardChart({ sbEntriesByDate, bodyshop }) {

  return (
    <Card>
-      <ResponsiveContainer width="100%" height={475}>
+      <ResponsiveContainer width="100%" height={475} minHeight={100}>
        <ComposedChart data={data} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
          <CartesianGrid stroke="#f5f5f5" />
          <XAxis dataKey="date" strokeWidth={graphProps.strokeWidth} />
--- 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 (
    <Card title={chartTitle}>
-      <ResponsiveContainer width="100%" height={275}>
+      <ResponsiveContainer width="100%" height={275} minHeight={100}>
        <ComposedChart data={data} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
          <CartesianGrid stroke="#f5f5f5" />
          <XAxis dataKey="date" strokeWidth={graphProps.strokeWidth} />
--- 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 (
    <Card title={t("scoreboard.labels.productivetimeticketsoverdate")} extra={<TimeTicketsDatesSelector />}>
-      <ResponsiveContainer width="100%" height={475}>
+      <ResponsiveContainer width="100%" height={475} minHeight={100}>
        <ComposedChart data={data.chartData} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
          <CartesianGrid stroke="#f5f5f5" />
          <XAxis dataKey="date" strokeWidth={graphProps.strokeWidth} />