middlewarehq / middleware

✨ Open-source DORA metrics platform for engineering teams ✨
https://middlewarehq.com
Apache License 2.0
1.18k stars 101 forks source link

Implement a number-count animation for DORA-cards #385

Open e-for-eshaan opened 6 months ago

e-for-eshaan commented 6 months ago

Why do we need this ?

we can add some animation to the cards' numbers on image

similar to this use-count-up

Acceptance Criteria

Further Comments / References

KartikChawla09 commented 5 months ago

@e-for-eshaan I would like to work on this issue, can you assign it to me.

jayantbh commented 4 months ago

Hey @KartikChawla09, sure you can take this up.

jayantbh commented 4 months ago

I'm assigning this to you. In case that changes, let me know and I'll unassign you.

KartikChawla09 commented 4 months ago

I'm assigning this to you. In case that changes, let me know and I'll unassign you.

Thank you for assigning it to me. Can you have a look at #459 while I work on this ?

jayantbh commented 4 months ago

Hey @KartikChawla09, #459 was merged. 👏🏽 👏🏽 👏🏽 Feel free to continue on this.

KartikChawla09 commented 4 months ago

Hey @KartikChawla09, #459 was merged. 👏🏽 👏🏽 👏🏽 Feel free to continue on this.

Yes! I am working on it. Will raise a PR ASAP.

KartikChawla09 commented 4 months ago

Hey @e-for-eshaan @jayantbh . image The page is getting stuck on this loading animation for more than 5 minutes. It used to work previously but after fetching the latest commit it stopped to work. I am attaching the logs below. image image Is this an issue with my local deployment ?

jayantbh commented 4 months ago

Hey @KartikChawla09, this shouldn't have happened. Did you check if there is an older commit that seems to not have this issue?

KartikChawla09 commented 4 months ago

Hey @KartikChawla09, this shouldn't have happened. Did you check if there is an older commit that seems to not have this issue?

The last commit I remember working correctly was this one. But maybe the issue is at my end only. It would really help if someone could confirm that by checking on their local deployment.

e-for-eshaan commented 4 months ago

Hey @KartikChawla09 , are you still working on this?

KartikChawla09 commented 4 months ago

Hey @KartikChawla09 , are you still working on this?

Yes! I have implemented the counter as well but I am having some issues with my local deployment due to which I am not able to test the code locally. I will push the code when I am able to fix the issue. I have sent the error on Slack as well.

e-for-eshaan commented 2 months ago

@KartikChawla09 been a while, how's this coming up, should I assign this to someone else?

KartikChawla09 commented 2 months ago

There was some issue with my local deployment, as I mentioned I raised as issue on Slack as well but it didn't get fixed so I couldn't test my code.

import { useEffect, useState } from "react";

const easeInOutQuad = (t: number) => {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
};

const CounterAnimation = ({
  targetValue,
  duration,
}: {
  targetValue: number;
  duration: number;
}) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const flag = Math.floor(targetValue) === targetValue;
    let start = 0;
    const iterations = 10;
    const time = duration / iterations;
    const startTime = performance.now();
    const counter = setInterval(() => {
      const elapsed = performance.now() - startTime;
      const progress = elapsed / duration;
      const easedProgress = easeInOutQuad(progress);
      start += 1;
      flag
        ? setCount(Math.floor(easedProgress * targetValue))
        : setCount(parseFloat((easedProgress * targetValue).toFixed(2)));
      if (start >= iterations) {
        clearInterval(counter);
        setCount(targetValue);
      }
    }, time);
  }, [duration, targetValue]);

  return <>{count}</>;
};

export default CounterAnimation;

This code snippet might help the person who takes up this issue!

jayantbh commented 1 month ago

Thanks @KartikChawla09 for your contribution, even though we couldn't sort out issues with running Middleware on an 8GB RAM system. Hopefully we'll get an idea of how to deal with that in the near future.

Unless you're able to see if Gitpod works out for you (which based on the last time we chatted about this, you'd hit some limits).

I've unassigned the issue for now, such that someone else can take it up.

xyfer17 commented 1 month ago

@jayantbh please assign this issue to me, I'll would like to pick this up.

jayantbh commented 1 month ago

Done, @xyfer17

xyfer17 commented 1 month ago

@jayantbh can you help me out, I'm unable to load the dora metrics getting error from api side:

Endpoint: dora_metrics/fetchTeamDoraMetrics

{
    "message": "<!doctype html>\n<html lang=en>\n<title>400 Bad Request</title>\n<h1>Bad Request</h1>\n<p>Invalid data: extra keys not allowed (path pr_filter[base_branches][0])</p>\n"
}

Screenshot 2024-10-21 110314 Screenshot 2024-10-21 114142

jayantbh commented 1 month ago

I think this broke as part of a recent axios upgrade. Could you check if this works with an older commit?

xyfer17 commented 1 month ago

@jayantbh have checked using git bisect it broke in the commit by axios version change

Updates `axios` from 0.26.1 to 0.28.0
jayantbh commented 1 month ago

Ah damn dependabot update. Let's see if we can revert that.

jayantbh commented 1 month ago

Okay that went as a bulk update.

Would you be able to see if it's trivial to sort out? Maybe just downgrade axios for your specific PR?

xyfer17 commented 1 month ago

@jayantbh I have few questions on for the above enhancement:

  1. Should the animation run only once (only on every page render), or do we need to reset or loop the animation under certain conditions?

  2. on Deployment frequency the value always showing in whole number, can i show the animation over there in decimal places or whole number.

also check the below video, I've try to create the animation on the every page render using the custom hook, please suggest your thoughts.

https://github.com/user-attachments/assets/0078ac69-7de2-4127-8da3-e4a868b7cbf6

jayantbh commented 1 month ago
  1. If you want to keep it simple, then once per load, meaning when team changes or date changes or user navigates away and back to the page.
  2. A better implementation might be to load it once at least 5 minutes after any of the above conditions have happened. This makes the animation happen after some time of inactivity instead of being more frequent and feeling noisy.
xyfer17 commented 1 month ago

@jayantbh Can you Please take a look on the https://github.com/middlewarehq/middleware/pull/610 for the above issue. Thanks :)