Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar
Last active May 7, 2020 10:58
Show Gist options
  • Save ramiroaznar/4cd73f403455ba94943f2dcf67f940b0 to your computer and use it in GitHub Desktop.
Save ramiroaznar/4cd73f403455ba94943f2dcf67f940b0 to your computer and use it in GitHub Desktop.
Vega Lite React Component
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' }
}
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment