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

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2022 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 styled from "styled-components";
    19  import get from "lodash/get";
    20  import { Box, breakPoints } from "mds";
    21  
    22  const DualSTCardContent = styled.div(({ theme }) => ({
    23    fontFamily: "Inter,sans-serif",
    24    color: get(theme, "signalColors.main", "#07193E"),
    25    maxWidth: "321px",
    26    display: "flex",
    27    marginLeft: "auto",
    28    marginRight: "auto",
    29    cursor: "default",
    30    "& .stat-text": {
    31      color: get(theme, "mutedText", "#87888d"),
    32      fontSize: "12px",
    33      marginTop: "8px",
    34    },
    35  }));
    36  
    37  const DualStatCard = ({
    38    statItemLeft = null,
    39    statItemRight = null,
    40    icon = null,
    41    label = "",
    42  }: {
    43    statItemLeft: any;
    44    statItemRight: any;
    45    icon: any;
    46    label: string;
    47  }) => {
    48    const getContent = () => {
    49      return (
    50        <Box
    51          sx={{
    52            flex: 1,
    53            display: "flex",
    54            padding: "0 8px 0 8px",
    55            [`@media (max-width: ${breakPoints.sm}px)`]: {
    56              padding: "0 10px 0 10px",
    57            },
    58          }}
    59        >
    60          <Box
    61            sx={{
    62              flex: 1,
    63              display: "flex",
    64              flexFlow: "column",
    65            }}
    66          >
    67            <Box
    68              sx={{
    69                fontSize: "16px",
    70                fontWeight: 600,
    71              }}
    72            >
    73              {label}
    74            </Box>
    75  
    76            <Box
    77              sx={{
    78                display: "flex",
    79                alignItems: "center",
    80                gap: 5,
    81                justifyContent: "space-between",
    82                paddingBottom: 0,
    83                fontSize: 55,
    84                flexFlow: "row",
    85                fontWeight: 600,
    86                "& .stat-value": {
    87                  textAlign: "center",
    88                  height: "50px",
    89                },
    90                "& .min-icon": {
    91                  marginRight: "8px",
    92                  marginTop: "8px",
    93                  height: "10px",
    94                  width: "10px",
    95                },
    96                [`@media (max-width: ${breakPoints.sm}px)`]: {
    97                  fontSize: 35,
    98                },
    99                [`@media (max-width: ${breakPoints.lg}px)`]: {
   100                  fontSize: 45,
   101                },
   102                [`@media (max-width: ${breakPoints.xl}px)`]: {
   103                  fontSize: 50,
   104                },
   105              }}
   106            >
   107              {statItemLeft}
   108              {statItemRight}
   109            </Box>
   110          </Box>
   111          <Box
   112            sx={{
   113              width: "20px",
   114              height: "20px",
   115              marginTop: "8px",
   116              maxWidth: "26px",
   117              "& .min-icon": {
   118                width: "16px",
   119                height: "16px",
   120              },
   121            }}
   122          >
   123            {icon}
   124          </Box>
   125        </Box>
   126      );
   127    };
   128  
   129    return <DualSTCardContent>{getContent()}</DualSTCardContent>;
   130  };
   131  
   132  export default DualStatCard;