import React , { useMemo , useEffect , FC } from 'react' ; import type { TopLevelSpec } from 'vega-lite/build/vega-lite' ; import { compile } from 'vega-lite/build/vega-lite' ; import { parse , View , Warn } from 'vega' ; import { expressionInterpreter } from 'vega-interpreter' ; import { Handler } from 'vega-tooltip' ; import { htmlIdGenerator } from '@elastic/eui' ; export interface VegaChartViewProps { vegaSpec : TopLevelSpec ; } export const VegaChartView = ( { vegaSpec } ) => { const htmlId = useMemo ( ( ) => htmlIdGenerator ( ) ( ) , [ ] ) ; useEffect ( ( ) => { const vgSpec = compile ( vegaSpec ) . spec ; const view = new View ( parse ( vgSpec , undefined , { ast : true } ) , { expr : expressionInterpreter } ) . logLevel ( Warn ) . renderer ( 'canvas' ) . tooltip ( new Handler ( ) . call ) . initialize ( `#${ htmlId }` ) ; view . runAsync ( ) ; } , [ vegaSpec ] ) ; return < div id = { htmlId } className = "mlVegaChart" data - test - subj = "mlVegaChart" / > ; } ; export default VegaChartView ;