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

[CR1AT0RS]

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

[Amacelia]

Shouldn't it allow less than 12 data points?
https://nivo.rocks/storybook/?path=/story/bump--default
^Here there's less than 12 but I can't get it working....

[plouc]

This is weird, there's no minimum limit, for example you can see it working with less here.

[plouc]

@CR1AT0RS, I think I found the problem, y should be a rank, not the actual value, nivo doesn't automatically compute the rank from arbitrary values.

[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!

[Amacelia]

Yes, I also had this issue and this helped. I needed to show only one line so I did it this way:

const data =
  [
    {
      "id": "single_line",
      "data": [
        {
          "x": "EX",
          "y": 3
        },
        {
          "x": "RA",
          "y": 1
        },
        {
          "x": "CL",
          "y": 2
        },
        {
          "x": "FA",
          "y": 4
        },
        {
          "x": "RE",
          "y": 5
        }
        ,
        {
          "x": "DE",
          "y": 2
        }
      ]
    },
    {
      "id": "2",
      "data": [
        {
          "x": "EX",
          "y": null
        }
      ]
    },
    {
      "id": "3",
      "data": [
        {
          "x": "EX",
          "y": null
        }
      ]
    },
    {
      "id": "4",
      "data": [
        {
          "x": "EX",
          "y": null
        }
      ]
    },
    {
      "id": "5",
      "data": [
        {
          "x": "EX",
          "y": null
        }
      ]
    }
  ];

Where I needed y to be between 1 and 5 and x a string. So made some empty/null ranks.