Change Bump graph to allow less than 12 dataset for series.

Describe/explain the bug Change Bump graph to allow less than 12 dataset for series.

To Reproduce Create a basic Nivo Bump component with less that 12 series.

import { ResponsiveBump } from "@nivo/bump";
import React, { useState, createContext, useReducer, useEffect } from "react";

const MonthlyChart = ({ temp_data /* see data tab */ }) => {
  const [h1data, setH1data] = useState([
  {
    "id": "First",
    "data": [
      {
        "x": 2000,
        "y": 4
      },
      {
        "x": 2001,
        "y": 7
      },
      {
        "x": 2002,
        "y": 11
      },
      {
        "x": 2003,
        "y": 12
      },
      {
        "x": 2004,
        "y": 2
      }
    ]
  },
  {
    "id": "Second",
    "data": [
      {
        "x": 2000,
        "y": 10
      },
      {
        "x": 2001,
        "y": 2
      },
      {
        "x": 2002,
        "y": 3
      },
      {
        "x": 2003,
        "y": 7
      },
      {
        "x": 2004,
        "y": 8
      }
    ]
  },
  {
    "id": "Last",
    "data": [
      {
        "x": 2000,
        "y": 9
      },
      {
        "x": 2001,
        "y": 5
      },
      {
        "x": 2002,
        "y": 8
      },
      {
        "x": 2003,
        "y": 5
      },
      {
        "x": 2004,
        "y": 12
      }
    ]
  },
  {
    "id": "Serie 4",
    "data": [
      {
        "x": 2000,
        "y": 7
      },
      {
        "x": 2001,
        "y": 4
      },
      {
        "x": 2002,
        "y": 2
      },
      {
        "x": 2003,
        "y": 11
      },
      {
        "x": 2004,
        "y": 9
      }
    ]
  }

]);

  return (
    <ResponsiveBump
      data={h1data}
      margin={{ top: 40, right: 100, bottom: 40, left: 60 }}
      colors={{ scheme: "spectral" }}
      lineWidth={3}
      activeLineWidth={6}
      inactiveLineWidth={3}
      inactiveOpacity={0.15}
      pointSize={10}
      activePointSize={16}
      inactivePointSize={0}
      pointColor={{ theme: "background" }}
      pointBorderWidth={3}
      activePointBorderWidth={3}
      pointBorderColor={{ from: "serie.color" }}
      axisTop={{
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: "",
        legendPosition: "middle",
        legendOffset: -36,
      }}
      axisRight={null}
      axisBottom={{
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: "",
        legendPosition: "middle",
        legendOffset: 32,
      }}
      axisLeft={{
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: "ranking",
        legendPosition: "middle",
        legendOffset: -40,
      }}
    />
  );
};
export default MonthlyChart;

Steps to reproduce the behavior:

1. Create a basic Bump component with less than 12 series.
2. Series is broken and no data is display properly. Existing series are also not connected.

Expected behavior It should display data for less than 12 series.

Screenshots

[alexjackhughes]

Hope you don’t mind @plouc (love this library btw its amazing 🎉), I’ve just run into the problem myself and I just wanted to add a more detailed answer on how to solve it for people like myself who might be new to Nivo:

The issue isn’t that you need a minimum of 12 data points (here’s an example data set that works with three):

[
  {
    id: 'Serie 1',
    data: [
      {
        x: 2000,
        y: 1,
      },
      {
        x: 2003,
        y: 2,
      },
      {
        x: 2004,
        y: 1,
      },
    ],
  },
  {
    id: 'Serie 2',
    data: [
      {
        x: 2000,
        y: 2,
      },
      {
        x: 2003,
        y: 3,
      },
      {
        x: 2004,
        y: 2,
      },
    ],
  },
  {
    id: 'Serie 3',
    data: [
      {
        x: 2000,
        y: 3,
      },
      {
        x: 2003,
        y: 1,
      },
      {
        x: 2004,
        y: 3,
      },
    ],
  },
];

The issue is that the y value is the current rank of that line in comparison to its peers.

So, let’s say you have three data entries, then no y value can be greater than 3, because y isn’t a number on the y axis, but the current rank of that line.

For the same reason, you can’t skip a rank. You can’t put 1,2,4 and miss out 3 - it will cause the graph to crash.

Imagine it like a 3-person race, you can’t ever be in fourth position - the worst you can do is come in 3rd.

[plouc]

@alexjackhughes, not at all, you’re explanation is much more detailed and I really like the analogy with a race, thank you!