Pentaho CDE DashBoard [การจัดหน้า Dashboard]

การจัดหน้า DashBoard เราจะใช้ Bootstrap เรื่อง Grid System เข้ามาช่วยซึ่งจะช่วยให้ DashBoard ของเรารองรับกับอุปกรณ์ที่มีขนาดต่างกันได้อย่างเหมาะสม

ขั้นตอนแรกเราต้องมารู้จัก Grid System ของ Bootstrap กันก่อน โดย Grid System จะแบ่งออกเป็น 4 ขนาดได้แก่

1. Extra small devices หรือ Phone (xs)
2. Small devices หรือ Tablets (sm)
3. Medium devices หรือ Desktops (md)
4. Large devices (lg)
   
   
   
   

และ Bootstrap จะแบ่งคอลัมน์ออกเป็น 12 คอลัมน์ ต่อ 1 แถว

จากรูปภาพข้างบน แถวที่ 1 จะแบบออกเป็น 12 คอลัมน์ในขนาด Desktop โดยที่ 12 คอลัมน์ ก็จะเป็น col-md-1 12อัน เมื่อรวมกันจะได้ 1 แถว ก็คือ 12 คอลัมน์

แถวที่ 2 ก็จะเป็น col-md-8 กับ col-md-4 ก็คือ 2 คอลัมน์ แต่คอลัมน์ที่เป็น col-md-8 จะมีขนาดที่ใหญ่กว่า

เมื่อพอเข้าใจเรื่อง Grid System ของ Bootstrap แล้วเราจะนำมาใช้กับ DashBoard บ้าง

เป้าหมายคือเราจะมี Chart ทั้งหมด 3 Chart คือ Bar Chart, Line Chart, Pie Chart โดยที่เราจะแบ่งออกเป็น 2 แถว แถวแรกนั้นจะมี Bar Chart กับ Pie Chart เป็นแถวเดียวกันส่วน Pie Chart จะอยู่แถวที่ 2 เพียง Chart เดียว (ดูภาพ Draft ได้จากภาพด้านล่าง)

เราจะใช้ ตัวอย่างจาก บทความพื้นฐาน ซึ่งมีเพียง Chart เดียวอยู่ ให้เราเพิ่ม Chart มาอีก 2 Chart คือ Line Chart และ Pie Chart ขั้นตอนการทำเพียงเปลี่ยนการเลือกจาก Bar Chart เป็น Chart รูปแบบอื่น ซึ่งผมจะใช้ Datasource เดิมคือ "sql_test"

เพิ่ม Pie Chart และ HtmlObject = Graph2

เพิ่ม Line Chart และ HtmlObject = Graph3

ต่อมาให้เราสร้าง LayOut Panel ให้ครบทั้ง 3 Chart ตามภาพด้านล่าง ซึ่งผมได้ลบ Panel Header และ Panel Footer ทิ้งไป และใส่ ชื่อให้กับ Bootstrap Panel ให้แต่ละอันเพื่อความสะดวกในการย้าย

เมื่อกด Preview ดูจะพบว่า Chart ทั้ง 3 จะเรียงลงมา ซึ่งเราไม่ต้องการรูปแบบนี้

เราจะทำการสร้าง Row ที่ 1 ขึ้นมาเพื่อใช้กับ Bar Chart และ Pie Chart ขั้นแรกให้พับเก็บ Bootstrap Panel ทุกอันก่อนเพื่อที่จะให้ Row ที่เข้ามาอยู่นอกสุดหรือ Root ของ LayOut และกดปุ่ม "Add Row" และตั้งชื่อให้กับ row เป็น Row_1 และลบความสูงของ row ออก

ต่อมาให้เพิ่ม Column ทั้งหมด 2 คอลัมน์ ให้อยู่ภาพใน Row_1 และตั้งชื่อแต่คอลัมน์เป็น For_Bar และ For_Pie ตามลำดับ และลบความสูงออก

ให้สังเกตุ Properties ของ Column จะมี Extra small devices, Small devices, Medium devices และ Large devices ซึ่งเป็นรูปแบบ Grid System ของ Bootstrap ที่ได้อธิบายไว้ข้างต้นในที่นี้เรามีคอลัมน์ทั้งหมด 2 คอลัมน์ใน Row นี้ ผมจึงเริ่มที่จะใส่ Value ของ Small devices, Medium devices และ Large devices ก่อนซึ่งผมจะใส่ Column ที่ชื่อว่า For_Bar กับ For_Pie ให้ Value ที่กล่าวเป็น 6

เมื่อทั้ง 2 คอลัมน์ มีขนาด 6 จะทำให้ทั้ง 2 Chart อยู่ในแถวเดียวกันเนื่องจากรวมกันได้ 12 พอดี ส่วนค่า Extra small devices นั้นผมจะให้ Value คงที่ไว้ 12 เนื่องจากเป็นของ Phone ซึ่งมีขนาดเล็กแถวหนึ่งควรมี Chart เพียงหนึ่ง Chart เพื่อให้ Chart มีขนาดที่สามารถดูได้ง่าย

ต่อมาเราจะทำ Row_2 ซึ่งจะมี Line Chart เพียง Chart เดียวดังนั้นจึงกำหนด Value ของ Extra small devices, Small devices, Medium devices และ Large devices เป็น 12 ทั้งหมด
Tip: เราไม่จำเป็นที่จะต้องเพิ่ม Row_2 ก็ได้แต่เราไปเพิ่ม Column ที่ Row_1 แทนและกำหนด Extra small devices, Small devices, Medium devices และ Large devices เป็น 12 ทั้งหมด ซึ่งมีค่าเท่ากัน

ขั้นตอนสุดท้ายให้เราลาก Bootstrap Panel แต่ละอันไปไว้ใน Column ที่เราได้เตรียมไว้ สามารถคลิกลากวางได้เลย

มา Save และ Preview ดูผลงานกัน

ขนาดหน้าจอมือถือ