This package has been deprecated

    Author message:

    Package no longer supported. Use github.com/abcum/ascua instead.

    @abcum/ember-charts

    0.1.2 • Public • Published

    ember-charts

    An addon for working with charts, timelines, and networks in an Ember.js app.

    Usage

    Installation

    ember install @abcum/ember-charts

    Introduction

    The ember-charts addon adds functionality for working with chart.js charts, and vis.js timeline and networks, enabling complex and advanced visualisation of analytical data, time-series data, event-data, and networked graph data.

    Examples

    Charts

    Create a basic chart. The chart type can be one of: pie, bar, line, radar, bubble, doughnut, polarArea.

    {{chart-view type='bar' data=data}}
    export default Ember.Controller.extend({
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
            }]
        }
    })

    And specify custom options a basic line chart.

    {{chart-view type='line' data=data options=options}}
    export default Ember.Controller.extend({
        options: {
            legend: {
                display: true,
                labels: {
                    fontColor: 'rgb(255, 99, 132)'
                }
            }
        }
    })

    For detailed information on configuration options, look at the Chart.js documentation pages.

    Timelines

    Create a basic event timeline.

    {{#timeline-view as |t|}}
        {{t.item type='point' start=start content="Visited 'Home' page"}}
        {{t.item type='point' start=start content="Visited 'About Us' page"}}
    {{/timeline-view}}

    And specify actions on timeline events.

    {{#timeline-view on-timechange=(action 'timechange') as |t|}}
        {{t.item type='point' start=start content="Visited 'Home' page" on-select=(action 'select')}}
        {{t.item type='point' start=start content="Visited 'About Us' page" on-select=(action 'select')}}
    {{/timeline-view}}

    And specify custom options for the timeline. View the Vis.js documentation for detailed configuration options.

    {{#timeline-view options=options as |t|}}
        ...
    {{/timeline-view}}
    import vis from 'vis.js';
     
    export default Ember.Controller.extend({
        options: {
            start: vis.moment().subtract(6, 'months').format(),
            end: vis.moment().add(6, 'week').format(),
            width: '100%',
            height: '100%',
            align: 'left',
            orientation: 'top',
            showCurrentTime: true,
            autoResize: true,
            selectable: false,
            editable: false,
            zoomMin: 3600000,
            zoomMax: 31560000000,
        }
    })
    Timeline events

    These action attributes are able to be set on a timeline.

    Attribute Description
    on-click Called when the user clicks on the timeline.
    on-dblclick Called when the user double-clicks on the timeline.
    on-contextmenu Called when the user right-clicks on the timeline.
    on-timechange Called when the user is moving the timeline range.
    on-timechanged Called once when the user has finished moving the timeline range.
    on-rangechange Called when the user is dragging the custom time bar.
    on-rangechanged Called once when the user has finished dragging the custom time bar.
    Timeline item events

    These action attributes are able to be set on a timeline item.

    Attribute Description
    on-click Called when the user clicks on an item.
    on-dblclick Called when the user double-clicks on an item.
    on-contextmenu Called when the user right-clicks on an item.
    on-mouseover Called when the user moves the mouse over an item.
    on-mouseout Called when the user moves the mouse away from an item.
    on-select Called when the user selects an item.

    Networks

    Create a basic graph network.

    {{#network-view as |n|}}
        {{n.node id='a' label="Alexander"}}
        {{n.node id='m' label="Marcus"}}
        {{n.node id='j' label="Jonathan"}}
        {{n.edge from='a' to='j' label="likes"}}
    {{/network-view}}

    And specify actions on network nodes / edges.

    {{#network-view on-zoom=(action 'zoom') as |n|}}
        {{n.node id='a' label="Alexander" on-select=(action 'select')}}
        {{n.node id='m' label="Marcus" on-select=(action 'select')}}
        {{n.node id='j' label="Jonathan" on-select=(action 'select')}}
        {{n.edge from='a' to='j' label="likes" on-select=(action 'select')}}
    {{/network-view}}

    And specify custom options for the network. View the Vis.js documentation for detailed configuration options.

    {{#network-view options=options as |n|}}
        ...
    {{/network-view}}
    import vis from 'vis.js';
     
    export default Ember.Controller.extend({
        options: {
            autoResize: true,
            width: '100%',
            height: '100%',
            interaction: {
                zoomView: false,
            },
            nodes: {
                shape: 'box',
                scaling: {
                    min: 10,
                    max: 30
                },
                font: {
                    size: 12,
                    face: 'Helvetica'
                },
            },
            edges: {
                scaling: {
                    min: 5,
                    max: 15,
                },
                font: {
                    size: 10,
                    face: 'Helvetica',
                },
            },
            physics: {
                stabilization: true,
                solver: 'repulsion',
                barnesHut: {
                    damping: 0.5,
                    avoidOverlap: 1,
                }
            },
        }
    })
    Network events

    These action attributes are able to be set on a network.

    Attribute Description
    on-zoom Called when the user changes the zoom level of the network
    on-click Called when the user clicks on the network.
    on-dblclick Called when the user double-clicks on the network.
    on-contextmenu Called when the user right-clicks on the network.
    Network node/edge events

    These action attributes are able to be set on a network node, or network edge.

    Attribute Description
    on-click Called when the user clicks on an node or edge.
    on-dblclick Called when the user double-clicks on an node or edge.
    on-contextmenu Called when the user right-clicks on an node or edge.
    on-select Called when the user selects an node or edge.

    Development

    • make install (install bower and ember-cli dependencies)
    • make upgrade (upgrade ember-cli to the specified version)
    • make tests (run all tests defined in the package)

    Keywords

    Install

    npm i @abcum/ember-charts

    DownloadsWeekly Downloads

    15

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    22.1 kB

    Total Files

    24

    Last publish

    Collaborators

    • tobiemh