feat: echarts gauge chart #993
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/superset/superset-ui/14U7cgWR4J13dd2B2W8jqYY9zX5p |
|
@krsnik93 this is AWESOME! ❤️ I'll post a review shortly - in the meantime feel free to annotate the code with comments if there are any areas you have questions about so we can address those properly. |
|
I can't wait to have this in master!! @krsnik93 Thanks!! |
|
While perhaps not everyone loves gauge charts, I think this is a great thing to have in our collective arsenal. They are easily understandable in certain dashboards, where you want to see a benchmark or report-card KPI for some data point within known bounds and good/warning/bad thresholds. Examples: Thanks for the work on this! Small detail, but don't forget to add a thumbnail ;) |
|
@rusackas gouge is a key chart for KPI dashboards, having a visual image of how is the performance makes a big difference, big number says nothing about the performance. I am very excited about this chart and I can't wait to see in Master (I already said that 😃 ) |
krsnik93
force-pushed
the
echarts-gauge-chart
branch
from
14db9b6
to
9cce615
Compare
Codecov Report
@@ Coverage Diff @@
## master #993 +/- ##
==========================================
+ Coverage 28.10% 28.13% +0.02%
==========================================
Files 412 435 +23
Lines 8411 8822 +411
Branches 1193 1322 +129
==========================================
+ Hits 2364 2482 +118
- Misses 5894 6162 +268
- Partials 153 178 +25
Continue to review full report at Codecov.
|
krsnik93
force-pushed
the
echarts-gauge-chart
branch
from
9cce615
to
d8ef1ef
Compare
|
Thank you so much @krsnik93 for your contribution! this is really awesome. I agreed with @rusackas; Gauge is pretty common in modern BI products. It's not only great at capturing attention from the audience by providing a single quantitative value, but also indicating where the value stands within a standard range... anyway, it's an ideal chart for business users/executives, whom we haven't been focusing on. I would be curious to know where the contentious points are, if there are any? Hopefully, we can address the concerns before bringing the chart to the codebase? @williaster 🙏 |
|
@mayurnewase would you like to review this PR? 🙏 |
krsnik93
force-pushed
the
echarts-gauge-chart
branch
from
d8ef1ef
to
b860fa1
Compare
krsnik93
force-pushed
the
echarts-gauge-chart
branch
from
b860fa1
to
b0a0951
Compare
krsnik93
force-pushed
the
echarts-gauge-chart
branch
from
b0a0951
to
3be30e3
Compare
| valueAnimation, | ||
| valueFormatter, | ||
| }: EchartsGaugeFormData = { ...DEFAULT_GAUGE_FORM_DATA, ...formData }; | ||
| const data = queriesData[0].data as TimeseriesDataRecord[]; |
There was a problem hiding this comment.
should we check if it's null then use empty array?
There was a problem hiding this comment.
Any specific reason to prefer timeSeriesRecord over dataRecord?
Are we using the timestamp field ?
There was a problem hiding this comment.
we should ensure queriesData[0] not null.
|
|
||
| if (!intervalBoundsAndColors.length) { | ||
| progress = { | ||
| show: true, |
There was a problem hiding this comment.
Can this be moved to a separate constants file and type it as well?
| fontSize: 1.5 * fontSize, | ||
| }; | ||
| itemStyle = {}; | ||
| } else { |
There was a problem hiding this comment.
If the only difference in if,else is line and item style, should we just create a function to get it from interval bound setting?
| valueAnimation, | ||
| valueFormatter, | ||
| }: EchartsGaugeFormData = { ...DEFAULT_GAUGE_FORM_DATA, ...formData }; | ||
| const data = queriesData[0].data as TimeseriesDataRecord[]; |
There was a problem hiding this comment.
we should ensure queriesData[0] not null.
krsnik93
force-pushed
the
echarts-gauge-chart
branch
from
d44ff02
to
5c06cbd
Compare
krsnik93
force-pushed
the
echarts-gauge-chart
branch
from
8b28ade
to
2f44908
Compare
krsnik93
force-pushed
the
echarts-gauge-chart
branch
from
2f44908
to
95bad2c
Compare
krsnik93
force-pushed
the
echarts-gauge-chart
branch
from
95bad2c
to
26f062a
Compare
krsnik93
force-pushed
the
echarts-gauge-chart
branch
from
26f062a
to
949b82e
Compare
krsnik93
force-pushed
the
echarts-gauge-chart
branch
from
949b82e
to
4a3d6a9
Compare
krsnik93
force-pushed
the
echarts-gauge-chart
branch
from
f550761
to
02b3e3f
Compare
krsnik93
force-pushed
the
echarts-gauge-chart
branch
from
02b3e3f
to
da2318d
Compare
| 'Comma-separated interval bounds, e.g. 2,4,5 for intervals 0-2, 2-4 and 4-5. Last number should match the value provided for MAX.', | ||
| ), | ||
| renderTrigger: true, | ||
| default: DEFAULT_FORM_DATA.intervals, | ||
| }, | ||
| }, | ||
| ], | ||
| [ | ||
| { | ||
| name: 'interval_color_indices', | ||
| config: { | ||
| type: 'TextControl', | ||
| label: t('Interval colors'), | ||
| description: t( | ||
| 'Comma-separated color picks for the intervals, e.g. 1,2,4. Integers denote colors from the chosen color scheme and are 1-indexed. Length must be matching that of interval bounds.', |
There was a problem hiding this comment.
I think we could take the modulo on the the length of the color scheme when using it, thereby looping and avoiding errors.
|
Merged - thanks so much for your patience with the review process @krsnik93 ! We need to bump the core package first, but once that's done we can proceed to open up a PR on the main repo to get this in :) I'll keep you posted when we can do that (you should do the honors!) |
|
Let's bump one chart at a time. |
|
FYI @krsnik93 - |
| import { DEFAULT_FORM_DATA } from './types'; | ||
|
|
||
| const config: ControlPanelConfig = { | ||
| controlPanelSections: [ |
There was a problem hiding this comment.
Can we add Time section? I think it's very useful.
Like:
* feat: echarts gauge chart * remove unused legend imports * move font size multipliers to constants * add tests * rename roundcap * add modulo on color picking to wrap around the color scheme Co-authored-by: Ivan Krsnik <ivan.krsnik@unipart.io>
🏆 Enhancements
Echarts gauge type chart in Superset.
I would appreciate feedback as the echarts chart API is really flexible, but when I look at other chart types already supported in Superset, they all expose a fairly simple API, so there are questions of just how to simplify.
For example I don't think the initial attempt would do well at imitating something like this: https://echarts.apache.org/examples/en/editor.html?c=gauge-ring.
A couple of screenshots of what's currently possible:
I am also a Typescript newbie so some of the typing might be weird.