dosubot[bot] commented on issue #29283:
URL: https://github.com/apache/superset/issues/29283#issuecomment-2175130870
<!-- Greeting -->
Hey @hk-the-analyst! 👋 I'm here to help you with this bug. I'm a bot that
can assist you with solving bugs, answering questions, and becoming a
contributor.
<!-- Answer -->
To address the issue where dashboards with multiple charts initially display
blank charts that only show values after a forced refresh or right-clicking on
the chart, you can follow these steps:
1. **Ensure Proper Resizing and Rendering**:
- Call the `resize` method when the `Chart` component is first mounted
and when it becomes visible.
Here is an example of how you can update the `Chart` component:
```jsx
class Chart extends React.Component {
constructor(props) {
super(props);
this.state = {
width: props.width,
height: props.height,
descriptionHeight: 0,
};
this.resize = debounce(this.resize.bind(this), RESIZE_TIMEOUT);
}
componentDidMount() {
if (this.props.isExpanded) {
const descriptionHeight = this.getDescriptionHeight();
this.setState({ descriptionHeight });
}
this.resize(); // Ensure resize is called when the component is first
mounted
}
componentDidUpdate(prevProps) {
if (this.props.isExpanded !== prevProps.isExpanded) {
const descriptionHeight = this.getDescriptionHeight();
this.setState({ descriptionHeight });
}
if (this.props.isComponentVisible && !prevProps.isComponentVisible) {
this.resize(); // Ensure resize is called when the component becomes
visible
}
}
// ... rest of the code remains unchanged
}
```
2. **Refresh Charts Properly**:
- Use the `refreshCharts` function from the `dashboardState.js` file to
ensure that charts are refreshed properly.
Here is an example of how to use the `refreshCharts` function:
```js
const refreshCharts = (chartList, force, interval, dashboardId, dispatch) =>
new Promise(resolve => {
dispatch(fetchCharts(chartList, force, interval, dashboardId));
resolve();
});
export const ON_REFRESH = 'ON_REFRESH';
export function onRefresh(
chartList = [],
force = false,
interval = 0,
dashboardId,
) {
return dispatch => {
dispatch({ type: ON_REFRESH });
refreshCharts(chartList, force, interval, dashboardId, dispatch).then(
() => {
dispatch(onRefreshSuccess());
dispatch(onFiltersRefresh());
},
);
};
}
```
3. **Ensure Proper Chart Status Handling**:
- Make sure the `chartReducer` handles various chart actions correctly,
including updates and rendering.
Here is an example of how the `chartReducer` handles chart actions:
```ts
export default function chartReducer(
charts: Record<string, ChartState> = {},
action: AnyChartAction,
) {
const actionHandlers: Record<string, ChartActionHandler> = {
[actions.ADD_CHART]() {
return {
...chart,
...action.chart,
};
},
[actions.CHART_UPDATE_SUCCEEDED](state) {
return {
...state,
chartStatus: 'success',
chartAlert: null,
queriesResponse: action.queriesResponse,
chartUpdateEndTime: now(),
};
},
// ... other action handlers
};
if (action.type in actionHandlers) {
return {
...charts,
[action.key]: actionHandlers[action.type](charts[action.key]),
};
}
return charts;
}
```
By implementing these changes, you can ensure that charts are properly
rendered and refreshed, addressing the issue of initially blank charts
<sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx)</sup><sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/src/dashboard/actions/dashboardState.js)</sup><sup>[[3]](https://github.com/apache/superset/blob/master/superset-frontend/src/components/Chart/chartReducer.ts)</sup>.
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
--
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]
