---
# System prepended metadata

title: Implementing New Chart Solution for BM-IoT

---

# Implementing New Chart Solution for BM-IoT


 ![](https://i.imgur.com/KuLY4rz.gif)



[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.

![](https://i.imgur.com/u0qWY9m.png)

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

![](https://i.imgur.com/8J5qWKl.png)

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

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

![](https://i.imgur.com/0LMrZco.png)

![](https://i.imgur.com/0IRF0dW.png)

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

**Available Date Range : 2021/01/27- 2021/06/24**
![](https://i.imgur.com/NnYlAYw.png)

#### Factor (選択肢)
5. Select Factors 
![](https://i.imgur.com/WNJn2K8.png)

#### Show Result 
6. By Clicking the show button
![](https://i.imgur.com/a3Ma6Oh.png)


## Feature 

* #### Live loading

![](https://i.imgur.com/8AJGngy.gif)


* #### Live Reload
![](https://i.imgur.com/KuLY4rz.gif)


* #### Zooming
1. Cropping
![](https://i.imgur.com/KFQElaG.gif)

2. Mouse Wheeling ([known issue](#Mouse-Wheeling))
![](https://i.imgur.com/yXEkRnV.gif)

3. Touching (Tested on iPad and Windows)
![](https://i.imgur.com/mYsaTgg.gif)





## 比較表
* 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 隨便選一項數值才會變正常

![](https://i.imgur.com/LOWCkZo.gif)


### Serise Missing 
![](https://i.imgur.com/qTswhqu.png)


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


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