Add ability to turn on formatting for min and max values in gauge charts

[mattfurness]

Implements #1094

[masayuki0812]

Hi, Sorry for the late response. I think it might be confusing to have the same formatter for center, min and max labels. How about having different formatter for them? Is it redundant?

[mattfurness]

Hi,

Sorry for the delayed response.

I guess there could be some small confusion that a ratio would never be passed into the formatters for the min and max labels.

The current implementation in this PR simply lets you toggle whether the formatter also applies to min and max. Were you thinking something like:

gauge: {
  label: {
    format: function (value, ratio) {
      return value;
    },
    minformat: function (value) {
      return value;
    },
    maxformat: function (value) {
      return value;
    }  
  }
}

I have personally yet to come across the use case where I need to specify a different formatter for the min, max and center labels. Instead I usually want to provide consistent formatting (see example fiddle). Did you have a use case in mind?

Let me know your thoughts.

Thanks,
-Matt.

[tomwayson]

@masayuki0812

I actually expected the label.format function to only apply to the min/max values since that's how label.show works.

For my current project, I need to be able to format the gauge min/max. I can imagine that usually you would want to provide consistent formatting between the center and min/max labels, but I can definitely see the use cases to have the center label formatted differently than the min/max labels. However, I think the min/max labels would always have the same format as each other (even if different than the center).

For example, my gauge is showing values in the hundreds of millions of dollars. I might want the center label to show an exact value, but the min/max to show in $m b/c there is not much room.

So in the above screenshot I might want the min and max to be $0m and $187m respectively.

I'm thinking a good API for this would be:

gauge: {
  label: {
    center: {
      format: function (value, ratio) {
        return numeral(value).format('$0,0');
      },
      show: true // default
    },
    minMax: {
      format: function (value) {
        return numeral(value).format('$0.0a');
      },
      show: true // default
    }
  }
}

That said, having them all set to use the same format would be better than the current situation where I can't set the format for the min/max at all, so I'll take whatever I can get!

[aendra-rininsland]

@tomwayson's API structure makes the most sense to me. @mattfurness, any thoughts?

[mattfurness]

Hi,

Yep that API structure makes sense to me, it would be a breaking change though. I'm happy to go ahead and implement this if we're happy to make a breaking change.

Thanks,
-Matt

[cmarcondes-daitan]

Hi,
Do you have any news on that?

[iggi-]

Adding my support for the ability to format the max label as @tomwayson indicated.

[pchaganti]

👍

[mattfurness]

It looks like this feature has been implemented in #1354, albeit with a slightly different api. I think we can close this now 😄

[aendra-rininsland]

Cheers, thanks @mattfurness!