From 239e0734b3b2f4e90156ab87950fd7a87c71299d Mon Sep 17 00:00:00 2001 From: Quy_FE Date: Mon, 28 Apr 2025 10:27:26 +0700 Subject: [PATCH] Feat : chart style --- src/_components/Header/index.js | 19 ++-- .../boxChart/BoxDoughnutBarChart.js | 89 ++++++++++--------- src/_components/boxChart/BoxDoughnutChar.js | 21 ++++- src/_components/chart/RDoughnutChart.js | 8 ++ src/_components/chart/VerticalBarChart.js | 9 +- src/_components/renderIcon/index.js | 14 +++ .../criteria/criteria-manage/index.js | 1 + src/_screens/home/admin/index.js | 1 + src/_screens/home/detail-grade/index.js | 1 + .../home/detail-room-education/index.js | 64 ++++++------- .../educationDepartmentHome.style.scss | 10 +++ .../home/education-department/index.js | 34 +++++-- src/_screens/home/headmaster/index.js | 1 + .../home/outstanding-teacher/index.js | 2 +- src/_screens/home/teacher/index.js | 1 + 15 files changed, 186 insertions(+), 89 deletions(-) diff --git a/src/_components/Header/index.js b/src/_components/Header/index.js index f95383f..de3a77b 100644 --- a/src/_components/Header/index.js +++ b/src/_components/Header/index.js @@ -2,14 +2,23 @@ import { useSelector } from "react-redux"; import "./header.style.scss"; import { configConstants } from "../../_constants"; -export default function Header({ icon, title, subtitles = [] }) { +export default function Header({ icon, title, subtitles = [],manager=false }) { const authentication = useSelector((state) => state.authentication); const { fullname, organization_name, role } = authentication?.user || {}; const hasFullName = fullname || organization_name; - const fullName = role === "organization_admin" - ? `${organization_name && !organization_name.toLowerCase().includes('giáo dục') ? 'Hiệu trưởng ' : ''}${hasFullName}` - : fullname; + + const handleFullName = () =>{ + let fullName + if(manager){ + fullName = 'Giám đốc ' + hasFullName + }else{ + fullName = role === "organization_admin" + ? `${organization_name ? 'Hiệu trưởng ' : ''}${hasFullName}` + : fullname; + } + return fullName + } return (
@@ -27,7 +36,7 @@ export default function Header({ icon, title, subtitles = [] }) {

-

{fullName}

+

{handleFullName()}

{ + const handleMonthChange = (date) => { setMonth(date) - !!onSetDateBarChart && onSetDateBarChart(date) + onSetDateBarChart?.(date) } - const _dataDoughnut = (dataDoughnut?.[0] / dataDoughnut?.[1] === 1 || dataDoughnut?.[0] > dataDoughnut?.[1]) ? [dataDoughnut?.[0]] : [dataDoughnut?.[0], dataDoughnut?.[1] - dataDoughnut?.[0]] - - - const renderIconDate = () => { - return ( - - - - ) - } - - return ( -
-
- {!!titleDoughnut &&

{titleDoughnut}

} - {!!subtitleDoughnut &&

{subtitleDoughnut}

} -
-
- -
-
-

{dataDoughnut?.[0] + '/' + dataDoughnut?.[1]}

-

{Math.round(dataDoughnut?.[0]/dataDoughnut?.[1] * 100) + '%'}

-
+ const renderDoughnutSection = () => ( +
+ {titleDoughnut &&

{titleDoughnut}

} + {subtitleDoughnut &&

{subtitleDoughnut}

} +
+
+ +
+
+

{current}

+

+ {target > 0 ? target : '...'} +

-
- {!!titleLine &&

{titleLine}

} - {!!subTitleLine &&

{subTitleLine}

} +
+ ) + + const renderBarSection = () => ( +
+ {titleLine &&

{titleLine}

} + {subTitleLine &&

{subTitleLine}

} + {dataBarChart.length > 0 ? (
-
+ ) : ( +
+ Không có dữ liệu để hiển thị +
+ )} +
+ ) + + return ( +
+ {renderDoughnutSection()} + {renderBarSection()}
- {/* {renderArrowLeft()} - Tháng 11 - {renderArrowRight()} */} data?.[1]) ? [data?.[0]] : [data?.[0], data?.[1] - data?.[0]] + const [current, target] = data + + const chartData = (current / target === 1 || current > target) ? [current] : [current, target - current]; + + const renderStats = () => { + return ( + <> +

{current}

+

{target > 0 ? target : '...'}

+ + ) + } + return (

{title}

-
+
+ +
-

{data?.[0] + '/' + data?.[1]}

-

{Math.round(data?.[0]/data?.[1] * 100) + '%'}

+ {renderStats()}
diff --git a/src/_components/chart/RDoughnutChart.js b/src/_components/chart/RDoughnutChart.js index 06cfba5..ea29a09 100644 --- a/src/_components/chart/RDoughnutChart.js +++ b/src/_components/chart/RDoughnutChart.js @@ -10,6 +10,14 @@ export default function RDoughnutChart({data = [], ...other}) { return null } + // data = data.map((item, index) => { + // if (index === 1 && item === 0) { + // return 1 + // } + // return item + // }) + // console.log('data',data); + return item.replace('Tuần', 'W')); const options = { responsive: true, @@ -28,7 +29,7 @@ export function VerticalBarChart({data = [], labels = []}) { align: 'end', // Alignment of the labels (start, end, center, etc.) color: 'blue', // Color of the labels font: { - weight: 'bold', + weight: 'bold', }, formatter: function (value, context) { return value; // Display the actual data value @@ -36,6 +37,12 @@ export function VerticalBarChart({data = [], labels = []}) { } }, scales: { + x: { + ticks: { + maxRotation: 0, + // scrollX : true, + }, + }, y: { max: maxValue < 5 ? 5 : maxValue < 20 ? maxValue + 5 : maxValue + 10, ticks: { diff --git a/src/_components/renderIcon/index.js b/src/_components/renderIcon/index.js index 66d9d01..344be74 100644 --- a/src/_components/renderIcon/index.js +++ b/src/_components/renderIcon/index.js @@ -139,3 +139,17 @@ export const renderIconSearchInput = () => { ); }; +export const renderIconButton = () => { + return ( + + ) +} + +export const renderIconDate = () => ( + + + +) \ No newline at end of file diff --git a/src/_screens/criteria/criteria-manage/index.js b/src/_screens/criteria/criteria-manage/index.js index 0890e14..a889d5c 100644 --- a/src/_screens/criteria/criteria-manage/index.js +++ b/src/_screens/criteria/criteria-manage/index.js @@ -313,6 +313,7 @@ export default function CriteriaManage() { isLoadMoreOnline && !isLoading ) { + if(listData.length < limitOnline) return onLoadMoreClasses(); } }; diff --git a/src/_screens/home/admin/index.js b/src/_screens/home/admin/index.js index 7cf5caf..5b9d07a 100644 --- a/src/_screens/home/admin/index.js +++ b/src/_screens/home/admin/index.js @@ -262,6 +262,7 @@ export default function AdminHome() { isLoadMoreOnline && !isLoading ) { + if(listSchool.length < limitOnline) return onLoadMoreClasses(); } }; diff --git a/src/_screens/home/detail-grade/index.js b/src/_screens/home/detail-grade/index.js index 1c669f8..d3f76ea 100644 --- a/src/_screens/home/detail-grade/index.js +++ b/src/_screens/home/detail-grade/index.js @@ -142,6 +142,7 @@ export default function DetailGrade() { isLoadMoreOnline && !isLoading ) { + if(listClass.length < limitOnline) return onLoadMoreClasses(); } }; diff --git a/src/_screens/home/detail-room-education/index.js b/src/_screens/home/detail-room-education/index.js index 0fabe4f..81eb9c1 100644 --- a/src/_screens/home/detail-room-education/index.js +++ b/src/_screens/home/detail-room-education/index.js @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; import Header from "../../../_components/Header"; -import { renderIconHome } from "../../../_components/renderIcon"; +import { renderIconButton, renderIconHome } from "../../../_components/renderIcon"; import RateStar from "../../../_components/RateStar"; import { defaultMonthYearSemester, getListMonthBySemester, LIST_SCHOOL_YEAR, LIST_SEMESTER, PRIMARY_COLOR } from "../../../_constants/common"; import { configConstants, PATH } from "../../../_constants"; @@ -211,49 +211,51 @@ export default function DetailRoomEducation() { } }, [isLoadingListOrganization, isLoadingStatisticCircle, isLoadingStudentChart, isLoadingTeacherChart]) - const renderIconButton = () => { - return ( - - ) - } return (
-
+ {data ? + (<> +
-
-
- Number(item?.total_teacher_assignment))} - labelsBarChart={dataTeacherChart?.map(item => item?.label)} - dataDoughnut={[data?.teacher_join, data?.total_teacher]} - titleDoughnut={'Giáo viên'} - subtitleDoughnut={'Số giáo viên đã tham gia'} - subTitleLine={"Số giáo viên giao bài trong tuần"} - /> - Number(item?.total_student_learn))} - labelsBarChart={dataStudentChart?.map(item => item?.label)} - dataDoughnut={[data?.student_join, data?.total_student]} - titleDoughnut={'Học sinh'} - subtitleDoughnut={'Số học sinh đã tham gia'} - subTitleLine={"Số học sinh làm bài trong tuần"} - /> -
+
+
+ Number(item?.total_teacher_assignment))} + labelsBarChart={dataTeacherChart?.map(item => item?.label)} + dataDoughnut={[data?.teacher_join, data?.total_teacher]} + titleDoughnut={'Giáo viên'} + subtitleDoughnut={'Số giáo viên đã tham gia'} + subTitleLine={"Số giáo viên giao bài trong tuần"} + /> + Number(item?.total_student_learn))} + labelsBarChart={dataStudentChart?.map(item => item?.label)} + dataDoughnut={[data?.student_join, data?.total_student]} + titleDoughnut={'Học sinh'} + subtitleDoughnut={'Số học sinh đã tham gia'} + subTitleLine={"Số học sinh làm bài trong tuần"} + /> +
+ ) + : + "Không có dữ liệu để hiển thị" + }
diff --git a/src/_screens/home/education-department/educationDepartmentHome.style.scss b/src/_screens/home/education-department/educationDepartmentHome.style.scss index 0cac2d4..f95d0d2 100644 --- a/src/_screens/home/education-department/educationDepartmentHome.style.scss +++ b/src/_screens/home/education-department/educationDepartmentHome.style.scss @@ -26,6 +26,16 @@ flex-direction: column; background-color: #fff; + // .search-input { + // border-radius: 40px; + // height: 46px; + // width: 50%; + + // @include screen_pc_sm { + // height: 34px; + // } + // } + .education-department-home-note { font-size: 2rem; font-weight: 700; diff --git a/src/_screens/home/education-department/index.js b/src/_screens/home/education-department/index.js index 419c656..029fb81 100644 --- a/src/_screens/home/education-department/index.js +++ b/src/_screens/home/education-department/index.js @@ -2,6 +2,7 @@ import { useEffect, useState } from "react"; import InputText from "../../../_components/Auth/InputText"; import Header from "../../../_components/Header"; import { + renderIconButton, renderIconHome, renderIconSearchInput, } from "../../../_components/renderIcon"; @@ -24,6 +25,7 @@ export default function EducationDepartmentHome() { const [dataStudentChart, setDataStudentChart] = useState([]) const [dataTeacherChart, setDataTeacherChart] = useState([]) const [listOrganization, setListOrganization] = useState([]) + const [searchText, setSearchText] = useState('') const getDataOrganization = async () => { try { @@ -109,22 +111,21 @@ export default function EducationDepartmentHome() { ); }; - const renderIconButton = () => { - return ( - - ) + const handleSubmit = ()=>{ + } return (
- {!!data &&
+ {!!data ?
@@ -154,7 +155,12 @@ export default function EducationDepartmentHome() { subTitleLine={"Số học sinh làm bài trong tuần"} />
-
} +
+ : +
+ Không có dữ liệu để hiển thị +
+ }
Top 10 giáo viên tiêu biểu @@ -166,6 +172,20 @@ export default function EducationDepartmentHome() {

Danh sách phòng giáo dục

+ {/* { + if (e.which == 13 && !isFilterSchool) { + handleSubmit(); + } + }} + /> */}
{listOrganization.map((item, index) => ( diff --git a/src/_screens/home/headmaster/index.js b/src/_screens/home/headmaster/index.js index 66abfc8..a2e5bed 100644 --- a/src/_screens/home/headmaster/index.js +++ b/src/_screens/home/headmaster/index.js @@ -169,6 +169,7 @@ export default function HeadmasterHome() { isLoadMoreOnline && !isLoading ) { + if(listTeacher.length < limitOnline) return onLoadMoreClasses(); } }; diff --git a/src/_screens/home/outstanding-teacher/index.js b/src/_screens/home/outstanding-teacher/index.js index cdb335e..c7469a7 100644 --- a/src/_screens/home/outstanding-teacher/index.js +++ b/src/_screens/home/outstanding-teacher/index.js @@ -59,7 +59,7 @@ export default function OutstandingTeacher() {
diff --git a/src/_screens/home/teacher/index.js b/src/_screens/home/teacher/index.js index 2d0ec0d..49247ba 100644 --- a/src/_screens/home/teacher/index.js +++ b/src/_screens/home/teacher/index.js @@ -175,6 +175,7 @@ export default function TeacherHome() { isLoadMoreOnline && !isLoading ) { + if(listClass.length < limitOnline) return onLoadMoreClasses(); } };