Skip to content

Commit 269f16a

Browse files
ulleoulleo
committed
feat: change chat config
1 parent 705aa96 commit 269f16a

File tree

4 files changed

+160
-92
lines changed

4 files changed

+160
-92
lines changed

‎frontend/src/views/chat/component/charts/Bar.ts‎

Lines changed: 40 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { BaseG2Chart } from '@/views/chat/component/BaseG2Chart.ts'
22
import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
3+
import type { G2Spec } from '@antv/g2'
34

45
export class Bar extends BaseG2Chart {
56
constructor(id: string) {
@@ -17,37 +18,54 @@ export class Bar extends BaseG2Chart {
1718
return
1819
}
1920

20-
this.chart
21-
?.interval()
22-
.coordinate({ transform: [{ type: 'transpose' }] })
23-
.data(data)
24-
.encode('x', x[0].value)
25-
.encode('y', y[0].value)
26-
.axis({
21+
const options: G2Spec = {
22+
...this.chart.options(),
23+
type: 'interval',
24+
data: data,
25+
coordinate: { transform: [{ type: 'transpose' }] },
26+
encode: {
27+
x: x[0].value,
28+
y: y[0].value,
29+
color: series.length > 0 ? series[0].value : undefined,
30+
},
31+
axis: {
2732
x: { title: x[0].name },
2833
y: { title: y[0].name },
29-
})
30-
.scale('x', {
31-
nice: true,
32-
})
33-
.scale('y', {
34-
nice: true,
35-
})
36-
.interaction('elementHighlight', { background: true })
37-
.tooltip((data) => {
34+
},
35+
scale: {
36+
x: {
37+
nice: true,
38+
},
39+
y: {
40+
nice: true,
41+
},
42+
},
43+
interaction: {
44+
elementHighlight: { background: true },
45+
},
46+
tooltip: (data) => {
3847
if (series.length > 0) {
3948
return { name: data[series[0].value], value: data[y[0].value] }
4049
} else {
4150
return { name: y[0].name, value: data[y[0].value] }
4251
}
43-
})
44-
.label({
45-
text: y[0].value,
46-
transform: [{ type: 'overlapDodgeY' }, { type: 'exceedAdjust' }, { type: 'overlapHide' }],
47-
})
52+
},
53+
labels: [
54+
{
55+
text: y[0].value,
56+
transform: [
57+
{ type: 'overlapDodgeY' },
58+
{ type: 'contrastReverse' },
59+
{ type: 'overlapHide' },
60+
],
61+
},
62+
],
63+
} as G2Spec
4864

4965
if (series.length > 0) {
50-
this.chart?.encode('color', series[0].value).transform({ type: 'stackY' })
66+
options.transform = [{ type: 'stackY' }]
5167
}
68+
69+
this.chart.options(options)
5270
}
5371
}

‎frontend/src/views/chat/component/charts/Column.ts‎

Lines changed: 41 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { BaseG2Chart } from '@/views/chat/component/BaseG2Chart.ts'
22
import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
3+
import type { G2Spec } from '@antv/g2'
34

45
export class Column extends BaseG2Chart {
56
constructor(id: string) {
@@ -17,36 +18,55 @@ export class Column extends BaseG2Chart {
1718
return
1819
}
1920

20-
this.chart
21-
?.interval()
22-
.data(data)
23-
.encode('x', x[0].value)
24-
.encode('y', y[0].value)
25-
.axis({
21+
const options: G2Spec = {
22+
...this.chart.options(),
23+
type: 'interval',
24+
data: data,
25+
encode: {
26+
x: x[0].value,
27+
y: y[0].value,
28+
color: series.length > 0 ? series[0].value : undefined,
29+
},
30+
axis: {
2631
x: { title: x[0].name },
2732
y: { title: y[0].name },
28-
})
29-
.scale('x', {
30-
nice: true,
31-
})
32-
.scale('y', {
33-
nice: true,
34-
})
35-
.interaction('elementHighlight', { background: true })
36-
.tooltip((data) => {
33+
},
34+
scale: {
35+
x: {
36+
nice: true,
37+
},
38+
y: {
39+
nice: true,
40+
},
41+
},
42+
interaction: {
43+
elementHighlight: { background: true },
44+
},
45+
tooltip: (data) => {
3746
if (series.length > 0) {
3847
return { name: data[series[0].value], value: data[y[0].value] }
3948
} else {
4049
return { name: y[0].name, value: data[y[0].value] }
4150
}
42-
})
43-
.label({
44-
text: y[0].value,
45-
transform: [{ type: 'overlapDodgeY' }, { type: 'exceedAdjust' }, { type: 'overlapHide' }],
46-
})
51+
},
52+
labels: [
53+
{
54+
text: y[0].value,
55+
position: 'top',
56+
dy: -25,
57+
transform: [
58+
{ type: 'overlapDodgeY' },
59+
{ type: 'contrastReverse' },
60+
{ type: 'overlapHide' },
61+
],
62+
},
63+
],
64+
} as G2Spec
4765

4866
if (series.length > 0) {
49-
this.chart?.encode('color', series[0].value).transform({ type: 'stackY' })
67+
options.transform = [{ type: 'stackY' }]
5068
}
69+
70+
this.chart.options(options)
5171
}
5272
}

