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
This commit is contained in:
parent
645af393f8
commit
1e21260aee
|
@ -6,6 +6,7 @@ export const darkTheme: Theme = {
|
|||
stroke: '#fff',
|
||||
},
|
||||
},
|
||||
fontSize: 10,
|
||||
grid: {
|
||||
line: {
|
||||
stroke: '#fff',
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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';
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -7,4 +7,5 @@ export interface Route {
|
|||
params?: Props['params'];
|
||||
Icon: React.ReactElement;
|
||||
nested?: Route[];
|
||||
isExpandable?: boolean;
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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),
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 });
|
||||
}}
|
||||
|
|
|
@ -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;
|
||||
|
|
Reference in New Issue
Block a user