Point.indexInSerie and/or document Point.data for SliceTooltip

[WULCAN]

Problem

We are deriving Serie.data for a Line from an array of richer objects. In a SliceTooltip, we want to resolve properties from the original richer objects. The Point fed to SliceTooltip in points contains the in-serie index of the point, and we can use this in-serie index to find the original richer object from the source array. This in-serie index is only available in Point.id, and only in a form where it is concatenated with serie.id

nivo/packages/line/src/hooks.js

Line 41 in 0f5ac2f

id: `${serie.id}.${i}`,

It seems a little unnecessarily tricky to recover the in-series index by parsing this identifier and we are a little worried this identifier format might change in future versions.

Suggested feature

It would be more convenient for us if Point included a property indexInSerie or something like that.

indexInSerie: i,

Alternative solution

I see there is a property data included in these points on line 50 but it is a little unclear to me whether we can pass a reference to our original richer objects via these data properties.

The serie.data mapped here seems to to be copied from an element of rawSeries:

nivo/packages/line/src/hooks.js

Lines 184 to 188 in 0f5ac2f

	const series = dataWithColor
	.map(datum => ({
	...rawSeries.find(serie => serie.id === datum.id),
	color: datum.color,
	}))

rawSeries seems to come from computeXYScalesForSeries where data is set to extended copies of the elements of a serie.data.

nivo/packages/scales/src/compute.ts

Lines 150 to 159 in 0f5ac2f

	const computedSeries: ComputedSerie<S, D>[] = nestedSeries.map(serie => ({
	...serie,
	data: serie.data.map(datum => ({
	...datum,
	position: {
	x: getDatumAxisPosition(datum, 'x', xScale),
	y: getDatumAxisPosition(datum, 'y', yScale),
	},
	})),
	}))

That serie seems to be like the original serie but with each object in data, nested in a new object, under a new property data.

nivo/packages/scales/src/compute.ts

Lines 91 to 96 in 0f5ac2f

	const nestSerieData = <S = never, D extends SerieDatum = SerieDatum>(
	serie: Serie<S, D>
	): NestedSerie<S, D> => ({
	...serie,
	data: serie.data.map(d => ({ data: { ...d } })),
	})

If I didn't read the source wrong, we could feed Line with data like:

Array<{
  data: Array<{
    x: number,
    y: number,
    original: object
  }>,
  id 
}>

nestSerieData would produce:

Array<{
  data: Array<{
    data: {
      x: number,
      y: number,
      original: object
    }
  }>,
  id 
}>

computeXYScalesForSeries would produce a series like:

Array<{
  data: Array<{
    data: {
      x: number,
      y: number,
      original: object
    },
    position: object
  }>,
  id
}>

useLine would produce a dataWithColor like:

Array<{id,label,color}>

and a series like:

Array<{
  data: Array<{
    data: {
      x: number,
      y: number,
      original: object
    },
    position: object
  }>,
  id,
  color
}>

usePoints will take this and produce something like:

Array<{
  id,
  index,
  serieId,
  serieColor,
  x,
  y,
  color,
  borderColor,
  data: {
    x,
    y,
    original,
    xFormatted,
    yFormatted
  }
}>

and we could use Point.data.original to resolve properties from our original richer objects.

If that is true, it would be nice to see it documented somewhere near

nivo/packages/line/index.d.ts

Lines 90 to 96 in 0f5ac2f

	data: {
	x: DatumValue
	xFormatted: string | number
	y: DatumValue
	yFormatted: string | number
	yStacked?: number
	}

Documentation consulted before creating issue

I browsed https://nivo.rocks/ for documentation on tooltips but I only found: https://nivo.rocks/line/#interactivity-tooltip and https://nivo.rocks/line/#interactivity-sliceTooltip

Additional context

For additional context, our project and the changes sparking this issue can be found via zetkin/app.zetkin.org#2076 (comment)