github.com/minio/console@v1.4.1/web-app/src/screens/Console/Dashboard/Prometheus/Widgets/tooltips/LineChartTooltip.tsx (about)

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2021 MinIO, Inc.
     3  //
     4  // This program is free software: you can redistribute it and/or modify
     5  // it under the terms of the GNU Affero General Public License as published by
     6  // the Free Software Foundation, either version 3 of the License, or
     7  // (at your option) any later version.
     8  //
     9  // This program is distributed in the hope that it will be useful,
    10  // but WITHOUT ANY WARRANTY; without even the implied warranty of
    11  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    12  // GNU Affero General Public License for more details.
    13  //
    14  // You should have received a copy of the GNU Affero General Public License
    15  // along with this program.  If not, see <http://www.gnu.org/licenses/>.
    16  
    17  import React from "react";
    18  import { Box } from "mds";
    19  import { getTimeFromTimestamp } from "../../../../../../common/utils";
    20  import { tooltipCommon } from "../../../../Common/FormComponents/common/styleLibrary";
    21  
    22  const LineChartTooltip = ({
    23    active,
    24    payload,
    25    label,
    26    linearConfiguration,
    27    yAxisFormatter,
    28  }: any) => {
    29    if (active) {
    30      return (
    31        <Box sx={tooltipCommon.customTooltip}>
    32          <Box sx={tooltipCommon.timeStampTitle}>
    33            {getTimeFromTimestamp(label, true)}
    34          </Box>
    35          {payload &&
    36            payload.map((pl: any, index: number) => {
    37              return (
    38                <Box
    39                  sx={tooltipCommon.labelContainer}
    40                  key={`lbPl-${index}-${linearConfiguration[index].keyLabel}`}
    41                >
    42                  <Box
    43                    sx={tooltipCommon.labelColor}
    44                    style={{
    45                      backgroundColor: linearConfiguration[index].lineColor,
    46                    }}
    47                  />
    48                  <Box
    49                    sx={{
    50                      ...tooltipCommon.itemValue,
    51                      "& span.valueContainer": {
    52                        ...tooltipCommon.valueContainer,
    53                      },
    54                    }}
    55                  >
    56                    <span className={"valueContainer"}>
    57                      {linearConfiguration[index].keyLabel}:{" "}
    58                      {yAxisFormatter(pl.value)}
    59                    </span>
    60                  </Box>
    61                </Box>
    62              );
    63            })}
    64        </Box>
    65      );
    66    }
    67  
    68    return null;
    69  };
    70  
    71  export default LineChartTooltip;