import { DisplayProcessor } from '@grafana/data' ; import * as d3 from 'd3' ; import React from 'react' ; interface LegendAxisProps { width : number ; min : number ; max : number ; display : DisplayProcessor ; } /**
 * Horizontal axis describing the color spectrum.
 */ export const LegendAxis = React . memo ( ( { width , min , max , display } ) => { const scale = d3 . scaleLinear ( ) . domain ( [ min , max ] ) . range ( [ 0 , width ] ) ; const preferredTickWidth = 50 ; const ratio = width / preferredTickWidth ; const axis = d3 . axisBottom ( scale ) . ticks ( Math . round ( ratio ) ) . tickFormat ( ( d ) => { const val = display ( d ) ; return `${ val . text }${ val . suffix ? val . suffix : '' }` ; } ) ; return < g ref = { ( node ) => d3 . select ( node ) . call ( axis ) } />; } ) ; LegendAxis . displayName = 'LegendAxis' ;