Compare commits

..

4 Commits

Author SHA1 Message Date
Beto Dealmeida
4342ff4df6 feat: DND 2026-01-16 13:49:11 -05:00
Beto Dealmeida
9042601f5c Line chart 2026-01-15 22:34:38 -05:00
Beto Dealmeida
1bebbcf067 Another chart 2026-01-15 19:23:54 -05:00
Beto Dealmeida
58ac91c059 feat: test Glyph chart 2026-01-15 18:52:49 -05:00
3290 changed files with 110522 additions and 315196 deletions

View File

@@ -24,9 +24,7 @@ notifications:
discussions: notifications@superset.apache.org
github:
pull_requests:
del_branch_on_merge: true
allow_update_branch: true
del_branch_on_merge: true
description: "Apache Superset is a Data Visualization and Data Exploration Platform"
homepage: https://superset.apache.org/
labels:

View File

@@ -1,15 +0,0 @@
{
"hooks": {
"PreToolUse": [
{
"matcher": "Bash",
"hooks": [
{
"type": "command",
"command": "jq -r '.tool_input.command // \"\"' | grep -qE '^git commit' && cd \"$CLAUDE_PROJECT_DIR\" && echo '🔍 Running pre-commit before commit...' && pre-commit run || true"
}
]
}
]
}
}

View File

@@ -13,7 +13,7 @@
"features": {
"ghcr.io/devcontainers/features/docker-in-docker:2": {
"moby": false,
"moby": true,
"dockerDashComposeVersion": "v2"
},
"ghcr.io/devcontainers/features/node:1": {

2
.github/CODEOWNERS vendored
View File

@@ -20,7 +20,7 @@
# Notify PMC members of changes to GitHub Actions
/.github/ @villebro @geido @eschutho @rusackas @betodealmeida @nytai @mistercrunch @craig-rueda @kgabryje @dpgaspar @sadpandajoe @hainenber
/.github/ @villebro @geido @eschutho @rusackas @betodealmeida @nytai @mistercrunch @craig-rueda @kgabryje @dpgaspar @sadpandajoe
# Notify PMC members of changes to required GitHub Actions

View File

@@ -10,7 +10,7 @@ jobs:
steps:
- name: Check if the PR is a draft
id: check-draft
uses: actions/github-script@v8
uses: actions/github-script@v6
with:
script: |
const isDraft = context.payload.pull_request.draft;

118
.github/dependabot.yml vendored
View File

@@ -9,38 +9,13 @@ updates:
- package-ecosystem: "npm"
ignore:
# TODO: remove below entries until React >= 18.0.0
# not until React >= 18.0.0
- dependency-name: "storybook"
update-types: ["version-update:semver-major", "version-update:semver-minor"]
- dependency-name: "@storybook*"
update-types: ["version-update:semver-major", "version-update:semver-minor"]
- dependency-name: "eslint-plugin-storybook"
- dependency-name: "react-error-boundary"
- dependency-name: "@rjsf/*"
# remark-gfm v4+ requires react-markdown v9+, which needs React 18
- dependency-name: "remark-gfm"
- dependency-name: "react-markdown"
# TODO: remove below entries until React >= 19.0.0
- dependency-name: "react-icons"
# JSDOM v30 doesn't play well with Jest v30
# Source: https://jestjs.io/blog#known-issues
# GH thread: https://github.com/jsdom/jsdom/issues/3492
- dependency-name: "jest-environment-jsdom"
# `@swc/plugin-transform-imports` doesn't work with current Webpack-SWC hybrid setup
# See https://github.com/apache/superset/pull/37384#issuecomment-3793991389
# TODO: remove the plugin once Lodash usage has been migrated to a more readily tree-shakeable alternative
- dependency-name: "@swc/plugin-transform-imports"
# `just-handlerbars-helpers` library in plugin-chart-handlebars requires `currencyformatter`` to be < 2
- dependency-name: "currencyformatter.js"
update-types: ["version-update:semver-major"]
groups:
storybook:
applies-to: version-updates
patterns:
- "@storybook*"
- "storybook"
update-types:
- "patch"
directory: "/superset-frontend/"
schedule:
interval: "daily"
@@ -71,22 +46,6 @@ updates:
- package-ecosystem: "npm"
directory: "/docs/"
ignore:
# TODO: remove below entries until React >= 18.0.0 in superset-frontend
- dependency-name: "storybook"
update-types: ["version-update:semver-major", "version-update:semver-minor"]
- dependency-name: "@storybook*"
update-types: ["version-update:semver-major", "version-update:semver-minor"]
- dependency-name: "eslint-plugin-storybook"
- dependency-name: "react-error-boundary"
groups:
storybook:
applies-to: version-updates
patterns:
- "@storybook*"
- "storybook"
update-types:
- "patch"
schedule:
interval: "daily"
open-pull-requests-limit: 10
@@ -123,6 +82,16 @@ updates:
open-pull-requests-limit: 5
versioning-strategy: increase
- package-ecosystem: "npm"
directory: "/superset-frontend/plugins/legacy-plugin-chart-histogram/"
schedule:
interval: "daily"
labels:
- npm
- dependabot
open-pull-requests-limit: 5
versioning-strategy: increase
- package-ecosystem: "npm"
directory: "/superset-frontend/plugins/legacy-plugin-chart-partition/"
schedule:
@@ -145,9 +114,6 @@ updates:
- package-ecosystem: "npm"
directory: "/superset-frontend/plugins/plugin-chart-pivot-table/"
ignore:
# TODO: remove below entries until React >= 19.0.0
- dependency-name: "react-icons"
schedule:
interval: "daily"
labels:
@@ -198,9 +164,6 @@ updates:
- package-ecosystem: "npm"
directory: "/superset-frontend/plugins/plugin-chart-table/"
ignore:
# TODO: remove below entries until React >= 19.0.0
- dependency-name: "react-icons"
schedule:
interval: "daily"
labels:
@@ -229,6 +192,16 @@ updates:
open-pull-requests-limit: 5
versioning-strategy: increase
- package-ecosystem: "npm"
directory: "/superset-frontend/plugins/legacy-plugin-chart-sankey/"
schedule:
interval: "daily"
labels:
- npm
- dependabot
open-pull-requests-limit: 5
versioning-strategy: increase
- package-ecosystem: "npm"
directory: "/superset-frontend/plugins/legacy-preset-chart-nvd3/"
schedule:
@@ -249,6 +222,16 @@ updates:
open-pull-requests-limit: 5
versioning-strategy: increase
- package-ecosystem: "npm"
directory: "/superset-frontend/plugins/legacy-plugin-chart-event-flow/"
schedule:
interval: "daily"
labels:
- npm
- dependabot
open-pull-requests-limit: 5
versioning-strategy: increase
- package-ecosystem: "npm"
directory: "/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/"
schedule:
@@ -259,6 +242,16 @@ updates:
open-pull-requests-limit: 5
versioning-strategy: increase
- package-ecosystem: "npm"
directory: "/superset-frontend/plugins/legacy-plugin-chart-sankey-loop/"
schedule:
interval: "daily"
labels:
- npm
- dependabot
open-pull-requests-limit: 5
versioning-strategy: increase
- package-ecosystem: "npm"
directory: "/superset-frontend/plugins/plugin-chart-echarts/"
schedule:
@@ -270,7 +263,7 @@ updates:
versioning-strategy: increase
- package-ecosystem: "npm"
directory: "/superset-frontend/plugins/plugin-chart-ag-grid-table/"
directory: "/superset-frontend/plugins/preset-chart-xy/"
schedule:
interval: "daily"
labels:
@@ -280,7 +273,7 @@ updates:
versioning-strategy: increase
- package-ecosystem: "npm"
directory: "/superset-frontend/plugins/plugin-chart-cartodiagram/"
directory: "/superset-frontend/plugins/legacy-plugin-chart-heatmap/"
schedule:
interval: "daily"
labels:
@@ -299,12 +292,18 @@ updates:
open-pull-requests-limit: 5
versioning-strategy: increase
- package-ecosystem: "npm"
directory: "/superset-frontend/plugins/legacy-plugin-chart-sunburst/"
schedule:
interval: "daily"
labels:
- npm
- dependabot
open-pull-requests-limit: 5
versioning-strategy: increase
- package-ecosystem: "npm"
directory: "/superset-frontend/plugins/plugin-chart-handlebars/"
ignore:
# `just-handlerbars-helpers` library in plugin-chart-handlebars requires `currencyformatter`` to be < 2
- dependency-name: "currencyformatter.js"
update-types: ["version-update:semver-major"]
schedule:
interval: "daily"
labels:
@@ -339,7 +338,16 @@ updates:
# not until React >= 18.0.0
- dependency-name: "react-markdown"
- dependency-name: "remark-gfm"
- dependency-name: "react-error-boundary"
schedule:
interval: "daily"
labels:
- npm
- dependabot
open-pull-requests-limit: 5
versioning-strategy: increase
- package-ecosystem: "npm"
directory: "/superset-frontend/packages/superset-ui-demo/"
schedule:
interval: "daily"
labels:

View File

@@ -304,3 +304,26 @@ monitor_memory() {
sleep 2
done
}
cypress-run-applitools() {
cd "$GITHUB_WORKSPACE/superset-frontend/cypress-base"
local flasklog="${HOME}/flask.log"
local port=8081
local cypress="./node_modules/.bin/cypress run"
local browser=${CYPRESS_BROWSER:-chrome}
export CYPRESS_BASE_URL="http://localhost:${port}"
nohup flask run --no-debugger -p $port >"$flasklog" 2>&1 </dev/null &
local flaskProcessId=$!
$cypress --spec "cypress/applitools/**/*" --browser "$browser" --headless
say "::group::Flask log for default run"
cat "$flasklog"
say "::endgroup::"
# make sure the program exits
kill $flaskProcessId
}

View File

@@ -69,7 +69,7 @@ jobs:
`❗ @${pull.user.login} Your base branch \`${currentBranch}\` has ` +
'also updated `superset/migrations`.\n' +
'\n' +
'**Please consider rebasing your branch and [resolving potential db migration conflicts](https://superset.apache.org/docs/contributing/development#merging-db-migrations).**',
'**Please consider rebasing your branch and [resolving potential db migration conflicts](https://github.com/apache/superset/blob/master/CONTRIBUTING.md#merging-db-migrations).**',
});
}
}

View File

@@ -39,9 +39,13 @@ jobs:
# pkg:npm/store2@2.14.2
# adding an exception for an ambigious license on store2, which has been resolved in
# the latest version. It's MIT: https://github.com/nbubna/store/blob/master/LICENSE-MIT
# pkg:npm/applitools/*
# adding exception for all applitools modules (eyes-cypress and its dependencies),
# which has an explicit OSS license approved by ASF
# license: https://applitools.com/legal/open-source-terms-of-use/
# pkg:npm/node-forge@1.3.1
# selecting BSD-3-Clause licensing terms for node-forge to ensure compatibility with Apache
allow-dependencies-licenses: pkg:npm/store2@2.14.2, pkg:npm/node-forge@1.3.1, pkg:npm/rgbcolor, pkg:npm/jszip@3.10.1
allow-dependencies-licenses: pkg:npm/store2@2.14.2, pkg:npm/applitools/core, pkg:npm/applitools/core-base, pkg:npm/applitools/css-tree, pkg:npm/applitools/ec-client, pkg:npm/applitools/eg-socks5-proxy-server, pkg:npm/applitools/eyes, pkg:npm/applitools/eyes-cypress, pkg:npm/applitools/nml-client, pkg:npm/applitools/tunnel-client, pkg:npm/applitools/utils, pkg:npm/node-forge@1.3.1, pkg:npm/rgbcolor, pkg:npm/jszip@3.10.1
python-dependency-liccheck:
# NOTE: Configuration for liccheck lives in our pyproject.yml.

View File

@@ -104,7 +104,7 @@ jobs:
# Scan for vulnerabilities in built container image after pushes to mainline branch.
- name: Run Trivy container image vulnerabity scan
if: github.event_name == 'push' && github.ref == 'refs/heads/master' && (steps.check.outputs.python || steps.check.outputs.frontend || steps.check.outputs.docker) && matrix.build_preset == 'lean'
uses: aquasecurity/trivy-action@57a97c7e7821a5776cebc9bb87c984fa69cba8f1 # v0.35.0
uses: aquasecurity/trivy-action@b6643a29fecd7f34b3597bc6acb0a98b03d33ff8 # v0.33.1
with:
image-ref: ${{ env.IMAGE_TAG }}
format: 'sarif'

View File

@@ -33,7 +33,7 @@ jobs:
pull-requests: write
steps:
- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@v6
uses: aws-actions/configure-aws-credentials@v5
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

View File

@@ -189,7 +189,7 @@ jobs:
--extra-flags "--build-arg INCLUDE_CHROMIUM=false"
- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@v6
uses: aws-actions/configure-aws-credentials@v5
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
@@ -225,7 +225,7 @@ jobs:
persist-credentials: false
- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@v6
uses: aws-actions/configure-aws-credentials@v5
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

View File

@@ -4,9 +4,6 @@ on:
pull_request:
types: [labeled, unlabeled, opened, reopened, synchronize]
permissions:
pull-requests: read
# cancel previous workflow jobs for PRs
concurrency:
group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.run_id }}

View File

@@ -8,9 +8,6 @@ on:
pull_request:
types: [synchronize, opened, reopened, ready_for_review]
permissions:
contents: read
# cancel previous workflow jobs for PRs
concurrency:
group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.run_id }}
@@ -64,17 +61,11 @@ jobs:
restore-keys: |
pre-commit-v2-${{ runner.os }}-py${{ matrix.python-version }}-
- name: Get changed files
id: changed_files
uses: ./.github/actions/file-changes-action
with:
output: ' '
- name: pre-commit
run: |
set +e # Don't exit immediately on failure
export SKIP=type-checking-frontend
pre-commit run --files ${{ steps.changed_files.outputs.files }}
export SKIP=eslint-frontend,type-checking-frontend
pre-commit run --all-files
PRE_COMMIT_EXIT_CODE=$?
git diff --quiet --exit-code
GIT_DIFF_EXIT_CODE=$?

70
.github/workflows/prefer-typescript.yml vendored Normal file
View File

@@ -0,0 +1,70 @@
name: Prefer TypeScript
on:
push:
branches:
- "master"
- "[0-9].[0-9]*"
paths:
- "superset-frontend/src/**"
pull_request:
types: [synchronize, opened, reopened, ready_for_review]
paths:
- "superset-frontend/src/**"
# cancel previous workflow jobs for PRs
concurrency:
group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.run_id }}
cancel-in-progress: true
jobs:
prefer_typescript:
if: github.ref == 'ref/heads/master' && github.event_name == 'pull_request'
name: Prefer TypeScript
runs-on: ubuntu-24.04
permissions:
contents: read
pull-requests: write
steps:
- name: "Checkout ${{ github.ref }} ( ${{ github.sha }} )"
uses: actions/checkout@v6
with:
persist-credentials: false
submodules: recursive
- name: Get changed files
id: changed
uses: ./.github/actions/file-changes-action
with:
githubToken: ${{ github.token }}
- name: Determine if a .js or .jsx file was added
id: check
run: |
js_files_added() {
jq -r '
map(
select(
endswith(".js") or endswith(".jsx")
)
) | join("\n")
' ${HOME}/files_added.json
}
echo "js_files_added=$(js_files_added)" >> $GITHUB_OUTPUT
- if: steps.check.outputs.js_files_added
name: Add Comment to PR
uses: ./.github/actions/comment-on-pr
continue-on-error: true
env:
GITHUB_TOKEN: ${{ github.token }}
with:
msg: |
### WARNING: Prefer TypeScript
Looks like your PR contains new `.js` or `.jsx` files:
```
${{steps.check.outputs.js_files_added}}
```
As decided in [SIP-36](https://github.com/apache/superset/issues/9101), all new frontend code should be written in TypeScript. Please convert above files to TypeScript then re-request review.

View File

@@ -23,7 +23,7 @@ jobs:
SUPERSET__SQLALCHEMY_DATABASE_URI: postgresql+psycopg2://superset:superset@127.0.0.1:15432/superset
services:
postgres:
image: postgres:17-alpine
image: postgres:16-alpine
env:
POSTGRES_USER: superset
POSTGRES_PASSWORD: superset

View File

@@ -0,0 +1,91 @@
name: Applitools Cypress
on:
schedule:
- cron: "0 1 * * *"
jobs:
config:
runs-on: ubuntu-24.04
outputs:
has-secrets: ${{ steps.check.outputs.has-secrets }}
steps:
- name: "Check for secrets"
id: check
shell: bash
run: |
if [ -n "${{ (secrets.APPLITOOLS_API_KEY != '' && secrets.APPLITOOLS_API_KEY != '') || '' }}" ]; then
echo "has-secrets=1" >> "$GITHUB_OUTPUT"
fi
cypress-applitools:
needs: config
if: needs.config.outputs.has-secrets
runs-on: ubuntu-24.04
strategy:
fail-fast: false
matrix:
browser: ["chrome"]
env:
SUPERSET_ENV: development
SUPERSET_CONFIG: tests.integration_tests.superset_test_config
SUPERSET__SQLALCHEMY_DATABASE_URI: postgresql+psycopg2://superset:superset@127.0.0.1:15432/superset
PYTHONPATH: ${{ github.workspace }}
REDIS_PORT: 16379
GITHUB_TOKEN: ${{ github.token }}
APPLITOOLS_APP_NAME: Superset
APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
APPLITOOLS_BATCH_ID: ${{ github.sha }}
APPLITOOLS_BATCH_NAME: Superset Cypress
services:
postgres:
image: postgres:16-alpine
env:
POSTGRES_USER: superset
POSTGRES_PASSWORD: superset
ports:
- 15432:5432
redis:
image: redis:7-alpine
ports:
- 16379:6379
steps:
- name: "Checkout ${{ github.ref }} ( ${{ github.sha }} )"
uses: actions/checkout@v6
with:
persist-credentials: false
submodules: recursive
ref: master
- name: Setup Python
uses: ./.github/actions/setup-backend/
- name: Import test data
uses: ./.github/actions/cached-dependencies
with:
run: testdata
- name: Setup Node.js
uses: actions/setup-node@v6
with:
node-version-file: './superset-frontend/.nvmrc'
- name: Install npm dependencies
uses: ./.github/actions/cached-dependencies
with:
run: npm-install
- name: Build javascript packages
uses: ./.github/actions/cached-dependencies
with:
run: build-instrumented-assets
- name: Setup Postgres
if: steps.check.outcome == 'failure'
uses: ./.github/actions/cached-dependencies
with:
run: setup-postgres
- name: Install cypress
uses: ./.github/actions/cached-dependencies
with:
run: cypress-install
- name: Run Cypress
uses: ./.github/actions/cached-dependencies
env:
CYPRESS_BROWSER: ${{ matrix.browser }}
with:
run: cypress-run-applitools

View File

@@ -0,0 +1,52 @@
name: Applitools Storybook
on:
schedule:
- cron: "0 0 * * *"
env:
APPLITOOLS_APP_NAME: Superset
APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
APPLITOOLS_BATCH_ID: ${{ github.sha }}
APPLITOOLS_BATCH_NAME: Superset Storybook
jobs:
config:
runs-on: ubuntu-24.04
outputs:
has-secrets: ${{ steps.check.outputs.has-secrets }}
steps:
- name: "Check for secrets"
id: check
shell: bash
run: |
if [ -n "${{ (secrets.APPLITOOLS_API_KEY != '' && secrets.APPLITOOLS_API_KEY != '') || '' }}" ]; then
echo "has-secrets=1" >> "$GITHUB_OUTPUT"
fi
cron:
needs: config
if: needs.config.outputs.has-secrets
runs-on: ubuntu-24.04
steps:
- name: "Checkout ${{ github.ref }} ( ${{ github.sha }} )"
uses: actions/checkout@v6
with:
persist-credentials: false
submodules: recursive
ref: master
- name: Set up Node.js
uses: actions/setup-node@v6
with:
node-version-file: './superset-frontend/.nvmrc'
- name: Install eyes-storybook dependencies
uses: ./.github/actions/cached-dependencies
with:
run: eyes-storybook-dependencies
- name: Install NPM dependencies
uses: ./.github/actions/cached-dependencies
with:
run: npm-install
- name: Run Applitools Eyes-Storybook
working-directory: ./superset-frontend
run: npx eyes-storybook -u https://superset-storybook.netlify.app/

View File

@@ -1,13 +1,6 @@
name: Docs Deployment
on:
# Deploy after integration tests complete on master
workflow_run:
workflows: ["Python-Integration"]
types: [completed]
branches: [master]
# Also allow manual trigger and direct pushes to docs
push:
paths:
- "docs/**"
@@ -37,10 +30,9 @@ jobs:
name: Build & Deploy
runs-on: ubuntu-24.04
steps:
- name: "Checkout ${{ github.event.workflow_run.head_sha || github.sha }}"
- name: "Checkout ${{ github.ref }} ( ${{ github.sha }} )"
uses: actions/checkout@v6
with:
ref: ${{ github.event.workflow_run.head_sha || github.sha }}
persist-credentials: false
submodules: recursive
- name: Set up Node.js
@@ -66,35 +58,6 @@ jobs:
working-directory: docs
run: |
yarn install --check-cache
- name: Download database diagnostics (if triggered by integration tests)
if: github.event_name == 'workflow_run' && github.event.workflow_run.conclusion == 'success'
uses: dawidd6/action-download-artifact@v16
continue-on-error: true
with:
workflow: superset-python-integrationtest.yml
run_id: ${{ github.event.workflow_run.id }}
name: database-diagnostics
path: docs/src/data/
- name: Try to download latest diagnostics (for push/dispatch triggers)
if: github.event_name != 'workflow_run'
uses: dawidd6/action-download-artifact@v16
continue-on-error: true
with:
workflow: superset-python-integrationtest.yml
name: database-diagnostics
path: docs/src/data/
branch: master
search_artifacts: true
if_no_artifact_found: warn
- name: Use diagnostics artifact if available
working-directory: docs
run: |
if [ -f "src/data/databases-diagnostics.json" ]; then
echo "Using fresh diagnostics from integration tests"
mv src/data/databases-diagnostics.json src/data/databases.json
else
echo "Using committed databases.json (no artifact found)"
fi
- name: yarn build
working-directory: docs
run: |
@@ -108,5 +71,5 @@ jobs:
destination-github-username: "apache"
destination-repository-name: "superset-site"
target-branch: "asf-site"
commit-message: "deploying docs: ${{ github.event.head_commit.message || 'triggered by integration tests' }} (apache/superset@${{ github.event.workflow_run.head_sha || github.sha }})"
commit-message: "deploying docs: ${{ github.event.head_commit.message }} (apache/superset@${{ github.sha }})"
user-email: dev@superset.apache.org

View File

@@ -4,23 +4,17 @@ on:
pull_request:
paths:
- "docs/**"
- "superset/db_engine_specs/**"
- ".github/workflows/superset-docs-verify.yml"
types: [synchronize, opened, reopened, ready_for_review]
workflow_run:
workflows: ["Python-Integration"]
types: [completed]
# cancel previous workflow jobs for PRs
concurrency:
group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.event.workflow_run.head_sha || github.run_id }}
group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.run_id }}
cancel-in-progress: true
jobs:
linkinator:
# See docs here: https://github.com/marketplace/actions/linkinator
# Only run on pull_request, not workflow_run
if: github.event_name == 'pull_request'
name: Link Checking
runs-on: ubuntu-latest
steps:
@@ -56,11 +50,8 @@ jobs:
https://timbr.ai/,
https://opensource.org/license/apache-2-0,
https://www.plaidcloud.com/
build-on-pr:
# Build docs when PR changes docs/** (uses committed databases.json)
if: github.event_name == 'pull_request'
name: Build (PR trigger)
build-deploy:
name: Build & Deploy
runs-on: ubuntu-24.04
defaults:
run:
@@ -84,50 +75,3 @@ jobs:
- name: yarn build
run: |
yarn build
build-after-tests:
# Build docs after integration tests complete (uses fresh diagnostics)
# Only runs if integration tests succeeded
if: >
github.event_name == 'workflow_run' &&
github.event.workflow_run.conclusion == 'success'
name: Build (after integration tests)
runs-on: ubuntu-24.04
defaults:
run:
working-directory: docs
steps:
- name: "Checkout PR head: ${{ github.event.workflow_run.head_sha }}"
uses: actions/checkout@v6
with:
ref: ${{ github.event.workflow_run.head_sha }}
persist-credentials: false
submodules: recursive
- name: Set up Node.js
uses: actions/setup-node@v6
with:
node-version-file: './docs/.nvmrc'
- name: yarn install
run: |
yarn install --check-cache
- name: Download database diagnostics from integration tests
uses: dawidd6/action-download-artifact@v16
with:
workflow: superset-python-integrationtest.yml
run_id: ${{ github.event.workflow_run.id }}
name: database-diagnostics
path: docs/src/data/
- name: Use fresh diagnostics
run: |
if [ -f "src/data/databases-diagnostics.json" ]; then
echo "Using fresh diagnostics from integration tests"
mv src/data/databases-diagnostics.json src/data/databases.json
else
echo "Warning: No diagnostics artifact found, using committed data"
fi
- name: yarn typecheck
run: |
yarn typecheck
- name: yarn build
run: |
yarn build

View File

@@ -54,7 +54,7 @@ jobs:
USE_DASHBOARD: ${{ github.event.inputs.use_dashboard == 'true' || 'false' }}
services:
postgres:
image: postgres:17-alpine
image: postgres:16-alpine
env:
POSTGRES_USER: superset
POSTGRES_PASSWORD: superset
@@ -146,7 +146,7 @@ jobs:
SAFE_APP_ROOT=${APP_ROOT//\//_}
echo "safe_app_root=$SAFE_APP_ROOT" >> $GITHUB_OUTPUT
- name: Upload Artifacts
uses: actions/upload-artifact@v7
uses: actions/upload-artifact@v6
if: failure()
with:
path: ${{ github.workspace }}/superset-frontend/cypress-base/cypress/screenshots
@@ -171,7 +171,7 @@ jobs:
GITHUB_TOKEN: ${{ github.token }}
services:
postgres:
image: postgres:17-alpine
image: postgres:16-alpine
env:
POSTGRES_USER: superset
POSTGRES_PASSWORD: superset
@@ -259,7 +259,7 @@ jobs:
SAFE_APP_ROOT=${APP_ROOT//\//_}
echo "safe_app_root=$SAFE_APP_ROOT" >> $GITHUB_OUTPUT
- name: Upload Playwright Artifacts
uses: actions/upload-artifact@v7
uses: actions/upload-artifact@v6
if: failure()
with:
path: |

View File

@@ -58,7 +58,7 @@ jobs:
- name: Upload HTML coverage report
if: steps.check.outputs.superset-extensions-cli
uses: actions/upload-artifact@v7
uses: actions/upload-artifact@v6
with:
name: superset-extensions-cli-coverage-html
path: htmlcov/

View File

@@ -58,7 +58,7 @@ jobs:
- name: Upload Docker Image Artifact
if: steps.check.outputs.frontend
uses: actions/upload-artifact@v7
uses: actions/upload-artifact@v6
with:
name: docker-image
path: docker-image.tar.gz
@@ -73,7 +73,7 @@ jobs:
runs-on: ubuntu-24.04
steps:
- name: Download Docker Image Artifact
uses: actions/download-artifact@v8
uses: actions/download-artifact@v7
with:
name: docker-image
@@ -87,10 +87,10 @@ jobs:
-v ${{ github.workspace }}/superset-frontend/coverage:/app/superset-frontend/coverage \
--rm $TAG \
bash -c \
"npm run test -- --coverage --shard=${{ matrix.shard }}/8 --coverageReporters=json"
"npm run test -- --coverage --shard=${{ matrix.shard }}/8 --coverageReporters=json-summary"
- name: Upload Coverage Artifact
uses: actions/upload-artifact@v7
uses: actions/upload-artifact@v6
with:
name: coverage-artifacts-${{ matrix.shard }}
path: superset-frontend/coverage
@@ -99,29 +99,15 @@ jobs:
needs: [sharded-jest-tests]
if: needs.frontend-build.outputs.should-run == 'true'
runs-on: ubuntu-24.04
permissions:
id-token: write
steps:
- name: Checkout Code
uses: actions/checkout@v6
with:
persist-credentials: false
fetch-depth: 0
ref: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.sha || github.sha }}
- name: Download Coverage Artifacts
uses: actions/download-artifact@v8
uses: actions/download-artifact@v7
with:
pattern: coverage-artifacts-*
path: coverage/
- name: Reorganize test result reports
run: |
find coverage/
for i in {1..8}; do
mv coverage/coverage-artifacts-${i}/coverage-final.json coverage/coverage-shard-${i}.json
done
shell: bash
- name: Show Files
run: find coverage/
- name: Merge Code Coverage
run: npx nyc merge coverage/ merged-output/coverage-summary.json
@@ -130,9 +116,8 @@ jobs:
uses: codecov/codecov-action@v5
with:
flags: javascript
use_oidc: true
token: ${{ secrets.CODECOV_TOKEN }}
verbose: true
disable_search: true
files: merged-output/coverage-summary.json
slug: apache/superset
@@ -142,7 +127,7 @@ jobs:
runs-on: ubuntu-24.04
steps:
- name: Download Docker Image Artifact
uses: actions/download-artifact@v8
uses: actions/download-artifact@v7
with:
name: docker-image
@@ -166,7 +151,7 @@ jobs:
runs-on: ubuntu-24.04
steps:
- name: Download Docker Image Artifact
uses: actions/download-artifact@v8
uses: actions/download-artifact@v7
with:
name: docker-image
@@ -178,13 +163,18 @@ jobs:
docker run --rm $TAG bash -c \
"npm run plugins:build"
- name: Build Plugins Storybook
run: |
docker run --rm $TAG bash -c \
"npm run plugins:build-storybook"
test-storybook:
needs: frontend-build
if: needs.frontend-build.outputs.should-run == 'true'
runs-on: ubuntu-24.04
steps:
- name: Download Docker Image Artifact
uses: actions/download-artifact@v8
uses: actions/download-artifact@v7
with:
name: docker-image

