Implement a number-count animation for DORA-cards

[e-for-eshaan]

Why do we need this ?

we can add some animation to the cards' numbers on

similar to this

Acceptance Criteria

• try not to introduce packages within the code base, writing optimized code will be appreciated

• It's best if you apply these animation for the Deployment frequency and Change failure rate first. These look farely straight forward

• using a component/custom-hook based approach is appreciated

• TODO 1

• TODO 2

• TODO 3

Further Comments / References

[KartikChawla09]

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

[jayantbh]

Hey @KartikChawla09, sure you can take this up.

[jayantbh]

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

[KartikChawla09]

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]

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

[KartikChawla09]

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

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

[KartikChawla09]

Hey @e-for-eshaan @jayantbh .

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.


Is this an issue with my local deployment ?

[jayantbh]

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

[KartikChawla09]

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]

Hey @KartikChawla09 , are you still working on this?

[KartikChawla09]

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]

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

[KartikChawla09]

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]

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]

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

[jayantbh]

Done, @xyfer17

[xyfer17]

@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"
}

[jayantbh]

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

[xyfer17]

@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]

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

[jayantbh]

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]

@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.

Screen.Recording.2024-10-22.111307.mp4

[jayantbh]

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]

@jayantbh Can you Please take a look on the #610 for the above issue.
Thanks :)