Tulip đang hiện đại hóa nền tảng phân tích của mình như thế nào với Recharts

Người dùng của chúng tôi thu thập rất nhiều dữ liệu và phân tích dữ liệu đó trong Tulip. Khi xây dựng sản phẩm Analytics của mình vào năm 2016, chúng tôi đã chọn âm mưu cho trải nghiệm biểu đồ của chúng tôi. Tuy nhiên, Plotly không hoạt động tốt với ngăn xếp công nghệ React hiện tại của chúng tôi, vì vậy nhóm của chúng tôi đã làm việc chăm chỉ để thay thế Ploty bằng nạp tiền. Bài đăng trên blog này là phần mở đầu cho một loạt bài đăng về cách chúng tôi đang sử dụng Recharts và mở rộng nó trong thư viện biểu đồ nội bộ của chúng tôi.

Rút ra thông tin chi tiết có thể hành động từ dữ liệu là một thành phần cốt lõi trong nền tảng của chúng tôi. Với Tulip, bạn có thể tạo các ứng dụng để thu thập dữ liệu trong hoạt động của mình từ cả người vận hành cũng như máy móc. Các trường hợp sử dụng rất lớn, cũng như cấu trúc và loại dữ liệu mà chúng tôi thu thập.

Để cho phép khách hàng của chúng tôi khám phá dữ liệu của họ và tích hợp thông tin chi tiết được tạo vào quy trình hàng ngày của họ, chúng tôi đã tạo các tính năng và cảnh báo thông tin chi tiết mạnh mẽ mới, cho phép khách hàng của chúng tôi tạo thông tin chi tiết từ dữ liệu là cốt lõi của Tulip Analytics.

Khi chúng tôi xây dựng sản phẩm của mình, chúng tôi đã chọn sử dụng Plotly. Kể từ đó, rất nhiều thứ đã thay đổi. Chúng tôi đã rẽ nhánh Plotly, vì chúng tôi đã cải thiện hành vi mặc định đối với nhiều lỗi, nhưng kể từ đó đã bỏ lỡ việc cập nhật bản rẽ nhánh của mình. Chúng tôi không chỉ bỏ lỡ nhiều bản cập nhật quan trọng mà còn kết hợp xử lý dữ liệu với trực quan hóa. Điều này hóa ra lại cản trở việc bổ sung các tính năng mới như Dự báo.

Để bật biểu đồ ngoài Tulip Analytics, chúng tôi muốn tạo một thư viện biểu đồ nội bộ. Khi chúng tôi tiếp cận việc đại tu sản phẩm phân tích của mình, chúng tôi quyết định bắt đầu từ cốt lõi và trích xuất biểu đồ vào thư viện biểu đồ nội bộ để có thể sử dụng lại trên sản phẩm trong tương lai, không chỉ trong nền tảng phân tích của chúng tôi.

Tách riêng quá trình xử lý dữ liệu khỏi hình ảnh trực quan, chúng tôi có thể thêm các khả năng xử lý nâng cao và lặp lại trên các biểu đồ một cách độc lập. Ngoài ra, vì các biểu đồ có thể được sử dụng trên sản phẩm, nên chúng tôi sẽ có thể cung cấp trải nghiệm người dùng nhất quán.

Sau khi nghiên cứu ban đầu, chúng tôi đã thu hẹp các ứng cử viên tiềm năng xuống còn hai tùy chọn, Visx và Recharts:

Visx là một tập hợp các nguyên hàm trực quan cấp thấp, biểu cảm dành cho React và mã nguồn mở và có các lập luận thuyết phục:

1. Giữ kích thước gói xuống. visx được chia thành nhiều gói. Bắt đầu nhỏ và chỉ sử dụng những gì bạn cần.

2. Không cố ý về mục đích. Mang theo giải pháp quản lý trạng thái, thư viện hoạt ảnh hoặc CSS-in-JS của riêng bạn. Rất có thể ứng dụng React của bạn đã có ý kiến ​​về cách hoạt ảnh, chủ đề hoặc kiểu dáng được thực hiện. visx cẩn thận không thêm một cái khác và tích hợp với tất cả chúng.

3. Không phải là một thư viện biểu đồ. Khi bạn bắt đầu sử dụng nguyên mẫu trực quan hóa, cuối cùng bạn sẽ xây dựng thư viện biểu đồ của riêng mình được tối ưu hóa cho trường hợp sử dụng của bạn. Bạn đang kiểm soát.

