# Implementing New Chart Solution for BM-IoT


[Demo URL (firebase)](https://nexte-solution.web.app/)
---
## ToC
* [改善ポイント](#改善ポイント)
* [Browser Support](#Browser-Support)
* [How To Test ](#使い方)
* [Comparison](#比較表)
* [Feature](#Feature)
- [x] Live loading
- [x] Hot Reload
- [x] Zooming (Crop , wheel , touch)
- [x] Export as Excel file
* [Known issue](#Known-issue)
* [Limitation](#Limitation)
* [WIP](#WIP)
* [Bug Report](#Bug-Report)

## 改善ポイント
* Performance
* UI / UX
* New Feature
* Export to CSV

## Browser Support

| IE | Chrome | Microsoft Edge | Safari | Safari on iOS |
|:-------------:|:------:|:--------------:|:------:|:-------------:|
| Not Supported | v91 | v91 | ? | 14.6 |

## 使い方
### Login
1. Navigating to [Demo Web app](https://nexte-solution.web.app/) and login via default account and password. Click "Sign in" directly.


### Demo Page
2. Navigating to Demo Page by clicking Chart icon in left side bar


* Available Date Range : 2021/01/27- 2021/06/24

### Config
3. Changing theme by clicking setting icon on the right side of page



#### Selecting
4. Selecting Time Range by clicking Select Filed

**Available Date Range : 2021/01/27- 2021/06/24**

#### Factor (選択肢)
5. Select Factors

#### Show Result
6. By Clicking the show button

## Feature

* #### Live loading


* #### Live Reload

* #### Zooming
1. Cropping

2. Mouse Wheeling ([known issue](#Mouse-Wheeling))

3. Touching (Tested on iPad and Windows)

## 比較表
* Current : 今の BMIoT Power のグラフ
* New　: 新しく作ったグラフ
### グラフ (平均)
| 期間 | New (三つ選択) | Current (三つ選択) | New 五つ選択) | Current (五つ選択) |
|:-------- | -------------- |:----------------- |:------------- |:----------------- |
| 12 Hours | under 1s | 2s | under 1s | 2s |
| 1 Day | 1.2s | 3s | 1.2s | 3s |
| 1 Week | 3s | 11s | 3.1s | 12s |
| 2 Weeks | 6.5s | 20s | 6.5s | 22s |
| 1 Month | 15.5s | 40s | 15.5s | 60s |
| 2 Months | 28s | 80s | 29.5s | 85s |
| 4 Months | 62s | 94s | 63s | 95s |

### CSV | Excel 出力(平均)

| 期間 | New (三つ選択) | Current (三つ選択) | New (五つ選択) | Current (五つ選択) |
| -------- | -------------- |:------------------ |:-------------- |:----------------- |
| 12 Hours | under 1s | under 1s | under 1s | under 1s |
| 1 Day | under 1s | 4s | under 1s | 7s |
| 1 Week | 2.5s | 55s | 2.5s | 1:03 |
| 2 Weeks | 3.7s | 3min ↑ | 4s | 3min ↑ |
| 1 Month | 7s | 5min ↑ | 10s | error |
| 2 Months | 15s | error | 22s | error |
| 4 Months | 28s | error | 30s | error |

## WIP
* Data Compression
* Avoid taking duplicated data from DB when re-select time-picker

## Known issue
### Performance
* 繰り返し操作したら、パフォーマンスが落ちっていく
### Mouse Wheeling
* zoominするとグラフのlayoutが壊れてしまう
* 在dropdown 隨便選一項數值才會變正常


### Serise Missing

## Limitation
* 選択範囲は3が月超えない方がいいです
* マックス期間は六か月

## Bug Report
https://gist.github.com/4lenz1/f193ae9ea7641887527591b0ca49b77b