import { LineChart } from 'recharts/lib/chart/LineChart' import { AreaChart } from 'recharts/lib/chart/AreaChart' import { ComposedChart } from 'recharts/lib/chart/ComposedChart' import { Line } from 'recharts/lib/cartesian/Line' import { XAxis } from 'recharts/lib/cartesian/XAxis' import { YAxis } from 'recharts/lib/cartesian/YAxis' import { Area } from 'recharts/lib/cartesian/Area' import { Bar } from 'recharts/lib/cartesian/Bar' import { Tooltip } from 'recharts/lib/component/Tooltip' import { Legend } from 'recharts/lib/component/Legend' import { ResponsiveContainer } from 'recharts/lib/component/ResponsiveContainer' import { PieChart } from 'recharts/lib/chart/PieChart' import { Cell } from 'recharts/lib/component/Cell' import { Pie } from 'recharts/lib/polar/Pie' 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(--bs-secondary)', 'var(--bs-info)', 'var(--bs-success)', 'var(--bs-boost)', 'var(--theme-grey)', 'var(--bs-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) => )} ) } export function GrowthPieChart ({ data }) { return ( { data.map((entry, index) => ( )) } ) }