Trong quá trình nghiên cứu của mình, chúng tôi tin rằng Visx rất mạnh, nhưng nhận ra rằng nó cũng không dễ sử dụng. Lần đầu tiên được giới thiệu trong một bài viết trên blog, biểu đồ bên dưới là một lời nhắc nhở rằng hiện tại chúng tôi muốn có một thư viện dễ sử dụng, đó là React quen thuộc. Điều này sẽ bỏ chặn quá trình phát triển tính năng mới và chúng tôi vẫn có thể di chuyển các biểu đồ thành phần React đơn lẻ với Visx trong tương lai.

nạp tiền chúng tôi đã phát hiện ra, rất dễ sử dụng, phù hợp ngay với cơ sở mã React của chúng tôi. Hành vi mặc định của Recharts cho phép di chuyển nhanh chóng từ Plotly, bỏ chặn chúng tôi thêm các tính năng trực quan hóa nâng cao.

Hầu hết các thành phần trong Recharts cho phép chuyển một thành phần React để ghi đè hành vi kết xuất mặc định sẽ cho phép chúng tôi sử dụng thư viện thành phần hiện có của mình:

• Ghi đè Truyền thuyết:

• Ghi đè Con trỏ Tooltip:

Thay vì sử dụng Recharts trực tiếp trong sản phẩm của mình, chúng tôi gói gọn phần phụ thuộc trong thư viện biểu đồ, hiển thị một giao diện đơn giản nhắm mục tiêu các trường hợp sử dụng của chúng tôi. Trong các bài đăng trên blog tiếp theo, chúng tôi sẽ đi sâu vào các trường hợp sử dụng này và chia sẻ cách chúng tôi triển khai chúng.

quốc tế hóa

Vì sản phẩm của chúng tôi có cài đặt ngôn ngữ và bản dịch nên việc dịch nhãn của danh mục trong biểu đồ là bắt buộc. Trong Chú giải công cụ, trong Chú giải và trên các dấu kiểm của Trục, bản dịch và định dạng tùy chỉnh cần được tôn trọng.

Chuỗi thời gian

Dấu tích Recharts mặc định cho chuỗi thời gian không đáp ứng đủ yêu cầu của chúng tôi. Các dấu tích không được phân phối độc đáo và chúng tôi muốn tác động hơn nữa đến định dạng của chúng. Hơn nữa, giao diện để chọn các dấu tick trên trục không đơn giản và một số kết hợp thuộc tính dẫn đến hành vi lỗi. Thay vào đó, thư viện biểu đồ của chúng tôi sẽ tự động phát hiện loại trục phù hợp và đánh dấu các biểu đồ tương ứng.

Chú giải công cụ

Chú giải công cụ mặc định cho biểu đồ đường không xử lý tốt nhiều chuỗi thời gian. Thay vào đó, Chú giải công cụ phát triển ra khỏi biểu đồ, hiển thị quá nhiều điểm dữ liệu cùng một lúc. Thay vào đó, chúng tôi chỉ muốn hiển thị điểm dữ liệu gần con trỏ nhất, đảm bảo rằng Chú giải công cụ không vượt ra ngoài biểu đồ.

Biểu đồ nâng cao

Recharts rất đơn giản vì nó chỉ nhắm mục tiêu trực quan hóa. Chúng tôi cũng muốn cung cấp các biểu đồ nâng cao xử lý hoặc tổng hợp dữ liệu trước khi vẽ đồ thị, chẳng hạn như Biểu đồ tần suất, biểu đồ Pareto hoặc Biểu đồ kiểm soát.

Khi chúng tôi tiếp tục xây dựng một nền tảng cho người dùng của mình, chúng tôi nhận ra tầm quan trọng của cộng đồng và phát triển nguồn mở. Trong khi làm việc để tạo thư viện biểu đồ mới của chúng tôi và tiếp tục mang đến các tính năng nâng cao để trực quan hóa và xử lý dữ liệu cho Tulip, chúng tôi đảm bảo rằng chúng tôi đang cống hiến cho cộng đồng nhà phát triển Recharts. Các thành viên trong nhóm của chúng tôi là những người đóng góp trực tiếp cho Recharts, tổ chức công việc và định hình hướng đi của thư viện.

Trải nghiệm biểu đồ mới có sẵn cho tất cả khách hàng của Tulip cùng với các tính năng học máy và Analytics thú vị hơn. Truy cập thông báo blog của chúng tôi để tìm hiểu thêm →