Indicator trace type (gauge+bignum+bullet)

[nicolaskruchten]

Let's tackle three of the ones from #2221 in a single indicator trace type.

[nicolaskruchten]

• on its own subplot, like pies ... each trace makes its own subplot

[nicolaskruchten]

There are a bunch of ideas in #12004 for the big-number mode that we should incorporate.

In addition to those, we should have the ability to have 'ranges' against which the indicator value can be visually compared in a gauge or bullet chart, as well as a 'comparison measure':

Here are some possible gauge chart variants we should think about:

[nicolaskruchten]

Here's a nice "bullet vs gauge" blog post to stimulate reflection also: http://duelingdata.blogspot.com/2017/07/bullet-vs-gauge.html

[antoinerg]

@nicolaskruchten here's a prototype for sparkline+bignumber:

Right now it is very lightweight (it's just one svg path) and does not support hover/select/zooming/panning since those are already implemented in scatter. I'm thinking that if the users want those, they can simply overlay bignumber on top of scatter. The advantage of the current implementation is that it is very simple and lightweight. 🤔

[antoinerg]

Codepen showcasing animations of text and gauge: https://codepen.io/antoinerg/pen/arKrGO

[nicolaskruchten]

workshopping the spec:

no sparklines
*scalar/no aggregation

mode: "number+delta+gauge"
value
title {
  positioning
  font, color
}
domain
number: {
  precision, formatting
}
gauge: {
  shape: "bullet"
  reference ranges
  ticks, axis container (log scales)
}
delta: {
  reference/base
  increasing, decreasing
  precision, formatting
}

[nicolaskruchten]

Confirmed: value will be scalar for the 1.49 release. We can revisit array+aggregations in a future release :)

[antoinerg]

@nicolaskruchten I adapted bullet to have the number be on the right as you suggested. Although it looks great when the figure is wide:

it is wasting space when it's narrow:

You'll probably agree that in the second example, it would be preferable to have the number be above the bullet. Similarly, we may want to have the title be on the left, right, top or bottom.

This brings us to the question of positions: how should they be specified by the user? Should they be values in pixel, in domain value or rather in vaguer but user-friendly above, below, left and right? 🤔

[antoinerg]

Also, you can follow my work in branch indicator

Compare indicator to master

[nicolaskruchten]

My feeling is that we should do the simplest thing for this version and see what people ask for. What you have there is fine by me, and users can just make the box vertically shorter to control title positioning. If you want to spec out a top/bottom/left/right API i don’t mind but I don’t want layout considerations to add a week to the LOE ;)

[nicolaskruchten]

Do an image search for bullet charts and you’ll see they are often used inside tables or other short/wide contexts... not so much squarer aspect ratios

[etpinard]

Also, you can follow my work in branch indicator

Compare indicator to master

Nicely done @antoinerg! You're on the right track. Let me know if you need help in trying to reuse Axes.tickText and/or Axes.drawTicks / Axes.drawLabels