import { dateTime , DateTimeDuration , toDuration } from '@grafana/data' ; import * as d3 from 'd3' ; import React from 'react' ; interface YAxisProps { height : number ; dailyInterval : [ number , number ] ; } export const YAxis = React . memo ( ( { height , dailyInterval } ) => { const y = d3 . scaleLinear ( ) . domain ( dailyInterval ) . rangeRound ( [ 0 , height ] ) ; const every = calculateTickHeight ( height ) ; const yAxis = d3 . axisLeft ( y ) . tickValues ( d3 . range ( dailyInterval [ 0 ] , dailyInterval [ 1 ] , every ) ) . tickFormat ( ( d ) => formatDuration ( toDuration ( d as number , 'hours' ) , 'HH:mm' ) ) ; return ( < g ref = { ( node ) => { const container = d3 . select ( node ) . call ( yAxis ) ; container . select ( '.domain' ) . remove ( ) ; container . selectAll ( 'line' ) . remove ( ) ; } } />); } ) ; YAxis . displayName = 'YAxis' ; const calculateTickHeight = ( height ) => { const preferredTickHeight = 20 ; const ratio = ( preferredTickHeight / height ) * 24 ; return Math . max ( Math . round ( ratio ) , 1 ) ; } ; const formatDuration = ( duration , format ) => { const date = dateTime ( ) . startOf ( 'day' ) ; return date . add ( duration . hours ( ) , 'hours' ) . format ( format ) ; } ;