javascript - React 与 apache 超集的集成以显示图表
问题描述
我想在我的反应应用程序中集成超集图表。我想在服务器上运行我的 UI(反应)并将其连接到超集服务器以查看图表。
我采取的步骤:
- 导入 @superset-ui/core 包。
我的代码:
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;
运行应用程序时出错:
https://i.stack.imgur.com/Ge2P1.png
我已经安装了:“@emotion/react
解决方案
运行以下命令:
npm i @emotion/styled
(安装此节点包后,可能会出现其他节点依赖的错误,请使用 npm i 安装它们)
推荐阅读
- javascript - 是否可以使用 java/spring boot 关闭浏览器的当前选项卡
- java - Spring Security httpBasic 404 以获得正确的凭据
- redis - 关系 DBMS 模型迁移到 Redis
- javascript - package.json 文件路径依赖有所有文件
- arrays - C中char数组的倒序
- javascript - 如果在 Vue 中没有给出空布尔道具?
- angular - Angular 测试:在使用 ng-content 的子组件中获取 HTML 元素
- python - 需要用python从PDF文件中提取文本
- javascript - 使用 JQuery 和 AJAX 刷新 Django 中的 div - Django ForLoop 问题
- list - 如何在列表之间添加元素对以在 scala 中映射?