Skip to content

Có gì mới ​

Các bản phát hành @michi-vz mới nhất, xếp mới nhất lên đầu. Cả sáu package - core, wc, react, vue, svelte, angular - đều đánh version cùng nhau (mỗi bản phát hành sẽ ghi rõ package nào lên version mới hơn). Chi tiết từng commit nằm đầy đủ trong GitHub releases.

v1.13.5 ​

Package versions: core 1.34.0 · wc 1.23.0 · angular 1.20.0 · react 1.13.5 · vue, svelte 1.9.5 · examples 1.6.1 · devtools 0.3.7 · insights 0.2.42.

  • Nhấp vào phần tử, không phải vào liên kết trong tooltip. Nút và dòng chảy của Sankey báo onNodeClick / onLinkClick, bong bóng của Biểu đồ bong bóng báo onBubbleClick, và ký hiệu của Bản đồ ký hiệu báo onSymbolClick, trong svg cũng như qua kiểm tra va chạm trên canvas; nhấp chuột vẫn ghim tooltip. Web component phát michi-vz:nodeclick, michi-vz:linkclick, michi-vz:bubbleclick và michi-vz:symbolclick.
  • Cột Sankey theo thứ tự của bạn, dòng mỏng vẫn rê chuột được. nodeSort: "input" giữ thứ tự nút và liên kết đã cho trong một cột, nên nút "Phần còn lại của thế giới" ở cuối; minLinkValue đặt độ dày tối thiểu cho dải của dòng nhỏ trong khi tooltip, context và các tổng giữ giá trị thật.
  • Kéo một bong bóng. Với draggable, bong bóng đi theo con trỏ, các bong bóng lân cận nhường chỗ, và khi thả ra trọng lực của cụm xếp mọi thứ lại. Kéo không bao giờ được tính là nhấp. Trên web component prop tên là bubbleDraggable, vì draggable thuộc về HTMLElement.
  • Ký hiệu đặt từ dữ liệu địa lý. Một mục bản đồ ký hiệu có thể bỏ lng/lat khi có đối tượng geography mang geoId (hoặc id) của nó: ký hiệu được vẽ tại trọng tâm của đối tượng đó, nên các dòng mã ISO không cần bảng tọa độ. labelFormatter đặt văn bản bên trong ký hiệu.
  • Mã ngắn trong bong bóng nhỏ. code của một mục Biểu đồ bong bóng (ví dụ mã ISO) chỉ được vẽ trong bong bóng khi nhãn đầy đủ không vừa; trước đây nó thay thế nhãn mỗi khi được đặt.

v1.13.4 ​

Phiên bản gói: core 1.33.0 · wc 1.22.0 · angular 1.19.0 · react 1.13.4 · vue, svelte 1.9.4 · examples 1.6.0 · devtools 0.3.6 · insights 0.2.41.

  • Bản đồ giữ nguyên bố cục trên mọi màn hình. Một Bản đồ ký hiệu với fit: "width" được bố trí một lần ở kích thước thiết kế và co giãn theo trang, nên các ô lục giác không di chuyển khi cửa sổ đổi kích thước.

v1.13.3 ​

Phiên bản gói: core 1.32.0 · wc 1.21.3 · angular 1.18.3 · react 1.13.3 · vue, svelte 1.9.3 · examples 1.5.0 · devtools 0.3.5 · insights 0.2.40.

  • Ô lục giác giữ đúng thứ tự với các ô lân cận. Với honeycomb.placement: "geographic", một ô của Bản đồ ký hiệu phải dời đi vì ô lưới đã có chủ sẽ sang ô trống gần vị trí thật của nó nhất, và các ô lân cận bị đọc ngược sẽ được hoán đổi. honeycomb.reserve: "all" giữ bố cục không đổi khi giá trị thay đổi, và tuỳ chọn mới tile của marker đặt ghim lên một ô dù ô nằm ở đâu.

v1.13.2 ​

Phiên bản gói: core 1.31.2 · wc 1.21.2 · angular 1.18.2 · react 1.13.2 · vue, svelte 1.9.2 · examples 1.4.2 · devtools 0.3.4 · insights 0.2.39.

  • Tooltip vẫn đọc được ở mép phải. Mọi biểu đồ giờ đặt tooltip sang bên trái con trỏ khi bên phải không đủ chỗ, của biểu đồ hoặc của cửa sổ. Treemap, biểu đồ tròn, sankey và một số biểu đồ khác trước đây không làm vậy, và tooltip gần mép còn có thể bị ép thành một cột hẹp.

v1.13.1 ​

Phiên bản gói: core 1.31.1 · wc 1.21.1 · angular 1.18.1 · react 1.13.1 · vue, svelte 1.9.1 · examples 1.4.1 · devtools 0.3.3 · insights 0.2.38.

  • Giá trị âm trong Biểu đồ cột chồng dọc. Giá trị âm giờ xếp chồng xuống dưới từ 0 còn giá trị dương xếp lên trên, giống cột xếp chồng của Highcharts; trước đây chúng được vẽ không có chiều cao. Biểu đồ chỉ có giá trị dương vẫn giữ nguyên.

v1.13.0 ​

Phiên bản gói: core 1.31.0 · wc 1.21.0 · angular 1.18.0 · react 1.13.0 · vue, svelte 1.9.0 · examples 1.4.0 · devtools 0.3.2 · insights 0.2.37.

  • Giá trị mặc định cho toàn ứng dụng. setMichiVzDefaults đặt bảng màu, phông chữ, góc bo của thanh và ô, và giao diện tooltip một lần cho cả ứng dụng, giống Highcharts.setOptions. Prop trên biểu đồ vẫn được ưu tiên. Mọi gói framework đều export hàm này, và svg, canvas, webgpu vẽ ra cùng một kết quả.
  • Góc bo ở mọi nơi. Treemap có thêm tileRadius (mặc định 1; ô canvas trước đây vuông, nay khớp với svg), và biểu đồ thanh so sánh cũng bo góc khi dùng webgpu.

v1.12.8 ​

Phiên bản gói: core 1.30.0 · wc 1.20.0 · angular 1.17.0 · react 1.12.8 · vue, svelte 1.8.8 · examples 1.3.0 · devtools 0.3.1 · insights 0.2.36.

  • Tô vùng và giá trị cuối cho Biểu đồ đường. areaFill tô vùng dưới mỗi đường bằng chính màu của nó, nhạt dần từ đỉnh vùng vẽ xuống đường nền (mặc định từ 0,5 về 0; đổi bằng topOpacity, bottomOpacity và baseline). lastPointLabel ghi giá trị mới nhất của mỗi chuỗi phía trên điểm cuối và giữ nhãn trong biểu đồ; truyền formatter để thêm đơn vị hoặc rút gọn số như "887k USD". Cả hai đều tắt theo mặc định, chạy được với svg và canvas, và vẫn có trong ảnh xuất ra. Biểu đồ renderer="webgpu" sẽ vẽ bằng canvas khi areaFill đang bật.

v1.12.7 ​

