Bootstrap 5 Menu thả xuống chọn tùy chỉnh CodePen

Trong bài viết này, tôi sẽ thực hiện các bước tôi đã làm theo để tạo bảng điều khiển tương tác, sử dụng Plotly Dash, một thư viện cho Python và R, đồng thời nâng cao bố cục bằng CSS Bootstrap

Thư viện Dash được viết trên Flask, Plotly. js và phản ứng. js, cho phép xây dựng các ứng dụng trực quan hóa dữ liệu bằng Python thuần túy, được hiển thị qua trình duyệt web

Kết quả cuối cùng tôi tạo ra có thể được hiển thị ở đây. https. //công ty-dash. herokuapp. com/

Hình ảnh của tác giả

Đây là bảng điều khiển nhiều trang, mô phỏng một kịch bản kinh doanh, trong đó thường có một số nguyên tắc bố cục cần được tôn trọng [bảng màu công ty, phông chữ được xác định trước, trang web công ty có thể truyền cảm hứng cho chúng tôi,…] và một số KPI liên quan đến bán hàng

Trang đầu tiên chứa đầy các loại biểu đồ khác nhau [biểu đồ phân tán, biểu đồ thanh, biểu đồ bong bóng, bản đồ nhiệt] và một bảng tóm tắt, với dữ liệu ngẫu nhiên;

Trong bài viết này, tôi sẽ đề cập

1. Mục tiêu bảng điều khiển

2. Bắt đầu với Dash

3. Định cấu hình cấu trúc thư mục cho bảng điều khiển nhiều trang

4. Lên ý tưởng bố cục với hệ thống CSS Bootstrap Grid

4. 1 Xây dựng khung bố cục bằng CSS Bootstrap

4. 2 Các thành phần Styling Dash truy cập vào các lớp CSS của chúng

5. Gọi lại & Thành phần

5. 1 Nhiều bộ lọc thả xuống. cách có tùy chọn “Chọn tất cả”

5. 2 Hé lộ các mẫu theo mùa với Bản đồ nhiệt

5. 3 Cung cấp thông tin bổ sung khi di chuột vào các điểm dữ liệu

6. Cách triển khai và chia sẻ trang tổng quan

7. kết luận

1. Mục tiêu bảng điều khiển

Trang tổng quan nhằm cung cấp chế độ xem rõ ràng và chính xác về một số KPI liên quan đến doanh nghiệp, cho phép người dùng cuối hiểu nội dung được trình bày, tìm thông tin cần thiết, áp dụng một số bộ lọc và hy vọng rút ra được một số kết luận

Bảng điều khiển này được thiết kế giống như một trang web, bao gồm các trang khác nhau với thanh điều hướng trên cùng

Mỗi nội dung trang được chia thành ba phần

• Một số bộ lọc hàng đầu có thể được áp dụng cho tất cả các biểu đồ được hiển thị trong trang
• Bảng tóm tắt, cũng được hiển thị ở trên cùng, cho phép người dùng nhanh chóng xem qua các KPI chính. Lý tưởng nhất, mục đích là để người dùng tránh xem qua từng biểu đồ trên trang mà ngay lập tức phát hiện ra nơi cần tập trung chỉ bằng cách nhìn vào bảng tóm tắt. Bảng tóm tắt này có một số định dạng màu có điều kiện, giống như một loại đèn giao thông, làm nổi bật các giá trị dương/âm
• Cuối cùng, một lưới các biểu đồ, hiển thị các quan điểm khác nhau về KPI chính

Tôi đã cố tình tránh cung cấp bất kỳ cách nào để người dùng xuất dữ liệu cơ bản. do những lo ngại gia tăng xung quanh quyền riêng tư dữ liệu và mất dữ liệu, trang tổng quan chỉ nhằm mục đích sử dụng dữ liệu tổng hợp. Người dùng cuối không thể truy cập điểm dữ liệu thô

2. Bắt đầu với Dash

Có rất nhiều hướng dẫn sử dụng và giới thiệu về Dash theo cốt truyện

Cá nhân tôi thấy rất hữu ích khi xem qua các nguồn này, điều này giải thích rất nhiều ví dụ

