Skip to content

Commit

Permalink
fix: Fix Typo weekLables -> weekLabels，monthLables -> monthLabels (#61)
Browse files Browse the repository at this point in the history 
* fix:统一标准命名weekLables->weekLabels，monthLables->monthLabels

* update: .gitignore忽略.idea文件

* update .gitignore

* update .gitignore
  • Loading branch information
@zhangwei900808
zhangwei900808 authored Oct 13, 2021
1 parent bb6e820 commit 1e512da
Show file tree
Hide file tree
Showing 6 changed files with 69 additions and 65 deletions.
3 changes: 3 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,6 @@ dist.css
#.swp
*.*~
~*.*

.idea
yarn.lock
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,8 +270,8 @@ ReactDOM.render(<Demo />, _mount_);
| endDate | End date | Date | - |
| space | Interval between grid sizes | number | `2` | 
| rectProps | Grid node attribute settings | `React.SVGProps<SVGRectElement>` | `2` |
| weekLables | Week display | string[] | `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']` | 
| monthLables | Month display | string[] | `['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']` | 
| weekLabels | Week display | string[] | `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']` | 
| monthLabels | Month display | string[] | `['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']` | 
| panelColors | Backgroud color of active colors | `Record<number, string>` | `{ 0: '#EBEDF0', 8: '#7BC96F', 4: '#C6E48B', 12: '#239A3B', 32: '#196127' }` | 
| rectRender | Single `day` block re-render | `<E = SVGRectElement>(data: E & { key: number }, valueItem: HeatMapValue & { date: string, column: number, row: number, index: number }) => React.ReactElement` | - |
| legendRender | Single `legend` block re-render | `(props: React.SVGProps<SVGRectElement>) => React.ReactNode` | - |
Expand Down
27 changes: 14 additions & 13 deletions src/LablesMonth.tsx → src/LabelsMonth.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,36 @@ import { oneDayTime } from './utils';
import { SVGProps } from './SVG';

export interface LablesMonthProps extends React.SVGProps<SVGTextElement> {
monthLables: SVGProps['monthLables'];
monthLabels: SVGProps['monthLabels'];
rectSize: SVGProps['rectSize'];
space: SVGProps['space'];
leftPad: number;
colNum: number;
startDate: SVGProps['startDate'];
}
export const LablesMonth = ({
monthLables = [],
rectSize = 0,
space = 0,
leftPad = 0,
colNum = 0,
startDate,
}: LablesMonthProps) => {

export const LabelsMonth = ({
monthLabels = [],
rectSize = 0,
space = 0,
leftPad = 0,
colNum = 0,
startDate,
}: LablesMonthProps) => {
const data = useMemo(() => {
if (monthLables === false || colNum < 1) return [];
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 month = date.getMonth();
return { col: idx / 7, index: idx, month, day: date.getDate(), monthStr: monthLables[month], date };
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, monthLables, startDate]);
}, [colNum, monthLabels, startDate]);

return useMemo(
() => (
Expand All @@ -44,7 +45,7 @@ export const LablesMonth = ({
x={leftPad + space + space}
y={15}
dx={item!.col * (rectSize + space)}
textAnchor="start"
textAnchor='start'

This comment has been minimized.

Sign in to view

Copy link
@jaywcjlove

jaywcjlove Oct 13, 2021

Member

不符合 react 标准 textAnchor='start' => textAnchor="start"
>
{item!.monthStr}
</text>
Expand Down
10 changes: 5 additions & 5 deletions src/LablesWeek.tsx → src/LabelsWeek.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,26 @@ import React, { Fragment, useMemo } from 'react';
import { SVGProps } from './SVG';

export interface LablesWeekProps extends React.SVGProps<SVGTextElement> {
weekLables: SVGProps['weekLables'];
weekLabels: SVGProps['weekLabels'];
rectSize: SVGProps['rectSize'];
space: SVGProps['space'];
topPad: number;
}
export const LablesWeek = ({ weekLables = [], rectSize = 0, topPad = 0, space = 0 }: LablesWeekProps) =>
export const LabelsWeek = ({ weekLabels = [], rectSize = 0, topPad = 0, space = 0 }: LablesWeekProps) =>
useMemo(
() => (
<Fragment>
{[...Array(7)].map((_, idx) => {
if (weekLables && weekLables[idx]) {
if (weekLabels && weekLabels[idx]) {
return (
<text key={idx} x={15} y={topPad} dy={(idx + 1) * (rectSize + space) - 5}>
{weekLables[idx]}
{weekLabels[idx]}
</text>
);
}
return null;
})}
</Fragment>
),
[rectSize, space, topPad, weekLables],
[rectSize, space, topPad, weekLabels],
);
28 changes: 14 additions & 14 deletions src/SVG.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useEffect, useMemo, useState } from 'react';
import { LablesWeek } from './LablesWeek';
import { LablesMonth } from './LablesMonth';
import { LabelsWeek } from './LabelsWeek';
import { LabelsMonth } from './LabelsMonth';
import { Rect } from './Rect';
import { formatData, getDateToString, existColor, numberSort, isValidDate, oneDayTime } from './utils';
import Legend, { LegendProps } from './Legend';
Expand Down Expand Up @@ -30,8 +30,8 @@ export interface SVGProps extends React.SVGProps<SVGSVGElement> {
},
) => React.ReactElement | void;
value?: Array<HeatMapValue>;
weekLables?: string[] | false;
monthLables?: string[] | false;
weekLabels?: string[] | false;
monthLabels?: string[] | false;
panelColors?: Record<number, string>;
}

Expand All @@ -46,18 +46,18 @@ export default function SVG(props: SVGProps) {
rectRender,
legendRender,
value = [],
weekLables = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
monthLables = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
weekLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
monthLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
panelColors = { 0: '#EBEDF0', 8: '#7BC96F', 4: '#C6E48B', 12: '#239A3B', 32: '#196127' },
...other
} = props || {};
const [gridNum, setGridNum] = useState(0);
const [leftPad, setLeftPad] = useState(!!weekLables ? 28 : 5);
const [topPad, setTopPad] = useState(!!monthLables ? 20 : 5);
const [leftPad, setLeftPad] = useState(!!weekLabels ? 28 : 5);
const [topPad, setTopPad] = useState(!!monthLabels ? 20 : 5);
const svgRef = React.createRef<SVGSVGElement>();
const nums = useMemo(() => numberSort(Object.keys(panelColors).map((item) => parseInt(item, 10))), [panelColors]);
const data = useMemo(() => formatData(value), [value]);
useEffect(() => setLeftPad(!!weekLables ? 28 : 5), [weekLables]);
useEffect(() => setLeftPad(!!weekLabels ? 28 : 5), [weekLabels]);
useEffect(() => {
if (svgRef.current) {
const width = svgRef.current.clientWidth - leftPad || 0;
Expand All @@ -66,8 +66,8 @@ export default function SVG(props: SVGProps) {
}, [rectSize, svgRef, space, leftPad]);

useEffect(() => {
setTopPad(!!monthLables ? 20 : 5);
}, [monthLables]);
setTopPad(!!monthLabels ? 20 : 5);
}, [monthLabels]);

const initStartDate = useMemo(() => {
if (isValidDate(startDate)) {
Expand All @@ -91,9 +91,9 @@ export default function SVG(props: SVGProps) {
space={space}
/>
)}
<LablesWeek weekLables={weekLables} rectSize={rectSize} space={space} topPad={topPad} />
<LablesMonth
monthLables={monthLables}
<LabelsWeek weekLabels={weekLabels} rectSize={rectSize} space={space} topPad={topPad} />
<LabelsMonth
monthLabels={monthLabels}
rectSize={rectSize}
space={space}
leftPad={leftPad}
Expand Down
62 changes: 31 additions & 31 deletions website/Example.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,14 +62,14 @@ const darkColor = { 0: 'rgb(255 255 255 / 25%)', 8: '#7BC96F', 4: '#C6E48B', 12:

export default function Example() {
const [value, setValue] = useState(data1);
const [selectaDate, setSelectaDate] = useState();
const [selectDate, setSelectDate] = useState();
const [enableEndDate, setEnableEndDate] = useState(false);
const [enableDark, setEnableDark] = useState(false);
const [enableCircle, setEnableCircle] = useState(false);
const [rectSize, setRectSize] = useState(11);
const [legendCellSize, setLegendCellSize] = useState<number | undefined>();
const [enableWeekLables, setEnableWeekLables] = useState<false | undefined | string[]>(undefined);
const [enableMonthLables, setEnableMonthLables] = useState<false | undefined | string[]>(undefined);
const [enableWeekLabels, setEnableWeekLabels] = useState<false | undefined | string[]>(undefined);
const [enableMonthLabels, setEnableMonthLabels] = useState<false | undefined | string[]>(undefined);
return (
<Fragment>
<div className={styles.example} style={{ width: 663 }}>
Expand All @@ -82,15 +82,15 @@ export default function Example() {
width={663}
rectSize={rectSize}
legendCellSize={legendCellSize}
weekLables={enableWeekLables}
monthLables={enableMonthLables}
weekLabels={enableWeekLabels}
monthLabels={enableMonthLabels}
startDate={new Date('2016/01/01')}
endDate={enableEndDate ? new Date('2016/6/01') : undefined}
value={value}
rectProps={{
rx: !enableCircle ? 0 : 5,
onClick: (e) => {
setSelectaDate((e.target as any).dataset.date);
setSelectDate((e.target as any).dataset.date);
},
}}
legendRender={(props) => <rect {...props} rx={!enableCircle ? 0 : 5} />}
Expand Down Expand Up @@ -131,7 +131,7 @@ export default function Example() {
<div style={{ paddingLeft: 10, paddingBottom: 20 }}>
<button onClick={() => setValue(data1)}>Value 1</button>
<button onClick={() => setValue(data2)}>Value 2</button>
<span>{selectaDate}</span>
<span>{selectDate}</span>
</div>
<label>
<input type="checkbox" checked={enableEndDate} onChange={(e) => setEnableEndDate(e.target.checked)} />
Expand All @@ -150,60 +150,60 @@ export default function Example() {
<label style={{ marginTop: 15 }}>
<input
type="radio"
name="weekLables"
checked={enableWeekLables === undefined}
onChange={(e) => setEnableWeekLables(undefined)}
name="weekLabels"
checked={enableWeekLabels === undefined}
onChange={(e) => setEnableWeekLabels(undefined)}
/>
weekLables = undefined, Default: {JSON.stringify(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'])}
weekLabels = undefined, Default: {JSON.stringify(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'])}
</label>
<label>
<input
type="radio"
name="weekLables"
checked={enableWeekLables === false}
onChange={(e) => setEnableWeekLables(false)}
name="weekLabels"
checked={enableWeekLabels === false}
onChange={(e) => setEnableWeekLabels(false)}
/>
weekLables = false
weekLabels = false
</label>
<label>
<input
type="radio"
name="weekLables"
checked={Array.isArray(enableWeekLables)}
onChange={(e) => setEnableWeekLables(['日', '一', '', '三', '', '五', '六'])}
name="weekLabels"
checked={Array.isArray(enableWeekLabels)}
onChange={(e) => setEnableWeekLabels(['日', '一', '', '三', '', '五', '六'])}
/>
weekLables = {JSON.stringify(['日', '一', '', '三', '', '五', '六'])}
weekLabels = {JSON.stringify(['日', '一', '', '三', '', '五', '六'])}
</label>

<label style={{ marginTop: 15 }}>
<input
type="radio"
name="monthLables"
checked={enableMonthLables === undefined}
onChange={(e) => setEnableMonthLables(undefined)}
name="monthLabels"
checked={enableMonthLabels === undefined}
onChange={(e) => setEnableMonthLabels(undefined)}
/>
monthLables = undefined, Default:{' '}
monthLabels = undefined, Default:{' '}
{JSON.stringify(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'])}
</label>
<label>
<input
type="radio"
name="monthLables"
checked={enableMonthLables === false}
onChange={(e) => setEnableMonthLables(false)}
name="monthLabels"
checked={enableMonthLabels === false}
onChange={(e) => setEnableMonthLabels(false)}
/>
monthLables = false
monthLabels = false
</label>
<label>
<input
type="radio"
name="monthLables"
checked={Array.isArray(enableMonthLables)}
name="monthLabels"
checked={Array.isArray(enableMonthLabels)}
onChange={(e) =>
setEnableMonthLables(['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'])
setEnableMonthLabels(['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'])
}
/>
monthLables = {JSON.stringify(['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'])}
monthLabels = {JSON.stringify(['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'])}
</label>

<div style={{ display: 'flex', marginTop: 10 }}>
Expand Down

0 comments on commit 1e512da

Please sign in to comment.