Refactor components. Add refresh button.

This commit is contained in:
Mike Cao 2020-08-31 03:53:39 -07:00
parent d0ca0819c6
commit d06c077019
12 changed files with 85 additions and 56 deletions

View file

@ -4,6 +4,7 @@ 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';
export default function BarChart({
chartId,
@ -21,7 +22,7 @@ export default function BarChart({
const chart = useRef();
const [tooltip, setTooltip] = useState({});
const renderLabel = (label, index, values) => {
const renderXLabel = (label, index, values) => {
const d = new Date(values[index].value);
const n = records;
@ -40,6 +41,10 @@ export default function BarChart({
}
};
const renderYLabel = label => {
return +label > 1 ? formatLongNumber(label) : label;
};
const renderTooltip = model => {
const { opacity, title, body, labelColors } = model;
@ -82,7 +87,7 @@ export default function BarChart({
tooltipFormat: 'ddd MMMM DD YYYY',
},
ticks: {
callback: renderLabel,
callback: renderXLabel,
minRotation: 0,
maxRotation: 0,
},
@ -96,6 +101,7 @@ export default function BarChart({
yAxes: [
{
ticks: {
callback: renderYLabel,
beginAtZero: true,
},
stacked,
@ -119,7 +125,7 @@ export default function BarChart({
const { options } = chart.current;
options.scales.xAxes[0].time.unit = unit;
options.scales.xAxes[0].ticks.callback = renderLabel;
options.scales.xAxes[0].ticks.callback = renderXLabel;
options.animation.duration = animationDuration;
onUpdate(chart.current);