View File

@@ -45,7 +45,7 @@ jobs:
GITHUB_TOKEN: ${{ github.token }}
services:
postgres:
image: postgres:17-alpine
image: postgres:16-alpine
env:
POSTGRES_USER: superset
POSTGRES_PASSWORD: superset
@@ -133,7 +133,7 @@ jobs:
SAFE_APP_ROOT=${APP_ROOT//\//_}
echo "safe_app_root=$SAFE_APP_ROOT" >> $GITHUB_OUTPUT
- name: Upload Playwright Artifacts
uses: actions/upload-artifact@v7
uses: actions/upload-artifact@v6
if: failure()
with:
path: |

View File

@@ -73,36 +73,6 @@ jobs:
flags: python,mysql
token: ${{ secrets.CODECOV_TOKEN }}
verbose: true
- name: Generate database diagnostics for docs
if: steps.check.outputs.python
env:
SUPERSET_CONFIG: tests.integration_tests.superset_test_config
SUPERSET__SQLALCHEMY_DATABASE_URI: |
mysql+mysqldb://superset:superset@127.0.0.1:13306/superset?charset=utf8mb4&binary_prefix=true
run: |
python -c "
import json
from superset.app import create_app
from superset.db_engine_specs.lib import generate_yaml_docs
app = create_app()
with app.app_context():
docs = generate_yaml_docs()
# Wrap in the expected format
output = {
'generated': '$(date -Iseconds)',
'databases': docs
}
with open('databases-diagnostics.json', 'w') as f:
json.dump(output, f, indent=2, default=str)
print(f'Generated diagnostics for {len(docs)} databases')
"
- name: Upload database diagnostics artifact
if: steps.check.outputs.python
uses: actions/upload-artifact@v7
with:
name: database-diagnostics
path: databases-diagnostics.json
retention-days: 7
test-postgres:
runs-on: ubuntu-24.04
strategy:
@@ -115,7 +85,7 @@ jobs:
SUPERSET__SQLALCHEMY_DATABASE_URI: postgresql+psycopg2://superset:superset@127.0.0.1:15432/superset
services:
postgres:
image: postgres:17-alpine
image: postgres:16-alpine
env:
POSTGRES_USER: superset
POSTGRES_PASSWORD: superset

View File

@@ -25,7 +25,7 @@ jobs:
SUPERSET__SQLALCHEMY_EXAMPLES_URI: presto://localhost:15433/memory/default
services:
postgres:
image: postgres:17-alpine
image: postgres:16-alpine
env:
POSTGRES_USER: superset
POSTGRES_PASSWORD: superset
@@ -94,7 +94,7 @@ jobs:
UPLOAD_FOLDER: /tmp/.superset/uploads/
services:
postgres:
image: postgres:17-alpine
image: postgres:16-alpine
env:
POSTGRES_USER: superset
POSTGRES_PASSWORD: superset

View File

@@ -52,7 +52,6 @@ jobs:
SUPERSET_SECRET_KEY: not-a-secret
run: |
pytest --durations-min=0.5 --cov=superset/sql/ ./tests/unit_tests/sql/ --cache-clear --cov-fail-under=100
pytest --durations-min=0.5 --cov=superset/semantic_layers/ ./tests/unit_tests/semantic_layers/ --cache-clear --cov-fail-under=100
- name: Upload code coverage
uses: codecov/codecov-action@v5
with:

View File

@@ -6,9 +6,6 @@ on:
- master
- "[0-9].[0-9]*"
permissions:
contents: read
jobs:
config:
runs-on: ubuntu-24.04

8
.gitignore vendored
View File

@@ -61,18 +61,21 @@ tmp
rat-results.txt
superset/app/
superset-websocket/config.json
.direnv
# Node.js, webpack artifacts, storybook
*.entry.js
*.js.map
node_modules
npm-debug.log*
superset/static/*
superset/static/assets/*
!superset/static/assets/.gitkeep
superset/static/uploads/*
!superset/static/uploads/.gitkeep
superset/static/version_info.json
superset-frontend/**/esm/*
superset-frontend/**/lib/*
superset-frontend/**/storybook-static/*
superset-frontend/migration-storybook.log
yarn-error.log
*.map
*.min.js
@@ -136,4 +139,3 @@ PROJECT.md
.env.local
oxc-custom-build/
*.code-workspace
*.duckdb

View File

@@ -27,7 +27,6 @@ repos:
args: [--check-untyped-defs]
exclude: ^superset-extensions-cli/
additional_dependencies: [
types-cachetools,
types-simplejson,
types-python-dateutil,
types-requests,
@@ -50,7 +49,7 @@ repos:
hooks:
- id: check-docstring-first
- id: check-added-large-files
exclude: ^.*\.(geojson)$|^docs/static/img/screenshots/.*|^superset-frontend/CHANGELOG\.md$|^superset/examples/.*/data\.parquet$
exclude: ^.*\.(geojson)$|^docs/static/img/screenshots/.*|^superset-frontend/CHANGELOG\.md$
- id: check-yaml
exclude: ^helm/superset/templates/
- id: debug-statements
@@ -83,7 +82,7 @@ repos:
files: ^superset-frontend/.*\.(js|jsx|ts|tsx)$
- id: eslint-docs
name: eslint (docs)
entry: bash -c 'cd docs && FILES=$(printf "%s\n" "$@" | sed "s|^docs/||" | tr "\n" " ") && yarn eslint --fix --quiet $FILES'
entry: bash -c 'cd docs && FILES=$(echo "$@" | sed "s|docs/||g") && yarn eslint --fix --quiet $FILES'
language: system
pass_filenames: true
files: ^docs/.*\.(js|jsx|ts|tsx)$
@@ -143,18 +142,3 @@ repos:
else
echo "No Python files to lint."
fi
- id: db-engine-spec-metadata
name: database engine spec metadata validation
entry: python superset/db_engine_specs/lint_metadata.py --strict
language: system
files: ^superset/db_engine_specs/.*\.py$
exclude: ^superset/db_engine_specs/(base|lib|lint_metadata|__init__)\.py$
pass_filenames: false
- repo: local
hooks:
- id: feature-flags-sync
name: feature flags documentation sync
entry: bash -c 'python scripts/extract_feature_flags.py > docs/static/feature-flags.json.tmp && if ! diff -q docs/static/feature-flags.json docs/static/feature-flags.json.tmp > /dev/null 2>&1; then mv docs/static/feature-flags.json.tmp docs/static/feature-flags.json && echo "Updated docs/static/feature-flags.json" && exit 1; else rm docs/static/feature-flags.json.tmp; fi'
language: system
files: ^superset/config\.py$
pass_filenames: false

View File

@@ -67,15 +67,22 @@ temporary_superset_ui/*
# skip license checks for auto-generated test snapshots
.*snap
# docs third-party logos (database logos, org logos, etc.)
databases/*
# docs overrides for third party logos we don't have the rights to
google-big-query.svg
google-sheets.svg
ibm-db2.svg
postgresql.svg
snowflake.svg
ydb.svg
loading.svg
# docs third-party logos, i.e. docs/static/img/logos/*
logos/*
# docs-related
erd.puml
erd.svg
intro_header.txt
TODO.md
# for LLMs
llm-context.md

View File

@@ -2,27 +2,6 @@
Apache Superset is a data visualization platform with Flask/Python backend and React/TypeScript frontend.
## ⚠️ CRITICAL: Always Run Pre-commit Before Pushing
**ALWAYS run `pre-commit run --all-files` before pushing commits.** CI will fail if pre-commit checks don't pass. This is non-negotiable.
```bash
# Stage your changes first
git add .
# Run pre-commit on all files
pre-commit run --all-files
# If there are auto-fixes, stage them and commit
git add .
git commit --amend # or new commit
```
Common pre-commit failures:
- **Formatting** - black, prettier, eslint will auto-fix
- **Type errors** - mypy failures need manual fixes
- **Linting** - ruff, pylint issues need manual fixes
## ⚠️ CRITICAL: Ongoing Refactors (What NOT to Do)
**These migrations are actively happening - avoid deprecated patterns:**
@@ -101,30 +80,6 @@ superset/
- **UPDATING.md**: Add breaking changes here
- **Docstrings**: Required for new functions/classes
## Developer Portal: Storybook-to-MDX Documentation
The Developer Portal auto-generates MDX documentation from Storybook stories. **Stories are the single source of truth.**
### Core Philosophy
- **Fix issues in the STORY, not the generator** - When something doesn't render correctly, update the story file first
- **Generator should be lightweight** - It extracts and passes through data; avoid special cases
- **Stories define everything** - Props, controls, galleries, examples all come from story metadata
### Story Requirements for Docs Generation
- Use `export default { title: '...' }` (inline), not `const meta = ...; export default meta;`
- Name interactive stories `Interactive${ComponentName}` (e.g., `InteractiveButton`)
- Define `args` for default prop values
- Define `argTypes` at the story level (not meta level) with control types and descriptions
- Use `parameters.docs.gallery` for size×style variant grids
- Use `parameters.docs.sampleChildren` for components that need children
- Use `parameters.docs.liveExample` for custom live code blocks
- Use `parameters.docs.staticProps` for complex object props that can't be parsed inline
### Generator Location
- Script: `docs/scripts/generate-superset-components.mjs`
- Wrapper: `docs/src/components/StorybookWrapper.jsx`
- Output: `docs/developer_portal/components/`
## Architecture Patterns
### Security & Features

View File

@@ -26,6 +26,9 @@ ARG BUILDPLATFORM=${BUILDPLATFORM:-amd64}
# Include translations in the final build
ARG BUILD_TRANSLATIONS="false"
# Build arg to pre-populate examples DuckDB file
ARG LOAD_EXAMPLES_DUCKDB="false"
######################################################################
# superset-node-ci used as a base for building frontend assets and CI
######################################################################
@@ -143,6 +146,9 @@ RUN if [ "${BUILD_TRANSLATIONS}" = "true" ]; then \
######################################################################
FROM python-base AS python-common
# Re-declare build arg to receive it in this stage
ARG LOAD_EXAMPLES_DUCKDB
ENV SUPERSET_HOME="/app/superset_home" \
HOME="/app/superset_home" \
SUPERSET_ENV="production" \
@@ -196,9 +202,17 @@ RUN /app/docker/apt-install.sh \
libecpg-dev \
libldap2-dev
# Create data directory for DuckDB examples database
# The database file will be created at runtime when examples are loaded from Parquet files
RUN mkdir -p /app/data && chown -R superset:superset /app/data
# Pre-load examples DuckDB file if requested
RUN if [ "$LOAD_EXAMPLES_DUCKDB" = "true" ]; then \
mkdir -p /app/data && \
echo "Downloading pre-built examples.duckdb..." && \
curl -L -o /app/data/examples.duckdb \
"https://raw.githubusercontent.com/apache-superset/examples-data/master/examples.duckdb" && \
chown -R superset:superset /app/data; \
else \
mkdir -p /app/data && \
chown -R superset:superset /app/data; \
fi
# Copy compiled things from previous stages
COPY --from=superset-node /app/superset/static/assets superset/static/assets

View File

@@ -16,20 +16,8 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Installing Apache Superset
# INSTALL / BUILD instructions for Apache Superset
For comprehensive installation instructions, please see the Apache Superset documentation:
**[📚 Installation Guide →](https://superset.apache.org/docs/installation/installation-methods)**
The documentation covers:
- [Docker Compose](https://superset.apache.org/docs/installation/docker-compose) (recommended for development)
- [Kubernetes / Helm](https://superset.apache.org/docs/installation/kubernetes)
- [PyPI](https://superset.apache.org/docs/installation/pypi)
- [Docker Builds](https://superset.apache.org/docs/installation/docker-builds)
- [Architecture Overview](https://superset.apache.org/docs/installation/architecture)
## Building from Source
For building from a source release tarball, see the Dockerfile at:
`RELEASING/Dockerfile.from_local_tarball`
At this time, the docker file at RELEASING/Dockerfile.from_local_tarball
constitutes the recipe on how to get to a working release from a source
release tarball.

121
LINTING_ARCHITECTURE.md Normal file
View File

@@ -0,0 +1,121 @@
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Superset Frontend Linting Architecture
## Overview
We use a hybrid linting approach combining OXC (fast, standard rules) with custom AST-based checks for Superset-specific patterns.
## Components
### 1. Primary Linter: OXC
- **What**: Oxidation Compiler's linter (oxlint)
- **Handles**: 95% of linting rules (standard ESLint rules, TypeScript, React, etc.)
- **Speed**: ~50-100x faster than ESLint
- **Config**: `oxlint.json`
### 2. Custom Rule Checker
- **What**: Node.js AST-based script
- **Handles**: Superset-specific rules:
- No literal colors (use theme)
- No FontAwesome icons (use Icons component)
- No template vars in i18n
- **Speed**: Fast enough for pre-commit
- **Script**: `scripts/check-custom-rules.js`
## Developer Workflow
### Local Development
```bash
# Fast linting (OXC only)
npm run lint
# Full linting (OXC + custom rules)
npm run lint:full
# Auto-fix what's possible
npm run lint-fix
```
### Pre-commit
1. OXC runs first (via `scripts/oxlint.sh`)
2. Custom rules check runs second (lightweight, AST-based)
3. Both must pass for commit to succeed
### CI Pipeline
```yaml
- name: Lint with OXC
run: npm run lint
- name: Check custom rules
run: npm run check:custom-rules
```
## Why This Architecture?
### ✅ Pros
1. **No binary distribution issues** - ASF compatible
2. **Fast performance** - OXC for bulk, lightweight script for custom
3. **Maintainable** - Custom rules in JavaScript, not Rust
4. **Flexible** - Can evolve as OXC adds plugin support
5. **Cacheable** - Both OXC and Node.js are standard tools
### ❌ Cons
1. **Two tools** - Slightly more complex than single linter
2. **Duplicate parsing** - Files parsed twice (once by each tool)
### 🔄 Migration Path
When OXC supports JavaScript plugins:
1. Convert `check-custom-rules.js` to OXC plugin format
2. Consolidate back to single tool
3. Keep same rules and developer experience
## Implementation Checklist
- [x] OXC for standard linting
- [x] Pre-commit integration
- [ ] Custom rules script
- [ ] Combine in npm scripts
- [ ] Update CI pipeline
- [ ] Developer documentation
## Performance Targets
| Operation | Target Time | Current |
|-----------|------------|---------|
| Pre-commit (changed files) | <2s | ✅ 1.5s |
| Full lint (all files) | <10s | ✅ 8s |
| Custom rules check | <5s | 🔄 TBD |
## Caching Strategy
### Local Development
- OXC: Built-in incremental checking
- Custom rules: Use file hash cache (similar to pytest cache)
### CI
- Cache `node_modules` (includes oxlint binary)
- Cache custom rules results by commit hash
- Skip unchanged files using git diff
## Future Improvements
1. **When OXC adds plugin support**: Migrate custom rules to OXC plugins
2. **Consider Biome**: Another Rust-based linter with plugin support
3. **AST sharing**: Investigate sharing AST between tools to avoid double parsing

118
README.md
View File

@@ -48,16 +48,12 @@ under the License.
A modern, enterprise-ready business intelligence web application.
### Documentation
- **[User Guide](https://superset.apache.org/user-docs/)** — For analysts and business users. Explore data, build charts, create dashboards, and connect databases.
- **[Administrator Guide](https://superset.apache.org/admin-docs/)** — Install, configure, and operate Superset. Covers security, scaling, and database drivers.
- **[Developer Guide](https://superset.apache.org/developer-docs/)** — Contribute to Superset or build on its REST API and extension framework.
[**Why Superset?**](#why-superset) |
[**Supported Databases**](#supported-databases) |
[**Installation and Configuration**](#installation-and-configuration) |
[**Release Notes**](https://github.com/apache/superset/blob/master/RELEASING/README.md#release-notes-for-recent-releases) |
[**Get Involved**](#get-involved) |
[**Contributor Guide**](#contributor-guide) |
[**Resources**](#resources) |
[**Organizations Using Superset**](https://superset.apache.org/inTheWild)
@@ -93,7 +89,7 @@ Superset provides:
**Craft Beautiful, Dynamic Dashboards**
<kbd><img title="View Dashboards" src="https://superset.apache.org/img/screenshots/dashboard.jpg"/></kbd><br/>
<kbd><img title="View Dashboards" src="https://superset.apache.org/img/screenshots/slack_dash.jpg"/></kbd><br/>
**No-Code Chart Builder**
@@ -105,77 +101,51 @@ Superset provides:
## Supported Databases
Superset can query data from any SQL-speaking datastore or data engine (Presto, Trino, Athena, [and more](https://superset.apache.org/docs/databases)) that has a Python DB-API driver and a SQLAlchemy dialect.
Superset can query data from any SQL-speaking datastore or data engine (Presto, Trino, Athena, [and more](https://superset.apache.org/docs/configuration/databases)) that has a Python DB-API driver and a SQLAlchemy dialect.
Here are some of the major database solutions that are supported:
<!-- SUPPORTED_DATABASES_START -->
<p align="center">
<a href="https://superset.apache.org/docs/databases/supported/amazon-athena" title="Amazon Athena"><img src="docs/static/img/databases/amazon-athena.jpg" alt="Amazon Athena" width="76" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/amazon-dynamodb" title="Amazon DynamoDB"><img src="docs/static/img/databases/aws.png" alt="Amazon DynamoDB" width="40" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/amazon-redshift" title="Amazon Redshift"><img src="docs/static/img/databases/redshift.png" alt="Amazon Redshift" width="100" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/apache-doris" title="Apache Doris"><img src="docs/static/img/databases/doris.png" alt="Apache Doris" width="103" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/apache-drill" title="Apache Drill"><img src="docs/static/img/databases/apache-drill.png" alt="Apache Drill" width="81" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/apache-druid" title="Apache Druid"><img src="docs/static/img/databases/druid.png" alt="Apache Druid" width="117" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/apache-hive" title="Apache Hive"><img src="docs/static/img/databases/apache-hive.svg" alt="Apache Hive" width="44" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/apache-impala" title="Apache Impala"><img src="docs/static/img/databases/apache-impala.png" alt="Apache Impala" width="21" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/apache-kylin" title="Apache Kylin"><img src="docs/static/img/databases/apache-kylin.png" alt="Apache Kylin" width="44" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/apache-pinot" title="Apache Pinot"><img src="docs/static/img/databases/apache-pinot.svg" alt="Apache Pinot" width="76" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/apache-solr" title="Apache Solr"><img src="docs/static/img/databases/apache-solr.png" alt="Apache Solr" width="79" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/apache-spark-sql" title="Apache Spark SQL"><img src="docs/static/img/databases/apache-spark.png" alt="Apache Spark SQL" width="75" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/ascend" title="Ascend"><img src="docs/static/img/databases/ascend.webp" alt="Ascend" width="117" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/aurora-mysql-data-api" title="Aurora MySQL (Data API)"><img src="docs/static/img/databases/mysql.png" alt="Aurora MySQL (Data API)" width="77" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/aurora-postgresql-data-api" title="Aurora PostgreSQL (Data API)"><img src="docs/static/img/databases/postgresql.svg" alt="Aurora PostgreSQL (Data API)" width="76" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/azure-data-explorer" title="Azure Data Explorer"><img src="docs/static/img/databases/kusto.png" alt="Azure Data Explorer" width="40" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/azure-synapse" title="Azure Synapse"><img src="docs/static/img/databases/azure.svg" alt="Azure Synapse" width="40" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/clickhouse" title="ClickHouse"><img src="docs/static/img/databases/clickhouse.png" alt="ClickHouse" width="150" height="37" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/cloudflare-d1" title="Cloudflare D1"><img src="docs/static/img/databases/cloudflare.png" alt="Cloudflare D1" width="40" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/cockroachdb" title="CockroachDB"><img src="docs/static/img/databases/cockroachdb.png" alt="CockroachDB" width="150" height="24" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/couchbase" title="Couchbase"><img src="docs/static/img/databases/couchbase.svg" alt="Couchbase" width="150" height="35" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/cratedb" title="CrateDB"><img src="docs/static/img/databases/cratedb.svg" alt="CrateDB" width="180" height="24" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/databend" title="Databend"><img src="docs/static/img/databases/databend.png" alt="Databend" width="100" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/databricks" title="Databricks"><img src="docs/static/img/databases/databricks.png" alt="Databricks" width="152" height="24" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/denodo" title="Denodo"><img src="docs/static/img/databases/denodo.png" alt="Denodo" width="138" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/dremio" title="Dremio"><img src="docs/static/img/databases/dremio.png" alt="Dremio" width="126" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/duckdb" title="DuckDB"><img src="docs/static/img/databases/duckdb.png" alt="DuckDB" width="52" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/elasticsearch" title="Elasticsearch"><img src="docs/static/img/databases/elasticsearch.png" alt="Elasticsearch" width="40" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/exasol" title="Exasol"><img src="docs/static/img/databases/exasol.png" alt="Exasol" width="72" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/firebird" title="Firebird"><img src="docs/static/img/databases/firebird.png" alt="Firebird" width="100" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/firebolt" title="Firebolt"><img src="docs/static/img/databases/firebolt.png" alt="Firebolt" width="100" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/google-bigquery" title="Google BigQuery"><img src="docs/static/img/databases/google-big-query.svg" alt="Google BigQuery" width="76" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/google-sheets" title="Google Sheets"><img src="docs/static/img/databases/google-sheets.svg" alt="Google Sheets" width="76" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/greenplum" title="Greenplum"><img src="docs/static/img/databases/greenplum.png" alt="Greenplum" width="124" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/hologres" title="Hologres"><img src="docs/static/img/databases/hologres.png" alt="Hologres" width="44" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/ibm-db2" title="IBM Db2"><img src="docs/static/img/databases/ibm-db2.svg" alt="IBM Db2" width="91" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/ibm-netezza-performance-server" title="IBM Netezza Performance Server"><img src="docs/static/img/databases/netezza.png" alt="IBM Netezza Performance Server" width="40" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/mariadb" title="MariaDB"><img src="docs/static/img/databases/mariadb.png" alt="MariaDB" width="150" height="37" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/microsoft-sql-server" title="Microsoft SQL Server"><img src="docs/static/img/databases/msql.png" alt="Microsoft SQL Server" width="50" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/monetdb" title="MonetDB"><img src="docs/static/img/databases/monet-db.png" alt="MonetDB" width="100" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/mongodb" title="MongoDB"><img src="docs/static/img/databases/mongodb.png" alt="MongoDB" width="150" height="38" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/motherduck" title="MotherDuck"><img src="docs/static/img/databases/motherduck.png" alt="MotherDuck" width="40" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/oceanbase" title="OceanBase"><img src="docs/static/img/databases/oceanbase.svg" alt="OceanBase" width="175" height="24" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/oracle" title="Oracle"><img src="docs/static/img/databases/oraclelogo.png" alt="Oracle" width="111" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/presto" title="Presto"><img src="docs/static/img/databases/presto-og.png" alt="Presto" width="127" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/risingwave" title="RisingWave"><img src="docs/static/img/databases/risingwave.svg" alt="RisingWave" width="147" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/sap-hana" title="SAP HANA"><img src="docs/static/img/databases/sap-hana.png" alt="SAP HANA" width="137" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/sap-sybase" title="SAP Sybase"><img src="docs/static/img/databases/sybase.png" alt="SAP Sybase" width="100" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/shillelagh" title="Shillelagh"><img src="docs/static/img/databases/shillelagh.png" alt="Shillelagh" width="40" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/singlestore" title="SingleStore"><img src="docs/static/img/databases/singlestore.png" alt="SingleStore" width="150" height="31" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/snowflake" title="Snowflake"><img src="docs/static/img/databases/snowflake.svg" alt="Snowflake" width="76" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/sqlite" title="SQLite"><img src="docs/static/img/databases/sqlite.png" alt="SQLite" width="84" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/starrocks" title="StarRocks"><img src="docs/static/img/databases/starrocks.png" alt="StarRocks" width="149" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/superset-meta-database" title="Superset meta database"><img src="docs/static/img/databases/superset.svg" alt="Superset meta database" width="150" height="39" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/tdengine" title="TDengine"><img src="docs/static/img/databases/tdengine.png" alt="TDengine" width="140" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/teradata" title="Teradata"><img src="docs/static/img/databases/teradata.png" alt="Teradata" width="124" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/timescaledb" title="TimescaleDB"><img src="docs/static/img/databases/timescale.png" alt="TimescaleDB" width="150" height="36" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/trino" title="Trino"><img src="docs/static/img/databases/trino.png" alt="Trino" width="89" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/vertica" title="Vertica"><img src="docs/static/img/databases/vertica.png" alt="Vertica" width="128" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/ydb" title="YDB"><img src="docs/static/img/databases/ydb.svg" alt="YDB" width="110" height="40" /></a> &nbsp;
<a href="https://superset.apache.org/docs/databases/supported/yugabytedb" title="YugabyteDB"><img src="docs/static/img/databases/yugabyte.png" alt="YugabyteDB" width="150" height="26" /></a>
<img src="https://superset.apache.org/img/databases/redshift.png" alt="redshift" border="0" width="200"/>
<img src="https://superset.apache.org/img/databases/google-biquery.png" alt="google-bigquery" border="0" width="200"/>
<img src="https://superset.apache.org/img/databases/snowflake.png" alt="snowflake" border="0" width="200"/>
<img src="https://superset.apache.org/img/databases/trino.png" alt="trino" border="0" width="150" />
<img src="https://superset.apache.org/img/databases/presto.png" alt="presto" border="0" width="200"/>
<img src="https://superset.apache.org/img/databases/databricks.png" alt="databricks" border="0" width="160" />
<img src="https://superset.apache.org/img/databases/druid.png" alt="druid" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/firebolt.png" alt="firebolt" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/timescale.png" alt="timescale" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/postgresql.png" alt="postgresql" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/mysql.png" alt="mysql" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/mssql-server.png" alt="mssql-server" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/ibm-db2.svg" alt="db2" border="0" width="220" />
<img src="https://superset.apache.org/img/databases/sqlite.png" alt="sqlite" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/sybase.png" alt="sybase" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/mariadb.png" alt="mariadb" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/vertica.png" alt="vertica" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/oracle.png" alt="oracle" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/firebird.png" alt="firebird" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/greenplum.png" alt="greenplum" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/clickhouse.png" alt="clickhouse" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/exasol.png" alt="exasol" border="0" width="160" />
<img src="https://superset.apache.org/img/databases/monet-db.png" alt="monet-db" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/apache-kylin.png" alt="apache-kylin" border="0" width="80"/>
<img src="https://superset.apache.org/img/databases/hologres.png" alt="hologres" border="0" width="80"/>
<img src="https://superset.apache.org/img/databases/netezza.png" alt="netezza" border="0" width="80"/>
<img src="https://superset.apache.org/img/databases/pinot.png" alt="pinot" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/teradata.png" alt="teradata" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/yugabyte.png" alt="yugabyte" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/databend.png" alt="databend" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/starrocks.png" alt="starrocks" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/doris.png" alt="doris" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/oceanbase.svg" alt="oceanbase" border="0" width="220" />
<img src="https://superset.apache.org/img/databases/sap-hana.png" alt="sap-hana" border="0" width="220" />
<img src="https://superset.apache.org/img/databases/denodo.png" alt="denodo" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/ydb.svg" alt="ydb" border="0" width="200" />
<img src="https://superset.apache.org/img/databases/tdengine.png" alt="TDengine" border="0" width="200" />
</p>
<!-- SUPPORTED_DATABASES_END -->
**A more comprehensive list of supported databases** along with the configuration instructions can be found [here](https://superset.apache.org/docs/databases).
**A more comprehensive list of supported databases** along with the configuration instructions can be found [here](https://superset.apache.org/docs/configuration/databases).
Want to add support for your datastore or data engine? Read more [here](https://superset.apache.org/docs/frequently-asked-questions#does-superset-work-with-insert-database-engine-here) about the technical requirements.
@@ -195,14 +165,14 @@ Try out Superset's [quickstart](https://superset.apache.org/docs/quickstart/) gu
## Contributor Guide
Interested in contributing? Check out our
[Developer Guide](https://superset.apache.org/developer-docs/)
[CONTRIBUTING.md](https://github.com/apache/superset/blob/master/CONTRIBUTING.md)
to find resources around contributing along with a detailed guide on
how to set up a development environment.
## Resources
- [Superset "In the Wild"](https://superset.apache.org/inTheWild) - see who's using Superset, and [add your organization](https://github.com/apache/superset/edit/master/RESOURCES/INTHEWILD.yaml) to the list!
- [Feature Flags](https://superset.apache.org/docs/configuration/feature-flags) - the status of Superset's Feature Flags.
- [Feature Flags](https://github.com/apache/superset/blob/master/RESOURCES/FEATURE_FLAGS.md) - the status of Superset's Feature Flags.
- [Standard Roles](https://github.com/apache/superset/blob/master/RESOURCES/STANDARD_ROLES.md) - How RBAC permissions map to roles.
- [Superset Wiki](https://github.com/apache/superset/wiki) - Tons of additional community resources: best practices, community content and other information.
- [Superset SIPs](https://github.com/orgs/apache/projects/170) - The status of Superset's SIPs (Superset Improvement Proposals) for both consensus and implementation status.

View File

@@ -92,7 +92,7 @@ Some of the new features in this release are disabled by default. Each has a fea
| Feature | Feature Flag | Dependencies | Documentation
| --- | --- | --- | --- |
| Global Async Queries | `GLOBAL_ASYNC_QUERIES: True` | Redis 5.0+, celery workers configured and running | [Extra documentation](https://superset.apache.org/docs/contributing/misc#async-chart-queries)
| Global Async Queries | `GLOBAL_ASYNC_QUERIES: True` | Redis 5.0+, celery workers configured and running | [Extra documentation](https://github.com/apache/superset/blob/master/CONTRIBUTING.md#async-chart-queries )
| Dashboard Native Filters | `DASHBOARD_NATIVE_FILTERS: True` | |
| Alerts & Reporting | `ALERT_REPORTS: True` | [Celery workers configured & celery beat process](https://superset.apache.org/docs/installation/async-queries-celery) |
| Homescreen Thumbnails | `THUMBNAILS: TRUE, THUMBNAIL_CACHE_CONFIG: CacheConfig = { "CACHE_TYPE": "null", "CACHE_NO_NULL_WARNING": True}`| selenium, pillow 7, celery |

103
RESOURCES/FEATURE_FLAGS.md Normal file
View File

@@ -0,0 +1,103 @@
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Superset Feature Flags
This is a list of the current Superset optional features. See config.py for default values. These features can be turned on/off by setting your preferred values in superset_config.py to True/False respectively
## In Development
These features are considered **unfinished** and should only be used on development environments.
[//]: # "PLEASE KEEP THE LIST SORTED ALPHABETICALLY"
- ALERT_REPORT_TABS
- DATE_RANGE_TIMESHIFTS_ENABLED
- ENABLE_ADVANCED_DATA_TYPES
- PRESTO_EXPAND_DATA
- SHARE_QUERIES_VIA_KV_STORE
- TAGGING_SYSTEM
- CHART_PLUGINS_EXPERIMENTAL
## In Testing
These features are **finished** but currently being tested. They are usable, but may still contain some bugs.
[//]: # "PLEASE KEEP THE LIST SORTED ALPHABETICALLY"
- ALERT_REPORTS: [(docs)](https://superset.apache.org/docs/configuration/alerts-reports)
- ALLOW_FULL_CSV_EXPORT
- CACHE_IMPERSONATION
- CONFIRM_DASHBOARD_DIFF
- DYNAMIC_PLUGINS
- DATE_FORMAT_IN_EMAIL_SUBJECT: [(docs)](https://superset.apache.org/docs/configuration/alerts-reports#commons)
- ENABLE_SUPERSET_META_DB: [(docs)](https://superset.apache.org/docs/configuration/databases/#querying-across-databases)
- ESTIMATE_QUERY_COST
- GLOBAL_ASYNC_QUERIES [(docs)](https://github.com/apache/superset/blob/master/CONTRIBUTING.md#async-chart-queries)
- IMPERSONATE_WITH_EMAIL_PREFIX
- PLAYWRIGHT_REPORTS_AND_THUMBNAILS
- RLS_IN_SQLLAB
- SSH_TUNNELING [(docs)](https://superset.apache.org/docs/configuration/setup-ssh-tunneling)
- USE_ANALAGOUS_COLORS
## Stable
These features flags are **safe for production**. They have been tested and will be supported for the at least the current major version cycle.
[//]: # "PLEASE KEEP THESE LISTS SORTED ALPHABETICALLY"
### Flags on the path to feature launch and flag deprecation/removal
- DASHBOARD_VIRTUALIZATION
### Flags retained for runtime configuration
Currently some of our feature flags act as dynamic configurations that can change
on the fly. This acts in contradiction with the typical ephemeral feature flag use case,
where the flag is used to mature a feature, and eventually deprecated once the feature is
solid. Eventually we'll likely refactor these under a more formal "dynamic configurations" managed
independently. This new framework will also allow for non-boolean configurations.
- ALERTS_ATTACH_REPORTS
- ALLOW_ADHOC_SUBQUERY
- DASHBOARD_RBAC [(docs)](https://superset.apache.org/docs/using-superset/creating-your-first-dashboard#manage-access-to-dashboards)
- DATAPANEL_CLOSED_BY_DEFAULT
- DRILL_BY
- DRUID_JOINS
- EMBEDDABLE_CHARTS
- EMBEDDED_SUPERSET
- ENABLE_TEMPLATE_PROCESSING
- ESCAPE_MARKDOWN_HTML
- LISTVIEWS_DEFAULT_CARD_VIEW
- SCHEDULED_QUERIES [(docs)](https://superset.apache.org/docs/configuration/alerts-reports)
- SLACK_ENABLE_AVATARS (see `superset/config.py` for more information)
- SQLLAB_BACKEND_PERSISTENCE
- SQL_VALIDATORS_BY_ENGINE [(docs)](https://superset.apache.org/docs/configuration/sql-templating)
- THUMBNAILS [(docs)](https://superset.apache.org/docs/configuration/cache)
## Deprecated Flags
These features flags currently default to True and **will be removed in a future major release**. For this current release you can turn them off by setting your config to False, but it is advised to remove or set these flags in your local configuration to **True** so that you do not experience any unexpected changes in a future release.
[//]: # "PLEASE KEEP THE LIST SORTED ALPHABETICALLY"
- AVOID_COLORS_COLLISION
- DRILL_TO_DETAIL
- ENABLE_JAVASCRIPT_CONTROLS
- KV_STORE

View File

@@ -136,6 +136,10 @@ categories:
url: https://www.dropit.shop/
contributors: ["@dropit-dev"]
- name: Fanatics
url: https://www.fanatics.com/
contributors: ["@coderfender"]
- name: Fordeal
url: https://www.fordeal.com
contributors: ["@Renkai"]
@@ -287,10 +291,8 @@ categories:
url: https://www.gfk.com/home
contributors: ["@mherr"]
# Logo approved by @anmol-hpe on behalf of HPE
- name: HPE
url: https://www.hpe.com/in/en/home.html
logo: hpe.png
contributors: ["@anmol-hpe"]
- name: Hydrolix
@@ -430,11 +432,6 @@ categories:
url: https://brandct.cn/
contributors: ["@wenbinye"]
- name: XNET
url: https://xnetmobile.com/
logo: xnet.png
contributors: ["@deuspt"]
- name: Zeta
url: https://www.zeta.tech/
contributors: ["@shaikidris"]
@@ -625,23 +622,6 @@ categories:
- name: Stockarea
url: https://stockarea.io
- name: VTG
url: https://www.vtg.de
Sports:
- name: Club 25 de Agosto (Femenino / Women's Team)
url: https://www.instagram.com/25deagosto.basketfemenino/
contributors: [ "@lion90" ]
logo: club25deagosto.svg
- name: Fanatics
url: https://www.fanatics.com/
contributors: [ "@coderfender" ]
- name: komoot
url: https://www.komoot.com/
contributors: [ "@christophlingg" ]
Others:
- name: 10Web
url: https://10web.io/
@@ -677,6 +657,10 @@ categories:
url: https://www.increff.com/
contributors: ["@ishansinghania"]
- name: komoot
url: https://www.komoot.com/
contributors: ["@christophlingg"]
- name: Let's Roam
url: https://www.letsroam.com/

View File

@@ -24,126 +24,6 @@ assists people when migrating to a new version.
## Next
### Combined datasource list endpoint
Added a new combined datasource list endpoint at `GET /api/v1/datasource/` to serve datasets and semantic views in one response.
- The endpoint is available to users with at least one of `can_read` on `Dataset` or `SemanticView`.
- Semantic views are included only when the `SEMANTIC_LAYERS` feature flag is enabled.
- The endpoint enforces strict `order_column` validation and returns `400` for invalid sort columns.
### ClickHouse minimum driver version bump
The minimum required version of `clickhouse-connect` has been raised to `>=0.13.0`. If you are using the ClickHouse connector, please upgrade your `clickhouse-connect` package. The `_mutate_label` workaround that appended hash suffixes to column aliases has also been removed, as it is no longer needed with modern versions of the driver.
### MCP Tool Observability
MCP (Model Context Protocol) tools now include enhanced observability instrumentation for monitoring and debugging:
**Two-layer instrumentation:**
1. **Middleware layer** (`LoggingMiddleware`): Automatically logs all MCP tool calls with `duration_ms` and `success` status in the audit log (Action Log UI, logs table)
2. **Sub-operation tracking**: All 19 MCP tools include granular `event_logger.log_context()` blocks for tracking individual operations like validation, database writes, and query execution
**Action naming convention:**
- Tool-level logs: `mcp_tool_call` (via middleware)
- Sub-operation logs: `mcp.{tool_name}.{operation}` (e.g., `mcp.generate_chart.validation`, `mcp.execute_sql.query_execution`)
**Querying MCP logs:**
```sql
-- Top slowest MCP operations
SELECT action, COUNT(*) as calls, AVG(duration_ms) as avg_ms
FROM logs
WHERE action LIKE 'mcp.%'
GROUP BY action
ORDER BY avg_ms DESC
LIMIT 20;
-- MCP tool success rate
SELECT
json_extract(curated_payload, '$.tool') as tool,
COUNT(*) as total_calls,
SUM(CASE WHEN json_extract(curated_payload, '$.success') = 'true' THEN 1 ELSE 0 END) as successful,
ROUND(100.0 * SUM(CASE WHEN json_extract(curated_payload, '$.success') = 'true' THEN 1 ELSE 0 END) / COUNT(*), 2) as success_rate
FROM logs
WHERE action = 'mcp_tool_call'
GROUP BY tool
ORDER BY total_calls DESC;
```
**Security note:** Sensitive parameters (passwords, API keys, tokens) are automatically redacted in logs as `[REDACTED]`.
### Distributed Coordination Backend
A new `DISTRIBUTED_COORDINATION_CONFIG` configuration provides a unified Redis-based backend for real-time coordination features in Superset. This backend enables:
- **Pub/sub messaging** for real-time event notifications between workers
- **Atomic distributed locking** using Redis SET NX EX (more performant than database-backed locks)
- **Event-based coordination** for background task management
The distributed coordination is used by the Global Task Framework (GTF) for abort notifications and task completion signaling, and will eventually replace `GLOBAL_ASYNC_QUERIES_CACHE_BACKEND` as the standard signaling backend. Configuring this is recommended for Redis enabled production deployments.
Example configuration in `superset_config.py`:
```python
DISTRIBUTED_COORDINATION_CONFIG = {
"CACHE_TYPE": "RedisCache",
"CACHE_KEY_PREFIX": "signal_",
"CACHE_REDIS_URL": "redis://localhost:6379/1",
"CACHE_DEFAULT_TIMEOUT": 300,
}
```
See `superset/config.py` for complete configuration options.
### WebSocket config for GAQ with Docker
[35896](https://github.com/apache/superset/pull/35896) and [37624](https://github.com/apache/superset/pull/37624) updated documentation on how to run and configure Superset with Docker. Specifically for the WebSocket configuration, a new `docker/superset-websocket/config.example.json` was added to the repo, so that users could copy it to create a `docker/superset-websocket/config.json` file. The existing `docker/superset-websocket/config.json` was removed and git-ignored, so if you're using GAQ / WebSocket make sure to:
- Stash/backup your existing `config.json` file, to re-apply it after (will get git-ignored going forward)
- Update the `volumes` configuration for the `superset-websocket` service in your `docker-compose.override.yml` file, to include the `docker/superset-websocket/config.json` file. For example:
``` yaml
services:
superset-websocket:
volumes:
- ./superset-websocket:/home/superset-websocket
- /home/superset-websocket/node_modules
- /home/superset-websocket/dist
- ./docker/superset-websocket/config.json:/home/superset-websocket/config.json:ro
```
### Example Data Loading Improvements
#### New Directory Structure
Examples are now organized by name with data and configs co-located:
```
superset/examples/
├── _shared/ # Shared database & metadata configs
├── birth_names/ # Each example is self-contained
│ ├── data.parquet # Dataset (Parquet format)
│ ├── dataset.yaml # Dataset metadata
│ ├── dashboard.yaml # Dashboard config (optional)
│ └── charts/ # Chart configs (optional)
└── ...
```
#### Simplified Parquet-based Loading
- Auto-discovery: create `superset/examples/my_dataset/data.parquet` to add a new example
- Parquet is an Apache project format: compressed (~27% smaller), self-describing schema
- YAML configs define datasets, charts, and dashboards declaratively
- Removed Python-based data generation from individual example files
#### Test Data Reorganization
- Moved `big_data.py` to `superset/cli/test_loaders.py` - better reflects its purpose as a test utility
- Fixed inverted logic for `--load-test-data` flag (now correctly includes .test.yaml files when flag is set)
- Clarified CLI flags:
- `--force` / `-f`: Force reload even if tables exist
- `--only-metadata` / `-m`: Create table metadata without loading data
- `--load-test-data` / `-t`: Include test dashboards and .test.yaml configs
- `--load-big-data` / `-b`: Generate synthetic stress-test data
#### Bug Fixes
- Fixed numpy array serialization for PostgreSQL (converts complex types to JSON strings)
- Fixed KeyError for `allow_csv_upload` field in database configs (now optional with default)
- Fixed test data loading logic that was incorrectly filtering files
### MCP Service
The MCP (Model Context Protocol) service enables AI assistants and automation tools to interact programmatically with Superset.
@@ -248,28 +128,6 @@ See `superset/mcp_service/PRODUCTION.md` for deployment guides.
- [35062](https://github.com/apache/superset/pull/35062): Changed the function signature of `setupExtensions` to `setupCodeOverrides` with options as arguments.
### Breaking Changes
- [37370](https://github.com/apache/superset/pull/37370): The `APP_NAME` configuration variable no longer controls the browser window/tab title or other frontend branding. Application names should now be configured using the theme system with the `brandAppName` token. The `APP_NAME` config is still used for backend contexts (MCP service, logs, etc.) and serves as a fallback if `brandAppName` is not set.
- **Migration:**
```python
# Before (Superset 5.x)
APP_NAME = "My Custom App"
# After (Superset 6.x) - Option 1: Use theme system (recommended)
THEME_DEFAULT = {
"token": {
"brandAppName": "My Custom App", # Window titles
"brandLogoAlt": "My Custom App", # Logo alt text
"brandLogoUrl": "/static/assets/images/custom_logo.png"
}
}
# After (Superset 6.x) - Option 2: Temporary fallback
# Keep APP_NAME for now (will be used as fallback for brandAppName)
APP_NAME = "My Custom App"
# But you should migrate to THEME_DEFAULT.token.brandAppName
```
- **Note:** For dark mode, set the same tokens in `THEME_DARK` configuration.
- [36317](https://github.com/apache/superset/pull/36317): The `CUSTOM_FONT_URLS` configuration option has been removed. Use the new per-theme `fontUrls` token in `THEME_DEFAULT` or database-managed themes instead.
- **Before:**
```python
@@ -284,7 +142,7 @@ See `superset/mcp_service/PRODUCTION.md` for deployment guides.
"fontUrls": [
"https://fonts.example.com/myfont.css",
],
# ... other tokens
# ... other tokens
}
}
```

View File

@@ -45,7 +45,7 @@ services:
required: true
- path: docker/.env-local # optional override
required: false
image: postgres:17
image: postgres:16
container_name: superset_db
restart: unless-stopped
volumes:

View File

@@ -77,6 +77,7 @@ x-common-build: &common-build
INCLUDE_CHROMIUM: ${INCLUDE_CHROMIUM:-false}
INCLUDE_FIREFOX: ${INCLUDE_FIREFOX:-false}
BUILD_TRANSLATIONS: ${BUILD_TRANSLATIONS:-false}
LOAD_EXAMPLES_DUCKDB: ${LOAD_EXAMPLES_DUCKDB:-true}
services:
db-light:
@@ -85,7 +86,7 @@ services:
required: true
- path: docker/.env-local # optional override
required: false
image: postgres:17
image: postgres:16
restart: unless-stopped
volumes:
- db_home_light:/var/lib/postgresql/data
@@ -111,10 +112,13 @@ services:
superset-init-light:
condition: service_completed_successfully
volumes: *superset-volumes
ports:
- "${SUPERSET_PORT:-8088}:8088"
environment:
DATABASE_HOST: db-light
DATABASE_DB: superset_light
POSTGRES_DB: superset_light
SUPERSET__SQLALCHEMY_EXAMPLES_URI: "duckdb:////app/data/examples.duckdb"
SUPERSET_CONFIG_PATH: /app/docker/pythonpath_dev/superset_config_docker_light.py
GITHUB_HEAD_REF: ${GITHUB_HEAD_REF:-}
GITHUB_SHA: ${GITHUB_SHA:-}
@@ -137,6 +141,7 @@ services:
DATABASE_HOST: db-light
DATABASE_DB: superset_light
POSTGRES_DB: superset_light
SUPERSET__SQLALCHEMY_EXAMPLES_URI: "duckdb:////app/data/examples.duckdb"
SUPERSET_CONFIG_PATH: /app/docker/pythonpath_dev/superset_config_docker_light.py
healthcheck:
disable: true
@@ -154,13 +159,13 @@ services:
environment:
# set this to false if you have perf issues running the npm i; npm run dev in-docker
# if you do so, you have to run this manually on the host, which should perform better!
BUILD_SUPERSET_FRONTEND_IN_DOCKER: true
BUILD_SUPERSET_FRONTEND_IN_DOCKER: false
NPM_RUN_PRUNE: false
SCARF_ANALYTICS: "${SCARF_ANALYTICS:-}"
# configuring the dev-server to use the host.docker.internal to connect to the backend
superset: "http://superset-light:8088"
# Webpack dev server must bind to 0.0.0.0 to be accessible from outside the container
WEBPACK_DEVSERVER_HOST: "${WEBPACK_DEVSERVER_HOST:-0.0.0.0}"
# Webpack dev server configuration
WEBPACK_DEVSERVER_HOST: "${WEBPACK_DEVSERVER_HOST:-127.0.0.1}"
WEBPACK_DEVSERVER_PORT: "${WEBPACK_DEVSERVER_PORT:-9000}"
ports:
- "${NODE_PORT:-9001}:9000" # Parameterized port, accessible on all interfaces
@@ -193,6 +198,7 @@ services:
DATABASE_DB: test
POSTGRES_DB: test
SUPERSET__SQLALCHEMY_DATABASE_URI: postgresql+psycopg2://superset:superset@db-light:5432/test
SUPERSET__SQLALCHEMY_EXAMPLES_URI: "duckdb:////app/data/examples.duckdb"
SUPERSET_CONFIG: superset_test_config_light
PYTHONPATH: /app/pythonpath:/app/docker/pythonpath_dev:/app

View File

@@ -49,7 +49,7 @@ services:
required: true
- path: docker/.env-local # optional override
required: false
image: postgres:17
image: postgres:16
container_name: superset_db
restart: unless-stopped
volumes:

View File

@@ -44,6 +44,7 @@ x-common-build: &common-build
INCLUDE_CHROMIUM: ${INCLUDE_CHROMIUM:-false}
INCLUDE_FIREFOX: ${INCLUDE_FIREFOX:-false}
BUILD_TRANSLATIONS: ${BUILD_TRANSLATIONS:-false}
LOAD_EXAMPLES_DUCKDB: ${LOAD_EXAMPLES_DUCKDB:-true}
services:
nginx:
@@ -76,7 +77,7 @@ services:
required: true
- path: docker/.env-local # optional override
required: false
image: postgres:17
image: postgres:16
restart: unless-stopped
ports:
- "127.0.0.1:${DATABASE_PORT:-5432}:5432"
@@ -105,6 +106,8 @@ services:
superset-init:
condition: service_completed_successfully
volumes: *superset-volumes
environment:
SUPERSET__SQLALCHEMY_EXAMPLES_URI: "duckdb:////app/data/examples.duckdb"
superset-websocket:
build: ./superset-websocket
@@ -154,6 +157,8 @@ services:
condition: service_started
user: *superset-user
volumes: *superset-volumes
environment:
SUPERSET__SQLALCHEMY_EXAMPLES_URI: "duckdb:////app/data/examples.duckdb"
healthcheck:
disable: true
@@ -175,7 +180,7 @@ services:
SCARF_ANALYTICS: "${SCARF_ANALYTICS:-}"
# configuring the dev-server to use the host.docker.internal to connect to the backend
superset: "http://superset:8088"
# Webpack dev server must bind to 0.0.0.0 to be accessible from outside the container
# Bind to all interfaces so Docker port mapping works
WEBPACK_DEVSERVER_HOST: "0.0.0.0"
ports:
- "127.0.0.1:${NODE_PORT:-9000}:9000" # exposing the dynamic webpack dev server

View File

@@ -28,11 +28,11 @@ if [ "$BUILD_SUPERSET_FRONTEND_IN_DOCKER" = "true" ]; then
cd /app/superset-frontend
if [ "$NPM_RUN_PRUNE" = "true" ]; then
echo "Running \"npm run prune\""
echo "Running `npm run prune`"
npm run prune
fi
echo "Running \"npm install\""
echo "Running `npm install`"
npm install
echo "Start webpack dev server"

View File

@@ -105,7 +105,7 @@ class CeleryConfig:
CELERY_CONFIG = CeleryConfig
FEATURE_FLAGS = {"ALERT_REPORTS": True, "DATASET_FOLDERS": True}
FEATURE_FLAGS = {"ALERT_REPORTS": True}
ALERT_REPORTS_NOTIFICATION_DRY_RUN = True
WEBDRIVER_BASEURL = f"http://superset_app{os.environ.get('SUPERSET_APP_ROOT', '/')}/" # When using docker compose baseurl should be http://superset_nginx{ENV{BASEPATH}}/ # noqa: E501
# The base URL for the email report hyperlinks.

View File

@@ -0,0 +1,22 @@
{
"port": 8080,
"logLevel": "info",
"logToFile": false,
"logFilename": "app.log",
"statsd": {
"host": "127.0.0.1",
"port": 8125,
"globalTags": []
},
"redis": {
"port": 6379,
"host": "127.0.0.1",
"password": "",
"db": 0,
"ssl": false
},
"redisStreamPrefix": "async-events-",
"jwtAlgorithms": ["HS256"],
"jwtSecret": "CHANGE-ME-IN-PRODUCTION-GOTTA-BE-LONG-AND-SECRET",
"jwtCookieName": "async-token"
}

View File

@@ -1,115 +0,0 @@
# Developer Portal Documentation Instructions
## Core Principle: Stories Are the Single Source of Truth
When working on the Storybook-to-MDX documentation system:
**ALWAYS fix the story first. NEVER add workarounds to the generator.**
## Why This Matters
The generator (`scripts/generate-superset-components.mjs`) should be lightweight - it extracts data from stories and passes it through. When you add special cases to the generator:
- It becomes harder to maintain
- Stories diverge from their docs representation
- Future stories need to know about generator quirks
When you fix stories to match the expected patterns:
- Stories work identically in Storybook and Docs
- The generator stays simple and predictable
- Patterns are consistent and learnable
## Story Patterns for Docs Generation
### Required Structure
```tsx
// Use inline export default (NOT const meta = ...; export default meta)
export default {
title: 'Components/MyComponent',
component: MyComponent,
};
// Name interactive stories with Interactive prefix
export const InteractiveMyComponent: Story = {
args: {
// Default prop values
},
argTypes: {
// Control definitions - MUST be at story level, not meta level
propName: {
control: { type: 'select' },
options: ['a', 'b', 'c'],
description: 'What this prop does',
},
},
};
```
### For Components with Variants (size × style grids)
```tsx
const sizes = ['small', 'medium', 'large'];
const variants = ['primary', 'secondary', 'danger'];
InteractiveButton.parameters = {
docs: {
gallery: {
component: 'Button',
sizes,
styles: variants,
sizeProp: 'size',
styleProp: 'variant',
},
},
};
```
### For Components Requiring Children
```tsx
InteractiveIconTooltip.parameters = {
docs: {
// Component descriptors with dot notation for nested components
sampleChildren: [{ component: 'Icons.InfoCircleOutlined', props: { iconSize: 'l' } }],
},
};
```
### For Custom Live Code Examples
```tsx
InteractiveMyComponent.parameters = {
docs: {
liveExample: `function Demo() {
return <MyComponent prop="value">Content</MyComponent>;
}`,
},
};
```
### For Complex Props (objects, arrays)
```tsx
InteractiveMenu.parameters = {
docs: {
staticProps: {
items: [
{ key: '1', label: 'Item 1' },
{ key: '2', label: 'Item 2' },
],
},
},
};
```
## Common Issues and How to Fix Them (in the Story)
| Issue | Wrong Approach | Right Approach |
|-------|---------------|----------------|
| Component not generated | Add pattern to generator | Change story to use inline `export default` |
| Control shows as text instead of select | Add special case in generator | Add `argTypes` with `control: { type: 'select' }` |
| Missing children/content | Modify StorybookWrapper | Add `parameters.docs.sampleChildren` |
| Gallery not showing | Add to generator output | Add `parameters.docs.gallery` config |
| Wrong live example | Hardcode in generator | Add `parameters.docs.liveExample` |
## Files
- **Generator**: `docs/scripts/generate-superset-components.mjs`
- **Wrapper**: `docs/src/components/StorybookWrapper.jsx`
- **Output**: `docs/developer_docs/components/`
- **Stories**: `superset-frontend/packages/superset-ui-core/src/components/*/`

18
docs/.gitignore vendored
View File

@@ -26,21 +26,3 @@ docs/intro.md
# Generated badge images (downloaded at build time by remark-localize-badges plugin)
static/badges/
# Generated database documentation MDX files (regenerated at build time)
# Source of truth is in superset/db_engine_specs/*.py metadata attributes
docs/databases/
# Generated API documentation (regenerated at build time from openapi.json)
# Source of truth is static/resources/openapi.json
developer_docs/api/
# Generated component documentation MDX files (regenerated at build time)
# Source of truth is Storybook stories in superset-frontend/packages/superset-ui-core/src/components/
developer_docs/components/
# Note: src/data/databases.json is COMMITTED (not ignored) to preserve feature diagnostics
# that require Flask context to generate. Update it locally with: npm run gen-db-docs
# Generated component metadata JSON (regenerated by generate-superset-components.mjs)
static/data/components.json

View File

@@ -1 +1 @@
v22.22.0
v20.18.3

View File

@@ -416,7 +416,7 @@ If versions don't appear in dropdown:
- [Docusaurus Documentation](https://docusaurus.io/docs)
- [MDX Documentation](https://mdxjs.com/)
- [Superset Developer Docs](https://superset.apache.org/developer-docs/)
- [Superset Contributing Guide](../CONTRIBUTING.md)
- [Main Superset Documentation](https://superset.apache.org/docs/intro)
## 📖 Real Examples and Patterns

View File

@@ -18,17 +18,16 @@ under the License.
-->
This is the public documentation site for Superset, built using
[Docusaurus 3](https://docusaurus.io/). See the
[Developer Docs](https://superset.apache.org/developer-docs/contributing/development-setup#documentation)
for documentation on contributing to documentation.
[Docusaurus 3](https://docusaurus.io/). See
[CONTRIBUTING.md](../CONTRIBUTING.md#documentation) for documentation on
contributing to documentation.
## Version Management
The Superset documentation site uses Docusaurus versioning with four independent sections:
The Superset documentation site uses Docusaurus versioning with three independent versioned sections:
- **User Documentation** (`/user-docs/`) - End-user guides and tutorials
- **Admin Documentation** (`/admin-docs/`) - Installation, configuration, and security
- **Developer Docs** (`/developer-docs/`) - Developer guides, contributing, and extensions
- **Main Documentation** (`/docs/`) - Core Superset documentation
- **Developer Portal** (`/developer_portal/`) - Developer guides and tutorials
- **Component Playground** (`/components/`) - Interactive component examples (currently disabled)
Each section maintains its own version history and can be versioned independently.

View File

@@ -1,107 +0,0 @@
---
title: Feature Flags
hide_title: true
sidebar_position: 2
version: 1
---
import featureFlags from '@site/static/feature-flags.json';
export const FlagTable = ({flags}) => (
<table>
<thead>
<tr>
<th>Flag</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{flags.map((flag) => (
<tr key={flag.name}>
<td><code>{flag.name}</code></td>
<td><code>{flag.default ? 'True' : 'False'}</code></td>
<td>
{flag.description}
{flag.docs && (
<> (<a href={flag.docs}>docs</a>)</>
)}
</td>
</tr>
))}
</tbody>
</table>
);
# Feature Flags
Superset uses feature flags to control the availability of features. Feature flags allow
gradual rollout of new functionality and provide a way to enable experimental features.
To enable a feature flag, add it to your `superset_config.py`:
```python
FEATURE_FLAGS = {
"ENABLE_TEMPLATE_PROCESSING": True,
}
```
## Lifecycle
Feature flags progress through lifecycle stages:
| Stage | Description |
|-------|-------------|
| **Development** | Experimental features under active development. May be incomplete or unstable. |
| **Testing** | Feature complete but undergoing testing. Usable but may contain bugs. |
| **Stable** | Production-ready features. Safe for all deployments. |
| **Deprecated** | Features scheduled for removal. Migrate away from these. |
---
## Development
These features are experimental and under active development. Use only in development environments.
<FlagTable flags={featureFlags.flags.development} />
---
## Testing
These features are complete but still being tested. They are usable but may have bugs.
<FlagTable flags={featureFlags.flags.testing} />
---
## Stable
These features are production-ready and safe to enable.
<FlagTable flags={featureFlags.flags.stable} />
---
## Deprecated
These features are scheduled for removal. Plan to migrate away from them.
<FlagTable flags={featureFlags.flags.deprecated} />
---
## Adding New Feature Flags
When adding a new feature flag to `superset/config.py`, include the following annotations:
```python
# Description of what the feature does
# @lifecycle: development | testing | stable | deprecated
# @docs: https://superset.apache.org/docs/... (optional)
# @category: runtime_config | path_to_deprecation (optional, for stable flags)
"MY_NEW_FEATURE": False,
```
This documentation is auto-generated from the annotations in
[config.py](https://github.com/apache/superset/blob/master/superset/config.py).

View File

@@ -1,42 +0,0 @@
---
title: Admin Documentation
description: Administrator guides for installing, configuring, and managing Apache Superset
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Admin Documentation
This section contains documentation for system administrators and operators who deploy and manage Apache Superset installations.
## What's in this section
- **[Installation](/admin-docs/installation/installation-methods)** - Deploy Superset using Docker, Kubernetes, or PyPI
- **[Configuration](/admin-docs/configuration/configuring-superset)** - Configure authentication, caching, feature flags, and more
- **[Security](/admin-docs/security/)** - Set up roles, permissions, and secure your deployment
## Related
- **[Database Drivers](/user-docs/databases/)** - See User Docs for database connection setup (admins may need to install drivers)
## Looking for something else?
- **[User Documentation](/user-docs/)** - Guides for analysts and business users
- **[Developer Documentation](/developer-docs)** - Contributing, extensions, and development guides

View File

@@ -1,3 +1,4 @@
/* eslint-env node */
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
@@ -17,7 +18,6 @@
* under the License.
*/
.playgroundPreview {
padding: 1rem;
background-color: var(--ifm-pre-background);
}
module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
};

View File

@@ -1,590 +0,0 @@
---
title: API Reference
hide_title: true
sidebar_position: 10
---
import { Alert } from 'antd';
## REST API Reference
Superset exposes a comprehensive **REST API** that follows the [OpenAPI specification](https://swagger.io/specification/).
You can use this API to programmatically interact with Superset for automation, integrations, and custom applications.
<Alert
type="info"
showIcon
message="Code Samples & Schema Documentation"
description={
<span>
Each endpoint includes ready-to-use code samples in <strong>cURL</strong>, <strong>Python</strong>, and <strong>JavaScript</strong>.
The sidebar includes <strong>Schema definitions</strong> for detailed data model documentation.
</span>
}
style={{ marginBottom: '24px' }}
/>
---
### Authentication
Most API endpoints require authentication via JWT tokens.
#### Quick Start
```bash
# 1. Get a JWT token
curl -X POST http://localhost:8088/api/v1/security/login \
-H "Content-Type: application/json" \
-d '{"username": "admin", "password": "admin", "provider": "db"}'
# 2. Use the access_token from the response
curl -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
http://localhost:8088/api/v1/dashboard/
```
#### Security Endpoints
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Get the CSRF token](./api/get-the-csrf-token) | `/api/v1/security/csrf_token/` |
| `POST` | [Get a guest token](./api/get-a-guest-token) | `/api/v1/security/guest_token/` |
| `POST` | [Create security login](./api/create-security-login) | `/api/v1/security/login` |
| `POST` | [Create security refresh](./api/create-security-refresh) | `/api/v1/security/refresh` |
---
### API Endpoints
#### Core Resources
<details>
<summary><strong>Dashboards</strong> (26 endpoints) — Create, read, update, and delete dashboards.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `DELETE` | [Bulk delete dashboards](./api/bulk-delete-dashboards) | `/api/v1/dashboard/` |
| `GET` | [Get a list of dashboards](./api/get-a-list-of-dashboards) | `/api/v1/dashboard/` |
| `POST` | [Create a new dashboard](./api/create-a-new-dashboard) | `/api/v1/dashboard/` |
| `GET` | [Get metadata information about this API resource (dashboard--info)](./api/get-metadata-information-about-this-api-resource-dashboard-info) | `/api/v1/dashboard/_info` |
| `GET` | [Get a dashboard detail information](./api/get-a-dashboard-detail-information) | `/api/v1/dashboard/{id_or_slug}` |
| `GET` | [Get a dashboard's chart definitions.](./api/get-a-dashboard-s-chart-definitions) | `/api/v1/dashboard/{id_or_slug}/charts` |
| `POST` | [Create a copy of an existing dashboard](./api/create-a-copy-of-an-existing-dashboard) | `/api/v1/dashboard/{id_or_slug}/copy/` |
| `GET` | [Get dashboard's datasets](./api/get-dashboard-s-datasets) | `/api/v1/dashboard/{id_or_slug}/datasets` |
| `DELETE` | [Delete a dashboard's embedded configuration](./api/delete-a-dashboard-s-embedded-configuration) | `/api/v1/dashboard/{id_or_slug}/embedded` |
| `GET` | [Get the dashboard's embedded configuration](./api/get-the-dashboard-s-embedded-configuration) | `/api/v1/dashboard/{id_or_slug}/embedded` |
| `POST` | [Set a dashboard's embedded configuration](./api/set-a-dashboard-s-embedded-configuration) | `/api/v1/dashboard/{id_or_slug}/embedded` |
| `PUT` | [Update dashboard by id_or_slug embedded](./api/update-dashboard-by-id-or-slug-embedded) | `/api/v1/dashboard/{id_or_slug}/embedded` |
| `GET` | [Get dashboard's tabs](./api/get-dashboard-s-tabs) | `/api/v1/dashboard/{id_or_slug}/tabs` |
| `DELETE` | [Delete a dashboard](./api/delete-a-dashboard) | `/api/v1/dashboard/{pk}` |
| `PUT` | [Update a dashboard](./api/update-a-dashboard) | `/api/v1/dashboard/{pk}` |
| `POST` | [Compute and cache a screenshot (dashboard-pk-cache-dashboard-screenshot)](./api/compute-and-cache-a-screenshot-dashboard-pk-cache-dashboard-screenshot) | `/api/v1/dashboard/{pk}/cache_dashboard_screenshot/` |
| `PUT` | [Update colors configuration for a dashboard.](./api/update-colors-configuration-for-a-dashboard) | `/api/v1/dashboard/{pk}/colors` |
| `DELETE` | [Remove the dashboard from the user favorite list](./api/remove-the-dashboard-from-the-user-favorite-list) | `/api/v1/dashboard/{pk}/favorites/` |
| `POST` | [Mark the dashboard as favorite for the current user](./api/mark-the-dashboard-as-favorite-for-the-current-user) | `/api/v1/dashboard/{pk}/favorites/` |
| `PUT` | [Update native filters configuration for a dashboard.](./api/update-native-filters-configuration-for-a-dashboard) | `/api/v1/dashboard/{pk}/filters` |
| `GET` | [Get a computed screenshot from cache (dashboard-pk-screenshot-digest)](./api/get-a-computed-screenshot-from-cache-dashboard-pk-screenshot-digest) | `/api/v1/dashboard/{pk}/screenshot/{digest}/` |
| `GET` | [Get dashboard's thumbnail](./api/get-dashboard-s-thumbnail) | `/api/v1/dashboard/{pk}/thumbnail/{digest}/` |
| `GET` | [Download multiple dashboards as YAML files](./api/download-multiple-dashboards-as-yaml-files) | `/api/v1/dashboard/export/` |
| `GET` | [Check favorited dashboards for current user](./api/check-favorited-dashboards-for-current-user) | `/api/v1/dashboard/favorite_status/` |
| `POST` | [Import dashboard(s) with associated charts/datasets/databases](./api/import-dashboard-s-with-associated-charts-datasets-databases) | `/api/v1/dashboard/import/` |
| `GET` | [Get related fields data (dashboard-related-column-name)](./api/get-related-fields-data-dashboard-related-column-name) | `/api/v1/dashboard/related/{column_name}` |
</details>
<details>
<summary><strong>Charts</strong> (20 endpoints) — Create, read, update, and delete charts (slices).</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `DELETE` | [Bulk delete charts](./api/bulk-delete-charts) | `/api/v1/chart/` |
| `GET` | [Get a list of charts](./api/get-a-list-of-charts) | `/api/v1/chart/` |
| `POST` | [Create a new chart](./api/create-a-new-chart) | `/api/v1/chart/` |
| `GET` | [Get metadata information about this API resource (chart--info)](./api/get-metadata-information-about-this-api-resource-chart-info) | `/api/v1/chart/_info` |
| `DELETE` | [Delete a chart](./api/delete-a-chart) | `/api/v1/chart/{pk}` |
| `GET` | [Get a chart detail information](./api/get-a-chart-detail-information) | `/api/v1/chart/{pk}` |
| `PUT` | [Update a chart](./api/update-a-chart) | `/api/v1/chart/{pk}` |
| `GET` | [Compute and cache a screenshot (chart-pk-cache-screenshot)](./api/compute-and-cache-a-screenshot-chart-pk-cache-screenshot) | `/api/v1/chart/{pk}/cache_screenshot/` |
| `GET` | [Return payload data response for a chart](./api/return-payload-data-response-for-a-chart) | `/api/v1/chart/{pk}/data/` |
| `DELETE` | [Remove the chart from the user favorite list](./api/remove-the-chart-from-the-user-favorite-list) | `/api/v1/chart/{pk}/favorites/` |
| `POST` | [Mark the chart as favorite for the current user](./api/mark-the-chart-as-favorite-for-the-current-user) | `/api/v1/chart/{pk}/favorites/` |
| `GET` | [Get a computed screenshot from cache (chart-pk-screenshot-digest)](./api/get-a-computed-screenshot-from-cache-chart-pk-screenshot-digest) | `/api/v1/chart/{pk}/screenshot/{digest}/` |
| `GET` | [Get chart thumbnail](./api/get-chart-thumbnail) | `/api/v1/chart/{pk}/thumbnail/{digest}/` |
| `POST` | [Return payload data response for the given query (chart-data)](./api/return-payload-data-response-for-the-given-query-chart-data) | `/api/v1/chart/data` |
| `GET` | [Return payload data response for the given query (chart-data-cache-key)](./api/return-payload-data-response-for-the-given-query-chart-data-cache-key) | `/api/v1/chart/data/{cache_key}` |
| `GET` | [Download multiple charts as YAML files](./api/download-multiple-charts-as-yaml-files) | `/api/v1/chart/export/` |
| `GET` | [Check favorited charts for current user](./api/check-favorited-charts-for-current-user) | `/api/v1/chart/favorite_status/` |
| `POST` | [Import chart(s) with associated datasets and databases](./api/import-chart-s-with-associated-datasets-and-databases) | `/api/v1/chart/import/` |
| `GET` | [Get related fields data (chart-related-column-name)](./api/get-related-fields-data-chart-related-column-name) | `/api/v1/chart/related/{column_name}` |
| `PUT` | [Warm up the cache for the chart](./api/warm-up-the-cache-for-the-chart) | `/api/v1/chart/warm_up_cache` |
</details>
<details>
<summary><strong>Datasets</strong> (18 endpoints) — Manage datasets (tables) used for building charts.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `DELETE` | [Bulk delete datasets](./api/bulk-delete-datasets) | `/api/v1/dataset/` |
| `GET` | [Get a list of datasets](./api/get-a-list-of-datasets) | `/api/v1/dataset/` |
| `POST` | [Create a new dataset](./api/create-a-new-dataset) | `/api/v1/dataset/` |
| `GET` | [Get metadata information about this API resource (dataset--info)](./api/get-metadata-information-about-this-api-resource-dataset-info) | `/api/v1/dataset/_info` |
| `DELETE` | [Delete a dataset](./api/delete-a-dataset) | `/api/v1/dataset/{pk}` |
| `GET` | [Get a dataset](./api/get-a-dataset) | `/api/v1/dataset/{pk}` |
| `PUT` | [Update a dataset](./api/update-a-dataset) | `/api/v1/dataset/{pk}` |
| `DELETE` | [Delete a dataset column](./api/delete-a-dataset-column) | `/api/v1/dataset/{pk}/column/{column_id}` |
| `DELETE` | [Delete a dataset metric](./api/delete-a-dataset-metric) | `/api/v1/dataset/{pk}/metric/{metric_id}` |
| `PUT` | [Refresh and update columns of a dataset](./api/refresh-and-update-columns-of-a-dataset) | `/api/v1/dataset/{pk}/refresh` |
| `GET` | [Get charts and dashboards count associated to a dataset](./api/get-charts-and-dashboards-count-associated-to-a-dataset) | `/api/v1/dataset/{pk}/related_objects` |
| `GET` | [Get distinct values from field data (dataset-distinct-column-name)](./api/get-distinct-values-from-field-data-dataset-distinct-column-name) | `/api/v1/dataset/distinct/{column_name}` |
| `POST` | [Duplicate a dataset](./api/duplicate-a-dataset) | `/api/v1/dataset/duplicate` |
| `GET` | [Download multiple datasets as YAML files](./api/download-multiple-datasets-as-yaml-files) | `/api/v1/dataset/export/` |
| `POST` | [Retrieve a table by name, or create it if it does not exist](./api/retrieve-a-table-by-name-or-create-it-if-it-does-not-exist) | `/api/v1/dataset/get_or_create/` |
| `POST` | [Import dataset(s) with associated databases](./api/import-dataset-s-with-associated-databases) | `/api/v1/dataset/import/` |
| `GET` | [Get related fields data (dataset-related-column-name)](./api/get-related-fields-data-dataset-related-column-name) | `/api/v1/dataset/related/{column_name}` |
| `PUT` | [Warm up the cache for each chart powered by the given table](./api/warm-up-the-cache-for-each-chart-powered-by-the-given-table) | `/api/v1/dataset/warm_up_cache` |
</details>
<details>
<summary><strong>Database</strong> (31 endpoints) — Manage database connections and metadata.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Get a list of databases](./api/get-a-list-of-databases) | `/api/v1/database/` |
| `POST` | [Create a new database](./api/create-a-new-database) | `/api/v1/database/` |
| `GET` | [Get metadata information about this API resource (database--info)](./api/get-metadata-information-about-this-api-resource-database-info) | `/api/v1/database/_info` |
| `DELETE` | [Delete a database](./api/delete-a-database) | `/api/v1/database/{pk}` |
| `GET` | [Get a database](./api/get-a-database) | `/api/v1/database/{pk}` |
| `PUT` | [Change a database](./api/change-a-database) | `/api/v1/database/{pk}` |
| `GET` | [Get all catalogs from a database](./api/get-all-catalogs-from-a-database) | `/api/v1/database/{pk}/catalogs/` |
| `GET` | [Get a database connection info](./api/get-a-database-connection-info) | `/api/v1/database/{pk}/connection` |
| `GET` | [Get function names supported by a database](./api/get-function-names-supported-by-a-database) | `/api/v1/database/{pk}/function_names/` |
| `GET` | [Get charts and dashboards count associated to a database](./api/get-charts-and-dashboards-count-associated-to-a-database) | `/api/v1/database/{pk}/related_objects/` |
| `GET` | [The list of the database schemas where to upload information](./api/the-list-of-the-database-schemas-where-to-upload-information) | `/api/v1/database/{pk}/schemas_access_for_file_upload/` |
| `GET` | [Get all schemas from a database](./api/get-all-schemas-from-a-database) | `/api/v1/database/{pk}/schemas/` |
| `GET` | [Get database select star for table (database-pk-select-star-table-name)](./api/get-database-select-star-for-table-database-pk-select-star-table-name) | `/api/v1/database/{pk}/select_star/{table_name}/` |
| `GET` | [Get database select star for table (database-pk-select-star-table-name-schema-name)](./api/get-database-select-star-for-table-database-pk-select-star-table-name-schema-name) | `/api/v1/database/{pk}/select_star/{table_name}/{schema_name}/` |
| `DELETE` | [Delete a SSH tunnel](./api/delete-a-ssh-tunnel) | `/api/v1/database/{pk}/ssh_tunnel/` |
| `POST` | [Re-sync all permissions for a database connection](./api/re-sync-all-permissions-for-a-database-connection) | `/api/v1/database/{pk}/sync_permissions/` |
| `GET` | [Get table extra metadata (database-pk-table-extra-table-name-schema-name)](./api/get-table-extra-metadata-database-pk-table-extra-table-name-schema-name) | `/api/v1/database/{pk}/table_extra/{table_name}/{schema_name}/` |
| `GET` | [Get table metadata](./api/get-table-metadata) | `/api/v1/database/{pk}/table_metadata/` |
| `GET` | [Get table extra metadata (database-pk-table-metadata-extra)](./api/get-table-extra-metadata-database-pk-table-metadata-extra) | `/api/v1/database/{pk}/table_metadata/extra/` |
| `GET` | [Get database table metadata](./api/get-database-table-metadata) | `/api/v1/database/{pk}/table/{table_name}/{schema_name}/` |
| `GET` | [Get a list of tables for given database](./api/get-a-list-of-tables-for-given-database) | `/api/v1/database/{pk}/tables/` |
| `POST` | [Upload a file to a database table](./api/upload-a-file-to-a-database-table) | `/api/v1/database/{pk}/upload/` |
| `POST` | [Validate arbitrary SQL](./api/validate-arbitrary-sql) | `/api/v1/database/{pk}/validate_sql/` |
| `GET` | [Get names of databases currently available](./api/get-names-of-databases-currently-available) | `/api/v1/database/available/` |
| `GET` | [Download database(s) and associated dataset(s) as a zip file](./api/download-database-s-and-associated-dataset-s-as-a-zip-file) | `/api/v1/database/export/` |
| `POST` | [Import database(s) with associated datasets](./api/import-database-s-with-associated-datasets) | `/api/v1/database/import/` |
| `GET` | [Receive personal access tokens from OAuth2](./api/receive-personal-access-tokens-from-oauth2) | `/api/v1/database/oauth2/` |
| `GET` | [Get related fields data (database-related-column-name)](./api/get-related-fields-data-database-related-column-name) | `/api/v1/database/related/{column_name}` |
| `POST` | [Test a database connection](./api/test-a-database-connection) | `/api/v1/database/test_connection/` |
| `POST` | [Upload a file and returns file metadata](./api/upload-a-file-and-returns-file-metadata) | `/api/v1/database/upload_metadata/` |
| `POST` | [Validate database connection parameters](./api/validate-database-connection-parameters) | `/api/v1/database/validate_parameters/` |
</details>
#### Data Exploration
<details>
<summary><strong>Explore</strong> (1 endpoints) — Chart exploration and data querying endpoints.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Assemble Explore related information in a single endpoint](./api/assemble-explore-related-information-in-a-single-endpoint) | `/api/v1/explore/` |
</details>
<details>
<summary><strong>SQL Lab</strong> (6 endpoints) — Execute SQL queries and manage SQL Lab sessions.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Get the bootstrap data for SqlLab page](./api/get-the-bootstrap-data-for-sqllab-page) | `/api/v1/sqllab/` |
| `POST` | [Estimate the SQL query execution cost](./api/estimate-the-sql-query-execution-cost) | `/api/v1/sqllab/estimate/` |
| `POST` | [Execute a SQL query](./api/execute-a-sql-query) | `/api/v1/sqllab/execute/` |
| `GET` | [Export the SQL query results to a CSV](./api/export-the-sql-query-results-to-a-csv) | `/api/v1/sqllab/export/{client_id}/` |
| `POST` | [Format SQL code](./api/format-sql-code) | `/api/v1/sqllab/format_sql/` |
| `GET` | [Get the result of a SQL query execution](./api/get-the-result-of-a-sql-query-execution) | `/api/v1/sqllab/results/` |
</details>
<details>
<summary><strong>Queries</strong> (17 endpoints) — View and manage SQL Lab query history.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Get a list of queries](./api/get-a-list-of-queries) | `/api/v1/query/` |
| `GET` | [Get query detail information](./api/get-query-detail-information) | `/api/v1/query/{pk}` |
| `GET` | [Get distinct values from field data (query-distinct-column-name)](./api/get-distinct-values-from-field-data-query-distinct-column-name) | `/api/v1/query/distinct/{column_name}` |
| `GET` | [Get related fields data (query-related-column-name)](./api/get-related-fields-data-query-related-column-name) | `/api/v1/query/related/{column_name}` |
| `POST` | [Manually stop a query with client_id](./api/manually-stop-a-query-with-client-id) | `/api/v1/query/stop` |
| `GET` | [Get a list of queries that changed after last_updated_ms](./api/get-a-list-of-queries-that-changed-after-last-updated-ms) | `/api/v1/query/updated_since` |
| `DELETE` | [Bulk delete saved queries](./api/bulk-delete-saved-queries) | `/api/v1/saved_query/` |
| `GET` | [Get a list of saved queries](./api/get-a-list-of-saved-queries) | `/api/v1/saved_query/` |
| `POST` | [Create a saved query](./api/create-a-saved-query) | `/api/v1/saved_query/` |
| `GET` | [Get metadata information about this API resource (saved-query--info)](./api/get-metadata-information-about-this-api-resource-saved-query-info) | `/api/v1/saved_query/_info` |
| `DELETE` | [Delete a saved query](./api/delete-a-saved-query) | `/api/v1/saved_query/{pk}` |
| `GET` | [Get a saved query](./api/get-a-saved-query) | `/api/v1/saved_query/{pk}` |
| `PUT` | [Update a saved query](./api/update-a-saved-query) | `/api/v1/saved_query/{pk}` |
| `GET` | [Get distinct values from field data (saved-query-distinct-column-name)](./api/get-distinct-values-from-field-data-saved-query-distinct-column-name) | `/api/v1/saved_query/distinct/{column_name}` |
| `GET` | [Download multiple saved queries as YAML files](./api/download-multiple-saved-queries-as-yaml-files) | `/api/v1/saved_query/export/` |
| `POST` | [Import saved queries with associated databases](./api/import-saved-queries-with-associated-databases) | `/api/v1/saved_query/import/` |
| `GET` | [Get related fields data (saved-query-related-column-name)](./api/get-related-fields-data-saved-query-related-column-name) | `/api/v1/saved_query/related/{column_name}` |
</details>
<details>
<summary><strong>Datasources</strong> (1 endpoints) — Query datasource metadata and column values.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Get possible values for a datasource column](./api/get-possible-values-for-a-datasource-column) | `/api/v1/datasource/{datasource_type}/{datasource_id}/column/{column_name}/values/` |
</details>
<details>
<summary><strong>Advanced Data Type</strong> (2 endpoints) — Endpoints for advanced data type operations and conversions.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Return an AdvancedDataTypeResponse](./api/return-an-advanceddatatyperesponse) | `/api/v1/advanced_data_type/convert` |
| `GET` | [Return a list of available advanced data types](./api/return-a-list-of-available-advanced-data-types) | `/api/v1/advanced_data_type/types` |
</details>
#### Organization & Customization
<details>
<summary><strong>Tags</strong> (15 endpoints) — Organize assets with tags.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `DELETE` | [Bulk delete tags](./api/bulk-delete-tags) | `/api/v1/tag/` |
| `GET` | [Get a list of tags](./api/get-a-list-of-tags) | `/api/v1/tag/` |
| `POST` | [Create a tag](./api/create-a-tag) | `/api/v1/tag/` |
| `GET` | [Get metadata information about tag API endpoints](./api/get-metadata-information-about-tag-api-endpoints) | `/api/v1/tag/_info` |
| `POST` | [Add tags to an object](./api/add-tags-to-an-object) | `/api/v1/tag/{object_type}/{object_id}/` |
| `DELETE` | [Delete a tagged object](./api/delete-a-tagged-object) | `/api/v1/tag/{object_type}/{object_id}/{tag}/` |
| `DELETE` | [Delete a tag](./api/delete-a-tag) | `/api/v1/tag/{pk}` |
| `GET` | [Get a tag detail information](./api/get-a-tag-detail-information) | `/api/v1/tag/{pk}` |
| `PUT` | [Update a tag](./api/update-a-tag) | `/api/v1/tag/{pk}` |
| `DELETE` | [Delete tag by pk favorites](./api/delete-tag-by-pk-favorites) | `/api/v1/tag/{pk}/favorites/` |
| `POST` | [Create tag by pk favorites](./api/create-tag-by-pk-favorites) | `/api/v1/tag/{pk}/favorites/` |
| `POST` | [Bulk create tags and tagged objects](./api/bulk-create-tags-and-tagged-objects) | `/api/v1/tag/bulk_create` |
| `GET` | [Get tag favorite status](./api/get-tag-favorite-status) | `/api/v1/tag/favorite_status/` |
| `GET` | [Get all objects associated with a tag](./api/get-all-objects-associated-with-a-tag) | `/api/v1/tag/get_objects/` |
| `GET` | [Get related fields data (tag-related-column-name)](./api/get-related-fields-data-tag-related-column-name) | `/api/v1/tag/related/{column_name}` |
</details>
<details>
<summary><strong>Annotation Layers</strong> (14 endpoints) — Manage annotation layers and annotations for charts.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `DELETE` | [Delete multiple annotation layers in a bulk operation](./api/delete-multiple-annotation-layers-in-a-bulk-operation) | `/api/v1/annotation_layer/` |
| `GET` | [Get a list of annotation layers (annotation-layer)](./api/get-a-list-of-annotation-layers-annotation-layer) | `/api/v1/annotation_layer/` |
| `POST` | [Create an annotation layer (annotation-layer)](./api/create-an-annotation-layer-annotation-layer) | `/api/v1/annotation_layer/` |
| `GET` | [Get metadata information about this API resource (annotation-layer--info)](./api/get-metadata-information-about-this-api-resource-annotation-layer-info) | `/api/v1/annotation_layer/_info` |
| `DELETE` | [Delete annotation layer (annotation-layer-pk)](./api/delete-annotation-layer-annotation-layer-pk) | `/api/v1/annotation_layer/{pk}` |
| `GET` | [Get an annotation layer (annotation-layer-pk)](./api/get-an-annotation-layer-annotation-layer-pk) | `/api/v1/annotation_layer/{pk}` |
| `PUT` | [Update an annotation layer (annotation-layer-pk)](./api/update-an-annotation-layer-annotation-layer-pk) | `/api/v1/annotation_layer/{pk}` |
| `DELETE` | [Bulk delete annotation layers](./api/bulk-delete-annotation-layers) | `/api/v1/annotation_layer/{pk}/annotation/` |
| `GET` | [Get a list of annotation layers (annotation-layer-pk-annotation)](./api/get-a-list-of-annotation-layers-annotation-layer-pk-annotation) | `/api/v1/annotation_layer/{pk}/annotation/` |
| `POST` | [Create an annotation layer (annotation-layer-pk-annotation)](./api/create-an-annotation-layer-annotation-layer-pk-annotation) | `/api/v1/annotation_layer/{pk}/annotation/` |
| `DELETE` | [Delete annotation layer (annotation-layer-pk-annotation-annotation-id)](./api/delete-annotation-layer-annotation-layer-pk-annotation-annotation-id) | `/api/v1/annotation_layer/{pk}/annotation/{annotation_id}` |
| `GET` | [Get an annotation layer (annotation-layer-pk-annotation-annotation-id)](./api/get-an-annotation-layer-annotation-layer-pk-annotation-annotation-id) | `/api/v1/annotation_layer/{pk}/annotation/{annotation_id}` |
| `PUT` | [Update an annotation layer (annotation-layer-pk-annotation-annotation-id)](./api/update-an-annotation-layer-annotation-layer-pk-annotation-annotation-id) | `/api/v1/annotation_layer/{pk}/annotation/{annotation_id}` |
| `GET` | [Get related fields data (annotation-layer-related-column-name)](./api/get-related-fields-data-annotation-layer-related-column-name) | `/api/v1/annotation_layer/related/{column_name}` |
</details>
<details>
<summary><strong>CSS Templates</strong> (8 endpoints) — Manage CSS templates for custom dashboard styling.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `DELETE` | [Bulk delete CSS templates](./api/bulk-delete-css-templates) | `/api/v1/css_template/` |
| `GET` | [Get a list of CSS templates](./api/get-a-list-of-css-templates) | `/api/v1/css_template/` |
| `POST` | [Create a CSS template](./api/create-a-css-template) | `/api/v1/css_template/` |
| `GET` | [Get metadata information about this API resource (css-template--info)](./api/get-metadata-information-about-this-api-resource-css-template-info) | `/api/v1/css_template/_info` |
| `DELETE` | [Delete a CSS template](./api/delete-a-css-template) | `/api/v1/css_template/{pk}` |
| `GET` | [Get a CSS template](./api/get-a-css-template) | `/api/v1/css_template/{pk}` |
| `PUT` | [Update a CSS template](./api/update-a-css-template) | `/api/v1/css_template/{pk}` |
| `GET` | [Get related fields data (css-template-related-column-name)](./api/get-related-fields-data-css-template-related-column-name) | `/api/v1/css_template/related/{column_name}` |
</details>
#### Sharing & Embedding
<details>
<summary><strong>Dashboard Permanent Link</strong> (2 endpoints) — Create and retrieve permanent links to dashboard states.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `POST` | [Create a new dashboard's permanent link](./api/create-a-new-dashboard-s-permanent-link) | `/api/v1/dashboard/{pk}/permalink` |
| `GET` | [Get dashboard's permanent link state](./api/get-dashboard-s-permanent-link-state) | `/api/v1/dashboard/permalink/{key}` |
</details>
<details>
<summary><strong>Explore Permanent Link</strong> (2 endpoints) — Create and retrieve permanent links to chart explore states.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `POST` | [Create a new permanent link (explore-permalink)](./api/create-a-new-permanent-link-explore-permalink) | `/api/v1/explore/permalink` |
| `GET` | [Get chart's permanent link state](./api/get-chart-s-permanent-link-state) | `/api/v1/explore/permalink/{key}` |
</details>
<details>
<summary><strong>SQL Lab Permanent Link</strong> (2 endpoints) — Create and retrieve permanent links to SQL Lab states.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `POST` | [Create a new permanent link (sqllab-permalink)](./api/create-a-new-permanent-link-sqllab-permalink) | `/api/v1/sqllab/permalink` |
| `GET` | [Get permanent link state for SQLLab editor.](./api/get-permanent-link-state-for-sqllab-editor) | `/api/v1/sqllab/permalink/{key}` |
</details>
<details>
<summary><strong>Embedded Dashboard</strong> (1 endpoints) — Configure embedded dashboard settings.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Get a report schedule log (embedded-dashboard-uuid)](./api/get-a-report-schedule-log-embedded-dashboard-uuid) | `/api/v1/embedded_dashboard/{uuid}` |
</details>
<details>
<summary><strong>Dashboard Filter State</strong> (4 endpoints) — Manage temporary filter state for dashboards.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `POST` | [Create a dashboard's filter state](./api/create-a-dashboard-s-filter-state) | `/api/v1/dashboard/{pk}/filter_state` |
| `DELETE` | [Delete a dashboard's filter state value](./api/delete-a-dashboard-s-filter-state-value) | `/api/v1/dashboard/{pk}/filter_state/{key}` |
| `GET` | [Get a dashboard's filter state value](./api/get-a-dashboard-s-filter-state-value) | `/api/v1/dashboard/{pk}/filter_state/{key}` |
| `PUT` | [Update a dashboard's filter state value](./api/update-a-dashboard-s-filter-state-value) | `/api/v1/dashboard/{pk}/filter_state/{key}` |
</details>
<details>
<summary><strong>Explore Form Data</strong> (4 endpoints) — Manage temporary form data for chart exploration.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `POST` | [Create a new form_data](./api/create-a-new-form-data) | `/api/v1/explore/form_data` |
| `DELETE` | [Delete a form_data](./api/delete-a-form-data) | `/api/v1/explore/form_data/{key}` |
| `GET` | [Get a form_data](./api/get-a-form-data) | `/api/v1/explore/form_data/{key}` |
| `PUT` | [Update an existing form_data](./api/update-an-existing-form-data) | `/api/v1/explore/form_data/{key}` |
</details>
#### Scheduling & Alerts
<details>
<summary><strong>Report Schedules</strong> (11 endpoints) — Configure scheduled reports and alerts.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `DELETE` | [Bulk delete report schedules](./api/bulk-delete-report-schedules) | `/api/v1/report/` |
| `GET` | [Get a list of report schedules](./api/get-a-list-of-report-schedules) | `/api/v1/report/` |
| `POST` | [Create a report schedule](./api/create-a-report-schedule) | `/api/v1/report/` |
| `GET` | [Get metadata information about this API resource (report--info)](./api/get-metadata-information-about-this-api-resource-report-info) | `/api/v1/report/_info` |
| `DELETE` | [Delete a report schedule](./api/delete-a-report-schedule) | `/api/v1/report/{pk}` |
| `GET` | [Get a report schedule](./api/get-a-report-schedule) | `/api/v1/report/{pk}` |
| `PUT` | [Update a report schedule](./api/update-a-report-schedule) | `/api/v1/report/{pk}` |
| `GET` | [Get a list of report schedule logs](./api/get-a-list-of-report-schedule-logs) | `/api/v1/report/{pk}/log/` |
| `GET` | [Get a report schedule log (report-pk-log-log-id)](./api/get-a-report-schedule-log-report-pk-log-log-id) | `/api/v1/report/{pk}/log/{log_id}` |
| `GET` | [Get related fields data (report-related-column-name)](./api/get-related-fields-data-report-related-column-name) | `/api/v1/report/related/{column_name}` |
| `GET` | [Get slack channels](./api/get-slack-channels) | `/api/v1/report/slack_channels/` |
</details>
#### Security & Access Control
<details>
<summary><strong>Security Roles</strong> (10 endpoints) — Manage security roles and their permissions.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Get security roles](./api/get-security-roles) | `/api/v1/security/roles/` |
| `POST` | [Create security roles](./api/create-security-roles) | `/api/v1/security/roles/` |
| `GET` | [Get security roles info](./api/get-security-roles-info) | `/api/v1/security/roles/_info` |
| `DELETE` | [Delete security roles by pk](./api/delete-security-roles-by-pk) | `/api/v1/security/roles/{pk}` |
| `GET` | [Get security roles by pk](./api/get-security-roles-by-pk) | `/api/v1/security/roles/{pk}` |
| `PUT` | [Update security roles by pk](./api/update-security-roles-by-pk) | `/api/v1/security/roles/{pk}` |
| `POST` | [Create security roles by role_id permissions](./api/create-security-roles-by-role-id-permissions) | `/api/v1/security/roles/{role_id}/permissions` |
| `GET` | [Get security roles by role_id permissions](./api/get-security-roles-by-role-id-permissions) | `/api/v1/security/roles/{role_id}/permissions/` |
| `PUT` | [Update security roles by role_id users](./api/update-security-roles-by-role-id-users) | `/api/v1/security/roles/{role_id}/users` |
| `GET` | [List roles](./api/list-roles) | `/api/v1/security/roles/search/` |
</details>
<details>
<summary><strong>Security Users</strong> (6 endpoints) — Manage user accounts.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Get security users](./api/get-security-users) | `/api/v1/security/users/` |
| `POST` | [Create security users](./api/create-security-users) | `/api/v1/security/users/` |
| `GET` | [Get security users info](./api/get-security-users-info) | `/api/v1/security/users/_info` |
| `DELETE` | [Delete security users by pk](./api/delete-security-users-by-pk) | `/api/v1/security/users/{pk}` |
| `GET` | [Get security users by pk](./api/get-security-users-by-pk) | `/api/v1/security/users/{pk}` |
| `PUT` | [Update security users by pk](./api/update-security-users-by-pk) | `/api/v1/security/users/{pk}` |
</details>
<details>
<summary><strong>Security Permissions</strong> (3 endpoints) — View available permissions.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Get security permissions](./api/get-security-permissions) | `/api/v1/security/permissions/` |
| `GET` | [Get security permissions info](./api/get-security-permissions-info) | `/api/v1/security/permissions/_info` |
| `GET` | [Get security permissions by pk](./api/get-security-permissions-by-pk) | `/api/v1/security/permissions/{pk}` |
</details>
<details>
<summary><strong>Security Resources (View Menus)</strong> (6 endpoints) — Manage security resources (view menus).</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Get security resources](./api/get-security-resources) | `/api/v1/security/resources/` |
| `POST` | [Create security resources](./api/create-security-resources) | `/api/v1/security/resources/` |
| `GET` | [Get security resources info](./api/get-security-resources-info) | `/api/v1/security/resources/_info` |
| `DELETE` | [Delete security resources by pk](./api/delete-security-resources-by-pk) | `/api/v1/security/resources/{pk}` |
| `GET` | [Get security resources by pk](./api/get-security-resources-by-pk) | `/api/v1/security/resources/{pk}` |
| `PUT` | [Update security resources by pk](./api/update-security-resources-by-pk) | `/api/v1/security/resources/{pk}` |
</details>
<details>
<summary><strong>Security Permissions on Resources (View Menus)</strong> (6 endpoints) — Manage permission-resource mappings.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Get security permissions resources](./api/get-security-permissions-resources) | `/api/v1/security/permissions-resources/` |
| `POST` | [Create security permissions resources](./api/create-security-permissions-resources) | `/api/v1/security/permissions-resources/` |
| `GET` | [Get security permissions resources info](./api/get-security-permissions-resources-info) | `/api/v1/security/permissions-resources/_info` |
| `DELETE` | [Delete security permissions resources by pk](./api/delete-security-permissions-resources-by-pk) | `/api/v1/security/permissions-resources/{pk}` |
| `GET` | [Get security permissions resources by pk](./api/get-security-permissions-resources-by-pk) | `/api/v1/security/permissions-resources/{pk}` |
| `PUT` | [Update security permissions resources by pk](./api/update-security-permissions-resources-by-pk) | `/api/v1/security/permissions-resources/{pk}` |
</details>
<details>
<summary><strong>Row Level Security</strong> (8 endpoints) — Manage row-level security rules for data access control.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `DELETE` | [Bulk delete RLS rules](./api/bulk-delete-rls-rules) | `/api/v1/rowlevelsecurity/` |
| `GET` | [Get a list of RLS](./api/get-a-list-of-rls) | `/api/v1/rowlevelsecurity/` |
| `POST` | [Create a new RLS rule](./api/create-a-new-rls-rule) | `/api/v1/rowlevelsecurity/` |
| `GET` | [Get metadata information about this API resource (rowlevelsecurity--info)](./api/get-metadata-information-about-this-api-resource-rowlevelsecurity-info) | `/api/v1/rowlevelsecurity/_info` |
| `DELETE` | [Delete an RLS](./api/delete-an-rls) | `/api/v1/rowlevelsecurity/{pk}` |
| `GET` | [Get an RLS](./api/get-an-rls) | `/api/v1/rowlevelsecurity/{pk}` |
| `PUT` | [Update an RLS rule](./api/update-an-rls-rule) | `/api/v1/rowlevelsecurity/{pk}` |
| `GET` | [Get related fields data (rowlevelsecurity-related-column-name)](./api/get-related-fields-data-rowlevelsecurity-related-column-name) | `/api/v1/rowlevelsecurity/related/{column_name}` |
</details>
#### Import/Export & Administration
<details>
<summary><strong>Import/export</strong> (2 endpoints) — Import and export Superset assets (dashboards, charts, databases).</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Export all assets](./api/export-all-assets) | `/api/v1/assets/export/` |
| `POST` | [Import multiple assets](./api/import-multiple-assets) | `/api/v1/assets/import/` |
</details>
<details>
<summary><strong>CacheRestApi</strong> (1 endpoints) — Cache management and invalidation operations.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `POST` | [Invalidate cache records and remove the database records](./api/invalidate-cache-records-and-remove-the-database-records) | `/api/v1/cachekey/invalidate` |
</details>
<details>
<summary><strong>LogRestApi</strong> (4 endpoints) — Access audit logs and activity history.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Get a list of logs](./api/get-a-list-of-logs) | `/api/v1/log/` |
| `POST` | [Create log](./api/create-log) | `/api/v1/log/` |
| `GET` | [Get a log detail information](./api/get-a-log-detail-information) | `/api/v1/log/{pk}` |
| `GET` | [Get recent activity data for a user](./api/get-recent-activity-data-for-a-user) | `/api/v1/log/recent_activity/` |
</details>
#### User & System
<details>
<summary><strong>Current User</strong> (2 endpoints) — Get information about the currently authenticated user.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Get the user object](./api/get-the-user-object) | `/api/v1/me/` |
| `GET` | [Get the user roles](./api/get-the-user-roles) | `/api/v1/me/roles/` |
</details>
<details>
<summary><strong>User</strong> (1 endpoints) — User profile and preferences.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Get the user avatar](./api/get-the-user-avatar) | `/api/v1/user/{user_id}/avatar.png` |
</details>
<details>
<summary><strong>Menu</strong> (1 endpoints) — Get the Superset menu structure.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Get menu](./api/get-menu) | `/api/v1/menu/` |
</details>
<details>
<summary><strong>Available Domains</strong> (1 endpoints) — Get available domains for the Superset instance.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Get all available domains](./api/get-all-available-domains) | `/api/v1/available_domains/` |
</details>
<details>
<summary><strong>AsyncEventsRestApi</strong> (1 endpoints) — Real-time event streaming via Server-Sent Events (SSE).</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Read off of the Redis events stream](./api/read-off-of-the-redis-events-stream) | `/api/v1/async_event/` |
</details>
<details>
<summary><strong>OpenApi</strong> (1 endpoints) — Access the OpenAPI specification.</summary>
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | [Get api by version openapi](./api/get-api-by-version-openapi) | `/api/{version}/_openapi` |
</details>
---
### Additional Resources
- [Superset REST API Blog Post](https://preset.io/blog/2020-10-01-superset-api/)
- [Accessing APIs with Superset](https://preset.io/blog/accessing-apis-with-superset/)

View File

@@ -1,71 +0,0 @@
---
title: Components TODO
sidebar_class_name: hidden
---
# Components TODO
These components were found but not yet supported for documentation generation.
Future phases will add support for these sources.
## Summary
- **Total skipped:** 19 story files
- **Reason:** Import path resolution not yet implemented
## Skipped by Source
### App Components
9 components
- [ ] `superset-frontend/src/components/AlteredSliceTag/AlteredSliceTag.stories.tsx`
- [ ] `superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.stories.tsx`
- [ ] `superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx`
- [ ] `superset-frontend/src/components/ErrorMessage/ErrorAlert.stories.tsx`
- [ ] `superset-frontend/src/components/FacePile/FacePile.stories.tsx`
- [ ] `superset-frontend/src/components/FilterableTable/FilterableTable.stories.tsx`
- [ ] `superset-frontend/src/components/RowCountLabel/RowCountLabel.stories.tsx`
- [ ] `superset-frontend/src/components/Tag/Tag.stories.tsx`
- [ ] `superset-frontend/src/components/TagsList/TagsList.stories.tsx`
### Dashboard Components
2 components
- [ ] `superset-frontend/src/dashboard/components/AnchorLink/AnchorLink.stories.tsx`
- [ ] `superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.stories.tsx`
### Explore Components
4 components
- [ ] `superset-frontend/src/explore/components/ControlHeader.stories.tsx`
- [ ] `superset-frontend/src/explore/components/RunQueryButton/RunQueryButton.stories.tsx`
- [ ] `superset-frontend/src/explore/components/controls/BoundsControl.stories.tsx`
- [ ] `superset-frontend/src/explore/components/controls/SliderControl.stories.tsx`
### Feature Components
2 components
- [ ] `superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.stories.tsx`
- [ ] `superset-frontend/src/features/home/LanguagePicker.stories.tsx`
### Filter Components
2 components
- [ ] `superset-frontend/src/filters/components/Range/RangeFilterPlugin.stories.tsx`
- [ ] `superset-frontend/src/filters/components/Select/SelectFilterPlugin.stories.tsx`
## How to Add Support
1. Determine the correct import path for the source
2. Update `generate-superset-components.mjs` to handle the source
3. Add source to `SUPPORTED_SOURCES` array
4. Re-run the generator
---
*Auto-generated by generate-superset-components.mjs*

View File

@@ -1,167 +0,0 @@
---
title: DropdownContainer
sidebar_label: DropdownContainer
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# DropdownContainer
DropdownContainer arranges items horizontally and moves overflowing items into a dropdown popover. Resize the container to see the overflow behavior.
## Live Example
<StoryWithControls
component="DropdownContainer"
props={{
style: {
maxWidth: 360
},
items: [
{
id: "item-0",
element: {
component: "Tag",
props: {
children: "Region",
color: "blue"
}
}
},
{
id: "item-1",
element: {
component: "Tag",
props: {
children: "Category",
color: "blue"
}
}
},
{
id: "item-2",
element: {
component: "Tag",
props: {
children: "Date Range",
color: "blue"
}
}
},
{
id: "item-3",
element: {
component: "Tag",
props: {
children: "Status",
color: "blue"
}
}
},
{
id: "item-4",
element: {
component: "Tag",
props: {
children: "Owner",
color: "blue"
}
}
},
{
id: "item-5",
element: {
component: "Tag",
props: {
children: "Priority",
color: "blue"
}
}
}
]
}}
controls={[]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
const items = Array.from({ length: 6 }, (_, i) => ({
id: 'item-' + i,
element: React.createElement('div', {
style: {
minWidth: 120,
padding: '4px 12px',
background: '#e6f4ff',
border: '1px solid #91caff',
borderRadius: 4,
},
}, 'Filter ' + (i + 1)),
}));
return (
<div style={{ width: 400, resize: 'horizontal', overflow: 'auto', border: '1px solid #e8e8e8', padding: 16 }}>
<DropdownContainer items={items} />
<div style={{ marginTop: 8, color: '#999', fontSize: 12 }}>
Drag the right edge to resize and see items overflow into a dropdown
</div>
</div>
);
}
```
## With Select Filters
```tsx live
function SelectFilters() {
const items = ['Region', 'Category', 'Date Range', 'Status', 'Owner'].map(
(label, i) => ({
id: 'filter-' + i,
element: React.createElement('div', {
style: { minWidth: 150, padding: '4px 12px', background: '#f5f5f5', border: '1px solid #d9d9d9', borderRadius: 4 },
}, label + ': All'),
})
);
return (
<div style={{ width: 500, resize: 'horizontal', overflow: 'auto', border: '1px solid #e8e8e8', padding: 16 }}>
<DropdownContainer items={items} />
</div>
);
}
```
## Import
```tsx
import { DropdownContainer } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.stories.tsx).
:::

View File

@@ -1,197 +0,0 @@
---
title: Flex
sidebar_label: Flex
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Flex
The Flex component from Superset's UI library.
## Live Example
<StoryWithControls
component="Flex"
props={{
vertical: false,
wrap: "nowrap",
justify: "normal",
align: "normal",
flex: "normal",
gap: "small"
}}
controls={[
{
name: "vertical",
label: "Vertical",
type: "boolean"
},
{
name: "wrap",
label: "Wrap",
type: "select",
options: [
"nowrap",
"wrap",
"wrap-reverse"
]
},
{
name: "justify",
label: "Justify",
type: "select",
options: [
"start",
"center",
"space-between",
"space-around",
"space-evenly"
]
},
{
name: "align",
label: "Align",
type: "select",
options: [
"start",
"center",
"end",
"stretch"
]
},
{
name: "flex",
label: "Flex",
type: "string"
},
{
name: "gap",
label: "Gap",
type: "select",
options: [
"small",
"medium",
"large"
]
}
]}
sampleChildren={["Item 1","Item 2","Item 3","Item 4","Item 5"]}
sampleChildrenStyle={{padding:"8px 16px",background:"#e6f4ff",border:"1px solid #91caff",borderRadius:"4px"}}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Flex gap="small" wrap="wrap">
{['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'].map(item => (
<div
key={item}
style={{
padding: '8px 16px',
background: '#e6f4ff',
border: '1px solid #91caff',
borderRadius: 4,
}}
>
{item}
</div>
))}
</Flex>
);
}
```
## Vertical Layout
```tsx live
function VerticalFlex() {
return (
<Flex vertical gap="small">
<Button buttonStyle="primary">Primary</Button>
<Button buttonStyle="dashed">Dashed</Button>
<Button buttonStyle="link">Link</Button>
</Flex>
);
}
```
## Justify and Align
```tsx live
function JustifyAlign() {
const boxStyle = {
width: '100%',
height: 120,
borderRadius: 6,
border: '1px solid #40a9ff',
};
const itemStyle = {
width: 60,
height: 40,
backgroundColor: '#1677ff',
borderRadius: 4,
};
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
{['flex-start', 'center', 'flex-end', 'space-between', 'space-around'].map(justify => (
<div key={justify}>
<span style={{ marginBottom: 4, display: 'block', color: '#666' }}>{justify}</span>
<Flex style={boxStyle} justify={justify} align="center">
<div style={itemStyle} />
<div style={itemStyle} />
<div style={itemStyle} />
</Flex>
</div>
))}
</div>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `vertical` | `boolean` | `false` | - |
| `wrap` | `string` | `"nowrap"` | - |
| `justify` | `string` | `"normal"` | - |
| `align` | `string` | `"normal"` | - |
| `flex` | `string` | `"normal"` | - |
| `gap` | `string` | `"small"` | - |
## Import
```tsx
import { Flex } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Flex/Flex.stories.tsx).
:::

