import $ from 'jquery' ; import React , { RefObject } from 'react' ; import { mountReactNode } from '../../../../core/public/utils' ; import { ChartsPluginSetup } from '../../../charts/public' ; import type { PersistedState } from '../../../visualizations/public' ; import { IInterpreterRenderHandlers } from '../../../expressions/public' ; import { VisTypeVislibCoreSetup } from './plugin' ; import { VisLegend , CUSTOM_LEGEND_VIS_TYPES } from './vislib/components/legend' ; import { BasicVislibParams } from './types' ; import { PieVisParams } from './pie' ; const legendClassName = { top : 'vislib--legend-top' , bottom : 'vislib--legend-bottom' , left : 'vislib--legend-left' , right : 'vislib--legend-right' , } ; export type VislibVisController = InstanceType < ReturnType < typeof createVislibVisController > > ; export const createVislibVisController = ( core , charts ) => { return class VislibVisController { removeListeners ? : ( ) => void ; unmountLegend ? : ( ) => void ; legendRef : RefObject < VisLegend > ; container : HTMLDivElement ; chartEl : HTMLDivElement ; legendEl : HTMLDivElement ; vislibVis ? : any ; constructor ( public el ) { this . el = el ; this . legendRef = React . createRef ( ) ; this . container = document . createElement ( 'div' ) ; this . container . className = 'vislib' ; this . el . appendChild ( this . container ) ; this . chartEl = document . createElement ( 'div' ) ; this . chartEl . className = 'vislib__chart' ; this . container . appendChild ( this . chartEl ) ; this . legendEl = document . createElement ( 'div' ) ; this . legendEl . className = 'vislib__legend' ; this . container . appendChild ( this . legendEl ) ; } async render ( esResponse , visParams , handlers ) { if ( this . vislibVis ) { this . destroy ( false ) ; } this . chartEl . dataset . vislibChartType = visParams . type ; if ( this . el . clientWidth === 0 || this . el . clientHeight === 0 ) { handlers . done ( ) ; return ; } const { Vis : Vislib } = await import ( './vislib/vis' ) ; const { uiState , event : fireEvent } = handlers ; this . vislibVis = new Vislib ( this . chartEl , visParams , core , charts ) ; this . vislibVis . on ( 'brush' , fireEvent ) ; this . vislibVis . on ( 'click' , fireEvent ) ; this . vislibVis . on ( 'renderComplete' , handlers . done ) ; this . removeListeners = ( ) => { this . vislibVis . off ( 'brush' , fireEvent ) ; this . vislibVis . off ( 'click' , fireEvent ) ; } ; this . vislibVis . initVisConfig ( esResponse , uiState ) ; if ( visParams . addLegend ) { $ ( this . container ) . attr ( 'class' , ( i , cls ) => { return cls . replace ( /vislib--legend-\S+/g , '' ) ; } ) . addClass ( ( legendClassName as any ) [ visParams . legendPosition ] ) ; this . mountLegend ( esResponse , visParams , fireEvent , uiState as PersistedState ) ; } this . vislibVis . render ( esResponse , uiState ) ; if ( visParams . addLegend && CUSTOM_LEGEND_VIS_TYPES . includes ( this . vislibVis . visConfigArgs . type ) ) { this . unmountLegend ?. ( ) ; this . mountLegend ( esResponse , visParams , fireEvent , uiState as PersistedState ) ; this . vislibVis . render ( esResponse , uiState ) ; } } mountLegend ( visData , { legendPosition , addLegend } , fireEvent , uiState ? ) { this . unmountLegend = mountReactNode ( < VisLegend ref = { this . legendRef } vislibVis = { this . vislibVis } visData = { visData } uiState = { uiState } fireEvent = { fireEvent } addLegend = { addLegend } position = { legendPosition } / > ) ( this . legendEl ) ; } destroy ( clearElement = true ) { this . unmountLegend ?. ( ) ; if ( clearElement ) { this . el . innerHTML = '' ; } if ( this . vislibVis ) { this . removeListeners ?. ( ) ; this . vislibVis . destroy ( ) ; delete this . vislibVis ; } } } ; } ;