import {OverlayTrigger} from "react-bootstrap"; import React from "react"; import {v4 as uuidv4} from "uuid"; const resourcesWidthStyle = (occupied, max) => { return { width: `${Math.min(occupied * 100 / max, 100)}%`, } }; function EEMRenderer({occupied, max}) { return ( <div className="nbr-connectors" key={uuidv4()}> <div style={{...resourcesWidthStyle(occupied, max)}}></div> </div> ) } function ClockRenderer({occupied, max}) { return ( <div className="nbr-clocks" key={uuidv4()}> <div style={{...resourcesWidthStyle(occupied, max)}}></div> </div> ) } const resource_progress_renderers = { "eem": EEMRenderer, "clk": ClockRenderer, "idc": EEMRenderer } function EEMTipRender({occupied, max}) { return (<p key={uuidv4()}>{`${occupied}/${max} EEM connectors used`}</p>); } function IDCTipRender({occupied, max}) { return (<p key={uuidv4()}>{`${occupied}/${max} IDC connectors used`}</p>); } function ClockTipRender({occupied, max}) { return (<p key={uuidv4()}>{`${occupied}/${max} clock connectors used`}</p>); } const resource_tip = { "eem": EEMTipRender, "clk": ClockTipRender, "idc": IDCTipRender } function RenderResources({resources, library}) { if (!resources) return null; let result = []; resources.forEach((value, _) => { if (library[value.name]) result.push(library[value.name](value)); }); return result; } export function Resources({resources}) { return ( <OverlayTrigger placement="top" trigger={['click', 'hover', 'focus']} overlay={({arrowProps, hasDoneInitialMeasure, show, ...props}) => ( <div className="k-popup-connectors" {...props}> <RenderResources resources={resources} library={resource_tip} /> </div> )} rootClose > <div className="progress-container"> <RenderResources resources={resources} library={resource_progress_renderers} /> </div> </OverlayTrigger> ) }