import { LineChart, Line, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer, AreaChart, Area, ComposedChart, Bar } from 'recharts' import { abbrNum } from '../lib/format' import { useRouter } from 'next/router' const dateFormatter = when => { return timeStr => { const date = new Date(timeStr) switch (when) { case 'week': case 'month': return `${('0' + (date.getUTCMonth() % 12 + 1)).slice(-2)}/${date.getUTCDate()}` case 'year': case 'forever': return `${('0' + (date.getUTCMonth() % 12 + 1)).slice(-2)}/${String(date.getUTCFullYear()).slice(-2)}` default: return `${date.getHours() % 12 || 12}${date.getHours() >= 12 ? 'pm' : 'am'}` } } } function xAxisName (when) { switch (when) { case 'week': case 'month': return 'days' case 'year': case 'forever': return 'months' default: return 'hours' } } const transformData = data => { return data.map(entry => { const obj = { time: entry.time } entry.data.forEach(entry1 => { obj[entry1.name] = entry1.value }) return obj }) } const COLORS = [ 'var(--secondary)', 'var(--info)', 'var(--success)', 'var(--boost)', 'var(--theme-grey)', 'var(--danger)' ] export function WhenAreaChart ({ data }) { const router = useRouter() if (!data || data.length === 0) { return null } // transform data into expected shape data = transformData(data) // need to grab when const when = router.query.when return ( {Object.keys(data[0]).filter(v => v !== 'time' && v !== '__typename').map((v, i) => )} ) } export function WhenLineChart ({ data }) { const router = useRouter() if (!data || data.length === 0) { return null } // transform data into expected shape data = transformData(data) // need to grab when const when = router.query.when return ( {Object.keys(data[0]).filter(v => v !== 'time' && v !== '__typename').map((v, i) => )} ) } export function WhenComposedChart ({ data, lineNames, areaNames, barNames }) { const router = useRouter() if (!data || data.length === 0) { return null } // transform data into expected shape data = transformData(data) // need to grab when const when = router.query.when return ( {barNames?.map((v, i) => )} {areaNames?.map((v, i) => )} {lineNames?.map((v, i) => )} ) }