feat: improve statistics bar chart rendering

adfinis · Apr 26, 2023 · b1f1d98 · b1f1d98
1 parent 16fda79
commit b1f1d98
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 1 deletion.
diff --git a/app/components/statistic-list/bar/component.js b/app/components/statistic-list/bar/component.js
@@ -0,0 +1,17 @@
+import Component from "@glimmer/component";
+
+export default class StatisticListBar extends Component {
+  get didFinishEffortsInBudget() {
+    if (this.args.remaining === 0 && this.args.value < this.args.goal) {
+      return true;
+    }
+    return false;
+  }
+
+  get didFinishEffortsOverBudget() {
+    if (this.args.value > this.args.goal) {
+      return true;
+    }
+    return false;
+  }
+}
diff --git a/app/components/statistic-list/bar/template.hbs b/app/components/statistic-list/bar/template.hbs
@@ -2,7 +2,10 @@
 
   <div
     ...attributes
-    class="statistic-list-bar"
+    class="statistic-list-bar
+    {{if this.didFinishEffortsInBudget 'strong-success'}}
+    {{if this.didFinishEffortsOverBudget 'strong-danger'}}
+    "
     {{style --value=(concat @value)}}
   ></div>
   {{#if (and @remaining (lte @remaining 1))}}

diff --git a/app/styles/components/statistic-list-bar.scss b/app/styles/components/statistic-list-bar.scss
@@ -25,6 +25,14 @@
       animation: slide-in-statistic-bar 0.5s cubic-bezier(0.86, 0, 0.07, 1);
     }
 
+    &.strong-success::before {
+      background-color: $color-success;
+    }
+
+    &.strong-danger::before {
+      background-color: $color-danger;
+    }
+
     &.success::before {
       background-color: $color-success-lighter;
     }