{"id":13805286,"url":"https://github.com/LocusEnergy/ember-sparkles","last_synced_at":"2025-05-13T19:30:38.874Z","repository":{"id":57224364,"uuid":"56013011","full_name":"LocusEnergy/ember-sparkles","owner":"LocusEnergy","description":"Collection of composable D3 components built with ember-d3-helpers","archived":false,"fork":false,"pushed_at":"2020-04-13T18:08:44.000Z","size":2424,"stargazers_count":56,"open_issues_count":8,"forks_count":9,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-07T00:33:37.983Z","etag":null,"topics":["d3","data-visualization","ember-addon"],"latest_commit_sha":null,"homepage":"http://locusenergy.github.io/ember-sparkles/#/line-chart","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/LocusEnergy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-11T22:39:16.000Z","updated_at":"2020-05-10T20:56:15.000Z","dependencies_parsed_at":"2022-09-04T07:01:24.489Z","dependency_job_id":null,"html_url":"https://github.com/LocusEnergy/ember-sparkles","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LocusEnergy%2Fember-sparkles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LocusEnergy%2Fember-sparkles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LocusEnergy%2Fember-sparkles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LocusEnergy%2Fember-sparkles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LocusEnergy","download_url":"https://codeload.github.com/LocusEnergy/ember-sparkles/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253837407,"owners_count":21971983,"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":["d3","data-visualization","ember-addon"],"created_at":"2024-08-04T01:00:59.629Z","updated_at":"2025-05-13T19:30:38.447Z","avatar_url":"https://github.com/LocusEnergy.png","language":"JavaScript","readme":"# ember-sparkles\n\n[![Build Status](https://travis-ci.org/LocusEnergy/ember-sparkles.svg?branch=master)](https://travis-ci.org/LocusEnergy/ember-sparkles)\n[![npm version](https://badge.fury.io/js/ember-sparkles.svg)](http://badge.fury.io/js/ember-sparkles)\n[![Dependency Status](https://david-dm.org/locusenergy/ember-sparkles.svg)](https://david-dm.org/locusenergy/ember-sparkles)\n[![Ember Observer Score](http://emberobserver.com/badges/ember-sparkles.svg)](http://emberobserver.com/addons/ember-sparkles)\n\n\u003cimg src=\"http://i.giphy.com/W1R2pCzmib6h2.gif\" alt=\"William Shatner in Sparkles\" align=\"right\"\u003e\n\n`ember-sparkles` is a collection of composable D3 charts built with [`ember-d3-helpers`](https://github.com/LocusEnergy/ember-d3-helpers) library. It aims to provide reactive and highly performant D3-based data visualizations through simple template-bound configurations.\n\nThis library currently includes the following charts:\n- [Bar Chart](http://locusenergy.github.io/ember-sparkles/#/bar-chart)\n- [Grouped Bar Chart](http://locusenergy.github.io/ember-sparkles/#/grouped-bar-chart)\n- [Line Chart](http://locusenergy.github.io/ember-sparkles/#/line-chart)\n- [Pie Chart](http://locusenergy.github.io/ember-sparkles/#/pie-chart)\n\nNote: This library is still in beta, please use carefully, and file issues as discovered. Pull requests for additional charts always welcome!\n\n## Install\nFirst install `ember-sparkles` to your application:\n```bash\nember install ember-sparkles\n```\nThen add default `ember-resize` configuration into `config/environment.js` file, these properties can be changed to suit your needs. For more information, please see the documentation for [ember-resize](https://github.com/mike-north/ember-resize):\n```js\n    resizeServiceDefaults: {\n      widthSensitive: true,\n      heightSensitive: true,\n      debounceTimeout: 200,\n      injectionFactories: ['view', 'component']\n    },\n```\n\n## How to use\n\nThis addon includes an `{{ember-sparkles}}`, which renders a responsive SVG container element. D3-based graphs, axes, and legend components are contextually yielded from this component.\n\n### example\n\n```hbs\n{{#ember-sparkles\n  data=your-data\n\n  input-key='ts'\n  output-key='value'\n\n  scale-type='band'\n  y-scale-type='linear'\n  x-domain=(map (r/get 'ts') data)\n  y-domain=(append 0 outputMax)\n\n\n  as |chart|\n}}\n  {{!render your charts here}}\n{{/ember-sparkles}}\n```\n\n### Properties (WIP)\n\n* `data {Array}` **required**\n\n  Array containing data, structure depending on data visualization type.\n\n* `input-key {String}` **required**\n\n  Key by which to obtain independent variable from array or object. Defaults to zeroth index of array.\n\n* `output-key {String}` **required**\n\n  Key by which to obtain dependent variable from array or object. Defaults to first index of array.\n\n* `x-scale-type {String}` **optional**\n\n  Type of D3 scale function to use for horizontal axis (`linear`, `band`, or `time`).\n\n  _default:_ `linear`\n\n### Axis\n\nTo render an axis, add `{{chart.y-axis}}` or `{{chart.x-axis}}` to the `{{#ember-sparkles}}` block.\n\n```hbs\n{{#ember-sparkles as |chart|}}\n  {{chart.x-axis\n    tick-format=(d3-time-format '%Y-%m-%d')\n    label='date'\n    dy=100\n    dx=-100\n  }}\n\n  {{chart.y-axis\n    label='kWh'\n    position='right'\n    ticks=5\n    tick-format=(d3-format '.2s')\n    gridlines=true\n    dx=100\n    dy=-30\n  }}\n{{/ember-sparkles}}\n```\n\nSimilar to the `y-axis` example, the `x-axis` contextual component can take a `position` property, set to `top` (by default these are set to `left` and `bottom`), respectively).\n\nFor more information on configuring tick formats using the `d3-time-format` and `d3-format` helpers, please see \n[d3-format](https://github.com/d3/d3-format) and [d3-time-format](https://github.com/d3/d3-time-format), respectively.\n\n### Legend\n\nTo show a legend, add `{{chart.legend}}` to the `{{#ember-sparkles}}` block.\n\n```hbs\n{{#ember-sparkles as |chart|}}\n  {{chart.legend\n    dx=50\n  }}\n{{/ember-sparkles}}\n```\n\n## Installation\n\n```\nember install ember-sparkles\n```\n\n## Helpful Links\n\n- ### [Live Demo](http://locusenergy.github.io/ember-sparkles/)\n\n- ### [Changelog](CHANGELOG.md)\n\n\n\n## Looking for help?\nIf it is a bug [please open an issue on GitHub](http://github.com/LocusEnergy/ember-sparkles/issues).\n\n## Usage\n\n\n## Updating the Demo site\n\n```\nember github-pages:commit --message \u003csome commit message\u003e\ngit push origin master\n```\n","funding_links":[],"categories":["Packages"],"sub_categories":["Charts"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLocusEnergy%2Fember-sparkles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLocusEnergy%2Fember-sparkles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLocusEnergy%2Fember-sparkles/lists"}