TypeScript definitions

[plouc]

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!

• @nivo/bar ResponsiveBar - Add TypeScript definitions for Bar package #199
• @nivo/bar ResponsiveBarCanvas - Add TypeScript definitions for Bar package #199
• @nivo/calendar ResponsiveCalendar - Improve @nivo/calendar package #223
• @nivo/calendar ResponsiveCalendarCanvas
• @nivo/chord ResponsiveChord
• @nivo/chord ResponsiveChordCanvas
• @nivo/circle-packing ResponsiveBubble
• @nivo/circle-packing ResponsiveBubbleHtml
• @nivo/circle-packing ResponsiveBubbleCanvas
• @nivo/heatmap ResponsiveHeatMap - Type declaration module for Heatmap package #198
• @nivo/heatmap ResponsiveHeatMapCanvas - Type declaration module for Heatmap package #198
• @nivo/line ResponsiveLine - feat(line): add typescript definitions #316
• @nivo/line ResponsiveLineCanvas
• @nivo/pie ResponsivePie - Definitions for Pie component #207
• @nivo/radar ResponsiveRadar
• @nivo/sankey ResponsiveSankey - feat(sankey): add TypeScript definitions #211
• @nivo/scatterplot ResponsiveScatterPlot - feat(scatterplot): improve scatterplot #319
• @nivo/scatterplot ResponsiveScatterPlotCanvas - feat(scatterplot): improve scatterplot #319
• @nivo/stream ResponsiveStream
• @nivo/sunburst ResponsiveSunburst
• @nivo/treemap ResponsiveTreeMap
• @nivo/treemap ResponsiveTreeMapHtml
• @nivo/treemap ResponsiveTreeMapCanvas
• @nivo/waffle ResponsiveWaffle - feat(waffle): add waffle package #202
• @nivo/waffle ResponsiveWaffleHtml - feat(waffle): add waffle package #202
• @nivo/waffle ResponsiveWaffleCanvas - feat(waffle): add waffle package #202

[plouc]

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

[wyze]

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.

[kallebornemark]

@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?

[plouc]

@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 :/

[kallebornemark]

@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.

[plouc]

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]

Support added for @nivo/line package

[plouc]

Definitions added for @nivo/scatterplot package

[SaphuA]

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.
• Axis legendPosition contains center but should be middle.
• 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.

[plouc]

@SaphuA, thank you

[plouc]

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

[sloanepetit]

Hi,

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

[molzahn-sio]

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

[latema]

The pointSymbol prop is missing from the LineProps interface in line typings. I created a PR for it: #681.

[felipap]

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

[londonbarrett]

renderTick is still missing ..

[joseantonomh]

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.

[maayanbar13]

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.

[seppu]

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

[wyze]

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[]}.

[stephanoshadjipetrou]

@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?

[wyze]

@stephanoshadjipetrou It is on master but hasn't been made to a release. It will be in the next release, whenever that might be.

[stephanoshadjipetrou]

@wyze thanks for the quick response! just another quick question: is this the same case for sunburst package?

[wyze]

Yup!

[madhavan-sundararaj]

Thank you for the awesome effort. Any chance of adding Module LineComputedSerieData to @nivo/line in types? Because I am getting following error.

Module '"@nivo/line"' has no exported member 'LineComputedSerieData'.

[mikejackowski]

Seems like Treemap is missing tooltip. Any chance of adding it?

[wyze]

Hi @maddy2894 and @mikejackowski please open separate issues specific to your requests and we can handle it there. Thanks!

[lhguerra]

I see Pie is already checked as done, but I'm unable to import the type for data property (I expeted it to be PieDatum but it is not exported). Should I use some other type or is this a separate issue?