View File

@@ -1,192 +0,0 @@
---
title: Grid
sidebar_label: Grid
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Grid
The Grid system of Ant Design is based on a 24-grid layout. The `Row` and `Col` components are used to create flexible and responsive grid layouts.
## Live Example
<StoryWithControls
component="Grid"
renderComponent="Row"
props={{
align: "top",
justify: "start",
wrap: true,
gutter: 16
}}
controls={[
{
name: "align",
label: "Align",
type: "select",
options: [
"top",
"middle",
"bottom",
"stretch"
],
description: "Vertical alignment of columns within the row."
},
{
name: "justify",
label: "Justify",
type: "select",
options: [
"start",
"end",
"center",
"space-around",
"space-between",
"space-evenly"
],
description: "Horizontal distribution of columns within the row."
},
{
name: "wrap",
label: "Wrap",
type: "boolean",
description: "Whether columns are allowed to wrap to the next line."
},
{
name: "gutter",
label: "Gutter",
type: "number",
description: "Spacing between columns in pixels."
}
]}
sampleChildren={[{"component":"Col","props":{"span":4,"children":"col-4","style":{"background":"#e6f4ff","padding":"8px","border":"1px solid #91caff","textAlign":"center"}}},{"component":"Col","props":{"span":4,"children":"col-4 (tall)","style":{"background":"#e6f4ff","padding":"24px 8px","border":"1px solid #91caff","textAlign":"center"}}},{"component":"Col","props":{"span":4,"children":"col-4","style":{"background":"#e6f4ff","padding":"8px","border":"1px solid #91caff","textAlign":"center"}}}]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Row gutter={[16, 16]}>
<Col span={12}>
<div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-12</div>
</Col>
<Col span={12}>
<div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-12</div>
</Col>
<Col span={8}>
<div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-8</div>
</Col>
<Col span={8}>
<div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-8</div>
</Col>
<Col span={8}>
<div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-8</div>
</Col>
</Row>
);
}
```
## Responsive Grid
```tsx live
function ResponsiveGrid() {
return (
<Row gutter={[16, 16]}>
<Col xs={24} sm={12} md={8} lg={6}>
<div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
Responsive
</div>
</Col>
<Col xs={24} sm={12} md={8} lg={6}>
<div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
Responsive
</div>
</Col>
<Col xs={24} sm={12} md={8} lg={6}>
<div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
Responsive
</div>
</Col>
<Col xs={24} sm={12} md={8} lg={6}>
<div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
Responsive
</div>
</Col>
</Row>
);
}
```
## Alignment
```tsx live
function AlignmentDemo() {
const boxStyle = { background: '#e6f4ff', padding: '16px 0', border: '1px solid #91caff', textAlign: 'center' };
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
<Row justify="start" gutter={8}>
<Col span={4}><div style={boxStyle}>start</div></Col>
<Col span={4}><div style={boxStyle}>start</div></Col>
</Row>
<Row justify="center" gutter={8}>
<Col span={4}><div style={boxStyle}>center</div></Col>
<Col span={4}><div style={boxStyle}>center</div></Col>
</Row>
<Row justify="end" gutter={8}>
<Col span={4}><div style={boxStyle}>end</div></Col>
<Col span={4}><div style={boxStyle}>end</div></Col>
</Row>
<Row justify="space-between" gutter={8}>
<Col span={4}><div style={boxStyle}>between</div></Col>
<Col span={4}><div style={boxStyle}>between</div></Col>
</Row>
</div>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `align` | `string` | `"top"` | Vertical alignment of columns within the row. |
| `justify` | `string` | `"start"` | Horizontal distribution of columns within the row. |
| `wrap` | `boolean` | `true` | Whether columns are allowed to wrap to the next line. |
| `gutter` | `number` | `16` | Spacing between columns in pixels. |
## Import
```tsx
import Grid from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Grid/Grid.stories.tsx).
:::

View File

@@ -1,38 +0,0 @@
---
title: Layout Components
sidebar_label: Layout Components
sidebar_position: 1
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Layout Components
7 components available in this category.
## Components
- [DropdownContainer](./dropdowncontainer)
- [Flex](./flex)
- [Grid](./grid)
- [Layout](./layout)
- [MetadataBar](./metadatabar)
- [Space](./space)
- [Table](./table)

View File

@@ -1,139 +0,0 @@
---
title: Layout
sidebar_label: Layout
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Layout
Ant Design Layout component with configurable Sider, Header, Footer, and Content.
## Live Example
<StoryWithControls
component="Layout"
props={{
hasSider: false,
style: {
minHeight: 200
}
}}
controls={[
{
name: "hasSider",
label: "Has Sider",
type: "boolean",
description: "Whether the layout contains a Sider sub-component."
}
]}
sampleChildren={[{"component":"Layout.Header","props":{"children":"Header","style":{"background":"#001529","color":"#fff","padding":"0 24px","lineHeight":"64px"}}},{"component":"Layout.Content","props":{"children":"Content Area","style":{"padding":"24px","background":"#fff","flex":1}}},{"component":"Layout.Footer","props":{"children":"Footer","style":{"textAlign":"center","background":"#f5f5f5","padding":"12px"}}}]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Layout style={{ minHeight: '300px' }}>
<Layout.Sider theme="dark" width={200}>
<div style={{ color: '#fff', padding: '16px' }}>Sidebar</div>
</Layout.Sider>
<Layout>
<Layout.Header style={{ background: '#fff', padding: '0 16px' }}>
Header
</Layout.Header>
<Layout.Content style={{ margin: '16px', padding: '24px', background: '#fff' }}>
Content
</Layout.Content>
<Layout.Footer style={{ textAlign: 'center' }}>
Footer
</Layout.Footer>
</Layout>
</Layout>
);
}
```
## Content Only
```tsx live
function ContentOnly() {
return (
<Layout>
<Layout.Header style={{ background: '#001529', color: '#fff', padding: '0 24px', lineHeight: '64px' }}>
Application Header
</Layout.Header>
<Layout.Content style={{ padding: '24px', minHeight: '200px', background: '#fff' }}>
Main content area without a sidebar
</Layout.Content>
<Layout.Footer style={{ textAlign: 'center', background: '#f5f5f5' }}>
Footer Content
</Layout.Footer>
</Layout>
);
}
```
## Right Sidebar
```tsx live
function RightSidebar() {
return (
<Layout style={{ minHeight: '300px' }}>
<Layout>
<Layout.Header style={{ background: '#fff', padding: '0 24px' }}>
Header
</Layout.Header>
<Layout.Content style={{ padding: '24px', background: '#fff' }}>
Content with right sidebar
</Layout.Content>
</Layout>
<Layout.Sider theme="light" width={200} style={{ background: '#fafafa' }}>
<div style={{ padding: '16px' }}>Right Sidebar</div>
</Layout.Sider>
</Layout>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `hasSider` | `boolean` | `false` | Whether the layout contains a Sider sub-component. |
| `style` | `any` | `{"minHeight":200}` | - |
## Import
```tsx
import { Layout } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Layout/Layout.stories.tsx).
:::

