import { i18n } from '@kbn/i18n' ; import React from 'react' ; import { render , unmountComponentAtNode } from 'react-dom' ; import type { PersistedState } from '../../../../visualizations/public' ; import { ThemeServiceStart } from '../../../../../core/public' ; import { KibanaThemeProvider } from '../../../../kibana_react/public' ; import { ExpressionRenderDefinition } from '../../../../expressions/common/expression_renderers' ; import { EXPRESSION_HEATMAP_NAME , HeatmapExpressionProps , FilterEvent , BrushEvent , } from '../../common' ; import { getFormatService , getPaletteService , getUISettings , getThemeService } from '../services' ; import { getTimeZone } from '../utils/get_timezone' ; interface ExpressioHeatmapRendererDependencies { theme : ThemeServiceStart ; } export const heatmapRenderer = ( { theme } ) => ( { name : EXPRESSION_HEATMAP_NAME , displayName : i18n . translate ( 'expressionHeatmap.visualizationName' , { defaultMessage : 'Heatmap' , } ) , reuseDomNode : true , render : async ( domNode , config , handlers ) => { handlers . onDestroy ( ( ) => { unmountComponentAtNode ( domNode ) ; } ) ; const onClickValue = ( data ) => { handlers . event ( { name : 'filter' , data } ) ; } ; const onSelectRange = ( data ) => { handlers . event ( { name : 'brush' , data } ) ; } ; const timeZone = getTimeZone ( getUISettings ( ) ) ; const { HeatmapComponent } = await import ( '../components/heatmap_component' ) ; render ( < KibanaThemeProvider theme$ = { theme . theme$ } > < div className = "heatmap-container" data - test - subj = "heatmapChart" > < HeatmapComponent { ... config } onClickValue = { onClickValue } onSelectRange = { onSelectRange } timeZone = { timeZone } formatFactory = { getFormatService ( ) . deserialize } chartsThemeService = { getThemeService ( ) } paletteService = { getPaletteService ( ) } uiState = { handlers . uiState as PersistedState } / > < /div> < /KibanaThemeProvider>, domNode, () => { handlers . done ( ) ; } ) ; } , } ) ;