@kinvolk/headlamp-plugin
Version:
The needed infrastructure for building Headlamp plugins.
46 lines (45 loc) • 2.39 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
* Copyright 2025 The Kubernetes Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import '../../../i18n/config';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import { PercentageCircle } from '../Chart';
import { TooltipIcon } from '../Tooltip';
export function TileChart(props) {
const { title, infoTooltip = '', legend, total, data, ...others } = props;
return (_jsx(Paper, { variant: "outlined", sx: theme => ({
background: theme.palette.background.muted,
padding: theme.spacing(2),
height: '100%',
maxWidth: '300px',
margin: '0 auto',
}), children: _jsxs(Box, { display: "flex", sx: theme => ({
[theme.breakpoints.down('sm')]: {
flexWrap: 'wrap',
},
}), children: [_jsxs(Box, { flexGrow: 1, width: "100%", children: [_jsxs(Box, { children: [_jsx(Typography, { sx: theme => ({
fontSize: theme.typography.pxToRem(16),
display: 'inline',
fontWeight: 600,
}), gutterBottom: true, children: title || '' }), infoTooltip && _jsx(TooltipIcon, { children: infoTooltip })] }), _jsx(Typography, { sx: theme => ({
fontSize: theme.typography.pxToRem(16),
display: 'inline',
fontWeight: 400,
}), gutterBottom: true, children: legend || '' })] }), _jsx(Box, { children: !!data && (_jsx(PercentageCircle, { data: data, total: total, size: 140, thickness: 11, ...others })) })] }) }));
}
export default TileChart;