I want to integrate superset charts in my react application. I want to run my UI(react) on server and connect it to superset server to see charts.
Steps taken by me:
My code:
import { SupersetClient } from '@superset-ui/core';
import { ChartDataProvider, QueryFormData, SuperChart } from '@superset-ui/core';
import TableChartPlugin from '@superset-ui/plugin-chart-table';
const client = SupersetClient.configure({
credentials: 'include',
host: 'localhost:8088',
protocol: 'http:',
mode: 'cors',
});
client.init();
new TableChartPlugin().configure({ key: 'table' }).register();
function App() {
const formData = {
datasource: '3__table',
viz_type: 'table',
url_params: {},
time_range_endpoints: ['inclusive', 'exclusive'],
granularity_sqla: 'ds',
time_grain_sqla: 'P1D',
time_range: '100 years ago : now',
query_mode: 'aggregate',
groupby: ['gender'],
metrics: ['count'],
all_columns: ['name', 'gender'],
percent_metrics: [],
order_by_cols: [],
row_limit: 50000,
order_desc: true,
adhoc_filters: [],
table_timestamp_format: 'smart_date',
color_pn: true,
show_cell_bars: true,
queryFields: {
groupby: 'groupby',
metrics: 'metrics'
},
applied_time_extras: {},
where: '',
having: '',
having_filters: [],
filters: []
};
return (
<div className="App">
<ChartDataProvider client={client} formData={formData}>
{({ loading, error, payload }) => {
if (loading) return <div>Loading...</div>;
if (error) return renderError(error);
if (payload) {
console.log('payload', payload);
return (
<SuperChart
chartType="table"
formData={formData}
queryData={payload.queryData}
width={400}
height={200}
/>
);
}
return null;
}}
</ChartDataProvider>
</div>
);
}
export default App;
Error while running the application:
https://i.stack.imgur.com/Ge2P1.png
I have already installed: "@emotion/react
Run the following command:
npm i @emotion/styled
(After installing this node packages, you may get errors of other node dependencies, install them all with npm i)