JS Error | Invalid type passed for ChartSeriesActions after refactoring into a component

[andycarlson]

I'm writing an app that has multiple TimeseriesCharts using similar metric dimensions. I want to have the same series actions on each chart without the need to repeat myself in the top level page code.

I've had success on other apps with tabular presentation styles and repetitive cell actions by refactoring the menu into a separate component. When I tried the same approach with a ChartSeriesAction I got a JS error at runtime as soon as the graph becomes non-empty.

The error is

JS Error | Invalid type passed for ChartSeriesActions!

I'm not sure if I am doing something wrong or there is a problem in the Dynatrace code but I have run out of other things to try so posting the problem here.

I have created a stripped down version of the series actions sample code ... stripped down in that onSelect just logs a message to the JS console. This works fine until I refactor it.

The component looks like this...

import {
  ChartSeriesAction,
} from '@dynatrace/strato-components-preview/charts';
import { MagnifyingGlassIcon } from '@dynatrace/strato-icons';

export const SampleSeriesAction = ({action}) => {
return (
  <ChartSeriesAction>
    <ChartSeriesAction.Item
    key={action.host}
    onSelect={() => {
    console.log('action fired on ',action.host);
    }}
    >
      <ChartSeriesAction.ItemIcon>
        <MagnifyingGlassIcon />
      </ChartSeriesAction.ItemIcon>
      Inspect data point
    </ChartSeriesAction.Item>
  </ChartSeriesAction>
)
}

And the relevant part of the page code looks like...

return (
  <>
    <TimeseriesChart
    data={timeseriesWithCustomData}
    seriesActions={(seriesAction) => {
      const action = seriesAction as ExtendedTimeseries;
      return (
        <SampleSeriesAction action={action} />
      );
    }}
    />
  </>
);

The stack trace from the console says...

"stack": "Error: Invalid type passed for ChartSeriesActions!
at http://localhost:3000/ui/main.js:153525:19
at ChartLegendItem (http://localhost:3000/ui/main.js:100494:20)
at renderWithHooks (http://localhost:3000/ui/main.js:13479:28)
at mountIndeterminateComponent (http://localhost:3000/ui/main.js:16857:23)
at beginWork (http://localhost:3000/ui/main.js:17845:24)
at HTMLUnknownElement.callCallback2 (http://localhost:3000/ui/main.js:5585:24)
at Object.dtAWF [as aWF] (http://localhost:3000/ruxitagentjs_ICA7NVfqrux_10307250124095659.js:252:348)
at Object.dispatchWrapper (http://localhost:3000/ruxitagentjs_ICA7NVfqrux_10307250124095659.js:411:168)
at HTMLUnknownElement.dispatchEvent (http://localhost:3000/ruxitagentjs_ICA7NVfqrux_10307250124095659.js:398:100)
at Object.invokeGuardedCallbackDev (http://localhost:3000/ui/main.js:5610:26)"

I have also attached the two source files, suffixed by '.txt'

Thanks in advance.

[MaximilianoML]

Hello, @andycarlson!

I can try to help you with that, I read the code you attached and seems right, I just have some concerns about that ExtendedTimeseries it's correctly extends the Timeseries type and includes all necessary properties. Could you check that, please?

Regards,

Maximiliano Lopes

[andycarlson]

Thanks Maximiliano.

The ExtendedTimeseries code is straight from the sample on the Dynatrace site. I haven't changed that part, just deleted some stuff in other places that was not relevant to the problem. I copied this sample to check that the issue wasn't with something in my code... which I don't think it is.

My 'real' code uses Timeseries data from a DQL query so there is no ExtendedTimeseries in my code... but I hit the same issue there.

FWIW I found a workaround... If I refactor the entire chart as a component I don't hit this issue so it is now not a blocker for me... but I still think that people should have the option to refactor just the series actions - doing that works fine for table actions, but not chart series actions.

[MaximilianoML]

Hello, @andycarlson 

Make sense why seems right 😅 

So, great to know you found a way. But yeah, sometimes one component works "strangely", I had a similar one with a time picker once. Could you share the solution you found?

Regards,

Maximiliano Lopes

[andycarlson]

I think I already shared it 😀 ... refactor the whole chart as a component instead of the series action