go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/milo/ui/src/common/components/timeline/bottom_axis.tsx (about)

     1  // Copyright 2024 The LUCI Authors.
     2  //
     3  // Licensed under the Apache License, Version 2.0 (the "License");
     4  // you may not use this file except in compliance with the License.
     5  // You may obtain a copy of the License at
     6  //
     7  //      http://www.apache.org/licenses/LICENSE-2.0
     8  //
     9  // Unless required by applicable law or agreed to in writing, software
    10  // distributed under the License is distributed on an "AS IS" BASIS,
    11  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    12  // See the License for the specific language governing permissions and
    13  // limitations under the License.
    14  
    15  import { useTheme } from '@mui/material';
    16  import { select, axisBottom } from 'd3';
    17  import { useEffect, useRef } from 'react';
    18  
    19  import { BOTTOM_AXIS_HEIGHT } from './constants';
    20  import { useTimelineConfig } from './context';
    21  
    22  export function BottomAxis() {
    23    const theme = useTheme();
    24    const config = useTimelineConfig();
    25  
    26    const bottomAxisElement = useRef<SVGGElement>(null);
    27    useEffect(() => {
    28      const bottomAxis = axisBottom(config.xScale).ticks(config.timeInterval);
    29      bottomAxis(select(bottomAxisElement.current!));
    30    }, [config.xScale, config.timeInterval]);
    31  
    32    return (
    33      <svg
    34        width={config.bodyWidth}
    35        height={BOTTOM_AXIS_HEIGHT}
    36        css={{
    37          gridArea: 'bottom-axis',
    38          position: 'sticky',
    39          bottom: 0,
    40          zIndex: 1,
    41          background: theme.palette.background.default,
    42        }}
    43      >
    44        <g transform="translate(0.5, 0.5)" ref={bottomAxisElement} />
    45        <path
    46          d={`m${config.bodyWidth - 0.5},0v${BOTTOM_AXIS_HEIGHT}`}
    47          stroke="currentcolor"
    48        />
    49      </svg>
    50    );
    51  }