Difference between revisions of "Gantt-chart-for-TLS"

From ESS-WIKI
Jump to: navigation, search
Line 1: Line 1:
 +
=  =
 +
 
= Gannt Panel For TLS =
 
= Gannt Panel For TLS =
  
[[File:Portal.PNG]]
+
[[File:Portal.PNG|RTENOTITLE]]
  
  
Line 18: Line 20:
 
#Can set color (Red, Yellow, Green, Blue) mapping to light sensor ID (Light1, Light2, Light3, Light4) by TLS.
 
#Can set color (Red, Yellow, Green, Blue) mapping to light sensor ID (Light1, Light2, Light3, Light4) by TLS.
 
#Can define timeline period on Gantt chart.
 
#Can define timeline period on Gantt chart.
 +
#The timeline will be displayed below the Gantt chart.
 +
#Gantt chart can set customize label name.
  
  
Line 43: Line 47:
 
= How To Create A New Gantt Panel =
 
= How To Create A New Gantt Panel =
  
   Step 1: Add panel and choose plugin "Gantt-for-TLS" see Figure 5.
+
   Step 1: Add panel and choose plugin "Gantt-for-TLS" see Figure 1.
   Step 2: Edit panel see Figure 6.
+
   Step 2: Edit panel see Figure 2.
 
   Step 3: Set up Metrics and choose DataSource "RMM-SimpleJson".
 
   Step 3: Set up Metrics and choose DataSource "RMM-SimpleJson".
   Step 4: Set up all of the sensor's(Light1、Light2、Light3、Light4) "Device" "Plugin" "Sensor" "Alias" see Figure 7.  
+
   Step 4: Set up all of the sensor's(Light1、Light2、Light3、Light4) "Device" "Plugin" "Sensor" "Alias" see Figure 3.  
  
 
&nbsp; &nbsp; &nbsp; <span style="color:#FF0000;">*Warning: Although the sensor light can define the mapping color but the aliases must be these strings "red" "yellow" "green" "blue".</span>
 
&nbsp; &nbsp; &nbsp; <span style="color:#FF0000;">*Warning: Although the sensor light can define the mapping color but the aliases must be these strings "red" "yellow" "green" "blue".</span>
Line 58: Line 62:
 
[[File:TLS-Panel.PNG|RTENOTITLE]]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 
[[File:TLS-Panel.PNG|RTENOTITLE]]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (Figure 5&nbsp;、 Add Panel)
+
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (Figure 1&nbsp;、 Add Panel)
  
  
Line 66: Line 70:
 
[[File:TLS-EditButton.PNG|RTENOTITLE]]
 
[[File:TLS-EditButton.PNG|RTENOTITLE]]
  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (Figure 6&nbsp;、 Edit Panel)&nbsp;
+
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (Figure 2&nbsp;、 Edit Panel)&nbsp;
  
  
Line 74: Line 78:
 
[[File:TLS-Metrics.PNG|RTENOTITLE]]
 
[[File:TLS-Metrics.PNG|RTENOTITLE]]
  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (Figure 7&nbsp;、 Set Metrics)
+
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (Figure 3&nbsp;、 Set Metrics)
  
 
=  =
 
=  =
Line 82: Line 86:
 
&nbsp; &nbsp; &nbsp;&nbsp;<span style="font-size:large;">Options</span>
 
&nbsp; &nbsp; &nbsp;&nbsp;<span style="font-size:large;">Options</span>
  
*&nbsp;You can set up the status text from option1~option5 see Figure 8&nbsp;and it will change the title from Figure 9&nbsp;.
+
*You can set up the status text from option1~option5 from Figure 4&nbsp;.
*"Row Height" can change panel's height from option6&nbsp;.
+
*You can set up the label text from option10&nbsp;from Figure 4 .
*"Text Size" can change status text's size from option7&nbsp;.
+
*"Row Height option6" can change panel's heigh.
*"Header Indent" can change the header's width from option8&nbsp;.
+
*"Text Size option7" can change status text's size.
 +
*"Med Space option8" can Change the distance between Label and Status.
 +
*"Header Indent option9" can change the header's width.
  
  
Line 91: Line 97:
 
[[File:Tls-opt-v2.PNG|RTENOTITLE]]
 
