Hello, Im having trouble using the Widget Builder. Im trying to do a chart widget, but when i try to use the component, it throws the classic ts error:
```
Type ‘{ data: { carrier: string; days: number; }; series: { type: “bar”; dataKey: string; label: string; color: string; }; xAxis: { dataKey: string; }; showYAxis: true; showLegend: false; }’ is not assignable to type ‘IntrinsicAttributes & { data: { [x: string]: string | number; }; series: ({ label?: string | undefined; dataKey: string; type: “bar”; color?: any; stack?: string | undefined; } | { …; } | { …; }); … 20 more …; aspectRatio: never; }’.
Type ‘{ data: { carrier: string; days: number; }; series: { type: “bar”; dataKey: string; label: string; color: string; }; xAxis: { dataKey: string; }; showYAxis: true; showLegend: false; }’ is missing the following properties from type ‘{ data: { [x: string]: string | number; }; series: ({ label?: string | undefined; dataKey: string; type: “bar”; color?: any; stack?: string | undefined; } | { label?: string | undefined; dataKey: string; color?: string | … 1 more … | undefined; type: “area”; curveType?: CurveType | undefined; stack?: string | …’: size, flex, height, width, and 7 more.(2322)
```
But those props are optional, and when i put them anyway, it throw the next error:
Type 'number' is not assignable to type 'never'.(2322)
So i tried the following to work around the problem:
{(() => {
const chartProps: any = {
data: chartData,
series: \[
{
type: “bar”,
dataKey: "days",
label: "Días",
color: "blue",
},
],
xAxis: { dataKey: "carrier" },
showYAxis: true,
showLegend: false,
}
return <Chart {…chartProps} />
})()}
But when i download it, it generate a .widget file that seems fine, but when you inspect it, in the template field, that is something like this:
“template”: “{"type":"Card","size":"md","children":[{"type":"Col","gap":3,"children":[{%- set _c -%},{"type":"Col","gap":1,"children":[{"type":"Row","gap":2,"align":"center","children":[{"type":"Title","value":"Tiempos de tránsito por naviera","size":"sm","weight":"semibold"},{"type":"Badge","label":{{ (periodLabel) | tojson }},"color":"info","variant":"soft","size":"sm"}]},{"type":"Caption","value":{{ ((origin ~ " → " ~ destination ~ (none if containerSummary else ""))) | tojson }},"color":"secondary"}]},{"type":"Box","background":"surface-secondary","radius":"xl","padding":3,"children":[{"type":"Col","gap":2,"children":[{"type":"Row","justify":"between","align":"center","children":[{"type":"Text","value":"Días por naviera","size":"xs","color":"secondary"},{"type":"Caption","value":"Menos es mejor","color":"secondary"}]}]}]},{"type":"Box","background":"surface-secondary","radius":"xl","padding":3,"children":[{"type":"Row","gap":3,"align":"center","children":[{"type":"Box","size":40,"background":"green-500","radius":"sm","align":"center","justify":"center","children":[{"type":"Icon","name":"check-circle-filled","color":"white","size":"xl"}]},{"type":"Col","gap":0.5,"children":[{"type":"Caption","value":"Naviera recomendada","color":"secondary"},{"type":"Row","align":"center","children":[{%- set _c -%},{"type":"Text","value":{{ (recommendedCarrier) | tojson }},"size":"sm","weight":"semibold"},{"type":"Spacer"}{%-if recommendedTotalUsdFormatted -%},{"type":"Badge","label":{{ (recommendedTotalUsdFormatted) | tojson }},"color":"success","variant":"soft","size":"sm"}{%-else-%}{%-endif-%}{%- endset -%}{{- (_c[1:] if _c and _c[0] == ‘,’ else _c) -}}]},{"type":"Caption","value":{{ (recommendedReason) | tojson }},"color":"secondary"}]}]}]}{%-if (series and (series | length)) -%},{"type":"Col","gap":1,"children":[{"type":"Caption","value":"Promedio histórico","color":"secondary"},{"type":"Row","gap":2,"wrap":"wrap","children":[{%- set _c -%}{%-for item in series -%},{"type":"Box","key":{{ (item.carrier) | tojson }},"children":[{"type":"Badge","label":{{ ((item.carrier ~ ": " ~ item.avgTransitDays ~ " d")) | tojson }},"size":"sm"}]}{%-endfor-%}{%- endset -%}{{- (_c[1:] if _c and _c[0] == ‘,’ else _c) -}}]}]}{%-else-%}{%-endif-%}{%-if note -%},{"type":"Caption","value":{{ (note) | tojson }},"color":"secondary"}{%-else-%}{%-endif-%}{%- endset -%}{{- (_c[1:] if _c and _c[0] == ‘,’ else _c) -}}]}]}”
it wont generate the code for the Chart component, so when i try to use it, it wont render, but the weird thing is that the in the preview it looks fine:
But when i try to use it, it looks exactly like that, but without the Chart component.
Im a 100% sure that the generated input information is fine.
What can it be? Maybe its just a bug?