From d7daaf3f4bee97f4537a644eabb171df8c097c97 Mon Sep 17 00:00:00 2001 From: zhang wei Date: Wed, 13 Oct 2021 18:23:49 +0800 Subject: [PATCH] stash --- src/LabelsMonth.tsx | 25 ++++++++++-------- src/LabelsWeek.tsx | 3 ++- src/Legend.tsx | 31 ++++++++++++---------- src/SVG.tsx | 63 ++++++++++++++++++++++++++------------------- website/App.tsx | 48 +++++++++++++++++----------------- website/Example.tsx | 54 +++++++++++++++++++------------------- 6 files changed, 123 insertions(+), 101 deletions(-) diff --git a/src/LabelsMonth.tsx b/src/LabelsMonth.tsx index 3be42a62..5fafa213 100644 --- a/src/LabelsMonth.tsx +++ b/src/LabelsMonth.tsx @@ -9,22 +9,25 @@ export interface LablesMonthProps extends React.SVGProps { leftPad: number; colNum: number; startDate: SVGProps['startDate']; + endDate: SVGProps['endDate']; } export const LabelsMonth = ({ - monthLabels = [], - rectSize = 0, - space = 0, - leftPad = 0, - colNum = 0, - startDate, - }: LablesMonthProps) => { + monthLabels = [], + rectSize = 0, + space = 0, + leftPad = 0, + colNum = 0, + startDate, + endDate, + }: LablesMonthProps) => { const data = useMemo(() => { if (monthLabels === false || colNum < 1) return []; return [...Array(colNum * 7)] .map((_, idx) => { if ((idx / 7) % 1 === 0) { const date = new Date(startDate!.getTime() + idx * oneDayTime); + const _endDate = new Date(); const month = date.getMonth(); return { col: idx / 7, index: idx, month, day: date.getDate(), monthStr: monthLabels[month], date }; } @@ -32,18 +35,18 @@ export const LabelsMonth = ({ }) .filter(Boolean) .filter((item, idx, list) => list[idx - 1] && list[idx - 1]!.month !== item!.month); - }, [colNum, monthLabels, startDate]); - + }, [colNum, monthLabels, startDate, endDate]); return useMemo( () => ( {[...data].map((item, idx) => { + // console.log('data=',data); return ( diff --git a/src/LabelsWeek.tsx b/src/LabelsWeek.tsx index c2632c43..6d1c74f6 100644 --- a/src/LabelsWeek.tsx +++ b/src/LabelsWeek.tsx @@ -7,6 +7,7 @@ export interface LablesWeekProps extends React.SVGProps { space: SVGProps['space']; topPad: number; } + export const LabelsWeek = ({ weekLabels = [], rectSize = 0, topPad = 0, space = 0 }: LablesWeekProps) => useMemo( () => ( @@ -14,7 +15,7 @@ export const LabelsWeek = ({ weekLabels = [], rectSize = 0, topPad = 0, space = {[...Array(7)].map((_, idx) => { if (weekLabels && weekLabels[idx]) { return ( - + {weekLabels[idx]} ); diff --git a/src/Legend.tsx b/src/Legend.tsx index 9c3e3caa..df286572 100644 --- a/src/Legend.tsx +++ b/src/Legend.tsx @@ -11,16 +11,17 @@ export interface LegendProps extends RectProps { topPad: number; space: number; } + export default function Legend({ - panelColors, - leftPad = 0, - topPad = 0, - space = 0, - rectSize = 0, - legendCellSize = 0, - legendRender, - ...props -}: LegendProps) { + panelColors, + leftPad = 0, + topPad = 0, + space = 0, + rectSize = 0, + legendCellSize = 0, + legendRender, + ...props + }: LegendProps) { let size = legendCellSize || rectSize; return useMemo( () => ( @@ -29,15 +30,19 @@ export default function Legend({ const rectProps = { ...props, key, - x: (size + 1) * key + leftPad, - y: topPad + rectSize * 8 + 6, + // x: (size + 1) * key + leftPad, + // y: topPad + rectSize * 8 + 6, fill: panelColors![Number(num)], width: size, height: size, }; if (legendRender) return legendRender(rectProps); - return ; - })} + return + + ; + + }) + } ), [panelColors, props, size, leftPad, topPad, rectSize, legendRender], diff --git a/src/SVG.tsx b/src/SVG.tsx index 2264557d..5f0db3fb 100644 --- a/src/SVG.tsx +++ b/src/SVG.tsx @@ -18,6 +18,7 @@ export interface SVGProps extends React.SVGProps { endDate?: Date; rectSize?: number; legendCellSize?: number; + showLegend?: boolean; space?: number; rectProps?: RectProps; legendRender?: LegendProps['legendRender']; @@ -39,6 +40,7 @@ export default function SVG(props: SVGProps) { const { rectSize = 11, legendCellSize = 11, + showLegend = true, space = 2, startDate = new Date(), endDate, @@ -71,37 +73,44 @@ export default function SVG(props: SVGProps) { const initStartDate = useMemo(() => { if (isValidDate(startDate)) { - return !startDate.getDay() ? startDate : new Date(startDate.getTime() - startDate.getDay() * oneDayTime); + console.log('startDate=', startDate); + return new Date(startDate.getTime()) } else { const newDate = new Date(); - return new Date(newDate.getTime() - newDate.getDay() * oneDayTime); + const s = new Date(newDate.getTime() - newDate.getDay() * oneDayTime); + console.log('s=', s); + return s; } }, [startDate]); return ( - - {legendCellSize !== 0 && ( - +
+ {showLegend && legendCellSize !== 0 && ( + + )} +
+ + + - )} - - - - {gridNum > 0 && + + {gridNum > 0 && [...Array(gridNum)].map((_, idx) => { return ( @@ -112,11 +121,12 @@ export default function SVG(props: SVGProps) { fill: '#EBEDF0', width: rectSize, height: rectSize, - x: idx * (rectSize + space), - y: (rectSize + space) * cidx, + x: idx * (rectSize + space) + 25, + y: (rectSize + space) * cidx + 15, }; const currentDate = new Date(initStartDate.getTime() + oneDayTime * (idx * 7 + cidx)); const date = getDateToString(currentDate); + console.log('daten=', date); const dataProps = { ...data[date], date: date, @@ -152,7 +162,8 @@ export default function SVG(props: SVGProps) { ); })} - - + + + ); } diff --git a/website/App.tsx b/website/App.tsx index 90d00ee0..756d9666 100644 --- a/website/App.tsx +++ b/website/App.tsx @@ -31,10 +31,10 @@ const App: React.FC = () => {

- { * noScroll 预览区域不显示滚动条。 * codePen 显示 Codepen 按钮，要特别注意 包导入的问题，实例中的 import 主要用于 Codepen 使用。 */ - code: ({ inline, node, ...props }) => { - const { noPreview, noScroll, bgWhite, noCode, codeSandbox, codePen } = props as any; - if (inline) { - return ; - } - const config = { noPreview, noScroll, bgWhite, noCode, codeSandbox, codePen } as any; - if (Object.keys(config).filter((name) => config[name] !== undefined).length === 0) { - return ; - } - return ( - - ); - }, - }} - /> + {/* code: ({ inline, node, ...props }) => {*/} + {/* const { noPreview, noScroll, bgWhite, noCode, codeSandbox, codePen } = props as any;*/} + {/* if (inline) {*/} + {/* return ;*/} + {/* }*/} + {/* const config = { noPreview, noScroll, bgWhite, noCode, codeSandbox, codePen } as any;*/} + {/* if (Object.keys(config).filter((name) => config[name] !== undefined).length === 0) {*/} + {/* return ;*/} + {/* }*/} + {/* return (*/} + {/* */} + {/* );*/} + {/* },*/} + {/* }}*/} + {/*/>*/} ); }; diff --git a/website/Example.tsx b/website/Example.tsx index 3d1cf591..17446c8e 100644 --- a/website/Example.tsx +++ b/website/Example.tsx @@ -67,37 +67,39 @@ export default function Example() { const [enableDark, setEnableDark] = useState(false); const [enableCircle, setEnableCircle] = useState(false); const [rectSize, setRectSize] = useState(11); + const [space, setSpace] = useState(4); const [legendCellSize, setLegendCellSize] = useState(); const [enableWeekLabels, setEnableWeekLabels] = useState(undefined); const [enableMonthLabels, setEnableMonthLabels] = useState(undefined); return ( -
+
{ setSelectDate((e.target as any).dataset.date); }, }} - legendRender={(props) => } + // legendRender={(props) => } rectRender={(props, data) => { // if (!data.count) return ; return ( - + ); @@ -134,23 +136,23 @@ export default function Example() { {selectDate}