Arpan1089 opened a new issue #16826:
URL: https://github.com/apache/superset/issues/16826


   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 :
   1.imported @superset-ui/core package.
   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 :
   `Failed to compile.
   
   ./node_modules/@superset-ui/core/esm/style/index.js
   Module not found: Can't resolve '@emotion/styled' in 
'/home/xxxx/Desktop/react/my-app/node_modules/@superset-ui/core/esm/style'
   
   `
   Thanks


-- 
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]

Reply via email to