import tinycolor from 'tinycolor2' ; import { colorPalette as colorPaletteGenerator , euiPaletteForStatus , euiPaletteForTemperature , euiPaletteCool , euiPaletteWarm , euiPaletteNegative , euiPalettePositive , euiPaletteGray , euiPaletteColorBlind , } from '@elastic/eui/lib/services' ; import { EuiColorPalettePickerPaletteProps } from '@elastic/eui' ; import { PercentilesFieldMeta } from '../../../common/descriptor_types' ; export const DEFAULT_HEATMAP_COLOR_RAMP_NAME = 'theclassic' ; export const DEFAULT_FILL_COLORS = euiPaletteColorBlind ( ) ; export const DEFAULT_LINE_COLORS = [ ... DEFAULT_FILL_COLORS . map ( ( color ) => tinycolor ( color ) . darken ( ) . toHexString ( ) ) , '#000' , '#FFF' , ] ; const ROYAL_BLUE = 'rgb(65, 105, 225)' ; const CYAN = 'rgb(0, 256, 256)' ; const LIME = 'rgb(0, 256, 0)' ; const YELLOW = 'rgb(256, 256, 0)' ; const RED = 'rgb(256, 0, 0)' ; const HEATMAP_PALETTE = [ ROYAL_BLUE , CYAN , LIME , YELLOW , RED ] ; type COLOR_PALETTE = EuiColorPalettePickerPaletteProps & { getPalette : ( steps : number ) => string [ ] ; } ; function getColorBlindPalette ( steps ) { const rotations = Math . ceil ( steps / 10 ) ; const palette = euiPaletteColorBlind ( { rotations } ) ; return palette . slice ( 0 , steps - 1 ) ; } const COLOR_PALETTES = [ { value : 'Blues' , getPalette : ( steps ) => { return euiPaletteCool ( steps ) ; } , palette : euiPaletteCool ( 8 ) , type : 'gradient' , } , { value : 'Greens' , getPalette : ( steps ) => { return euiPalettePositive ( steps ) ; } , palette : euiPalettePositive ( 8 ) , type : 'gradient' , } , { value : 'Greys' , getPalette : ( steps ) => { return euiPaletteGray ( steps ) ; } , palette : euiPaletteGray ( 8 ) , type : 'gradient' , } , { value : 'Reds' , getPalette : ( steps ) => { return euiPaletteNegative ( steps ) ; } , palette : euiPaletteNegative ( 8 ) , type : 'gradient' , } , { value : 'Yellow to Red' , getPalette : ( steps ) => { return euiPaletteWarm ( steps ) ; } , palette : euiPaletteWarm ( 8 ) , type : 'gradient' , } , { value : 'Green to Red' , getPalette : ( steps ) => { return euiPaletteForStatus ( steps ) ; } , palette : euiPaletteForStatus ( 8 ) , type : 'gradient' , } , { value : 'Blue to Red' , getPalette : ( steps ) => { return euiPaletteForTemperature ( steps ) ; } , palette : euiPaletteForTemperature ( 8 ) , type : 'gradient' , } , { value : DEFAULT_HEATMAP_COLOR_RAMP_NAME , getPalette : ( steps ) => { return colorPaletteGenerator ( HEATMAP_PALETTE , steps , true , true ) ; } , palette : HEATMAP_PALETTE , type : 'gradient' , } , { value : 'palette_0' , getPalette : getColorBlindPalette , palette : euiPaletteColorBlind ( ) , type : 'fixed' , } , { value : 'palette_20' , getPalette : getColorBlindPalette , palette : euiPaletteColorBlind ( { rotations : 2 } ) , type : 'fixed' , } , { value : 'palette_30' , getPalette : getColorBlindPalette , palette : euiPaletteColorBlind ( { rotations : 3 } ) , type : 'fixed' , } , ] ; export const NUMERICAL_COLOR_PALETTES = COLOR_PALETTES . filter ( ( palette ) => { return palette . type === 'gradient' ; } ) ; export const CATEGORICAL_COLOR_PALETTES = COLOR_PALETTES . filter ( ( palette ) => { return palette . type === 'fixed' ; } ) ; export function getColorPalette ( colorPaletteId ) { const colorPalette = COLOR_PALETTES . find ( ( { value } ) => { return value === colorPaletteId ; } ) ; return colorPalette ? ( colorPalette . palette as string [ ] ) : [ ] ; } export function getColorRampCenterColor ( colorPaletteId ) { if ( ! colorPaletteId ) { return null ; } const palette = getColorPalette ( colorPaletteId ) ; return palette . length === 0 ? null : palette [ Math . floor ( palette . length / 2 ) ] ; } export function getOrdinalMbColorRampStops ( colorPaletteId , min , max ) { if ( ! colorPaletteId ) { return null ; } if ( min > max ) { return null ; } const palette = getColorPalette ( colorPaletteId ) ; if ( palette . length === 0 ) { return null ; } if ( max === min ) { return [ max , palette [ palette . length - 1 ] ] ; } const delta = max - min ; return palette . reduce ( ( accu , stopColor , idx , srcArr ) => { const stopNumber = min + ( delta * idx ) / srcArr . length ; return [ ... accu , stopNumber , stopColor ] ; } , [ ] ) ; } export function getPercentilesMbColorRampStops ( colorPaletteId , percentiles ) { if ( ! colorPaletteId ) { return null ; } const paletteObject = NUMERICAL_COLOR_PALETTES . find ( ( { value } ) => { return value === colorPaletteId ; } ) ; return paletteObject ? paletteObject . getPalette ( percentiles . length ) . reduce ( ( accu , stopColor , idx ) => { return [ ... accu , percentiles [ idx ] . value , stopColor ] ; } , [ ] ) : null ; } export function getLinearGradient ( colorStrings ) { const intervals = colorStrings . length ; let linearGradient = `linear-gradient(to right, ${ colorStrings [ 0 ] } 0%,` ; for ( let i = 1 ; i < intervals - 1 ; i ++ ) { linearGradient = `${ linearGradient } ${ colorStrings [ i ] } \
      ${ Math . floor ( ( 100 * i ) / ( intervals - 1 ) ) }%,` ; } return `${ linearGradient } ${ colorStrings [ colorStrings . length - 1 ] } 100%)` ; }