View File

@@ -1,174 +0,0 @@
---
title: MetadataBar
sidebar_label: MetadataBar
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# MetadataBar
MetadataBar displays a row of metadata items (SQL info, owners, last modified, tags, dashboards, etc.) that collapse responsively based on available width.
## Live Example
<StoryWithControls
component="MetadataBar"
props={{
title: "Added to 3 dashboards",
createdBy: "Jane Smith",
modifiedBy: "Jane Smith",
description: "To preview the list of dashboards go to More settings.",
items: [
{
type: "sql",
title: "Click to view query"
},
{
type: "owner",
createdBy: "Jane Smith",
owners: [
"John Doe",
"Mary Wilson"
],
createdOn: "a week ago"
},
{
type: "lastModified",
value: "a week ago",
modifiedBy: "Jane Smith"
},
{
type: "tags",
values: [
"management",
"research",
"poc"
]
},
{
type: "dashboards",
title: "Added to 3 dashboards",
description: "To preview the list of dashboards go to More settings."
}
]
}}
controls={[
{
name: "title",
label: "Title",
type: "text"
},
{
name: "createdBy",
label: "Created By",
type: "text"
},
{
name: "modifiedBy",
label: "Modified By",
type: "text"
},
{
name: "description",
label: "Description",
type: "text"
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
const items = [
{ type: 'sql', title: 'Click to view query' },
{
type: 'owner',
createdBy: 'Jane Smith',
owners: ['John Doe', 'Mary Wilson'],
createdOn: 'a week ago',
},
{
type: 'lastModified',
value: 'a week ago',
modifiedBy: 'Jane Smith',
},
{ type: 'tags', values: ['management', 'research', 'poc'] },
];
return <MetadataBar items={items} />;
}
```
## Minimal Metadata
```tsx live
function MinimalMetadata() {
const items = [
{ type: 'owner', createdBy: 'Admin', owners: ['Admin'], createdOn: 'yesterday' },
{ type: 'lastModified', value: '2 hours ago', modifiedBy: 'Admin' },
];
return <MetadataBar items={items} />;
}
```
## Full Metadata
```tsx live
function FullMetadata() {
const items = [
{ type: 'sql', title: 'SELECT * FROM ...' },
{ type: 'owner', createdBy: 'Jane Smith', owners: ['Jane Smith', 'John Doe', 'Bob Wilson'], createdOn: '2 weeks ago' },
{ type: 'lastModified', value: '3 days ago', modifiedBy: 'John Doe' },
{ type: 'tags', values: ['production', 'finance', 'quarterly'] },
{ type: 'dashboards', title: 'Used in 12 dashboards' },
{ type: 'description', value: 'This chart shows quarterly revenue breakdown by region and product line.' },
{ type: 'rows', title: '1.2M rows' },
{ type: 'table', title: 'public.revenue_data' },
];
return <MetadataBar items={items} />;
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | `"Added to 3 dashboards"` | - |
| `createdBy` | `string` | `"Jane Smith"` | - |
| `modifiedBy` | `string` | `"Jane Smith"` | - |
| `description` | `string` | `"To preview the list of dashboards go to More settings."` | - |
| `items` | `any` | `[{"type":"sql","title":"Click to view query"},{"type":"owner","createdBy":"Jane Smith","owners":["John Doe","Mary Wilson"],"createdOn":"a week ago"},{"type":"lastModified","value":"a week ago","modifiedBy":"Jane Smith"},{"type":"tags","values":["management","research","poc"]},{"type":"dashboards","title":"Added to 3 dashboards","description":"To preview the list of dashboards go to More settings."}]` | - |
## Import
```tsx
import MetadataBar from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/MetadataBar/MetadataBar.stories.tsx).
:::

View File

@@ -1,168 +0,0 @@
---
title: Space
sidebar_label: Space
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Space
The Space component from Superset's UI library.
## Live Example
<StoryWithControls
component="Space"
props={{
direction: "horizontal",
size: "small",
wrap: false
}}
controls={[
{
name: "direction",
label: "Direction",
type: "select",
options: [
"vertical",
"horizontal"
]
},
{
name: "size",
label: "Size",
type: "select",
options: [
"small",
"middle",
"large"
]
},
{
name: "wrap",
label: "Wrap",
type: "boolean"
},
{
name: "align",
label: "Align",
type: "select",
options: [
"start",
"end",
"center",
"baseline"
]
}
]}
sampleChildren={["Item 1","Item 2","Item 3","Item 4","Item 5"]}
sampleChildrenStyle={{padding:"8px 16px",background:"#e6f4ff",border:"1px solid #91caff",borderRadius:"4px"}}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Space size="small">
{['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'].map(item => (
<div
key={item}
style={{
padding: '8px 16px',
background: '#e6f4ff',
border: '1px solid #91caff',
borderRadius: 4,
}}
>
{item}
</div>
))}
</Space>
);
}
```
## Vertical Space
```tsx live
function VerticalSpace() {
return (
<Space direction="vertical" size="middle" style={{ display: 'flex' }}>
<Button buttonStyle="primary">Primary</Button>
<Button buttonStyle="secondary">Secondary</Button>
<Button buttonStyle="dashed">Dashed</Button>
</Space>
);
}
```
## Space Sizes
```tsx live
function SpaceSizes() {
const items = ['Item 1', 'Item 2', 'Item 3'];
const itemStyle = {
padding: '8px 16px',
background: '#e6f4ff',
border: '1px solid #91caff',
borderRadius: 4,
};
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
{['small', 'middle', 'large'].map(size => (
<div key={size}>
<h4>{size}</h4>
<Space size={size}>
{items.map(item => (
<div key={item} style={itemStyle}>{item}</div>
))}
</Space>
</div>
))}
</div>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `direction` | `string` | `"horizontal"` | - |
| `size` | `string` | `"small"` | - |
| `wrap` | `boolean` | `false` | - |
## Import
```tsx
import { Space } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Space/Space.stories.tsx).
:::

View File

@@ -1,311 +0,0 @@
---
title: Table
sidebar_label: Table
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Table
A data table component with sorting, pagination, row selection, resizable columns, reorderable columns, and virtualization for large datasets.
## Live Example
<StoryWithControls
component="Table"
props={{
size: "small",
bordered: false,
loading: false,
sticky: true,
resizable: false,
reorderable: false,
usePagination: false,
key: 5,
name: "1GB USB Flash Drive",
category: "Portable Storage",
price: 9.99,
height: 350,
defaultPageSize: 5,
pageSizeOptions: [
"5",
"10"
],
data: [
{
key: 1,
name: "Floppy Disk 10 pack",
category: "Disk Storage",
price: 9.99
},
{
key: 2,
name: "DVD 100 pack",
category: "Optical Storage",
price: 27.99
},
{
key: 3,
name: "128 GB SSD",
category: "Harddrive",
price: 49.99
},
{
key: 4,
name: "4GB 144mhz",
category: "Memory",
price: 19.99
},
{
key: 5,
name: "1GB USB Flash Drive",
category: "Portable Storage",
price: 9.99
},
{
key: 6,
name: "256 GB SSD",
category: "Harddrive",
price: 89.99
},
{
key: 7,
name: "1 TB SSD",
category: "Harddrive",
price: 349.99
},
{
key: 8,
name: "16 GB DDR4",
category: "Memory",
price: 59.99
},
{
key: 9,
name: "32 GB DDR5",
category: "Memory",
price: 129.99
},
{
key: 10,
name: "Blu-ray 50 pack",
category: "Optical Storage",
price: 34.99
},
{
key: 11,
name: "64 GB USB Drive",
category: "Portable Storage",
price: 14.99
},
{
key: 12,
name: "2 TB HDD",
category: "Harddrive",
price: 59.99
}
],
columns: [
{
title: "Name",
dataIndex: "name",
key: "name",
width: 200
},
{
title: "Category",
dataIndex: "category",
key: "category",
width: 150
},
{
title: "Price",
dataIndex: "price",
key: "price",
width: 100
}
]
}}
controls={[
{
name: "size",
label: "Size",
type: "select",
options: [
"small",
"middle",
"large"
],
description: "Table size."
},
{
name: "bordered",
label: "Bordered",
type: "boolean",
description: "Whether to show all table borders."
},
{
name: "loading",
label: "Loading",
type: "boolean",
description: "Whether the table is in a loading state."
},
{
name: "sticky",
label: "Sticky",
type: "boolean",
description: "Whether the table header is sticky."
},
{
name: "resizable",
label: "Resizable",
type: "boolean",
description: "Whether columns can be resized by dragging column edges."
},
{
name: "reorderable",
label: "Reorderable",
type: "boolean",
description: "EXPERIMENTAL: Whether columns can be reordered by dragging. May not work in all contexts."
},
{
name: "usePagination",
label: "Use Pagination",
type: "boolean",
description: "Whether to enable pagination. When enabled, the table displays 5 rows per page."
},
{
name: "key",
label: "Key",
type: "number"
},
{
name: "name",
label: "Name",
type: "text"
},
{
name: "category",
label: "Category",
type: "text"
},
{
name: "price",
label: "Price",
type: "number"
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
const data = [
{ key: 1, name: 'PostgreSQL', type: 'Database', status: 'Active' },
{ key: 2, name: 'MySQL', type: 'Database', status: 'Active' },
{ key: 3, name: 'SQLite', type: 'Database', status: 'Inactive' },
{ key: 4, name: 'Presto', type: 'Query Engine', status: 'Active' },
];
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name', width: 150 },
{ title: 'Type', dataIndex: 'type', key: 'type' },
{ title: 'Status', dataIndex: 'status', key: 'status', width: 100 },
];
return <Table data={data} columns={columns} size="small" />;
}
```
## With Pagination
```tsx live
function PaginatedTable() {
const data = Array.from({ length: 20 }, (_, i) => ({
key: i,
name: 'Record ' + (i + 1),
value: Math.round(Math.random() * 1000),
category: ['A', 'B', 'C'][i % 3],
}));
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Value', dataIndex: 'value', key: 'value', width: 100 },
{ title: 'Category', dataIndex: 'category', key: 'category', width: 100 },
];
return (
<Table
data={data}
columns={columns}
size="small"
pageSizeOptions={['5', '10']}
defaultPageSize={5}
/>
);
}
```
## Loading State
```tsx live
function LoadingTable() {
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Status', dataIndex: 'status', key: 'status' },
];
return <Table data={[]} columns={columns} size="small" loading />;
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `string` | `"small"` | Table size. |
| `bordered` | `boolean` | `false` | Whether to show all table borders. |
| `loading` | `boolean` | `false` | Whether the table is in a loading state. |
| `sticky` | `boolean` | `true` | Whether the table header is sticky. |
| `resizable` | `boolean` | `false` | Whether columns can be resized by dragging column edges. |
| `reorderable` | `boolean` | `false` | EXPERIMENTAL: Whether columns can be reordered by dragging. May not work in all contexts. |
| `usePagination` | `boolean` | `false` | Whether to enable pagination. When enabled, the table displays 5 rows per page. |
| `key` | `number` | `5` | - |
| `name` | `string` | `"1GB USB Flash Drive"` | - |
| `category` | `string` | `"Portable Storage"` | - |
| `price` | `number` | `9.99` | - |
| `height` | `number` | `350` | - |
| `defaultPageSize` | `number` | `5` | - |
| `pageSizeOptions` | `any` | `["5","10"]` | - |
| `data` | `any` | `[{"key":1,"name":"Floppy Disk 10 pack","category":"Disk Storage","price":9.99},{"key":2,"name":"DVD 100 pack","category":"Optical Storage","price":27.99},{"key":3,"name":"128 GB SSD","category":"Harddrive","price":49.99},{"key":4,"name":"4GB 144mhz","category":"Memory","price":19.99},{"key":5,"name":"1GB USB Flash Drive","category":"Portable Storage","price":9.99},{"key":6,"name":"256 GB SSD","category":"Harddrive","price":89.99},{"key":7,"name":"1 TB SSD","category":"Harddrive","price":349.99},{"key":8,"name":"16 GB DDR4","category":"Memory","price":59.99},{"key":9,"name":"32 GB DDR5","category":"Memory","price":129.99},{"key":10,"name":"Blu-ray 50 pack","category":"Optical Storage","price":34.99},{"key":11,"name":"64 GB USB Drive","category":"Portable Storage","price":14.99},{"key":12,"name":"2 TB HDD","category":"Harddrive","price":59.99}]` | - |
| `columns` | `any` | `[{"title":"Name","dataIndex":"name","key":"name","width":200},{"title":"Category","dataIndex":"category","key":"category","width":150},{"title":"Price","dataIndex":"price","key":"price","width":100}]` | - |
## Import
```tsx
import { Table } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Table/Table.stories.tsx).
:::

View File

@@ -1,74 +0,0 @@
---
title: UI Components Overview
sidebar_label: Overview
sidebar_position: 0
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Superset Design System
A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.
The Superset Design System uses [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) principles with adapted terminology:
| Atomic Design | Atoms | Molecules | Organisms | Templates | Pages / Screens |
|---|:---:|:---:|:---:|:---:|:---:|
| **Superset Design** | Foundations | Components | Patterns | Templates | Features |
<img src="/img/atomic-design.png" alt="Atoms = Foundations, Molecules = Components, Organisms = Patterns, Templates = Templates, Pages / Screens = Features" style={{maxWidth: '100%'}} />
---
## Component Library
Interactive documentation for Superset's UI component library. **53 components** documented across 2 categories.
### [Core Components](./ui/)
46 components — Buttons, inputs, modals, selects, and other fundamental UI elements.
### [Layout Components](./design-system/)
7 components — Grid, Layout, Table, Flex, Space, and container components for page structure.
## Usage
All components are exported from `@superset-ui/core/components`:
```tsx
import { Button, Modal, Select } from '@superset-ui/core/components';
```
## Contributing
This documentation is auto-generated from Storybook stories. To add or update component documentation:
1. Create or update the component's `.stories.tsx` file
2. Add a descriptive `title` and `description` in the story meta
3. Export an interactive story with `args` for configurable props
4. Run `yarn generate:superset-components` in the `docs/` directory
:::info Work in Progress
This component library is actively being documented. See the [Components TODO](./TODO) page for a list of components awaiting documentation.
:::
---
*Auto-generated from Storybook stories in the [Design System/Introduction](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/components/DesignSystem.stories.tsx) story.*

View File

@@ -1,215 +0,0 @@
---
title: AutoComplete
sidebar_label: AutoComplete
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# AutoComplete
AutoComplete component for search functionality.
## Live Example
<StoryWithControls
component="AutoComplete"
props={{
placeholder: "Type to search...",
options: [
{
value: "Dashboard",
label: "Dashboard"
},
{
value: "Chart",
label: "Chart"
},
{
value: "Dataset",
label: "Dataset"
},
{
value: "Database",
label: "Database"
},
{
value: "Query",
label: "Query"
}
],
style: {
width: 300
},
filterOption: true
}}
controls={[
{
name: "placeholder",
label: "Placeholder",
type: "text",
description: "Placeholder text for AutoComplete"
},
{
name: "style",
label: "Style",
type: "object",
description: "Custom styles for AutoComplete"
},
{
name: "value",
label: "Value",
type: "text",
description: "Selected option"
},
{
name: "disabled",
label: "Disabled",
type: "boolean",
description: "Disable the AutoComplete"
},
{
name: "popupMatchSelectWidth",
label: "Popup Match Select Width",
type: "number",
description: "Width of the dropdown"
},
{
name: "allowClear",
label: "Allow Clear",
type: "boolean",
description: "Show clear button"
},
{
name: "autoFocus",
label: "Auto Focus",
type: "boolean",
description: "If get focus when component mounted"
},
{
name: "backfill",
label: "Backfill",
type: "boolean",
description: "If backfill selected item the input when using keyboard"
},
{
name: "popupClassName",
label: "Popup Class Name",
type: "text",
description: "The className of dropdown menu"
},
{
name: "filterOption",
label: "Filter Option",
type: "boolean",
description: "Enable filtering of options based on input"
},
{
name: "notFoundContent",
label: "Not Found Content",
type: "text",
description: "Specify content to show when no result matches."
},
{
name: "open",
label: "Open",
type: "boolean",
description: "Controlled open state of dropdown"
},
{
name: "status",
label: "Status",
type: "select",
options: [
"error",
"warning"
],
description: "Set validation status"
},
{
name: "size",
label: "Size",
type: "select",
options: [
"large",
"middle",
"small"
],
description: "The size of the input box"
},
{
name: "variant",
label: "Variant",
type: "select",
options: [
"outlined",
"borderless",
"filled"
],
description: "Variants of input"
},
{
name: "virtual",
label: "Virtual",
type: "boolean",
description: "Disable virtual scroll when set to false"
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<AutoComplete
placeholder="Type to search..."
options={[{"value":"Dashboard","label":"Dashboard"},{"value":"Chart","label":"Chart"},{"value":"Dataset","label":"Dataset"},{"value":"Database","label":"Database"},{"value":"Query","label":"Query"}]}
style={{"width":300}}
filterOption
/>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `placeholder` | `string` | `"Type to search..."` | Placeholder text for AutoComplete |
| `options` | `any` | `[{"value":"Dashboard","label":"Dashboard"},{"value":"Chart","label":"Chart"},{"value":"Dataset","label":"Dataset"},{"value":"Database","label":"Database"},{"value":"Query","label":"Query"}]` | The dropdown options |
| `style` | `any` | `{"width":300}` | Custom styles for AutoComplete |
| `filterOption` | `boolean` | `true` | Enable filtering of options based on input |
## Import
```tsx
import { AutoComplete } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/AutoComplete/AutoComplete.stories.tsx).
:::

View File

@@ -1,140 +0,0 @@
---
title: Avatar
sidebar_label: Avatar
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Avatar
The Avatar component from Superset's UI library.
## Live Example
<StoryWithControls
component="Avatar"
props={{
children: "AB",
alt: "",
gap: 4,
shape: "circle",
size: "default",
src: "",
draggable: false
}}
controls={[
{
name: "children",
label: "Children",
type: "text",
description: "Text or initials to display inside the avatar."
},
{
name: "alt",
label: "Alt",
type: "text"
},
{
name: "gap",
label: "Gap",
type: "number",
description: "Letter spacing inside the avatar."
},
{
name: "shape",
label: "Shape",
type: "select",
options: [
"circle",
"square"
],
description: "The shape of the avatar."
},
{
name: "size",
label: "Size",
type: "select",
options: [
"small",
"default",
"large"
],
description: "The size of the avatar."
},
{
name: "src",
label: "Src",
type: "text",
description: "Image URL for the avatar. If provided, overrides children."
},
{
name: "draggable",
label: "Draggable",
type: "boolean"
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Avatar
alt=""
gap={4}
shape="circle"
size="default"
src=""
>
AB
</Avatar>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `string` | `"AB"` | Text or initials to display inside the avatar. |
| `alt` | `string` | `""` | - |
| `gap` | `number` | `4` | Letter spacing inside the avatar. |
| `shape` | `string` | `"circle"` | The shape of the avatar. |
| `size` | `string` | `"default"` | The size of the avatar. |
| `src` | `string` | `""` | Image URL for the avatar. If provided, overrides children. |
| `draggable` | `boolean` | `false` | - |
## Import
```tsx
import { Avatar } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Avatar/Avatar.stories.tsx).
:::

View File

@@ -1,160 +0,0 @@
---
title: Badge
sidebar_label: Badge
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Badge
The Badge component from Superset's UI library.
## Live Example
<StoryWithControls
component="Badge"
props={{
count: 5,
size: "default",
showZero: false,
overflowCount: 99
}}
controls={[
{
name: "count",
label: "Count",
type: "number",
description: "Number to show in the badge."
},
{
name: "size",
label: "Size",
type: "select",
options: [
"default",
"small"
],
description: "Size of the badge."
},
{
name: "showZero",
label: "Show Zero",
type: "boolean",
description: "Whether to show badge when count is zero."
},
{
name: "overflowCount",
label: "Overflow Count",
type: "number",
description: "Max count to show. Shows count+ when exceeded (e.g., 99+)."
},
{
name: "color",
label: "Color",
type: "select",
options: [
"pink",
"red",
"yellow",
"orange",
"cyan",
"green",
"blue",
"purple",
"geekblue",
"magenta",
"volcano",
"gold",
"lime"
],
description: "Custom background color for the badge."
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Badge
count={5}
size="default"
overflowCount={99}
/>
);
}
```
## Status Badge
```tsx live
function StatusBadgeDemo() {
const statuses = ['default', 'success', 'processing', 'warning', 'error'];
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
{statuses.map(status => (
<Badge key={status} status={status} text={`Status: ${status}`} />
))}
</div>
);
}
```
## Color Gallery
```tsx live
function ColorGallery() {
const colors = ['pink', 'red', 'orange', 'green', 'cyan', 'blue', 'purple'];
return (
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
{colors.map(color => (
<Badge key={color} count={9} color={color} />
))}
</div>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `count` | `number` | `5` | Number to show in the badge. |
| `size` | `string` | `"default"` | Size of the badge. |
| `showZero` | `boolean` | `false` | Whether to show badge when count is zero. |
| `overflowCount` | `number` | `99` | Max count to show. Shows count+ when exceeded (e.g., 99+). |
## Import
```tsx
import { Badge } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Badge/Badge.stories.tsx).
:::

View File

@@ -1,93 +0,0 @@
---
title: Breadcrumb
sidebar_label: Breadcrumb
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Breadcrumb
Breadcrumb component for displaying navigation paths.
## Live Example
<StoryWithControls
component="Breadcrumb"
props={{
items: [
{
title: "Home",
href: "/"
},
{
title: "Library",
href: "/library"
},
{
title: "Data"
}
],
separator: "/"
}}
controls={[
{
name: "separator",
label: "Separator",
type: "text",
description: "Custom separator between items"
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Breadcrumb
items={[
{ title: 'Home', href: '/' },
{ title: 'Library', href: '/library' },
{ title: 'Data' },
]}
separator="/"
/>
);
}
```
## Import
```tsx
import { Breadcrumb } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Breadcrumb/Breadcrumb.stories.tsx).
:::

View File

@@ -1,142 +0,0 @@
---
title: Button
sidebar_label: Button
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls, ComponentGallery } from '../../../src/components/StorybookWrapper';
# Button
The Button component from Superset's UI library.
## All Variants
<ComponentGallery
component="Button"
sizes={["xsmall","small","default"]}
styles={["primary","secondary","dashed","danger","link"]}
sizeProp="buttonSize"
styleProp="buttonStyle"
/>
## Live Example
<StoryWithControls
component="Button"
props={{
buttonStyle: "default",
buttonSize: "default",
children: "Button!"
}}
controls={[
{
name: "buttonStyle",
label: "Button Style",
type: "select",
options: [
"primary",
"secondary",
"dashed",
"danger",
"link"
],
description: "The style variant of the button."
},
{
name: "buttonSize",
label: "Button Size",
type: "select",
options: [
"xsmall",
"small",
"default"
],
description: "The size of the button."
},
{
name: "children",
label: "Children",
type: "text",
description: "The button text or content."
},
{
name: "target",
label: "Target",
type: "select"
},
{
name: "href",
label: "Href",
type: "select"
},
{
name: "disabled",
label: "Disabled",
type: "boolean",
description: "Whether the button is disabled."
},
{
name: "loading",
label: "Loading",
type: "boolean",
description: "Whether to show loading spinner."
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Button
buttonStyle="default"
buttonSize="default"
>
Button!
</Button>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `buttonStyle` | `string` | `"default"` | The style variant of the button. |
| `buttonSize` | `string` | `"default"` | The size of the button. |
| `children` | `string` | `"Button!"` | The button text or content. |
## Import
```tsx
import { Button } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Button/Button.stories.tsx).
:::

View File

@@ -1,88 +0,0 @@
---
title: ButtonGroup
sidebar_label: ButtonGroup
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# ButtonGroup
ButtonGroup is a container that groups multiple Button components together with consistent spacing and styling.
## Live Example
<StoryWithControls
component="ButtonGroup"
props={{
expand: false
}}
controls={[
{
name: "expand",
label: "Expand",
type: "boolean",
description: "When true, buttons expand to fill available width."
},
{
name: "className",
label: "Class Name",
type: "text",
description: "CSS class name for custom styling."
}
]}
sampleChildren={[{"component":"Button","props":{"buttonStyle":"tertiary","children":"Button 1"}},{"component":"Button","props":{"buttonStyle":"tertiary","children":"Button 2"}},{"component":"Button","props":{"buttonStyle":"tertiary","children":"Button 3"}}]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<ButtonGroup>
<Button buttonStyle="tertiary">Button 1</Button>
<Button buttonStyle="tertiary">Button 2</Button>
<Button buttonStyle="tertiary">Button 3</Button>
</ButtonGroup>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `expand` | `boolean` | `false` | When true, buttons expand to fill available width. |
## Import
```tsx
import { ButtonGroup } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/ButtonGroup/ButtonGroup.stories.tsx).
:::

View File

@@ -1,79 +0,0 @@
---
title: CachedLabel
sidebar_label: CachedLabel
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# CachedLabel
The CachedLabel component from Superset's UI library.
## Live Example
<StoryWithControls
component="CachedLabel"
props={{}}
controls={[
{
name: "cachedTimestamp",
label: "Cached Timestamp",
type: "text",
description: "ISO timestamp of when the data was cached"
},
{
name: "className",
label: "Class Name",
type: "text",
description: "Additional CSS class for the label"
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<CachedLabel
// Add props here
/>
);
}
```
## Import
```tsx
import { CachedLabel } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/CachedLabel/CachedLabel.stories.tsx).
:::

View File

@@ -1,142 +0,0 @@
---
title: Card
sidebar_label: Card
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Card
A container component for grouping related content. Supports titles, borders, loading states, and hover effects.
## Live Example
<StoryWithControls
component="Card"
props={{
padded: true,
title: "Dashboard Overview",
children: "This card displays a summary of your dashboard metrics and recent activity.",
bordered: true,
loading: false,
hoverable: false
}}
controls={[
{
name: "padded",
label: "Padded",
type: "boolean",
description: "Whether the card content has padding."
},
{
name: "title",
label: "Title",
type: "text",
description: "Title text displayed at the top of the card."
},
{
name: "children",
label: "Children",
type: "text",
description: "The content inside the card."
},
{
name: "bordered",
label: "Bordered",
type: "boolean",
description: "Whether to show a border around the card."
},
{
name: "loading",
label: "Loading",
type: "boolean",
description: "Whether to show a loading skeleton."
},
{
name: "hoverable",
label: "Hoverable",
type: "boolean",
description: "Whether the card lifts on hover."
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Card title="Dashboard Overview" bordered>
This card displays a summary of your dashboard metrics and recent activity.
</Card>
);
}
```
## Card States
```tsx live
function CardStates() {
return (
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
<Card title="Default" bordered style={{ width: 250 }}>
Default card content.
</Card>
<Card title="Hoverable" bordered hoverable style={{ width: 250 }}>
Hover over this card.
</Card>
<Card title="Loading" bordered loading style={{ width: 250 }}>
This content is hidden while loading.
</Card>
<Card title="No Border" style={{ width: 250 }}>
Borderless card.
</Card>
</div>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `padded` | `boolean` | `true` | Whether the card content has padding. |
| `title` | `string` | `"Dashboard Overview"` | Title text displayed at the top of the card. |
| `children` | `string` | `"This card displays a summary of your dashboard metrics and recent activity."` | The content inside the card. |
| `bordered` | `boolean` | `true` | Whether to show a border around the card. |
| `loading` | `boolean` | `false` | Whether to show a loading skeleton. |
| `hoverable` | `boolean` | `false` | Whether the card lifts on hover. |
## Import
```tsx
import { Card } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Card/Card.stories.tsx).
:::

View File

@@ -1,141 +0,0 @@
---
title: Checkbox
sidebar_label: Checkbox
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Checkbox
Checkbox component that supports both regular and indeterminate states, built on top of Ant Design v5 Checkbox.
## Live Example
<StoryWithControls
component="Checkbox"
props={{
checked: false,
indeterminate: false
}}
controls={[
{
name: "checked",
label: "Checked",
type: "boolean",
description: "Whether the checkbox is checked."
},
{
name: "indeterminate",
label: "Indeterminate",
type: "boolean",
description: "Whether the checkbox is in indeterminate state (partially selected)."
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Checkbox
// Add props here
/>
);
}
```
## All Checkbox States
```tsx live
function AllStates() {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
<Checkbox checked={false}>Unchecked</Checkbox>
<Checkbox checked={true}>Checked</Checkbox>
<Checkbox indeterminate={true}>Indeterminate</Checkbox>
<Checkbox disabled>Disabled unchecked</Checkbox>
<Checkbox disabled checked>Disabled checked</Checkbox>
</div>
);
}
```
## Select All Pattern
```tsx live
function SelectAllDemo() {
const [selected, setSelected] = React.useState([]);
const options = ['Option A', 'Option B', 'Option C'];
const allSelected = selected.length === options.length;
const indeterminate = selected.length > 0 && !allSelected;
return (
<div>
<Checkbox
checked={allSelected}
indeterminate={indeterminate}
onChange={(e) => setSelected(e.target.checked ? [...options] : [])}
>
Select All
</Checkbox>
<div style={{ marginLeft: 24, marginTop: 8 }}>
{options.map(opt => (
<div key={opt}>
<Checkbox
checked={selected.includes(opt)}
onChange={() => setSelected(prev =>
prev.includes(opt) ? prev.filter(x => x !== opt) : [...prev, opt]
)}
>
{opt}
</Checkbox>
</div>
))}
</div>
</div>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `checked` | `boolean` | `false` | Whether the checkbox is checked. |
| `indeterminate` | `boolean` | `false` | Whether the checkbox is in indeterminate state (partially selected). |
## Import
```tsx
import { Checkbox } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Checkbox/Checkbox.stories.tsx).
:::

View File

@@ -1,106 +0,0 @@
---
title: Collapse
sidebar_label: Collapse
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Collapse
The Collapse component from Superset's UI library.
## Live Example
<StoryWithControls
component="Collapse"
props={{
ghost: false,
bordered: true,
accordion: false,
animateArrows: false,
modalMode: false
}}
controls={[
{
name: "ghost",
label: "Ghost",
type: "boolean"
},
{
name: "bordered",
label: "Bordered",
type: "boolean"
},
{
name: "accordion",
label: "Accordion",
type: "boolean"
},
{
name: "animateArrows",
label: "Animate Arrows",
type: "boolean"
},
{
name: "modalMode",
label: "Modal Mode",
type: "boolean"
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Collapse
bordered
/>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `ghost` | `boolean` | `false` | - |
| `bordered` | `boolean` | `true` | - |
| `accordion` | `boolean` | `false` | - |
| `animateArrows` | `boolean` | `false` | - |
| `modalMode` | `boolean` | `false` | - |
## Import
```tsx
import { Collapse } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Collapse/Collapse.stories.tsx).
:::

View File

@@ -1,110 +0,0 @@
---
title: DatePicker
sidebar_label: DatePicker
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# DatePicker
The DatePicker component from Superset's UI library.
## Live Example
<StoryWithControls
component="DatePicker"
props={{
placeholder: "Select date",
showNow: true,
allowClear: false,
autoFocus: true,
disabled: false,
format: "YYYY-MM-DD hh:mm a",
inputReadOnly: false,
picker: "date",
placement: "bottomLeft",
size: "middle",
showTime: {
format: "hh:mm a",
needConfirm: false
}
}}
controls={[
{
name: "placeholder",
label: "Placeholder",
type: "text"
},
{
name: "showNow",
label: "Show Now",
type: "boolean",
description: "Show \"Now\" button to select current date and time."
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<DatePicker
placeholder="Select date"
format="YYYY-MM-DD hh:mm a"
showNow
showTime={{ format: 'hh:mm a', needConfirm: false }}
/>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `placeholder` | `string` | `"Select date"` | - |
| `showNow` | `boolean` | `true` | Show "Now" button to select current date and time. |
| `allowClear` | `boolean` | `false` | - |
| `autoFocus` | `boolean` | `true` | - |
| `disabled` | `boolean` | `false` | - |
| `format` | `string` | `"YYYY-MM-DD hh:mm a"` | - |
| `inputReadOnly` | `boolean` | `false` | - |
| `picker` | `string` | `"date"` | - |
| `placement` | `string` | `"bottomLeft"` | - |
| `size` | `string` | `"middle"` | - |
| `showTime` | `any` | `{"format":"hh:mm a","needConfirm":false}` | - |
## Import
```tsx
import { DatePicker } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/DatePicker/DatePicker.stories.tsx).
:::

View File

@@ -1,144 +0,0 @@
---
title: Divider
sidebar_label: Divider
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Divider
The Divider component from Superset's UI library.
## Live Example
<StoryWithControls
component="Divider"
props={{
dashed: false,
variant: "solid",
orientation: "center",
orientationMargin: "",
plain: true,
type: "horizontal"
}}
controls={[
{
name: "dashed",
label: "Dashed",
type: "boolean",
description: "Whether line is dashed (deprecated, use variant)."
},
{
name: "variant",
label: "Variant",
type: "select",
options: [
"dashed",
"dotted",
"solid"
],
description: "Line style of the divider."
},
{
name: "orientation",
label: "Orientation",
type: "select",
options: [
"left",
"right",
"center"
],
description: "Position of title inside divider."
},
{
name: "orientationMargin",
label: "Orientation Margin",
type: "text",
description: "Margin from divider edge to title."
},
{
name: "plain",
label: "Plain",
type: "boolean",
description: "Use plain style without bold title."
},
{
name: "type",
label: "Type",
type: "select",
options: [
"horizontal",
"vertical"
],
description: "Direction of the divider."
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<>
<p>Horizontal divider with title (orientationMargin applies here):</p>
<Divider orientation="left" orientationMargin={0}>Left Title</Divider>
<Divider orientation="right" orientationMargin={50}>Right Title</Divider>
<Divider>Center Title</Divider>
<p>Vertical divider (use container gap for spacing):</p>
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
<span>Link</span>
<Divider type="vertical" />
<span>Link</span>
<Divider type="vertical" />
<span>Link</span>
</div>
</>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `dashed` | `boolean` | `false` | Whether line is dashed (deprecated, use variant). |
| `variant` | `string` | `"solid"` | Line style of the divider. |
| `orientation` | `string` | `"center"` | Position of title inside divider. |
| `orientationMargin` | `string` | `""` | Margin from divider edge to title. |
| `plain` | `boolean` | `true` | Use plain style without bold title. |
| `type` | `string` | `"horizontal"` | Direction of the divider. |
## Import
```tsx
import { Divider } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Divider/Divider.stories.tsx).
:::

View File

@@ -1,172 +0,0 @@
---
title: EditableTitle
sidebar_label: EditableTitle
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# EditableTitle
The EditableTitle component from Superset's UI library.
## Live Example
<StoryWithControls
component="EditableTitle"
props={{
canEdit: true,
editing: false,
emptyText: "Empty text",
noPermitTooltip: "Not permitted",
showTooltip: true,
title: "Title",
defaultTitle: "Default title",
placeholder: "Placeholder",
certifiedBy: "",
certificationDetails: "",
maxWidth: 100,
autoSize: true
}}
controls={[
{
name: "canEdit",
label: "Can Edit",
type: "boolean",
description: "Whether the title can be edited."
},
{
name: "editing",
label: "Editing",
type: "boolean",
description: "Whether the title is currently in edit mode."
},
{
name: "emptyText",
label: "Empty Text",
type: "text",
description: "Text to display when title is empty."
},
{
name: "noPermitTooltip",
label: "No Permit Tooltip",
type: "text",
description: "Tooltip shown when user lacks edit permission."
},
{
name: "showTooltip",
label: "Show Tooltip",
type: "boolean",
description: "Whether to show tooltip on hover."
},
{
name: "title",
label: "Title",
type: "text",
description: "The title text to display."
},
{
name: "defaultTitle",
label: "Default Title",
type: "text",
description: "Default title when none is provided."
},
{
name: "placeholder",
label: "Placeholder",
type: "text",
description: "Placeholder text when editing."
},
{
name: "certifiedBy",
label: "Certified By",
type: "text",
description: "Name of person/team who certified this item."
},
{
name: "certificationDetails",
label: "Certification Details",
type: "text",
description: "Additional certification details or description."
},
{
name: "maxWidth",
label: "Max Width",
type: "number",
description: "Maximum width of the title in pixels."
},
{
name: "autoSize",
label: "Auto Size",
type: "boolean",
description: "Whether to auto-size based on content."
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<EditableTitle
title="My Dashboard"
canEdit
showTooltip
certifiedBy="Data Team"
certificationDetails="Verified Q1 2024"
onSaveTitle={(newTitle) => console.log('Saved:', newTitle)}
/>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `canEdit` | `boolean` | `true` | Whether the title can be edited. |
| `editing` | `boolean` | `false` | Whether the title is currently in edit mode. |
| `emptyText` | `string` | `"Empty text"` | Text to display when title is empty. |
| `noPermitTooltip` | `string` | `"Not permitted"` | Tooltip shown when user lacks edit permission. |
| `showTooltip` | `boolean` | `true` | Whether to show tooltip on hover. |
| `title` | `string` | `"Title"` | The title text to display. |
| `defaultTitle` | `string` | `"Default title"` | Default title when none is provided. |
| `placeholder` | `string` | `"Placeholder"` | Placeholder text when editing. |
| `certifiedBy` | `string` | `""` | Name of person/team who certified this item. |
| `certificationDetails` | `string` | `""` | Additional certification details or description. |
| `maxWidth` | `number` | `100` | Maximum width of the title in pixels. |
| `autoSize` | `boolean` | `true` | Whether to auto-size based on content. |
## Import
```tsx
import { EditableTitle } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/EditableTitle.stories.tsx).
:::

View File

@@ -1,147 +0,0 @@
---
title: EmptyState
sidebar_label: EmptyState
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls, ComponentGallery } from '../../../src/components/StorybookWrapper';
# EmptyState
The EmptyState component from Superset's UI library.
## All Variants
<ComponentGallery
component="EmptyState"
sizes={["medium"]}
styles={["chart.svg","document.svg","empty-charts.svg","empty-dashboard.svg","empty-dataset.svg","empty-query.svg","empty-table.svg","empty.svg","empty_sql_chart.svg","filter-results.svg","filter.svg","star-circle.svg","union.svg","vector.svg"]}
sizeProp="size"
styleProp="image"
/>
## Live Example
<StoryWithControls
component="EmptyState"
props={{
size: "medium",
title: "No Data Available",
description: "There is no data to display at this time.",
image: "empty.svg",
buttonText: ""
}}
controls={[
{
name: "size",
label: "Size",
type: "select",
options: [
"small",
"medium",
"large"
],
description: "Size of the empty state component."
},
{
name: "title",
label: "Title",
type: "text",
description: "Main title text."
},
{
name: "description",
label: "Description",
type: "text",
description: "Description text below the title."
},
{
name: "image",
label: "Image",
type: "select",
options: [
"chart.svg",
"document.svg",
"empty-charts.svg",
"empty-dashboard.svg",
"empty-dataset.svg",
"empty-query.svg",
"empty-table.svg",
"empty.svg",
"empty_sql_chart.svg",
"filter-results.svg",
"filter.svg",
"star-circle.svg",
"union.svg",
"vector.svg"
],
description: "Predefined image to display."
},
{
name: "buttonText",
label: "Button Text",
type: "text",
description: "Text for optional action button."
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<EmptyState
size="medium"
title="No Results Found"
description="Try adjusting your filters or search terms."
image="filter.svg"
buttonText="Clear Filters"
buttonAction={() => alert('Filters cleared!')}
/>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `string` | `"medium"` | Size of the empty state component. |
| `title` | `string` | `"No Data Available"` | Main title text. |
| `description` | `string` | `"There is no data to display at this time."` | Description text below the title. |
| `image` | `string` | `"empty.svg"` | Predefined image to display. |
| `buttonText` | `string` | `""` | Text for optional action button. |
## Import
```tsx
import { EmptyState } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/EmptyState/EmptyState.stories.tsx).
:::

View File

@@ -1,96 +0,0 @@
---
title: FaveStar
sidebar_label: FaveStar
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# FaveStar
FaveStar component for marking items as favorites
## Live Example
<StoryWithControls
component="FaveStar"
props={{
itemId: 1,
isStarred: false,
showTooltip: true
}}
controls={[
{
name: "itemId",
label: "Item ID",
type: "number",
description: "Unique identifier for the item"
},
{
name: "isStarred",
label: "Is Starred",
type: "boolean",
description: "Whether the item is currently starred."
},
{
name: "showTooltip",
label: "Show Tooltip",
type: "boolean",
description: "Show tooltip on hover."
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<FaveStar
itemId={1}
showTooltip
/>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `itemId` | `number` | `1` | Unique identifier for the item |
| `isStarred` | `boolean` | `false` | Whether the item is currently starred. |
| `showTooltip` | `boolean` | `true` | Show tooltip on hover. |
## Import
```tsx
import { FaveStar } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/FaveStar/FaveStar.stories.tsx).
:::

View File

@@ -1,106 +0,0 @@
---
title: IconButton
sidebar_label: IconButton
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# IconButton
The IconButton component is a versatile button that allows you to combine an icon with a text label. It is designed for use in situations where you want to display an icon along with some text in a single clickable element.
## Live Example
<StoryWithControls
component="IconButton"
props={{
buttonText: "IconButton",
altText: "Icon button alt text",
padded: true,
icon: "https://superset.apache.org/img/superset-logo-horiz.svg"
}}
controls={[
{
name: "buttonText",
label: "Button Text",
type: "text",
description: "The text inside the button."
},
{
name: "altText",
label: "Alt Text",
type: "text",
description: "The alt text for the button. If not provided, the button text is used as the alt text by default."
},
{
name: "padded",
label: "Padded",
type: "boolean",
description: "Add padding between icon and button text."
},
{
name: "icon",
label: "Icon",
type: "text",
description: "Icon inside the button (URL or path)."
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<IconButton
buttonText="IconButton"
altText="Icon button alt text"
padded
icon="https://superset.apache.org/img/superset-logo-horiz.svg"
/>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `buttonText` | `string` | `"IconButton"` | The text inside the button. |
| `altText` | `string` | `"Icon button alt text"` | The alt text for the button. If not provided, the button text is used as the alt text by default. |
| `padded` | `boolean` | `true` | Add padding between icon and button text. |
| `icon` | `string` | `"https://superset.apache.org/img/superset-logo-horiz.svg"` | Icon inside the button (URL or path). |
## Import
```tsx
import { IconButton } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/IconButton/IconButton.stories.tsx).
:::

View File

@@ -1,252 +0,0 @@
---
title: Icons
sidebar_label: Icons
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Icons
Icon library for Apache Superset. Contains over 200 icons based on Ant Design icons with consistent sizing and theming support.
## Live Example
<StoryWithControls
component="Icons"
renderComponent="Icons.InfoCircleOutlined"
props={{
iconSize: "xl"
}}
controls={[
{
name: "iconSize",
label: "Icon Size",
type: "inline-radio",
options: [
"s",
"m",
"l",
"xl",
"xxl"
],
description: "Size of the icons: s (12px), m (16px), l (20px), xl (24px), xxl (32px)."
},
{
name: "showNames",
label: "Show Names",
type: "boolean"
},
{
name: "iconColor",
label: "Icon Color",
type: "select"
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
<Icons.InfoCircleOutlined iconSize="xl" />
<Icons.CheckCircleOutlined iconSize="xl" />
<Icons.WarningOutlined iconSize="xl" />
<Icons.CloseCircleOutlined iconSize="xl" />
</div>
);
}
```
## Icon Sizes
```tsx live
function IconSizes() {
const sizes = ['s', 'm', 'l', 'xl', 'xxl'];
return (
<div style={{ display: 'flex', gap: 24, alignItems: 'end' }}>
{sizes.map(size => (
<div key={size} style={{ textAlign: 'center' }}>
<Icons.DatabaseOutlined iconSize={size} />
<div style={{ fontSize: 12, marginTop: 8, color: '#666' }}>{size}</div>
</div>
))}
</div>
);
}
```
## Icon Gallery
```tsx live
function IconGallery() {
const Section = ({ title, children }) => (
<div style={{ marginBottom: 24 }}>
<div style={{ fontWeight: 600, marginBottom: 8, color: '#666' }}>{title}</div>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>{children}</div>
</div>
);
return (
<div>
<Section title="Charts">
<Icons.LineChartOutlined iconSize="xl" />
<Icons.BarChartOutlined iconSize="xl" />
<Icons.PieChartOutlined iconSize="xl" />
<Icons.AreaChartOutlined iconSize="xl" />
<Icons.DashboardOutlined iconSize="xl" />
<Icons.FundProjectionScreenOutlined iconSize="xl" />
</Section>
<Section title="Data">
<Icons.DatabaseOutlined iconSize="xl" />
<Icons.TableOutlined iconSize="xl" />
<Icons.ConsoleSqlOutlined iconSize="xl" />
<Icons.FilterOutlined iconSize="xl" />
<Icons.FieldNumberOutlined iconSize="xl" />
<Icons.FieldTimeOutlined iconSize="xl" />
<Icons.FunctionOutlined iconSize="xl" />
<Icons.CalculatorOutlined iconSize="xl" />
</Section>
<Section title="Actions">
<Icons.PlusOutlined iconSize="xl" />
<Icons.EditOutlined iconSize="xl" />
<Icons.DeleteOutlined iconSize="xl" />
<Icons.CopyOutlined iconSize="xl" />
<Icons.SaveOutlined iconSize="xl" />
<Icons.DownloadOutlined iconSize="xl" />
<Icons.UploadOutlined iconSize="xl" />
<Icons.ReloadOutlined iconSize="xl" />
<Icons.SyncOutlined iconSize="xl" />
<Icons.SearchOutlined iconSize="xl" />
<Icons.ExpandOutlined iconSize="xl" />
<Icons.FullscreenOutlined iconSize="xl" />
<Icons.ShareAltOutlined iconSize="xl" />
<Icons.ExportOutlined iconSize="xl" />
</Section>
<Section title="Status">
<Icons.CheckOutlined iconSize="xl" />
<Icons.CheckCircleOutlined iconSize="xl" />
<Icons.CloseOutlined iconSize="xl" />
<Icons.CloseCircleOutlined iconSize="xl" />
<Icons.InfoCircleOutlined iconSize="xl" />
<Icons.WarningOutlined iconSize="xl" />
<Icons.ExclamationCircleOutlined iconSize="xl" />
<Icons.QuestionCircleOutlined iconSize="xl" />
<Icons.LoadingOutlined iconSize="xl" />
<Icons.StopOutlined iconSize="xl" />
</Section>
<Section title="Navigation">
<Icons.MenuOutlined iconSize="xl" />
<Icons.DownOutlined iconSize="xl" />
<Icons.UpOutlined iconSize="xl" />
<Icons.RightOutlined iconSize="xl" />
<Icons.CaretDownOutlined iconSize="xl" />
<Icons.CaretUpOutlined iconSize="xl" />
<Icons.ArrowRightOutlined iconSize="xl" />
<Icons.MoreOutlined iconSize="xl" />
<Icons.EllipsisOutlined iconSize="xl" />
</Section>
<Section title="Objects">
<Icons.FileOutlined iconSize="xl" />
<Icons.FileTextOutlined iconSize="xl" />
<Icons.FileImageOutlined iconSize="xl" />
<Icons.BookOutlined iconSize="xl" />
<Icons.TagOutlined iconSize="xl" />
<Icons.TagsOutlined iconSize="xl" />
<Icons.StarOutlined iconSize="xl" />
<Icons.BellOutlined iconSize="xl" />
<Icons.CalendarOutlined iconSize="xl" />
<Icons.ClockCircleOutlined iconSize="xl" />
<Icons.MailOutlined iconSize="xl" />
<Icons.LinkOutlined iconSize="xl" />
<Icons.LockOutlined iconSize="xl" />
<Icons.UnlockOutlined iconSize="xl" />
<Icons.KeyOutlined iconSize="xl" />
</Section>
<Section title="Users">
<Icons.UserOutlined iconSize="xl" />
<Icons.UserAddOutlined iconSize="xl" />
<Icons.UsergroupAddOutlined iconSize="xl" />
<Icons.LoginOutlined iconSize="xl" />
</Section>
<Section title="Settings">
<Icons.SettingOutlined iconSize="xl" />
<Icons.BgColorsOutlined iconSize="xl" />
<Icons.FormatPainterOutlined iconSize="xl" />
<Icons.HighlightOutlined iconSize="xl" />
<Icons.EyeOutlined iconSize="xl" />
<Icons.EyeInvisibleOutlined iconSize="xl" />
<Icons.SunOutlined iconSize="xl" />
<Icons.MoonOutlined iconSize="xl" />
</Section>
</div>
);
}
```
## Icon with Text
```tsx live
function IconWithText() {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<Icons.CheckCircleOutlined iconSize="l" style={{ color: '#52c41a' }} />
<span>Success message</span>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<Icons.InfoCircleOutlined iconSize="l" style={{ color: '#1890ff' }} />
<span>Information message</span>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<Icons.WarningOutlined iconSize="l" style={{ color: '#faad14' }} />
<span>Warning message</span>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<Icons.CloseCircleOutlined iconSize="l" style={{ color: '#ff4d4f' }} />
<span>Error message</span>
</div>
</div>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `iconSize` | `string` | `"xl"` | Size of the icons: s (12px), m (16px), l (20px), xl (24px), xxl (32px). |
## Import
```tsx
import { Icons } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Icons/Icons.stories.tsx).
:::

View File

@@ -1,100 +0,0 @@
---
title: IconTooltip
sidebar_label: IconTooltip
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# IconTooltip
The IconTooltip component from Superset's UI library.
## Live Example
<StoryWithControls
component="IconTooltip"
props={{
tooltip: "Tooltip"
}}
controls={[
{
name: "tooltip",
label: "Tooltip",
type: "text",
description: "Text content to display in the tooltip."
},
{
name: "placement",
label: "Placement",
type: "select",
options: [
"bottom",
"bottomLeft",
"bottomRight",
"left",
"leftBottom",
"leftTop",
"right",
"rightBottom",
"rightTop",
"top",
"topLeft",
"topRight"
],
description: "Position of the tooltip relative to the icon."
}
]}
sampleChildren={[{"component":"Icons.InfoCircleOutlined","props":{"iconSize":"l"}}]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<IconTooltip tooltip="Helpful information">
<Icons.InfoCircleOutlined iconSize="l" />
</IconTooltip>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `tooltip` | `string` | `"Tooltip"` | Text content to display in the tooltip. |
## Import
```tsx
import { IconTooltip } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/IconTooltip/IconTooltip.stories.tsx).
:::

View File

@@ -1,77 +0,0 @@
---
title: Core Components
sidebar_label: Core Components
sidebar_position: 1
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
# Core Components
46 components available in this category.
## Components
- [AutoComplete](./autocomplete)
- [Avatar](./avatar)
- [Badge](./badge)
- [Breadcrumb](./breadcrumb)
- [Button](./button)
- [ButtonGroup](./buttongroup)
- [CachedLabel](./cachedlabel)
- [Card](./card)
- [Checkbox](./checkbox)
- [Collapse](./collapse)
- [DatePicker](./datepicker)
- [Divider](./divider)
- [EditableTitle](./editabletitle)
- [EmptyState](./emptystate)
- [FaveStar](./favestar)
- [IconButton](./iconbutton)
- [Icons](./icons)
- [IconTooltip](./icontooltip)
- [InfoTooltip](./infotooltip)
- [Input](./input)
- [Label](./label)
- [List](./list)
- [ListViewCard](./listviewcard)
- [Loading](./loading)
- [Menu](./menu)
- [Modal](./modal)
- [ModalTrigger](./modaltrigger)
- [Popover](./popover)
- [ProgressBar](./progressbar)
- [Radio](./radio)
- [SafeMarkdown](./safemarkdown)
- [Select](./select)
- [Skeleton](./skeleton)
- [Slider](./slider)
- [Steps](./steps)
- [Switch](./switch)
- [TableCollection](./tablecollection)
- [TableView](./tableview)
- [Tabs](./tabs)
- [Timer](./timer)
- [Tooltip](./tooltip)
- [Tree](./tree)
- [TreeSelect](./treeselect)
- [Typography](./typography)
- [UnsavedChangesModal](./unsavedchangesmodal)
- [Upload](./upload)

View File

@@ -1,106 +0,0 @@
---
title: InfoTooltip
sidebar_label: InfoTooltip
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# InfoTooltip
The InfoTooltip component from Superset's UI library.
## Live Example
<StoryWithControls
component="InfoTooltip"
props={{
tooltip: "This is the text that will display!"
}}
controls={[
{
name: "tooltip",
label: "Tooltip",
type: "text"
},
{
name: "placement",
label: "Placement",
type: "select",
options: [
"bottom",
"left",
"right",
"top",
"topLeft",
"topRight",
"bottomLeft",
"bottomRight",
"leftTop",
"leftBottom",
"rightTop",
"rightBottom"
]
},
{
name: "trigger",
label: "Trigger",
type: "select",
options: [
"hover",
"click"
]
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<InfoTooltip
tooltip="This is the text that will display!"
/>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `tooltip` | `string` | `"This is the text that will display!"` | - |
## Import
```tsx
import { InfoTooltip } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/InfoTooltip/InfoTooltip.stories.tsx).
:::

View File

@@ -1,162 +0,0 @@
---
title: Input
sidebar_label: Input
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Input
The Input component from Superset's UI library.
## Live Example
<StoryWithControls
component="Input"
props={{
allowClear: false,
disabled: false,
showCount: false,
type: "text",
variant: "outlined"
}}
controls={[
{
name: "allowClear",
label: "Allow Clear",
type: "boolean"
},
{
name: "disabled",
label: "Disabled",
type: "boolean"
},
{
name: "showCount",
label: "Show Count",
type: "boolean"
},
{
name: "type",
label: "Type",
type: "select",
options: [
"text",
"password",
"email",
"number",
"tel",
"url",
"search"
],
description: "HTML input type"
},
{
name: "variant",
label: "Variant",
type: "select",
options: [
"outlined",
"borderless",
"filled"
],
description: "Input style variant"
},
{
name: "defaultValue",
label: "Default Value",
type: "text",
description: "Default input value"
},
{
name: "id",
label: "ID",
type: "text",
description: "HTML id attribute"
},
{
name: "maxLength",
label: "Max Length",
type: "number",
description: "Maximum length of input"
},
{
name: "status",
label: "Status",
type: "select",
options: [
"error",
"warning"
],
description: "Validation status"
},
{
name: "size",
label: "Size",
type: "select",
options: [
"large",
"middle",
"small"
],
description: "Size of the input"
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Input
type="text"
variant="outlined"
/>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `allowClear` | `boolean` | `false` | - |
| `disabled` | `boolean` | `false` | - |
| `showCount` | `boolean` | `false` | - |
| `type` | `string` | `"text"` | HTML input type |
| `variant` | `string` | `"outlined"` | Input style variant |
## Import
```tsx
import { Input } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Input/Input.stories.tsx).
:::

View File

@@ -1,105 +0,0 @@
---
title: Label
sidebar_label: Label
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Label
The Label component from Superset's UI library.
## Live Example
<StoryWithControls
component="Label"
props={{
type: "default",
children: "Label text",
monospace: false
}}
controls={[
{
name: "type",
label: "Type",
type: "select",
options: [
"default",
"info",
"success",
"warning",
"error",
"primary"
],
description: "The visual style of the label."
},
{
name: "children",
label: "Children",
type: "text",
description: "The label text content."
},
{
name: "monospace",
label: "Monospace",
type: "boolean",
description: "Use monospace font."
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Label
type="default"
>
Label text
</Label>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `type` | `string` | `"default"` | The visual style of the label. |
| `children` | `string` | `"Label text"` | The label text content. |
| `monospace` | `boolean` | `false` | Use monospace font. |
## Import
```tsx
import { Label } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Label/Label.stories.tsx).
:::

View File

@@ -1,117 +0,0 @@
---
title: List
sidebar_label: List
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# List
The List component from Superset's UI library.
## Live Example
<StoryWithControls
component="List"
props={{
bordered: false,
split: true,
size: "default",
loading: false,
dataSource: [
"Dashboard Analytics",
"User Management",
"Data Sources"
]
}}
controls={[
{
name: "bordered",
label: "Bordered",
type: "boolean",
description: "Whether to show a border around the list."
},
{
name: "split",
label: "Split",
type: "boolean",
description: "Whether to show a divider between items."
},
{
name: "size",
label: "Size",
type: "select",
options: [
"default",
"small",
"large"
],
description: "Size of the list."
},
{
name: "loading",
label: "Loading",
type: "boolean",
description: "Whether to show a loading indicator."
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
const data = ['Dashboard Analytics', 'User Management', 'Data Sources'];
return (
<List
bordered
dataSource={data}
renderItem={(item) => <List.Item>{item}</List.Item>}
/>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `bordered` | `boolean` | `false` | Whether to show a border around the list. |
| `split` | `boolean` | `true` | Whether to show a divider between items. |
| `size` | `string` | `"default"` | Size of the list. |
| `loading` | `boolean` | `false` | Whether to show a loading indicator. |
| `dataSource` | `any` | `["Dashboard Analytics","User Management","Data Sources"]` | - |
## Import
```tsx
import { List } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/List/List.stories.tsx).
:::

View File

@@ -1,132 +0,0 @@
---
title: ListViewCard
sidebar_label: ListViewCard
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# ListViewCard
ListViewCard is a card component used to display items in list views with an image, title, description, and optional cover sections.
## Live Example
<StoryWithControls
component="ListViewCard"
props={{
title: "Superset Card Title",
loading: false,
url: "/superset/dashboard/births/",
imgURL: "https://picsum.photos/seed/superset/300/200",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
coverLeft: "Left Section",
coverRight: "Right Section"
}}
controls={[
{
name: "title",
label: "Title",
type: "text",
description: "Title displayed on the card."
},
{
name: "loading",
label: "Loading",
type: "boolean",
description: "Whether the card is in loading state."
},
{
name: "url",
label: "URL",
type: "text",
description: "URL the card links to."
},
{
name: "imgURL",
label: "Image URL",
type: "text",
description: "Primary image URL for the card."
},
{
name: "description",
label: "Description",
type: "text",
description: "Description text displayed on the card."
},
{
name: "coverLeft",
label: "Cover Left",
type: "text",
description: "Content for the left section of the cover."
},
{
name: "coverRight",
label: "Cover Right",
type: "text",
description: "Content for the right section of the cover."
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<ListViewCard
title="Superset Card Title"
url="/superset/dashboard/births/"
imgURL="https://picsum.photos/seed/superset/300/200"
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit..."
coverLeft="Left Section"
coverRight="Right Section"
/>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | `"Superset Card Title"` | Title displayed on the card. |
| `loading` | `boolean` | `false` | Whether the card is in loading state. |
| `url` | `string` | `"/superset/dashboard/births/"` | URL the card links to. |
| `imgURL` | `string` | `"https://picsum.photos/seed/superset/300/200"` | Primary image URL for the card. |
| `description` | `string` | `"Lorem ipsum dolor sit amet, consectetur adipiscing elit..."` | Description text displayed on the card. |
| `coverLeft` | `string` | `"Left Section"` | Content for the left section of the cover. |
| `coverRight` | `string` | `"Right Section"` | Content for the right section of the cover. |
## Import
```tsx
import { ListViewCard } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/ListViewCard/ListViewCard.stories.tsx).
:::

View File

@@ -1,187 +0,0 @@
---
title: Loading
sidebar_label: Loading
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Loading
The Loading component from Superset's UI library.
## Live Example
<StoryWithControls
component="Loading"
props={{
size: "m",
position: "normal",
muted: false
}}
controls={[
{
name: "size",
label: "Size",
type: "select",
options: [
"s",
"m",
"l"
],
description: "Size of the spinner: s (40px), m (70px), or l (100px)."
},
{
name: "position",
label: "Position",
type: "select",
options: [
"normal",
"floating",
"inline"
],
description: "Position style: normal (inline flow), floating (overlay), or inline."
},
{
name: "muted",
label: "Muted",
type: "boolean",
description: "Whether to show a muted/subtle version of the spinner."
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<div>
{['normal', 'floating', 'inline'].map(position => (
<div
key={position}
style={{
marginBottom: 40,
padding: 20,
border: '1px solid #eee',
position: 'relative',
minHeight: 80,
}}
>
<h4 style={{ marginTop: 0 }}>{position}</h4>
<Loading position={position} size="m" />
</div>
))}
</div>
);
}
```
## Size and Opacity Showcase
```tsx live
function SizeShowcase() {
const sizes = ['s', 'm', 'l'];
return (
<div style={{ padding: 20 }}>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, alignItems: 'center' }}>
<div><strong>Size</strong></div>
<div><strong>Normal</strong></div>
<div><strong>Muted</strong></div>
<div><strong>Usage</strong></div>
{sizes.map(size => (
<React.Fragment key={size}>
<div style={{ fontWeight: 'bold' }}>
{size.toUpperCase()} ({size === 's' ? '40px' : size === 'm' ? '70px' : '100px'})
</div>
<div style={{ textAlign: 'center', padding: 10, border: '1px solid #eee' }}>
<Loading size={size} position="normal" />
</div>
<div style={{ textAlign: 'center', padding: 10, border: '1px solid #eee' }}>
<Loading size={size} muted position="normal" />
</div>
<div style={{ fontSize: 12, color: '#666' }}>
{size === 's' && 'Filter bars, inline'}
{size === 'm' && 'Explore pages'}
{size === 'l' && 'Full page loading'}
</div>
</React.Fragment>
))}
</div>
</div>
);
}
```
## Contextual Examples
```tsx live
function ContextualDemo() {
return (
<div style={{ padding: 20 }}>
<h4>Filter Bar (size="s", muted)</h4>
<div style={{ height: 40, backgroundColor: '#f5f5f5', display: 'flex', alignItems: 'center', padding: '0 10px', gap: 10, marginBottom: 30 }}>
<span>Filter 1:</span>
<Loading size="s" muted position="normal" />
<span>Filter 2:</span>
<Loading size="s" muted position="normal" />
</div>
<h4>Dashboard Grid (size="s", muted)</h4>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 30 }}>
{[1, 2, 3].map(i => (
<div key={i} style={{ height: 100, backgroundColor: '#fafafa', border: '1px solid #ddd', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Loading size="s" muted position="normal" />
</div>
))}
</div>
<h4>Main Loading (size="l")</h4>
<div style={{ height: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px dashed #ccc' }}>
<Loading size="l" position="normal" />
</div>
</div>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `string` | `"m"` | Size of the spinner: s (40px), m (70px), or l (100px). |
| `position` | `string` | `"normal"` | Position style: normal (inline flow), floating (overlay), or inline. |
| `muted` | `boolean` | `false` | Whether to show a muted/subtle version of the spinner. |
## Import
```tsx
import { Loading } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Loading/Loading.stories.tsx).
:::

View File

@@ -1,174 +0,0 @@
---
title: Menu
sidebar_label: Menu
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Menu
Navigation menu component supporting horizontal, vertical, and inline modes. Based on Ant Design Menu with Superset styling.
## Live Example
<StoryWithControls
component="Menu"
props={{
mode: "horizontal",
selectable: true,
items: [
{
label: "Dashboards",
key: "dashboards"
},
{
label: "Charts",
key: "charts"
},
{
label: "Datasets",
key: "datasets"
},
{
label: "SQL Lab",
key: "sqllab"
}
]
}}
controls={[
{
name: "mode",
label: "Mode",
type: "select",
options: [
"horizontal",
"vertical",
"inline"
],
description: "Menu display mode: horizontal navbar, vertical sidebar, or inline collapsible."
},
{
name: "selectable",
label: "Selectable",
type: "boolean",
description: "Whether menu items can be selected."
},
{
name: "multiple",
label: "Multiple",
type: "boolean",
description: "Allow multiple items to be selected."
},
{
name: "inlineCollapsed",
label: "Inline Collapsed",
type: "boolean",
description: "Whether the inline menu is collapsed (only applies to inline mode)."
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Menu
mode="horizontal"
selectable
items={[
{ label: 'Dashboards', key: 'dashboards' },
{ label: 'Charts', key: 'charts' },
{ label: 'Datasets', key: 'datasets' },
{ label: 'SQL Lab', key: 'sqllab' },
]}
/>
);
}
```
## Vertical Menu
```tsx live
function VerticalMenu() {
return (
<Menu
mode="vertical"
style={{ width: 200 }}
items={[
{ label: 'Dashboards', key: 'dashboards' },
{ label: 'Charts', key: 'charts' },
{ label: 'Datasets', key: 'datasets' },
{
label: 'Settings',
key: 'settings',
children: [
{ label: 'Profile', key: 'profile' },
{ label: 'Preferences', key: 'preferences' },
],
},
]}
/>
);
}
```
## Menu with Icons
```tsx live
function MenuWithIcons() {
return (
<Menu
mode="horizontal"
items={[
{ label: <><Icons.DashboardOutlined /> Dashboards</>, key: 'dashboards' },
{ label: <><Icons.LineChartOutlined /> Charts</>, key: 'charts' },
{ label: <><Icons.DatabaseOutlined /> Datasets</>, key: 'datasets' },
{ label: <><Icons.ConsoleSqlOutlined /> SQL Lab</>, key: 'sqllab' },
]}
/>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `mode` | `string` | `"horizontal"` | Menu display mode: horizontal navbar, vertical sidebar, or inline collapsible. |
| `selectable` | `boolean` | `true` | Whether menu items can be selected. |
| `items` | `any` | `[{"label":"Dashboards","key":"dashboards"},{"label":"Charts","key":"charts"},{"label":"Datasets","key":"datasets"},{"label":"SQL Lab","key":"sqllab"}]` | - |
## Import
```tsx
import { Menu } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Menu/Menu.stories.tsx).
:::

View File

@@ -1,207 +0,0 @@
---
title: Modal
sidebar_label: Modal
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Modal
Modal dialog component for displaying content that requires user attention or interaction. Supports customizable buttons, drag/resize, and confirmation dialogs.
## Live Example
<StoryWithControls
component="Modal"
props={{
disablePrimaryButton: false,
primaryButtonName: "Submit",
primaryButtonStyle: "primary",
show: false,
title: "I'm a modal!",
resizable: false,
draggable: false,
width: 500
}}
controls={[
{
name: "disablePrimaryButton",
label: "Disable Primary Button",
type: "boolean",
description: "Whether the primary button is disabled."
},
{
name: "primaryButtonName",
label: "Primary Button Name",
type: "text",
description: "Text for the primary action button."
},
{
name: "primaryButtonStyle",
label: "Primary Button Style",
type: "select",
options: [
"primary",
"secondary",
"dashed",
"danger",
"link"
],
description: "The style of the primary action button."
},
{
name: "show",
label: "Show",
type: "boolean",
description: "Whether the modal is visible. Use the \"Try It\" example below for a working demo."
},
{
name: "title",
label: "Title",
type: "text",
description: "Title displayed in the modal header."
},
{
name: "resizable",
label: "Resizable",
type: "boolean",
description: "Whether the modal can be resized by dragging corners."
},
{
name: "draggable",
label: "Draggable",
type: "boolean",
description: "Whether the modal can be dragged by its header."
},
{
name: "width",
label: "Width",
type: "number",
description: "Width of the modal in pixels."
}
]}
triggerProp="show"
onHideProp="onHide"
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function ModalDemo() {
const [isOpen, setIsOpen] = React.useState(false);
return (
<>
<Button onClick={() => setIsOpen(true)}>Open Modal</Button>
<Modal
show={isOpen}
onHide={() => setIsOpen(false)}
title="Example Modal"
primaryButtonName="Submit"
onHandledPrimaryAction={() => {
alert('Submitted!');
setIsOpen(false);
}}
>
<p>This is the modal content. Click Submit or close the modal.</p>
</Modal>
</>
);
}
```
## Danger Modal
```tsx live
function DangerModal() {
const [isOpen, setIsOpen] = React.useState(false);
return (
<>
<Button buttonStyle="danger" onClick={() => setIsOpen(true)}>Delete Item</Button>
<Modal
show={isOpen}
onHide={() => setIsOpen(false)}
title="Confirm Delete"
primaryButtonName="Delete"
primaryButtonStyle="danger"
onHandledPrimaryAction={() => {
alert('Deleted!');
setIsOpen(false);
}}
>
<p>Are you sure you want to delete this item? This action cannot be undone.</p>
</Modal>
</>
);
}
```
## Confirmation Dialogs
```tsx live
function ConfirmationDialogs() {
return (
<div style={{ display: 'flex', gap: 8 }}>
<Button onClick={() => Modal.confirm({
title: 'Confirm Action',
content: 'Are you sure you want to proceed?',
okText: 'Yes',
})}>Confirm</Button>
<Button onClick={() => Modal.warning({
title: 'Warning',
content: 'This action may have consequences.',
})}>Warning</Button>
<Button onClick={() => Modal.error({
title: 'Error',
content: 'Something went wrong.',
})}>Error</Button>
</div>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `disablePrimaryButton` | `boolean` | `false` | Whether the primary button is disabled. |
| `primaryButtonName` | `string` | `"Submit"` | Text for the primary action button. |
| `primaryButtonStyle` | `string` | `"primary"` | The style of the primary action button. |
| `show` | `boolean` | `false` | Whether the modal is visible. Use the "Try It" example below for a working demo. |
| `title` | `string` | `"I'm a modal!"` | Title displayed in the modal header. |
| `resizable` | `boolean` | `false` | Whether the modal can be resized by dragging corners. |
| `draggable` | `boolean` | `false` | Whether the modal can be dragged by its header. |
| `width` | `number` | `500` | Width of the modal in pixels. |
## Import
```tsx
import { Modal } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.stories.tsx).
:::

View File

@@ -1,192 +0,0 @@
---
title: ModalTrigger
sidebar_label: ModalTrigger
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# ModalTrigger
A component that renders a trigger element which opens a modal when clicked. Useful for actions that need confirmation or additional input.
## Live Example
<StoryWithControls
component="ModalTrigger"
props={{
isButton: true,
modalTitle: "Modal Title",
modalBody: "This is the modal body content.",
tooltip: "Click to open modal",
width: "600px",
maxWidth: "1000px",
responsive: true,
draggable: false,
resizable: false,
triggerNode: "Click to Open Modal"
}}
controls={[
{
name: "isButton",
label: "Is Button",
type: "boolean",
description: "Whether to wrap the trigger in a button element."
},
{
name: "modalTitle",
label: "Modal Title",
type: "text",
description: "Title displayed in the modal header."
},
{
name: "modalBody",
label: "Modal Body",
type: "text",
description: "Content displayed in the modal body."
},
{
name: "tooltip",
label: "Tooltip",
type: "text",
description: "Tooltip text shown on hover over the trigger."
},
{
name: "width",
label: "Width",
type: "text",
description: "Width of the modal (e.g., \"600px\", \"80%\")."
},
{
name: "maxWidth",
label: "Max Width",
type: "text",
description: "Maximum width of the modal."
},
{
name: "responsive",
label: "Responsive",
type: "boolean",
description: "Whether the modal should be responsive."
},
{
name: "draggable",
label: "Draggable",
type: "boolean",
description: "Whether the modal can be dragged by its header."
},
{
name: "resizable",
label: "Resizable",
type: "boolean",
description: "Whether the modal can be resized by dragging corners."
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<ModalTrigger
isButton
triggerNode={<span>Click to Open</span>}
modalTitle="Example Modal"
modalBody={<p>This is the modal content. You can put any React elements here.</p>}
width="500px"
responsive
/>
);
}
```
## With Custom Trigger
```tsx live
function CustomTrigger() {
return (
<ModalTrigger
triggerNode={
<Button buttonStyle="primary">
<Icons.PlusOutlined /> Add New Item
</Button>
}
modalTitle="Add New Item"
modalBody={
<div>
<p>Fill out the form to add a new item.</p>
<Input placeholder="Item name" />
</div>
}
width="400px"
/>
);
}
```
## Draggable & Resizable
```tsx live
function DraggableModal() {
return (
<ModalTrigger
isButton
triggerNode={<span>Open Draggable Modal</span>}
modalTitle="Draggable & Resizable"
modalBody={<p>Try dragging the header or resizing from the corners!</p>}
draggable
resizable
width="500px"
/>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `isButton` | `boolean` | `true` | Whether to wrap the trigger in a button element. |
| `modalTitle` | `string` | `"Modal Title"` | Title displayed in the modal header. |
| `modalBody` | `string` | `"This is the modal body content."` | Content displayed in the modal body. |
| `tooltip` | `string` | `"Click to open modal"` | Tooltip text shown on hover over the trigger. |
| `width` | `string` | `"600px"` | Width of the modal (e.g., "600px", "80%"). |
| `maxWidth` | `string` | `"1000px"` | Maximum width of the modal. |
| `responsive` | `boolean` | `true` | Whether the modal should be responsive. |
| `draggable` | `boolean` | `false` | Whether the modal can be dragged by its header. |
| `resizable` | `boolean` | `false` | Whether the modal can be resized by dragging corners. |
| `triggerNode` | `string` | `"Click to Open Modal"` | The clickable element that opens the modal when clicked. |
## Import
```tsx
import { ModalTrigger } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/ModalTrigger/ModalTrigger.stories.tsx).
:::

View File

@@ -1,199 +0,0 @@
---
title: Popover
sidebar_label: Popover
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Popover
A floating card that appears when hovering or clicking a trigger element. Supports configurable placement, trigger behavior, and custom content.
## Live Example
<StoryWithControls
component="Popover"
props={{
content: "Popover sample content",
title: "Popover title",
arrow: true,
color: "#fff"
}}
controls={[
{
name: "content",
label: "Content",
type: "text",
description: "Content displayed inside the popover body."
},
{
name: "title",
label: "Title",
type: "text",
description: "Title displayed in the popover header."
},
{
name: "arrow",
label: "Arrow",
type: "boolean",
description: "Whether to show the popover's arrow pointing to the trigger."
},
{
name: "color",
label: "Color",
type: "color",
description: "The background color of the popover."
},
{
name: "placement",
label: "Placement",
type: "select",
options: [
"topLeft",
"top",
"topRight",
"leftTop",
"left",
"leftBottom",
"rightTop",
"right",
"rightBottom",
"bottomLeft",
"bottom",
"bottomRight"
],
description: "Position of the popover relative to the trigger element."
},
{
name: "trigger",
label: "Trigger",
type: "select",
options: [
"hover",
"click",
"focus"
],
description: "Event that triggers the popover to appear."
}
]}
sampleChildren={[{"component":"Button","props":{"children":"Hover me"}}]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Popover
content="Popover sample content"
title="Popover title"
arrow
>
<Button>Hover me</Button>
</Popover>
);
}
```
## Click Trigger
```tsx live
function ClickPopover() {
return (
<Popover
content="This popover appears on click."
title="Click Popover"
trigger="click"
>
<Button>Click me</Button>
</Popover>
);
}
```
## Placements
```tsx live
function PlacementsDemo() {
return (
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center', padding: '60px 0' }}>
{['top', 'right', 'bottom', 'left'].map(placement => (
<Popover
key={placement}
content={`This popover is placed on the ${placement}`}
title={placement}
placement={placement}
>
<Button>{placement}</Button>
</Popover>
))}
</div>
);
}
```
## Rich Content
```tsx live
function RichPopover() {
return (
<Popover
title="Dashboard Info"
content={
<div>
<p><strong>Created by:</strong> Admin</p>
<p><strong>Last modified:</strong> Jan 2025</p>
<p><strong>Charts:</strong> 12</p>
</div>
}
>
<Button buttonStyle="primary">
<Icons.InfoCircleOutlined /> View Details
</Button>
</Popover>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `content` | `string` | `"Popover sample content"` | Content displayed inside the popover body. |
| `title` | `string` | `"Popover title"` | Title displayed in the popover header. |
| `arrow` | `boolean` | `true` | Whether to show the popover's arrow pointing to the trigger. |
| `color` | `string` | `"#fff"` | The background color of the popover. |
## Import
```tsx
import { Popover } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Popover/Popover.stories.tsx).
:::

View File

@@ -1,206 +0,0 @@
---
title: ProgressBar
sidebar_label: ProgressBar
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# ProgressBar
Progress bar component for displaying completion status. Supports line, circle, and dashboard display types.
## Live Example
<StoryWithControls
component="ProgressBar"
props={{
percent: 75,
status: "normal",
type: "line",
striped: false,
showInfo: true,
strokeLinecap: "round"
}}
controls={[
{
name: "percent",
label: "Percent",
type: "number",
description: "Completion percentage (0-100)."
},
{
name: "status",
label: "Status",
type: "select",
options: [
"normal",
"success",
"exception",
"active"
],
description: "Current status of the progress bar."
},
{
name: "type",
label: "Type",
type: "select",
options: [
"line",
"circle",
"dashboard"
],
description: "Display type: line, circle, or dashboard gauge."
},
{
name: "striped",
label: "Striped",
type: "boolean",
description: "Whether to show striped animation on the bar."
},
{
name: "showInfo",
label: "Show Info",
type: "boolean",
description: "Whether to show the percentage text."
},
{
name: "strokeLinecap",
label: "Stroke Linecap",
type: "select",
options: [
"round",
"butt",
"square"
],
description: "Shape of the progress bar endpoints."
},
{
name: "strokeColor",
label: "Stroke Color",
type: "color",
description: "Color of the progress bar fill."
},
{
name: "trailColor",
label: "Trail Color",
type: "color",
description: "Color of the unfilled portion."
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<ProgressBar
percent={75}
status="normal"
type="line"
showInfo
/>
);
}
```
## All Progress Types
```tsx live
function AllTypesDemo() {
return (
<div style={{ display: 'flex', gap: 40, alignItems: 'center' }}>
<div style={{ flex: 1 }}>
<h4>Line</h4>
<ProgressBar percent={75} type="line" />
</div>
<div>
<h4>Circle</h4>
<ProgressBar percent={75} type="circle" />
</div>
<div>
<h4>Dashboard</h4>
<ProgressBar percent={75} type="dashboard" />
</div>
</div>
);
}
```
## Status Variants
```tsx live
function StatusDemo() {
const statuses = ['normal', 'success', 'exception', 'active'];
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
{statuses.map(status => (
<div key={status} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
<span style={{ width: 80 }}>{status}</span>
<ProgressBar percent={75} status={status} type="line" style={{ flex: 1 }} />
</div>
))}
</div>
);
}
```
## Custom Colors
```tsx live
function CustomColors() {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
<ProgressBar percent={50} strokeColor="#1890ff" />
<ProgressBar percent={70} strokeColor="#52c41a" />
<ProgressBar percent={30} strokeColor="#faad14" trailColor="#f0f0f0" />
<ProgressBar percent={90} strokeColor="#ff4d4f" />
</div>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `percent` | `number` | `75` | Completion percentage (0-100). |
| `status` | `string` | `"normal"` | Current status of the progress bar. |
| `type` | `string` | `"line"` | Display type: line, circle, or dashboard gauge. |
| `striped` | `boolean` | `false` | Whether to show striped animation on the bar. |
| `showInfo` | `boolean` | `true` | Whether to show the percentage text. |
| `strokeLinecap` | `string` | `"round"` | Shape of the progress bar endpoints. |
## Import
```tsx
import { ProgressBar } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/ProgressBar/ProgressBar.stories.tsx).
:::

View File

@@ -1,137 +0,0 @@
---
title: Radio
sidebar_label: Radio
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Radio
Radio button component for selecting one option from a set. Supports standalone radio buttons, radio buttons styled as buttons, and grouped radio buttons with layout configuration.
## Live Example
<StoryWithControls
component="Radio"
props={{
value: "radio1",
disabled: false,
checked: false,
children: "Radio"
}}
controls={[
{
name: "value",
label: "Value",
type: "text",
description: "The value associated with this radio button."
},
{
name: "disabled",
label: "Disabled",
type: "boolean",
description: "Whether the radio button is disabled."
},
{
name: "checked",
label: "Checked",
type: "boolean",
description: "Whether the radio button is checked (controlled mode)."
},
{
name: "children",
label: "Children",
type: "text",
description: "Label text displayed next to the radio button."
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Radio
value="radio1"
>
Radio
</Radio>
);
}
```
## Radio Button Variants
```tsx live
function RadioButtonDemo() {
const [value, setValue] = React.useState('line');
return (
<Radio.Group value={value} onChange={e => setValue(e.target.value)}>
<Radio.Button value="line">Line Chart</Radio.Button>
<Radio.Button value="bar">Bar Chart</Radio.Button>
<Radio.Button value="pie">Pie Chart</Radio.Button>
</Radio.Group>
);
}
```
## Vertical Radio Group
```tsx live
function VerticalDemo() {
const [value, setValue] = React.useState('option1');
return (
<Radio.Group value={value} onChange={e => setValue(e.target.value)}>
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
<Radio value="option1">First option</Radio>
<Radio value="option2">Second option</Radio>
<Radio value="option3">Third option</Radio>
</div>
</Radio.Group>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `string` | `"radio1"` | The value associated with this radio button. |
| `disabled` | `boolean` | `false` | Whether the radio button is disabled. |
| `checked` | `boolean` | `false` | Whether the radio button is checked (controlled mode). |
| `children` | `string` | `"Radio"` | Label text displayed next to the radio button. |
## Import
```tsx
import { Radio } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Radio/Radio.stories.tsx).
:::

View File

@@ -1,85 +0,0 @@
---
title: SafeMarkdown
sidebar_label: SafeMarkdown
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# SafeMarkdown
The SafeMarkdown component from Superset's UI library.
## Live Example
<StoryWithControls
component="SafeMarkdown"
props={{
htmlSanitization: true
}}
controls={[
{
name: "htmlSanitization",
label: "Html Sanitization",
type: "boolean",
description: "Enable HTML sanitization (recommended for user input)"
},
{
name: "source",
label: "Source",
type: "text",
description: "Markdown source string to render"
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<SafeMarkdown
htmlSanitization
/>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `htmlSanitization` | `boolean` | `true` | Enable HTML sanitization (recommended for user input) |
## Import
```tsx
import { SafeMarkdown } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/SafeMarkdown/SafeMarkdown.stories.tsx).
:::

View File

@@ -1,308 +0,0 @@
---
title: Select
sidebar_label: Select
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Select
A versatile select component supporting single and multi-select modes, search filtering, option creation, and both synchronous and asynchronous data sources.
## Live Example
<StoryWithControls
component="Select"
props={{
mode: "single",
placeholder: "Select ...",
showSearch: true,
allowNewOptions: false,
allowClear: false,
allowSelectAll: true,
disabled: false,
invertSelection: false,
oneLine: false,
maxTagCount: 4,
options: [
{
label: "Such an incredibly awesome long long label",
value: "long-label-1"
},
{
label: "Another incredibly awesome long long label",
value: "long-label-2"
},
{
label: "Option A",
value: "A"
},
{
label: "Option B",
value: "B"
},
{
label: "Option C",
value: "C"
},
{
label: "Option D",
value: "D"
},
{
label: "Option E",
value: "E"
},
{
label: "Option F",
value: "F"
},
{
label: "Option G",
value: "G"
},
{
label: "Option H",
value: "H"
},
{
label: "Option I",
value: "I"
}
]
}}
controls={[
{
name: "mode",
label: "Mode",
type: "inline-radio",
options: [
"single",
"multiple"
],
description: "Whether to allow selection of a single option or multiple."
},
{
name: "placeholder",
label: "Placeholder",
type: "text",
description: "Placeholder text when no option is selected."
},
{
name: "showSearch",
label: "Show Search",
type: "boolean",
description: "Whether to show a search input for filtering."
},
{
name: "allowNewOptions",
label: "Allow New Options",
type: "boolean",
description: "Whether users can create new options by typing a value not in the list."
},
{
name: "allowClear",
label: "Allow Clear",
type: "boolean",
description: "Whether to show a clear button to reset the selection."
},
{
name: "allowSelectAll",
label: "Allow Select All",
type: "boolean",
description: "Whether to show a \"Select All\" option in multiple mode."
},
{
name: "disabled",
label: "Disabled",
type: "boolean",
description: "Whether the select is disabled."
},
{
name: "invertSelection",
label: "Invert Selection",
type: "boolean",
description: "Shows a stop icon instead of a checkmark on selected options, indicating deselection on click."
},
{
name: "oneLine",
label: "One Line",
type: "boolean",
description: "Forces tags onto one line with overflow count. Requires multiple mode."
},
{
name: "maxTagCount",
label: "Max Tag Count",
type: "number",
description: "Maximum number of tags to display in multiple mode before showing an overflow count."
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<div style={{ width: 300 }}>
<Select
ariaLabel="demo-select"
options={[
{ label: 'Dashboards', value: 'dashboards' },
{ label: 'Charts', value: 'charts' },
{ label: 'Datasets', value: 'datasets' },
{ label: 'SQL Lab', value: 'sqllab' },
{ label: 'Settings', value: 'settings' },
]}
placeholder="Select ..."
showSearch
/>
</div>
);
}
```
## Multi Select
```tsx live
function MultiSelectDemo() {
return (
<div style={{ width: 400 }}>
<Select
ariaLabel="multi-select"
mode="multiple"
options={[
{ label: 'Dashboards', value: 'dashboards' },
{ label: 'Charts', value: 'charts' },
{ label: 'Datasets', value: 'datasets' },
{ label: 'SQL Lab', value: 'sqllab' },
{ label: 'Settings', value: 'settings' },
]}
placeholder="Select items..."
allowSelectAll
maxTagCount={3}
/>
</div>
);
}
```
## Allow New Options
```tsx live
function AllowNewDemo() {
return (
<div style={{ width: 300 }}>
<Select
ariaLabel="allow-new-select"
mode="multiple"
options={[
{ label: 'Red', value: 'red' },
{ label: 'Green', value: 'green' },
{ label: 'Blue', value: 'blue' },
]}
placeholder="Type to add tags..."
allowNewOptions
showSearch
/>
</div>
);
}
```
## Inverted Selection
```tsx live
function InvertedDemo() {
return (
<div style={{ width: 400 }}>
<Select
ariaLabel="inverted-select"
mode="multiple"
options={[
{ label: 'Admin', value: 'admin' },
{ label: 'Editor', value: 'editor' },
{ label: 'Viewer', value: 'viewer' },
{ label: 'Public', value: 'public' },
]}
placeholder="Exclude roles..."
invertSelection
/>
</div>
);
}
```
## One Line Mode
```tsx live
function OneLineDemo() {
return (
<div style={{ width: 300 }}>
<Select
ariaLabel="oneline-select"
mode="multiple"
options={[
{ label: 'Dashboard 1', value: 'd1' },
{ label: 'Dashboard 2', value: 'd2' },
{ label: 'Dashboard 3', value: 'd3' },
{ label: 'Dashboard 4', value: 'd4' },
{ label: 'Dashboard 5', value: 'd5' },
]}
placeholder="Select dashboards..."
oneLine
/>
</div>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `mode` | `string` | `"single"` | Whether to allow selection of a single option or multiple. |
| `placeholder` | `string` | `"Select ..."` | Placeholder text when no option is selected. |
| `showSearch` | `boolean` | `true` | Whether to show a search input for filtering. |
| `allowNewOptions` | `boolean` | `false` | Whether users can create new options by typing a value not in the list. |
| `allowClear` | `boolean` | `false` | Whether to show a clear button to reset the selection. |
| `allowSelectAll` | `boolean` | `true` | Whether to show a "Select All" option in multiple mode. |
| `disabled` | `boolean` | `false` | Whether the select is disabled. |
| `invertSelection` | `boolean` | `false` | Shows a stop icon instead of a checkmark on selected options, indicating deselection on click. |
| `oneLine` | `boolean` | `false` | Forces tags onto one line with overflow count. Requires multiple mode. |
| `maxTagCount` | `number` | `4` | Maximum number of tags to display in multiple mode before showing an overflow count. |
| `options` | `any` | `[{"label":"Such an incredibly awesome long long label","value":"long-label-1"},{"label":"Another incredibly awesome long long label","value":"long-label-2"},{"label":"Option A","value":"A"},{"label":"Option B","value":"B"},{"label":"Option C","value":"C"},{"label":"Option D","value":"D"},{"label":"Option E","value":"E"},{"label":"Option F","value":"F"},{"label":"Option G","value":"G"},{"label":"Option H","value":"H"},{"label":"Option I","value":"I"}]` | - |
## Import
```tsx
import { Select } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Select/Select.stories.tsx).
:::

View File

@@ -1,140 +0,0 @@
---
title: Skeleton
sidebar_label: Skeleton
---
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
import { StoryWithControls } from '../../../src/components/StorybookWrapper';
# Skeleton
Skeleton loading component with support for avatar, title, paragraph, button, and input placeholders.
## Live Example
<StoryWithControls
component="Skeleton"
props={{
active: true,
avatar: false,
loading: true,
title: true,
shape: "circle",
size: "default",
block: false
}}
controls={[
{
name: "active",
label: "Active",
type: "boolean",
description: "Show animation effect."
},
{
name: "avatar",
label: "Avatar",
type: "boolean",
description: "Show avatar placeholder."
},
{
name: "loading",
label: "Loading",
type: "boolean",
description: "Display the skeleton when true."
},
{
name: "title",
label: "Title",
type: "boolean",
description: "Show title placeholder."
},
{
name: "shape",
label: "Shape",
type: "select",
options: [
"circle",
"square"
],
description: "Shape of the avatar/button skeleton."
},
{
name: "size",
label: "Size",
type: "select",
options: [
"large",
"small",
"default"
],
description: "Size of the skeleton elements."
},
{
name: "block",
label: "Block",
type: "boolean",
description: "Option to fit button width to its parent width."
}
]}
/>
## Try It
Edit the code below to experiment with the component:
```tsx live
function Demo() {
return (
<Skeleton
active
loading
title
shape="circle"
size="default"
/>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `active` | `boolean` | `true` | Show animation effect. |
| `avatar` | `boolean` | `false` | Show avatar placeholder. |
| `loading` | `boolean` | `true` | Display the skeleton when true. |
| `title` | `boolean` | `true` | Show title placeholder. |
| `shape` | `string` | `"circle"` | Shape of the avatar/button skeleton. |
| `size` | `string` | `"default"` | Size of the skeleton elements. |
| `block` | `boolean` | `false` | Option to fit button width to its parent width. |
## Import
```tsx
import { Skeleton } from '@superset/components';
```
---
:::tip[Improve this page]
This documentation is auto-generated from the component's Storybook story.
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Skeleton/Skeleton.stories.tsx).
:::

Some files were not shown because too many files have changed in this diff Show More