Add gauge visualization

[IdoPeles]

What type of PR is this? (check all applicable)

• Feature

Description

This if my first time contributing to an open source project , please excuse my mistakes and let me know what should I do next if needed

This feature is a simple arc displaying 3 colors and a value used to describe status
value should be passed in column called "value" result set should return one row

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

[kravets-levko]

Hi @IdoPeles 👋 Thank you for your contribution to the project - we're always happy to see new visualizations in Redash 🎉 I did a quick review of your code and left few comments. In general it looks quite good, I'll do a deeper review a bit later.

[kravets-levko]

Please try to use components from Ant library (in this case, import Input from 'antd/lib/input' and remove className attribute - it will not be needed). Also, for colors we offer user a dropdown with list of predefined colors (for consistency - import ColorPalette from '@/visualizations/ColorPalette'), and add a custom color option there if needed.

[IdoPeles]

changing className to class causes errors, see attachment

regarding the colorPallet I would be happy to replace but I did not understand how erectly to use it , can you explain how it is used

[kravets-levko]

Replace

<input className="form-control" type="text" value={options.okRange} onChange={event => updateOptions({ okRange: event.target.value })} />

with

import Input from 'antd/lib/input';

<Input value={options.okRange} onChange={event => updateOptions({ okRange: event.target.value })} />

The same for other text inputs.

For color inputs I'll prepare an example a little bit later.

[kravets-levko]

I realized that Plotly (library we use for a lot of other charts) already have a gauge chart: https://plot.ly/javascript/gauge-charts/

WDYT about using it instead of your custom implementation?

[deecay]

I realized that Plotly (library we use for a lot of other charts) already have a gauge chart:

I was just going to mention that.

Previous discussion. See Indicator examples.
Is this worth the increased dependency?

[kravets-levko]

Hey @IdoPeles,

I converted renderer component to React as well - you can pull latest changes I see how I did it. But your repo is quite out of date with ours, for example resizeObserver service is missing (but it's needed to replace a resize-event directive). So I kindly ask you to catch up with our repo, and then we can continue with this visualization.

[arikfr]

Seems like this is abandoned. I'm closing this now, but you're welcome to re-open after addressing the comments. Thanks!