Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

155
Visualizações
React integration with apache superset for showing charts

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:

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

I have already installed: "@emotion/react

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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)

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda