github.com/pelicanplatform/pelican@v1.0.5/web_ui/frontend/components/graphs/LineGraph.tsx (about)

     1  /***************************************************************
     2   *
     3   * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research
     4   *
     5   * Licensed under the Apache License, Version 2.0 (the "License"); you
     6   * may not use this file except in compliance with the License.  You may
     7   * obtain a copy of the License at
     8   *
     9   *    http://www.apache.org/licenses/LICENSE-2.0
    10   *
    11   * Unless required by applicable law or agreed to in writing, software
    12   * distributed under the License is distributed on an "AS IS" BASIS,
    13   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    14   * See the License for the specific language governing permissions and
    15   * limitations under the License.
    16   *
    17   ***************************************************************/
    18  
    19  import {useState} from "react";
    20  import {
    21      ChartOptions,
    22      ChartDataset,
    23  } from 'chart.js';
    24  
    25  import {BoxProps} from "@mui/material";
    26  
    27  
    28  import {query_basic, TimeDuration} from "@/components/graphs/prometheus";
    29  import {ChartData} from "chart.js";
    30  import Graph from "@/components/graphs/Graph";
    31  
    32  
    33  interface LineGraphProps {
    34      boxProps?: BoxProps;
    35      metric: string;
    36      duration?: TimeDuration;
    37      resolution?: TimeDuration;
    38      options?: ChartOptions<"line">
    39      datasetOptions?: Partial<ChartDataset<"line">>
    40  }
    41  
    42  export default function LineGraph({ boxProps, metric, duration=new TimeDuration(31, "d"), resolution=new TimeDuration(1, "h"), options, datasetOptions}: LineGraphProps) {
    43  
    44      let [_duration, setDuration] = useState(duration)
    45      let [_resolution, setResolution] = useState(resolution)
    46  
    47      async function getData(){
    48          let chartData: ChartData<"line", any, any> = {
    49              datasets: [{
    50                  data: await query_basic({metric: metric, duration:_duration, resolution:_resolution}),
    51                  ...datasetOptions
    52              }]
    53          }
    54  
    55          return chartData
    56      }
    57  
    58      return (
    59          <Graph getData={getData} options={options} boxProps={boxProps}/>
    60      )
    61  
    62  }