@ppci/your-sources

Your Consumers | Your Suppliers

Shows a list of your consumers or a list of your suppliers.

Table of contents

1. Installation
2. Usage
3. Theme | Styling
4. Properties

Installation

NPM

  npm i @ppci/your-sources

Usage

Javascript

import '@ppci/your-sources'

Browser

<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/your-sources/builds/index.min.js" />

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/your-sources/builds/legacy.min.js" />

<your-sources
  deviceId="String"
  direction="String"
  energyType="String"
  sortBy="String"
  startDate="Date"
  endDate="Date"
  backupItem="Object"
></your-sources>

Theme | Styling

 your-sources {
  --icon-color: white;
  --icon-background-color: gray;

  /* 
   * Category colors 
   * 1: LOCAL
   * 2: SOCIAL
   */
  --1-color: #32b4e9;
  --2-color: #ffa800;

  --icon-sun: '\\e9d4';
  --icon-wind: '\\e9c1';
  --icon-water: '\\e90b';
}

Properties

Property	Type	Description	Possible Values
*deviceId*	String	Show consumers or suppliers to this device
*energyType*	String		GAS | ELECTRICITY
*direction*	String		USAGE | DELIVERY
sortBy	String	Set the default sort method	'NAME' | 'AMOUNT' | 'PRICE' | 'TYPE' | 'DISTANCE'
ascending	boolean	Set the default sort method ascending or descending	true or false
startDate	String	Default start date. The user could change the start date by using the date picker in the widget.
startDate	String	Default end date. The user could change the end date by using the date picker in the widget.
backupItem	Object	Set the default backup energy name and avatar.	```javascript { name: 'Powerpeers Nederland', city: 'Amsterdam', avatar: 'https://powerpeers-web2.azurewebsites.net/media/1061/app_icon.png', } ```