Refactor charts

app/src/components/helper/DateFormatter.tsx

@@ -5,6 +5,7 @@ import { connect } from 'react-redux'
 
 interface Props {
   date: Date
+  timeFirst?: boolean
   overrideLocale?: string
   locale?: string
   intervalSince?: Date
@@ -30,7 +31,7 @@ class DateFormatter extends React.PureComponent<Props, {}> {
   private localizedDate(locale: string) {
     return moment(this.props.date)
       .locale(locale)
-      .format('L LTS')
+      .format(this.props.timeFirst ? 'LTS L' : 'L LTS')
   }
 
   private unitForInterval(milliseconds: number) {

app/src/components/helper/NumberFormatter.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { AppState } from '../../reducers'
+import { connect } from 'react-redux'
+import { Tooltip } from '@material-ui/core'
+
+function NumberFormatter(props: { locale: string; value: number; grouping?: boolean }) {
+  let formatter: Intl.NumberFormat | undefined
+
+  const formatterOptions = { useGrouping: Boolean(props.grouping) }
+  const defaultFormatter = Intl.NumberFormat(undefined, formatterOptions)
+
+  try {
+    formatter = Intl.NumberFormat(props.locale, formatterOptions)
+  } catch {
+    // locale unknown
+  }
+
+  try {
+    const formatted = (formatter || defaultFormatter).format(props.value)
+
+    return (
+      <Tooltip title={props.value}>
+        <span>{formatted}</span>
+      </Tooltip>
+    )
+  } catch {
+    // localization fail, use fallback
+  }
+
+  return <span>props.value</span>
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    locale: state.settings.get('timeLocale'),
+  }
+}
+
+export default connect(mapStateToProps)(NumberFormatter)