fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-05-05 05:29:26 +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 date = dateSetup.dates[i];
const bottomValue = date.getFullYear(); const bottomValue = date.getFullYear();
bottomValues.push( bottomValues.push(
<text <text key={date.getTime()} y={headerHeight * 0.8} x={columnWidth * i + columnWidth * 0.5}>
key={date.getTime()}
y={headerHeight * 0.8}
x={columnWidth * i + columnWidth * 0.5}
className={cx('calendarBottomText')}
>
{bottomValue} {bottomValue}
</text>, </text>,
); );
@ -98,7 +93,7 @@ export const Calendar: React.FC<CalendarProps> = ({
key={date.getTime()} key={date.getTime()}
y={headerHeight * 0.8} y={headerHeight * 0.8}
x={columnWidth * i + columnWidth * 0.5} x={columnWidth * i + columnWidth * 0.5}
className={cx('calendarBottomText')} className={styles.calendarBottomText}
> >
{quarter} {quarter}
</text>, </text>,
@ -118,7 +113,7 @@ export const Calendar: React.FC<CalendarProps> = ({
x1Line={columnWidth * i} x1Line={columnWidth * i}
y1Line={0} y1Line={0}
y2Line={topDefaultHeight} y2Line={topDefaultHeight}
xText={Math.abs(xText)} xText={Math.abs(xText) - 200}
yText={topDefaultHeight * 0.9} yText={topDefaultHeight * 0.9}
/>, />,
); );
@ -139,7 +134,7 @@ export const Calendar: React.FC<CalendarProps> = ({
key={bottomValue + date.getFullYear()} key={bottomValue + date.getFullYear()}
y={headerHeight * 0.8} y={headerHeight * 0.8}
x={columnWidth * i + columnWidth * 0.5} x={columnWidth * i + columnWidth * 0.5}
className={cx('calendarBottomText')} className={styles.calendarBottomText}
> >
{bottomValue} {bottomValue}
</text>, </text>,
@ -189,7 +184,7 @@ export const Calendar: React.FC<CalendarProps> = ({
key={date.getTime()} key={date.getTime()}
y={headerHeight * 0.8} y={headerHeight * 0.8}
x={columnWidth * (i + +rtl)} x={columnWidth * (i + +rtl)}
className={cx('calendarBottomText')} className={styles.calendarBottomText}
> >
{bottomValue} {bottomValue}
</text>, </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}; background: ${colorFillAlterSolid};
border-bottom: 1px solid ${token.colorBorderSecondary}; border-bottom: 1px solid ${token.colorBorderSecondary};
`, `,
calendarBottomText: css`
font-size: 11px;
`,
nbGanttCalendar: css` nbGanttCalendar: css`
.calendarbottomtext: { .calendarbottomtext: {
textanchor: middle; 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'; import { TaskGanttContentProps } from './task-gantt-content';
const getColumnWidth = (dataSetLength: any, clientWidth: any) => { 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; return columnWidth;
}; };