@fmsim/machine 0.0.54 → 0.0.56

package/dist/zone-capacity-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"zone-capacity-bar.js","sourceRoot":"","sources":["../src/zone-capacity-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentNature, POSITION, Properties } from '@hatiolab/things-scene'\nimport { LEGEND_CAPACITY } from './features/mcs-status-default'\nimport { safeRound } from './utils/safe-round'\nimport { getVaueOnRanges } from './utils/get-value-on-ranges'\nimport { MCSZoneMixin, MCSZoneMixinProperties } from './features/mcs-zone-mixin'\nimport MCSUnit from './mcs-unit'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    ...MCSZoneMixinProperties,\n    {\n      type: 'number',\n      name: 'currentUsage',\n      label: 'current-usage'\n    },\n    {\n      type: 'number',\n      name: 'highWatermark',\n      label: 'high-watermark'\n    },\n    {\n      type: 'number',\n      name: 'lowWatermark',\n      label: 'low-watermark'\n    },\n    {\n      type: 'number',\n      name: 'maxCapacity',\n      label: 'max-capacity'\n    },\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round',\n      property: {\n        min: 0\n      }\n    },\n    {\n      type: 'hidden',\n      name: 'usage',\n      label: 'usage'\n    }\n  ],\n  'value-property': 'usage'\n}\n\nvar controlHandler = {\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    var { left, top, width, height } = component.model\n\n    var transcoorded = component.transcoordP2S(point.x, point.y)\n    var round = ((transcoorded.x - left) / (width / 2)) * 100\n\n    round = safeRound(round, width, height)\n\n    component.set({\n      round\n    })\n  }\n}\n\nexport default class ZoneCapacityBar extends MCSZoneMixin(MCSUnit) {\n  static get nature() {\n    return NATURE\n  }\n\n  get controls() {\n    var { left, top, width, round, height } = this.state\n    round = round == undefined ? 0 : safeRound(round, width, height)\n\n    return [\n      {\n        x: left + (width / 2) * (round / 100),\n        y: top,\n        handler: controlHandler\n      }\n    ]\n  }\n\n  getLegendFallback() {\n    return LEGEND_CAPACITY\n  }\n\n  get statusColor() {\n    return getVaueOnRanges(this.usage, this.legend)\n  }\n\n  get text() {\n    return this.usage + '%'\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n\n    if (width >= height) {\n      this.renderLandscape(context)\n    } else {\n      this.renderPortrait(context)\n    }\n  }\n\n  renderLandscape(context: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n    const { lineWidth, strokeStyle, round, fillStyle = '#aaa' } = this.state\n\n    context.strokeStyle = strokeStyle\n    context.lineWidth = lineWidth\n\n    context.save()\n    context.translate(left, top)\n\n    // gauge background\n    context.beginPath()\n\n    context.fillStyle = fillStyle\n    context.roundRect(0, 0, width, height, round)\n\n    context.fill()\n    context.stroke()\n\n    context.clip()\n\n    // gauge foreground\n    context.beginPath()\n\n    context.fillStyle = this.statusColor!\n\n    context.rect(0, 0, (width / 100) * this.usage, height)\n    context.fill()\n\n    context.beginPath()\n    context.strokeStyle = strokeStyle\n    context.roundRect(0, 0, width, height, round)\n    context.stroke()\n\n    context.beginPath()\n\n    context.translate(-left, -top)\n    context.restore()\n  }\n\n  renderPortrait(context: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n    const { lineWidth, strokeStyle, round, fillStyle } = this.state\n\n    context.strokeStyle = strokeStyle\n    context.lineWidth = lineWidth\n\n    context.save()\n    context.translate(left, top)\n\n    // gauge background\n    context.beginPath()\n\n    context.fillStyle = fillStyle\n    context.roundRect(0, 0, width, height, round)\n\n    context.fill()\n    context.stroke()\n\n    context.clip()\n\n    // gauge foreground\n    context.beginPath()\n\n    context.fillStyle = this.statusColor!\n\n    context.rect(0, height - (height / 100) * this.usage, width, (height / 100) * this.usage)\n    context.fill()\n\n    context.beginPath()\n    context.roundRect(0, 0, width, height, round)\n    context.stroke()\n\n    context.beginPath()\n\n    context.translate(-left, -top)\n    context.restore()\n  }\n\n  get usage() {\n    const { currentUsage = 0, maxCapacity = 100 } = this.state\n    return Math.round((currentUsage / maxCapacity) * 100)\n  }\n\n  set usage(usage: number) {\n    // intentionally have done nothing\n  }\n\n  onchangeData(after: Properties, before: Properties): void {\n    const {\n      CURRENTCAPACITY = 0,\n      MAXCAPACITY = 100,\n      HIGHWATERMARK = 100\n    } = typeof this.data == 'object' ? this.data : {}\n\n    const currentUsage = Number(CURRENTCAPACITY) || 0\n    const maxCapacity = Number(MAXCAPACITY) || 100\n    const highWatermark = Number(HIGHWATERMARK) || 100\n\n    this.setState({\n      currentUsage,\n      maxCapacity,\n      highWatermark,\n      usage: Math.round((currentUsage / maxCapacity) * 100)\n    })\n  }\n}\n\nComponent.register('ZoneCapacityBar', ZoneCapacityBar)\n"]}
+{"version":3,"file":"zone-capacity-bar.js","sourceRoot":"","sources":["../src/zone-capacity-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentNature, POSITION, Properties } from '@hatiolab/things-scene'\nimport { LEGEND_CAPACITY } from './features/mcs-status-default'\nimport { safeRound } from './utils/safe-round'\nimport { getVaueOnRanges } from './utils/get-value-on-ranges'\nimport { MCSZoneMixin, MCSZoneMixinProperties } from './features/mcs-zone-mixin'\nimport MCSUnit from './mcs-unit'\nimport { themesColorRange } from './features/client-api'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    ...MCSZoneMixinProperties,\n    {\n      type: 'select',\n      label: 'legend-name',\n      name: 'legendName',\n      property: {\n        options: themesColorRange\n      }\n    },\n    {\n      type: 'number',\n      name: 'currentUsage',\n      label: 'current-usage'\n    },\n    {\n      type: 'number',\n      name: 'highWatermark',\n      label: 'high-watermark'\n    },\n    {\n      type: 'number',\n      name: 'lowWatermark',\n      label: 'low-watermark'\n    },\n    {\n      type: 'number',\n      name: 'maxCapacity',\n      label: 'max-capacity'\n    },\n    {\n      type: 'boolean',\n      name: 'fullup',\n      label: 'fullup'\n    },\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round',\n      property: {\n        min: 0\n      }\n    },\n    {\n      type: 'hidden',\n      name: 'usage',\n      label: 'usage'\n    }\n  ],\n  'value-property': 'usage'\n}\n\nvar controlHandler = {\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    var { left, top, width, height } = component.model\n\n    var transcoorded = component.transcoordP2S(point.x, point.y)\n    var round = ((transcoorded.x - left) / (width / 2)) * 100\n\n    round = safeRound(round, width, height)\n\n    component.set({\n      round\n    })\n  }\n}\n\nexport default class ZoneCapacityBar extends MCSZoneMixin(MCSUnit) {\n  static get nature() {\n    return NATURE\n  }\n\n  get controls() {\n    var { left, top, width, round, height } = this.state\n    round = round == undefined ? 0 : safeRound(round, width, height)\n\n    return [\n      {\n        x: left + (width / 2) * (round / 100),\n        y: top,\n        handler: controlHandler\n      }\n    ]\n  }\n\n  getLegendFallback() {\n    return LEGEND_CAPACITY\n  }\n\n  get statusColor() {\n    const { fullup } = this.state\n    return fullup ? 'red' : getVaueOnRanges(this.usage, this.legend)\n  }\n\n  get text() {\n    return this.usage + '%'\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n\n    if (width >= height) {\n      this.renderLandscape(context)\n    } else {\n      this.renderPortrait(context)\n    }\n  }\n\n  renderLandscape(context: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n    const { highWatermark, lowWatermark, lineWidth, strokeStyle, round, fillStyle = 'white' } = this.state\n\n    context.save()\n    context.translate(left, top)\n\n    // gauge background\n    context.beginPath()\n\n    context.fillStyle = fillStyle\n    context.roundRect(0, 0, width, height, round)\n\n    context.fill()\n    context.stroke()\n\n    context.clip()\n\n    // gauge foreground\n    context.beginPath()\n\n    context.fillStyle = this.statusColor!\n\n    context.rect(0, 0, (width / 100) * this.usage, height)\n    context.fill()\n\n    // high-watermark level\n\n    if (highWatermark && highWatermark > 0 && highWatermark < 100) {\n      context.beginPath()\n\n      context.strokeStyle = 'black'\n      context.lineWidth = 1\n      context.setLineDash([3])\n\n      const x = (width / 100) * highWatermark\n      context.moveTo(x, 0)\n      context.lineTo(x, height)\n\n      context.stroke()\n    }\n\n    // low-watermark level\n\n    if (lowWatermark && lowWatermark > 0 && lowWatermark < 100) {\n      context.beginPath()\n\n      context.strokeStyle = 'black'\n      context.lineWidth = 1\n      context.setLineDash([3])\n\n      const x = (width / 100) * lowWatermark\n      context.moveTo(x, 0)\n      context.lineTo(x, height)\n\n      context.stroke()\n    }\n\n    // gauge outline\n    context.beginPath()\n\n    context.setLineDash([])\n    context.strokeStyle = strokeStyle\n    context.lineWidth = lineWidth\n    context.roundRect(0, 0, width, height, round)\n    context.stroke()\n\n    context.beginPath()\n\n    context.translate(-left, -top)\n    context.restore()\n  }\n\n  renderPortrait(context: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n    const { highWatermark, lowWatermark, lineWidth, strokeStyle, round, fillStyle = 'white' } = this.state\n\n    context.save()\n    context.translate(left, top)\n\n    // gauge background\n    context.beginPath()\n\n    context.fillStyle = fillStyle\n    context.roundRect(0, 0, width, height, round)\n\n    context.fill()\n\n    context.clip()\n\n    // gauge foreground\n    context.beginPath()\n\n    context.fillStyle = this.statusColor!\n\n    context.rect(0, height - (height / 100) * this.usage, width, (height / 100) * this.usage)\n    context.fill()\n\n    // high-watermark level\n\n    if (highWatermark && highWatermark > 0 && highWatermark < 100) {\n      context.beginPath()\n\n      context.strokeStyle = 'black'\n      context.lineWidth = 1\n      context.setLineDash([3])\n\n      const y = height - (height / 100) * highWatermark\n      context.moveTo(0, y)\n      context.lineTo(width, y)\n\n      context.stroke()\n    }\n\n    // low-watermark level\n\n    if (lowWatermark && lowWatermark > 0 && lowWatermark < 100) {\n      context.beginPath()\n\n      context.strokeStyle = 'black'\n      context.lineWidth = 1\n      context.setLineDash([3])\n\n      const y = height - (height / 100) * lowWatermark\n      context.moveTo(0, y)\n      context.lineTo(width, y)\n\n      context.stroke()\n    }\n\n    // gauge outline\n    context.beginPath()\n\n    context.setLineDash([])\n    context.strokeStyle = strokeStyle\n    context.lineWidth = lineWidth\n    context.roundRect(0, 0, width, height, round)\n    context.stroke()\n\n    context.beginPath()\n\n    context.translate(-left, -top)\n    context.restore()\n  }\n\n  get usage() {\n    const { currentUsage = 0, maxCapacity = 100 } = this.state\n    return Math.round((currentUsage / maxCapacity) * 100)\n  }\n\n  set usage(usage: number) {\n    // intentionally have done nothing\n  }\n\n  onchangeData(after: Properties, before: Properties): void {\n    const {\n      CURRENTCAPACITY = 0,\n      MAXCAPACITY = 100,\n      HIGHWATERMARK = 100,\n      LOWWATERMARK = 0,\n      FULLUP = false\n    } = typeof this.data == 'object' ? this.data : {}\n\n    const currentUsage = Number(CURRENTCAPACITY) || 0\n    const maxCapacity = Number(MAXCAPACITY) || 100\n    const highWatermark = Number(HIGHWATERMARK) || 100\n    const lowWatermark = Number(LOWWATERMARK) || 0\n\n    this.setState({\n      currentUsage,\n      maxCapacity,\n      highWatermark,\n      lowWatermark,\n      fullup: FULLUP,\n      usage: Math.round((currentUsage / maxCapacity) * 100)\n    })\n  }\n}\n\nComponent.register('ZoneCapacityBar', ZoneCapacityBar)\n"]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fmsim/machine",
   "description": "Layout View를 구성하는 설비(machine)들과 유닛을 구현한 모듈입니다.",
   "author": "heartyoh",
-  "version": "0.0.54",
+  "version": "0.0.56",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "things-scene": true,
@@ -55,5 +55,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "d1b9db145730db6b9f13be80c0c519081ea73d0e"
+  "gitHead": "b19f39bf35c8a2c6f73391b3241f97cbb7504fd2"
 }

