Nivo: TypeScript definitions

Created on 22 May 2018 · 26Comments · Source: plouc/nivo

This issue is used to track down the ongoing work on TypeScript definitions for nivo packages.

As nivo isn't built using TypeScript, it does not include definitions, if you're working in a TS environment and already created one for your use case, please do not hesitate to submit a PR!

[x] @nivo/bar ResponsiveBar - https://github.com/plouc/nivo/pull/199
[x] @nivo/bar ResponsiveBarCanvas - https://github.com/plouc/nivo/pull/199
[x] @nivo/calendar ResponsiveCalendar - https://github.com/plouc/nivo/pull/223
[x] @nivo/calendar ResponsiveCalendarCanvas
[x] @nivo/chord ResponsiveChord
[x] @nivo/chord ResponsiveChordCanvas
[ ] @nivo/circle-packing ResponsiveBubble
[ ] @nivo/circle-packing ResponsiveBubbleHtml
[ ] @nivo/circle-packing ResponsiveBubbleCanvas
[x] @nivo/heatmap ResponsiveHeatMap - https://github.com/plouc/nivo/pull/198
[x] @nivo/heatmap ResponsiveHeatMapCanvas - https://github.com/plouc/nivo/pull/198
[x] @nivo/line ResponsiveLine - https://github.com/plouc/nivo/pull/316
[x] @nivo/line ResponsiveLineCanvas
[x] @nivo/pie ResponsivePie - https://github.com/plouc/nivo/pull/207
[x] @nivo/radar ResponsiveRadar
[x] @nivo/sankey ResponsiveSankey - https://github.com/plouc/nivo/pull/211
[x] @nivo/scatterplot ResponsiveScatterPlot - https://github.com/plouc/nivo/pull/319
[x] @nivo/scatterplot ResponsiveScatterPlotCanvas - https://github.com/plouc/nivo/pull/319
[x] @nivo/stream ResponsiveStream
[x] @nivo/sunburst ResponsiveSunburst
[x] @nivo/treemap ResponsiveTreeMap
[x] @nivo/treemap ResponsiveTreeMapHtml
[x] @nivo/treemap ResponsiveTreeMapCanvas
[x] @nivo/waffle ResponsiveWaffle - https://github.com/plouc/nivo/pull/202
[x] @nivo/waffle ResponsiveWaffleHtml - https://github.com/plouc/nivo/pull/202
[x] @nivo/waffle ResponsiveWaffleCanvas - https://github.com/plouc/nivo/pull/202

in progress help wanted circle-packing typescript

Source

plouc

❤7

Most helpful comment

Hi! just wanted to mention that there are some type definitions missing for the @nivo/core package, stumbled upon it while trying to use linearGradientDef. should probably add it to the list.

maayanbar13 on 30 Mar 2020

👍4

All 26 comments

@kodedevil, if you're willing to contribute with sankey definition, please link your PR to this issue :)

plouc on 22 May 2018

We use TypeScript in our project that contains nivo. A lot of the times we just use an empty declare module '@nivo/bar' in a global setting and move on. I'll definitely take some of these and contribute them so we can remove those from our project.

wyze on 23 May 2018

🎉2

@plouc It seems like the current Typescript definitions for ResponsiveBar requires one to provide a lot of props that are marked as optional in the docs, such as defs. Or am I missing something?

kallebornemark on 18 Sep 2018

@kallebornemark, the doc says they're not required, but in fact they are required but defaultProps are defined, recent TypeScript version supports this, so the definitions should be updated :/

plouc on 18 Sep 2018

👍1

@plouc I see. Do you think still will happen anytime soon? We're looking for a sophisticated graph lib for our project, and yours looks really promising. We're very reliant on TS at the moment though.

kallebornemark on 19 Sep 2018

Not soon, I won't have much time to work on nivo in the upcoming weeks, but contributions are welcome :) All components have quite exhaustive prop types, it can help to write TS definitions.

plouc on 19 Sep 2018

Support added for @nivo/line package

plouc on 17 Oct 2018

Definitions added for @nivo/scatterplot package

plouc on 18 Oct 2018

As I don't have time right now to submit a pr (I might later) I'll use this place to sum up typescript issues I find as I go:

Bar v0.51

[ ] Axis is missing renderTick property.
[x] Axis legendPosition contains center but should be middle.
[x] I think colorBy and tooltip should receive BarExtendedDatum as prop instead of BarDatum.

Pie v0.51
~- [ ] Small issue, but doing something like this colorBy={(datum) => datum.color} won't work because datum is of a specific type even though it could contain anything.~ Never mind, PieDatum has an indexer.

SaphuA on 14 Nov 2018

👍4

@SaphuA, thank you

plouc on 14 Nov 2018

❤2

Definitions added for @nivo/chord => https://github.com/plouc/nivo/pull/526

plouc on 23 Apr 2019

legendPosition has been fixed

plouc on 5 May 2019

@nivo/stream & @nivo/radar now come with TypeScript definitions.

plouc on 19 May 2019

Hi,

It seems that the cellComponent & legends props declarations are missing in the Waffle component.

sloanepetit on 3 Jun 2019

Great work! I'm starting with typescript and nivo and these definitions are a blessing.

I noticed two missing typings in LineCustomLayerProps though when attempting to do dashed lines by copying the custom line style example:

[ ] lineGenerator
[ ] areaGenerator

