obolus/www/components/chart.jsx

import React, { useEffect, useRef } from 'react'
import ChartJS from 'chart.js'
import { capitalize } from '../utils/misc'


const Chart = ({ stats }) => {

    const canvas = useRef(undefined)

    const { _error, ...users } = stats

    const chartColors = [
        'rgb(255,74,109)',
        'rgb(255,194,81)',
        'rgb(63,197,255)',
        'rgb(46,192,37)',
    ]

    const formatData = (data) => {
        const sorted = Object.entries(data).sort((a, b) => a[1] < b[1] ? 1 : -1)
        const positive = sorted.filter(([name, amount]) => amount >= 0).reverse()
        const negative = sorted.filter(([name, amount]) => amount < 0)

        const getProgressiveValues = (arr) => {
            if (arr.length === 0) return []

            const tmp = [arr[0]]
            let highest = arr[0][1]

            for (const cur of arr.slice(1)) {
                const delta = cur[1] - highest
                tmp.push([cur[0], delta])
                highest += delta
            }
            return tmp
        }

        return [
            ...getProgressiveValues(positive),
            ...getProgressiveValues(negative),
        ]
    }


    useEffect(() => {

        console.log(`Error margin: ${_error}`)

        // TODO: Consistent color scheme
        const data = {
            labels: ['Current'],
            datasets: formatData(users).map(([name, amount], i) => ({
                label: name,
                backgroundColor: chartColors[i],
                data: [amount],
            })),
        }

        const chart = new ChartJS(canvas.current, {
            type: 'horizontalBar',
            data,
            options: {
                tooltips: {
                    enabled: false,
                },
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        stacked: true,
                    }],
                    yAxes: [{
                        display: false,
                        stacked: true,
                    }],
                },
            },
        })

    }, [canvas])

    return <React.Fragment>
        <div className={'chart-container'}>
            <canvas ref={canvas}/>
        </div>
        <br/>
        <div className={'text-center'}>
            {Object.entries(users).map(([user, value], i) => <span key={i} className={'label m-1'}>
            {capitalize(user)} <b>{value}</b>
        </span>)}
            {/*<div className={'mt-2'}><small>Error margin:{_error}</small></div>*/}
        </div>

        {/* language=CSS */}
        <style jsx>{`
            .chart-container {
                width: 100%;
                height: 8em;
                position: relative;
            }
        `}</style>
    </React.Fragment>
}

export default Chart