{"version":3,"sources":["webpack:///./src/pages/docs/installation/building-viz-plugins.mdx"],"names":["_frontmatter","layoutProps","MDXLayout","DefaultLayout","MDXContent","components","props","mdxType","parentName","src","isMDXComponent"],"mappings":"wPAQaA,G,UAAe,S,sOAC5B,IAAMC,EAAc,CAClBD,gBAEIE,EAAYC,IACH,SAASC,EAAT,GAGZ,IAFDC,EAEC,EAFDA,WACGC,EACF,8BACD,OAAO,YAACJ,EAAD,eAAeD,EAAiBK,EAAhC,CAAuCD,WAAYA,EAAYE,QAAQ,cAG5E,iQAGA,0EAAyD,6BAAGC,WAAW,KAAQ,CAC3E,KAAQ,uBAD6C,UAAzD,wFAIA,iBAAQ,CACN,GAAM,kBADR,kBAGA,iBAAQ,CACN,GAAM,qDADR,qDAGA,mGACF,6BAAGA,WAAW,KAAQ,CAChB,KAAQ,uBADd,UADE,sFAIO,0BAAYA,WAAW,KAAvB,MAJP,oBAKF,6BAAGA,WAAW,KAAQ,CAChB,KAAQ,2FADd,8BALE,MAQD,0BAAYA,WAAW,KAAvB,WARC,+BASA,uBAAK,gCAAMA,WAAW,OAAU,IAA3B,wDAEL,iBAAQ,CACN,GAAM,oBADR,oBAGA,mCACF,6BAAGA,WAAW,KAAQ,CAChB,KAAQ,sEADd,yBADE,sBAIe,6BAAGA,WAAW,KAAQ,CACjC,KAAQ,uCADG,8BAJf,4CAQA,sBACE,kBAAIA,WAAW,MAAf,qCACA,kBAAIA,WAAW,MAAf,WAAgC,6BAAGA,WAAW,MAAS,CACnD,KAAQ,wCADoB,WAGhC,kBAAIA,WAAW,MAAf,SAA8B,6BAAGA,WAAW,MAAS,CACjD,KAAQ,uCADkB,kBAA9B,qBAGA,kBAAIA,WAAW,MAAf,wBAA6C,0BAAYA,WAAW,MAAvB,MAA7C,aAA0G,0BAAYA,WAAW,MAAvB,YAA1G,cACA,kBAAIA,WAAW,MAAf,OAA4B,0BAAYA,WAAW,MAAvB,sBAC5B,kBAAIA,WAAW,MAAf,QAA6B,kBAAIA,WAAW,MAAf,WAA7B,kBAAoF,0BAAYA,WAAW,MAAvB,MAApF,SAA6I,0BAAYA,WAAW,MAAvB,+BAC7I,kBAAIA,WAAW,MAAf,OAA4B,0BAAYA,WAAW,MAAvB,eAA5B,qCACA,kBAAIA,WAAW,MAAf,OAA4B,0BAAYA,WAAW,MAAvB,sBAA5B,gDACA,kBAAIA,WAAW,MAAf,uDAA4E,0BAAYA,WAAW,MAAvB,yBAA5E,qBACJ,0BAAYA,WAAW,MAAvB,SADI,IACmD,0BAAYA,WAAW,MAAvB,SADnD,sEAGF,iBAAQ,CACN,GAAM,uBADR,uBAGA,sBACE,kBAAIA,WAAW,MAAf,SAA8B,6BAAGA,WAAW,MAAS,CACjD,KAAQ,mDADkB,OAEjB,0BAAYA,WAAW,KAAvB,eAFiB,eAA9B,uEAGsD,0BAAYA,WAAW,MAAvB,YAHtD,SAIA,kBAAIA,WAAW,MAAf,wBAA6C,0BAAYA,WAAW,MAAvB,MAA7C,SAAsG,0BAAYA,WAAW,MAAvB,gBACtG,kBAAIA,WAAW,MAAf,OAA4B,0BAAYA,WAAW,MAAvB,gBAA5B,oDAEF,iBAAQ,CACN,GAAM,0BADR,6BAGA,iBAAQ,CACN,GAAM,4BACL,mBAAKA,WAAW,MAAhB,SAFH,IAE4C,kBAAIA,WAAW,MAAf,YAF5C,eAGA,sBACE,kBAAIA,WAAW,MAAf,wBAA6C,0BAAYA,WAAW,MAAvB,MAA7C,oBAAiH,0BAAYA,WAAW,MAAvB,eAAjH,kCAA4M,0BAAYA,WAAW,MAAvB,WAA5M,mBAEA,kBAAIA,WAAW,MAAf,8CAAmE,0BAAYA,WAAW,MAAvB,kCAAnE,KAAoJ,sBAAQA,WAAW,MAAnB,SAApJ,QACJ,kBAAIA,WAAW,MAAf,UADI,4BAC4D,0BAAYA,WAAW,MAAvB,iCAD5D,aAEA,kBAAIA,WAAW,MAAf,OAA4B,0BAAYA,WAAW,MAAvB,gCAC5B,kBAAIA,WAAW,MAAf,gBAAqC,0BAAYA,WAAW,MAAvB,6BACrC,kBAAIA,WAAW,MAAf,UAA+B,0BAAYA,WAAW,MAAvB,2CAA/B,8BAEF,mBAAKC,IAAI,uCAAwC,IACjD,iBAAQ,CACN,MAAS,GAET,kBAAID,WAAW,MACb,iBAAGA,WAAW,MAAd,gFACA,mBAAKC,IAAI,8CAEX,kBAAID,WAAW,MACb,iBAAGA,WAAW,MAAd,mDACA,mBAAKC,IAAI,4CAA6C,KAExD,kBAAID,WAAW,MACb,iBAAGA,WAAW,MAAd,yFACA,mBAAKC,IAAI,+CAAgD,KAE3D,kBAAID,WAAW,MACb,iBAAGA,WAAW,MAAd,8EACA,mBAAKC,IAAI,2CAA4C,KAEvD,kBAAID,WAAW,MACb,iBAAGA,WAAW,MAAd,uJACgD,0BAAYA,WAAW,KAAvB,eADhD,WAEA,mBAAKC,IAAI,uCAAwC,KAEnD,kBAAID,WAAW,MACb,iBAAGA,WAAW,MAAd,gKAEA,mBAAKC,IAAI,sCAAuC,MAGpD,iBAAQ,CACN,GAAM,6CADR,+CAGA,oJACyB,0BAAYD,WAAW,KAAvB,YADzB,0CACwH,sBAAQA,WAAW,KAAnB,SADxH,4CAGA,sBACE,kBAAIA,WAAW,MACb,iBAAGA,WAAW,MAAd,2BAA+C,0BAAYA,WAAW,KAAvB,gBAA/C,YAAoH,0BAAYA,WAAW,KAAvB,8BAApH,KACA,mBAAKC,IAAI,sCAAuC,MAGpD,iCAAgB,kBAAID,WAAW,KAAf,OAAhB,QAAwD,0BAAYA,WAAW,KAAvB,eAAxD,0BACA,iBAAQ,CACN,MAAS,GAET,kBAAIA,WAAW,MACb,iBAAGA,WAAW,MAAd,0BAA8C,0BAAYA,WAAW,KAAvB,iBAA9C,sBACN,0BAAYA,WAAW,KAAvB,uEADM,kDAGA,mBAAKC,IAAI,2CAA4C,IACrD,iBAAGD,WAAW,MAAd,SACA,mBAAKC,IAAI,8CAEX,kBAAID,WAAW,MACb,iBAAGA,WAAW,MAAd,6BAAiD,0BAAYA,WAAW,KAAvB,8BAAjD,2HAC+E,0BAAYA,WAAW,KAAvB,WAD/E,4CAEgC,0BAAYA,WAAW,KAAvB,MAFhC,8BAKJ,+BAAc,0BAAYA,WAAW,KAAvB,YAAd,gDAAmH,0BAAYA,WAAW,KAAvB,eAAnH,kCACG,0BAAYA,WAAW,KAAvB,+DADH,KAEA,iBAAQ,CACN,MAAS,GAET,kBAAIA,WAAW,MAAf,wCAA6D,0BAAYA,WAAW,MAAvB,sBAA7D,uDAEJ,0BAAYA,WAAW,MAAvB,2FAFI,MAIF,qBAAG,sBAAQA,WAAW,KAAnB,SAAH,sBAAmE,0BAAYA,WAAW,KAAvB,eAAnE,yCAAoK,0BAAYA,WAAW,KAAvB,YAApK,0CAEA,qBAAG,sBAAQA,WAAW,KAAnB,SAAH,8LAEF,0BAAYA,WAAW,KAAvB,gBAFE,QAE+D,0BAAYA,WAAW,KAAvB,iBAF/D,+DAGA,iBAAQ,CACN,GAAM,6BADR,8BAGA,sLAEA,mBAAKC,IAAI,0CAA2C,IACpD,+FACA,mBAAKA,IAAI,uCAAwC,IACjD,wFACA,sBACE,kBAAID,WAAW,MAAK,0BAAYA,WAAW,MAAvB,YAApB,4DACA,kBAAIA,WAAW,MAAK,0BAAYA,WAAW,MAAvB,SAApB,wBAA+F,0BAAYA,WAAW,MAAvB,kBAA/F,uCACA,kBAAIA,WAAW,MAAf,kGAEF,mBAAKC,IAAI,uCAAwC,IACjD,iBAAQ,CACN,GAAM,oBADR,oBAGA,qHACA,iBAAQ,CACN,GAAM,8BADR,8BAGA,sQAGA,iBAAQ,CACN,GAAM,gBADR,iBAGA,+OAEkB,0BAAYD,WAAW,KAAvB,eAFlB,wJAIA,iBAAQ,CACN,GAAM,2BADR,2BAGA,4BAAW,0BAAYA,WAAW,KAAvB,cAAX,uSAIA,yPAGA,iBAAQ,CACN,GAAM,sBADR,sBAGA,uSAGA,iGAAgF,0BAAYA,WAAW,KAAvB,UAAhF,KAAwI,0BAAYA,WAAW,KAAvB,YAAxI,+MAGF,6BAAGA,WAAW,KAAQ,CAChB,KAAQ,mDADd,UAHE,KAMA,iBAAQ,CACN,GAAM,uBADR,uBAGA,uEACA,iBAAQ,CACN,GAAM,YADR,aAGA,uEAAsD,0BAAYA,WAAW,KAAvB,eAAtD,0HACkF,0BAAYA,WAAW,KAAvB,MADlF,gCAEgB,0BAAYA,WAAW,KAAvB,cAFhB,YAEmF,0BAAYA,WAAW,KAAvB,cAFnF,4FAIA,iBAAQ,CACN,GAAM,yBADR,2BAGA,mXAGiD,0BAAYA,WAAW,KAAvB,aAHjD,gCAIF,0BAAYA,WAAW,KAAvB,eAJE,6EAKA,iBAAQ,CACN,GAAM,gDADR,gDAGA,+MAEA,wH,oOAKJJ,EAAWM,gBAAiB","file":"component---src-pages-docs-installation-building-viz-plugins-mdx-a4e9755f7a8cca5814bd.js","sourcesContent":["import * as React from 'react'\n  /* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\n\nimport DefaultLayout from \"/home/runner/work/superset/superset/docs/node_modules/gatsby-theme-docz/src/base/Layout.js\";\nexport const _frontmatter = {};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = DefaultLayout;\nexport default function MDXContent({\n  components,\n  ...props\n}) {\n  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\"MDXLayout\">\n\n\n    <p>{`This is a tutorial to help you build a \"Hello World\" viz plugin. The intent is to provide a basic\nscaffolding to build any sort of data visualization, using any viz libary you'd like (e.g. ECharts,\nAntV, HighCharts, VX, and D3.).`}</p>\n    <p>{`You can build the Hello World plugin by running a `}<a parentName=\"p\" {...{\n        \"href\": \"https://yeoman.io/\"\n      }}>{`Yeoman`}</a>{` generator, which\ntakes a few simple options, and provides this plugin scaffolding.`}</p>\n    <h2 {...{\n      \"id\": \"getting-set-up\"\n    }}>{`Getting Set Up`}</h2>\n    <h3 {...{\n      \"id\": \"install-yeoman-and-the-superset-package-generator\"\n    }}>{`Install Yeoman and the Superset Package Generator`}</h3>\n    <p>{`This Hello World plugin we'll be building is generated automatically with\n`}<a parentName=\"p\" {...{\n        \"href\": \"https://yeoman.io/\"\n      }}>{`Yeoman`}</a>{`. Let's first get that installed by opening up a terminal and installing\nboth the `}<inlineCode parentName=\"p\">{`yo`}</inlineCode>{` module and the\n`}<a parentName=\"p\" {...{\n        \"href\": \"https://github.com/apache-superset/superset-ui/tree/master/packages/generator-superset\"\n      }}>{`superset package generator`}</a>{`\n(`}<inlineCode parentName=\"p\">{`v0.14.7`}</inlineCode>{`) to create the new plugin.`}</p>\n    <pre><code parentName=\"pre\" {...{}}>{`npm install -g yo @superset-ui/generator-superset\n`}</code></pre>\n    <h3 {...{\n      \"id\": \"install-superset\"\n    }}>{`Install Superset`}</h3>\n    <p>{`There are\n`}<a parentName=\"p\" {...{\n        \"href\": \"https://github.com/apache/superset#installation-and-configuration\"\n      }}>{`complete instructions`}</a>{`\navailable on the `}<a parentName=\"p\" {...{\n        \"href\": \"https://github.com/apache/superset\"\n      }}>{`Superset Github repository`}</a>{`. In a\nnutshell, the easiest way is to:`}</p>\n    <ol>\n      <li parentName=\"ol\">{`Have a Mac or linux-based machine`}</li>\n      <li parentName=\"ol\">{`Install `}<a parentName=\"li\" {...{\n          \"href\": \"https://docs.docker.com/get-docker/\"\n        }}>{`Docker`}</a></li>\n      <li parentName=\"ol\">{`Clone `}<a parentName=\"li\" {...{\n          \"href\": \"https://github.com/apache/superset\"\n        }}>{`the repository`}</a>{` to your computer`}</li>\n      <li parentName=\"ol\">{`Use your terminal to `}<inlineCode parentName=\"li\">{`cd`}</inlineCode>{` into the `}<inlineCode parentName=\"li\">{`superset`}</inlineCode>{` directory`}</li>\n      <li parentName=\"ol\">{`Run `}<inlineCode parentName=\"li\">{`docker-compose up`}</inlineCode></li>\n      <li parentName=\"ol\">{`Open `}<em parentName=\"li\">{`another`}</em>{` terminal, and `}<inlineCode parentName=\"li\">{`cd`}</inlineCode>{` into `}<inlineCode parentName=\"li\">{`superset/superset-frontend`}</inlineCode></li>\n      <li parentName=\"ol\">{`Run `}<inlineCode parentName=\"li\">{`npm install`}</inlineCode>{` to load up all the npm packages.`}</li>\n      <li parentName=\"ol\">{`Run `}<inlineCode parentName=\"li\">{`npm run dev-server`}</inlineCode>{` to spin up the Webpack hot-reloading server`}</li>\n      <li parentName=\"ol\">{`Wait for it to build, and then open your browser to `}<inlineCode parentName=\"li\">{`http://localhost:9000`}</inlineCode>{` and log in with\n`}<inlineCode parentName=\"li\">{`admin`}</inlineCode>{`/`}<inlineCode parentName=\"li\">{`admin`}</inlineCode>{`. You're off to the races! (Note: we'll be restarting this later)`}</li>\n    </ol>\n    <h3 {...{\n      \"id\": \"install-superset-ui\"\n    }}>{`Install Superset-UI`}</h3>\n    <ol>\n      <li parentName=\"ol\">{`Clone `}<a parentName=\"li\" {...{\n          \"href\": \"https://github.com/apache-superset/superset-ui\"\n        }}>{`the `}<inlineCode parentName=\"a\">{`superset-ui`}</inlineCode>{` repository`}</a>{` to your\ncomputer. It can sit in the same parent directory as your `}<inlineCode parentName=\"li\">{`superset`}</inlineCode>{` repo`}</li>\n      <li parentName=\"ol\">{`Use your terminal to `}<inlineCode parentName=\"li\">{`cd`}</inlineCode>{` into `}<inlineCode parentName=\"li\">{`superset-ui`}</inlineCode></li>\n      <li parentName=\"ol\">{`Run `}<inlineCode parentName=\"li\">{`yarn install`}</inlineCode>{` and wait for all the packages to get installed`}</li>\n    </ol>\n    <h2 {...{\n      \"id\": \"build-your-hello-world\"\n    }}>{`Build Your \"Hello, World\"`}</h2>\n    <h3 {...{\n      \"id\": \"write-generate-some-code\"\n    }}><del parentName=\"h3\">{`Write`}</del>{` `}<em parentName=\"h3\">{`generate`}</em>{` some code!`}</h3>\n    <ol>\n      <li parentName=\"ol\">{`Using your terminal, `}<inlineCode parentName=\"li\">{`cd`}</inlineCode>{` into your local `}<inlineCode parentName=\"li\">{`superset-ui`}</inlineCode>{` repo folder and then into the `}<inlineCode parentName=\"li\">{`plugins`}</inlineCode>{`\nsubdirectory.`}</li>\n      <li parentName=\"ol\">{`Make a new directory for your plugin, i.e. `}<inlineCode parentName=\"li\">{`mkdir plugin-chart-hello-world`}</inlineCode>{`. `}<strong parentName=\"li\">{`Note:`}</strong>{` we\n`}<em parentName=\"li\">{`highly`}</em>{` recommend following the `}<inlineCode parentName=\"li\">{`plugin-chart-your-plugin-name`}</inlineCode>{` pattern.`}</li>\n      <li parentName=\"ol\">{`Now `}<inlineCode parentName=\"li\">{`cd plugin-chart-hello-world`}</inlineCode></li>\n      <li parentName=\"ol\">{`Finally, run `}<inlineCode parentName=\"li\">{`yo @superset-ui/superset`}</inlineCode></li>\n      <li parentName=\"ol\">{`Select `}<inlineCode parentName=\"li\">{`Create superset-ui chart plugin package`}</inlineCode>{` on the following screen:`}</li>\n    </ol>\n    <img src=\"/images/plugin-1-yeoman-select.png\" />{' '}\n    <ol {...{\n      \"start\": 6\n    }}>\n      <li parentName=\"ol\">\n        <p parentName=\"li\">{`Give it a name (in our case, go with the default, based on the folder name):`}</p>\n        <img src=\"/images/plugin-2-yeoman-package-name.png\" />\n      </li>\n      <li parentName=\"ol\">\n        <p parentName=\"li\">{`Give it a description (again, default is fine!)`}</p>\n        <img src=\"/images/plugin-3-yeoman-description.png\" />{' '}\n      </li>\n      <li parentName=\"ol\">\n        <p parentName=\"li\">{`Choose which type of React component you want to make (Class, or Function component).`}</p>\n        <img src=\"/images/plugin-4-yeoman-component-type.png\" />{' '}\n      </li>\n      <li parentName=\"ol\">\n        <p parentName=\"li\">{`Select whether you'd like your visualization to be timeseries-based or not`}</p>\n        <img src=\"/images/plugin-5-yeoman-timeseries.png\" />{' '}\n      </li>\n      <li parentName=\"ol\">\n        <p parentName=\"li\">{`Select whether or not you want to include badges at the top of your README file (really only\nneeded if you intend to contribute your plugin to the `}<inlineCode parentName=\"p\">{`superset-ui`}</inlineCode>{` repo).`}</p>\n        <img src=\"/images/plugin-6-yeoman-badges.png\" />{' '}\n      </li>\n      <li parentName=\"ol\">\n        <p parentName=\"li\">{`Admire all the files the generator has created for you. Note that EACH of these is chock full of\ncomments about what they're for, and how best to use them.`}</p>\n        <img src=\"/images/plugin-7-yeoman-files.png\" />{' '}\n      </li>\n    </ol>\n    <h3 {...{\n      \"id\": \"add-your-plugin-to-superset-with-npm-link\"\n    }}>{`Add your Plugin to Superset (with NPM Link)`}</h3>\n    <p>{`Now, we want to see this thing actually RUN! To do that, we'll add your package to Superset and\nembrace the magic power of `}<inlineCode parentName=\"p\">{`npm link`}</inlineCode>{` to see it in-situ, without needing to `}<strong parentName=\"p\">{`build`}</strong>{` the plugin, or\nopen any PRs on Github.`}</p>\n    <ol>\n      <li parentName=\"ol\">\n        <p parentName=\"li\">{`Add your package to the `}<inlineCode parentName=\"p\">{`package.json`}</inlineCode>{` file in `}<inlineCode parentName=\"p\">{`superset/superset-frontend`}</inlineCode>{`.`}</p>\n        <img src=\"/images/plugin-8-package-json.png\" />{' '}\n      </li>\n    </ol>\n    <p>{`Note: Do `}<em parentName=\"p\">{`not`}</em>{` run `}<inlineCode parentName=\"p\">{`npm install`}</inlineCode>{`... explanation below.`}</p>\n    <ol {...{\n      \"start\": 2\n    }}>\n      <li parentName=\"ol\">\n        <p parentName=\"li\">{`Add your plugin to the `}<inlineCode parentName=\"p\">{`MainPreset.js`}</inlineCode>{` file (located in\n`}<inlineCode parentName=\"p\">{`superset/superset-frontend/src/visualizations/presets/MainPreset.js`}</inlineCode>{`) in two places,\nalongside the other plugins.`}</p>\n        <img src=\"/images/plugin-9-mainpreset-import.png\" />{' '}\n        <p parentName=\"li\">{`{' '}`}</p>\n        <img src=\"/images/plugin-9-mainpreset-register.png\" />\n      </li>\n      <li parentName=\"ol\">\n        <p parentName=\"li\">{`Open a terminal window to `}<inlineCode parentName=\"p\">{`superset/superset-frontend`}</inlineCode>{`. If you did the Install Superset\nsteps above, you may still have webpack running there, and you can just stop it with `}<inlineCode parentName=\"p\">{`ctrol-c`}</inlineCode>{`.\nIf not, just open a new window and or `}<inlineCode parentName=\"p\">{`cd`}</inlineCode>{` to that directory path.`}</p>\n      </li>\n    </ol>\n    <p>{`4) Use `}<inlineCode parentName=\"p\">{`npm link`}</inlineCode>{` to symlink plugin, using a relative path to `}<inlineCode parentName=\"p\">{`superset-ui`}</inlineCode>{` and your plugin folder,\ne.g. `}<inlineCode parentName=\"p\">{`npm link ../../superset-ui/plugins/plugin-chart-hello-world`}</inlineCode>{`.`}</p>\n    <ol {...{\n      \"start\": 5\n    }}>\n      <li parentName=\"ol\">{`Restart your webpack dev server with `}<inlineCode parentName=\"li\">{`npm run dev-server`}</inlineCode>{`. You'll know it worked if you see a\nline stating\n`}<inlineCode parentName=\"li\">{`[Superset Plugin] Use symlink source for @superset-ui/plugin-chart-hello-world @ ^0.0.0`}</inlineCode>{`.`}</li>\n    </ol>\n    <p><strong parentName=\"p\">{`NOTE:`}</strong>{` If/when you do an `}<inlineCode parentName=\"p\">{`npm install`}</inlineCode>{` that erases the symlink generated by `}<inlineCode parentName=\"p\">{`npm link`}</inlineCode>{`, so you'll\nhave to redo those steps.`}</p>\n    <p><strong parentName=\"p\">{`NOTE:`}</strong>{` Dynamic import is a work in progress. We hope you won't even need to DO this soon. We'll\nbe blogging again when that day comes, we assure you. In short, we have a goal to make editing\n`}<inlineCode parentName=\"p\">{`package.json`}</inlineCode>{` and `}<inlineCode parentName=\"p\">{`MainPreset.js`}</inlineCode>{` unnecessary, so all the code changes are made in ONE repo.`}</p>\n    <h3 {...{\n      \"id\": \"see-it-with-your-own-eyes\"\n    }}>{`See it with your own eyes!`}</h3>\n    <p>{`You should now be able to go to the Explore view in your local Superset and add a new chart! You'll\nsee your new plugin when you go to select your viz type.`}</p>\n    <img src=\"/images/plugin-10-hello-thumbnail.png\" />{' '}\n    <p>{`Now you can load up some data, and you'll see it appear in the plugin!`}</p>\n    <img src=\"/images/plugin-11-explore-view.png\" />{' '}\n    <p>{`The plugin also outputs three things to your browser's console:`}</p>\n    <ul>\n      <li parentName=\"ul\"><inlineCode parentName=\"li\">{`formData`}</inlineCode>{`, a.k.a. everything sent into your viz from the controls`}</li>\n      <li parentName=\"ul\"><inlineCode parentName=\"li\">{`props`}</inlineCode>{`, as output from the `}<inlineCode parentName=\"li\">{`transformProps`}</inlineCode>{` file for your plugin's consumption`}</li>\n      <li parentName=\"ul\">{`The actual HTML element, which your plugin has hooks into for any necessary DOM maniupluation`}</li>\n    </ul>\n    <img src=\"/images/plugin-12-console-logs.png\" />{' '}\n    <h2 {...{\n      \"id\": \"make-it-your-own\"\n    }}>{`Make it Your Own`}</h2>\n    <p>{`Now you're free to run wild with your new plugin! Here are a few places to start digging in:`}</p>\n    <h3 {...{\n      \"id\": \"read-the-comments-and-docs\"\n    }}>{`Read the comments and docs`}</h3>\n    <p>{`Take a look through the full file tree of the plugin. The Readme gives details for the job of each\nfile. EACH of these files has been annotated with extensive comments of what the file is for, and\nthe basics of what you can do with it.`}</p>\n    <h3 {...{\n      \"id\": \"take-control\"\n    }}>{`Take control!`}</h3>\n    <p>{`The plugin includes a couple of example controls, but you can certainly continue to add as many as\nyou need to. The comments/documentation within the controls file is a start, but we recommend\nlooking at existing `}<inlineCode parentName=\"p\">{`superset-ui`}</inlineCode>{` plugins for more examples of how you can implement controls to\nenhance your queries, work with your data, and change your visualization's display.`}</p>\n    <h3 {...{\n      \"id\": \"build-the-perfect-query\"\n    }}>{`Build the perfect query`}</h3>\n    <p>{`The `}<inlineCode parentName=\"p\">{`buildQuery`}</inlineCode>{` file where your plugin actually fetches data from the Superset backend. This file\nbuilds he query \"context\" for your plugin. For a simple plugin, this file needn't do much. There are\na couple changes that need to be made for a timeseries plugin, thus the option in the Yeoman\ngenerator.`}</p>\n    <p>{`This file also allows you to add various post-processing operations, to have the Superset backend\nprocess your data in various ways (pivoting, etc), but that's a whole other topic we'll cover\nseparately in the near future.`}</p>\n    <h3 {...{\n      \"id\": \"style-with-emotion\"\n    }}>{`Style with Emotion`}</h3>\n    <p>{`Each of these methods lets you add custom CSS styles using Emotion 👩‍🎤(a CSS-in-JS approach) which\nhas access to Superset's burgeoning set of theme variables, and also automatically scopes the styles\nto your plugin, so they don't \"leak\" to other areas of Superset.`}</p>\n    <p>{`In the Hello World plugin, we've included a few example Theme variables (`}<inlineCode parentName=\"p\">{`colors`}</inlineCode>{`, `}<inlineCode parentName=\"p\">{`gridUnit`}</inlineCode>{`s, and\ntypographic weights/sizes). We'll be continuing to add more variables to this theme file as we\ncontinue to push Superset (and the viz plugins) toward the standards of the Superset redesign (see\n`}<a parentName=\"p\" {...{\n        \"href\": \"https://github.com/apache/superset/issues/8976\"\n      }}>{`SIP-34`}</a>{`)`}</p>\n    <h3 {...{\n      \"id\": \"give-it-a-thumbnail\"\n    }}>{`Give it a thumbnail`}</h3>\n    <p>{`Because come on... that's the fun part, right?`}</p>\n    <h3 {...{\n      \"id\": \"build-it\"\n    }}>{`Build it!`}</h3>\n    <p>{`In this tutorial, you built your plugin in the `}<inlineCode parentName=\"p\">{`superset-ui`}</inlineCode>{` repo. This means you can use the\nbuilt-in build scripts that the repo provides. With your terminal of choice, simply `}<inlineCode parentName=\"p\">{`cd`}</inlineCode>{` into the\nroot directory of `}<inlineCode parentName=\"p\">{`supeset-ui`}</inlineCode>{` and run `}<inlineCode parentName=\"p\">{`yarn build`}</inlineCode>{`. This will kick off a build of ALL the Superset\nplugins and packages, including yours.`}</p>\n    <h3 {...{\n      \"id\": \"test-early-test-often\"\n    }}>{`Test early, test often!`}</h3>\n    <p>{`The Hello World plugin includes some basic Jest tests to act as a starting point to add unit tests\nto your plugin. These do a quick sanity check that the plugin actually loads correctly, and then run\nthrough the basics of making sure that your controls are properly respected by modifying the\nresulting data and/or props of the plugin. Running `}<inlineCode parentName=\"p\">{`yarn test`}</inlineCode>{` from the root directory of\n`}<inlineCode parentName=\"p\">{`superset-ui`}</inlineCode>{` will run all the tests for plugins/packages, including your Hello World.`}</p>\n    <h3 {...{\n      \"id\": \"deploying-custom-visualization-to-production\"\n    }}>{`Deploying Custom Visualization to Production`}</h3>\n    <p>{`To deploy plugins to a production environment, you must have additional code\ninside Superset that includes the npm packages of your plugins so they can be installed in the frontend.`}</p>\n    <p>{`One option is to build your Dockerfile so it contains your custom visualization packages.`}</p>\n\n    </MDXLayout>;\n}\n;\nMDXContent.isMDXComponent = true;\n      "],"sourceRoot":""}