TypeScript type cast D3 js errors

0 votes

Now, how should I solve this/typecast this?

import { useEffect, useState } from "react";
import { arc, pie, DSVRowArray, csv, PieArcDatum } from "d3";

const CSVURL =
  "https://gist.githubusercontent.com/mzs21/df0621d1ca5a25fa6baeeae93562c1a1/raw/CSSNamedColors.csv";

const width = 960;
const height = 500;
const centerX = width / 2;
const centerY = height / 2;

const FetchData = () => {
  const [data, setdata] = useState<DSVRowArray<string>>();

  const pieArc = arc().innerRadius(0).outerRadius(width);
  const colorPie = pie().value(1);

  useEffect(() => {
    csv(CSVURL).then(setdata); // Fetching data & updating data
  }, []);

  if (!data) {
    return <pre>loading...</pre>;
  }

  console.log(data[0]);

  return (
    <svg width={width} height={height}>
      <g transform={`translate(${centerX}, ${centerY})`}>
        {colorPie(data).map((d: PieArcDatum<number>) => (
          <path fill={d.data["RGB hex value"]} d={pieArc(d)} />
        ))}
      </g>
    </svg>
  );
};

export default FetchData;

The code executes but with error in VSCode. Errors of VSCode are in the picture.

Errors of VSCode are in the picture

I'm also pasting the errors here:

ERROR in src/components/FetchData/FetchData.tsx:99:19
TS2345: Argument of type 'DSVRowArray<string> | PieArcDatum<number>' is not assignable to parameter of type '(number | { valueOf(): number; })[]'.
  Type 'DSVRowArray<string>' is not assignable to type '(number | { valueOf(): number; })[]'.
    The types returned by 'pop()' are incompatible between these types.
      Type 'DSVRowString<string> | undefined' is not assignable to type 'number | { valueOf(): number; } | undefined'.
        Type 'DSVRowString<string>' is not assignable to type 'number | { valueOf(): number; } | undefined'.
          Type 'DSVRowString<string>' is not assignable to type '{ valueOf(): number; }'.
            The types returned by 'valueOf()' are incompatible between these types.
              Type 'Object' is not assignable to type 'number'.
     97 |             } */}
     98 |
  >  99 |         {colorPie(data).map((d: DSVRowArray<string> | PieArcDatum<number>) => (
        |                   ^^^^
    100 |           <path
    101 |             key={Math.random()}
    102 |             fill={d.data["RGB hex value"]}

ERROR in src/components/FetchData/FetchData.tsx:99:29
TS2345: Argument of type '(d: DSVRowArray<string> | PieArcDatum<number>) => JSX.Element' is not assignable to parameter of type '(value: PieArcDatum<number | { valueOf(): number; }>, index: number, array: PieArcDatum<number | { valueOf(): number; }>[]) => Element'.
  Types of parameters 'd' and 'value' are incompatible.
    Type 'PieArcDatum<number | { valueOf(): number; }>' is not assignable to type 'DSVRowArray<string> | PieArcDatum<number>'.
      Type 'PieArcDatum<number | { valueOf(): number; }>' is not assignable to type 'PieArcDatum<number>'.
        Type 'number | { valueOf(): number; }' is not assignable to type 'number'.
          Type '{ valueOf(): number; }' is not assignable to type 'number'.
     97 |             } */}
     98 |
  >  99 |         {colorPie(data).map((d: DSVRowArray<string> | PieArcDatum<number>) => (
        |                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 100 |           <path
        | ^^^^^^^^^^^^^^^
  > 101 |             key={Math.random()}
        | ^^^^^^^^^^^^^^^
  > 102 |             fill={d.data["RGB hex value"]}
        | ^^^^^^^^^^^^^^^
  > 103 |             d={pieArc(d)!}
        | ^^^^^^^^^^^^^^^
  > 104 |           />
        | ^^^^^^^^^^^^^^^
  > 105 |         ))}
        | ^^^^^^^^^^
    106 |       </g>
    107 |     </svg>
    108 |   );

ERROR in src/components/FetchData/FetchData.tsx:102:21
TS2339: Property 'data' does not exist on type 'DSVRowArray<string> | PieArcDatum<number>'.
  Property 'data' does not exist on type 'DSVRowArray<string>'.
    100 |           <path
    101 |             key={Math.random()}
  > 102 |             fill={d.data["RGB hex value"]}
        |                     ^^^^
    103 |             d={pieArc(d)!}
    104 |           />
    105 |         ))}

ERROR in src/components/FetchData/FetchData.tsx:103:23
TS2769: No overload matches this call.
  Overload 1 of 2, '(this: any, d: DefaultArcObject, ...args: any[]): string | null', gave the following error.
    Argument of type 'DSVRowArray<string> | PieArcDatum<number>' is not assignable to parameter of type 'DefaultArcObject'.
      Type 'DSVRowArray<string>' is missing the following properties from type 'DefaultArcObject': innerRadius, outerRadius, startAngle, endAngle
  Overload 2 of 2, '(this: any, d: DefaultArcObject, ...args: any[]): void', gave the following error.
    Argument of type 'DSVRowArray<string> | PieArcDatum<number>' is not assignable to parameter of type 'DefaultArcObject'.
      Type 'DSVRowArray<string>' is not assignable to type 'DefaultArcObject'.
    101 |             key={Math.random()}
    102 |             fill={d.data["RGB hex value"]}
  > 103 |             d={pieArc(d)!}
        |                       ^
    104 |           />
    105 |         ))}
    106 |       </g>

In CodeSandBox it's working fine. No error. Playground : https://codesandbox.io/s/frosty-cannon-bfxprg?file=/src/FetchData.tsx:0-975

Jul 18 in TypeSript by Logan
• 2,140 points
8 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In TypeSript

0 votes
1 answer
0 votes
1 answer

Typescript: Property "XXX" does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

Double check the newly added object types. ...READ MORE

answered Jun 8 in TypeSript by Nina
• 3,020 points
2,625 views
0 votes
1 answer

TypeScript Object assign gives me an error property assign does not exist on type ObjectConstructor

For TypeScript 2.1 and higher, you can ...READ MORE

answered May 31 in TypeSript by Nina
• 3,020 points
70 views
0 votes
1 answer

Cast a JSON Object to a TypeScript class

I had the same issue and this ...READ MORE

answered May 31 in TypeSript by Nina
• 3,020 points
92 views
0 votes
1 answer

What is "not assignable to parameter of type never" error in TypeScript?

All you have to do is define ...READ MORE

answered May 31 in TypeSript by Nina
• 3,020 points
839 views
0 votes
1 answer

Interface type check with Typescript

You can achieve what you want without ...READ MORE

answered May 31 in TypeSript by Nina
• 3,020 points
251 views
0 votes
1 answer

array of LocalBusinessJsonLd Schema using next-seo

specify the unique keyoverride properties if you ...READ MORE

answered Feb 14 in Others by narikkadan
• 11,280 points
186 views
0 votes
1 answer

React Server Components Performance on SEO

for rendering into html  you have to ...READ MORE

answered Feb 14 in Others by narikkadan
• 11,280 points
117 views
0 votes
1 answer

How to use next-seo for setting nextjs meta tag with multiple OGP images?

https://github.com/garmeeh/next-seo use this git repo that contains ...READ MORE

answered Feb 24 in Others by narikkadan
• 11,280 points
464 views
0 votes
1 answer

React Server Components Performance on SEO

const html = readFileSync(       path.resolve(__dirname, '../build/index.html'),       'utf8'     );     // Note: this ...READ MORE

answered Feb 25 in Others by narikkadan
• 11,280 points
92 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP