fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-05-04 21:19:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(gantt): gantt chart block overlapping months in calendar header for month view (#6753)

Browse Source 
* style: gantt block calendar header style improve

* style: gantt block calendar header style improve
This commit is contained in:
Katherine 2025-04-23 16:49:41 +08:00 committed by GitHub
parent ced8af89ef
commit 285918c1a8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 9 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/plugins/@nocobase/plugin-gantt/src/client/components/calendar/calendar.tsx
View File

@ -52,12 +52,7 @@ export const Calendar: React.FC<CalendarProps> = ({
const date = dateSetup.dates[i];
const bottomValue = date.getFullYear();
bottomValues.push(
<text
key={date.getTime()}
y={headerHeight * 0.8}
x={columnWidth * i + columnWidth * 0.5}
className={cx('calendarBottomText')}
>
<text key={date.getTime()} y={headerHeight * 0.8} x={columnWidth * i + columnWidth * 0.5}>
{bottomValue}
</text>,
);
@ -98,7 +93,7 @@ export const Calendar: React.FC<CalendarProps> = ({
key={date.getTime()}
y={headerHeight * 0.8}
x={columnWidth * i + columnWidth * 0.5}
className={cx('calendarBottomText')}
className={styles.calendarBottomText}
>
{quarter}
</text>,
@ -118,7 +113,7 @@ export const Calendar: React.FC<CalendarProps> = ({
x1Line={columnWidth * i}
y1Line={0}
y2Line={topDefaultHeight}
xText={Math.abs(xText)}
xText={Math.abs(xText) - 200}
yText={topDefaultHeight * 0.9}
/>,
);
@ -139,7 +134,7 @@ export const Calendar: React.FC<CalendarProps> = ({
key={bottomValue + date.getFullYear()}
y={headerHeight * 0.8}
x={columnWidth * i + columnWidth * 0.5}
className={cx('calendarBottomText')}
className={styles.calendarBottomText}
>
{bottomValue}
</text>,
@ -189,7 +184,7 @@ export const Calendar: React.FC<CalendarProps> = ({
key={date.getTime()}
y={headerHeight * 0.8}
x={columnWidth * (i + +rtl)}
className={cx('calendarBottomText')}
className={styles.calendarBottomText}
>
{bottomValue}
</text>,

3
packages/plugins/@nocobase/plugin-gantt/src/client/components/calendar/style.tsx
View File

@ -23,6 +23,9 @@ const useStyles = createStyles(({ token, css }) => {
background: ${colorFillAlterSolid};
border-bottom: 1px solid ${token.colorBorderSecondary};
`,
calendarBottomText: css`
font-size: 11px;
`,
nbGanttCalendar: css`
.calendarbottomtext: {
textanchor: middle;

2
packages/plugins/@nocobase/plugin-gantt/src/client/components/gantt/gantt.tsx
View File

@ -47,7 +47,7 @@ import { TaskGantt } from './task-gantt';
import { TaskGanttContentProps } from './task-gantt-content';
const getColumnWidth = (dataSetLength: any, clientWidth: any) => {
const columnWidth = clientWidth / dataSetLength > 50 ? Math.floor(clientWidth / dataSetLength) + 20 : 50;
const columnWidth = clientWidth / dataSetLength > 50 ? Math.floor(clientWidth / dataSetLength) + 20 : 60;
return columnWidth;
};