Fixing color to a segment based on value

[koliwadabhilash]

Hi @vasturiano ,
We also wanted to fix the color of the Segment by Value and did the following:

const valColorScale = d3.scaleOrdinal()
      .domain(['FAILED', 'COMPLETED', 'IN_PROGRESS', 'WAITING', 'STOPPED'])
      .range(['red', 'green', 'blue', 'yellow', 'orange']);

this.timeline.zColorScale(valColorScale);

However, there is a compilation error at the above line that says ,

TS2345: Argument of type 'ScaleOrdinal<string, unknown, never>' is not assignable to parameter of type 'Scale<Val, string>'. Types of parameters 'x' and 'input' are incompatible. Type 'Val' is not assignable to type 'string'. Type 'number' is not assignable to type 'string'.

Will you please advise us here..??

Thanks in Advance,
Abhilash

[koliwadabhilash]

We tried with another method i.e.,
Using the .zColorScale(val => valColors[val]); , it did add color of my choice to the graph but the tooltip and label on top stopped working.

Please help :(

[vasturiano]

@Abhilash-Koliwad I think you just need to type your d3 color scale appropriately. Something like:

const valColorScale: (domain: string) => string = d3.scaleOrdinal()...

[koliwadabhilash]

@vasturiano Thankyou for your response..

But we have the same issue when we try the above fix,

    const valColorScale: (domain: string) => string = d3.scaleOrdinal()
      .domain(['WAITING', 'FAILED', 'COMPLETED', 'IN PROGRESS', 'STOPPED'])
      .range(['blue', 'red', 'green', 'orange', 'black']);

Error:

TS2322: Type 'ScaleOrdinal<string, unknown, never>' is not assignable to type '(domain: string) => string'.   Type 'unknown' is not assignable to type 'string'.

[vasturiano]

@Abhilash-Koliwad I've created a TypeScript example here: https://codesandbox.io/s/timelines-ts-cw8m7x?file=/src/index.ts.

Can you confirm it works?

[koliwadabhilash]

@vasturiano Nope, it doesn't :(

We are still getting the same error even when we copied your typescript code, we are also using the same version of libraries as you've done.

[vasturiano]

Since it's working in that example, but not in your app, could you create a simple example on codesandbox.io that reproduces the issue?

[ctooley21]

@vasturiano I can confirm I'm experiencing the same typing issues, however if I add a "@ts-expect-error" everything works correctly on the chart.

// @ts-expect-error
const valColorScale: (domain: string) => string = scaleOrdinal()
  .domain(applications)
  .range([
	  "#FF52EA",
	  "#ffbaf7",
	  "#75ffce",
	  "#c8ffeb",
	  "#05C9FF",
	  "#9be9ff",
	  "#0068FF",
	  "#99c3ff",
	  "#7030A0",
	  "#c6acd9",
  ]);

TimelinesChart()(element)
  .zQualitative(true)
  // @ts-expect-error
  .zColorScale(valColorScale)
  .data(groups);

I'm using the following versions:
typescript 4.9.3
timelines-chart 2.11.7
d3-scale 4.0.2 (although same issue on the latest d3 version)

Side note: thanks for your work on this library, Vasco! Great library to use!