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áoonBubbleClick, và ký hiệu của Bản đồ ký hiệu báoonSymbolClick, 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átmichi-vz:nodeclick,michi-vz:linkclick,michi-vz:bubbleclickvà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ìdraggablethuộ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/latkhi có đối tượnggeographymanggeoId(hoặcid) 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ỏ.
codecủ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ớitilecủ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ốngHighcharts.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.
areaFilltô 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ằngtopOpacity,bottomOpacityvàbaseline).lastPointLabelghi 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ềnformatterđể 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 khiareaFillđ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
lowvàhigh, hoặcsamples(khi đó có thể bỏvalue: lần đo ở giữa được dùng), vàforecast: truecho 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.
referenceLinesvẽ một đường như "Thời gian tôi dành ra: 45 phút" và, vớigoodSide, ghi "17 trên 20 trong vòng 45 phút" dưới mỗi tia.showValueLabelsghi 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);yAxisTitlecho biết chiều nào là tốt hơn;readingGuidethêm một dòng chú giải chỉ nêu những dấu thực sự được vẽ.showRangevàshowSamplestắt đài phun và các chấm nhỏ, còndriftlà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,showMistcùngdensityvàleancủa từng mục bị bỏ qua, mỗi cái kèm một cảnh báoignored-option. Trong TypeScript,valuevàspreadgiờ là tùy chọn, vàtooltipFormatternhận mục kèmvalueđã tính. Đài phun giờ hỗ trợisLoading,isNodatavànoDataLabel, nên mộtdataSetrỗ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. seektì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ùngseekIndex(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 khihighlightItemshoặcdisabledItemsdộ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.
niceMaxValuelàm tròn vòng ngoài lên một số tròn khi không đặtmaxValue: 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.truedùngringslà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/wcnhận nó dưới dạng property và@michi-vz/angularchuyể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êncolorScale.rangekhông còn cần phụ thuộc d3.SEQUENTIAL_SCHEME_NAMESliệ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: falsevẽ 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ệuignored-option. Mặc định vẫn làtrue.@michi-vz/wcnhận nó dưới dạng property và@michi-vz/angularchuyển tiếp nó.
- 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.
- 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àhighlightItemsdù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/wcnhận thuộc tínhhover-highlightvà@michi-vz/angularchuyể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;0cho 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/wcnhận thuộc tínhbar-radiusvà@michi-vz/angularchuyể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.
annotationTooltipFormattercho đ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ềnullthì 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/wcvà@michi-vz/angularchuyể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:
mincho 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),valueMarkerghim 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,ticksthê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 (valueFormatterchỉ 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àsweepFitco 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ấpmin.@michi-vz/wcvà@michi-vz/angularchuyển tiếp các thuộc tính;@michi-vz/angular/gauge-chartxuất lạiGaugeTick,GaugeEndLabelvà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.
sweepAnglevàgradienttrê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: 180cho 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ộtstring[]ở 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/wccù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/vuevà@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:
tooltipFormatternhận thêmdate(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 đưaonHighlightItemngược trở lạihighlightItems: 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ùngpositionMode: "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áolayout-overflow), giá trị thể hiện quacolorScalevớinoDataColorcho mục không cóvalue, dịch chuyểnoffsettheo mục, ghim trang trímarkers, và phép chiếugeoNaturalEarth1. Ngữ cảnh báo cáox/y,hasValue,noValueCount,shape,positionMode,colorScalevà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/angularxuất lạiDataPoint,LineDataItem,Margin,Filter,CurveType,XaxisDataType,MouseLineConfigvà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ệnmichi-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.titlenay 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.
yAxisDomainmộ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
legendDatavà 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ấudisabled: truetạ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ắtseriestheo 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. contextSignaturevẫn có giới hạn với trườngseriesmớ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.dategiờ xếp CUỐI trong cả hai chiều sắp xếp. Sentinel cũ chỉ xếp cuối dướidesc— dướiasc(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/NaNcũ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ọcdisabledItemsmà 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,
filterTop/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). Khifilterđang bật,legendDatagiữ series bị ẩn dưới dạng hàng làm mờ vàrenderedRankedIdsvẫ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ófilterthì 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
renderedRankedIdstrên ChartContext dùng chung: mã (code) của các chuỗi thực sự được vẽ, theo thứ tự hiển thị (saudisabledItemsvà bước sắp xếp/cắt củafilterTop/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.codetheo 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 propxAxis*vẫn định dạng trục danh mục (yAxis*/yTickstrục giá trị) ở cả hai hướng. Nhãn viết tắt,xAxisModevàtimelinevẫ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/maxcủ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ịnullchỉ 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, callbackonZoomChangevà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.
chartToPngDataUrlnhận các khối chữtitlevà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
disabledItemstrước đây biến mất hoàn toàn khỏilegendDatađượ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 tronglegendData, đượ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 proptitle; crawler vẫn giữ metadata JSON-LD, và trình đọc màn hình không bị ảnh hưởng (svg vẫnaria-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
tooltipFormatterlại manglabelcủ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
YYYYMMbướ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ángMM-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
timelinemới thêm nút play + thanh tua năm có sẵn (kèm controller headlesschart.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ắndate; Sankey chạy theo các link gắndate; còn Radar và Bar-Bell dùng fieldperiodmớ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
progressiveDrawqué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ọireplay()để chạy lại khi cần. - Cả hai tính năng chạy trên renderer
svgvàcanvas, tôn trọngprefers-reduced-motion(biểu đồ hiển thị đầy đủ ngay lập tức), và chủ ý không hoạt động trên rendererwebgputhử 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ểngetContext().a11yTablecủ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ònchartToStyledSvgString/chartToStyledSvgDataUri/chartToPngDataUrldự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 trongadoptedStyleSheets, 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êmgetElement()để đư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.
sharedTooltipcủa LineChart (kèmsharedTooltipFormattertuỳ 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.
a11yTablecủ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ớishowGrid) 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òndeltaIndicatorvẽ 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ó
pointLabelscùng lựa chọndrawOrder(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ớitileValueLabels. 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
colorsBasedMappingcho 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ớivalueBasedOpacity: 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.settleTickschỉ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ậnxAxisDomaintườ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
interactiveRowLabelsbiế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 quaLegendItem.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: 0tường minh giữ cột nước thẳng đứng,leancó 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áoleangiữ độ nghiêng trang trí kiểu Geneva (báo về làlean: nulltronggetContext()).
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.
tickValuesdo 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ềntickValuesmà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
legendDatavớ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ọnbuttonPositionmới sẽ chọn góc khởi đầu. Handle có thêmisOpen(), và<MichiVzDevtools />(react 1.6.0) truyềnbuttonPositionxuố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
onChartDataProcessedgiờ 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ượtrequestAnimationFramecuố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/devtools0.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/productionvô 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ì;modelSourcechuyển hướng việc tải sang mirror hoặc file tự self-host (hay cấm hẳn); vàollamaCaller/openaiCompatCallernố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ềnfalseđể 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
d3trướ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 quanoDataTickTooltipvà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àwctừ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ớicorevà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ọion*Processedgiờ 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àsvgChildrendo consumer cung cấp. - Thêm props biểu đồ. Chú giải hình dạng cho Gap;
maxBarHeight/symmetricXDomaincho Comparable; xoay nhãn +keyscho 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.
