mirror of
https://github.com/apache/superset.git
synced 2026-05-09 18:05:52 +00:00
82 lines
31 KiB
HTML
82 lines
31 KiB
HTML
<!doctype html>
|
||
<html class="docs-version-current" lang="en" dir="ltr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<meta name="generator" content="Docusaurus v2.0.0-beta.15">
|
||
<link rel="preconnect" href="https://www.google-analytics.com">
|
||
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","G-133LHD3B3N","auto"),ga("set","anonymizeIp",!0),ga("send","pageview")</script>
|
||
<script async src="https://www.google-analytics.com/analytics.js"></script><title data-react-helmet="true">Building Custom Viz Plugins | Superset</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://superset.apache.org/docs/installation/building-custom-viz-plugins"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Building Custom Viz Plugins | Superset"><meta data-react-helmet="true" name="description" content="This is a tutorial to help you build a "Hello World" viz plugin. The intent is to provide a basic"><meta data-react-helmet="true" property="og:description" content="This is a tutorial to help you build a "Hello World" viz plugin. The intent is to provide a basic"><link data-react-helmet="true" rel="icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://superset.apache.org/docs/installation/building-custom-viz-plugins"><link data-react-helmet="true" rel="alternate" href="https://superset.apache.org/docs/installation/building-custom-viz-plugins" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://superset.apache.org/docs/installation/building-custom-viz-plugins" hreflang="x-default"><link rel="stylesheet" href="/assets/css/styles.f64e49f2.css">
|
||
<link rel="preload" href="/assets/js/runtime~main.5a0758a3.js" as="script">
|
||
<link rel="preload" href="/assets/js/main.0949d8e1.js" as="script">
|
||
</head>
|
||
<body>
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||
<div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/superset-logo-horiz.svg" alt="Superset Logo" class="themedImage_W2Cr themedImage--light_TfLj"><img src="/img/superset-logo-horiz-dark.svg" alt="Superset Logo" class="themedImage_W2Cr themedImage--dark_oUvU"></div></a><a class="navbar__item navbar__link navbar__link--active" href="/docs/intro">Documentation</a><a class="navbar__item navbar__link" href="/community">Community</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/apache/superset" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_P2Lg"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><aside class="theme-doc-sidebar-container docSidebarContainer_rKC_"><div class="sidebar_CW9Y"><nav class="menu thin-scrollbar menu_SkdO"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/intro">Introduction</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active hasHref_VCh3" aria-current="page" href="/docs/installation/installing-superset-using-docker-compose">Installation and Configuration</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/installation/installing-superset-using-docker-compose">Installing Locally Using Docker Compose</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/installation/installing-superset-from-scratch">Installing From Scratch</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/installation/configuring-superset">Configuring Superset</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/installation/networking-settings">Additional Networking Settings</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/installation/cache">Caching</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/installation/event-logging">Event Logging</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/installation/upgrading-superset">Upgrading Superset</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/installation/async-queries-celery">Async Queries via Celery</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/installation/alerts-reports">Alerts and Reports</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/installation/sql-templating">SQL Templating</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/docs/installation/building-custom-viz-plugins">Building Custom Viz Plugins</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/installation/running-on-kubernetes">Running on Kubernetes</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist hasHref_VCh3" href="/docs/databases/installing-database-drivers">Connecting to Databases</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist hasHref_VCh3" href="/docs/creating-charts-dashboards/creating-your-first-dashboard">Creating Charts and Dashboards</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist hasHref_VCh3" href="/docs/miscellaneous/country-map-tools">Miscellaneous</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist hasHref_VCh3" href="/docs/contributing/contributing-page">Contributing</a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/frequently-asked-questions">Frequently Asked Questions</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/api">API</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/security">Security</a></li></ul></nav></div></aside><main class="docMainContainer_TCnq"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_DM6M"><div class="docItemContainer_vinB"><article><div class="tocCollapsible_jdIR theme-doc-toc-mobile tocMobile_TmEX"><button type="button" class="clean-btn tocCollapsibleButton_Fzxq">On this page</button></div><div class="theme-doc-markdown markdown"><p>This is a tutorial to help you build a "Hello World" viz plugin. The intent is to provide a basic
|
||
scaffolding to build any sort of data visualization, using any viz libary you'd like (e.g. ECharts,
|
||
AntV, HighCharts, VX, and D3.).</p><p>You can build the Hello World plugin by running a <a href="https://yeoman.io/" target="_blank" rel="noopener noreferrer">Yeoman</a> generator, which
|
||
takes a few simple options, and provides this plugin scaffolding.</p><h2 class="anchor anchorWithStickyNavbar_mojV" id="getting-set-up">Getting Set Up<a class="hash-link" href="#getting-set-up" title="Direct link to heading"></a></h2><h3 class="anchor anchorWithStickyNavbar_mojV" id="install-yeoman-and-the-superset-package-generator">Install Yeoman and the Superset Package Generator<a class="hash-link" href="#install-yeoman-and-the-superset-package-generator" title="Direct link to heading"></a></h3><p>This Hello World plugin we'll be building is generated automatically with
|
||
<a href="https://yeoman.io/" target="_blank" rel="noopener noreferrer">Yeoman</a>. Let's first get that installed by opening up a terminal and installing
|
||
both the <code>yo</code> module and the
|
||
<a href="https://github.com/apache-superset/superset-ui/tree/master/packages/generator-superset" target="_blank" rel="noopener noreferrer">superset package generator</a>
|
||
(<code>v0.14.7</code>) to create the new plugin.</p><div class="codeBlockContainer_I0IT theme-code-block"><div class="codeBlockContent_wNvx"><pre tabindex="0" class="prism-code language-text codeBlock_jd64 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#393A34"><span class="token plain">npm install -g yo @superset-ui/generator-superset</span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_wuS7 clean-btn">Copy</button></div></div><h3 class="anchor anchorWithStickyNavbar_mojV" id="install-superset">Install Superset<a class="hash-link" href="#install-superset" title="Direct link to heading"></a></h3><p>There are
|
||
<a href="https://github.com/apache/superset#installation-and-configuration" target="_blank" rel="noopener noreferrer">complete instructions</a>
|
||
available on the <a href="https://github.com/apache/superset" target="_blank" rel="noopener noreferrer">Superset Github repository</a>. In a
|
||
nutshell, the easiest way is to:</p><ol><li>Have a Mac or linux-based machine</li><li>Install <a href="https://docs.docker.com/get-docker/" target="_blank" rel="noopener noreferrer">Docker</a></li><li>Clone <a href="https://github.com/apache/superset" target="_blank" rel="noopener noreferrer">the repository</a> to your computer</li><li>Use your terminal to <code>cd</code> into the <code>superset</code> directory</li><li>Run <code>docker-compose up</code></li><li>Open <em>another</em> terminal, and <code>cd</code> into <code>superset/superset-frontend</code></li><li>Run <code>npm install</code> to load up all the npm packages.</li><li>Run <code>npm run dev-server</code> to spin up the Webpack hot-reloading server</li><li>Wait for it to build, and then open your browser to <code>http://localhost:9000</code> and log in with
|
||
<code>admin</code>/<code>admin</code>. You're off to the races! (Note: we'll be restarting this later)</li></ol><h3 class="anchor anchorWithStickyNavbar_mojV" id="install-superset-ui">Install Superset-UI<a class="hash-link" href="#install-superset-ui" title="Direct link to heading"></a></h3><ol><li>Clone <a href="https://github.com/apache-superset/superset-ui" target="_blank" rel="noopener noreferrer">the <code>superset-ui</code> repository</a> to your
|
||
computer. It can sit in the same parent directory as your <code>superset</code> repo</li><li>Use your terminal to <code>cd</code> into <code>superset-ui</code></li><li>Run <code>yarn install</code> and wait for all the packages to get installed</li></ol><h2 class="anchor anchorWithStickyNavbar_mojV" id="build-your-hello-world">Build Your "Hello, World"<a class="hash-link" href="#build-your-hello-world" title="Direct link to heading"></a></h2><h3 class="anchor anchorWithStickyNavbar_mojV" id="write-generate-some-code"><del>Write</del> <em>generate</em> some code!<a class="hash-link" href="#write-generate-some-code" title="Direct link to heading"></a></h3><ol><li>Using your terminal, <code>cd</code> into your local <code>superset-ui</code> repo folder and then into the <code>plugins</code>
|
||
subdirectory.</li><li>Make a new directory for your plugin, i.e. <code>mkdir plugin-chart-hello-world</code>. <strong>Note:</strong> we
|
||
<em>highly</em> recommend following the <code>plugin-chart-your-plugin-name</code> pattern.</li><li>Now <code>cd plugin-chart-hello-world</code></li><li>Finally, run <code>yo @superset-ui/superset</code></li><li>Select <code>Create superset-ui chart plugin package</code> on the following screen:</li></ol><img src="/img/custom-plugins/plugin-1-yeoman-select.png"> <ol start="6"><li><p>Give it a name (in our case, go with the default, based on the folder name):</p><img src="/img/custom-plugins/plugin-2-yeoman-package-name.png"></li><li><p>Give it a description (again, default is fine!)</p><img src="/img/custom-plugins/plugin-3-yeoman-description.png"> </li><li><p>Choose which type of React component you want to make (Class, or Function component).</p><img src="/img/custom-plugins/plugin-4-yeoman-component-type.png"> </li><li><p>Select whether you'd like your visualization to be timeseries-based or not</p><img src="/img/custom-plugins/plugin-5-yeoman-timeseries.png"> </li><li><p>Select whether or not you want to include badges at the top of your README file (really only
|
||
needed if you intend to contribute your plugin to the <code>superset-ui</code> repo).</p><img src="/img/custom-plugins/plugin-6-yeoman-badges.png"> </li><li><p>Admire all the files the generator has created for you. Note that EACH of these is chock full of
|
||
comments about what they're for, and how best to use them.</p><img src="/img/custom-plugins/plugin-7-yeoman-files.png"> </li></ol><h3 class="anchor anchorWithStickyNavbar_mojV" id="add-your-plugin-to-superset-with-npm-link">Add your Plugin to Superset (with NPM Link)<a class="hash-link" href="#add-your-plugin-to-superset-with-npm-link" title="Direct link to heading"></a></h3><p>Now, we want to see this thing actually RUN! To do that, we'll add your package to Superset and
|
||
embrace the magic power of <code>npm link</code> to see it in-situ, without needing to <strong>build</strong> the plugin, or
|
||
open any PRs on Github.</p><ol><li><p>Add your package to the <code>package.json</code> file in <code>superset/superset-frontend</code>.</p><img src="/img/custom-plugins/plugin-8-package-json.png"> </li></ol><p>Note: Do <em>not</em> run <code>npm install</code>... explanation below.</p><ol start="2"><li><p>Add your plugin to the <code>MainPreset.js</code> file (located in
|
||
<code>superset/superset-frontend/src/visualizations/presets/MainPreset.js</code>) in two places,
|
||
alongside the other plugins.</p><img src="/img/custom-plugins/plugin-9-mainpreset-import.png"> <p>{' '}</p><img src="/img/custom-plugins/plugin-9-mainpreset-register.png"></li><li><p>Open a terminal window to <code>superset/superset-frontend</code>. If you did the Install Superset
|
||
steps above, you may still have webpack running there, and you can just stop it with <code>ctrol-c</code>.
|
||
If not, just open a new window and or <code>cd</code> to that directory path.</p></li></ol><p>4) Use <code>npm link</code> to symlink plugin, using a relative path to <code>superset-ui</code> and your plugin folder,
|
||
e.g. <code>npm link ../../superset-ui/plugins/plugin-chart-hello-world</code>.</p><ol start="5"><li>Restart your webpack dev server with <code>npm run dev-server</code>. You'll know it worked if you see a
|
||
line stating
|
||
<code>[Superset Plugin] Use symlink source for @superset-ui/plugin-chart-hello-world @ ^0.0.0</code>.</li></ol><p><strong>NOTE:</strong> If/when you do an <code>npm install</code> that erases the symlink generated by <code>npm link</code>, so you'll
|
||
have to redo those steps.</p><p><strong>NOTE:</strong> Dynamic import is a work in progress. We hope you won't even need to DO this soon. We'll
|
||
be blogging again when that day comes, we assure you. In short, we have a goal to make editing
|
||
<code>package.json</code> and <code>MainPreset.js</code> unnecessary, so all the code changes are made in ONE repo.</p><h3 class="anchor anchorWithStickyNavbar_mojV" id="see-it-with-your-own-eyes">See it with your own eyes!<a class="hash-link" href="#see-it-with-your-own-eyes" title="Direct link to heading"></a></h3><p>You should now be able to go to the Explore view in your local Superset and add a new chart! You'll
|
||
see your new plugin when you go to select your viz type.</p><img src="/img/custom-plugins/plugin-10-hello-thumbnail.png"> <p>Now you can load up some data, and you'll see it appear in the plugin!</p><img src="/img/custom-plugins/plugin-11-explore-view.png"> <p>The plugin also outputs three things to your browser's console:</p><ul><li><code>formData</code>, a.k.a. everything sent into your viz from the controls</li><li><code>props</code>, as output from the <code>transformProps</code> file for your plugin's consumption</li><li>The actual HTML element, which your plugin has hooks into for any necessary DOM maniupluation</li></ul><img src="/img/custom-plugins/plugin-12-console-logs.png"> <h2 class="anchor anchorWithStickyNavbar_mojV" id="make-it-your-own">Make it Your Own<a class="hash-link" href="#make-it-your-own" title="Direct link to heading"></a></h2><p>Now you're free to run wild with your new plugin! Here are a few places to start digging in:</p><h3 class="anchor anchorWithStickyNavbar_mojV" id="read-the-comments-and-docs">Read the comments and docs<a class="hash-link" href="#read-the-comments-and-docs" title="Direct link to heading"></a></h3><p>Take a look through the full file tree of the plugin. The Readme gives details for the job of each
|
||
file. EACH of these files has been annotated with extensive comments of what the file is for, and
|
||
the basics of what you can do with it.</p><h3 class="anchor anchorWithStickyNavbar_mojV" id="take-control">Take control!<a class="hash-link" href="#take-control" title="Direct link to heading"></a></h3><p>The plugin includes a couple of example controls, but you can certainly continue to add as many as
|
||
you need to. The comments/documentation within the controls file is a start, but we recommend
|
||
looking at existing <code>superset-ui</code> plugins for more examples of how you can implement controls to
|
||
enhance your queries, work with your data, and change your visualization's display.</p><h3 class="anchor anchorWithStickyNavbar_mojV" id="build-the-perfect-query">Build the perfect query<a class="hash-link" href="#build-the-perfect-query" title="Direct link to heading"></a></h3><p>The <code>buildQuery</code> file where your plugin actually fetches data from the Superset backend. This file
|
||
builds he query "context" for your plugin. For a simple plugin, this file needn't do much. There are
|
||
a couple changes that need to be made for a timeseries plugin, thus the option in the Yeoman
|
||
generator.</p><p>This file also allows you to add various post-processing operations, to have the Superset backend
|
||
process your data in various ways (pivoting, etc), but that's a whole other topic we'll cover
|
||
separately in the near future.</p><h3 class="anchor anchorWithStickyNavbar_mojV" id="style-with-emotion">Style with Emotion<a class="hash-link" href="#style-with-emotion" title="Direct link to heading"></a></h3><p>Each of these methods lets you add custom CSS styles using Emotion 👩🎤(a CSS-in-JS approach) which
|
||
has access to Superset's burgeoning set of theme variables, and also automatically scopes the styles
|
||
to your plugin, so they don't "leak" to other areas of Superset.</p><p>In the Hello World plugin, we've included a few example Theme variables (<code>colors</code>, <code>gridUnit</code>s, and
|
||
typographic weights/sizes). We'll be continuing to add more variables to this theme file as we
|
||
continue to push Superset (and the viz plugins) toward the standards of the Superset redesign (see
|
||
<a href="https://github.com/apache/superset/issues/8976" target="_blank" rel="noopener noreferrer">SIP-34</a>)</p><h3 class="anchor anchorWithStickyNavbar_mojV" id="give-it-a-thumbnail">Give it a thumbnail<a class="hash-link" href="#give-it-a-thumbnail" title="Direct link to heading"></a></h3><p>Because come on... that's the fun part, right?</p><h3 class="anchor anchorWithStickyNavbar_mojV" id="build-it">Build it!<a class="hash-link" href="#build-it" title="Direct link to heading"></a></h3><p>In this tutorial, you built your plugin in the <code>superset-ui</code> repo. This means you can use the
|
||
built-in build scripts that the repo provides. With your terminal of choice, simply <code>cd</code> into the
|
||
root directory of <code>supeset-ui</code> and run <code>yarn build</code>. This will kick off a build of ALL the Superset
|
||
plugins and packages, including yours.</p><h3 class="anchor anchorWithStickyNavbar_mojV" id="test-early-test-often">Test early, test often!<a class="hash-link" href="#test-early-test-often" title="Direct link to heading"></a></h3><p>The Hello World plugin includes some basic Jest tests to act as a starting point to add unit tests
|
||
to your plugin. These do a quick sanity check that the plugin actually loads correctly, and then run
|
||
through the basics of making sure that your controls are properly respected by modifying the
|
||
resulting data and/or props of the plugin. Running <code>yarn test</code> from the root directory of
|
||
<code>superset-ui</code> will run all the tests for plugins/packages, including your Hello World.</p><h3 class="anchor anchorWithStickyNavbar_mojV" id="deploying-custom-visualization-to-production">Deploying Custom Visualization to Production<a class="hash-link" href="#deploying-custom-visualization-to-production" title="Direct link to heading"></a></h3><p>To deploy plugins to a production environment, you must have additional code
|
||
inside Superset that includes the npm packages of your plugins so they can be installed in the frontend.</p><p>One option is to build your Dockerfile so it contains your custom visualization packages.</p></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class="col"><a href="https://github.com/apache/superset/tree/master/docs/docs/installation/building-custom-viz-plugins.mdx" target="_blank" rel="noreferrer noopener" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_dcUD" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_foO9"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/installation/sql-templating"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">SQL Templating</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/installation/running-on-kubernetes"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Running on Kubernetes</div></a></div></nav></div></div><div class="col col--3"><div class="tableOfContents_cNA8 thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#getting-set-up" class="table-of-contents__link toc-highlight">Getting Set Up</a><ul><li><a href="#install-yeoman-and-the-superset-package-generator" class="table-of-contents__link toc-highlight">Install Yeoman and the Superset Package Generator</a></li><li><a href="#install-superset" class="table-of-contents__link toc-highlight">Install Superset</a></li><li><a href="#install-superset-ui" class="table-of-contents__link toc-highlight">Install Superset-UI</a></li></ul></li><li><a href="#build-your-hello-world" class="table-of-contents__link toc-highlight">Build Your "Hello, World"</a><ul><li><a href="#write-generate-some-code" class="table-of-contents__link toc-highlight"><del>Write</del> <em>generate</em> some code!</a></li><li><a href="#add-your-plugin-to-superset-with-npm-link" class="table-of-contents__link toc-highlight">Add your Plugin to Superset (with NPM Link)</a></li><li><a href="#see-it-with-your-own-eyes" class="table-of-contents__link toc-highlight">See it with your own eyes!</a></li></ul></li><li><a href="#make-it-your-own" class="table-of-contents__link toc-highlight">Make it Your Own</a><ul><li><a href="#read-the-comments-and-docs" class="table-of-contents__link toc-highlight">Read the comments and docs</a></li><li><a href="#take-control" class="table-of-contents__link toc-highlight">Take control!</a></li><li><a href="#build-the-perfect-query" class="table-of-contents__link toc-highlight">Build the perfect query</a></li><li><a href="#style-with-emotion" class="table-of-contents__link toc-highlight">Style with Emotion</a></li><li><a href="#give-it-a-thumbnail" class="table-of-contents__link toc-highlight">Give it a thumbnail</a></li><li><a href="#build-it" class="table-of-contents__link toc-highlight">Build it!</a></li><li><a href="#test-early-test-often" class="table-of-contents__link toc-highlight">Test early, test often!</a></li><li><a href="#deploying-custom-visualization-to-production" class="table-of-contents__link toc-highlight">Deploying Custom Visualization to Production</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Docs</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/intro">Tutorial</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/superset+apache-superset" target="_blank" rel="noopener noreferrer" class="footer__link-item"><span>Stack Overflow<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li><li class="footer__item"><a href="https://join.slack.com/t/apache-superset/shared_invite/zt-uxbh5g36-AISUtHbzOXcu0BIj7kgUaw" target="_blank" rel="noopener noreferrer" class="footer__link-item"><span>Slack<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li><li class="footer__item"><a href="https://lists.apache.org/list.html?dev@superset.apache.org" target="_blank" rel="noopener noreferrer" class="footer__link-item"><span>Mailing List<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items"><li class="footer__item"><a href="https://github.com/apache/superset" target="_blank" rel="noopener noreferrer" class="footer__link-item"><span>GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2022,
|
||
The <a href="https://www.apache.org/" target="_blank" rel="noreferrer">Apache Software Foundation</a>,
|
||
Licensed under the Apache <a href="https://apache.org/licenses/LICENSE-2.0" target="_blank" rel="noreferrer">License</a>. <br>
|
||
<small>Apache Superset, Apache, Superset, the Superset logo, and the Apache feather logo are either registered trademarks or trademarks of The Apache Software Foundation. All other products or name brands are trademarks of their respective holders, including The Apache Software Foundation.
|
||
<a href="https://www.apache.org/" target="_blank">Apache Software Foundation</a> resources</small><br>
|
||
<small>
|
||
<a href="https://www.apache.org/security/" target="_blank" rel="noreferrer">Security</a> |
|
||
<a href="https://www.apache.org/foundation/sponsorship.html" target="_blank" rel="noreferrer">Donate</a> |
|
||
<a href="https://www.apache.org/foundation/thanks.html" target="_blank" rel="noreferrer">Thanks</a> |
|
||
<a href="https://apache.org/events/current-event" target="_blank" rel="noreferrer">Events</a> |
|
||
<a href="https://apache.org/licenses/" target="_blank" rel="noreferrer">License</a>
|
||
</small></div></div></div></footer></div>
|
||
<script src="/assets/js/runtime~main.5a0758a3.js"></script>
|
||
<script src="/assets/js/main.0949d8e1.js"></script>
|
||
</body>
|
||
</html> |