twhelp/version.tribalwarshelp.com
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update charts configuration (decrease font size, change paddings, remove legend and change tick values), change datepicker/datetimepicker format, ServerPage layout - make sidebar nav nested links expandability optional

Browse Source
This commit is contained in:
Dawid Wysokiński 2021-01-01 10:51:18 +01:00
parent 645af393f8
commit 1e21260aee
15 changed files with 55 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/common/Chart/theme.ts
View File

@ -6,6 +6,7 @@ export const darkTheme: Theme = {
stroke: '#fff',
},
},
fontSize: 10,
grid: {
line: {
stroke: '#fff',

3
src/common/Picker/DatePicker.tsx
View File

@ -4,12 +4,13 @@ import {
DatePicker as MUIDatePicker,
DatePickerProps,
} from '@material-ui/pickers';
import { DATE_FORMAT } from '@config/app';
import useI18N from './useI18N';
import useDialogStyles from './useDialogStyles';
function DatePicker({
className,
format = 'yyyy/MM/dd',
format = DATE_FORMAT.DAY_MONTH_AND_YEAR,
...props
}: DatePickerProps) {
const classes = useDialogStyles();

8
src/common/Picker/DateTimePicker.tsx
View File

@ -1,16 +1,18 @@
import React from 'react';
import clsx from 'clsx';
import { DATE_FORMAT } from '@config/app';
import useI18N from './useI18N';
import useDialogStyles from './useDialogStyles';
import {
DateTimePicker as MUIDateTimePicker,
DateTimePickerProps,
} from '@material-ui/pickers';
import useI18N from './useI18N';
import useDialogStyles from './useDialogStyles';
function DateTimePicker({
className,
ampm = false,
format = 'yyyy/MM/dd HH:mm',
format = DATE_FORMAT.HOUR_MINUTES_DAY_MONTH_AND_YEAR,
...props
}: DateTimePickerProps) {
const classes = useDialogStyles();

2
src/config/app.ts
View File

@ -1,4 +1,4 @@
export const DEFAULT_LANGUAGE = process.env.REACT_APP_DEFAULT_LANGUAGE ?? 'pl';
export const DEFAULT_LANGUAGE = process.env.REACT_APP_DEFAULT_LANGUAGE ?? 'en';
export const NAME = 'TWHelp';

12
src/features/ServerPage/common/PageLayout/components/Sidebar/components/Nav/ListItem.tsx
View File

@ -20,17 +20,21 @@ export interface Props {
}
function ListItem({ route, nestedLevel }: Props) {
const [open, setOpen] = useState(false);
const classes = useStyles();
const { pathname } = useLocation();
const hasNested = Array.isArray(route.nested) && route.nested.length > 0;
const isActive =
route.to && matchPath(pathname, { path: route.to, exact: route.exact });
!!route.to && !!matchPath(pathname, { path: route.to, exact: route.exact });
const [open, setOpen] = useState(
(hasNested && isActive) || !route.isExpandable
);
const getItem = () => {
return (
<MUIListItem
onClick={hasNested ? () => setOpen(!open) : undefined}
onClick={
hasNested && route.isExpandable ? () => setOpen(!open) : undefined
}
disableGutters
button
style={{ paddingLeft: `${nestedLevel * 8}px` }}
@ -48,7 +52,7 @@ function ListItem({ route, nestedLevel }: Props) {
})}
primary={route.name}
/>
{hasNested && (
{hasNested && !!route.isExpandable && (
<Fragment>{open ? <ExpandLess /> : <ExpandMore />}</Fragment>
)}
</MUIListItem>

1
src/features/ServerPage/common/PageLayout/components/Sidebar/components/Nav/types.ts
View File

@ -7,4 +7,5 @@ export interface Route {
params?: Props['params'];
Icon: React.ReactElement;
nested?: Route[];
isExpandable?: boolean;
}

21
src/features/ServerPage/features/EnnoblementsPage/components/LatestSavedEnnoblements/LatestSavedEnnoblements.tsx
View File

@ -29,11 +29,11 @@ export interface Props {
function LatestSavedEnnoblements({ t, server }: Props) {
const classes = useStyles();
const dateUtils = useDateUtils();
const now = useRef(dateUtils.date());
const now = useRef(new Date());
const [query, setQuery] = useQueryParams({
page: withDefault(NumberParam, 0),
limit: withDefault(NumberParam, LIMIT),
ennobledAtGTE: withDefault(DateTimeParam, dateUtils.date(0)),
ennobledAtGTE: withDefault(DateTimeParam, new Date(0)),
ennobledAtLTE: withDefault(DateTimeParam, now.current),
});
const limit = validateRowsPerPage(query.limit);
@ -48,8 +48,8 @@ function LatestSavedEnnoblements({ t, server }: Props) {
offset: query.page * limit,
sort: ['ennobledAt DESC'],
filter: {
ennobledAtGTE: dateUtils.zonedTimeToUTC(query.ennobledAtGTE),
ennobledAtLTE: dateUtils.zonedTimeToUTC(query.ennobledAtLTE),
ennobledAtGTE: query.ennobledAtGTE,
ennobledAtLTE: query.ennobledAtLTE,
},
server,
},
@ -64,13 +64,13 @@ function LatestSavedEnnoblements({ t, server }: Props) {
{[
{
id: 'ennobledAtGTE',
value: query.ennobledAtGTE,
maxDate: query.ennobledAtLTE,
value: dateUtils.date(query.ennobledAtGTE.getTime()),
maxDate: dateUtils.date(query.ennobledAtLTE.getTime()),
},
{
id: 'ennobledAtLTE',
value: query.ennobledAtLTE,
minDate: query.ennobledAtGTE,
value: dateUtils.date(query.ennobledAtLTE.getTime()),
minDate: dateUtils.date(query.ennobledAtGTE.getTime()),
},
].map(({ id, value, maxDate, minDate }) => {
return (
@ -85,7 +85,10 @@ function LatestSavedEnnoblements({ t, server }: Props) {
minDate={minDate}
showTodayButton
onChange={d => {
setQuery({ [id]: d ? d : undefined, page: 0 });
setQuery({
[id]: d ? dateUtils.zonedTimeToUTC(d) : undefined,
page: 0,
});
}}
InputLabelProps={{
shrink: true,

29
src/features/ServerPage/features/IndexPage/components/PlayerStatistics/PlayerStatistics.tsx
View File

@ -61,7 +61,7 @@ function PlayerStatistics({ server, t }: Props) {
<LineChart
loading={loading}
data={data}
margin={{ top: 20, right: 100, bottom: 50, left: 45 }}
margin={{ top: 20, right: 45, bottom: 50, left: 45 }}
xScale={{
type: 'time',
}}
@ -74,7 +74,7 @@ function PlayerStatistics({ server, t }: Props) {
}}
xFormat="time:%Y-%m-%d"
axisBottom={{
tickValues: 'every 6 days',
tickValues: 'every 8 days',
tickPadding: 5,
tickRotation: 0,
format: '%Y-%m-%d',
@ -83,32 +83,13 @@ function PlayerStatistics({ server, t }: Props) {
legendOffset: -42,
legendPosition: 'middle',
tickSize: 0,
tickPadding: 4,
tickPadding: 7,
}}
pointSize={10}
pointColor={{ theme: 'background' }}
pointBorderWidth={2}
pointSize={8}
pointBorderColor={{ from: 'serieColor' }}
pointLabelYOffset={-12}
pointLabelYOffset={-6}
useMesh={true}
colors={{ scheme: 'nivo' }}
legends={[
{
anchor: 'bottom-right',
direction: 'column',
justify: false,
translateX: 100,
translateY: 0,
itemsSpacing: 0,
itemDirection: 'left-to-right',
itemWidth: 80,
itemHeight: 20,
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: 'circle',
symbolBorderColor: 'rgba(0, 0, 0, .5)',
},
]}
/>
</div>
</Paper>

1
src/features/ServerPage/features/IndexPage/components/TodaysBestStatsTribes/TodaysBestStatsTribes.tsx
View File

@ -40,7 +40,6 @@ function TodaysBestStatsTribes({ t }: Props) {
server: server.key,
},
});
console.log(dateUtils.toJSON(dateUtils.date(server.historyUpdatedAt)));
const records = data?.dailyTribeStats?.items ?? [];
const loading = loadingData && records.length === 0;

29
src/features/ServerPage/features/IndexPage/components/TribeStatistics/TribeStatistics.tsx
View File

@ -61,7 +61,7 @@ function TribeStatistics({ server, t }: Props) {
<LineChart
data={data}
loading={loading}
margin={{ top: 20, right: 100, bottom: 50, left: 45 }}
margin={{ top: 20, right: 45, bottom: 50, left: 45 }}
xScale={{
type: 'time',
}}
@ -74,7 +74,7 @@ function TribeStatistics({ server, t }: Props) {
}}
xFormat="time:%Y-%m-%d"
axisBottom={{
tickValues: 'every 6 days',
tickValues: 'every 8 days',
tickPadding: 5,
tickRotation: 0,
format: '%Y-%m-%d',
@ -83,32 +83,13 @@ function TribeStatistics({ server, t }: Props) {
legendOffset: -42,
legendPosition: 'middle',
tickSize: 0,
tickPadding: 4,
tickPadding: 7,
}}
pointSize={10}
pointColor={{ theme: 'background' }}
pointBorderWidth={2}
pointSize={8}
pointBorderColor={{ from: 'serieColor' }}
pointLabelYOffset={-12}
pointLabelYOffset={-6}
useMesh={true}
colors={{ scheme: 'nivo' }}
legends={[
{
anchor: 'bottom-right',
direction: 'column',
justify: false,
translateX: 100,
translateY: 0,
itemsSpacing: 0,
itemDirection: 'left-to-right',
itemWidth: 80,
itemHeight: 20,
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: 'circle',
symbolBorderColor: 'rgba(0, 0, 0, .5)',
},
]}
/>
</div>
</Paper>

29
src/features/ServerPage/features/PlayerPage/features/IndexPage/components/Statistics/Statistics.tsx
View File

@ -118,7 +118,7 @@ function Statistics({ t, server, playerID }: Props) {
<LineChart
loading={loading}
data={data}
margin={{ top: 20, right: 90, bottom: 50, left: 85 }}
margin={{ top: 20, right: 45, bottom: 50, left: 85 }}
xScale={{
type: 'time',
}}
@ -131,7 +131,7 @@ function Statistics({ t, server, playerID }: Props) {
}}
xFormat="time:%Y-%m-%d"
axisBottom={{
tickValues: 'every 6 days',
tickValues: 'every 8 days',
tickPadding: 5,
tickRotation: 0,
format: '%Y-%m-%d',
@ -140,34 +140,15 @@ function Statistics({ t, server, playerID }: Props) {
legendOffset: -42,
legendPosition: 'middle',
tickSize: 0,
tickPadding: 4,
tickPadding: 7,
format: xyFormat,
}}
pointSize={10}
pointColor={{ theme: 'background' }}
pointBorderWidth={2}
pointSize={8}
pointBorderColor={{ from: 'serieColor' }}
pointLabelYOffset={-12}
pointLabelYOffset={-6}
useMesh={true}
colors={{ scheme: 'nivo' }}
yFormat={xyFormat}
legends={[
{
anchor: 'bottom-right',
direction: 'column',
justify: false,
translateX: 90,
translateY: 0,
itemsSpacing: 0,
itemDirection: 'left-to-right',
itemWidth: 80,
itemHeight: 20,
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: 'circle',
symbolBorderColor: 'rgba(0, 0, 0, .5)',
},
]}
/>
</div>
</Paper>

3
src/features/ServerPage/features/RankingPage/common/PageLayout/PageLayout.tsx
View File

@ -57,6 +57,9 @@ const useStyles = makeStyles(theme => ({
flexDirection: 'column',
backgroundImage: `url(${background})`,
boxShadow: theme.shadows[4],
[theme.breakpoints.down('sm')]: {
minHeight: theme.spacing(10),
},
},
content: {
padding: theme.spacing(3, 0),

29
src/features/ServerPage/features/TribePage/features/IndexPage/components/Statistics/Statistics.tsx
View File

@ -111,7 +111,7 @@ function Statistics({ t, server, tribeID }: Props) {
<LineChart
loading={loading}
data={data}
margin={{ top: 20, right: 90, bottom: 50, left: 85 }}
margin={{ top: 20, right: 45, bottom: 50, left: 85 }}
xScale={{
type: 'time',
}}
@ -124,7 +124,7 @@ function Statistics({ t, server, tribeID }: Props) {
}}
xFormat="time:%Y-%m-%d"
axisBottom={{
tickValues: 'every 6 days',
tickValues: 'every 8 days',
tickPadding: 5,
tickRotation: 0,
format: '%Y-%m-%d',
@ -133,34 +133,15 @@ function Statistics({ t, server, tribeID }: Props) {
legendOffset: -42,
legendPosition: 'middle',
tickSize: 0,
tickPadding: 4,
tickPadding: 7,
format: xyFormat,
}}
pointSize={10}
pointColor={{ theme: 'background' }}
pointBorderWidth={2}
pointSize={8}
pointBorderColor={{ from: 'serieColor' }}
pointLabelYOffset={-12}
pointLabelYOffset={-6}
useMesh={true}
colors={{ scheme: 'nivo' }}
yFormat={xyFormat}
legends={[
{
anchor: 'bottom-right',
direction: 'column',
justify: false,
translateX: 90,
translateY: 0,
itemsSpacing: 0,
itemDirection: 'left-to-right',
itemWidth: 80,
itemHeight: 20,
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: 'circle',
symbolBorderColor: 'rgba(0, 0, 0, .5)',
},
]}
/>
</div>
</Paper>

1
src/features/ServerPage/features/WarStatsPage/WarStatsPage.tsx
View File

@ -261,7 +261,6 @@ function WarStatsPage() {
}}
label={t('inputLabels.' + name)}
value={val}
format="yyyy/MM/dd HH:mm"
onChange={d => {
setQuery({ [name]: d ? d : undefined });
}}

12
src/libs/date/DateUtils.ts
View File

@ -149,8 +149,7 @@ export default class DateUtils implements IUtils<Date> {
}
public dateInTZ(value: any, timezone: string): Date {
const date = new Date(value);
return new Date(date.toLocaleString('en-US', { timeZone: timezone }));
return utcToZonedTime(value, timezone);
}
public date(value?: any) {
@ -310,7 +309,7 @@ export default class DateUtils implements IUtils<Date> {
return years;
}
// displaying methpds
// displaying methods
public getCalendarHeaderText(date: Date) {
return this.format(date, this.yearMonthFormat);
}
@ -360,13 +359,6 @@ export default class DateUtils implements IUtils<Date> {
});
}
public UTCToZonedTime(date: Date): Date {
if (!DateUtils.timezone) {
return date;
}
return utcToZonedTime(date, DateUtils.timezone);
}
public zonedTimeToUTC(date: Date): Date {
if (!DateUtils.timezone) {
return date;