061faab818
* docs: [demo][connection] add ConfigureCORS story for testing CORS * docs: [demo][ConfigureCORS] better instructions * feat: [chart] add mvp DataProvider component * docs: better CORS story, update webpack for @babel/polyfill * docs: [chart] add DataProvider story with WordCloudPlugin * docs: [chart] add DataProvider deets to Readme * test(chart): move SuperChart.test.jsx => .tsx and instead use @ts-ignore * fix(connection): point interface.request to client.request * feat(chart): re-write DataProvider as ChartDataProvider * docs(demo): re-write LegacyWordCloudStories => ChartDataProviderStories * refactor(chart): use IDENTITY as ChartPlugin buildQuery default * feat(chart): support legacy + v1 loadQueryData endpoints in ChartClient * docs(demo): add sankey + sunburst plugins to ChartDataProvider story * style(chart): run prettier on SuperChart * feat(chart): export QueryData type from models/ChartProps * feat(chart): export Metrics and BaseFormData from types/ChartFormData * feat(chart): add request option overrides in ChartDataProvider * fix(chart): use Partial<> for ChartClient request option overrides * test(chart): add ChartDataProvider tests * build: include demo pkg in type script * build: move storybook/mocks to test/fixtures * build: move json-bigint TS declaration to root * test(chart): clean up ChartDataProvider test TS * chore(chart): lint fix SuperChart * fix(chart): set ChartPlugin.buildQuery default back to undefined * test(connection): fix expected Client.get call count * test(chart): fix ChartClient tests and add test for legacy API * fix(chart): uninitialized typo, change fetching => loading * docs(chart): update README to final ChartDataProvider API * docs(chart): fix typo * test(chart): get ChartDataProvider to one hundo * feat(chart): add and export more meaningful Datasource type * feat(chart): use Datasource type in ChartClient |
||
---|---|---|
.. | ||
src | ||
test | ||
types | ||
package.json | ||
README.md |
@superset-ui/chart
Description
Example usage
<ChartDataProvider />
This component is a React utility wrapper around the @superset-ui/chart
ChartClient
and will
generally require you to setup CORS
(CROSS ORIGIN RESOURCE SHARING) to accept cross-origin
requests from domains outside your Apache Superset
instance:
-
Configure
CORS
in yourApache Superset
instance.a. Enable
CORS
requests to (minimally) the resources defined below.b. Enable
CORS
requests from the relevant domains (i.e., the app in which you will embed charts)# config.py ENABLE_CORS = True CORS_OPTIONS = { 'supports_credentials': True, 'allow_headers': [ 'X-CSRFToken', 'Content-Type', 'Origin', 'X-Requested-With', 'Accept', ], 'resources': [ '/superset/csrf_token/' # auth '/api/v1/formData/', # sliceId => formData '/superset/explore_json/*', # legacy query API, formData => queryData '/api/v1/query/', # new query API, queryContext => queryData '/superset/fetch_datasource_metadata/' # datasource metadata ], 'origins': ['http://myappdomain:9001'], }
-
Configure
SupersetClient
in the app where you will embed your charts. You can test this configuration in the@superset-ui
storybook.import { SupersetClient } from '@superset-ui/connection'; SupersetClient.configure({ credentials: 'include', host: `${SUPERSET_APP_HOST}`, mode: 'cors', }).init();
-
Register any desired / needed
@superset-ui
chart + color plugins.import WordCloudPlugin from '@superset-ui/plugin-chart-word-cloud'; new WordCloudPlugin().configure({ key: 'word_cloud' }).register();
-
Pass
SupersetClient
to theChartDataProvider
along with the formData for the desired visualization type.
import { ChartDataProvider } from '@superset-ui/chart';
const render = () => (
<DataProvider client={client} formData={formData}>
{({ loading, error, payload }) => (
<>
{loading && <Loader />}
{error && <RenderError error={error} />}
{payload && (
<SuperChart type={CHART_TYPE} chartProps={{ formData, payload, width, height }} />
)}
</>
)}
</DataProvider>
);
<SuperChart />
Coming soon.
Development
@data-ui/build-config
is used to manage the build configuration for this package including babel
builds, jest testing, eslint, and prettier.