ralmo on 22 Aug 2019

The pointSymbol prop is missing from the LineProps interface in line typings. I created a PR for it: https://github.com/plouc/nivo/pull/681.

latema on 6 Sep 2019

Hi there, has the Typescript issue with borderColor in @nivo/bar (#344) been fixed?

felipap on 14 Sep 2019

renderTick is still missing ..

londonbarrett on 15 Nov 2019

👍1

First of anything, thanks for the awesome work. Keep it up! :)

I just realized, that the Types of the Axis' property legend are inconsistent between LineChart and BarChart.

Axis.legend is type string (Bar)
AxisProps.legend is type React.ReactNode (Line)

Since both seems to accept strings and components (at least <tspan>) I believe that legend should be of type React.ReactNode for both.

joseantonomh on 3 Mar 2020

Hi! just wanted to mention that there are some type definitions missing for the @nivo/core package, stumbled upon it while trying to use linearGradientDef. should probably add it to the list.

maayanbar13 on 30 Mar 2020

👍4

Hi @plouc , I am trying to add a total to the ResponsiveBar stacked bars from @nivo/bars using the Layer option.
I am trying to follow a similar logic to this codepen

I have created my project with typescript so when I am adding the following line
layers={["grid", "axes", "bars", TotalLabels, "markers", "legends"]}
I am getting a type error

No overload matches this call.
  Overload 2 of 2, '(props: BarSvgProps, context?: any): ResponsiveBar', gave the following error.
    Type '"grid"' is not assignable to type 'Layer'.
  Overload 2 of 2, '(props: BarSvgProps, context?: any): ResponsiveBar', gave the following error.
    Type '"axes"' is not assignable to type 'Layer'.
  Overload 2 of 2, '(props: BarSvgProps, context?: any): ResponsiveBar', gave the following error.
    Type '"bars"' is not assignable to type 'Layer'.
  Overload 2 of 2, '(props: BarSvgProps, context?: any): ResponsiveBar', gave the following error.
...............................................................................

Checking the type definitions for bars I can see it has types for Layers. Any idea where I am going wrong
Following is my code


import React from "react";
import { ResponsiveBar, BarCustomLayer } from "@nivo/bar";
const TotalLabels:BarCustomLayer = ({ bars , yScale }: any) => {
    // space between top of stacked bars and total label
    const labelMargin = 20;

    return bars.map(({ data: { data, indexValue }, x, width }: any, i: number) => {
      // sum of all the bar values in a stacked bar
      const total = data['Net Spend'];

      return (
        <g
          transform={`translate(${x}, ${yScale(total) - labelMargin})`}
          key={`${indexValue}-${i}`}
        >
          <text
            // add any class to the label here
            className="bar-total-label"
            x={width / 2}
            y={labelMargin / 2}
            textAnchor="middle"
            alignmentBaseline="central"
            // add any style to the label here
            style={{
              fill: "rgb(51, 51, 51)"
            }}
          >
            {total}
          </text>
        </g>
      );
    });
  };
const ResponsiveStackedBar: React.FunctionComponent<any> = ({ data, keys }) => { 
    return (
        <ResponsiveBar
            data={data}
            keys={keys}
            indexBy="scenario"
            margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
            padding={0.5}
            // colors={{ scheme: 'nivo' }}
            colors={({ id, data }) => data[`${id}Color`]}

            borderColor={{ from: 'color', modifiers: [ [ 'darker', 1.6 ] ] }}
            axisTop={null}
            axisRight={null}
            axisBottom={{
                tickSize: 5,
                tickPadding: 5,
                tickRotation: 0,
                legend: 'Scenario',
                legendPosition: 'middle',
                legendOffset: 40
            }}
            axisLeft={{
                tickSize: 5,
                tickPadding: 5,
                tickRotation: 0,
                legend: 'Amount',
                legendPosition: 'middle',
                legendOffset: -55,
                format: '$.2s'
            }}
            labelSkipWidth={12}
            labelSkipHeight={12}
            labelTextColor={{ from: 'color', modifiers: [ [ 'darker', 1.6 ] ] }}
            labelFormat="$.2s"
            legends={[
                {
                    dataFrom: 'keys',
                    anchor: 'top-right',
                    direction: 'column',
                    justify: false,
                    translateX: 120,
                    translateY: 0,
                    itemWidth: 100,
                    itemHeight: 20,
                    itemsSpacing: 0,
                    symbolSize: 20,
                    itemDirection: 'left-to-right'
                }
            ]}
            animate={true}
            motionStiffness={90}
            motionDamping={15}
            layers={["grid", "axes", "bars", TotalLabels, "markers", "legends"]}
        />
    )
};

If I change the line to
layers={[TotalLabels]}
there is no type error but the graphs are not shown even though I can see the totals. And this I know will not work as grid needs to come first

seppu on 7 Sep 2020

It is because the layers you are passing in are coming as string instead of grid or axes, etc. You might be able to do layers={["grid", "axes", "bars", TotalLabels, "markers", "legends"] as const}, but if that doesn't work, you will need to import Layer from @nivo/bar and do layers={["grid", "axes", "bars", TotalLabels, "markers", "legends"] as Layer[]}.

wyze on 10 Sep 2020

👍1

@plouc when trying to install @nivo/treemap package seems that the index.d.ts file is missing. Based on the initial comment list of yours treemap has ts types defined, isn't that right?