Skip to content

Commit 893e281

Browse files
ArgoZhangArgoZhang
committed
Merge branch 'master' into univer-v0.13.0
2 parents 7490196 + 54fc509 commit 893e281

16 files changed

Lines changed: 403 additions & 123 deletions

File tree

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
<Project Sdk="Microsoft.NET.Sdk.Razor">
22

3+
<PropertyGroup>
4+
<Version>10.0.1</Version>
5+
</PropertyGroup>
6+
37
<PropertyGroup>
48
<PackageTags>Bootstrap Blazor WebAssembly wasm UI Components Chart</PackageTags>
59
<Description>Bootstrap UI components extensions of Chart.js</Description>

‎src/components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.cs‎

Lines changed: 72 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
1+
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
22
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
33
// Website: https://www.blazor.zone or https://argozhang.github.io/
44

@@ -131,6 +131,8 @@ public partial class Chart
131131

132132
private bool UpdateDataSource { get; set; }
133133

134+
private ChartDataSource? _ds = null;
135+
134136
/// <summary>
135137
/// OnInitialized 方法
136138
/// </summary>
@@ -156,20 +158,19 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
156158
throw new InvalidOperationException($"{nameof(OnInitAsync)} parameter must be set. {nameof(OnInitAsync)} 回调方法必须设置");
157159
}
158160

159-
ChartDataSource? ds = null;
160161
if (OnInitAsync != null)
161162
{
162-
ds = await OnInitAsync();
163-
UpdateOptions(ds);
163+
_ds = await OnInitAsync();
164+
UpdateOptions(_ds);
164165

165166
if (Height != null && Width != null)
166167
{
167168
//设置了高度和宽度,会自动禁用约束图表比例,图表充满容器
168-
ds.Options.MaintainAspectRatio = false;
169+
_ds.Options.MaintainAspectRatio = false;
169170
}
170171
}
171172

172-
await InvokeVoidAsync("init", Id, Interop, nameof(Completed), ds);
173+
await InvokeVoidAsync("init", Id, Interop, nameof(Completed), _ds);
173174
}
174175
}
175176

@@ -200,6 +201,70 @@ public async Task OnClickCallback(int datasetIndex, int index)
200201
}
201202
}
202203

204+
/// <summary>
205+
/// 增加数据集
206+
/// </summary>
207+
/// <param name="dataset"></param>
208+
/// <param name="index"></param>
209+
/// <returns></returns>
210+
public async Task AddDataset(ChartDataset dataset, int? index = null)
211+
{
212+
if (_ds == null)
213+
{
214+
if (OnInitAsync != null)
215+
{
216+
_ds = await OnInitAsync();
217+
UpdateOptions(_ds);
218+
}
219+
}
220+
221+
if (_ds != null)
222+
{
223+
if (index.HasValue)
224+
{
225+
_ds.Data.Insert(index.Value, dataset);
226+
}
227+
else
228+
{
229+
_ds.Data.Add(dataset);
230+
}
231+
await InvokeVoidAsync("update", Id, _ds, ChartAction.AddDataset.ToDescriptionString());
232+
233+
if (OnAfterUpdateAsync != null)
234+
{
235+
await OnAfterUpdateAsync(ChartAction.AddDataset);
236+
}
237+
}
238+
}
239+
240+
/// <summary>
241+
/// 删除数据集
242+
/// </summary>
243+
/// <param name="index"></param>
244+
/// <returns></returns>
245+
public async Task RemoveDatasetAt(int index)
246+
{
247+
if (_ds == null)
248+
{
249+
if (OnInitAsync != null)
250+
{
251+
_ds = await OnInitAsync();
252+
UpdateOptions(_ds);
253+
}
254+
}
255+
256+
if (_ds != null)
257+
{
258+
_ds.Data.RemoveAt(index);
259+
}
260+
await InvokeVoidAsync("update", Id, _ds, ChartAction.RemoveDataset.ToDescriptionString());
261+
262+
if (OnAfterUpdateAsync != null)
263+
{
264+
await OnAfterUpdateAsync(ChartAction.RemoveDataset);
265+
}
266+
}
267+
203268
/// <summary>
204269
/// 更新图表方法
205270
/// </summary>
@@ -210,7 +275,7 @@ public async Task Update(ChartAction action)
210275
var ds = await OnInitAsync();
211276
UpdateOptions(ds);
212277

213-
await InvokeVoidAsync("update", Id, Interop, ds, action.ToDescriptionString(), Angle);
278+
await InvokeVoidAsync("update", Id, ds, action.ToDescriptionString(), Angle);
214279

