Skip to content
This repository has been archived by the owner on Jun 25, 2020. It is now read-only.

Loading CSS when using Superset UI plugins #443

Open
db321 opened this issue Apr 24, 2020 · 0 comments
Open

Loading CSS when using Superset UI plugins #443

db321 opened this issue Apr 24, 2020 · 0 comments

Comments

@db321
Copy link

db321 commented Apr 24, 2020

How do I configure my app to display the charts correctly (with the associated styling)?

I am attempting to use Superset UI Plugins but am running into some issues. Hoping for some help/direction on how to solve.

I have read the plugin ReadMes’ and referred to the StoryBook examples and got to a point where I was able to use ChartDataProvider to retrieve the data. I then use the payload and pass it into SuperChart to get the chart displayed, however, none of the CSS loads. I added the CORS configuration into my config file as well.

Not sure what I am missing/doing wrong.

Below is the code and a screenshot of what the chart looks like. Thank you!

import React, { Component, Fragment } from "react";
import { SuperChart } from '@superset-ui/chart';
import TableChartPlugin from '@superset-ui/legacy-plugin-chart-table';
import PivottableChartPlugin from '@superset-ui/legacy-plugin-chart-pivot-table';
import { SupersetClient } from '@superset-ui/connection';
import { ChartDataProvider } from '@superset-ui/chart';

import { ThemeProvider } from 'emotion-theming';
import styled, { supersetTheme } from '@superset-ui/style';

SupersetClient.configure({
  credentials: 'include',
  host: `${SUPERSET_APP_HOST}`,
  mode: 'cors',
}).init();

new TableChartPlugin()
  .configure({ key: 'table' })
  .register();

new PivottableChartPlugin()
  .configure({ key: 'pivot_table' })
  .register();

class Test extends Component {
	render () {

		let formData = {"datasource":"3__table", "viz_type":"pivot_table",...} //didn't attach full data
		let view = (
		  	<React.Fragment>
			 	<ChartDataProvider client={SupersetClient} formData={formData}>
					{({ loading, error, payload }) => (
						{payload && (
							<SuperChart
								chartType="pivot_table"
								datasource={{
									columnFormats: {},
									verboseMap: {
										name:'Name'
									}
								}}
								formData={payload.formData}
								queryData={payload.queryData}
								height={400}
								width={400}
							/>	
						)}
					)}
				</ChartDataProvider>
			</React.Fragment>
		);

		return view;
	}
}
export default Test;

Screen Shot 2020-04-23 at 6 04 51 PM

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant