51 lines
1.3 KiB
JavaScript
51 lines
1.3 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { Progress, Flex, Space } from 'antd'
|
|
import React from 'react'
|
|
import StateTag from './StateTag'
|
|
|
|
const getProgressColor = (percent) => {
|
|
if (percent <= 50) {
|
|
return '#52c41a' // green[5]
|
|
} else if (percent <= 80) {
|
|
// Interpolate between green and yellow
|
|
const ratio = (percent - 50) / 30
|
|
return `rgb(${Math.round(255 * ratio)}, ${Math.round(255 * (1 - ratio))}, 0)`
|
|
} else {
|
|
// Interpolate between yellow and red
|
|
const ratio = (percent - 80) / 20
|
|
return `rgb(255, ${Math.round(255 * (1 - ratio))}, 0)`
|
|
}
|
|
}
|
|
|
|
const FilamentStockState = ({
|
|
state = { type: 'unknown' },
|
|
showProgress = true,
|
|
showState = true
|
|
}) => {
|
|
return (
|
|
<Flex gap='small' align={'center'}>
|
|
{showState && (
|
|
<Space>
|
|
<StateTag state={state.type} />
|
|
</Space>
|
|
)}
|
|
{showProgress && state.type === 'partiallyconsumed' ? (
|
|
<Progress
|
|
percent={Math.round((state.percent || 0) * 100)}
|
|
style={{ width: '150px', marginBottom: '2px' }}
|
|
strokeColor={getProgressColor(Math.round((state.percent || 0) * 100))}
|
|
showInfo={false}
|
|
/>
|
|
) : null}
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
FilamentStockState.propTypes = {
|
|
state: PropTypes.object,
|
|
showProgress: PropTypes.bool,
|
|
showState: PropTypes.bool
|
|
}
|
|
|
|
export default FilamentStockState
|