dosubot[bot] commented on issue #28785:
URL: https://github.com/apache/superset/issues/28785#issuecomment-2141556112
<!-- Answer -->
To ensure that all columns returned by your SQL query are displayed in the
chart, you need to configure the chart settings appropriately. Here are the
steps to achieve this:
1. **Modify the Chart Configuration**:
Ensure that the `column_config` property is set up to include all
columns. Here is an example configuration:
```tsx
const config: ControlPanelConfig = {
controlPanelSections: [
{
label: t('Query'),
expanded: true,
controlSetRows: [
// other controls
[
{
name: 'all_columns',
config: {
type: 'SelectControl',
label: t('Columns'),
description: t('Columns to display'),
multi: true,
freeForm: true,
allowAll: true,
commaChoosesOption: false,
optionRenderer: c => <ColumnOption showType column={c} />,
valueRenderer: c => <ColumnOption column={c} />,
valueKey: 'column_name',
mapStateToProps: ({ datasource, controls }, controlState)
=> ({
options: datasource?.columns || [],
queryMode: getQueryMode(controls),
externalValidationErrors:
isRawMode({ controls }) &&
ensureIsArray(controlState?.value).length === 0
? [t('must have a value')]
: [],
}),
visibility: isRawMode,
resetOnHide: false,
},
},
],
// other controls
],
},
{
label: t('Options'),
expanded: true,
controlSetRows: [
// other controls
[
{
name: 'column_config',
config: {
type: 'ColumnConfigControl',
label: t('Customize columns'),
description: t('Further customize how to display each
column'),
width: 400,
height: 320,
renderTrigger: true,
shouldMapStateToProps() {
return true;
},
mapStateToProps(explore, _, chart) {
return {
queryResponse: chart?.queriesResponse?.[0] as
| ChartDataResponseResult
| undefined,
};
},
},
},
],
// other controls
],
},
],
formDataOverrides: formData => ({
...formData,
metrics: getStandardizedControls().popAllMetrics(),
groupby: getStandardizedControls().popAllColumns(),
}),
};
```
2. **Ensure All Columns are Included in the Data**:
Verify that the `queriesData` prop passed to the `SuperChart` component
in `ChartRenderer.jsx` includes all columns from your SQL query:
```jsx
<SuperChart
disableErrorBoundary
key={`${chartId}${webpackHash}`}
id={`chart-id-${chartId}`}
className={chartClassName}
chartType={vizType}
width={width}
height={height}
annotationData={annotationData}
datasource={datasource}
initialValues={initialValues}
formData={currentFormData}
ownState={ownState}
filterState={filterState}
hooks={this.hooks}
behaviors={behaviors}
queriesData={this.mutableQueriesResponse}
onRenderSuccess={this.handleRenderSuccess}
onRenderFailure={this.handleRenderFailure}
noResults={noResultsComponent}
postTransformProps={postTransformProps}
emitCrossFilters={emitCrossFilters}
legendState={this.state.legendState}
{...drillToDetailProps}
/>
```
3. **Validate with Test Data**:
Use the `testData.ts` file to validate that all columns are displayed
correctly. Here is an example test:
```ts
import testData from './testData';
const { basic } = testData;
describe('Table Chart', () => {
it('should display all columns', () => {
const { colnames, data } = basic.queriesData[0];
const renderedTable = renderTableChart(basic);
colnames.forEach((colname) => {
expect(renderedTable).toContain(colname);
});
data.forEach((row) => {
Object.values(row).forEach((value) => {
expect(renderedTable).toContain(value);
});
});
});
});
```
By following these steps, you can ensure that all columns returned by your
SQL query are displayed in the chart
<sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/src/explore/components/controls/ColumnConfigControl/constants.tsx)</sup><sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx)</sup><sup>[[3]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/plugin-chart-table/test/testData.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]
