From 69e702d36898a395bb9d4fcd97fde0a8ba194146 Mon Sep 17 00:00:00 2001 From: mahmoodsht <106068383+mahmoodsht@users.noreply.github.com> Date: Sun, 2 Nov 2025 16:50:52 +0330 Subject: [PATCH] =?UTF-8?q?=D9=BE=D8=AA=D8=B1=D9=88=D8=B4=DB=8C=D9=85?= =?UTF-8?q?=DB=8C=20=D8=A2=D9=BE=D8=A7=D8=AF=D8=A7=D9=86=D8=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/dashboard/d3-image-info.tsx | 135 ++++++------- app/components/dashboard/d3-image-info1.tsx | 213 ++++++++++++++++++++ app/components/dashboard/dashboard-home.tsx | 27 ++- 3 files changed, 301 insertions(+), 74 deletions(-) create mode 100644 app/components/dashboard/d3-image-info1.tsx diff --git a/app/components/dashboard/d3-image-info.tsx b/app/components/dashboard/d3-image-info.tsx index 4d3c012..72af552 100644 --- a/app/components/dashboard/d3-image-info.tsx +++ b/app/components/dashboard/d3-image-info.tsx @@ -1,3 +1,5 @@ +//شماتیک آپادانا + import React from "react"; import { formatNumber } from "~/lib/utils"; @@ -8,10 +10,10 @@ export type CompanyInfo = { costReduction: number; revenue?: number; capacity?: number; - costI : number, - capacityI : number, - revenueI : number, - cost : number | string, + costI: number; + capacityI: number; + revenueI: number; + cost: number | string; }; export type D3ImageInfoProps = { @@ -20,10 +22,11 @@ export type D3ImageInfoProps = { height?: number; }; -const InfoBox = ({ company, style }: { company: CompanyInfo; style :any }) => { - const hideCapacity = company.name === "خوارزمی"; // اگر خوارزمی بود ظرفیت مخفی شود +const InfoBox = ({ company, style }: { company: CompanyInfo; style: any }) => { + // const hideCapacity = company.name === "واحد 300"; // اگر واحد 300 بود ظرفیت مخفی شود + const hideCapacity = false; return ( -
+
درآمد:
@@ -32,15 +35,11 @@ const InfoBox = ({ company, style }: { company: CompanyInfo; style :any }) => {
هزینه:
- { - (hideCapacity ? - -
{formatNumber(company?.cost || 0)}
- : -
{formatNumber(company?.cost || 0)}
- ) - - } + {hideCapacity ? ( +
{formatNumber(company?.cost || 0)}
+ ) : ( +
{formatNumber(company?.cost || 0)}
+ )}
میلیون ریال
{!hideCapacity && ( @@ -56,61 +55,58 @@ const InfoBox = ({ company, style }: { company: CompanyInfo; style :any }) => { }; export function D3ImageInfo({ companies }: D3ImageInfoProps) { - // Ensure we have exactly 6 companies - + // واحدهای جدید - 4 واحد const sample = [ - { id: "آب نیرو", name: "آب نیرو", imageUrl: "/abniro.png" }, - { id: "بسپاران", name: "بسپاران", imageUrl: "/besparan.png" }, - { id: "خوارزمی", name: "خوارزمی", imageUrl: "/khwarazmi.png" }, - { id: "فراورش 1", name: "فراورش 1", imageUrl: "/faravash1.png" }, - { id: "فراورش 2", name: "فراورش 2", imageUrl: "/faravash2.png" }, - { id: "کیمیا", name: "کیمیا", imageUrl: "/kimia.png" } + { id: "واحد 100", name: "واحد 100", imageUrl: "/abniro.png" }, + { id: "واحد 200", name: "واحد 200", imageUrl: "/besparan.png" }, + { id: "واحد 300", name: "واحد 300", imageUrl: "/khwarazmi.png" }, + { id: "واحد 400", name: "واحد 400", imageUrl: "/faravash1.png" } ]; + + + const merged = sample.map(company => { - const found = companies.find(item => item.id == company.id); + const found = companies.find(item => item.id === company.id); return found ? found - : { ...company, cost: 0, capacity: 0, revenue: 0 }; + : { ...company, cost: 0, capacity: 0, revenue: 0, costReduction: 0, costI: 0, capacityI: 0, revenueI: 0 }; }); const displayCompanies = merged; - console.log(displayCompanies) + console.log(displayCompanies); - // Positions inside a 5x4 grid (col, row) - // Layout keeps same visual logic: left/middle/right on two bands with spacing grid around + // موقعیت‌های جدید برای چیدمان لوزی شکل (3 ردیف - 1-2-1) + // گرید 5x4 نگه داشته شده اما موقعیت‌ها تغییر کرده const gridPositions = [ - { col: 2, row: 2 , colI : 1 , rowI : 2 , name : "بسپاران"}, // left - top band - { col: 3, row: 2 , colI : 3 , rowI : 1 , name : "خوارزمی"}, // middle top (image sits in row 2, info box goes to row 1) - { col: 4, row: 2 ,colI : 5 , rowI : 2 , name : "فراورش 1"}, // right - top band - { col: 2, row: 3 , colI : 1 , rowI : 3 , name : "کیمیا"}, // left - bottom band - { col: 3, row: 3 , colI : 3, rowI : 4 , name : "آب نیرو"}, // middle bottom (image sits in row 3, info box goes to row 4) - { col: 4, row: 3 , colI : 5 , rowI : 3 , name : "فراورش 2"}, // right - bottom band + { col: 2, row: 1, colI: 1, rowI: 1, name: "واحد 100" }, // ردیف اول - ستون اول + { col: 4, row: 1, colI: 5, rowI: 1, name: "واحد 200" }, // ردیف اول - ستون دوم + { col: 2, row: 3, colI: 1, rowI: 3, name: "واحد 300" }, // ردیف دوم - ستون اول + { col: 4, row: 3, colI: 5, rowI: 3, name: "واحد 400" }, // ردیف دوم - ستون دوم ]; return (
{displayCompanies.map((company, index) => { - const gp = gridPositions.find(v => v.name === company.name) ; + const gp = gridPositions.find(v => v.name === company.name); return ( - <> -
-
- {company.name} + +
+
+ {company.name} +
+ {company.name}
- - {company.name} -
- - ); + + + ); })}
@@ -142,21 +138,20 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) { .company-image { object-fit: contain; - height : 100px; + height: 100px; } .info-box { border: 1px solid #3F415A; border-radius: 10px; height: max-content; - align-self : center; - justify-self : center; - padding : .2rem 1.2rem; - min-width : 8rem; + align-self: center; + justify-self: center; + padding: .2rem 1.2rem; + min-width: 8rem; background-color: transparent; } - .info-box-content { display: flex; flex-direction: column; @@ -164,16 +159,20 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) { } .info-row { - position : relative; + position: relative; margin: .1rem 0; display: flex; - gap : .5rem; - justify-content : space-between; + gap: .5rem; + justify-content: space-between; direction: rtl; + } - &:has(.info-value.revenue) {border-bottom: 1px solid #3AEA83;} - &:has(.info-value.cost) {border-bottom: 1px solid #F76276;} + .info-row:has(.info-value.revenue) { + border-bottom: 1px solid #3AEA83; + } + .info-row:has(.info-value.cost) { + border-bottom: 1px solid #F76276; } .info-label { @@ -181,7 +180,7 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) { font-size: 11px; font-weight: 300; text-align: right; - margin : auto 0; + margin: auto 0; } .info-value { @@ -189,10 +188,10 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) { font-size: 14px; font-weight: 500; text-align: right; - margin-bottom : .5rem; + margin-bottom: .5rem; } - .info-value.revenue { color: #fff;} + .info-value.revenue { color: #fff; } .info-value.cost { color: #fff; } .info-value.cost2 { color: #fff; } .info-value.capacity { color: #fff; } @@ -208,4 +207,4 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) { `}
); -} +} \ No newline at end of file diff --git a/app/components/dashboard/d3-image-info1.tsx b/app/components/dashboard/d3-image-info1.tsx new file mode 100644 index 0000000..871248f --- /dev/null +++ b/app/components/dashboard/d3-image-info1.tsx @@ -0,0 +1,213 @@ + +//شماتیک بندر امام +import React from "react"; +import { formatNumber } from "~/lib/utils"; + +export type CompanyInfo = { + id: string; + imageUrl: string; + name: string; + costReduction: number; + revenue?: number; + capacity?: number; + costI : number, + capacityI : number, + revenueI : number, + cost : number | string, +}; + +export type D3ImageInfoProps = { + companies: CompanyInfo[]; + width?: number; + height?: number; +}; + +const InfoBox = ({ company, style }: { company: CompanyInfo; style :any }) => { + const hideCapacity = company.name === "خوارزمی"; // اگر خوارزمی بود ظرفیت مخفی شود + return ( +
+
+
+
درآمد:
+
{formatNumber(company?.revenue || 0)}
+
میلیون ریال
+
+
+
هزینه:
+ { + (hideCapacity ? + +
{formatNumber(company?.cost || 0)}
+ : +
{formatNumber(company?.cost || 0)}
+ ) + + } +
میلیون ریال
+
+ {!hideCapacity && ( +
+
ظرفیت:
+
{formatNumber(company?.capacity || 0)}
+
تن در سال
+
+ )} +
+
+ ); +}; + +export function D3ImageInfo({ companies }: D3ImageInfoProps) { + // Ensure we have exactly 6 companies + + const sample = [ + { id: "آب نیرو", name: "آب نیرو", imageUrl: "/abniro.png" }, + { id: "بسپاران", name: "بسپاران", imageUrl: "/besparan.png" }, + { id: "خوارزمی", name: "خوارزمی", imageUrl: "/khwarazmi.png" }, + { id: "فراورش 1", name: "فراورش 1", imageUrl: "/faravash1.png" }, + { id: "فراورش 2", name: "فراورش 2", imageUrl: "/faravash2.png" }, + { id: "کیمیا", name: "کیمیا", imageUrl: "/kimia.png" } + ]; + const merged = sample.map(company => { + const found = companies.find(item => item.id == company.id); + return found + ? found + : { ...company, cost: 0, capacity: 0, revenue: 0 }; + }); + + const displayCompanies = merged; + console.log(displayCompanies) + + // Positions inside a 5x4 grid (col, row) + // Layout keeps same visual logic: left/middle/right on two bands with spacing grid around + const gridPositions = [ + { col: 2, row: 2 , colI : 1 , rowI : 2 , name : "بسپاران"}, // left - top band + { col: 3, row: 2 , colI : 3 , rowI : 1 , name : "خوارزمی"}, // middle top (image sits in row 2, info box goes to row 1) + { col: 4, row: 2 ,colI : 5 , rowI : 2 , name : "فراورش 1"}, // right - top band + { col: 2, row: 3 , colI : 1 , rowI : 3 , name : "کیمیا"}, // left - bottom band + { col: 3, row: 3 , colI : 3, rowI : 4 , name : "آب نیرو"}, // middle bottom (image sits in row 3, info box goes to row 4) + { col: 4, row: 3 , colI : 5 , rowI : 3 , name : "فراورش 2"}, // right - bottom band + ]; + + return ( +
+
+ {displayCompanies.map((company, index) => { + const gp = gridPositions.find(v => v.name === company.name) ; + return ( + <> +
+
+ {company.name} +
+ + {company.name} +
+ + ); + })} +
+ + +
+ ); +} diff --git a/app/components/dashboard/dashboard-home.tsx b/app/components/dashboard/dashboard-home.tsx index a53b119..1599c58 100644 --- a/app/components/dashboard/dashboard-home.tsx +++ b/app/components/dashboard/dashboard-home.tsx @@ -641,16 +641,31 @@ export function DashboardHome() {
{ + // const imageMap: Record = { + // بسپاران: "/besparan.png", + // خوارزمی: "/khwarazmi.png", + // "فراورش 1": "/faravash1.png", + // "فراورش 2": "/faravash2.png", + // کیمیا: "/kimia.png", + // "آب نیرو": "/abniro.png", + // }; + + + //پتروشیمی آپادانا companies={companyChartData.map((item) => { const imageMap: Record = { - بسپاران: "/besparan.png", - خوارزمی: "/khwarazmi.png", - "فراورش 1": "/faravash1.png", - "فراورش 2": "/faravash2.png", - کیمیا: "/kimia.png", - "آب نیرو": "/abniro.png", + "واحد 100": "/abniro.png" , + "واحد 200": "/besparan.png" , + "واحد 300": "/khwarazmi.png" , + "واحد 400": "/faravash1.png" }; + + + + return { id: item.category, name: item.category,