package/src/features/client-api.ts

@@ -44,7 +44,7 @@ export const themesColorRange = async () => {
   }
 
   const items = response.data.themes.items
-    .filter((item: any) => item.type == 'color-range')
+    .filter((item: any) => item.type == 'color-ranges')
     .map((item: any) => item.name)
   const sorted = items.sort()
 

package/src/features/mcs-status-default.ts

@@ -52,7 +52,7 @@ export const LEGEND_CARRIER: Legend = {
 
 export const LEGEND_CAPACITY: Legend = {
   '0~50': '#ad0d8c',
-  '60~80': '#01ff00',
+  '50~80': '#01ff00',
   '80~100': '#ffff00',
   default: '#d6d6d6'
 }

package/src/stocker-capacity-bar.ts

@@ -3,12 +3,21 @@ import { MCSStatusMixin } from './features/mcs-status-mixin'
 import { LEGEND_CAPACITY, Legend } from './features/mcs-status-default'
 import { safeRound } from './utils/safe-round'
 import { getVaueOnRanges } from './utils/get-value-on-ranges'
+import { themesColorRange } from './features/client-api'
 
 const NATURE: ComponentNature = {
   mutable: false,
   resizable: true,
   rotatable: true,
   properties: [
+    {
+      type: 'select',
+      label: 'legend-name',
+      name: 'legendName',
+      property: {
+        options: themesColorRange
+      }
+    },
     {
       type: 'number',
       name: 'currentUsage',
@@ -29,6 +38,11 @@ const NATURE: ComponentNature = {
       name: 'maxCapacity',
       label: 'max-capacity'
     },
+    {
+      type: 'boolean',
+      name: 'fullup',
+      label: 'fullup'
+    },
     {
       type: 'number',
       label: 'round',
@@ -96,7 +110,8 @@ export default class StockerCapacityBar extends MCSStatusMixin(RectPath(Shape))
   }
 
   get statusColor() {
-    return getVaueOnRanges(this.usage, this.legend)
+    const { fullup } = this.state
+    return fullup ? 'red' : getVaueOnRanges(this.usage, this.legend)
   }
 
   get text() {
@@ -115,10 +130,7 @@ export default class StockerCapacityBar extends MCSStatusMixin(RectPath(Shape))
 
   renderLandscape(context: CanvasRenderingContext2D) {
     const { left, top, width, height } = this.bounds
-    const { lineWidth, strokeStyle, round, fillStyle = '#aaa' } = this.state
-
-    context.strokeStyle = strokeStyle
-    context.lineWidth = lineWidth
+    const { highWatermark, lowWatermark, lineWidth, strokeStyle, round, fillStyle = 'white' } = this.state
 
     context.save()
     context.translate(left, top)
@@ -130,7 +142,6 @@ export default class StockerCapacityBar extends MCSStatusMixin(RectPath(Shape))
     context.roundRect(0, 0, width, height, round)
 
     context.fill()
-    context.stroke()
 
     context.clip()
 
@@ -142,8 +153,44 @@ export default class StockerCapacityBar extends MCSStatusMixin(RectPath(Shape))
     context.rect(0, 0, (width / 100) * this.usage, height)
     context.fill()
 
+    // high-watermark level
+
+    if (highWatermark && highWatermark > 0 && highWatermark < 100) {
+      context.beginPath()
+
+      context.strokeStyle = 'black'
+      context.lineWidth = 1
+      context.setLineDash([3])
+
+      const x = (width / 100) * highWatermark
+      context.moveTo(x, 0)
+      context.lineTo(x, height)
+
+      context.stroke()
+    }
+
+    // low-watermark level
+
+    if (lowWatermark && lowWatermark > 0 && lowWatermark < 100) {
+      context.beginPath()
+
+      context.strokeStyle = 'black'
+      context.lineWidth = 1
+      context.setLineDash([3])
+
+      const x = (width / 100) * lowWatermark
+      context.moveTo(x, 0)
+      context.lineTo(x, height)
+
+      context.stroke()
+    }
+
+    // gauge outline
     context.beginPath()
+
+    context.setLineDash([])
     context.strokeStyle = strokeStyle
+    context.lineWidth = lineWidth
     context.roundRect(0, 0, width, height, round)
     context.stroke()
 
@@ -155,10 +202,7 @@ export default class StockerCapacityBar extends MCSStatusMixin(RectPath(Shape))
 
   renderPortrait(context: CanvasRenderingContext2D) {
     const { left, top, width, height } = this.bounds
-    const { lineWidth, strokeStyle, round, fillStyle } = this.state
-
-    context.strokeStyle = strokeStyle
-    context.lineWidth = lineWidth
+    const { highWatermark, lowWatermark, lineWidth, strokeStyle, round, fillStyle = 'white' } = this.state
 
     context.save()
     context.translate(left, top)
@@ -170,7 +214,6 @@ export default class StockerCapacityBar extends MCSStatusMixin(RectPath(Shape))
     context.roundRect(0, 0, width, height, round)
 
     context.fill()
-    context.stroke()
 
     context.clip()
 
@@ -182,7 +225,44 @@ export default class StockerCapacityBar extends MCSStatusMixin(RectPath(Shape))
     context.rect(0, height - (height / 100) * this.usage, width, (height / 100) * this.usage)
     context.fill()
 
+    // high-watermark level
+
+    if (highWatermark && highWatermark > 0 && highWatermark < 100) {
+      context.beginPath()
+
+      context.strokeStyle = 'black'
+      context.lineWidth = 1
+      context.setLineDash([3])
+
+      const y = height - (height / 100) * highWatermark
+      context.moveTo(0, y)
+      context.lineTo(width, y)
+
+      context.stroke()
+    }
+
+    // low-watermark level
+
+    if (lowWatermark && lowWatermark > 0 && lowWatermark < 100) {
+      context.beginPath()
+
+      context.strokeStyle = 'black'
+      context.lineWidth = 1
+      context.setLineDash([3])
+
+      const y = height - (height / 100) * lowWatermark
+      context.moveTo(0, y)
+      context.lineTo(width, y)
+
+      context.stroke()
+    }
+
+    // gauge outline
     context.beginPath()
+
+    context.setLineDash([])
+    context.strokeStyle = strokeStyle
+    context.lineWidth = lineWidth
     context.roundRect(0, 0, width, height, round)
     context.stroke()
 
@@ -205,17 +285,22 @@ export default class StockerCapacityBar extends MCSStatusMixin(RectPath(Shape))
     const {
       CURRENTCAPACITY = 0,
       MAXCAPACITY = 100,
-      HIGHWATERMARK = 100
+      HIGHWATERMARK = 100,
+      LOWWATERMARK = 0,
+      FULLUP = false
     } = typeof this.data == 'object' ? this.data : {}
 
     const currentUsage = Number(CURRENTCAPACITY) || 0
     const maxCapacity = Number(MAXCAPACITY) || 100
     const highWatermark = Number(HIGHWATERMARK) || 100
+    const lowWatermark = Number(LOWWATERMARK) || 0
 
     this.setState({
       currentUsage,
       maxCapacity,
       highWatermark,
+      lowWatermark,
+      fullup: FULLUP,
       usage: Math.round((currentUsage / maxCapacity) * 100)
     })
   }

package/src/zone-capacity-bar.ts

@@ -4,6 +4,7 @@ import { safeRound } from './utils/safe-round'
 import { getVaueOnRanges } from './utils/get-value-on-ranges'
 import { MCSZoneMixin, MCSZoneMixinProperties } from './features/mcs-zone-mixin'
 import MCSUnit from './mcs-unit'
+import { themesColorRange } from './features/client-api'
 
 const NATURE: ComponentNature = {
   mutable: false,
@@ -11,6 +12,14 @@ const NATURE: ComponentNature = {
   rotatable: true,
   properties: [
     ...MCSZoneMixinProperties,
+    {
+      type: 'select',
+      label: 'legend-name',
+      name: 'legendName',
+      property: {
+        options: themesColorRange
+      }
+    },
     {
       type: 'number',
       name: 'currentUsage',
@@ -31,6 +40,11 @@ const NATURE: ComponentNature = {
       name: 'maxCapacity',
       label: 'max-capacity'
     },
+    {
+      type: 'boolean',
+      name: 'fullup',
+      label: 'fullup'
+    },
     {
       type: 'number',
       label: 'round',
@@ -86,7 +100,8 @@ export default class ZoneCapacityBar extends MCSZoneMixin(MCSUnit) {
   }
 
   get statusColor() {
-    return getVaueOnRanges(this.usage, this.legend)
+    const { fullup } = this.state
+    return fullup ? 'red' : getVaueOnRanges(this.usage, this.legend)
   }
 
   get text() {
@@ -105,10 +120,7 @@ export default class ZoneCapacityBar extends MCSZoneMixin(MCSUnit) {
 
   renderLandscape(context: CanvasRenderingContext2D) {
     const { left, top, width, height } = this.bounds
-    const { lineWidth, strokeStyle, round, fillStyle = '#aaa' } = this.state
-
-    context.strokeStyle = strokeStyle
-    context.lineWidth = lineWidth
+    const { highWatermark, lowWatermark, lineWidth, strokeStyle, round, fillStyle = 'white' } = this.state
 
     context.save()
     context.translate(left, top)
@@ -132,8 +144,44 @@ export default class ZoneCapacityBar extends MCSZoneMixin(MCSUnit) {
     context.rect(0, 0, (width / 100) * this.usage, height)
     context.fill()
 
+    // high-watermark level
+
+    if (highWatermark && highWatermark > 0 && highWatermark < 100) {
+      context.beginPath()
+
+      context.strokeStyle = 'black'
+      context.lineWidth = 1
+      context.setLineDash([3])
+
+      const x = (width / 100) * highWatermark
+      context.moveTo(x, 0)
+      context.lineTo(x, height)
+
+      context.stroke()
+    }
+
+    // low-watermark level
+
+    if (lowWatermark && lowWatermark > 0 && lowWatermark < 100) {
+      context.beginPath()
+
+      context.strokeStyle = 'black'
+      context.lineWidth = 1
+      context.setLineDash([3])
+
+      const x = (width / 100) * lowWatermark
+      context.moveTo(x, 0)
+      context.lineTo(x, height)
+
+      context.stroke()
+    }
+
+    // gauge outline
     context.beginPath()
+
+    context.setLineDash([])
     context.strokeStyle = strokeStyle
+    context.lineWidth = lineWidth
     context.roundRect(0, 0, width, height, round)
     context.stroke()
 
@@ -145,10 +193,7 @@ export default class ZoneCapacityBar extends MCSZoneMixin(MCSUnit) {
 
   renderPortrait(context: CanvasRenderingContext2D) {
     const { left, top, width, height } = this.bounds
-    const { lineWidth, strokeStyle, round, fillStyle } = this.state
-
-    context.strokeStyle = strokeStyle
-    context.lineWidth = lineWidth
+    const { highWatermark, lowWatermark, lineWidth, strokeStyle, round, fillStyle = 'white' } = this.state
 
     context.save()
     context.translate(left, top)
@@ -160,7 +205,6 @@ export default class ZoneCapacityBar extends MCSZoneMixin(MCSUnit) {
     context.roundRect(0, 0, width, height, round)
 
     context.fill()
-    context.stroke()
 
     context.clip()
 
@@ -172,7 +216,44 @@ export default class ZoneCapacityBar extends MCSZoneMixin(MCSUnit) {
     context.rect(0, height - (height / 100) * this.usage, width, (height / 100) * this.usage)
     context.fill()
 
+    // high-watermark level
+
+    if (highWatermark && highWatermark > 0 && highWatermark < 100) {
+      context.beginPath()
+
+      context.strokeStyle = 'black'
+      context.lineWidth = 1
+      context.setLineDash([3])
+
+      const y = height - (height / 100) * highWatermark
+      context.moveTo(0, y)
+      context.lineTo(width, y)
+
+      context.stroke()
+    }
+
+    // low-watermark level
+
+    if (lowWatermark && lowWatermark > 0 && lowWatermark < 100) {
+      context.beginPath()
+
+      context.strokeStyle = 'black'
+      context.lineWidth = 1
+      context.setLineDash([3])
+
+      const y = height - (height / 100) * lowWatermark
+      context.moveTo(0, y)
+      context.lineTo(width, y)
+
+      context.stroke()
+    }
+
+    // gauge outline
     context.beginPath()
+
+    context.setLineDash([])
+    context.strokeStyle = strokeStyle
+    context.lineWidth = lineWidth
     context.roundRect(0, 0, width, height, round)
     context.stroke()
 
@@ -195,17 +276,22 @@ export default class ZoneCapacityBar extends MCSZoneMixin(MCSUnit) {
     const {
       CURRENTCAPACITY = 0,
       MAXCAPACITY = 100,
-      HIGHWATERMARK = 100
+      HIGHWATERMARK = 100,
+      LOWWATERMARK = 0,
+      FULLUP = false
     } = typeof this.data == 'object' ? this.data : {}
 
     const currentUsage = Number(CURRENTCAPACITY) || 0
     const maxCapacity = Number(MAXCAPACITY) || 100
     const highWatermark = Number(HIGHWATERMARK) || 100
+    const lowWatermark = Number(LOWWATERMARK) || 0
 
     this.setState({
       currentUsage,
       maxCapacity,
       highWatermark,
+      lowWatermark,
+      fullup: FULLUP,
       usage: Math.round((currentUsage / maxCapacity) * 100)
     })
   }

package/translations/en.json

@@ -1,5 +1,6 @@
 {
   "label.current-usage": "current usage",
+  "label.fullup": "fullup",
   "label.high-watermark": "high watermark",
   "label.legend-name": "legend",
   "label.max-capacity": "max capacity",

package/translations/ja.json

@@ -1,6 +1,8 @@
 {
   "label.current-usage": "current usage",
+  "label.fullup": "fullup",
   "label.high-watermark": "high watermark",
+  "label.low-watermark": "low watermark",
   "label.legend-name": "legend",
   "label.max-capacity": "max capacity",
   "label.carrier-legend-name": "carrier legend"

package/translations/ko.json

@@ -1,6 +1,8 @@
 {
   "label.current-usage": "현재 사용량",
+  "label.fullup": "만재",
   "label.high-watermark": "고수위워터마크",
+  "label.low-watermark": "저수위워터마크",
   "label.legend-name": "레전드",
   "label.max-capacity": "최대 용량",
   "label.carrier-legend-name": "캐리어레전드"

package/translations/ms.json

@@ -1,6 +1,8 @@
 {
   "label.current-usage": "current usage",
+  "label.fullup": "fullup",
   "label.high-watermark": "high watermark",
+  "label.low-watermark": "low watermark",
   "label.legend-name": "legend",
   "label.max-capacity": "max capacity",
   "label.carrier-legend-name": "carrier legend"

package/translations/zh.json

@@ -1,6 +1,8 @@
 {
   "label.current-usage": "current usage",
+  "label.fullup": "fullup",
   "label.high-watermark": "high watermark",
+  "label.low-watermark": "low watermark",
   "label.legend-name": "legend",
   "label.max-capacity": "max capacity",
   "label.carrier-legend-name": "carrier legend"