vitess.io/vitess@v0.16.2/web/vtadmin/src/components/charts/Timeseries.tsx (about)

     1  /**
     2   * Copyright 2021 The Vitess Authors.
     3   *
     4   * Licensed under the Apache License, Version 2.0 (the "License");
     5   * you may not use this file except in compliance with the License.
     6   * You may obtain a copy of the License at
     7   *
     8   *     http://www.apache.org/licenses/LICENSE-2.0
     9   *
    10   * Unless required by applicable law or agreed to in writing, software
    11   * distributed under the License is distributed on an "AS IS" BASIS,
    12   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13   * See the License for the specific language governing permissions and
    14   * limitations under the License.
    15   */
    16  
    17  import Highcharts from 'highcharts';
    18  import HighchartsReact from 'highcharts-react-official';
    19  import { useEffect, useMemo, useRef } from 'react';
    20  import { mergeOptions } from './chartOptions';
    21  
    22  interface Props {
    23      isLoading?: boolean;
    24      options: Highcharts.Options | undefined;
    25  }
    26  
    27  export const Timeseries = ({ isLoading, options }: Props) => {
    28      // See https://github.com/highcharts/highcharts-react/issues/290#issuecomment-802914598
    29      const ref = useRef<{
    30          chart: Highcharts.Chart;
    31          container: React.RefObject<HTMLDivElement>;
    32      }>(null);
    33  
    34      useEffect(() => {
    35          if (!ref.current) {
    36              return;
    37          }
    38  
    39          if (isLoading) {
    40              ref.current.chart.showLoading();
    41          } else {
    42              ref.current.chart.hideLoading();
    43          }
    44      }, [isLoading]);
    45  
    46      const _options = useMemo(() => {
    47          return mergeOptions(
    48              {
    49                  tooltip: {
    50                      hideDelay: 0,
    51                      shared: true,
    52                  },
    53                  xAxis: {
    54                      crosshair: true,
    55                      type: 'datetime',
    56                  },
    57                  yAxis: {
    58                      crosshair: true,
    59                      // Setting `softMax` to any positive integer will anchor the y=0 gridline
    60                      // at the bottom of the chart even when there is no data to show.
    61                      softMax: 1,
    62                      softMin: 0,
    63                      title: {
    64                          text: undefined,
    65                      },
    66                  },
    67              },
    68              options
    69          );
    70      }, [options]);
    71  
    72      return <HighchartsReact highcharts={Highcharts} options={_options} ref={ref} />;
    73  };