[GitHub] [superset] Arpan1089 opened a new issue #16826: React integration with apache superset for showing charts

[GitBox <gi...@apache.org>]

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: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org