Added KPI visualization

[daniellangnet]

What type of PR is this?

• [x] Feature

Description

This is a new visualization meant for business KPIs. Ideally, Redash would have a plugin system and some sort of marketplace where this could live. However, since that seems far away, I think it still makes sense to consider adding this visualization to the core codebase, because it seems like this would be one of the most common use-cases for companies using Redash.

Unlike other visualizations, this one is a bit more opinionated in terms of the data it's meant to represent, hence the name "KPI". It has some similarities with the existing counter visualization, but also offers a number of features that wouldn't make sense for the more generic counter:

• it can show both a current and a target value and calculate the delta automatically as both percentage or absolute numbers
• it allows configuration for whether the percentage and/or the absolute delta value should be shown, or neither
• it allows configuration of whether a positive or negative delta is either good or bad
• it allows custom labels for the target value so entirely different metrics could be shown also

Screenshots

[daniellangnet]

I don't think the check that failed has anything to do with my code changes

[kravets-levko]

Hi @daniellangnet! That check is for code style, don't worry that much :slightly_smiling_face: (bot opened a PR that applies code style rules to your changes, we'll merge it alongside with this PR)

[gabrieldutra]

@daniellangnet only thing I noticed is that the className="w-100" can be removed from the inputs once this PR is merged with #4788, since 100% width is now the default behavior for them we no longer need it.

[daniellangnet]

@gabrieldutra great, thanks for the review and also thanks for your response on the other PR https://github.com/getredash/redash/pull/4837. I'll wait for that one to get merged and will then rebase this branch

[daniellangnet]

@gabrieldutra I rebased this on the current master with the separated visualization package and I also removed the className="w-100" from all the input as per your suggestions. Thanks for the review!

[djabhe]

hello i have a question. how to add custom visualization in redash? any video tutorial?

[vipulmathur]

Is there a chance that this PR will merge anytime soon @kravets-levko @daniellangnet? What is blocking it? This is just the viz that I would like to use. Would like to have it merged, rather than use it from the PR's branch.

Thanks for this effort @daniellangnet! :tada:

[daniellangnet]

@gabrieldutra I just rebased again to fix some issues with the latest master. Do you foresee that this will ever get merged? I understand if the answer is no, but then I could save myself some time and would only maintain our internal fork, as opposed to the split out PR. Thank you

[kravets-levko]

Hi @daniellangnet! Sorry for such a long delay. I plan to review your PR in a next few days. Meanwhile I have a question (just to understand better where do we go): did you take a Counter code as a base to create a new visualization? 'Cause I have a feeling that we could extend existing Counter visualization instead of adding a new one (but it's also possible that it doesn't worth it)

[daniellangnet]

Thanks @kravets-levko! I know you guys had a lot going on, so no worries & thank you for your work. You're right that the code was based on the counter viz as a starting point and I thought about whether it would make sense to extend it instead.

If you look at the description of the PR above, I described my reasoning for thinking that a separate visualization would be better here. In short: the KPI viz is a lot more opinionated about what it shows and as a result can do a whole bunch of stuff that perhaps wouldn't make sense to have in a generic counter visualization.

Happy to follow your lead either way! :)

[daniellangnet]

This PR suffers from the same Safari issue that I fixed here: https://github.com/getredash/redash/pull/5236 So once this other PR gets merged, I can rebase this PR again and make the same changes here if you like.

[dengc367]

I need this feature,is it can merge now?

[nathan-protempo]

Hello, just wondering what happened to this pull request? It's been stalled for a year, which seems a shame as @daniellangnet put in the effort to create it and this would be a useful addition to the product.

[antoinerrr]

That would be nice to have...

[guidopetri]

@daniellangnet , thanks for the PR! We've updated a lot of things now that we're Community-driven so - if you're still interested in getting this merged - would you mind rebasing off master to re-run the CI, as well as updating merge conflicts?

We're trying to clean up our PR todo list, so if you're not interested, that's fine - we'll close the PR in about a week if we don't hear back. If you're interested in reopening the PR afterwards, we would also very much welcome that.

[guidopetri]

@viettran97118 I've reopened the PR, but as mentioned, it still needs some work. Let me know if you hove any questions, but the main things that need to be done are:

• merge master into this branch
• resolve merge conflicts

Once this is done, we can go through review and merge it in.

[viettran97118]

Hey, I remind this PR. I waiting for merged this feature.

[guidopetri]

@viettran97118 thanks for the reminder. I think we slightly misunderstood each other. I need you to update the PR so that it can be merged in after your updates.

[viettran97118]

Yes I am willing to do this. I have ideas the shame with this PR. KPI (Key Performance Indicator) cards in Power BI are a great way to visualize and display important metrics in a clear and easy to understand way. I want to show more than just one metrics of counter chart. In chart, i want show target KPI, current value and gap value. So, have many ideas for KPI card.

[guidopetri]

That sounds great to me!