admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dave
2026-01-13 13:35:26 -05:00
parent 436a72d017
commit f4df6ed5dd
11 changed files with 112 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.component.jsx
View File

@@ -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" />

47
client/src/components/dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx
View File

@@ -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>
);
};

47
client/src/components/dashboard-components/monthly-parts-sales/monthly-parts-sales.component.jsx
View File

@@ -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>
);
};

2
client/src/components/dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx
View File

@@ -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" />

2
client/src/components/job-costing-modal/job-costing-modal.pie.component.jsx
View File

@@ -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}

2
client/src/components/parts-status-pie/parts-status-pie.component.jsx
View File

@@ -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}

2
client/src/components/scoreboard-chart/scoreboard-chart.component.jsx
View File

@@ -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} />

2
client/src/components/scoreboard-timetickets-stats/scoreboard-timetickets.chart.component.jsx
View File

@@ -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} />

2
client/src/components/scoreboard-timetickets/scoreboard-timetickets.bar.component.jsx
View File

@@ -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} />