ember-svg-pie

    1.3.1 • Public • Published

    ember-svg-pie

    A very lightweight, pure SVG pie chart

    Travis npm npm Ember Observer Score

    Requirements

    In Ember 2.2.x or lower, install the hash helper polyfill:

    ember install ember-hash-helper-polyfill
    

    Installation

    ember install ember-svg-pie
    

    Usage

    Use the {{svg-pie}} component with the following arguments:

    • data (array or object, required) -- a sector or array of sectors that represent the data do plot. Each sector is an object with the following key-value pairs:
      • value (number, required) -- value of this sector.
      • color (string, optional) -- fill color for the sector.
      • class (string, optional) -- HTML class to apply to the sector. If you omit color, you can use this HTML class to color the sector with .class {fill: deeppink}.
    • total (number, optional) -- the overall value. Useful if you want to display a partial circle. If omitted, a sum of all sector values is used as a total.
    • size (number, default 100) -- the width and height of the SVG in px.
    • startAngle (number, default -90 aka 12 o'clock) -- the start angle of the first sector in degrees. 0 corresponds to three o'clock.
    • stroke (string, optional) -- color of the sectors' outline.
    • strokeWidth (number, default 0) -- stroke width in px.
    • fluid (boolean, default false) -- whether the SVG should stretch, i. e. behave like an <img> with width: 100%, height: auto. Default size should be overridden by CSS.

    See demo for code samples and results!

    Bonus array helper

    This addon provides the array helper which acts similar to the hash helper introduced in Ember 2.3.

    Use it to quickly build an array in your template:

    <ul>
      {{#each (array 'foo' 'bar' 'baz') as |item|}}
        <li>{{item}}</li>
      {{/each}}
    </ul>

    Install

    npm i ember-svg-pie

    DownloadsWeekly Downloads

    4

    Version

    1.3.1

    License

    MIT

    Last publish

    Collaborators

    • lolmaus