import { i18n } from '@kbn/i18n' ; import React from 'react' ; import { render , unmountComponentAtNode } from 'react-dom' ; import { ThemeServiceStart } from '../../../../../core/public' ; import { KibanaThemeProvider } from '../../../../kibana_react/public' ; import { ExpressionRenderDefinition } from '../../../../expressions/common/expression_renderers' ; import { EXPRESSION_GAUGE_NAME , GaugeExpressionProps } from '../../common' ; import { getFormatService , getThemeService } from '../services' ; interface ExpressionGaugeRendererDependencies { theme : ThemeServiceStart ; } export const gaugeRenderer = ( { theme } ) => ( { name : EXPRESSION_GAUGE_NAME , displayName : i18n . translate ( 'expressionGauge.renderer.visualizationName' , { defaultMessage : 'Gauge' , } ) , reuseDomNode : true , render : async ( domNode , config , handlers ) => { handlers . onDestroy ( ( ) => { unmountComponentAtNode ( domNode ) ; } ) ; const { GaugeComponent } = await import ( '../components/gauge_component' ) ; render ( < KibanaThemeProvider theme$ = { theme . theme$ } > < div className = "gauge-container" data - test - subj = "gaugeChart" > < GaugeComponent { ... config } formatFactory = { getFormatService ( ) . deserialize } chartsThemeService = { getThemeService ( ) } / > < /div> < /KibanaThemeProvider>, domNode, () => { handlers . done ( ) ; } ) ; } , } ) ;