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) => (
|
))
}
)
}