Sha256: 54ba27947197c7554e1b7b89704ebd81806329e158611bf79445e5ed1bad78bf
Contents?: true
Size: 1.19 KB
Versions: 33
Compression:
Stored size: 1.19 KB
Contents
import React from 'react';
import PropTypes from 'prop-types';
import { Grid, DonutChart } from 'patternfly-react';
import './statusChart.scss';
const StatusChart = ({ completed }) => {
const donutConfigData = {
columns: [
['Completed', completed],
['Remain', 100 - completed],
],
order: null,
};
const pfGetUtilizationDonutTooltipContents = d => {
const {
0: { name, value },
} = d;
return `<span class="donut-tooltip-pf" style="white-space: nowrap;">${value}% ${name}</span>`;
};
const donutConfigTooltip = {
contents: pfGetUtilizationDonutTooltipContents,
};
return (
<Grid.Col sm={4}>
<div className="status-chart">
<DonutChart
id="donunt-chart-1"
size={{
width: 210,
height: 210,
}}
data={donutConfigData}
tooltip={donutConfigTooltip}
title={{
type: 'percent',
primary: `${completed}%`,
secondary: 'Completed',
}}
/>
</div>
</Grid.Col>
);
};
StatusChart.propTypes = {
completed: PropTypes.number,
};
StatusChart.defaultProps = {
completed: 0,
};
export default StatusChart;
Version data entries
33 entries across 33 versions & 2 rubygems