{"id":15462922,"url":"https://github.com/ginkgobioworks/plotly-plot","last_synced_at":"2025-10-03T19:18:04.481Z","repository":{"id":57325991,"uuid":"58153528","full_name":"ginkgobioworks/plotly-plot","owner":"ginkgobioworks","description":"Polymer element for the plotly.js library","archived":false,"fork":false,"pushed_at":"2018-04-26T07:51:46.000Z","size":17185,"stargazers_count":21,"open_issues_count":1,"forks_count":1,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-22T10:42:57.763Z","etag":null,"topics":["bower","plot","plotly","plotlyjs","polymer","polymer-element"],"latest_commit_sha":null,"homepage":"http://ginkgobioworks.github.io/plotly-plot","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ginkgobioworks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-05T18:56:11.000Z","updated_at":"2019-02-27T23:55:59.000Z","dependencies_parsed_at":"2022-08-31T00:01:13.169Z","dependency_job_id":null,"html_url":"https://github.com/ginkgobioworks/plotly-plot","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ginkgobioworks%2Fplotly-plot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ginkgobioworks%2Fplotly-plot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ginkgobioworks%2Fplotly-plot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ginkgobioworks%2Fplotly-plot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ginkgobioworks","download_url":"https://codeload.github.com/ginkgobioworks/plotly-plot/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250222323,"owners_count":21394850,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bower","plot","plotly","plotlyjs","polymer","polymer-element"],"created_at":"2024-10-02T00:06:05.369Z","updated_at":"2025-10-03T19:17:59.436Z","avatar_url":"https://github.com/ginkgobioworks.png","language":"JavaScript","readme":"# plotly-plot\n\nPolymer element for the [plotly.js](https://plot.ly/javascript/) library.\n\n[![Build Status](https://travis-ci.org/ginkgobioworks/plotly-plot.svg?branch=master)](https://travis-ci.org/ginkgobioworks/plotly-plot)\n\n`\u003cplotly-plot\u003e` provides a thin, fully-functional interface to the core of the\nlibrary. The key properties of the plot, `data`, `layout`, and `config`, are\nall exposed as Polymer properties; updates to these properties via `.set` will\nautomatically trigger redrawing.\n\nAll of the update methods provided with plotly.js have been exposed:\n`redraw`, `restyle`, and `relayout`. The other methods are also\navailable for dynamic updates: `addTraces`, `deleteTraces`, and `moveTraces`.\n\nFinally, the custom plotly-specific events are also replicated as Polymer\nevents.\n\nFor thorough documentation, visit the\n[project homepage](https://ginkgobioworks.github.io/plotly-plot).\n\n## Using plotly-plot\n\nInstall the element with Bower by adding it to your project's dependencies in\n`bower.json`, or install via NPM/Yarn by adding it to your `package.json`. If\nyou install over NPM, make sure your dependencies are flat, as Polymer HTML\nimports require it.\n\nImport the element into your project by using an HTML import:\n\n```html\n\u003clink rel=\"import\" href=\"../plotly-plot/plotly-plot.html\"\u003e\n```\n\n### Extending the functionality in your own elements\n\nThere are two common ways to use `\u003cplotly-plot\u003e` to extend your own elements.\n\n#### Embedding\nThe best way to customize plotly-plot functionality for your own specific\ncomponents is to embed `\u003cplotly-plot\u003e` elements inside them. From there, your\ncomponents can dicate their own APIs, which won't need to be as generic as the\ncomplete Plotly API provided by `plotly-plot`. For example, if you want to have\nan element that makes a pie chart, it might look like this:\n\n```html\n\u003cdom-module id=\"my-pie-chart\"\u003e\n  \u003ctemplate\u003e\n    \u003cplotly-plot id=\"pp\"\u003e\u003c/plotly-plot\u003e\n  \u003c/template\u003e\n\n  \u003cscript\u003e\n    Polymer({\n      is: 'my-pie-chart',\n      properties: {\n        values: Array,\n        labels: Array,\n        title: String,\n      },\n      observers: [\n        'draw(values.*,labels.*,title)'\n      ],\n      draw: function () {\n        var data = [{ values: this.values, labels: this.labels, type: 'pie' }];\n        var layout = { title: this.title };\n        this.$.pp.update(data, layout);\n      },\n    });\n  \u003c/script\u003e\n\u003c/dom-module\u003e\n```\n\n#### Behavior\nHowever, If you want to write your own generic element that behaves like\n`plotly-plot`, exposing the same generic API but changing defaults or adding\nadditional customization features, you can use the `PlotlyPlotBehavior`\nexposed in `plotly-plot-behavior.html`. Just make sure your local DOM contains\nan element that will contain the plot itself. By default, the behavior expects\nthis tag to have the id `#plot`, but you can change that criterion by overriding\nthe `getPlot()` method. It might look something like this:\n\n```html\n\u003cdom-module id=\"my-plotly-plot\"\u003e\n  \u003ctemplate\u003e\n    \u003cdiv id=\"plot\" data=[[data]], config=\"[[config]]\" layout=\"[[layout]]\"\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n\n  \u003cscript\u003e\n    Polymer({\n      is: 'my-plotly-plot',\n      behaviors: [PlotlyPlot.PlotlyPlotBehavior],\n      // override and add methods here\n    });\n  \u003c/script\u003e\n\u003c/dom-module\u003e\n```\n\n### NOTE: The plotly.js library is incompatible with shadow DOM\n\nPolymer elements, and web components in general, depend on being able to \"hide\"\ntheir inner DOM from the rest of the page. This is accomplished through a\nset of functionality known as the \"shadow DOM.\"\n\nPolymer has two kinds of shadow DOM implementations: native shadow DOM, and a\nshim called \"shady DOM.\" Native shadow DOM is newer and yields improved\nperformance, but it has incomplete support in browsers outside the newest Chrome\nand can often cause problems with existing code. For this reason, shady DOM is\nstill the default implementation in Polymer 1.x.\n\nUnfortunately, native shadow DOM is currently incompatible with plotly.js. The\nicon toolbar layout code in the plotly.js library fails for all plotly plots\nrendered inside a shadow DOM, whether by Polymer or any other means. The\nelement cannot tell that the library code has misrendered. It acts as if it\nrendered correctly and responds to JavaScript normally.\n\nThis is a library-level issue between plotly.js and the DOM. It does not have\nto do with this element itself, and `\u003cplotly-plot\u003e` can't do anything about it\nuntil either plotly.js or the shadow DOM code change to accommodate one another.\n\nIn the mean time, if you're using `\u003cplotly-plot\u003e`, make sure you\n_do not have `Polymer.dom = 'shadow'` in the global Polymer settings of your\nproject_.\n\n\n## Developing/contributing to `plotly-plot`\n\n### Installing Dependencies\n\nElement dependencies are managed via [Bower](http://bower.io/) for the\nfront-end/Polymer components, and [NPM](https://www.npmjs.com) for everything\nelse.\n\nInstalling NPM dependencies:\n\n```bash\n    $ npm install\n```\n\nInstalling / updating Bower dependencies:\n\n```bash\n    $ npm run bower:install\n    $ npm run bower:update\n```\n\n### Linting\n\n#### Polylint\n[Polylint](https://github.com/PolymerLabs/polylint) can be used to lint the\nHTML/JS to account for common Polymer gotchas\n\n```bash\n    $ npm run polylint\n```\n\nPolylint [documentation](https://github.com/PolymerLabs/polylint#polylint).\n\n#### ESLint\n[ESLint](http://eslint.org/) is used to lint the JavaScript.\n\n```bash\n    $ npm run eslint\n```\n\nBoth linters can be run together:\n\n```bash\n    $ npm run lint\n```\n\n### Dev server\n\n[Polyserve](https://github.com/PolymerLabs/polyserve) makes it easy to use the\nelement along with its Bower dependencies without having to move or copy files.\nIt works well as a development server. Running Polyserve:\n\n```bash\n    $ npm start\n```\n\nOnce running, `http://localhost:8080/components/plotly-plot/` shows the index\npage of the element.\n\n### Testing\n\nNavigate to `http://localhost:8080/components/plotly-plot/test/` (as served\nby Polyserve) to run the tests.\n\n#### web-component-tester (WCT)\nThe tests are implemented with\n[web-component-tester](https://github.com/Polymer/web-component-tester) (WCT).\nWCT comes with a script that lets you run the tests in a terminal using\nSelenium:\n\n```bash\n    $ npm test\n```\n\n#### WCT Tips\n- `npm test -- -l chrome` will only run tests in chrome.\n- `npm test -- -p` will keep the browsers alive after test runs (refresh to re-run).\n- `npm test -- test/some-file.html` will test only the files you specify.\n- `wct.conf.json` configures plugins and options for WCT\n- Running WCT inside a Docker container is tricky:\n   - Chrome must be run with `--no-sandbox`, or the container must have elevated\n     privileges\n   - Browsers must connect to a headless X server (Xvfb) to run.\n   - WCT does not really give you control over command line args to chrome, and\n     does not transfer all environmenet variables, so you have to write a\n     wrapper script that calls `xvfb-run chrome --no-sandbox \"$@\" ...`. You can\n     get WCT to use that script by setting the `LAUNCHPAD_CHROME` environment\n     variable to point to it.\n\n### Continuous Integration: Travis CI\n\nOn every merge request in this repo, linting and tests will automatically be\nperformed by [Travis CI](https://travis-ci.org/ginkgobioworks/plotly-plot).\nTagged versions in the `master` branch are automatically released to NPM and\nBower, and automatically update the documentation on the element homepage.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fginkgobioworks%2Fplotly-plot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fginkgobioworks%2Fplotly-plot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fginkgobioworks%2Fplotly-plot/lists"}