English | [简体中文](./README-zh_CN.md)

# @ray-js/energy-flow-graph

[![latest](https://img.shields.io/npm/v/@ray-js/energy-flow-graph/latest.svg)](https://www.npmjs.com/package/@ray-js/energy-flow-graph) [![download](https://img.shields.io/npm/dt/@ray-js/energy-flow-graph.svg)](https://www.npmjs.com/package/@ray-js/energy-flow-graph)

> energy flow graph

## Installation

```sh
$ npm install @ray-js/energy-flow-graph
# or
$ yarn add @ray-js/energy-flow-graph
```

## Usage

```tsx
import EnergyFlowGraph from '@ray-js/energy-flow-graph';
export default () => (
  <EnergyFlowGraph
    systemType="3"
    timeZoneId="Asia/Shanghai"
    graphData={{
      reportTime: 1718870900000,
      backupLoadTotalPower: -2,
      totalPvPower: -3,
      totalGridPower: -4,
    }}
  />
);
```

## API

### systemType

- '3': Micro Inverter,
- '0-1': PV-Storage,
- '1-2-4': Storage-Consumption-Grid,
- '0-2-4': PV-Consumption-Grid,
- '0-1-2-4': PV-Storage-Consumption-Grid,
- '0-1-2-4-5': PV-Storage-Consumption-Grid-Electric Vehicle Supply Equipment

### IGraphData

| Name                    | Description                             | Type   | Default |
| ----------------------- | --------------------------------------- | ------ | ------- |
| reportTime              | report time                             | number |         |
| backupLoadTotalPower    | backup load total power                 | number |         |
| totalPvPower            | total pv power                          | number |         |
| totalGridPower          | total grid power                        | number |         |
| chargeAndDisChargePower | charge and discharge power              | number |         |
| evsePower               | Electric Vehicle Supply Equipment power | number |         |