stash

zhangwei900808 · Oct 13, 2021 · d7daaf3 · d7daaf3
1 parent 1fa02db
commit d7daaf3
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 101 deletions.
diff --git a/src/LabelsMonth.tsx b/src/LabelsMonth.tsx
@@ -9,41 +9,44 @@ export interface LablesMonthProps extends React.SVGProps<SVGTextElement> {
   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 };
         }
         return null;
       })
       .filter(Boolean)
       .filter((item, idx, list) => list[idx - 1] && list[idx - 1]!.month !== item!.month);
-  }, [colNum, monthLabels, startDate]);
-
+  }, [colNum, monthLabels, startDate, endDate]);
   return useMemo(
     () => (
       <Fragment>
         {[...data].map((item, idx) => {
+          // console.log('data=',data);
           return (
             <text
               key={idx}
               data-size={rectSize}
-              x={leftPad + space + space}
-              y={15}
+              x={leftPad + space + space + 25}
+              y={30}
               dx={item!.col * (rectSize + space)}
               textAnchor='start'
             >

diff --git a/src/LabelsWeek.tsx b/src/LabelsWeek.tsx
@@ -7,14 +7,15 @@ export interface LablesWeekProps extends React.SVGProps<SVGTextElement> {
   space: SVGProps['space'];
   topPad: number;
 }
+
 export const LabelsWeek = ({ weekLabels = [], rectSize = 0, topPad = 0, space = 0 }: LablesWeekProps) =>
   useMemo(
     () => (
       <Fragment>
         {[...Array(7)].map((_, idx) => {
           if (weekLabels && weekLabels[idx]) {
             return (
-              <text key={idx} x={15} y={topPad} dy={(idx + 1) * (rectSize + space) - 5}>
+              <text key={idx} x={40} y={topPad + 15} dy={(idx + 1) * (rectSize + space) - 5}>
                 {weekLabels[idx]}
               </text>
             );

diff --git 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 <Rect {...rectProps} />;
-        })}
+          return <svg width={size} height={size} style={{marginRight: '4px', borderRadius: 0}}>
+            <Rect {...rectProps} />
+          </svg>;
+
+        })
+        }
       </Fragment>
     ),
     [panelColors, props, size, leftPad, topPad, rectSize, legendRender],

diff --git a/src/SVG.tsx b/src/SVG.tsx
@@ -18,6 +18,7 @@ export interface SVGProps extends React.SVGProps<SVGSVGElement> {
   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 (
-    <svg ref={svgRef} {...other}>
-      {legendCellSize !== 0 && (
-        <Legend
-          legendRender={legendRender}
-          panelColors={panelColors}
+    <div style={{ position: 'relative' }}>
+      <div style={{ position: 'absolute', top: 0, right: 20, height: '30px' }}>
+        {showLegend && legendCellSize !== 0 && (
+          <Legend
+            legendRender={legendRender}
+            panelColors={panelColors}
+            rectSize={rectSize}
+            legendCellSize={legendCellSize}
+            leftPad={leftPad}
+            topPad={topPad}
+            space={space}
+          />
+        )}
+      </div>
+      <svg ref={svgRef} {...other} height={180}>
+        <LabelsWeek weekLabels={weekLabels} rectSize={rectSize} space={space} topPad={topPad} />
+        <LabelsMonth
+          monthLabels={monthLabels}
           rectSize={rectSize}
-          legendCellSize={legendCellSize}
-          leftPad={leftPad}
-          topPad={topPad}
           space={space}
+          leftPad={leftPad}
+          colNum={gridNum}
+          startDate={initStartDate}
+          endDate={endDate}
         />
-      )}
-      <LabelsWeek weekLabels={weekLabels} rectSize={rectSize} space={space} topPad={topPad} />
-      <LabelsMonth
-        monthLabels={monthLabels}
-        rectSize={rectSize}
-        space={space}
-        leftPad={leftPad}
-        colNum={gridNum}
-        startDate={initStartDate}
-      />
-      <g transform={`translate(${leftPad}, ${topPad})`}>
-        {gridNum > 0 &&
+        <g transform={`translate(${leftPad}, ${topPad})`}>
+          {gridNum > 0 &&
           [...Array(gridNum)].map((_, idx) => {
             return (
               <g key={idx} data-column={idx}>
@@ -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) {
               </g>
             );
           })}
-      </g>
-    </svg>
+        </g>
+      </svg>
+    </div>
   );
 }
diff --git a/website/App.tsx b/website/App.tsx
@@ -31,37 +31,37 @@ const App: React.FC = () => {
         </p>
         <Example />
       </header>
-      <MarkdownPreview
-        source={MDStr}
-        className={styles.content}
-        components={{
+      {/*<MarkdownPreview*/}
+      {/*  source={MDStr}*/}
+      {/*  className={styles.content}*/}
+      {/*  components={{*/}
           /**
            * bgWhite 设置代码预览背景白色，否则为格子背景。
            * noCode 不显示代码编辑器。
            * noPreview 不显示代码预览效果。
            * noScroll 预览区域不显示滚动条。
            * codePen 显示 Codepen 按钮，要特别注意 包导入的问题，实例中的 import 主要用于 Codepen 使用。
            */
-           code: ({ inline, node, ...props }) => {
-            const { noPreview, noScroll, bgWhite, noCode, codeSandbox, codePen } = props as any;
-            if (inline) {
-              return <code {...props} />;
-            }
-            const config = { noPreview, noScroll, bgWhite, noCode, codeSandbox, codePen } as any;
-            if (Object.keys(config).filter((name) => config[name] !== undefined).length === 0) {
-              return <code {...props} />;
-            }
-            return (
-              <Code
-                code={getCodeStr(node.children)}
-                dependencies={{ useRef, useEffect, useState, HeatMap, Tooltip }}
-                language={(props.className || '').replace(/^language-/, '')}
-                {...{ noPreview, noScroll, bgWhite, noCode, codeSandbox, codePen }}
-              />
-            );
-          },
-        }}
-      />
+      {/*     code: ({ inline, node, ...props }) => {*/}
+      {/*      const { noPreview, noScroll, bgWhite, noCode, codeSandbox, codePen } = props as any;*/}
+      {/*      if (inline) {*/}
+      {/*        return <code {...props} />;*/}
+      {/*      }*/}
+      {/*      const config = { noPreview, noScroll, bgWhite, noCode, codeSandbox, codePen } as any;*/}
+      {/*      if (Object.keys(config).filter((name) => config[name] !== undefined).length === 0) {*/}
+      {/*        return <code {...props} />;*/}
+      {/*      }*/}
+      {/*      return (*/}
+      {/*        <Code*/}
+      {/*          code={getCodeStr(node.children)}*/}
+      {/*          dependencies={{ useRef, useEffect, useState, HeatMap, Tooltip }}*/}
+      {/*          language={(props.className || '').replace(/^language-/, '')}*/}
+      {/*          {...{ noPreview, noScroll, bgWhite, noCode, codeSandbox, codePen }}*/}
+      {/*        />*/}
+      {/*      );*/}
+      {/*    },*/}
+      {/*  }}*/}
+      {/*/>*/}
     </div>
   );
 };