From b1f1d98bb1a0b7e25608ca9127c94aea6a37fed7 Mon Sep 17 00:00:00 2001
From: Mitan Omar <mitan@gmx.ch>
Date: Wed, 26 Apr 2023 03:49:01 +0200
Subject: [PATCH] feat: improve statistics bar chart rendering

---
 app/components/statistic-list/bar/component.js | 17 +++++++++++++++++
 app/components/statistic-list/bar/template.hbs |  5 ++++-
 app/styles/components/statistic-list-bar.scss  |  8 ++++++++
 3 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 app/components/statistic-list/bar/component.js

diff --git a/app/components/statistic-list/bar/component.js b/app/components/statistic-list/bar/component.js
new file mode 100644
index 000000000..c6296527a
--- /dev/null
+++ 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
index 7992c95dc..c320610d6 100644
--- 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
index 0fb136b79..c7bdf7ace 100644
--- 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;
     }