suitedaces / sales-dashboard

https://demo-sales-dashboard.vercel.app
MIT License
0 stars 0 forks source link

Feature: color of the % number in the dashboard should be based on +/- #15

Open suitedaces opened 6 months ago

suitedaces commented 6 months ago

In our dashboard, under revenue, subscription, sales, etc: where you see <+number%> last month, i want the number to be green if it's a positive % change, and red if it's a negative percentage change

dev-ape-ai[bot] commented 6 months ago

Hello @suitedaces 👋,

I have looked into the code of the sales-dashboard app and from my findings, the dashboard does display "+X% from last month" quite a few times. To make the positive and negative percentages display in different colors, we would need to inspect the code for the value of the percentage and then conditionally apply the relevant class for color styling.

I found few relevant codes in the app/(dashboard)/dashboard/page.tsx, where the dashboard metrics are rendered. If the value is a percentage and negative, we can add a class that would change the text color to red and vice versa for positive values.

Here's one particularly relevant code snippet found:

<CardContent>
  <div className=\"text-2xl font-bold\">+2350</div>
  <p className=\"text-xs text-muted-foreground\">
    +180.1% from last month
  </p>
</CardContent>

Also, I searched the web for resources to aid us in making this change and I found these:

  1. GeeksforGeeks - How to dynamically change color by percentage CSS
  2. StackOverflow - Change the color of an element according to its value by CSS

These resources provide helpful insight into changing the color of an HTML element dynamically based on its value using CSS.

Hope these insights are helpful, these updates shouldn't be complex to add. Kindly let me know if you need further help or clarifications. 😊

Related Code ```tsx // app/(dashboard)/dashboard/page.tsx
$45,231.89

+20.1% from last month

+2350

+180.1% from last month

```
Related Search Results - [GeeksforGeeks - How to dynamically change color by percentage CSS](https://www.geeksforgeeks.org/how-to-dynamically-change-color-by-percentage-css/) - [StackOverflow - Change the color of an element according to its value by CSS](https://stackoverflow.com/questions/65234263/change-the-color-of-an-element-according-to-its-value-by-css)
suitedaces commented 6 months ago

@devapeai /code