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' import { timeUnitForRange } from '@/lib/time' const dateFormatter = (when, from, to) => { const unit = xAxisName(when, from, to) return timeStr => { const date = new Date(timeStr) switch (unit) { case 'day': case 'week': return `${('0' + (date.getUTCMonth() % 12 + 1)).slice(-2)}/${date.getUTCDate()}` case 'month': return `${('0' + (date.getUTCMonth() % 12 + 1)).slice(-2)}/${String(date.getUTCFullYear()).slice(-2)}` default: return `${date.getHours() % 12 || 12}${date.getHours() >= 12 ? 'pm' : 'am'}` } } } const labelFormatter = (when, from, to) => { const unit = xAxisName(when, from, to) const dateFormat = dateFormatter(when, from, to) return timeStr => `${unit} ${dateFormat(timeStr)}` } function xAxisName (when, from, to) { if (from) { return timeUnitForRange([from, to]) } switch (when) { case 'week': case 'month': return 'day' case 'year': case 'forever': return 'month' default: return 'hour' } } 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)', 'var(--bs-code-color)' ] function getColor (i) { return COLORS[i % COLORS.length] } 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 const from = router.query.from const to = router.query.to 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 const from = router.query.from const to = router.query.to return ( {Object.keys(data[0]).filter(v => v !== 'time' && v !== '__typename').map((v, i) => )} ) } export function WhenComposedChart ({ data, lineNames = [], lineAxis = 'left', areaNames = [], areaAxis = 'left', barNames = [], barAxis = 'left' }) { 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 const from = router.query.from const to = router.query.to return ( {barNames?.map((v, i) => )} {areaNames?.map((v, i) => )} {lineNames?.map((v, i) => )} ) } export function GrowthPieChart ({ data }) { const nonZeroData = data.filter(d => d.value > 0) return ( { data.map((entry, index) => ( )) } ) }