Hi, I'm having an issue creating my own plugin for linear charts using the Recharts library. When I try to view the result, nothing appears on the dashboard, and I'm not receiving any error messages either. Can you help me troubleshoot this?.

import React from "react";

import { selectColorPalette, useDashboardSelector, useInsightWidgetDataView } from "@gooddata/sdk-ui-dashboard"; import { IInsightWidget } from "@gooddata/sdk-model"; import { IErrorProps, ILoadingProps } from "@gooddata/sdk-ui"; import { CartesianGrid, LabelList, Line, LineChart, XAxis } from "recharts"; // import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"; interface ILineChartProps { widget: IInsightWidget; ErrorComponent: React.ComponentType<IErrorProps>; LoadingComponent: React.ComponentType<ILoadingProps>; } export const LineChartWidget: React.FC<ILineChartProps> = ({

_widget_, _LoadingComponent_, _ErrorComponent_ }) => {

// const colorPalette = useDashboardSelector(selectColorPalette).map( // (color) =>

rgba(${color.fill.r}, ${color.fill.g}, ${color.fill.b}, .5)

// ); const { result, error, status } = useInsightWidgetDataView({ insightWidget: widget, }); if (status === "loading" || status === "pending") { return <LoadingComponent />; } if (status === "error" || !result) { return <ErrorComponent

_message_={error?.message ?? "Unknown error"} />;

} if (result) { // console.log("Insight Data 1:", result); // console.log("Insight Data 2:", result.data()); // console.log("Insight Data 3:", result.data().slices()); console.log("Insight Data 4:", result.data().slices().toArray()); } else { console.error("No result data available."); } const data = result .data() .slices() .toArray() .map((

_slice_) => ({

month: slice.sliceTitles()[0], // Get the slice title value: slice.rawData()[0], // Extract the value from the rawData method // color: colorPalette[i % colorPalette.length], // Assign a color from the palette })); return ( <LineChart

_data_={data}

_margin_={{

top: 20, left: 12, right: 12, }} > <CartesianGrid

_vertical_={false} />

<XAxis

_dataKey_="month"

_tickLine_={false}

_axisLine_={false}

_tickMargin_={8}

_tickFormatter_={(_value_) => value.slice(0, 3)}

/> {/* <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} /> */} <Line

_dataKey_="value"

_type_="natural"

_stroke_="var(--color-desktop)"

_strokeWidth_={2}

_dot_={{

fill: "var(--color-desktop)", }}

_activeDot_={{

r: 6, }} > <LabelList

_position_="top" _offset_={12} _className_="fill-foreground" _fontSize_={12} />

</Line> </LineChart> ); };

Hi there, could you share a little more about your implementation? A

package.json

is probably the best for this 🙂 Also, have you been following any guides when it comes to the plugin itself? There's a pretty good one on the GD GitHub here in case you want to double-check your steps!

Hi, thx for your answer 🙂 Here my json file. I have launch the cmd to create a new plugin : npx @GoodData Linen/plugin-toolkit dashboard-plugin init linear_plugin.

So I'm guessing you're currently at the dev server stage right? Have you tried to run the default example before development (just adding info to

.env.secrets

and running

npm run

), and did that work?

Yes I have tried to run all the examples plugins and it's working.

Hmm, so then the Dashboard only appears blank when trying to run it with the actual plugin implementation? It's strange this would result in no errors though, even if it straight up crashes 🤔

image.png,image.png,Plugin.tsx

Interesting! So the Insight Data 4

console.log

fires, and I'm assuming the Activities Growth by Year title is coming from the

LineChartWrapper

, but the actual chart itself is blank.. I'm wondering if this might mean the problem isn't in the plugin setup but somewhere in the Recharts part. If you try to skip the Recharts bit and just render like a testing phrase or something (still using the wrapper, but replacing the Recharts in

LineChartWidget

), do we get the same result or does that work? It'd be helpful to try and isolate the root of the issue 🙂

In fact I have modify the return of the component with just a div and it's working

So I suppose the other part of the test would be trying to render just the Recharts with data matching the result structure, but outside of the Dashboard plugin implementation - it's probably safe to say the problem is somewhere there, and once you figure that part out, the Dashboard plugin part should be easy since we already know it works 🙂

Alright ! Thx again for you help on that. I will test this