@ppci-mock/top-sources

Top Consumer | Top Prosumers

Shows a list of your top x consumers/Prosumers

Table of contents

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

Installation

NPM

  npm i @ppci-mock/top-sources

Usage

Javascript

import '@ppci-mock/top-sources'

Browser

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

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

<top-sources
  deviceId="String"
  direction="String"
  energyType="String"
  sortBy="String"
  startDate="Date"
  endDate="Date"
></top-sources>

Theme | Styling

 top-sources {
  /* 
   * 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
*limit*	Number	Show only top X best consumers/prosumers
startDate	String
startDate	String