mirror of https://github.com/rancher/dashboard.git
29 lines
845 B
JavaScript
29 lines
845 B
JavaScript
import ConsumptionGauge from './ConsumptionGauge';
|
|
|
|
export default {
|
|
title: 'Components/ConsumptionGauge',
|
|
component: ConsumptionGauge,
|
|
decorators: []
|
|
};
|
|
|
|
export const Story = () => ({
|
|
components: { ConsumptionGauge },
|
|
methods: {
|
|
formatter(value) {
|
|
const valueAsArray = value.toString().split('');
|
|
|
|
valueAsArray.splice(1, 0, ',');
|
|
|
|
return valueAsArray.join('');
|
|
}
|
|
},
|
|
template: `
|
|
<div style="display: flex; flex-direction: row; justify-content: space-between;">
|
|
<ConsumptionGauge resourceName="DISK" :capacity="789" :used="300"/>
|
|
<ConsumptionGauge resourceName="RAM" :capacity="456" :used="360" units="GiB"/>
|
|
<ConsumptionGauge resourceName="CPU" :capacity="1230" :used="1200" :numberFormatter="formatter"/>
|
|
</div>`,
|
|
});
|
|
|
|
Story.story = { name: 'ConsumptionGauge' };
|