From ae0f1bbd376b8cc994ae27480a89bf2e45a35391 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 22 Jul 2026 16:06:00 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20switchLayout?= =?UTF-8?q?=20=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/DockViewV2.razor.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/BootstrapBlazor.DockView/Components/DockViewV2.razor.js b/src/components/BootstrapBlazor.DockView/Components/DockViewV2.razor.js index 6d6a928c..e1818586 100644 --- a/src/components/BootstrapBlazor.DockView/Components/DockViewV2.razor.js +++ b/src/components/BootstrapBlazor.DockView/Components/DockViewV2.razor.js @@ -78,6 +78,14 @@ export function save(id) { return ret; } +export function switchLayout(id, options) { + const dock = Data.get(id) + if (dock) { + const { dockview } = dock; + dockview.switchLayout(options); + } +} + export function dispose(id) { const dock = Data.get(id) Data.remove(id); From 172f7f531e4e716acc6a46f07c47fe30a0fff082 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 22 Jul 2026 21:17:16 +0800 Subject: [PATCH 2/3] feat(Chart): add Total/Tooltip/CategoryLabel format parameter --- .../Components/Chart/Chart.razor.js | 85 +++++++++++++++++-- .../Components/Chart/ChartOptions.cs | 45 ++++++++++ 2 files changed, 124 insertions(+), 6 deletions(-) diff --git a/src/components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js b/src/components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js index 2aaa7fc2..d199626c 100644 --- a/src/components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js +++ b/src/components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js @@ -107,6 +107,17 @@ const genericOptions = { radius: 0 } +const formatChartText = (format, values) => { + if (!format) { + return null; + } + + return Object.keys(values).reduce((text, key) => text.replaceAll(`{${key}}`, values[key] ?? ''), format); +} + +const getStackedTotal = context => context.chart.data.datasets.reduce( + (total, v, index) => context.chart.isDatasetVisible(index) ? total + (Number(v.data[context.dataIndex]) || 0) : total, 0) + const getChartOption = function (option) { const appendData = option.appendData; delete option.appendData; @@ -151,6 +162,15 @@ const getChartOption = function (option) { } } + if (option.options.categoryLabelFormatter) { + scale.x.ticks.callback = function (value) { + return formatChartText(option.options.categoryLabelFormatter, { + value, + label: this.getLabelForValue(value) + }); + } + } + if (option.options.xScalesBorderColor) { scale.x.border = { color: option.options.xScalesBorderColor @@ -413,18 +433,70 @@ const getChartOption = function (option) { }); return last; }; + const totalLabel = { + anchor: 'end', + align: 'end', + display: context => context.datasetIndex === lastVisibleIndex(context.chart), + formatter: (value, context) => { + const total = getStackedTotal(context); + return formatChartText(option.options.totalDataLabelFormatter, { total, value: total }) ?? total; + } + }; + + if (option.options.totalDataLabelColor) { + totalLabel.color = option.options.totalDataLabelColor; + } + if (option.options.totalDataLabelBackgroundColor) { + totalLabel.backgroundColor = option.options.totalDataLabelBackgroundColor; + } + if (option.options.totalDataLabelBorderRadius !== null) { + totalLabel.borderRadius = option.options.totalDataLabelBorderRadius; + } + if (option.options.totalDataLabelPadding !== null) { + totalLabel.padding = option.options.totalDataLabelPadding; + } + if (option.options.totalDataLabelFontWeight) { + totalLabel.font = { + weight: option.options.totalDataLabelFontWeight + }; + } + datalabels.labels = { value: {}, - total: { - anchor: 'end', - align: 'end', - display: context => context.datasetIndex === lastVisibleIndex(context.chart), - formatter: (value, context) => context.chart.data.datasets.reduce( - (total, v, index) => context.chart.isDatasetVisible(index) ? total + (Number(v.data[context.dataIndex]) || 0) : total, 0) + total: totalLabel + }; + } + + const tooltip = {}; + if (option.options.tooltipTitleFormatter) { + tooltip.callbacks = { + ...tooltip.callbacks, + title: tooltipItems => { + const item = tooltipItems[0]; + return formatChartText(option.options.tooltipTitleFormatter, { + label: item.label, + value: item.formattedValue, + datasetLabel: item.dataset.label, + dataIndex: item.dataIndex, + datasetIndex: item.datasetIndex + }); } }; } + if (option.options.tooltipLabelFormatter) { + tooltip.callbacks = { + ...tooltip.callbacks, + label: context => formatChartText(option.options.tooltipLabelFormatter, { + label: context.label, + value: context.formattedValue, + datasetLabel: context.dataset.label, + dataIndex: context.dataIndex, + datasetIndex: context.datasetIndex + }) + }; + } + return { ...config, ...{ @@ -446,6 +518,7 @@ const getChartOption = function (option) { text: option.options.title }, datalabels: datalabels, + ...(tooltip.callbacks ? { tooltip } : {}), customCanvasBackgroundColor: { color: option.options.canvasBackgroundColor, } diff --git a/src/components/BootstrapBlazor.Chart/Components/Chart/ChartOptions.cs b/src/components/BootstrapBlazor.Chart/Components/Chart/ChartOptions.cs index c493d9cc..efc9a240 100644 --- a/src/components/BootstrapBlazor.Chart/Components/Chart/ChartOptions.cs +++ b/src/components/BootstrapBlazor.Chart/Components/Chart/ChartOptions.cs @@ -223,6 +223,51 @@ public class ChartOptions /// public bool ShowTotalDataLabel { get; set; } + /// + /// 获得/设置 堆叠模式下总计数据标签格式化字符串 默认为 null 可使用 {total} 占位符 + /// + public string? TotalDataLabelFormatter { get; set; } + + /// + /// 获得/设置 堆叠模式下总计数据标签颜色 默认为 null + /// + public string? TotalDataLabelColor { get; set; } + + /// + /// 获得/设置 堆叠模式下总计数据标签背景颜色 默认为 null + /// + public string? TotalDataLabelBackgroundColor { get; set; } + + /// + /// 获得/设置 堆叠模式下总计数据标签边框圆角 默认 null + /// + public int? TotalDataLabelBorderRadius { get; set; } + + /// + /// 获得/设置 堆叠模式下总计数据标签内边距 默认 null + /// + public int? TotalDataLabelPadding { get; set; } + + /// + /// 获得/设置 堆叠模式下总计数据标签字体粗细 默认为 null + /// + public string? TotalDataLabelFontWeight { get; set; } + + /// + /// 获得/设置 X 轴分类标签格式化字符串 默认为 null 可使用 {label} {value} 占位符 + /// + public string? CategoryLabelFormatter { get; set; } + + /// + /// 获得/设置 Tooltip 标题格式化字符串 默认为 null 可使用 {label} {value} {datasetLabel} {dataIndex} {datasetIndex} 占位符 + /// + public string? TooltipTitleFormatter { get; set; } + + /// + /// 获得/设置 Tooltip 标签格式化字符串 默认为 null 可使用 {label} {value} {datasetLabel} {dataIndex} {datasetIndex} 占位符 + /// + public string? TooltipLabelFormatter { get; set; } + /// /// 获得/设置 是否单独设置柱状图颜色 /// From 27faf131dde95fece6e00fb7d1b96e00d5ce9a7a Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 22 Jul 2026 21:17:57 +0800 Subject: [PATCH 3/3] chore: bump version 10.0.7 --- .../BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj b/src/components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj index a7c02ff7..149b8b71 100644 --- a/src/components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj +++ b/src/components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj @@ -1,7 +1,7 @@ - 10.0.6 + 10.0.7