import React from 'react' ; import type { Map as MbMap } from '@kbn/mapbox-gl' ; import { EuiIcon } from '@elastic/eui' ; import { IStyle } from '../style' ; import { HeatmapStyleEditor } from './components/heatmap_style_editor' ; import { HeatmapLegend } from './components/legend/heatmap_legend' ; import { DEFAULT_HEATMAP_COLOR_RAMP_NAME , getOrdinalMbColorRampStops } from '../color_palettes' ; import { LAYER_STYLE_TYPE , GRID_RESOLUTION } from '../../../../common/constants' ; import { HeatmapStyleDescriptor , StyleDescriptor } from '../../../../common/descriptor_types' ; import { IField } from '../../fields/field' ; const MIN_RANGE = 0.1 ; const MAX_RANGE = 1 ; export class HeatmapStyle implements IStyle { readonly _descriptor : HeatmapStyleDescriptor ; constructor ( descriptor = { colorRampName : DEFAULT_HEATMAP_COLOR_RAMP_NAME } ) { this . _descriptor = HeatmapStyle . createDescriptor ( descriptor . colorRampName ) ; } static createDescriptor ( colorRampName ? ) { return { type : LAYER_STYLE_TYPE . HEATMAP , colorRampName : colorRampName ? colorRampName : DEFAULT_HEATMAP_COLOR_RAMP_NAME , } ; } getType ( ) { return LAYER_STYLE_TYPE . HEATMAP ; } renderEditor ( onStyleDescriptorChange ) { const onHeatmapColorChange = ( { colorRampName } ) => { const styleDescriptor = HeatmapStyle . createDescriptor ( colorRampName ) ; onStyleDescriptorChange ( styleDescriptor ) ; } ; return ( < HeatmapStyleEditor colorRampName = { this . _descriptor . colorRampName } onHeatmapColorChange = { onHeatmapColorChange } / > ) ; } renderLegendDetails ( field ) { return < HeatmapLegend colorRampName = { this . _descriptor . colorRampName } field = { field } / > ; } getIcon ( ) { return < EuiIcon size = "m" type = "heatmap" / > ; } setMBPaintProperties ( { mbMap , layerId , propertyName , max , resolution , } ) { let radius ; if ( resolution === GRID_RESOLUTION . COARSE ) { radius = 128 ; } else if ( resolution === GRID_RESOLUTION . FINE ) { radius = 64 ; } else if ( resolution === GRID_RESOLUTION . MOST_FINE ) { radius = 32 ; } else { radius = 8 ; } mbMap . setPaintProperty ( layerId , 'heatmap-radius' , radius ) ; if ( max <= 0 ) { mbMap . setPaintProperty ( layerId , 'heatmap-weight' , 0 ) ; } else { mbMap . setPaintProperty ( layerId , 'heatmap-weight' , [ '/' , [ 'get' , propertyName ] , max ] ) ; } const colorStops = getOrdinalMbColorRampStops ( this . _descriptor . colorRampName , MIN_RANGE , MAX_RANGE ) ; if ( colorStops ) { mbMap . setPaintProperty ( layerId , 'heatmap-color' , [ 'interpolate' , [ 'linear' ] , [ 'heatmap-density' ] , 0 , 'rgba(0, 0, 255, 0)' , ... colorStops , ] ) ; } } }