[Front-End] Replace the Line Charts with Nivo

[eryc-cc]

Summary

Replace the <CardLineChart> component from eCharts to Nivo.

• Component in Storybook: https://beta.design-insights.opensauced.pizza/?path=/story/design-system-molecules-card-line-chart--default

Try to make it look as close as possible to this:

Keep in mind that we want the line to stay edge to edge, like this:

[mtfoley]

I was playing on the Nivo playground (https://nivo.rocks/line/), and after playing around, I got the look here:

// install (please make sure versions match peerDependencies)
// yarn add @nivo/core @nivo/line
import { ResponsiveLine } from '@nivo/line'

// make sure parent container have a defined height when using
// responsive component, otherwise height will be 0 and
// no chart will be rendered.
// website examples showcase many properties,
// you'll often use just a few of them.
const MyResponsiveLine = ({ data /* see data tab */ }) => (
    <ResponsiveLine
        data={data}
        margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
        xScale={{ type: 'point' }}
        yScale={{
            type: 'linear',
            min: 'auto',
            max: 'auto',
            stacked: true,
            reverse: false
        }}
        yFormat=" >-.2f"
        curve="monotoneX"
        axisTop={null}
        axisRight={null}
        axisBottom={{
            orient: 'bottom',
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
            legend: '',
            legendOffset: -32,
            legendPosition: 'middle'
        }}
        axisLeft={null}
        enableGridX={false}
        enablePoints={false}
        pointSize={10}
        pointColor={{ theme: 'background' }}
        pointBorderWidth={2}
        pointBorderColor={{ from: 'serieColor' }}
        pointLabelYOffset={-12}
        enableArea={true}
        useMesh={true}
        legends={[]}
    />
)

and the data set is this:

[
  {
    "id": "japan",
    "color": "hsl(329, 70%, 50%)",
    "data": [
      {
        "x": "plane",
        "y": 191
      },
      {
        "x": "helicopter",
        "y": 297
      },
      {
        "x": "boat",
        "y": 134
      },
      {
        "x": "train",
        "y": 88
      },
      {
        "x": "subway",
        "y": 175
      },
      {
        "x": "bus",
        "y": 229
      },
      {
        "x": "car",
        "y": 160
      },
      {
        "x": "moto",
        "y": 260
      },
      {
        "x": "bicycle",
        "y": 64
      },
      {
        "x": "horse",
        "y": 214
      },
      {
        "x": "skateboard",
        "y": 272
      },
      {
        "x": "others",
        "y": 80
      }
    ]
  },
  {
    "id": "france",
    "color": "hsl(295, 70%, 50%)",
    "data": [
      {
        "x": "plane",
        "y": 72
      },
      {
        "x": "helicopter",
        "y": 72
      },
      {
        "x": "boat",
        "y": 233
      },
      {
        "x": "train",
        "y": 179
      },
      {
        "x": "subway",
        "y": 35
      },
      {
        "x": "bus",
        "y": 28
      },
      {
        "x": "car",
        "y": 65
      },
      {
        "x": "moto",
        "y": 256
      },
      {
        "x": "bicycle",
        "y": 53
      },
      {
        "x": "horse",
        "y": 31
      },
      {
        "x": "skateboard",
        "y": 258
      },
      {
        "x": "others",
        "y": 257
      }
    ]
  },
  {
    "id": "us",
    "color": "hsl(184, 70%, 50%)",
    "data": [
      {
        "x": "plane",
        "y": 290
      },
      {
        "x": "helicopter",
        "y": 269
      },
      {
        "x": "boat",
        "y": 32
      },
      {
        "x": "train",
        "y": 7
      },
      {
        "x": "subway",
        "y": 73
      },
      {
        "x": "bus",
        "y": 110
      },
      {
        "x": "car",
        "y": 89
      },
      {
        "x": "moto",
        "y": 35
      },
      {
        "x": "bicycle",
        "y": 111
      },
      {
        "x": "horse",
        "y": 19
      },
      {
        "x": "skateboard",
        "y": 212
      },
      {
        "x": "others",
        "y": 101
      }
    ]
  },
  {
    "id": "germany",
    "color": "hsl(200, 70%, 50%)",
    "data": [
      {
        "x": "plane",
        "y": 114
      },
      {
        "x": "helicopter",
        "y": 44
      },
      {
        "x": "boat",
        "y": 59
      },
      {
        "x": "train",
        "y": 203
      },
      {
        "x": "subway",
        "y": 257
      },
      {
        "x": "bus",
        "y": 94
      },
      {
        "x": "car",
        "y": 63
      },
      {
        "x": "moto",
        "y": 227
      },
      {
        "x": "bicycle",
        "y": 72
      },
      {
        "x": "horse",
        "y": 261
      },
      {
        "x": "skateboard",
        "y": 284
      },
      {
        "x": "others",
        "y": 191
      }
    ]
  },
  {
    "id": "norway",
    "color": "hsl(31, 70%, 50%)",
    "data": [
      {
        "x": "plane",
        "y": 284
      },
      {
        "x": "helicopter",
        "y": 209
      },
      {
        "x": "boat",
        "y": 140
      },
      {
        "x": "train",
        "y": 266
      },
      {
        "x": "subway",
        "y": 137
      },
      {
        "x": "bus",
        "y": 138
      },
      {
        "x": "car",
        "y": 260
      },
      {
        "x": "moto",
        "y": 119
      },
      {
        "x": "bicycle",
        "y": 285
      },
      {
        "x": "horse",
        "y": 232
      },
      {
        "x": "skateboard",
        "y": 95
      },
      {
        "x": "others",
        "y": 280
      }
    ]
  }
]