Improved hexagon hb

app/imports/client/ui/components/HexagonProgress.vue

@@ -10,20 +10,50 @@
 </template>
 
 <script>
+import chroma from 'chroma-js';
 export default {
   props: {
-    percent: {
-      type: Number,
+    model: {
+      type: Object,
       required: true
-    }
+    },
   },
   computed: {
+    fillFraction() {
+      let fraction = this.model.value / this.model.total;
+      if (fraction < 0) fraction = 0;
+      if (fraction > 1) fraction = 1;
+      return fraction;
+    },
+    color() {
+      return this.model.color || this.$vuetify.theme.currentTheme.primary
+    },
+    barColor() {
+      const fraction = this.model.value / this.model.total;
+      if (!Number.isFinite(fraction)) return this.color;
+      if (fraction > 0.5) {
+        return this.color;
+      } else if (this.model.healthBarColorMid && this.model.healthBarColorLow) {
+        return chroma.mix(this.model.healthBarColorLow, this.model.healthBarColorMid, fraction * 2).hex();
+      } else if (this.model.healthBarColorMid) {
+        return this.model.healthBarColorMid;
+      }
+      return this.color;
+    },
+    barBackgroundColor() {
+      return chroma(this.barColor)
+        .darken(1.5)
+        .desaturate(1.5)
+        .hex();
+    },
     fillStyle() {
       return {
-        '--p': `${this.percent}%`
+        '--p': `${100 - (this.fillFraction * 100)}%`,
+        background: `conic-gradient(#0000 var(--p), ${this.barColor} var(--p))`,
+        backgroundColor: this.barBackgroundColor,
       };
     }
-  }
+  },
 };
 </script>
 
@@ -38,8 +68,8 @@ export default {
     0% 75%,
     0% 25%
   );
-  background: conic-gradient(red var(--p),#0000 0);
-  background-color: #5e1010; /* adjust the color as needed */
+  background: conic-gradient(#0000 var(--p), red var(--p));
+  background-color: #5e1010;
 }
 
 .hexagon-content {

app/imports/client/ui/components/HexagonProgressStack.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    v-if="!bars.length"
+    class="hexagon-content"
+  >
+    <slot />
+  </div>
+  <hexagon-progress
+    v-else
+    :model="bars[0]"
+  >
+    <slot v-if="bars.length === 1" />
+    <hexagon-progress-stack
+      v-else
+      :bars="tail"
+      class="child"
+    >
+      <slot />
+    </hexagon-progress-stack>
+  </hexagon-progress>
+</template>
+
+<script>
+import { tail } from 'lodash';
+import HexagonProgress from '/imports/client/ui/components/HexagonProgress.vue';
+
+export default {
+  name: 'HexagonProgressStack',
+  components: {
+    HexagonProgress,
+  },
+  props: {
+    bars: {
+      type: Array,
+      required: true
+    },
+  },
+  computed: {
+    tail() {
+      return tail(this.bars);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.hexagon-content {
+  position: absolute;
+  inset: 4px;
+  background-color: #252525;
+  clip-path: polygon(
+    50% 0%,
+    100% 25%,
+    100% 75%,
+    50% 100%,
+    0% 75%,
+    0% 25%
+  );
+}
+
+.child {
+  width: 100%;
+  height: 100%;
+}
+</style>