Vega Lite React Component

constants.js

export const HISTO_STYLE = {
    margin: '0px 5px 12px 0px',
    position: 'relative'
}

export const VEGA_SPEC = {
    width: 150,
    height: 150,
    mark: 'bar',
    encoding: {
        x: { field: 'column', type: 'nominal', axis: {title: null}},
        y: { field: 'value', type: 'quantitative', axis: {title: null}},
        color: {field: 'color', type: 'nominal', scale: null}
    },
    data: { name: 'table' }
}

Histogram.js

import React, { useContext } from 'react'
import { VegaLite } from 'react-vega'
import { VEGA_SPEC, HISTO_STYLE } from './constants'

const Histogram = ({metrics}) => {
  
    /// dummy data
    const dummyData = [
      {x: 'Bulls', y: 128, z: 'red'},
      {x: 'Lakers', y: 100, z: 'yellow'}
    ]
    
    let barData = {
        table: metrics.histogram
    }

    if (metrics.histogram) {
        barData = {
            table: metrics.histogram.map(e => ({
                column: e.x,
                value: e.y,
                color: e.z
            }))
        }
    }

    return (
        <>
            {metrics.histogram && 
                <VegaLite
                actions={false}
                style={HISTO_STYLE}
                spec={VEGA_SPEC}
                data={barData} />
            }
        </>
  );
};

export default Histogram