‎frontend/src/views/chat/component/charts/Line.ts‎

Lines changed: 54 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { BaseG2Chart } from '@/views/chat/component/BaseG2Chart.ts'
22
import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
3+
import type { G2Spec } from '@antv/g2'
34

45
export class Line extends BaseG2Chart {
56
constructor(id: string) {
@@ -17,43 +18,62 @@ export class Line extends BaseG2Chart {
1718
return
1819
}
1920

20-
this.chart
21-
?.data(data)
22-
.encode('x', x[0].value)
23-
.encode('y', y[0].value)
24-
.axis({
21+
const options: G2Spec = {
22+
...this.chart.options(),
23+
type: 'view',
24+
data: data,
25+
encode: {
26+
x: x[0].value,
27+
y: y[0].value,
28+
color: series.length > 0 ? series[0].value : undefined,
29+
},
30+
axis: {
2531
x: { title: x[0].name },
2632
y: { title: y[0].name },
27-
})
28-
.scale('x', {
29-
nice: true,
30-
})
31-
.scale('y', {
32-
nice: true,
33-
})
34-
35-
if (series.length > 0) {
36-
this.chart?.encode('color', series[0].value)
37-
}
38-
39-
this.chart
40-
?.line()
41-
.label({
42-
text: y[0].value,
43-
style: {
44-
dx: -10,
45-
dy: -12,
33+
},
34+
scale: {
35+
x: {
36+
nice: true,
37+
},
38+
y: {
39+
nice: true,
40+
},
41+
},
42+
children: [
43+
{
44+
type: 'line',
45+
labels: [
46+
{
47+
text: y[0].value,
48+
style: {
49+
dx: -10,
50+
dy: -12,
51+
},
52+
transform: [
53+
{ type: 'overlapDodgeY' },
54+
{ type: 'exceedAdjust' },
55+
{ type: 'overlapHide' },
56+
],
57+
},
58+
],
59+
tooltip: (data) => {
60+
if (series.length > 0) {
61+
return { name: data[series[0].value], value: data[y[0].value] }
62+
} else {
63+
return { name: y[0].name, value: data[y[0].value] }
64+
}
65+
},
66+
},
67+
{
68+
type: 'point',
69+
style: {
70+
fill: 'white',
71+
},
72+
tooltip: false,
4673
},
47-
transform: [{ type: 'overlapDodgeY' }, { type: 'exceedAdjust' }, { type: 'overlapHide' }],
48-
})
49-
.tooltip((data) => {
50-
if (series.length > 0) {
51-
return { name: data[series[0].value], value: data[y[0].value] }
52-
} else {
53-
return { name: y[0].name, value: data[y[0].value] }
54-
}
55-
})
74+
],
75+
} as G2Spec
5676

57-
this.chart?.point().style('fill', 'white').tooltip(false)
77+
this.chart.options(options)
5878
}
5979
}

‎frontend/src/views/chat/component/charts/Pie.ts‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { BaseG2Chart } from '@/views/chat/component/BaseG2Chart.ts'
22
import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
3+
import type { G2Spec } from '@antv/g2'
34

45
export class Pie extends BaseG2Chart {
56
constructor(id: string) {
@@ -15,21 +16,30 @@ export class Pie extends BaseG2Chart {
1516
return
1617
}
1718

18-
this.chart.coordinate({ type: 'theta', outerRadius: 0.8 })
19-
20-
this.chart
21-
?.interval()
22-
.transform({ type: 'stackY' })
23-
.data(data)
24-
.encode('y', y[0].value)
25-
.encode('color', series[0].value)
26-
.legend('color', { position: 'bottom', layout: { justifyContent: 'center' } })
27-
.label({
28-
position: 'outside',
29-
text: (data: any) => `${data[series[0].value]}: ${data[y[0].value]}`,
30-
})
31-
.tooltip((data) => {
19+
const options: G2Spec = {
20+
...this.chart.options(),
21+
type: 'interval',
22+
coordinate: { type: 'theta', outerRadius: 0.8 },
23+
transform: [{ type: 'stackY' }],
24+
data: data,
25+
encode: {
26+
y: y[0].value,
27+
color: series[0].value,
28+
},
29+
legend: {
30+
color: { position: 'bottom', layout: { justifyContent: 'center' } },
31+
},
32+
labels: [
33+
{
34+
position: 'outside',
35+
text: (data: any) => `${data[series[0].value]}: ${data[y[0].value]}`,
36+
},
37+
],
38+
tooltip: (data) => {
3239
return { name: y[0].name, value: data[y[0].value] }
33-
})
40+
},
41+
}
42+
43+
this.chart.options(options)
3444
}
3545
}

0 commit comments

Comments
 (0)