[Feature] Tremor migration

[dmytro-tinybird]

Description

Replace echarts with tremor

Type of change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [X] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] Documentation

How Has This Been Tested?

• [X] Existing unit tests
• [X] Visual comparison with existing app

Checklist:

• [X] I have performed a self-review of my own code
• [X] I have commented my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes to the documentation
• [ ] I have added tests that prove my fix is effective or that my feature works
• [ ] I have update the CHANGELOG
• [X] New and existing unit tests pass locally with my changes

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
analytics-dashboard	✅ Ready (Inspect)	Visit Preview	Dec 13, 2022 at 0:36AM (UTC)

[kukukaka]

Hi @dmytro-tinybird, There are some issues compared to the current UI that we need to adjust before moving forward. From the Vercel Preview:

1. There are some incorrect spacing between some modules.

   

2. Here we are defaulting to system fonts and it should be using Inter.

3. Some list values are using bold font weight and they shouldn't, and titles are using semi-bold and should be using regular.

4. Top Devices chart is using incorrect colors/shades

5. List items are not clickable urls

6. The top chart has some extra padding and flashes from time to time

   

7. There are some legends that should be hidden

8. There are other styling things that are not as designed. I think it looks ok to add borders to the modules, but let's make sure the styles are consistent with other elements like the dropdown.

   

9. Also I couldn't check all edge cases, but for example the No data is not using the correct design.

   

Thanks! Let me know if I can help better.

[sdairs]

@kukukaka I believe @dmytro-tinybird has addressed all of your concerns

[kukukaka]

Hey, it looks way better. Good work! @xavijam, @raqyuste could we take a look at the code to merge?

Some minor comments from my side @dmytro-tinybird.

1. I think there are some issues here with the tr-h-full and the h-full that make the distance between the title and these charts is too big.

   

2. Is there a way to reduce the number of items/granularity/format in this cases on the first chart so it doesn't look so crowded?

   

3. Can we avoid showing those background lines in this specific chart?

   

[raqyuste]

taking a look! 👀

[sdairs]

@raqyuste would you mind taking another look to see if the changes have addressed your concerns 🙏 ?

[raqyuste]

Looks perfect to me! 👌 @sdairs @dmytro-tinybird

[alejandromav]

The look and feel is a bit different, right?

Cards now have a border, charts have different colors, line width in the first chart, etc.

@kukukaka since you're the original designer of the dashboard, are you ok with these changes?

[sdairs]

The look and feel will be slightly different, but that is kinda the nature of why we are adopting Tremor, as we like Tremor's design; we're adopting it across all of our starter kit efforts & working closely with the Tremor project.

As we're happy with the code, I'm going to merge & we can iterate upon the project from there. If there are specific things we want to improve, let's open issue and work on smaller, faster changes :)

[kukukaka]

The look and feel is a bit different, right?

Cards now have a border, charts have different colors, line width in the first chart, etc.

@kukukaka since you're the original designer of the dashboard, are you ok with these changes?

I was planning to do a last review this afternoon. I'll open it in a different issue.