Narnia's Poofy Meatcleaver

    This package has been deprecated

    Author message:

    We merged all @superset-ui packages. Use @superset-ui/core instead.

    @superset-ui/chart
    TypeScript icon, indicating that this package has built-in type declarations

    0.14.23 • Public • Published

    @superset-ui/chart

    Version David (path)

    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:

    1. Configure CORS in your Apache 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'],
      }
    2. 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();
    3. 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();
    4. Pass SupersetClient to the ChartDataProvider 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>
    );
    controls

    There are some helpers for plugin controls that can be imported from subdirectories of @superset-ui/chart. If you're building a third-party plugin, modules that may be of use are @superset-ui/chart/controls/selectOptions and @superset-ui/chart/controls/D3Formatting.

    <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.

    Keywords

    Install

    npm i @superset-ui/chart

    DownloadsWeekly Downloads

    362

    Version

    0.14.23

    License

    Apache-2.0

    Unpacked Size

    140 kB

    Total Files

    92

    Last publish

    Collaborators

    • michael.s.molina
    • suddjian
    • superset-ui-owner
    • kristw
    • data-ui
    • conglei
    • christopher.card.williams
    • soboko
    • mistercrunch
    • cdchambers
    • khtruong
    • erik_ritter
    • graceguo-supercat
    • michellet
    • supersetbot
    • ktmud
    • villebro
    • rusackas
    • kgabryje