question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Upgrading Nivo scatterplot from 0.73 to 0.79 broke custom colors

See original GitHub issue

Describe/explain the bug After upgrading Nivo and it’s respective scatterplot package from 0.73.0 to 0.79.0/1, all of my scatterplot’s custom color function broke.

A snippet of my code is as follows:

export type CustomDatum = {
    x: string;
    y: number;
    trait: string;
    total: string;
    item: ESOItem;
    quant: number;
    quality: string | undefined;
};
<ResponsiveScatterPlot
    data={[{ id: "Item", data }]}
    colors={(d: CustomDatum) => {
        switch (colorPreset) {
            case ColorPreset.QUALITY: {
                return (
                    ((gradient.current as GradientQualityGenerator)?.(
                        d.quality as keyof typeof QualityColors
                    ) as unknown as string) ?? "#00F"
                );
            }
            case ColorPreset.QUANTITY: {
                return (
                    ((gradient.current as GradientQuantityGenerator)?.(
                        d.quant
                    ) as unknown as string) ?? "#00F"
                );
            }
            case ColorPreset.TRAIT: {
                return (
                    ((gradient.current as GradientTraitGenerator)?.(
                        d.trait as keyof typeof TraitColors
                    ) as unknown as string) ?? "#00F"
                );
            }
            default: {
                return "#00F";
            }
        }
    }}
/>

For version 0.73, it looked like the color property had the type OrdinalColorScaleConfig which in my use case became OrdinalColorScaleConfigCustomFunction<Datum>.

For version 0.79, it seems like the generic type was pre-set to

OrdinalColorScaleConfig<{
    serieId: ScatterPlotRawSerie<RawDatum>['id'];
}>

when I print the value the function received on the new version, the only info I get back is the series ID. I no longer have access to the data of the corresponding point.

On the otherhand, my custom tooltips still work as intended as the generic used is the data model of the chart ScatterPlotTooltip<RawDatum>.

Is this an intended change? If so, what is the new way of accessing a nodes data from a custom colors function?

Desktop (please complete the following information):

  • OS: Ubuntu
  • Browser: Firefox

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:1
  • Comments:11 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
zvictorcommented, Aug 22, 2022

Thanks to this post I managed to build the feature I needed! Unfortunately that required me to rollback to version 0.73.0 as described by @NicolasNewman.

Here is an use case of how one can use such feature: 😊

https://user-images.githubusercontent.com/181076/185995149-0ece696f-3e57-4106-8516-767501bbdcb6.mov

1reaction
johan3040commented, Sep 22, 2022

Any updates on this issue?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Scatter Plot chart | nivo
A scatter plot chart, which can display several data series. It lets you plot data on 2 dimensions, x & y, and can...
Read more >
@nivo/scatterplot - npm
Start using @nivo/scatterplot in your project by running `npm i ... There are 25 other projects in the npm registry using @nivo/scatterplot.
Read more >
@nivo/colors: Versions | Openbase
Full version history for @nivo/colors including change logs. ... canvas: add custom ref to ScatterPlotCanvas and NetworkCanvas (#1953) (b0210744) ...
Read more >
describing and predicting job satisfaction among faculty ...
advantage of another, the educational ministry was broken into thirteen ... the calculated test-retest correlation for this survey was 0.79,.
Read more >
Joint and Constrained Inversion of ... - ResearchGate
lapse ERT data for water-table fluctuations and for improving the imaging of natural aquifer dynamics. Hydraulic conductivity of the gravel aquifer was ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found