1 files changed, 73 insertions, 51 deletions
diff --git a/src/components/app/map/elements/RackFillBar.js b/src/components/app/map/elements/RackFillBar.js
index 3a8a1137..43701d97 100644
--- a/src/components/app/map/elements/RackFillBar.js
+++ b/src/components/app/map/elements/RackFillBar.js
@@ -1,67 +1,89 @@
 import PropTypes from "prop-types";
 import React from "react";
-import {Group, Rect} from "react-konva";
+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
+  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
+  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 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;
+  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>
-    );
+  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,
+  positionX: PropTypes.number.isRequired,
+  positionY: PropTypes.number.isRequired,
+  type: PropTypes.string.isRequired,
+  fillFraction: PropTypes.number.isRequired
 };
 
 export default RackFillBar;