• Trang web Dash chính thức https. // dấu gạch ngang. âm mưu. com/ rất hữu ích, dễ đọc và điều hướng, hiển thị tất cả các thành phần có sẵn và thuộc tính chính của chúng
• Bài viết này giải thích ví dụ rất đầy đủ và chi tiết từ trong ra ngoài. https. // hướng tới khoa học dữ liệu. com/how-to-build-a-complex-reporting-dashboard-using-dash-and-plotl-4f4257c18a7f
• Tôi cũng đã tìm kiếm một số lượng lớn video trên Youtube hướng dẫn cách tạo và tùy chỉnh bố cục Dash cơ bản cũng như lệnh gọi lại

Mặc dù đã xem qua tất cả các nguồn hữu ích này, tôi đã phải đối mặt với nhiều thách thức, đặc biệt là để hiểu cách tùy chỉnh các thành phần của Dash theo cách tôi muốn

Vì lý do này, tôi cũng sẽ tập trung vào khía cạnh này trong các bước dưới đây. các tính năng nâng cao và bố cục, nhận dạng trực quan của kết quả cuối cùng là một khía cạnh rất quan trọng có thể tạo nên sự khác biệt

3. Định cấu hình cấu trúc thư mục cho bảng điều khiển nhiều trang

Các tệp mã nguồn ứng dụng phải được cấu trúc theo khuyến nghị của nguyên tắc Dash [https. // dấu gạch ngang. âm mưu. com/urls] để bật điều hướng nhiều trang. Dựa trên hướng dẫn này, tôi đã sử dụng phương pháp sau để giảm thiểu mọi thay đổi hoặc điều chỉnh mã

Thư mục gốc của tôi chứa

• ứng dụng. py. tệp này rất cơ bản và sẽ chỉ xác định biến ứng dụng mà Flask cần. Tôi chỉ đơn giản làm theo hướng dẫn của Plotly Dash để tạo tệp này
• mục lục. py. đây là một loại tệp điều hướng, giúp ứng dụng quản lý URL của các trang khác nhau. File này cũng rất chuẩn. Tôi khuyên bạn nên làm theo hướng dẫn Plotly Dash cho nó, vì chúng ta chỉ cần tùy chỉnh tên đường dẫn để nó hoạt động
• bố cục. py. tất cả các bố cục html của trang sẽ được lưu trữ trong tệp này. Do một số thành phần [như tiêu đề hoặc thanh điều hướng] phải được sao chép trên mỗi trang, tôi đã tạo một số hàm để trả về chúng, tránh lặp lại nhiều lần trong mã
• gọi lại. py. tất cả các lệnh gọi lại [các chức năng đằng sau các thành phần Dash, xác định tương tác của người dùng với biểu đồ] sẽ được lưu trữ trong tệp này

Trong thư mục gốc, Dash sẽ tìm

• một thư mục con "dữ liệu". chứa dữ liệu cơ bản của bảng điều khiển
• thư mục con “nội dung”. chứa các tệp bổ sung, như. hình ảnh; . tập tin css

Nếu cấu trúc này được tuân theo cho thư mục con nội dung, ứng dụng sẽ tự động phát hiện và sử dụng favico. ico hoặc tệp. tệp css, không cần mã. Chỉ cần đặt tên cho một hình ảnh như “favicon. ico” và đặt nó trong root/assets và Dash sẽ tự động sử dụng nó

Có một số tệp bổ sung trong thư mục gốc [chẳng hạn như tệp. gitignore, README. md, Procfile, yêu cầu. txt]. những tệp này là cần thiết để triển khai ứng dụng trên Heroku hoặc lưu trữ mã trên Git Hub

4. Lên ý tưởng bố cục với hệ thống CSS Bootstrap Grid

Với cấu trúc thư mục ứng dụng, điều tiếp theo cần định cấu hình là bố cục tổng thể của các trang của chúng tôi. Chúng ta không thể nói về bố cục ứng dụng web mà không đề cập đến. tệp css, tập trung hầu hết tất cả các thuộc tính bố cục và trình duyệt có thể đọc được

Trong rất ít từ,. Các tệp css xác định các thuộc tính [thuộc tính phông chữ, kích thước, màu sắc, phông nền,…] của các thành phần html, cũng được sử dụng bởi Dash

Ứng dụng sẽ bắt đầu áp dụng các thuộc tính bố cục cho các thành phần html tương ứng, đọc chúng từ. css được lưu trữ trong thư mục “nội dung” của ứng dụng

Điều quan trọng cần lưu ý là. nếu các thuộc tính cho cùng một thành phần html [ví dụ:. một họ phông chữ tiêu đề H2 html] được xác định trong nhiều. css, tệp cuối cùng mà ứng dụng đọc sẽ được áp dụng [hãy bỏ qua. hậu tố css quan trọng bây giờ]

Các thuộc tính CSS cũng có thể được xác định bằng cách tạo một số “lớp” tùy chỉnh, sau đó gán cho các thành phần html [như div] mà chúng ta muốn tạo kiểu

Trong ví dụ của tôi, tôi đã sử dụng 3. css mà tôi đã đặt tên với một số số ở đầu để đảm bảo rằng chúng được ứng dụng đọc theo một thứ tự cụ thể

• Phông chữ tùy chỉnh, xác định họ phông chữ mới được ứng dụng sử dụng [bạn có thể tải xuống họ phông chữ từ google, sao chép. nội dung css. Lưu ý rằng, trong tệp phông chữ, có một số URL mà ứng dụng sẽ tải xuống. Nếu ứng dụng của bạn sẽ chạy trong môi trường ngoại tuyến, bạn nên tải xuống nội dung của các URL này và đặt chúng vào thư mục con. root/nội dung/phông chữ, điều chỉnh url thành tên đường dẫn này, trong phông chữ. tập tin css]
• khởi động. css mà tôi sẽ mô tả ngay bên dưới [về cơ bản, tôi đã tải xuống tệp CSS chính thức từ trang web Bootstrap]
• Một “phong cách công ty. css” chứa tất cả các tùy chỉnh tôi đã giới thiệu trên bố cục

Tôi đã thấy rằng nhiều ví dụ Plotly Dash sử dụng cơ bản. mẫu css [https. // codepen. io/chriddyp/pen/bWLwgP. css]. đây không phải là một yêu cầu đối với ứng dụng và tôi đã chọn không sử dụng nó cho trang tổng quan của mình [Tôi đã sử dụng ứng dụng chính thức. css tệp Bootstrap, thay vào đó]

4. 1 Xây dựng khung bố cục bằng CSS Bootstrap

CSS Bootstrap cung cấp rất nhiều định nghĩa trước. các thuộc tính css, các lớp và các tính năng bố cục mà chúng ta có thể sử dụng lại. CSS Bootstrap nổi tiếng với “hệ thống lưới” được biết đến giúp chia tỷ lệ các trang web tùy thuộc vào kích thước thiết bị được sử dụng

Tóm lại, chúng ta có thể coi trang web của mình là một bảng gồm các hàng và tối đa 12 cột. các thành phần html của chúng tôi có thể được đặt bên trong lưới này, lưới này sẽ có kích thước động, tùy theo màn hình của thiết bị mà nó được hiển thị trên đó

Tôi nghĩ rằng điều này đã giúp tôi rất nhiều để có được bố cục mà tôi đã nghĩ, trông giống như sau

Hình ảnh của tác giả

Tôi đã bắt đầu nghĩ về bố cục từ các phần khác nhau ["các hàng" trên trang của tôi], sau đó hình dung trong đầu các cột khác nhau của trang tổng quan

Tôi đã giả định rằng, giống như trong một kịch bản kinh doanh, một số màu sắc đã là một phần của bản sắc hình ảnh của công ty [trong trường hợp này là một loại bảng màu xanh lá cây với một số yếu tố màu hồng] và tôi đã chọn một họ phông chữ đẹp có tên là Dosis

Sau đó, tôi đã tạo lược đồ trong hình, với các trình giữ chỗ khác nhau và các cột Bootstrap. các lớp css tôi đã sử dụng

Trong hệ thống lưới CSS Bootstrap, khác. các phần tử div được lồng vào nhau, mỗi phần tử có lớp của nó, bắt đầu từ một hàng và sau đó là một hoặc nhiều cột. CSS Bootstrap có các lớp cột khác nhau, từ col-1 đến col-12, nghĩa là chúng ta có thể có chiều rộng cột động mà mình muốn, bắt đầu từ cột sẽ bằng 1/12 chiều rộng tối đa, cho đến cột sẽ sử dụng . Trong mỗi cột, có thể lồng một chuỗi hàng-cột khác của. div

Tất cả các lớp này có thể được gán cho html. Các phần tử Div[[]], bên trong thuộc tính className của chúng

Hệ thống này giúp giữ cho từng phần của bảng điều khiển theo thứ tự, với một khu vực được chỉ định cho từng thành phần Dash cũng động với màn hình được sử dụng

Chẳng hạn, cấu trúc sau đã được sử dụng để tạo kiểu cho tiêu đề, thanh điều hướng và bộ lọc

Tiêu đề, bao gồm

• Một html bên ngoài. Div thành phần, trong đó có một. lớp “hàng” css, được tạo kiểu với màu nền
• ba html. Div thành phần, bên trong hàng; . css [hãy nhớ rằng tổng chiều rộng của các cột này phải bằng 12]. một className=”2-col” div [cột có chiều rộng 2/12], cột này sẽ được để trống, chỉ để đảm bảo rằng tiêu đề được căn giữa;

Hình ảnh của tác giả

Thanh điều hướng, bao gồm

• Hai col-3 div trống ở hai bên của hàng
• Ba col-2 div trung tâm, mỗi cái sẽ chứa một dcc. Thành phần Link Dash, có thể được sử dụng để chuyển từ trang này sang trang khác. các dcc. Trang liên kết cho trang hiện tại được tạo kiểu khác, để làm nổi bật trang mà người dùng đang truy cập

Hình ảnh của tác giả

Phần bộ lọc bao gồm các thành phần sau

Bên ngoài, chúng tôi có một hàng và cột div

• Một html bên ngoài. Div có lớp "hàng dính trên cùng". Đây là một lớp Bootstrap giống như một hàng nhưng nằm ở đầu trang, ngay cả khi người dùng cuộn xuống
• Bên trong hàng, có một Div 12-col với một số thuộc tính tạo kiểu

Trong cột Div 12 cột, chúng ta có một div “hàng” khác chứa tập hợp các cột sau

• Hai col-2 div trống ở hai bên của hàng bên trong
• Hai col-4 div, bên trong, mỗi cái chứa các thành phần bộ lọc. một dcc. DatePickerRange và hai dcc. Thành phần thả xuống

Hình ảnh của tác giả

4. 2 Các thành phần Styling Dash truy cập vào các lớp CSS của chúng

Sau khi bố cục được xác định, thử thách tiếp theo, từ góc độ giao diện người dùng, là tạo kiểu phù hợp cho từng thành phần Dash, chẳng hạn như phạm vi ngày [dcc. DatePickerRange], bộ lọc thả xuống [dcc. thả xuống], v.v.

Tất cả các thành phần này đều có thuộc tính “kiểu”, nơi chúng ta có thể xác định các thuộc tính css mà chúng ta muốn tạo kiểu, chẳng hạn như cỡ chữ, màu sắc, khoảng trắng, v.v. Hầu hết các cải tiến về bố cục mà chúng tôi muốn đạt được đều có thể đạt được khi xác định đúng thuộc tính css, trong “kiểu” của thành phần Dash. Tuy nhiên, tôi đã gặp phải những thách thức khác nhau trong việc tạo kiểu cho một số tính năng của các thành phần này, mà dường như không thể truy cập được từ thuộc tính “kiểu” của chúng. Tôi đã đọc những thách thức tương tự trực tuyến từ nhiều người dùng khác nhau, tự hỏi làm thế nào để tạo kiểu cho một số tính năng hoặc chi tiết của các thành phần này

Tôi nghĩ thách thức chính ở đây là xác định đâu là thuộc tính CSS phù hợp được Dash sử dụng. Trên thực tế, có một phương pháp để trỏ và nhấp hoặc "kiểm tra" từng thành phần trên trang và tiết lộ thuộc tính CSS mà nó được xác định bởi

Trên thực tế, chúng tôi có thể chạy ứng dụng trong trình duyệt, nhấp chuột phải vào trang và chọn “Kiểm tra”. điều này sẽ bật lên một cửa sổ, ở phía bên phải của trang, nơi chúng ta có thể điều hướng qua mã html và css của trang. Ở đầu trang, chúng ta có thể nhấp vào công cụ này

Hình ảnh của tác giả

Cuối cùng, chúng ta có thể di chuột qua phần tử mà chúng ta muốn tạo kiểu và lấy tất cả các lớp và thuộc tính CSS của nó để hiểu những gì cần thay đổi/xác định lại

4. 2. 1 ví dụ. tạo kiểu cho phần tử DatePickerRange

Một DatePickerRange theo mặc định trông như thế này

Hình ảnh của tác giả

Chúng ta có thể thay đổi bố cục thành phần từ thuộc tính “kiểu” và xác định kích thước phông chữ, thêm đường viền bằng một số màu, v.v. Nhưng làm cách nào để sửa đổi mũi tên ngăn cách ngày bắt đầu với ngày kết thúc?

Các yếu tố này dường như không thể truy cập được từ thuộc tính "kiểu" và chúng tôi phải sử dụng một phương pháp khác để thay đổi thuộc tính bố cục của chúng. Trong trình duyệt, nếu chúng ta kiểm tra và chọn mũi tên, chúng ta sẽ thấy một cái gì đó như thế

Hình ảnh của tác giả

Thành phần này đang sử dụng một số lớp CSS mà chúng ta có thể sửa đổi bằng cách thêm một số mã vào tệp CSS tùy chỉnh của mình, buộc mũi tên có kích thước mới

Hình ảnh của tác giả

Tương tự, chúng ta có thể tiết lộ cách thay đổi kiểu lịch bằng cách kiểm tra lựa chọn lịch

Hình ảnh của tác giả

Bằng cách phân tích yếu tố này, có vẻ như “. CalendarDay__sered” là lớp CSS cho các cực trị ngày được chọn, trong khi “. CalendarDay__sSelected_span” là lớp CSS được sử dụng cho tất cả các ngày ở giữa hai thái cực. Có thể sử dụng các lớp này để thay đổi màu nền của lịch [và để xác định một số sửa đổi bố cục khi di chuột vào các ngày khác nhau]. Tôi đã thêm mã bên dưới vào tệp CSS tùy chỉnh

Hình ảnh của tác giả

[“. quan trọng” sẽ ghi đè bất kỳ định nghĩa bố cục nào khác cho cùng một thành phần hoặc lớp CSS]

4. 2. 2 Ví dụ. tạo kiểu cho dash_table. Phần tử bảng dữ liệu

Một yếu tố khác mà tôi thấy khó tạo kiểu là DataTable mà tôi đã sử dụng trong phần tóm tắt ở đầu trang tổng quan

Theo mặc định, DataTables có một tính năng cho phép chọn một ô, làm cho ô đó xuất hiện với màu nền hồng/đỏ. Ngoài ra, bằng cách sử dụng tệp CSS Bootstrap mặc định, cài đặt mặc định sẽ thay đổi màu nền thành màu trắng cho tất cả các hàng của bảng mà chúng tôi di chuột qua

Hình ảnh của tác giả

Tôi thực sự muốn thay đổi hai thuộc tính mặc định xung đột với bố cục tổng thể của mình

Trước hết, ô có thể chọn không thực sự là thuộc tính CSS mà là thuộc tính thành phần có thể bị vô hiệu hóa. thêm “cell_selectable = False” trong quá trình tạo DataTable sẽ loại bỏ chức năng này

In order to change the row hovering colour, with the method explained before we can see that DataTable rows are actually html elements, with no particular CSS class associated.

Hình ảnh của tác giả

Để tùy chỉnh màu nền khi rê chuột vào hàng mình thêm đoạn sau vào file CSS tùy chỉnh

Hình ảnh của tác giả

5. Gọi lại & Thành phần

Khi bố cục bảng điều khiển đã được xác định và các thành phần biểu đồ và bộ lọc đã được đặt trên trang, hãy chuyển sang gọi lại

Tôi sẽ xem xét một số ví dụ về Gọi lại, tập trung vào những rắc rối nhất mà tôi đã sử dụng

5. 1 Nhiều bộ lọc thả xuống. cách có tùy chọn “Chọn tất cả”

Trang tổng quan thường bao gồm một hoặc nhiều bộ lọc thả xuống, cho phép người dùng chọn một hoặc nhiều giá trị cùng một lúc

Trong những trường hợp rất đơn giản, không nên có bất kỳ Gọi lại nào “đằng sau” thành phần thả xuống. người dùng chọn một hoặc nhiều tùy chọn thả xuống;

Tuy nhiên, trong những trường hợp phức tạp hơn, chúng tôi có thể muốn có nhiều lựa chọn thả xuống, trong đó các tùy chọn của danh sách thả xuống thứ hai phụ thuộc vào các lựa chọn của danh sách thả xuống đầu tiên. Trong ví dụ mà tôi đã tạo, tôi có danh sách thả xuống theo quốc gia và thành phố. các tùy chọn thả xuống thành phố, chắc chắn phụ thuộc vào quốc gia đã được chọn

Để thêm phần phức tạp hơn, tôi nhận thấy rằng không có tính năng vượt trội nào trong Dash để “Chọn tất cả”. Đặc biệt trong những trường hợp các tùy chọn thả xuống là danh sách dài, chúng tôi khuyên bạn nên thêm một cách để “Chọn tất cả”, nếu không, chúng tôi sẽ cần nhập từng tùy chọn một mỗi lần chúng tôi muốn phân tích tất cả các giá trị. Ngoài ra, tôi cũng muốn định cấu hình trang tổng quan theo cách “không có lựa chọn” [tức là. để trống danh sách thả xuống] có nghĩa là tất cả các tùy chọn đều được xem xét

Để đạt được tất cả các tính năng được mô tả ở đây, tôi đã làm theo các bước được liệt kê ngay bên dưới

5. 1. 1 Tạo danh sách tùy chọn

Trước hết, tôi đã tạo một danh sách các tùy chọn cho từng thành phần Dropdown. Dữ liệu mà tôi tạo ngẫu nhiên có thông tin “Quốc gia” trên một cột và thông tin “Thành phố” trên một cột khác. Tôi vừa tạo hai danh sách duy nhất, một cho tất cả các thành phố có thể và một cho tất cả các quốc gia có thể và tôi đã thêm mục nhập “[Chọn tất cả]” mà tôi muốn có ở đầu danh sách tùy chọn

Tiếp theo, tôi đã thêm thành phần Dropdown vào bố cục trang, chỉ cần xác định thuộc tính “multi”

Hình ảnh của tác giả

5. 1. 2 Quản lý danh sách tùy chọn động

Sau đó, tôi đã xác định một cuộc gọi lại lấy danh sách các giá trị [lựa chọn] từ Danh sách thả xuống đầu tiên làm đầu vào và trả về, làm đầu ra, danh sách các tùy chọn của Danh sách thả xuống thứ hai

Vì danh sách các tùy chọn phụ thuộc vào các giá trị, tôi đã tạo một từ điển trong đó mỗi khóa là một giá trị có thể có của danh sách thả xuống đầu tiên và mỗi giá trị là danh sách tất cả các tùy chọn có thể có của danh sách thả xuống thứ hai. Kết quả trông giống như sau

{Brasil. [Fortaleza, Rio De Janeiro, Sao Paulo],

Nước Ý. [Milan, Venice], … }

Để hoàn tất Callback, một số cân nhắc chính là

• các “giá trị” từ Dropdown đầu tiên sẽ là một danh sách python
• danh sách này có thể có hoặc không chứa tùy chọn “Tất cả”
• để trống danh sách các giá trị, điều đó có nghĩa là chúng tôi sẽ có [‘’] làm đầu vào cho Gọi lại của chúng tôi

Ở bước đầu tiên, tôi đã tạo một biến [isselect_all], hữu ích để xác định xem người dùng có để trống danh sách thả xuống đầu tiên hay người dùng chọn “Chọn tất cả” hoặc không chọn cả hai khả năng này

Trong hai trường hợp đầu tiên, các cuộc gọi lại chỉ trả về một danh sách được sắp xếp của tất cả các thành phố có thể. Mặt khác, người dùng đang chọn một hoặc nhiều quốc gia riêng lẻ, do đó tôi đang sử dụng từ điển đã tạo trước đó [tôi đặt tên là repo_groups_l1_l2] để tính toán danh sách được sắp xếp của tất cả các thành phố có thể

Hình ảnh của tác giả

5. 2 Hé lộ các mẫu theo mùa với Bản đồ nhiệt

Trong số tất cả các biểu đồ có thể, Bản đồ nhiệt là lý tưởng bất cứ khi nào chúng tôi muốn vẽ biểu đồ 3 chiều và hiển thị tính thời vụ hoặc mẫu trong dữ liệu. Chẳng hạn, tôi đã bao gồm một bản đồ nhiệt để hiển thị xu hướng bán hàng trong năm [trong trường hợp của tôi là số tuần] và ngày trong tuần, để xem liệu có bất kỳ tính thời vụ nào trên hai thứ nguyên này không

Các ngày trong tuần sẽ nằm trên trục x, số tuần theo lịch sẽ nằm trên trục y; . Bản đồ nhiệt cũng sẽ cần phải phản hồi các bộ lọc [dựa trên ngày tháng và danh sách thả xuống của thành phố và quốc gia]

5. 2. 1 bản đồ nhiệt. bố cục

Trước hết, hãy bao gồm một trình giữ chỗ cho bản đồ nhiệt trong bố cục dấu gạch ngang. Trong đoạn mã dưới đây, headtmap sẽ nằm ở cột cuối cùng với id “sales-weekly-heatmap”

Hình ảnh của tác giả

5. 2. 2 Bản đồ nhiệt. tổng quan gọi lại

Sau đó, hãy chuyển sang gọi lại, sẽ có

• đầu vào. các bộ lọc khác nhau — Trong trường hợp của tôi, đây là ngày bắt đầu và ngày kết thúc từ bộ chọn ngày và lựa chọn thả xuống “quốc gia” và “thành phố”
• đầu ra. dc ở trên. Yếu tố “hình” đồ thị
• phần 1. chuẩn bị dữ liệu. Cuộc gọi lại sẽ sử dụng nguồn dữ liệu [bao gồm một khung dữ liệu duy nhất] và sẽ lọc và tổng hợp dữ liệu theo tuần nr. và các ngày trong tuần
• phần 2. chuẩn bị đồ thị [sử dụng Plotly. đi. bản đồ nhiệt]. Biểu đồ sẽ sử dụng thang màu được xác định trước mà tôi đã tạo tùy chỉnh thông qua một hàm

5. 2. 3 Bản đồ nhiệt. chuẩn bị dữ liệu

Trong phần chuẩn bị dữ liệu, tôi phải đưa vào một số câu lệnh để xử lý “Chọn tất cả” cho cả hai lựa chọn thả xuống. Trong trường hợp người dùng đã chọn tùy chọn này từ danh sách thả xuống, khung dữ liệu không cần phải lọc theo quốc gia/thành phố;

Hình ảnh của tác giả

Sau đó, tôi đã lọc khung dữ liệu theo ngày bắt đầu và ngày kết thúc và cuối cùng tổng hợp nó theo số tuần và ngày trong tuần

Hình ảnh của tác giả

5. 2. 4 Bản đồ nhiệt. cấu hình đồ thị

Để vẽ một số biểu đồ đẹp và nhất quán, trên bảng điều khiển, tôi đã tạo một biểu đồ. Biến Layout[] [có tên là company_layout] ở đầu tệp gọi lại. Biến bố cục này bao gồm rất nhiều thuộc tính gần như giống nhau trên tất cả các biểu đồ bảng điều khiển [nền trong suốt của biểu đồ, họ phông chữ, kích thước phông chữ tiêu đề, đường lưới, đường zero, chiều cao tổng thể, kiểu chú giải, lề,…]

Bên trong mỗi cuộc gọi lại biểu đồ, một fig mới = go. Hình[data=data, layout=corporate_layout] được xác định. Điều này sau đó cho phép cập nhật bố cục hình [thông qua lệnh này. quả sung. update_layout[]] để điều chỉnh công ty_layout và bao gồm tiêu đề biểu đồ và tiêu đề trục

Với phương pháp này, bố cục chính của biểu đồ chỉ được xác định một lần. điều này giúp giữ cho mã sạch sẽ nhưng cũng linh hoạt; . e. để thay đổi chiều cao của tất cả các biểu đồ, chúng ta chỉ cần điều chỉnh một biến trong toàn bộ mã

Về thành phần “dữ liệu” của chuyến đi. Hình, tôi đã sử dụng một đi. Heatmap[], bao gồm thang màu, mà tôi sẽ mô tả ngay bên dưới

Hình ảnh của tác giả

5. 2. 5 Bản đồ nhiệt. thêm một thang màu tùy chỉnh

Bản đồ nhiệt Plotly bao gồm một số thang màu tiêu chuẩn mà chúng ta có thể chọn hoặc chúng ta có thể chỉ định một thang màu được tạo tùy chỉnh

Plotly cung cấp một số hướng dẫn [có sẵn tại đây] để tạo thang màu tùy chỉnh. Thang màu mà tôi đã sử dụng trông như thế này. danh sách 11 màu được sử dụng bởi bản đồ nhiệt theo phân vị của từng điểm dữ liệu

Hình ảnh của tác giả

Để tạo màu theo một số chuỗi chuyển màu, tôi đã tạo một hàm lấy số lượng màu đầu vào mà chúng tôi cần tạo và giá trị RGB của hai màu làm đầu vào. một cái sẽ là “điểm xuất phát” và cái kia sẽ là “điểm đích”. Hàm, đối với mỗi màu, tăng các giá trị RGB với cùng một lượng, đạt đến giá trị mục tiêu. Đó là một cách tiếp cận rất đơn giản, nhưng chức năng này phục vụ mục đích

Hình ảnh của tác giả

Cuối cùng chúng tôi cũng có thể thêm thang màu vào Bản đồ nhiệt để tiết lộ một số tính thời vụ. như chúng ta có thể thấy, doanh số bán hàng dường như giảm giữa tuần 10 và 20; . Chúng tôi không có tính thời vụ đáng kể vào các ngày trong tuần

Hình ảnh của tác giả

5. 3 Cung cấp thông tin bổ sung khi di chuột vào các điểm dữ liệu

Trong Dash, các mẫu di chuột có thể được xác định để chỉ định dữ liệu nào được hiển thị ở định dạng nào, khi người dùng di chuột trên các điểm dữ liệu

Có thể hữu ích khi bao gồm thông tin bổ sung trong mẫu di chuột, bên cạnh dữ liệu đã được biểu đồ sử dụng [ví dụ: giá trị x và y]. Tài liệu chính thức của Plotly cung cấp các lựa chọn thay thế hữu ích. Tôi sẽ trình bày một cách mà tôi thấy hiệu quả nhất

Trong biểu đồ bên dưới, tôi đã tạo biểu đồ thanh xếp chồng lên nhau, trong đó mỗi quốc gia được biểu thị bằng từng thanh dọc, hiển thị doanh số bán hàng dưới dạng tổng doanh số bán hàng của từng thành phố. Khi di chuột, tôi cũng muốn hiển thị thông tin về tổng mục tiêu thay vì doanh số

Hình ảnh của tác giả

“Mục tiêu” theo thành phố là một thông tin có trong nguồn dữ liệu, nhưng nó là thứ không được hiển thị trong biểu đồ. mẫu di chuột lấy thông tin này ở đâu?

Cách tiếp cận mà tôi đã làm theo về cơ bản là tạo, trong khung dữ liệu được biểu đồ sử dụng, một cột mới chứa tất cả thông tin tôi muốn trình bày trong mẫu di chuột

Hình ảnh của tác giả

Plotly hovertemplate requires some html formatting: “ ” for instance means that the content will be italic; “ ” is used to remove the trace name of the datapoint. Values are formatted with the d3-format’s syntax [as explained by Plotly here]: “{:,d}” is used to include thousand’s separators [in case you’re wondering how that would work for other value types: percentages with 2 decimals can be formatted like this: “{:.2%}”; dates can be formatted like: “{x|%a, %d-%b-%Y}”.

Khi chúng tôi có văn bản di chuột trong dữ liệu, chúng tôi có thể sử dụng nó trong biểu đồ, chỉ bằng cách gán cột khung dữ liệu cho biểu đồ hovertemplate

6. Cách triển khai và chia sẻ trang tổng quan

Bảng điều khiển được tạo thông qua Dash có thể được triển khai dưới dạng ứng dụng Flask. Heroku chắc chắn là một trong những cách hiệu quả nhất để cung cấp ứng dụng trực tuyến [và miễn phí]

Hướng dẫn tôi đã sử dụng để triển khai ứng dụng này được giải thích rất rõ qua video này, bao gồm danh sách khoảng. 15 bước để tải ứng dụng này trực tuyến

7. kết luận

Plotly Dash chắc chắn là một thư viện Python thú vị và rất mạnh mẽ. Tôi đã tìm kiếm một cách nhanh chóng để tự động phân tích lặp lại và trình bày rất tốt và điều này chắc chắn phục vụ mục đích

Với kiến ​​thức về Python, một số kinh nghiệm về html & css, tôi đã có thể nhận ra trang tổng quan này trong thời gian rảnh rỗi trong vài tuần. Tôi phải nói rằng việc đưa CSS Bootstrap vào bố cục đã tạo ra sự khác biệt và chắc chắn cho phép xây dựng một “lưới” cơ bản cho phép kiểm soát rất dễ dàng mọi phần của bảng điều khiển theo cách tôi muốn