How to format legend labels within a Calendar?

Hi! I’ve searched the docs, storybook and this repo to find a way to do it but I was not successful.

I need to format legend labels within a Calendar. Currently, my raw values range from 0 to ~70,000.

I’d like to format these values as follows:

Is there anyway to do it?

I’ve tried to pass a function inside the legend object, but it didn’t work:

    // ...
    legends: [
      {
        // ...
        legendFormat: ({ value }) => myFormatter(value),
        // ...
      },
    ],

Thanks! 😃

[rovaniemi]

I also needed this feature, but the library does not support it yet. However, this feature can be used with a little workaround, but we should do a PR if we want to use it the proper way.

Workaround

@nivo/calendar uses colorScale function when it does create legends.

const legendData = colorScale.ticks(legend.itemCount).map(value => ({
  id: value,
  label: value,
  color: colorScale(value),
}))

We can pass new colorScale function on @nivo/calendar props

import { scaleQuantize } from 'd3-scale'

const computeDomain = (data, minSpec, maxSpec) => {
  const allValues = data.map(d => d.value)
  const minValue = minSpec === 'auto' ? Math.min(...allValues) : minSpec
  const maxValue = maxSpec === 'auto' ? Math.max(...allValues) : maxSpec
  return [minValue, maxValue]
}

const createColorScale = (data, minValue, maxValue, colors) => {
  const domain = computeDomain(data, minValue, maxValue)
  const defaultColorScale = scaleQuantize()
      .domain(domain)
      .range(colors)
  const colorScale = value => {
      const number = prettyIntegerToNumber(value) // Formatted number back to number
      return defaultColorScale(number)
  }
  colorScale.ticks = count => {
     return defaultColorScale.ticks(count).map(e => prettyInteger(e)) // Format number
  }
  return colorScale
}

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!