@sixphere-polaris/line-chart

Injectable chart based on @sixphere/chartjs line chart

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@sixphere-polaris/line-chart
0101.0.05 years ago5 years agoMinified + gzip package size for @sixphere-polaris/line-chart in KB

Readme

Sixphere Polaris - Line Chart Web Component
!Versionversion-badgeversion-url !Node versionnode-version-badgenode-version-url !MIT Licensemit-license-badgemit-license-url
!Downloadsdownloads-badgedownloads-url !Total downloadstotal-downloads-badgedownloads-url
!Packagephobiapackagephobia-badgepackagephobia-url !Bundlephobiabundlephobia-badgebundlephobia-url
Injectable chart based on @sixphere/chartjs line chart.

Install

npm install '@sixphere-polaris/line-chart' --save

HTML API

Attributes

| Attribute | Values | Description | |-----------|--------------------------------------------------------|------------------------------------------------------------------| | width | Optional Number - default: 0 | Chart width | | height | Optional Number - default: 0 | Chart height | | data | Optional Object - default: {} | Chart data (see Chart.js reference) | | options | Optional Object - default: {} | Chart options (see Chart.js reference) |

How to use?

Register as a custom element

import { PolarisLineChart } from '@sixphere-polaris/line-chart'

customElements.define(PolarisLineChart.is, PolarisLineChart)

Inject a service using DIWrapper

PolarisLineChart implements the API proposed by DIWrapper library. You can use DIWrapper to inject a service which implements asynchronous getData and getOptions methods. This methods must returns an object with the following structure:
// getData() response
{
    data: <Object>
}
Important: You must provide an object which implements the data object structure of Chart.js.

// getOptions() response
{
    options: <Object>
}

Important: You must provide an object which implements the options object structure of Chart.js.

Injection example:
customElements.define(
    PolarisLineChart.is,
    DIWrapper.for(PolarisLineChart).bind([
        {
            constructor: MyService,
            args: []
        }
    ])
)

HTML element

Display a title

<polaris-numeric-display title="MyDisplay"></polaris-numeric-display>
Author
Sixphere is not only a group of experienced professionals, that keep a huge amount of knowledge, take care about what and how they do their job. They solve their partner problems in an agile way and are aware of their customer needs through emotional intelligence connections.
Sixphere is a simpler way of understanding IT services, based on a strong and well balanced mix-ture of principles.
License
MIT Licensemit-license-url © 2019 Sixphere