1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
import PropTypes from "prop-types";
import React from "react";
import { Group, Rect } from "react-konva";
import {
RACK_ENERGY_BAR_BACKGROUND_COLOR,
RACK_ENERGY_BAR_FILL_COLOR,
RACK_SPACE_BAR_BACKGROUND_COLOR,
RACK_SPACE_BAR_FILL_COLOR
} from "../../../../util/colors";
import {
OBJECT_BORDER_WIDTH_IN_PIXELS,
OBJECT_MARGIN_IN_PIXELS,
RACK_FILL_ICON_OPACITY,
RACK_FILL_ICON_WIDTH,
TILE_SIZE_IN_PIXELS
} from "../MapConstants";
import ImageComponent from "./ImageComponent";
const RackFillBar = ({ positionX, positionY, type, fillFraction }) => {
const halfOfObjectBorderWidth = OBJECT_BORDER_WIDTH_IN_PIXELS / 2;
const x =
positionX * TILE_SIZE_IN_PIXELS +
OBJECT_MARGIN_IN_PIXELS +
(type === "space"
? halfOfObjectBorderWidth
: 0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS));
const startY =
positionY * TILE_SIZE_IN_PIXELS +
OBJECT_MARGIN_IN_PIXELS +
halfOfObjectBorderWidth;
const width =
0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) -
halfOfObjectBorderWidth;
const fullHeight =
TILE_SIZE_IN_PIXELS -
OBJECT_MARGIN_IN_PIXELS * 2 -
OBJECT_BORDER_WIDTH_IN_PIXELS;
const fractionHeight = fillFraction * fullHeight;
const fractionY =
(positionY + 1) * TILE_SIZE_IN_PIXELS -
OBJECT_MARGIN_IN_PIXELS -
halfOfObjectBorderWidth -
fractionHeight;
return (
<Group>
<Rect
x={x}
y={startY}
width={width}
height={fullHeight}
fill={
type === "space"
? RACK_SPACE_BAR_BACKGROUND_COLOR
: RACK_ENERGY_BAR_BACKGROUND_COLOR
}
/>
<Rect
x={x}
y={fractionY}
width={width}
height={fractionHeight}
fill={
type === "space"
? RACK_SPACE_BAR_FILL_COLOR
: RACK_ENERGY_BAR_FILL_COLOR
}
/>
<ImageComponent
src={"/img/topology/rack-" + type + "-icon.png"}
x={x + width * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
y={startY + fullHeight * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
width={RACK_FILL_ICON_WIDTH}
height={RACK_FILL_ICON_WIDTH}
opacity={RACK_FILL_ICON_OPACITY}
/>
</Group>
);
};
RackFillBar.propTypes = {
positionX: PropTypes.number.isRequired,
positionY: PropTypes.number.isRequired,
type: PropTypes.string.isRequired,
fillFraction: PropTypes.number.isRequired
};
export default RackFillBar;
|