Phiên bản gói: core 1.29.0 · wc 1.19.0 · angular 1.16.0 · react 1.12.7 · vue, svelte 1.8.7 · examples 1.2.0 · devtools 0.3.0 · insights 0.2.35.

  • Đài phun (Jet d'Eau) đơn giản hơn. Mỗi tia giờ là một thân đi lên tới một chấm lớn (giá trị thường gặp), một đài phun hình chuông từ giá trị thấp nhất tới cao nhất, và các chấm nhỏ, mỗi chấm là một lần đo thật, xếp bên trong đài phun đúng độ cao của nó. Hãy cho mỗi mục low và high, hoặc samples (khi đó có thể bỏ value: lần đo ở giữa được dùng), và forecast: true cho một dự báo, vẽ nét đứt với chấm lớn rỗng. Trang biểu đồ mở đầu bằng một bảng cách đọc và 16 ví dụ đời thường: đi làm, thời gian giao hàng, giá cả, giấc ngủ.
  • Đường tham chiếu tự đếm giúp bạn. referenceLines vẽ một đường như "Thời gian tôi dành ra: 45 phút" và, với goodSide, ghi "17 trên 20 trong vòng 45 phút" dưới mỗi tia. showValueLabels ghi giá trị thường gặp và hai đầu dưới mỗi tia, bằng từ ngữ của bạn (endLabels, labels, sampleWord); yAxisTitle cho biết chiều nào là tốt hơn; readingGuide thêm một dòng chú giải chỉ nêu những dấu thực sự được vẽ. showRange và showSamples tắt đài phun và các chấm nhỏ, còn drift làm đỉnh nghiêng như đài phun Genève trong gió (mặc định tắt). Di chuột, ghim và phím Escape hoạt động giống nhau trên svg, canvas và WebGPU, và màu sắc giữ nguyên khi tắt một chuỗi.
  • Nâng cấp đài phun từ 1.28. style, frothLayers, bloomExponent, stemFraction, showDroplets, showMist cùng density và lean của từng mục bị bỏ qua, mỗi cái kèm một cảnh báo ignored-option. Trong TypeScript, value và spread giờ là tùy chọn, và tooltipFormatter nhận mục kèm value đã tính. Đài phun giờ hỗ trợ isLoading, isNodata và noDataLabel, nên một dataSet rỗng sẽ hiện lớp phủ không có dữ liệu. Host React và Vue của đài phun mặc định là 900 × 480.
  • seek tìm kỳ trước. timeline().seek(2021) giờ tới kỳ 2021 dù ngày trong dữ liệu là số hay chuỗi; số chỉ được hiểu là vị trí khi không có kỳ nào khớp. Code nào truyền một vị trí trùng với giá trị của một kỳ, như seek(2) trên các tháng 1 tới 12, giờ sẽ tới kỳ đó: hãy dùng seekIndex(i) mới để đi theo vị trí, giống thanh tua có sẵn.
  • Ngày trên trục ở phía tây UTC. Nhãn năm và tháng trên trục không còn sớm một năm hay một tháng với người xem ở châu Mỹ, trên mọi biểu đồ có trục ngày.
  • DevTools thấy được nhiều hơn. <MichiVzDevtools /> giờ tìm thấy các biểu đồ mount trong cùng một commit React và các web component trên trang. Có thêm tab Props, bảng Items với nút Highlight và Disable dựng từ chính dữ liệu của từng biểu đồ, trình kiểm tra SVG trong tab Hit-test, và cảnh báo khi highlightItems hoặc disabledItems dội lại hơn 10 lần mỗi giây.

v1.12.6 ​

Phiên bản gói: core 1.28.0 · wc 1.18.0 · angular 1.15.6 · react 1.12.6 · vue, svelte 1.8.6 · examples 1.1.19 · devtools, insights 0.2.34.

  • Vòng ngoài tròn số cho Biểu đồ radar. niceMaxValue làm tròn vòng ngoài lên một số tròn khi không đặt maxValue: mốc "đẹp" cuối cùng của [0, giá trị lớn nhất], theo cùng các bước 1/2/5 × 10ⁿ mà trục d3 dùng, nên nhãn vòng ngoài là 80 thay vì 73. true dùng rings làm số mốc, còn một số sẽ đặt số mốc đó. maxValue đặt tường minh vẫn được ưu tiên. Phép làm tròn cũng được export là niceRadarMax(dataMax, tickCount), cho ai muốn vòng cố định khi ẩn chuỗi trong chú giải. @michi-vz/wc nhận nó dưới dạng property và @michi-vz/angular chuyển tiếp nó.
  • Bảng màu có tên cho Bản đồ phân cấp màu và nơi khác.sequentialScheme(name, count) trả về các bảng màu tuần tự một sắc độ của ColorBrewer - blues, greens, greys, oranges, purples, reds - từ 3 đến 9 màu (có giới hạn), đúng các danh sách mà d3-scale-chromatic cung cấp, nên colorScale.range không còn cần phụ thuộc d3. SEQUENTIAL_SCHEME_NAMES liệt kê các tên.

v1.12.5 ​

Phiên bản gói: core 1.27.0 · wc 1.17.0 · angular 1.15.5 · react 1.12.5 · vue, svelte 1.8.5 · examples 1.1.18 · devtools, insights 0.2.33.

  • Vùng chồng lấn cho Biểu đồ vùng. stacked: false vẽ mỗi chuỗi từ 0 đến giá trị của chính nó thay vì chồng lên các chuỗi bên dưới: phần tô trong mờ cùng một đường dọc theo cạnh trên, trên svg, canvas và WebGPU. Dùng cho các chuỗi không cộng dồn được
    • tỷ trọng, tỷ lệ, chỉ số - khi cạnh trên của một biểu đồ chồng sẽ hiện một tổng không có ý nghĩa. Trục y chạy tới giá trị đơn lẻ lớn nhất, vùng lớn được vẽ trước để vùng nhỏ vẫn nhìn thấy, và khi rê chuột, chuỗi có cạnh trên gần con trỏ nhất được chọn. stackOffset: "expand" bị bỏ qua ở chế độ này và được báo bằng cảnh báo dữ liệu ignored-option. Mặc định vẫn là true. @michi-vz/wc nhận nó dưới dạng property và @michi-vz/angular chuyển tiếp nó.
  • Làm nổi bật khi rê chuột cho Sankey. Với hoverHighlight, rê chuột lên một nút sẽ làm nổi bật nút đó, mọi luồng đi vào hoặc đi ra khỏi nó và các nút ở đầu kia; rê chuột lên một luồng sẽ làm nổi bật luồng đó và hai nút của nó. Mọi thứ còn lại mờ đi đúng mức mà highlightItems dùng. Trên svg, các phần tử được cập nhật tại chỗ nên phần tử dưới con trỏ không bao giờ bị thay thế. Rời chuột sẽ khôi phục trạng thái bình thường, và tooltip đã ghim giữ phần nổi bật cho tới khi được bỏ ghim. Mặc định tắt. @michi-vz/wc nhận thuộc tính hover-highlight và @michi-vz/angular chuyển tiếp prop này. Với trình kết xuất WebGPU, rê chuột lên một luồng giờ cũng hiện tooltip của nó.
  • Các liên kết của Cây tỏa tròn trên svg là nét mảnh màu xám, như trên canvas. Các path liên kết không đặt thuộc tính fill, nên trình duyệt tô đen từng nhánh và cây hiện thành những hình nêm tối màu.

v1.12.4 ​

Phiên bản gói: core 1.26.0 · wc 1.16.0 · angular 1.15.4 · react 1.12.4 · vue, svelte 1.8.4 · examples 1.1.17 · devtools, insights 0.2.32.

  • Bán kính góc cho Biểu đồ cột so sánh và Biểu đồ cột dọc so sánh. barRadius đặt bán kính góc của mọi cột, tính bằng px. Mặc định vẫn là 5, nên không có gì thay đổi nếu bạn không đặt; 0 cho góc vuông, 2-4 cho góc gần vuông. Điều này quan trọng trên màn hình nhỏ, nơi nửa dải của layout grouped và các cột hẹp chỉ dày vài px và bán kính 5px biến mỗi cột thành hình viên thuốc. Bán kính được vẽ không bao giờ vượt quá một nửa bề rộng hoặc chiều cao của cột, và svg giờ giới hạn đúng như canvas - trước đây svg để trình duyệt giới hạn rx và ry riêng rẽ, khiến các cột mỏng hơn 10px có góc hơi elip. Trình kết xuất thử nghiệm WebGPU vẫn vẽ góc vuông. @michi-vz/wc nhận thuộc tính bar-radius và @michi-vz/angular chuyển tiếp prop này.

v1.12.3 ​

Phiên bản gói: core 1.25.0 · wc 1.15.0 · angular 1.15.3 · react 1.12.3 · vue, svelte 1.8.3 · examples 1.1.16 · devtools, insights 0.2.31.

  • Biểu đồ vòng cung: chú giải tự trả lời.annotationTooltipFormatter cho điểm đánh dấu giá trị, từng vạch tham chiếu và từng nhãn đầu mút phần hiển thị riêng khi rê chuột, nhờ đó nhãn trên cung vẫn giữ được ngắn gọn. Rê chuột lên một chú giải không đụng đến vòng đang hoạt động - phần hiển thị trung tâm không dịch chuyển - và trả về null thì không hiển thị gì cho chú giải đó. Nó đọc hình học ở cấp phần tử chứa thay vì DOM, nên hoạt động giống nhau ở trình kết xuất svg, canvas và WebGPU, và vòng không có giá trị vẫn giữ vạch cùng nhãn đầu mút của thang đo rê chuột được. @michi-vz/wc và @michi-vz/angular chuyển tiếp thuộc tính này.

v1.12.2 ​

Phiên bản gói: core 1.24.0 · wc 1.14.3 · angular 1.15.2 · react 1.12.2 · vue, svelte 1.8.2 · examples 1.1.15 · devtools, insights 0.2.30.

  • Biểu đồ vòng cung: định vị trong một khoảng. Năm thuộc tính bổ sung: min cho thang đo bắt đầu từ một giá trị khác 0 (giá trị vòng và vạch được kẹp vào [min, max] kèm cảnh báo dữ liệu), valueMarker ghim giá trị của từng vòng lên cung bằng một vòng tròn viền trắng và một vạch hướng tâm, ticks thêm vạch tham chiếu trên vòng ngoài cùng với nhãn và giá trị do bên dùng định dạng (valueFormatter chỉ là phương án dự phòng), endLabels đặt tên hai đầu của một cung không trọn vòng, và sweepFit co giãn biểu đồ không trọn vòng vừa khung bao của cung và neo phần hiển thị trung tâm vào bên trong cung. Các chú giải là svg ở mọi trình kết xuất - một lớp phủ phía trên lớp vẽ ở chế độ canvas và WebGPU - nên CSS của bên dùng chạm tới chúng ở mọi nơi và xuất svg và PNG mang theo chúng. Biểu đồ nay bỏ qua khung dựng theo quy tắc chung "đang tải mà rỗng" như các biểu đồ khác, và ngữ cảnh cung cấp min. @michi-vz/wc và @michi-vz/angular chuyển tiếp các thuộc tính; @michi-vz/angular/gauge-chart xuất lại GaugeTick, GaugeEndLabel và GaugeValueMarker.

v1.12.1 ​

Phiên bản các gói: core 1.23.0 · wc 1.14.2 · angular 1.15.1 · react 1.12.1 · vue, svelte 1.8.1 · examples 1.1.14 · devtools, insights 0.2.29.

  • sweepAngle và gradient trên Biểu đồ vòng cung. sweepAngle (đơn vị độ, theo chiều kim đồng hồ từ startAngle, mặc định 360) thu hẹp biểu đồ từ một vòng tròn đầy đủ thành một cung một phần - startAngle: -90, sweepAngle: 180 cho ra nửa biểu đồ kinh điển. Cả rãnh nền lẫn cung giá trị của mỗi vòng đều quét theo cùng góc quét đó, và giá trị của một vòng được đo theo phạm vi đó thay vì cả vòng tròn; giá trị chưa đặt, bằng 0, hoặc âm sẽ quay về vòng tròn đầy đủ 360°, không phải một biểu đồ rỗng. gradient (một string[] ở cấp biểu đồ, hoặc theo từng vòng trên dữ liệu vòng, giá trị này sẽ được ưu tiên) tô cung của một vòng bằng dải màu chuyển sắc tuyến tính nhiều điểm dừng, neo theo toàn bộ góc quét thay vì phần được vẽ, nên một màu nhất định luôn ứng với cùng một giá trị. Cả ba bộ dựng đều tuân theo hai prop này, và @michi-vz/wc cùng @michi-vz/angular đều chuyển tiếp chúng.

v1.12.0 ​

Phiên bản các gói: core 1.22.0 · wc 1.14.1 · angular 1.15.0 · react 1.12.0 · vue, svelte 1.8.0 · examples 1.1.13 · devtools, insights 0.2.28.

  • Import theo sub-path cho từng biểu đồ với @michi-vz/angular, @michi-vz/react, @michi-vz/vue và @michi-vz/svelte, giống hệt @michi-vz/wc: import @michi-vz/<package>/<khóa-biểu-đồ> (dạng kebab-case) để chỉ lấy đúng một biểu đồ thay vì cả barrel, ví dụ @michi-vz/angular/radar-chart. Barrel trần vẫn hoạt động và vẫn đăng ký mọi biểu đồ - đây chỉ là phần bổ sung thêm. Xem Import một biểu đồ duy nhất.
  • Hover trên Biểu đồ radar: cực đang hover giờ được xác định trên cả bộ dựng SVG, giống hệt canvas và WebGPU: tooltipFormatter nhận thêm date (nhãn trục của cực đang hover) trên mọi bộ dựng, hover bám theo con trỏ thay vì chỉ bắn một lần lúc chạm vào, và các chuỗi bị làm mờ không còn được hit-test khi hover nữa. Cẩn thận nếu code của bạn đưa onHighlightItem ngược trở lại highlightItems: khi một chuỗi nằm lồng bên trong chuỗi khác về mặt hình học (thường gặp là một năm trước đó, thấp hơn trên mọi trục), hover vào chuỗi bên ngoài sẽ làm mờ chuỗi bên trong, và vì chuỗi bị làm mờ không được hit-test, chuỗi bên trong sẽ không thể hover được cho tới khi con trỏ rời hẳn khỏi chuỗi bên ngoài.

v1.11.12 ​

Phiên bản các gói: core 1.21.0 · wc, angular 1.14.0 · react 1.11.12 · vue, svelte 1.7.12 · examples 1.1.12 · devtools, insights 0.2.27.

  • Ô lục giác trên Bản đồ ký hiệu: shape: "hexagon" cùng positionMode: "honeycomb" biến bản đồ ký hiệu thành bản đồ ô - các lục giác bằng nhau bám vào lưới lục giác (giải quyết va chạm tất định, cảnh báo layout-overflow), giá trị thể hiện qua colorScale với noDataColor cho mục không có value, dịch chuyển offset theo mục, ghim trang trí markers, và phép chiếu geoNaturalEarth1. Ngữ cảnh báo cáo x/y, hasValue, noValueCount, shape, positionMode, colorScale và markers.

v1.11.11 ​

Phiên bản các gói: core 1.20.1 · wc 1.13.1 · angular 1.13.0 · react 1.11.11 · vue, svelte 1.7.11 · examples 1.1.11 · devtools, insights 0.2.26.

  • Tooltip dùng chung trên Biểu đồ đường SVG: sharedTooltip (một tooltip liệt kê mọi chuỗi tại năm đang trỏ, kèm ghim khi nhấp) giờ hoạt động cả trên renderer SVG mặc định; trước đây chỉ áp dụng cho canvas/WebGPU nên biểu đồ SVG âm thầm dùng tooltip theo từng đường.
  • Kiểu Angular: @michi-vz/angular xuất lại DataPoint, LineDataItem, Margin, Filter, CurveType, XaxisDataType, MouseLineConfig và SinglePointLineConfig.

v1.11.10 ​

Phiên bản các gói: core 1.20.0 · wc 1.13.0 · angular 1.12.9 · react 1.11.10 · vue, svelte 1.7.10 · examples 1.1.10 · devtools, insights 0.2.25.

  • Nhấp vào ô trên Treemap: callback mới onTileClick(leaf, event) báo ô lá được nhấp (cùng ngữ cảnh mà trình định dạng tooltip nhận) trên các renderer SVG, canvas và WebGPU; web component phát sự kiện michi-vz:tileclick. Nhấp vẫn ghim tooltip.

v1.11.9 ​

Phiên bản các gói: core 1.19.1 · wc, angular 1.12.8 · react 1.11.9 · vue, svelte 1.7.9 · examples 1.1.9 · devtools, insights 0.2.24.

  • Cầu nối dữ liệu thiếu dạng cong trên Biểu đồ đường: các đoạn nét đứt cho khoảng trống dữ liệu nay đi theo đúng đường cong của phần nét liền xung quanh, thay vì hiển thị thành đoạn thẳng.
  • Đường chữ thập nằm trên các mark canvas: với biểu đồ đường và biểu đồ vùng vẽ bằng canvas/WebGPU, đường hover luôn hiển thị phía trên các mark đã vẽ.

v1.11.8 ​

Phiên bản các gói: core 1.19.0 · wc, angular 1.12.7 · react 1.11.8 · vue, svelte 1.7.8 · examples 1.1.8 · devtools, insights 0.2.23.

  • Tiêu đề chú giải kích thước nhiều dòng cho Biểu đồ phân tán: dScaleLegend.title nay cũng nhận một mảng chuỗi, hiển thị thành các dòng xếp chồng phía trên các cung kích thước: tiêu đề dịch dài sẽ xuống dòng thay vì tràn qua mép phải biểu đồ.

v1.11.7 ​

Phiên bản các gói: core 1.18.0 · wc, angular 1.12.6 · react 1.11.7 · vue, svelte 1.7.7 · examples 1.1.7 · devtools, insights 0.2.22.

  • Không còn trục ở trạng thái rỗng: biểu đồ bỏ qua trục và các điểm vẽ khi đang tải mà chưa có gì để vẽ, còn Biểu đồ khoảng cách và Biểu đồ phân tán nay tôn trọng isLoading/isNodata (overlay + data-mv-state) thay vì vẽ một trục co sụp nằm giữa khi dữ liệu rỗng. Refetch khi dữ liệu vẫn còn trên màn hình sẽ giữ nguyên trục. Export mới của core: isEmptyDataSet, shouldSkipScaffold.

v1.11.6 ​

Phiên bản các gói: core 1.17.0 · wc, angular 1.12.5 · react 1.11.6 · vue, svelte 1.7.6 · examples 1.1.6 · devtools, insights 0.2.21.

  • yAxisDomain một phần trên Biểu đồ đường: mỗi cận nay có thể là null để riêng cận đó tiếp tục được suy ra từ dữ liệu. [0, null] ghim đường cơ sở ở 0 trong khi giá trị lớn nhất vẫn bám theo các chuỗi đang hiển thị - nó vẫn co giãn theo thao tác bật/tắt chú giải và các lát cắt Top/Bottom-N, đúng như miền suy ra hoàn toàn. Cận suy ra không bao giờ vượt qua cận đã ghim (dữ liệu toàn số âm với [0, null] cho [0, 0] thay vì một trục đảo ngược). Truyền [min, max] bằng số hoạt động như trước.

v1.11.5 ​

Phiên bản các gói: core 1.16.2 · wc, angular 1.12.4 · react 1.11.5 · vue, svelte 1.7.5 · examples 1.1.5 · devtools, insights 0.2.20.

  • Các mục chú giải bị tắt giữ nguyên vị trí trên biểu đồ phân tán, biểu đồ quả tạ và biểu đồ vùng. Chú giải của chúng trước đây được suy ra từ dữ liệu đã lọc: nhãn bị nhấp (bị tắt) biến mất khỏi legendData và cơ chế dự phòng phía consumer thêm lại nó ở cuối chú giải. Cả ba giờ giữ nhãn được đánh dấu disabled: true tại vị trí ban đầu, cùng hợp đồng với chú giải của biểu đồ cột chồng (core 1.5.6) và thanh so sánh (core 1.12.2). Ngữ cảnh biểu đồ phân tán cũng có thêm tóm tắt series theo nhãn (label/code/last) dựng từ các hàng trước khi lọc, nên nhãn bị ẩn vẫn giữ giá trị mới nhất cho việc xếp hạng chú giải phía consumer.
  • contextSignature vẫn có giới hạn với trường series mới: nó được đưa qua cùng hàm băm như hàng và chú giải thay vì tuần tự hóa, nên signature của biểu đồ phân tán 50k điểm vẫn chỉ vài trăm byte.

v1.11.4 ​

Phiên bản các gói: core 1.16.1 · wc, angular 1.12.3 · react 1.11.4 · vue, svelte 1.7.4 · examples 1.1.4 · devtools, insights 0.2.19.

  • Xếp hạng Top/Bottom bỏ qua series không có dữ liệu tại ngày neo. Trên biểu đồ đường, series không có giá trị hữu hạn tại ngày neo filter.date giờ xếp CUỐI trong cả hai chiều sắp xếp. Sentinel cũ chỉ xếp cuối dưới desc — dưới asc (Bottom-N) nó xếp đầu, khiến Bottom-N lấp đầy các vị trí bằng những series không có dữ liệu ở năm neo thay vì các giá trị thực thấp nhất. Hàng tồn tại tại ngày neo nhưng mang giá trị null/NaN cũng được coi là thiếu.
  • Vạch chia trục ngày không còn vượt quá các đường đã vẽ. Các vạch chia ứng viên của biểu đồ đường (và tập "hiện diện" của fillPeriodTicks) giờ lấy từ đúng tập đã xếp hạng/cắt lát/lọc disabledItems mà miền x sử dụng. Trước đây, một series trong pool bị loại khỏi xếp hạng nhưng mang kỳ muộn hơn mọi series được vẽ sẽ vẽ một vạch chia vượt mép biểu đồ, để lại một đoạn trục trống sau đường cuối cùng.

v1.11.3 ​

Phiên bản các gói: core 1.16.0 · wc, angular 1.12.2 · react 1.11.3 · vue, svelte 1.7.3 · examples 1.1.3 · devtools, insights 0.2.18.

  • Ẩn một series đã xếp hạng không còn bị lấp chỗ. Trên biểu đồ đường, thanh ngang so sánh và thanh dọc so sánh, filter Top/Bottom giờ xếp hạng và cắt lát trên TOÀN BỘ tập dữ liệu trước khi loại bỏ disabledItems — nên ẩn một trong N series đầu qua legend sẽ vẽ N−1 series thay vì để mục thứ (N+1) chen vào chỗ trống (thứ tự mà biểu đồ gap và lát cắt nhóm của thanh chồng vẫn luôn dùng). Khi filter đang bật, legendData giữ series bị ẩn dưới dạng hàng làm mờ và renderedRankedIds vẫn liệt kê code của nó, nhờ vậy UI chọn lọc phía consumer phản chiếu tập được render vẫn ổn định qua các lần bật/tắt hiển thị. Không có filter thì hành vi không đổi.

v1.11.2 ​

Phiên bản gói: core 1.15.0 · wc, angular 1.12.1 · react 1.11.2 · vue, svelte 1.7.2 · examples 1.1.2 · devtools, insights 0.2.17.

  • Context giờ cho biết chính xác những gì đang hiển thị. Trường mới renderedRankedIds trên ChartContext dùng chung: mã (code) của các chuỗi thực sự được vẽ, theo thứ tự hiển thị (sau disabledItems và bước sắp xếp/cắt của filter Top/Bottom), được phát ra bởi các builder của Biểu đồ đường, Biểu đồ cột chồng dọc, Biểu đồ cột so sánh, Biểu đồ cột dọc so sánh và Biểu đồ khoảng cách. code theo từng chuỗi cũng được đưa lên context của stack và comparable-bar, và mã dạng số không còn bị biểu đồ cột chồng bỏ qua. Cho phép giao diện chọn lọc bám theo một biểu đồ đã xếp hạng (mẫu "Top-N chips").

v1.11.1 ​

Phiên bản gói: core 1.14.0 · wc, angular 1.12.0 · react 1.11.1 · vue, svelte 1.7.1 · examples 1.1.1 · devtools, insights 0.2.16.

  • Biểu đồ cột chồng nay có dạng ngang. Prop bổ sung layout: "horizontal": các hàng trên trục y dạng dải (nhãn HTML dùng chung có ellipsis nên tên danh mục dài vẫn đọc được) với các đoạn chồng lớn dần sang phải từ x(0). Hợp đồng dữ liệu, khe màu, chú giải, tooltip và đánh dấu thiếu dữ liệu giống hệt bố cục dọc, và các prop xAxis* vẫn định dạng trục danh mục (yAxis*/yTicks trục giá trị) ở cả hai hướng. Nhãn viết tắt, xAxisMode và timeline vẫn chỉ dành cho bố cục dọc.

v1.11.0 ​

Phiên bản gói: react, wc, angular 1.11.0 · core 1.13.0 · vue, svelte 1.7.0 · examples 1.1.0 · devtools, insights 0.2.15.

  • Biểu đồ mới: Biểu đồ vòng cung. Biểu đồ vòng cung đồng tâm - mỗi mục một vòng, từ ngoài vào trong, mỗi vòng quét value/max của một vòng tròn đầy đủ trên rãnh nền. Di chuột kích hoạt một vòng và điều khiển phần hiển thị trung tâm tích hợp; giá trị null chỉ vẽ rãnh nền. Độ dày/khoảng cách vòng, màu và độ mờ theo từng vòng, góc bắt đầu, đầu bo tròn và nội dung trung tâm đều cấu hình được, với các trình kết xuất svg, canvas và webgpu dùng chung hợp đồng đầu dò màu chuẩn.
  • Kéo để phóng to trên biểu đồ đường. Bật prop zoom: kéo một vùng ngang trong biểu đồ để phóng to miền x (khung chọn hiển thị trước), kèm nút "Reset zoom" tích hợp, minRange, callback onZoomChange và resetZoom() / setZoomDomain() để điều khiển bằng mã. Các nét vẽ được cắt theo vùng biểu đồ; trục, đường ngắm và tooltip theo miền đã phóng to.
  • Xuất PNG có thể kèm tiêu đề và dòng nguồn. chartToPngDataUrl nhận các khối chữ title và caption (tự xuống dòng, căn chỉnh/cỡ/màu cấu hình được) ghép phía trên và dưới biểu đồ.

v1.10.4 ​

Phiên bản các package: react, wc, angular 1.10.4 · core 1.12.2 · vue, svelte 1.6.6 · devtools, insights 0.2.14.

  • Chú giải của biểu đồ cột so sánh không còn bị xáo trộn khi tắt một mục. Trên Biểu đồ cột so sánh và Biểu đồ cột dọc so sánh, một nhãn nằm trong disabledItems trước đây biến mất hoàn toàn khỏi legendData được phát ra, nên các chú giải dựng từ đó lại thêm mục ấy vào chỗ khác - gây xáo trộn thứ tự thấy rõ (và có thể đổi màu) mỗi lần bấm vào chú giải. Giờ đây nhãn bị tắt vẫn nằm trong legendData, được gắn cờ disabled: true, đúng vị trí ban đầu; bản thân các cột vẫn bị loại bỏ. Điều này khớp với hợp đồng mà biểu đồ cột chồng dọc đã có từ core 1.5.6.

v1.10.3 ​

Phiên bản các package: react, wc, angular 1.10.3 · core 1.12.1 · vue, svelte 1.6.5 · devtools, insights 0.2.13.

  • Không còn tooltip "Chart" lạc lõng. Trước đây mọi biểu đồ đều chèn một thẻ svg <title> với giá trị dự phòng "Chart" cho SEO, mà trình duyệt lại hiển thị <title> svg ở cấp gốc như một tooltip native khi rê chuột - nên rê vào bất kỳ đâu trên bất kỳ biểu đồ nào cũng bật lên nhãn "Chart" nhỏ. Giờ phần tử này chỉ được chèn khi bạn tự đặt prop title; crawler vẫn giữ metadata JSON-LD, và trình đọc màn hình không bị ảnh hưởng (svg vẫn aria-hidden, bảng a11y ẩn vẫn là đại diện của chúng).
  • Tooltip của Biểu đồ đường nhận lại tên chuỗi. Điểm dữ liệu truyền vào tooltipFormatter lại mang label của chuỗi ({ ...point, label }), đúng như thư viện trước monorepo. Các tooltip in tên chuỗi từ point.label đã hiển thị dòng đó trống rỗng kể từ đợt di trú.

v1.10.2 ​

Phiên bản các package: react, wc, angular 1.10.2 · core 1.12.0 · vue, svelte 1.6.4 · devtools, insights 0.2.12.

  • Trục thời gian dày đặc giờ nghiêng nhãn thay vì bỏ bớt phần lớn. Mọi biểu đồ dùng trục dải (Biểu đồ cột chồng dọc, Biểu đồ cột dọc so sánh, Đài phun, Biểu đồ dải, Biểu đồ phân tán) trước đây bỏ hẳn việc xoay khi dải hẹp lại và đặt nằm ngang một tập nhãn đã lược bớt. Nhãn nghiêng chỉ cần khoảng trống theo đường chéo, khoảng một phần tư so với nhãn nằm ngang, nên giờ biểu đồ xoay một tập đã lược và giữ được nhiều hơn khoảng ba lần số nhãn. Chỉ xoay khi việc đó thực sự giúp hiện thêm nhãn. xAxisMode: "horizontal" vẫn buộc nhãn nằm ngang.
  • Đã sửa: các nhãn sau khi lược có thể bị vẽ đè lên nhau. Cơ chế lược chỉ bảo đảm giữ BAO NHIÊU nhãn chứ không bảo đảm khoảng cách, nên có thể chọn hai dải liền kề. Giờ đây độ chồng lấn được đo chính xác - theo bề rộng riêng của từng cặp khi nằm ngang, theo khoảng cách vuông góc khi nghiêng - và nhãn bị va chạm sẽ được bỏ. Nhãn đầu và nhãn cuối luôn được giữ lại để trục vẫn thể hiện đủ khoảng dữ liệu.
  • Danh mục dạng YYYYMM bước theo lịch. Trục theo tháng rơi vào các mốc thật (mỗi tháng 1, hoặc 1/7, hoặc 1/4/7/10) thay vì rơi vào đâu tùy phép làm tròn thập phân. Chính phép làm tròn đó gây ra lỗi chồng lấn ở trên: nó vô nghĩa với trường tháng theo hệ cơ số 12 và đặt hai vạch ở hai bên mỗi lần chuyển năm. Năm bốn chữ số giữ nguyên vì các mốc thập niên tròn vốn đã phù hợp.

v1.10.1 ​

Phiên bản các package: react, wc, angular 1.10.1 · core 1.11.1 · vue, svelte 1.6.3 · devtools, insights 0.2.11.

  • Đã sửa: ở Biểu đồ cột chồng dọc, nhãn ngày trên trục x không còn đè lên chữ viết tắt của các chuỗi dữ liệu. Khi một DataSet có seriesKeyAbbreviation - chữ cái ngắn vẽ dưới mỗi cột nhóm - nhãn trục giờ bắt đầu bên dưới hàng đó thay vì dùng chung. Lỗi lộ ra thành chữ chồng lên nhau mỗi khi trục quá dày khiến nhãn phải nghiêng -45°, rõ nhất với ngày theo tháng MM-YYYY. Biểu đồ cũng chừa thêm phần lề dưới tương ứng để nhãn nghiêng vẫn đủ chỗ. Các biểu đồ có DataSet không kèm chữ viết tắt giữ nguyên như trước.

v1.10.0 ​

Phiên bản các package: react, wc, angular 1.10.0 · core 1.11.0 · vue, svelte 1.6.2 · devtools, insights 0.2.10.

  • Xem dữ liệu chạy theo năm, trên mọi biểu đồ. Prop opt-in timeline mới thêm nút play + thanh tua năm có sẵn (kèm controller headless chart.timeline()) cho cả 21 biểu đồ. Nhóm trục thời gian như Đường và Vùng vẽ dần đến năm đang active rồi trượt mượt khi chạy; nhóm snapshot như Tròn, Gap và Phân tán hiển thị từng giai đoạn một với giá trị trượt giữa các năm; Treemap và Cây tỏa tròn tween cả cây từ các node gốc gắn date; Sankey chạy theo các link gắn date; còn Radar và Bar-Bell dùng field period mới trên từng dòng. Mặc định tắt ở mọi nơi, và mỗi trang biểu đồ đều có demo trực tiếp.
  • Hiệu ứng vẽ dần trên mọi biểu đồ. Prop opt-in progressiveDraw quét các mark hiện dần từ trái sang phải khi mount - riêng Đường có nhãn bám theo ngọn từng đường rồi dừng cạnh điểm cuối. Gọi replay() để chạy lại khi cần.
  • Cả hai tính năng chạy trên renderer svg và canvas, tôn trọng prefers-reduced-motion (biểu đồ hiển thị đầy đủ ngay lập tức), và chủ ý không hoạt động trên renderer webgpu thử nghiệm.
  • Đã sửa: re-render giữa lúc animation đang chạy giờ sẽ tiếp tục từ vị trí hiện tại thay vì nhảy thẳng về cuối - các wrapper framework gọi update ngay sau khi mount, trước đây khiến mọi autoplay lúc mount bị hủy.
  • Đã sửa: URL CDN rút gọn của bundle web component (cdn.jsdelivr.net/npm/@michi-vz/wc) giờ trỏ đúng vào bundle trình duyệt độc lập, nên chỉ cần <script type="module"> là chạy được, không phải ghi đủ đường dẫn /dist/....

v1.9.0 ​

Phiên bản các package: react 1.9.0 · core 1.10.0 · wc, angular 1.9.1 · vue, svelte 1.6.1 · devtools, insights 0.2.9.

  • Tải mọi biểu đồ về dưới dạng ảnh hoặc CSV. Core có thêm bộ helper export mới: chartContextToCsv(ctx) chuyển getContext().a11yTable của bất kỳ biểu đồ nào (bảng dữ liệu đầy đủ, không bao giờ bị cắt bớt, mà biểu đồ nào cũng mang theo) thành CSV chuẩn RFC 4180 mà không cần viết code riêng cho từng biểu đồ; còn chartToStyledSvgString / chartToStyledSvgDataUri / chartToPngDataUrl dựng lại một file SVG hoặc PNG độc lập, giữ nguyên style. Trước đây ảnh export ra thường mất lưới, nhãn trục và đường zero, vì CSS của biểu đồ nằm trong adoptedStyleSheets, vô hình với serializer thông thường; helper PNG còn ghép các mark của renderer canvas lên phần trục SVG. Handle React có thêm getElement() để đưa đúng element cho các helper thay vì phải query DOM toàn cục dễ vỡ.
  • Một tooltip cho tất cả các chuỗi. sharedTooltip của LineChart (kèm sharedTooltipFormatter tuỳ chọn) hiển thị một tooltip duy nhất liệt kê giá trị của mọi chuỗi tại năm gần con trỏ nhất, đi cùng crosshair, thay vì chỉ chuỗi gần nhất. Web component và wrapper Angular đều truyền prop này. Xem Line.
  • Bảng a11y giờ chứa chính dữ liệu. a11yTable của LineChart trở thành bảng rộng theo từng mốc thời gian: mỗi giá trị x một cột (nhãn giống trục), mỗi chuỗi một hàng, chỗ trống ghi -. Nhờ vậy file CSV export từ getContext() có đủ mọi điểm đã vẽ. Thống kê theo chuỗi vẫn nằm ở context.series; đây là thay đổi hành vi duy nhất của bản này.
  • Trục của biểu đồ Gap ngang hàng với các biểu đồ khác.Gap có thêm showZeroLineForXAxis (đường dọc liền nét tại x=0, giờ vẽ độc lập với showGrid) và maxBarHeight (biểu đồ chỉ 1-2 hàng không còn kéo giãn thanh ra toàn bộ chiều cao); trục giá trị số của Gap và Comparable nghiêng nhãn -45° trước khi thưa bớt khi quá dày, như trục ngày tháng vẫn làm.
  • Sửa nhãn trên các biểu đồ dạng băng. Nhãn hàng giới hạn ở hai dòng kèm dấu ba chấm thay vì đè lên hàng bên cạnh; nhãn nhóm dài sẽ xoay nghiêng thay vì bị thưa bớt oan; nhãn của Bubble sát mép phải lật sang bên trái điểm thay vì bị cắt; và Comparable Vertical Bar vẽ thanh con ngắn hơn lên trên (hàng nào có giá trị "trước" nhỏ hơn thì trước đây thanh đó bị thanh cao che khuất hoàn toàn), mũi tên thay đổi cũng được căn giữa phía trên mỗi cặp.

v1.8.1 ​

Phiên bản các package: react 1.8.1 · core, wc, angular 1.9.0 · vue, svelte 1.6.0 · devtools, insights 0.2.8.

  • Bốn biểu đồ mới: atlas tăng lên 21. Comparable Vertical Bar (hai cột chồng nhau theo từng nhóm, cột "trước" kẻ sọc nằm sau cột "sau" đặc, kèm mũi tên thay đổi phía trên mỗi cặp), cùng họ biểu đồ địa lý đầu tiên của thư viện: Choropleth Map (dùng GeoJSON của riêng bạn, 13 phép chiếu, tô màu theo ngưỡng hoặc theo nhóm), Symbol Map (bong bóng theo lng/lat với nền đất liền mờ tùy chọn) và Radial Tree (dendrogram dạng tròn, vòng tròn có kích thước ở cả cấp nhóm lẫn cấp lá).
  • Trục log trên LineChart. yAxisScale: "log" cho dữ liệu trải nhiều bậc độ lớn: giá trị không dương được coi là thiếu (kèm cảnh báo dữ liệu) và nhãn quá dày sẽ rút gọn về lũy thừa của mười. Xem Line.
  • Xếp chồng 100% thật sự trên AreaChart. stackOffset: "expand" biến mọi biểu đồ vùng xếp chồng thành tỷ trọng trên tổng: xếp chồng d3 thật, không phải mẹo hiển thị. Xem Area.
  • Thanh so sánh có thêm hai công cụ. layout: "grouped" tách mỗi dải thành hai nửa cạnh nhau thay vì chồng lên nhau, còn deltaIndicator vẽ mũi tên thay đổi đỏ/xanh cho từng hàng. Xem Comparable.
  • Vị trí symbol trung thực. positionMode: "precise" của Symbol Map giữ mỗi bong bóng đúng tại lng/lat đã chiếu (chấp nhận chồng lấn) thay cho mô phỏng tách chồng lấn mặc định: lựa chọn đúng khi nền bản đồ hiện rõ khiến người xem đọc vị trí theo nghĩa đen. Nút chuyển trực tiếp trên trang Symbol Map cho thấy khác biệt.
  • Nhãn ở những chỗ còn thiếu. Scatter có pointLabels cùng lựa chọn drawOrder (mặc định nhỏ-nằm-trên, hoặc kiểu cũ lớn-nằm-trên); Treemap in được giá trị từng ô với tileValueLabels. Lớp phủ đang tải và không-có-dữ-liệu giờ phủ cả Radar, Sankey và Treemap, và các hình vẽ ẩn đúng cách khi lớp phủ đang hiển thị.

v1.6.5 ​

Version các package: react 1.6.5 · core, wc, angular 1.6.0 · vue, svelte 1.5.7 · devtools, insights 0.2.5.

  • RibbonChart cuối cùng cũng biết đổi ngôi. Cột chồng của mỗi kỳ giờ được xếp hạng lại theo giá trị: một nhóm vượt lên sẽ thấy rõ các dải bắt chéo nhau trên đường đi lên - đúng cái hồn của biểu đồ dải, khôi phục từ thư viện gốc. Xem ngay trên trang Biểu đồ dải: doanh thu âm nhạc Mỹ, nơi streaming vượt tất cả và đĩa than leo ngược qua mặt CD.
  • Cột so sánh đọc được thật sự. Cột con ngắn hơn lại được vẽ đè lên trên (cột đã tăng không còn che mất phần "trước"), và prop mới colorsBasedMapping cho cột "trước" một màu riêng: kết hợp tông màu sáng không trong suốt với valueBasedOpacity: 1 để tương phản nhạt/đậm rõ nét trên cả hai theme. Xem Biểu đồ cột so sánh.
  • Đám mây bong bóng không còn đứng hình. layoutMode: "async" chạy đúng mô phỏng lực deterministic đó nhưng cắt thành từng lát ~12 ms sau lớp overlay loading của biểu đồ: cụm 3.000 bong bóng từng chặn trang ~20 giây giờ tốn nhiều nhất một frame 50 ms. settleTicks chỉnh độ lắng, dữ liệu không đổi thì bỏ qua luôn mô phỏng, và bố cục được memo giữa các lần render. Xem demo sự kiện va chạm trên Biểu đồ bong bóng.
  • Chỉnh nhỏ, dễ chịu lớn. Trục giá trị của biểu đồ quả tạ chuyển được xuống dưới (xAxisPosition: "bottom"), GapChart nhận xAxisDomain tường minh (zoom câu chuyện tuổi thọ vào đúng dải 35-90), nhãn hàng của biểu đồ tornado chuyển được sang trái vùng vẽ (yAxisPosition: "left"), nhãn cực của radar không còn chạm tiêu đề, và phần tóm tắt context của tornado giờ nêu luôn mức chênh lệch lớn nhất.
  • Nhãn hàng cầm nắm được - và kéo lướt được. Trên Gap, biểu đồ so sánh và tornado, tùy chọn interactiveRowLabels biến mỗi nhãn hàng thành một control thật: rê chuột hoặc focus vào nhãn là một đường nối chạy tới đúng hàng đó kèm tooltip và highlight; bấm để ghim. Dải nhãn giờ còn kéo được như một slider: rê dọc theo nó là tooltip bám theo con trỏ, nhảy từ hàng này sang hàng khác, tới cả những hàng đã bị thưa nhãn trên trục dày đặc. Thử ngay trên demo của các trang này.
  • Cái gì cũng có chú giải. Mọi context biểu đồ giờ đều mang legendData, và các biểu đồ tách phần (treemap, bong bóng, cột so sánh) còn lộ màu nhạt đi kèm của từng nhãn qua LegendItem.paleColor - demo trong docs dùng nó cho chú giải màu và nút chuyển "Ý nghĩa | Cặp màu".
  • Trục band dày đặc tự thưa bớt. Nhãn hàng của gap/so sánh/kép/quả tạ (và trục snapshot của đài phun) tự lấy mẫu thành một tập đọc được thay vì nhòe thành vệt khi 100+ hàng.
  • Docs: cứ bấm thử đi. Mỗi trang biểu đồ giờ có nút chạy trực tiếp "✦ Giải thích biểu đồ này" (engine luật thật của insights, ngay trong trình duyệt) và "🛠 Thử DevTools với biểu đồ này", kèm các ví dụ kể chuyện mới: phổ dimuon của LHC trên Biểu đồ phân tán, lương gross vs net ở EU trên Biểu đồ bong bóng, và dải tuổi thọ ~195 quốc gia trên Biểu đồ khoảng cách.
  • Đài phun nước giờ tự giải thích được mình. Trang Fountain mở đầu bằng mục giải phẫu (mỗi phần nhìn thấy của glyph có đúng một ý nghĩa được nêu rõ) và một field guide gồm mười một cách đọc chạy trực tiếp: độ chắc chắn, độ ổn định, rủi ro, độ tự tin của AI, khán giả phân cực, bão trên Philippines và hơn nữa, phần lớn dùng dáng plume đối xứng gọn gàng. Tính đối xứng giờ cũng mang nghĩa: lean: 0 tường minh giữ cột nước thẳng đứng, lean có dấu cảnh báo rủi ro lệch một phía, còn cột nước không khai báo lean giữ độ nghiêng trang trí kiểu Geneva (báo về là lean: null trong getContext()).

v1.6.1 - v1.6.4 ​

Phiên bản gói: react 1.6.4 · devtools, insights 0.2.4 · core, wc, vue, svelte, angular 1.5.6. Bốn đợt vá nhỏ giữa hai bản phát hành lớn:

  • Trục giá trị của GapChart được gia cố ba lần. tickValues do bạn truyền vào giờ được lọc bỏ giá trị không hữu hạn, sắp xếp và khử trùng lặp (đầu vào hỏng thì rơi về domain của dữ liệu); mark và trục không còn tràn ra ngoài khi truyền tickValues mà enableExplicitTickValues đang tắt; và domain phần trăm được đệm theo biên độ, để marker mốc 0 nằm đúng trên trục thay vì lòi ra ngoài mép.
  • Chú giải của VerticalStackBar giữ nguyên màu. Key bị tắt vẫn nằm trong legendData với cờ disabled: true: viên chú giải chỉ mờ đi thay vì biến mất, và các slot màu được chia trên toàn bộ tập key - không key nào đổi màu khi tắt rồi bật lại. Các cột vẫn loại trừ key đã tắt.

v1.6.0 ​

Phiên bản gói: react 1.6.0 · devtools 0.2.0 · insights 0.2.0 · core, wc, vue, svelte, angular 1.5.2.

  • DevTools 0.2.0: nút bật/tắt lá chắn Michi. Mount devtools giờ không còn che app của bạn nữa, nó chỉ bắt đầu như một lá chắn nổi nhỏ (huy hiệu của thư viện). Nhấp vào đó, hoặc nhấn Ctrl/Cmd+Shift+M, để mở bảng điều khiển; trạng thái mở/đóng tự nhớ theo từng trình duyệt, nên tải lại trang thì mọi thứ vẫn y nguyên như bạn để lại. Góc màn hình đã bị một widget nổi khác chiếm mất? Cứ kéo lá chắn đi bất kỳ đâu, vị trí đó cũng được nhớ, và tùy chọn buttonPosition mới sẽ chọn góc khởi đầu. Handle có thêm isOpen(), và <MichiVzDevtools /> (react 1.6.0) truyền buttonPosition xuống. Xem DevTools.
  • Insights 0.2.0: nối nhiều dataset bằng matchLabels(). Nối cùng một thực thể trên hai danh sách viết khác nhau (một file xuất từ CRM so với một file xuất từ ERP) để hai dataset gộp lại thành một biểu đồ. Mặc định khớp tốt nhất theo cả hai chiều (mutual best match), có ngưỡng biên độ tin cậy, hàng nào không khớp thì trả về kèm gợi ý "có phải bạn muốn nói". Cơ chế hash không cần model chạy được offline; backend MiniLM còn nối được cả từ đồng nghĩa, từ viết tắt, và bản dịch. Thử ngay bản demo trực tiếp MatchLab.
  • Core 1.5.2: vá hiệu năng cho trang nặng. Cơ chế bảo vệ tính bất biến (idempotency) của onChartDataProcessed giờ ký context bằng một hàm hash FNV-1a có giới hạn, thay vì stringify từng hàng dữ liệu (một chuỗi nhiều MB mỗi lần render với 50 nghìn điểm), và hover trên scatter canvas/WebGPU gộp mọi đợt trỏ chuột dồn dập trong một khung hình thành đúng một lượt requestAnimationFrame cuối. Dashboard lớn vẫn phản hồi nhanh, chẳng cần cấu hình gì thêm.
  • Tài liệu, giờ có bốn ngôn ngữ. Trang web có bản tiếng Anh, tiếng Pháp, tiếng Hà Lan và tiếng Việt, với bộ chuyển ngôn ngữ trên thanh điều hướng; mọi trang hướng dẫn, biểu đồ và API đều đã dịch. Rất hoan nghênh đóng góp bản dịch; xem link Giúp dịch thuật ở chân trang.
  • Trang chủ sắc nét hơn. Trang chủ giờ mở đầu bằng câu chuyện DevTools và bốn trụ cột viết bằng ngôn ngữ tự nhiên: kiểm tra mọi thứ, biểu đồ máy đọc được, dễ tiếp cận sẵn theo mặc định, và chạy local. Chân trang mới mời bạn star repo, tham gia cộng đồng, đóng góp, và giúp dịch thuật. Lá chắn Michi giờ là favicon của trang web, nằm cạnh tiêu đề thanh điều hướng, và mỗi trang đều có mô tả riêng cùng thẻ chia sẻ mạng xã hội riêng.

v1.5.0 ​

  • DevTools ra mắt: @michi-vz/devtools 0.1.0, bản phát hành công khai đầu tiên. Một bảng điều khiển ngay trong trang (không cần extension trình duyệt) soi state sống của mọi biểu đồ qua tám tab: Overview (sửa trực tiếp + Reset chart), Sizing, Scales, Diff, Hit-test, Profiler, Insights, và một tab audit A11y. Cách ly bằng Shadow DOM, đổi kích thước được, sáng + tối, mặc định chỉ chạy ở môi trường dev với entry point /production vô hại, và chỉ một dòng React: <MichiVzDevtools />. Xem DevTools.
  • Insights 0.1.0: AI minh bạch, ưu tiên local.Phương pháp luận giờ trình bày chi tiết logic đằng sau mỗi insight; describeModelSource() nói rõ một model backend sẽ tải gì, từ đâu, trước khi tải bất cứ thứ gì; modelSource chuyển hướng việc tải sang mirror hoặc file tự self-host (hay cấm hẳn); và ollamaCaller / openaiCompatCaller nối một AI chạy local (Ollama, LM Studio, llama.cpp) chỉ với một dòng lệnh, không tải gì cả. Kết quả phát hiện bất thường giờ kèm cả phương pháp, ngưỡng, và một lời giải thích bằng ngôn ngữ thuần.
  • Core: hook devtools có thêm kênh hit-test tần suất cao và đo thời gian render (không tốn chi phí gì khi devtools tắt).

v1.4.0 ​

  • Đường chữ thập khi di chuột (crosshair) đã trở lại - và có thể tùy chỉnh. Đường chuột dọc của LineChart giờ mặc định bật lại (khôi phục sự tương đồng với phiên bản cũ; bản port trước đó đã âm thầm tắt nó đi), bám vào điểm dữ liệu gần nhất thay vì bám theo con trỏ thô, và ẩn đi khi con trỏ rời khỏi biểu đồ - giống nhau ở cả chế độ SVG, canvas, và WebGPU. Tạo kiểu riêng cho từng biểu đồ bằng enableMouseLine: { stroke, strokeWidth, strokeDasharray, snap }, đặt chủ đề toàn cục bằng các biến CSS --michi-vz-crosshair / --michi-vz-crosshair-width / --michi-vz-crosshair-dash, hoặc truyền false để tắt nó.

v1.3.0 ​

  • Không bỏ sót kỳ nào trên trục x. Trục ngày của LineChart giờ luôn giữ đúng kỳ đầu tiên và cuối cùng thực sự (các tick thời gian thô của d3 trước đây thường bám vào các mốc tròn và loại bỏ chúng), và các nhãn bị chen chúc sẽ tự động xoay -45° rồi thu gọn xuống còn khoảng 5 nhãn thay vì âm thầm biến mất.
  • Dòng thời gian liên tục với fillPeriodTicks (Line + Area, tùy chọn). Một tick cho mỗi kỳ trong khoảng, chứ không chỉ những kỳ có mặt trong dữ liệu; các kỳ bị thiếu được render mờ đi kèm tooltip khi hover là "không có dữ liệu", có thể tùy chỉnh qua noDataTickTooltip và noDataTickColor.

v1.2.1 ​

  • Mỗi trang npm liên kết tới các gói anh em. README của mỗi gói giờ có một bảng Gói framework liên kết tới cả sáu gói, nên từ bất kỳ wrapper nào bạn cũng có thể đến được các gói còn lại. Một liên kết monorepo bị hỏng đã được sửa.
  • Cả sáu gói được đồng bộ lại. vue, angular, svelte, và wc từng chậm hơn một phiên bản trên npm; giờ chúng được phát hành cùng lúc với core và react ở cùng một phiên bản.
  • Khả năng khám phá tài liệu. Bảng Cài đặt liên kết mỗi gói tới npm, và có một nút npm ở trang chủ cùng một biểu tượng npm trên thanh điều hướng trên cùng.

v1.2.0 ​

Bản phát hành tương thích thay thế trực tiếp (drop-in compatibility): các gói @michi-vz/* theo scope có thể thay thế gói đơn lẻ cũ michi-vz mà không gây hồi quy cho bất kỳ biểu đồ nào. Mọi thứ đều tương thích ngược.

  • Context không phụ thuộc renderer. legendData (hợp đồng màu theo từng chuỗi dữ liệu dành cho canvas / các consumer ở chế độ skip) trên context của Line/Gap/Area/Scatter/ BarBell/Radar; renderedData / visibleItems; mọi on*Processed giờ có tính bất biến (idempotent), nên chỉ kích hoạt khi context thực sự thay đổi và không bao giờ lặp vô hạn.
  • LineChart. Trạng thái đang tải / không có dữ liệu, cấu hình trục (yTicks, đường lưới, tô nổi bật đường số 0), fontFamily, và svgChildren do consumer cung cấp.
  • Thêm props biểu đồ. Chú giải hình dạng cho Gap; maxBarHeight / symmetricXDomain cho Comparable; xoay nhãn + keys cho VerticalStackBar; band scale, crosshair, và hình dạng theo từng điểm cho Scatter; hình dạng dữ liệu kiểu cũ + hit-test dễ tính hơn cho Radar.
  • Trục, SEO, và a11y. Tự động xoay và thu gọn tick thích ứng trên các trục bị chen chúc; <svg> của biểu đồ giờ mang <title>, <desc>, và <metadata> JSON-LD chuẩn schema.org.
  • Đường render WebGPU thử nghiệm song song với SVG và canvas.

v1.1.1 ​

  • Bản sửa Bar-Bell. Các vòng tròn đầu mút (end-cap) giờ render đè lên trên các đoạn thanh (trước đây một đoạn sau có thể vẽ đè lên đầu mút của đoạn trước), và toàn bộ đoạn thanh đều có thể hover để hiện tooltip, không chỉ riêng vòng tròn đầu mút.