Refactor charts

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)