Skip to content

Commit

Permalink
rework detail charts, add loading state placeholders
Browse files Browse the repository at this point in the history
  • Loading branch information
Shane98c committed Jan 4, 2024
1 parent a2cf9bb commit 557b1d5
Showing 1 changed file with 107 additions and 110 deletions.
217 changes: 107 additions & 110 deletions components/charts/detail-charts.js
Original file line number Diff line number Diff line change
@@ -1,131 +1,128 @@
import { useState, useEffect } from 'react'
import { Box, Flex, Badge } from 'theme-ui'
import { Row, Column } from '@carbonplan/components'
import { alpha } from '@theme-ui/color'
import { COLORS, LABELS } from '../constants'
import { formatValue } from '../utils'

const DetailCharts = ({ issued, retired, isLoading, error }) => {
const createRetIssGraph = (theme, l) => {
const issuedPercent = ((issued.mapping[l] ?? 0) / issued.total) * 100
const retiredPercent = ((retired.mapping[l] ?? 0) / issued.total) * 100
return `linear-gradient(to right,
${theme.rawColors[COLORS[l]]} 0%,
${theme.rawColors[COLORS[l]]} ${retiredPercent}%,
${alpha(theme.rawColors[COLORS[l]], 0.3)(theme)} ${retiredPercent}%,
${alpha(theme.rawColors[COLORS[l]], 0.3)(theme)} ${issuedPercent}%,
${theme.colors.muted} ${issuedPercent}%,
${theme.colors.muted} 100%)`
}
const [previousCategories, setPreviousCategories] = useState([])

useEffect(() => {
if (!isLoading && !error) {
setPreviousCategories(Object.keys(issued.mapping))
}
}, [isLoading, error])

const createIssuedGraph = (theme, l) => {
return `linear-gradient(to right, ${theme.colors[COLORS[l]]} 0% ${
((issued.mapping[l] ?? 0) / issued.total) * 100
}%, ${theme.colors.muted} ${
((issued.mapping[l] ?? 0) / issued.total) * 100
}% 100%)`
const createGradient = (theme, l, isRetired) => {
const percent = ((issued.mapping[l] ?? 0) / issued.total) * 100
const retiredPercent = isRetired
? ((retired.mapping[l] ?? 0) / issued.total) * 100
: percent

if (isRetired) {
return `linear-gradient(to right,
${theme.rawColors[COLORS[l]]} 0%,
${theme.rawColors[COLORS[l]]} ${retiredPercent}%,
${alpha(
theme.rawColors[COLORS[l]],
0.3
)(theme)} ${retiredPercent}%,
${alpha(theme.rawColors[COLORS[l]], 0.3)(theme)} ${percent}%,
${theme.colors.muted} ${percent}%,
${theme.colors.muted} 100%)`
} else {
return `linear-gradient(to right, ${
theme.colors[COLORS[l]]
} 0% ${percent}%, ${theme.colors.muted} ${percent}% 100%)`
}
}
const chartColumn = (isRetired) => {
const categoryKeys = isLoading
? previousCategories
: Object.keys(LABELS.category).filter((l) => Boolean(issued.mapping[l]))

return (
<>
<Row columns={[6, 8, 8, 8]} sx={{ mb: 5, mt: -5 }}>
<Column start={[1, 1, 1, 1]} width={[3, 4, 4, 4]}>
{Object.keys(LABELS.category)
.filter((l) => Boolean(issued.mapping[l]))
.map((l) => (
<Box key={l} sx={{ mb: 2 }}>
<Flex
sx={{
justifyContent: 'space-between',
fontSize: 2,
mb: 1,
}}
>
<Flex sx={{ gap: 2, alignItems: 'center' }}>
<Box
sx={{
width: '8px',
height: '8px',
backgroundColor: COLORS[l],
}}
/>
<Box sx={{ fontSize: 1 }}>{LABELS.category[l]}</Box>
</Flex>
<Badge
return (
<Column
start={[
isRetired ? 4 : 1,
isRetired ? 5 : 1,
isRetired ? 5 : 1,
isRetired ? 5 : 1,
]}
width={[3, 4, 4, 4]}
>
{categoryKeys.map((l) => (
<Box key={l} sx={{ mb: 2 }}>
<Flex
sx={{
justifyContent: 'space-between',
fontSize: 2,
mb: 1,
}}
>
{isLoading ? (
<Flex sx={{ gap: 2, alignItems: 'center' }}>
<Box
sx={{
color: COLORS[l],
backgroundColor: alpha(COLORS[l], 0.3),
fontSize: 2,
mb: '3px',
width: '8px',
height: '8px',
backgroundColor: 'muted',
}}
>
{formatValue(issued.mapping[l] ?? 0)}
</Badge>
/>
<Box sx={{ fontSize: 1, color: 'muted' }}>----</Box>
</Flex>
<Box
sx={{
height: '5px',
width: '100%',
transition: 'background 0.2s',
background:
isLoading || error
? 'muted'
: (theme) => createIssuedGraph(theme, l),
}}
/>
</Box>
))}
</Column>
<Column start={[4, 5, 5, 5]} width={[3, 4, 4, 4]}>
{Object.keys(LABELS.category)
.filter((l) => Boolean(issued.mapping[l]))
.map((l) => (
<Box key={l} sx={{ mb: 2 }}>
<Flex
sx={{
justifyContent: 'space-between',
fontSize: 1,
mb: 1,
}}
>
<Flex sx={{ gap: 2, alignItems: 'center' }}>
<Box
sx={{
width: '8px',
height: '8px',
backgroundColor: COLORS[l],
}}
/>
<Box sx={{ fontSize: 1 }}>{LABELS.category[l]}</Box>
</Flex>
<Badge
) : (
<Flex sx={{ gap: 2, alignItems: 'center' }}>
<Box
sx={{
color: COLORS[l],
backgroundColor: alpha(COLORS[l], 0.3),
fontSize: 2,
display: 'flex',
flexWrap: 'wrap',
mb: '3px',
width: '8px',
height: '8px',
backgroundColor: COLORS[l],
}}
>
{formatValue(retired.mapping[l] ?? 0)}
</Badge>
/>
<Box sx={{ fontSize: 1 }}>{LABELS.category[l]}</Box>
</Flex>
<Box
sx={{
height: '5px',
width: '100%',
transition: 'background 0.2s',
background:
isLoading || error
? 'muted'
: (theme) => createRetIssGraph(theme, l),
}}
/>
</Box>
))}
</Column>
)}

<Badge
sx={{
color: isLoading ? 'muted' : COLORS[l],
backgroundColor: isLoading ? 'muted' : alpha(COLORS[l], 0.3),
fontSize: 2,
mb: '3px',
}}
>
{formatValue(
(isRetired ? retired.mapping[l] : issued.mapping[l]) ?? 0
)}
</Badge>
</Flex>
<Box
sx={{
height: '5px',
width: '100%',
transition: 'background 0.2s',
background:
isLoading || error
? 'muted'
: (theme) => createGradient(theme, l, isRetired),
}}
/>
</Box>
))}
</Column>
)
}

return (
<>
<Row columns={[6, 8, 8, 8]} sx={{ mb: 5, mt: -5 }}>
{chartColumn(false)}
{chartColumn(true)}
</Row>
</>
)
}

export default DetailCharts

0 comments on commit 557b1d5

Please sign in to comment.