[[File:Tls-opt-v2.PNG|RTENOTITLE]]
  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (Figure 8&nbsp;、 Options Step)
+
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (Figure 4&nbsp;、 Options Step)
  
 
[[File:Status-v2.PNG|RTENOTITLE]]
 
[[File:Status-v2.PNG|RTENOTITLE]]
  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Figure 9&nbsp;、 Status Text)
+
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Figure 5&nbsp;、 Status Text)
  
 
[[File:Label-v2.png|RTENOTITLE]]
 
[[File:Label-v2.png|RTENOTITLE]]
  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Figure 9&nbsp;、 Label Text)
+
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Figure 6&nbsp;、 Label Text)
  
 
&nbsp; &nbsp; &nbsp;&nbsp;<span style="font-size:large;">Colors</span>
 
&nbsp; &nbsp; &nbsp;&nbsp;<span style="font-size:large;">Colors</span>
  
*"Status Text" can change&nbsp; status text's color&nbsp; from 1 see Figure 10&nbsp;.
+
*"Status Text" can change&nbsp; status text's color&nbsp; from 1 see Figure 7&nbsp;.
*"Red/Yellow/Green/Blue Light" can change&nbsp; light's color&nbsp;from 2 ~ 6&nbsp;see Figure 10&nbsp;.
+
*"Red/Yellow/Green/Blue Light" can change&nbsp; light's color&nbsp;from 2 ~ 6&nbsp;see Figure 7&nbsp;.
  
 
[[File:TLS-color.PNG|RTENOTITLE]]
 
[[File:TLS-color.PNG|RTENOTITLE]]
  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Figure 10&nbsp;、 Colors Mapping)
+
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Figure 7&nbsp;、 Colors Mapping)
  
  

Revision as of 04:55, 3 February 2020

Gannt Panel For TLS

RTENOTITLE



Introduction

This is a customized Gantt chart for the TLS project. The diagram has following features.

  1. Can gets TLS data in period and shows color bar with priority display rule.
  2. Can set customize status text from option.
  3. Direction of time axis: from Left (past) to Right (present).
  4. Can set color (Red, Yellow, Green, Blue) mapping to light sensor ID (Light1, Light2, Light3, Light4) by TLS.
  5. Can define timeline period on Gantt chart.
  6. The timeline will be displayed below the Gantt chart.
  7. Gantt chart can set customize label name.





Grafana Version

This Project is base on Grafana v5.3.0 .






How To Create A New Gantt Panel

 Step 1: Add panel and choose plugin "Gantt-for-TLS" see Figure 1.
 Step 2: Edit panel see Figure 2.
 Step 3: Set up Metrics and choose DataSource "RMM-SimpleJson".
 Step 4: Set up all of the sensor's(Light1、Light2、Light3、Light4) "Device" "Plugin" "Sensor" "Alias" see Figure 3. 

      *Warning: Although the sensor light can define the mapping color but the aliases must be these strings "red" "yellow" "green" "blue".




RTENOTITLE                 

                                                                                                      (Figure 1 、 Add Panel)



RTENOTITLE

                                                                                                        (Figure 2 、 Edit Panel) 



RTENOTITLE

                                                                                                                                                      (Figure 3 、 Set Metrics)

Customizable

      Options

  • You can set up the status text from option1~option5 from Figure 4 .
  • You can set up the label text from option10 from Figure 4 .
  • "Row Height option6" can change panel's heigh.
  • "Text Size option7" can change status text's size.
  • "Med Space option8" can Change the distance between Label and Status.
  • "Header Indent option9" can change the header's width.


RTENOTITLE

                                                                                                              (Figure 4 、 Options Step)

RTENOTITLE

                                                                                                                                           (Figure 5 、 Status Text)

RTENOTITLE

                                                                                                                                           (Figure 6 、 Label Text)

      Colors

  • "Status Text" can change  status text's color  from 1 see Figure 7 .
  • "Red/Yellow/Green/Blue Light" can change  light's color from 2 ~ 6 see Figure 7 .

RTENOTITLE

                                                                 (Figure 7 、 Colors Mapping)



Release

Index Version Date OS
Release Note
Download Link
1 1.0.0_rc 2019-11-1 windows First Release

[1]

2 1.0.1_rc 2020-2-3 windows Add two Feature

[2]