Cannot use layers with typescript

[mdesousa]

It appears that with typescript it is not possible to declare layers for the ResponsiveBar component. This is with version 0.65.1 of @nivo/bar. If your try to use the default string array["grid", "axes", "bars", "markers", "legends", "annotations"] you get type errors (e.g. Type '"grid"' is not assignable to type 'Layer'). The typescript definition seems to be using an enum type (BarLayerType):

export enum BarLayerType {
    Grid = 'grid',
    Axes = 'axes',
    Bars = 'bars',
    Markers = 'markers',
    Legends = 'legends',
}
export type BarCustomLayer = (props: any) => React.ReactNode
export type Layer = BarLayerType | BarCustomLayer

I tried importing BarLayerType and using enums, like this:

import { BarItemProps, BarLayerType, ResponsiveBar } from "@nivo/bar";
...
  <ResponsiveBar
    layers={[
      BarLayerType.Grid,
      BarLayerType.Axes,
      BarLayerType.Bars,
      BarLayerType.Markers,
      BarLayerType.Legends,
    ]}

This looks ok in the vscode linter. However, when you start the react project you get an error: Attempted import error: 'BarLayerType' is not exported from '@nivo/bar'. This is confusing since there is an "export" in the declaration file... but it's what happens. I would like to recommend to change the BarLayerType to be a string union instead of an enum, like this:

type BarLayerType = "grid" | "axes" | "bars" | "markers" | "legends" | "annotations"

[wyze]

We are using string unions for the charts that have been converted to typescript, Pie, Sunburst. So when we get around to converting it, we will make this change.

Feel free to make a PR sooner if you would like to make that change!

[plouc]

Fixed by https://github.com/plouc/nivo/pull/1323