watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-09 07:07:17 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Date formatting using locale.

Browse source
This commit is contained in:
Mike Cao 2020-09-07 19:48:40 -07:00
parent 987fdfd57d
commit ff854150ae
7 changed files with 48 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

16
components/common/LanguageButton.js
View file

@ -4,24 +4,16 @@ import Globe from 'assets/globe.svg';
import useDocumentClick from 'hooks/useDocumentClick';
import { updateApp } from 'redux/actions/app';
import Menu from './Menu';
import styles from './LanguageButton.module.css';
import Button from './Button';
const supportedLanguages = {
en: 'EN',
'zh-CN': '中文',
};
const menuOptions = [
{ label: 'English', value: 'en' },
{ label: '中文 (Chinese Simplified)', value: 'zh-CN' },
];
import { menuOptions } from 'lib/lang';
import styles from './LanguageButton.module.css';
export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'left' }) {
const dispatch = useDispatch();
const [showMenu, setShowMenu] = useState(false);
const locale = useSelector(state => state.app.locale);
const ref = useRef();
const selectedLocale = menuOptions.find(e => e.value === locale)?.display;
function handleSelect(value) {
dispatch(updateApp({ locale: value }));
@ -38,7 +30,7 @@ export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'l
return (
<div ref={ref} className={styles.container}>
<Button icon={<Globe />} onClick={() => setShowMenu(true)} size="small">
<div>{supportedLanguages[locale]}</div>
<div className={locale}>{selectedLocale}</div>
</Button>
{showMenu && (
<Menu

2
components/common/Modal.module.css
View file

@ -26,7 +26,7 @@
left: 50%;
transform: translate(-50%, -50%);
background: var(--gray50);
min-width: 200px;
min-width: 400px;
min-height: 100px;
z-index: 1;
border: 1px solid var(--gray300);

18
components/metrics/BarChart.js
View file

@ -3,8 +3,9 @@ import ReactTooltip from 'react-tooltip';
import classNames from 'classnames';
import ChartJS from 'chart.js';
import styles from './BarChart.module.css';
import { format } from 'date-fns';
import { formatLongNumber } from 'lib/format';
import { dateFormat } from 'lib/lang';
import { useSelector } from 'react-redux';
export default function BarChart({
chartId,
@ -21,6 +22,7 @@ export default function BarChart({
const canvas = useRef();
const chart = useRef();
const [tooltip, setTooltip] = useState({});
const locale = useSelector(state => state.app.locale);
function renderXLabel(label, index, values) {
const d = new Date(values[index].value);
@ -28,23 +30,23 @@ export default function BarChart({
switch (unit) {
case 'hour':
return format(d, 'ha');
return dateFormat(d, 'ha', locale);
case 'day':
if (records > 31) {
if (w <= 500) {
return index % 10 === 0 ? format(d, 'M/d') : '';
return index % 10 === 0 ? dateFormat(d, 'M/d', locale) : '';
}
return index % 5 === 0 ? format(d, 'M/d') : '';
return index % 5 === 0 ? dateFormat(d, 'M/d', locale) : '';
}
if (w <= 500) {
return index % 2 === 0 ? format(d, 'MMM d') : '';
return index % 2 === 0 ? dateFormat(d, 'MMM d', locale) : '';
}
return format(d, 'EEE M/d');
return dateFormat(d, 'EEE M/d', locale);
case 'month':
if (w <= 660) {
return format(d, 'MMM');
return dateFormat(d, 'MMM', locale);
}
return format(d, 'MMMM');
return dateFormat(d, 'MMMM', locale);
default:
return label;
}