feat(Chart): add Total/Tooltip/CategoryLabel format parameter

src/components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.0.6</Version>
+    <Version>10.0.7</Version>
   </PropertyGroup>
 
   <PropertyGroup>

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,
                     }

src/components/BootstrapBlazor.Chart/Components/Chart/ChartOptions.cs

@@ -223,6 +223,51 @@ public class ChartOptions
     /// </summary>
     public bool ShowTotalDataLabel { get; set; }
 
+    /// <summary>
+    /// 获得/设置 堆叠模式下总计数据标签格式化字符串 默认为 null 可使用 {total} 占位符
+    /// </summary>
+    public string? TotalDataLabelFormatter { get; set; }
+
+    /// <summary>
+    /// 获得/设置 堆叠模式下总计数据标签颜色 默认为 null
+    /// </summary>
+    public string? TotalDataLabelColor { get; set; }
+
+    /// <summary>
+    /// 获得/设置 堆叠模式下总计数据标签背景颜色 默认为 null
+    /// </summary>
+    public string? TotalDataLabelBackgroundColor { get; set; }
+
+    /// <summary>
+    /// 获得/设置 堆叠模式下总计数据标签边框圆角 默认 null
+    /// </summary>
+    public int? TotalDataLabelBorderRadius { get; set; }
+
+    /// <summary>
+    /// 获得/设置 堆叠模式下总计数据标签内边距 默认 null
+    /// </summary>
+    public int? TotalDataLabelPadding { get; set; }
+
+    /// <summary>
+    /// 获得/设置 堆叠模式下总计数据标签字体粗细 默认为 null
+    /// </summary>
+    public string? TotalDataLabelFontWeight { get; set; }
+
+    /// <summary>
+    /// 获得/设置 X 轴分类标签格式化字符串 默认为 null 可使用 {label} {value} 占位符
+    /// </summary>
+    public string? CategoryLabelFormatter { get; set; }
+
+    /// <summary>
+    /// 获得/设置 Tooltip 标题格式化字符串 默认为 null 可使用 {label} {value} {datasetLabel} {dataIndex} {datasetIndex} 占位符
+    /// </summary>
+    public string? TooltipTitleFormatter { get; set; }
+
+    /// <summary>
+    /// 获得/设置 Tooltip 标签格式化字符串 默认为 null 可使用 {label} {value} {datasetLabel} {dataIndex} {datasetIndex} 占位符
+    /// </summary>
+    public string? TooltipLabelFormatter { get; set; }
+
     /// <summary>
     /// 获得/设置 是否单独设置柱状图颜色
     /// </summary>

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);