215280
if (OnAfterUpdateAsync != null)
216281
{

‎src/components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js‎

Lines changed: 52 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import '../../js/chart.umd.js'
1+
import '../../js/chart.umd.js'
22
import '../../js/chartjs-plugin-datalabels.js'
33
import { deepMerge } from '../../../BootstrapBlazor/modules/utility.js'
44
import Data from '../../../BootstrapBlazor/modules/data.js'
@@ -219,20 +219,15 @@ const getChartOption = function (option) {
219219
...genericOptions
220220
}
221221

222-
config = chartOption
222+
config = chartOption;
223223

224-
if (option.options.barColorSeparately) {
225-
colorFunc = function (data) {
226-
data.borderWidth = 1
227-
}
228-
}
229-
else {
230-
colorFunc = function (data) {
231-
const color = chartColors[colors.shift()]
232-
233-
data.backgroundColor = color
234-
data.borderColor = color
224+
colorFunc = function (data) {
225+
let color = chartColors[colors.shift()];
226+
if (Array.isArray(data.backgroundColor) && data.backgroundColor.length !== 0) {
227+
color = data.backgroundColor.shift();
235228
}
229+
data.backgroundColor = color;
230+
data.borderColor = data.backgroundColor;
236231
}
237232
}
238233
else if (option.type === 'bar') {
@@ -242,16 +237,24 @@ const getChartOption = function (option) {
242237

243238
if (option.options.barColorSeparately) {
244239
colorFunc = function (data) {
245-
data.borderWidth = 1
240+
if (Array.isArray(data.backgroundColor) && data.backgroundColor.length !== 0) {
241+
242+
}
243+
else {
244+
data.backgroundColor = colors.slice(0, data.data.length).map(function (name) {
245+
return chartColors[name]
246+
})
247+
}
246248
}
247249
}
248250
else {
249251
colorFunc = function (data) {
250-
const color = chartColors[colors.shift()]
251-
252-
data.backgroundColor = Chart.helpers.color(color).alpha(0.5).rgbString()
252+
let color = chartColors[colors.shift()]
253+
if (Array.isArray(data.backgroundColor) && data.backgroundColor.length !== 0) {
254+
color = data.backgroundColor.shift();
255+
}
256+
data.backgroundColor = Chart.helpers.color(color).alpha(0.5).rgbString();
253257
data.borderColor = color
254-
data.borderWidth = 1
255258
}
256259
}
257260
}
@@ -272,10 +275,18 @@ const getChartOption = function (option) {
272275
}
273276
}
274277
colorFunc = function (data) {
275-
data.backgroundColor = colors.slice(0, data.data.length).map(function (name) {
276-
return chartColors[name]
277-
})
278-
data.borderColor = 'white'
278+
if (Array.isArray(data.backgroundColor) && data.backgroundColor.length !== 0) {
279+
280+
}
281+
else {
282+
data.backgroundColor = colors.slice(0, data.data.length).map(function (name) {
283+
return chartColors[name]
284+
})
285+
}
286+
287+
if (data.borderColor === null) {
288+
data.borderColor = 'white';
289+
}
279290
}
280291

281292
if (option.type === 'doughnut') {
@@ -308,14 +319,25 @@ const getChartOption = function (option) {
308319
}
309320
}
310321
colorFunc = function (data) {
311-
const color = chartColors[colors.shift()]
312-
data.backgroundColor = Chart.helpers.color(color).alpha(0.5).rgbString()
313-
data.borderWidth = 1
322+
let color = chartColors[colors.shift()]
323+
if (Array.isArray(data.backgroundColor) && data.backgroundColor.length !== 0) {
324+
color = data.backgroundColor.shift();
325+
}
326+
data.backgroundColor = Chart.helpers.color(color).alpha(0.5).rgbString();
314327
data.borderColor = color
315328
}
316329
}
317330

318331
option.data.forEach(function (v) {
332+
if (v.borderWidth === -1) {
333+
if (option.type === 'line') {
334+
v.borderWidth = 3;
335+
}
336+
else {
337+
v.borderWidth = 1;
338+
}
339+
}
340+
319341
colorFunc(v)
320342
})
321343

@@ -392,10 +414,10 @@ const getChartOption = function (option) {
392414

393415
const updateChart = function (config, option) {
394416
if (option.updateMethod === "addDataset") {
395-
config.data.datasets.push(option.data.datasets.pop())
417+
config.data.datasets = option.data.datasets;
396418
}
397419
else if (option.updateMethod === "removeDataset") {
398-
config.data.datasets.pop()
420+
config.data.datasets = option.data.datasets;
399421
}
400422
else if (option.updateMethod === "addData") {
401423
if (config.data.datasets.length > 0) {
@@ -450,7 +472,7 @@ export function init(id, invoke, method, option) {
450472
}
451473
const el = document.getElementById(id);
452474
const chart = new Chart(el.getElementsByTagName('canvas'), op)
453-
Data.set(id, chart)
475+
Data.set(id, { invoke, chart })
454476

455477
if (op.options.height !== null) {
456478
chart.canvas.parentNode.style.height = op.options.height
@@ -468,8 +490,8 @@ export function init(id, invoke, method, option) {
468490
EventHandler.on(window, 'resize', chart.resizeHandler)
469491
}
470492

471-
export function update(id, invoke, option, method, angle) {
472-
const chart = Data.get(id)
493+
export function update(id, option, method, angle) {
494+
const { invoke, chart } = Data.get(id)
473495
let op = getChartOption(option);
474496
handlerClickData(invoke, op, option.options.onClickDataMethod);
475497
op.angle = angle

‎src/components/BootstrapBlazor.Chart/Components/Chart/ChartDataSource.cs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
1+
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
22
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
33
// Website: https://www.blazor.zone or https://argozhang.github.io/
44

@@ -26,7 +26,7 @@ public class ChartDataSource
2626
/// 传递给 JS 的配置装箱实例，内部使用，添加数据集请使用 <see cref="Data"/> 属性。
2727
/// </summary>
2828
[JsonPropertyName("data")]
29-
public IEnumerable<object> DataJS { get => Data.Cast<object>().ToList(); }
29+
public IEnumerable<object> DataJS => Data.Cast<object>().ToList();
3030

3131
/// <summary>
3232
/// 获得 组件配置项 设置标题 轴坐标等

‎src/components/BootstrapBlazor.Chart/Components/Chart/ChartDataset.cs‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
1+
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
22
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
33
// Website: https://www.blazor.zone or https://argozhang.github.io/
44

@@ -11,6 +11,11 @@ namespace BootstrapBlazor.Components;
1111
/// </summary>
1212
public class ChartDataset
1313
{
14+
/// <summary>
15+
/// 获得/设置 是否不显示 默认 false
16+
/// </summary>
17+
public bool Hidden { get; set; }
18+
1419
/// <summary>
1520
/// 获得/设置 数据集合名称
1621
/// </summary>
@@ -64,17 +69,17 @@ public class ChartDataset
6469
public int PointHoverRadius { get; set; } = 4;
6570

6671
/// <summary>
67-
/// 获得/设置 折线图(Line) 宽度 默认 3 个像素
72+
/// 获得/设置 折线图(Line) 宽度 默认 3 个像素 (bar) 默认 1 个像素
6873
/// </summary>
69-
public double BorderWidth { get; set; } = 3;
74+
public double BorderWidth { get; set; } = -1;
7075

7176
/// <summary>
72-
/// 获得/设置 柱状图的颜色数组
77+
/// 获得/设置 颜色数组 默认 null 使用 <see cref="ChartOptions.Colors"/> 值
7378
/// </summary>
74-
public string[] BackgroundColor { get; set; } = { "rgb(255, 205, 86, 0)" };
79+
public List<string>? BackgroundColor { get; set; }
7580

7681
/// <summary>
77-
/// 获得/设置 柱状图的边框颜色数组
82+
/// 获得/设置 边框颜色数组 默认 null 使用 <see cref="ChartOptions.Colors"/> 值
7883
/// </summary>
79-
public string[] BorderColor { get; set; } = { "rgb(255, 205, 86, 0)" };
84+
public List<string>? BorderColor { get; set; }
8085
}

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

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
1+
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
22
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
33
// Website: https://www.blazor.zone or https://argozhang.github.io/
44

@@ -119,7 +119,29 @@ public class ChartOptions
119119
{ "yellow", "rgb(255, 205, 86)" },
120120
{ "tomato", "rgb(255, 99, 71)" },
121121
{ "pink", "rgb(255, 192, 203)" },
122-
{ "violet", "rgb(238, 130, 238)" }
122+
{ "violet", "rgb(238, 130, 238)" },
123+
{ "indigo", "rgb(75, 0, 130)" },
124+
{ "cyan", "rgb(0, 255, 255)" },
125+
{ "magenta", "rgb(255, 0, 255)" },
126+
{ "lime", "rgb(50, 205, 50)" },
127+
{ "teal", "rgb(0, 128, 128)" },
128+
{ "lavender", "rgb(230, 230, 250)" },
129+
{ "maroon", "rgb(128, 0, 0)" },
130+
{ "olive", "rgb(128, 128, 0)" },
131+
{ "navy", "rgb(0, 0, 128)" },
132+
{ "coral", "rgb(255, 127, 80)" },
133+
{ "salmon", "rgb(250, 128, 114)" },
134+
{ "gold", "rgb(255, 215, 0)" },
135+
{ "khaki", "rgb(240, 230, 140)" },
136+
{ "plum", "rgb(221, 160, 221)" },
137+
{ "turquoise", "rgb(64, 224, 208)" },
138+
{ "orchid", "rgb(218, 112, 214)" },
139+
{ "crimson", "rgb(220, 20, 60)" },
140+
{ "sienna", "rgb(160, 82, 45)" },
141+
{ "steelblue", "rgb(70, 130, 180)" },
142+
{ "chocolate", "rgb(210, 105, 30)" },
143+
{ "forestgreen", "rgb(34, 139, 34)" },
144+
{ "slateblue", "rgb(106, 90, 205)" }
123145
};
124146

125147
/// <summary>

‎src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Project Sdk="Microsoft.NET.Sdk.Razor">
22

33
<PropertyGroup>
4-
<Version>10.0.17</Version>
4+
<Version>10.0.22</Version>
55
</PropertyGroup>
66

77
<PropertyGroup>

0 commit comments

Comments
 (0)