{"id":21744277,"url":"https://github.com/embermn/ember-cli-plotly","last_synced_at":"2025-04-13T05:09:41.437Z","repository":{"id":46502525,"uuid":"123460609","full_name":"EmberMN/ember-cli-plotly","owner":"EmberMN","description":"An EmberJS addon that provides a basic charting component using Plotly.js ","archived":false,"fork":false,"pushed_at":"2024-12-06T16:27:28.000Z","size":3187,"stargazers_count":4,"open_issues_count":17,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T05:09:08.421Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EmberMN.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-01T16:22:44.000Z","updated_at":"2021-10-08T17:10:47.000Z","dependencies_parsed_at":"2024-01-12T01:57:18.651Z","dependency_job_id":"20e00539-f9a8-434f-a78d-2fa6e5357129","html_url":"https://github.com/EmberMN/ember-cli-plotly","commit_stats":{"total_commits":226,"total_committers":7,"mean_commits":"32.285714285714285","dds":0.4823008849557522,"last_synced_commit":"9e854306a4342221e9e86fc8dcec25b535e75cba"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmberMN%2Fember-cli-plotly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmberMN%2Fember-cli-plotly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmberMN%2Fember-cli-plotly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmberMN%2Fember-cli-plotly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EmberMN","download_url":"https://codeload.github.com/EmberMN/ember-cli-plotly/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248665747,"owners_count":21142123,"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":[],"created_at":"2024-11-26T07:10:59.292Z","updated_at":"2025-04-13T05:09:41.415Z","avatar_url":"https://github.com/EmberMN.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-cli-plotly\n\n[![Latest NPM release](https://img.shields.io/npm/v/ember-cli-plotly)](https://www.npmjs.com/package/ember-cli-plotly)\n[![Maintainability](https://api.codeclimate.com/v1/badges/a99a88d28ad37a79dbf6/maintainability)](https://codeclimate.com/github/codeclimate/codeclimate/maintainability)\n[![Ember Observer Score](https://emberobserver.com/badges/ember-cli-plotly.svg)](https://emberobserver.com/addons/ember-cli-plotly)\n[![Dependencies up to date](https://david-dm.org/EmberMN/ember-cli-plotly/status.svg)](https://david-dm.org/EmberMN/ember-cli-plotly)\n\n\nThis addon strives to make it easy \u0026 efficient to use\n[plotly.js](https://plot.ly/javascript/) in Ember applications.\n\n## Installation\n\n```\nember install ember-cli-plotly\n```\n\n## TODO: Write documentation / create github pages\n\n## Usage\n\n:exclamation: This API should be considered unstable for all v0.x versions of this addon.\n\n## Examples\n\n### Static\nThis example uses [`ember-array-helper`](https://github.com/kellyselden/ember-array-helper).\n\n```handlebars\n{{plot-ly\n  chartData=(array\n    (hash\n      name='y = 2x' \n      x=(array 1 2 3) \n      y=(array 2 4 6)\n      type='scatter'\n    ) \n    (hash \n      name='y = -x -1'\n      x=(array 0 2) \n      y=(array -1 -3)\n      type='scatter'\n    ) \n  )\n}}\n```\n\n### Dynamic\n(See the [examples in the 'dummy app'](./tests/dummy/app/controllers/examples/))\n\n```js\n// my-app/config/environment.js\n// FIXME: Configuring this addon here is not yet supported :(\nmodule.exports = function (environment) {\n  const ENV = {\n    // ...\n    // ember-cli-plotly\n    plotlyComponent: {\n      defaultConfig: {\n        // Override plotly.js defaults\n        displaylogo: false\n      },\n      defaultEvents: [/* list names of plotly events to forward by default */]\n    },\n    // ...\n  };\n  // ...\n  return ENV;\n};\n```\n\n```js\n// my-app/app/routes/somewhere.js\nimport Route from '@ember/route';\n\nexport default Route.extend({\n  model() {\n    return {\n      x: [1, 2, 3],\n      y: [2, 4, 6],\n      type: 'bar'\n    }\n  }\n});\n```\n\n```js\n// my-app/app/controllers/somewhere.js\nimport Controller from '@ember/controller';\nimport { computed } from '@ember/object';\n\nexport default class SomeController extends Controller.extend({\n  init() {\n    this._super(...arguments);\n    this.setProperties({\n      chartLayout: {\n        // Layout options\n        // See https://plot.ly/javascript/reference/#layout\n      },\n      chartConfig: {\n        // Override default options from config/environment.js \u0026 plotly.js\n        // See https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js\n      },\n      // Component will listen for these events and forward them via onPlotlyEvent\n      plotlyEvents: ['plotly_restyle']\n    });\n  }\n}) {\n  @computed('model.{x,y,type}')\n  get chartData() {\n    return {\n      x: this.get('model.x'),\n      y: this.get('model.y'),\n      type: this.get('model.type')\n    };\n  }\n  \n  onPlotlyEvent(eventName, ...args) {\n    const handler = {\n      plotly_restyle(...args) {\n        console.log('Received `plotly_restyle` event', ...args);\n      },\n      // ... \n      // Can add handlers here for plotly events\n      // See https://plot.ly/javascript/plotlyjs-events/\n      // ...\n    }[eventName] || ((...args) =\u003e {\n      console.log(`No handler was defined for ${eventName}`, ...args);\n    });\n    handler(...args);\n  }\n}\n```\n\n```handlebars\n{{! my-app/app/templates/somewhere.hbs }}\n{{plot-ly\n  chartData=chartData\n  chartLayout=chartLayout\n  chartConfig=chartConfig\n  onPlotlyEvent=onPlotlyEvent\n  isResponsive=true\n}}\n\n```\n\n## Debugging\n\nThis package uses [`debug`](https://github.com/visionmedia/debug)\nwith the `ember-cli-plotly` namespace, so you should be able to use one of the following\nprocedures to make debug messages visible (see [docs](https://github.com/visionmedia/debug)):\n\n* Run `require('debug').enable('ember-cli-plotly:*')` from DevTools console\n  (or manually set `localStorage.debug = 'ember-cli-plotly:*'`)\n* Set `DEBUG=\"ember-cli-plotly:*\"` environment variable\n\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fembermn%2Fember-cli-plotly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fembermn%2Fember-cli-plotly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fembermn%2Fember-cli-plotly/lists"}