bito-code-review[bot] commented on PR #39990:
URL: https://github.com/apache/superset/pull/39990#issuecomment-4412618493
<!-- Bito Reply -->
The flagged issue is correct. The transformProps function returns props
without the required interaction fields (groupby, labelMap, onContextMenu), and
selectedValues is hardcoded as an empty object instead of deriving from
filterState. This mismatch will cause runtime errors when allEventHandlers
tries to access groupby.length and other fields, preventing the
Interactive/Drill behaviors from working.
To resolve, align with other interactive ECharts plugins by adding the
missing fields to the destructuring and return statement.
**superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/transformProps.ts**
```
export default function transformProps(
chartProps: EchartsCandlestickChartProps,
): CandlestickChartTransformedProps {
const { width, height, formData, queriesData, hooks, filterState } =
chartProps;
const { data = [] } = queriesData[0];
const { setDataMask = () => {}, emitCrossFilters, onContextMenu } = hooks;
```
**superset-frontend/plugins/plugin-chart-echarts/src/Candlestick/transformProps.ts**
```
const xAxisLabel = getXAxisLabel(chartProps.rawFormData) || '__timestamp';
const timeFormatter = getTimeFormatter('%Y-%m-%d %H:%M:%S');
const numberFormatter = getNumberFormatter();
const transformedData = data
.map(datum => {
const time = datum[xAxisLabel];
const o = datum[openLabel];
const c = datum[closeLabel];
const l = datum[lowLabel];
const h = datum[highLabel];
if (o == null || c == null || l == null || h == null) {
return null;
}
return [time, o, c, l, h];
})
.filter(Boolean) as [any, number, number, number, number][];
const series: CandlestickSeriesOption[] = [
{
name: 'OHLC',
type: 'candlestick',
data: transformedData.map(row => row.slice(1)),
itemStyle: {
// International standard: Green for Up, Red for Down
color: '#14b143',
color0: '#ef232a',
borderColor: '#14b143',
borderColor0: '#ef232a',
},
},
];
const echartOptions: EChartsCoreOption = {
grid: {
...defaultGrid,
bottom: zoomable ? '15%' : '10%',
},
xAxis: {
type: 'category',
data: transformedData.map(row => timeFormatter(row[0])),
scale: true,
boundaryGap: false,
axisLine: { onZero: false },
splitLine: { show: false },
min: 'dataMin',
max: 'dataMax',
},
yAxis: {
...defaultYAxis,
scale: true,
splitArea: {
show: true,
},
axisLabel: { formatter: numberFormatter },
},
tooltip: {
...getDefaultTooltip(refs),
trigger: 'axis',
axisPointer: {
type: 'cross',
},
formatter: (params: CallbackDataParams[]) => {
const p = params[0];
const [o, c, l, h] = p.value as number[];
return `
<div style="padding: 3px;">
<p style="margin-bottom:
5px;"><strong>${sanitizeHtml(p.name)}</strong></p>
<div style="display: flex; justify-content: space-between;">
<span style="margin-right: 10px;">Open:</span>
<strong>${numberFormatter(o)}</strong>
</div>
<div style="display: flex; justify-content: space-between;">
<span style="margin-right: 10px;">Close:</span>
<strong>${numberFormatter(c)}</strong>
</div>
<div style="display: flex; justify-content: space-between;">
<span style="margin-right: 10px;">Low:</span>
<strong>${numberFormatter(l)}</strong>
</div>
<div style="display: flex; justify-content: space-between;">
<span style="margin-right: 10px;">High:</span>
<strong>${numberFormatter(h)}</strong>
</div>
</div>
`;
},
},
series,
dataZoom: zoomable
? [
{
type: 'inside',
start: 0,
end: 100,
},
{
show: true,
type: 'slider',
top: '90%',
start: 0,
end: 100,
},
]
: [],
};
const groupby = [getXAxisColumn(formData)].filter(Boolean);
const labelMap = { [xAxisLabel]: xAxisLabel };
return {
formData,
width,
height,
echartOptions,
setDataMask,
refs,
coltypeMapping,
selectedValues: filterState?.selectedValues || {},
groupby,
labelMap,
emitCrossFilters,
onContextMenu,
};
}
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
