Quiero integrar gráficos de superconjuntos en mi aplicación de reacción. Quiero ejecutar mi UI (reaccionar) en el servidor y conectarlo al servidor superconjunto para ver gráficos.

Pasos realizados por mi:

1. paquete @superset-ui/core importado.

Mi código:

 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 al ejecutar la aplicación:

https://i.stack.imgur.com/Ge2P1.png

Ya he instalado: "@emotion/react