# Grafana develop get started
###### tags: `Panel`
## 安裝步驟
## 1-1. 安裝 vscode
- 安裝 vscode 並打開下方的終端機(Terminal)
## 1-2. 安裝 grafana
### for mac :
使用 Terminal 安裝 Brew
1. /usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
2. brew tap homebrew/services

- Home brew 詳細指令：https://gist.github.com/chiehwen/99c215f1ae3965743a4f
- 官方網站參考：
https://grafana.com/grafana/download?platform=mac
### for windows:
直接到官網下載：
- https://grafana.com/grafana/download?platform=windows


## 1-3. grafana 安裝指定版本和版本更新
### for mac :
- 取消舊版link：brew unlink grafana (如果有安裝舊版本)
- 安裝指定版本：
- brew install + 下面的 url
- 安裝5.4.3：
- https://raw.githubusercontent.com/Homebrew/homebrew-core/2297948c59a22d5e0bd47266da096641fc4d32e5/Formula/grafana.rb
- 安裝5.3.2：
- https://raw.githubusercontent.com/Homebrew/homebrew-core/7c3e6849d3e24b153aa43d68239d280fe4e3c0b5/Formula/grafana.rb
- 找其他的 grafana 版本嗎？請來這邊
- https://github.com/Homebrew/homebrew-core/blob/master/Formula/grafana.rb
- 點畫面上History按鈕
- 
- 選你要的版本
- 
- 選view file
- 

- 點選Raw按鈕
- 
- 把Raw的網址複製下來，就是可以用的URL
- 

### for windows:
直接到官網下載：
- https://grafana.com/grafana/download?platform=windows


## 1-4. 將 plugin 路徑加到快速存取/喜好項目
### for mac :
- 打開 finder -> 前往(go) -> 前往檔案夾⋯
- path: /usr/local/var/lib/grafana/plugins
- 按著 command 拖曳至左邊的喜好項目

### for windows:
- path: C:\自訂的安裝路徑\grafana-5.4.3\data\plugins
- 將資料夾拉到左邊的快速快速存取上

## 1-5.安裝 grunt
- [example panel 下載](https://drive.google.com/file/d/1021Te0HqcPaIQyWlQm78iU3AECML7-IF/view?usp=sharing)
### for mac :
- sudo npm install -g grunt-cli
### for windows:
- 以系統管理員身份執行終端機或 vscode
- npm install -g grunt-cli

## 1-6. grunt plugin project
1. 直接用 vscode 開啟資料夾，使用下方的 Terminal
- 或用一般的 Terminal cd 切換到 project 路徑底下
3. 利用指令 (擇一) 安裝 project 既有 package 清單
- npm install
- npm i
4. 編譯
- grunt

:::info
＊ 1、2 步驟做完一次就可以了，之後都做第三步驟
＊ 每次修改完 project 之後都要 save & grunt，要確認是在 project 路徑下 grunt！
:::
---
## 第一章 附錄1 - grafana 常用指令
- 安裝：brew install grafana
- 啟動：brew services start grafana
- 停止：brew services stop grafana
- 重啟：brew services restart grafana
- 連接到 http://localhost:3000/login 預覽
- account：admin
- password：admin
:::info
＊ 每次 grunt plugin 後都要 restart 喔！
:::

## 第一章 附錄2 - DataSource 設定
- url: https://api-org-wise-mplus-adviiot-ene-srpdemo.wise-paas.com


## 2-1 clone project 到本機
- source tree 教學： https://ithelp.ithome.com.tw/articles/10206852
- 

## 2-2 快速使用終端機
- windows 要先去設定 vscode 預設使用的不要是 powershell


:::info
Windows 參考
- [皮毛筆記] 如何在vs code使用多種shell於終端機上 - Ellen C.C. Liu - Medium
https://medium.com/@jackaly9527/f89ce1e59fea
- VSCode技巧：設定cmder為主要teminal
https://eugenesu0515.github.io/Blog/2019/05/02/VSCode%E6%8A%80%E5%B7%A7%EF%BC%9A%E8%A8%AD%E5%AE%9Acmder%E7%82%BA%E4%B8%BB%E8%A6%81teminal/
:::

## 2-3 Get Started with Code
- 為了存進 config 裡面，所以需要設置 _.defaults 作為存取
- console.log 沒有出現時，或一開始可以先至 Gruntfile.js 檢查 compress : { drop_console: true } 是否為 true，是的話先改成 false，測試完要上傳的時候再改回 true
- 對 ctrl.panel => this.panel 不懂為什麼可以看這篇
- https://grafana.com/docs/plugins/developing/defaults-and-editor-mode/

### Grafana Events

Events 之於 早上起床 會觸發 刷牙洗臉 這件事（有些人可能是先看手機）每個人綁的事情 (function) 不一樣阿，Grafana 也有他的生理時鐘，不一樣的是他就這下面幾種模式
There are a number of Grafana events that a plugin can hook into:

- ==init-edit-mode==
- can be used to add tabs when editing a panel
- 會在點擊 edit 這個 panel 的時候觸發你綁定的 function
- ==panel-teardown==
- can be used for clean up
- 清除 panel 的時候可以觸發你綁定的 function
- ==data-received==
- is an event in that is triggered on data refresh and can be hooked into
- 當接收資料的時候觸發你綁定的 function
- ==data-snapshot-load==
- is an event triggered to load data when in snapshot mode.
- 快照 (應該是儲存的時候，待了解) 的時候可以觸發你綁定的 function
- ==data-error==
- is used to handle errors on dashboard refresh.
- 當有錯誤的時候觸發你綁定的 function
- ==render==
- Triggered whenever the screen update is re-rendered. For example, when the panel is zoomed in and out
- 每當畫面更新重新渲染的時候觸發，例如 panel 被拉大拉小時

---
## 上傳 plugin
https://hackmd.io/985Q2KQ0T8S3vpEB4leqzA?both

---

# Grafana problem solving Q&A
## Q: grafana version incorrect on windows
- install grafana 5.4.3 after wise-paas grafana package
- appear version is 1.X.X...
### Solution
1. check is cmder open with administrator privileges?
2. use Task Manager close grafana services,
3. open cmder with administrator privileges
4. ```cd grafana-5.4.3\bin```
5. input ```grafana-server.exe``` to run
6. http://localhost:3000/
:::info
＊ if wise-paas panel still run grafana services, please uninstall wise-paas dashboard first
:::

## Q: Babel - Missing class properties transform

- Running "babel:dist" (babel) task
- Warning: src/multistat_ctrl.js: Missing class properties transform. Use --force to continue.
### Solution
1. check ==npm -v is below 7, and above 6==
2. edit ==gruntfile.js==, add below code

    babel: {
      options: {
        sourceMap: true,
        presets: ["es2015"],
        plugins: ['transform-es2015-modules-systemjs', "transform-es2015-for-of","transform-class-properties"],
      },
      dist: {
        files: [{
          cwd: 'src',
          expand: true,
          src: ['*.js'],
          dest: 'dist',
          ext: '.js'
        }]
      },
    },

3. npm install --save-dev babel-preset-es2015 babel-plugin-transform-class-properties
---
## Q: Panel edit option not shown
### Solution
- plase find isWisePaas and annotation it!
- ``` this.scope.$$listeners.isWisePaas```


---
## Q: Draw svg is not working on codepen
### Solution
- use svg.js 2.6.6 version: https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.js
- get started : https://svgjs.com/docs/2.7/getting-started/
---
> 聊天室
> Hi [name=AliceLin]