Skip to content

Commit 167505a

Browse files
ulleoulleo
committed
feat: add pie chart
1 parent 3fd9e97 commit 167505a

File tree

10 files changed

+89
-24
lines changed

10 files changed

+89
-24
lines changed

‎backend/template.yaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,10 +55,10 @@ template:
5555
{{"type":"bar", "title": "标题", "axis": {{"x": {{"name":"x轴的中文名称", "value": "SQL 查询 x 轴的列(有别名用别名)"}}, "y": {{"name":"y轴的中文名称","value": "SQL 查询 y 轴的列(有别名用别名)"}}}}
5656
必须从 SQL 查询列中提取“x”和“y”。
5757
- 如果需要折线图，则生成的 JSON 格式应为：
58-
{{"type":"line", "title": "标题", "axis": {{"x": {{"name":"x轴的中文名称","value": "x轴的SQL查询列(有别名用别名)"}}, "y": {{"name":"y轴的中文名称","value": "y轴的SQL查询列(有别名用别名)"}}}}
58+
{{"type":"line", "title": "标题", "axis": {{"x": {{"name":"x轴的中文名称","value": "SQL 查询 x 轴的列(有别名用别名)"}}, "y": {{"name":"y轴的中文名称","value": "SQL 查询 y 轴的列(有别名用别名)"}}}}
5959
其中“x”和“y”必须从SQL查询列中提取。
6060
- 如果需要饼图，则生成的 JSON 格式应为：
61-
{{"type":"pie", "title": "标题", "columns": [{{"name":"中文字段名1","value":"SQL查询列1(有别名用别名)"}},{{"name":"中文字段名2","value":"SQL查询列2(有别名用别名)"}}]}}
61+
{{"type":"pie", "title": "标题", "axis": {{"y": {{"值轴的中文名称","value":"SQL 查询数值的列(有别名用别名)"}}, "series": {{"name":"分类的中文名称","value":"SQL 查询分类的列(有别名用别名)"}}}}
6262
其中“column”必须从SQL查询列中提取。
6363
- 如果答案未知或者与生成JSON无关，则生成的 JSON 格式应为：
6464
{{"type":"error", "reason": "抱歉，我无法回答您的问题。"}}

‎frontend/src/views/chat/ChatAnswer.vue‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {computed, nextTick, ref} from "vue";
55
import type {TabsPaneContext} from 'element-plus-secondary'
66
import {Loading} from "@element-plus/icons-vue";
77
import Component from "./component/Component.vue"
8+
import type {ChartTypes} from "@/views/chat/component/BaseChart.ts";
89
910
const props = defineProps<{
1011
message?: ChatMessage
@@ -43,9 +44,13 @@ const dataObject = computed<{
4344
})
4445
4546
const chartObject = computed<{
46-
type: "table" | "bar" | "line" | "pie"
47+
type: ChartTypes
4748
title: string
48-
axis: { x: { name: string, value: string }, y: { name: string, value: string } }
49+
axis: {
50+
x: { name: string, value: string },
51+
y: { name: string, value: string },
52+
series: { name: string, value: string }
53+
}
4954
columns: Array<{ name: string, value: string }>
5055
}>(() => {
5156
if (props.message?.record?.chart) {
@@ -66,10 +71,16 @@ const yAxis = computed(() => {
6671
}
6772
return []
6873
})
74+
const series = computed(() => {
75+
if (chartObject.value?.axis?.series) {
76+
return [chartObject.value.axis.series]
77+
}
78+
return []
79+
})
6980
70-
const currentChartType = ref<"table" | "bar" | 'column' | "line" | "pie" | undefined>(undefined)
81+
const currentChartType = ref<ChartTypes | undefined>(undefined)
7182
72-
const chartType = computed<"table" | "bar" | 'column' | "line" | "pie">({
83+
const chartType = computed<ChartTypes>({
7384
get() {
7485
if (currentChartType.value) {
7586
return currentChartType.value
@@ -158,6 +169,7 @@ function onTypeChange(type: string) {
158169
:columns="chartObject?.columns"
159170
:x="xAxis"
160171
:y="yAxis"
172+
:series="series"
161173
:data="dataObject.data"/>
162174
</div>
163175
</div>
@@ -189,6 +201,6 @@ function onTypeChange(type: string) {
189201
190202
.chart-base-container {
191203
padding: 20px;
192-
background: rgba(224,224,226,0.29);
204+
background: rgba(224, 224, 226, 0.29);
193205
}
194206
</style>

‎frontend/src/views/chat/component/BaseChart.ts‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,27 @@
1+
export interface ChartAxis {
2+
name: string,
3+
value: string,
4+
type?: 'x' | 'y' | 'series'
5+
}
6+
7+
export interface ChartData {
8+
[key: string]: any
9+
}
10+
11+
export type ChartTypes = "table" | "bar" | 'column' | "line" | "pie"
12+
113
export abstract class BaseChart {
214
id: string;
315
_name: string = 'base-chart';
4-
axis: Array<{ name: string, value: string, type?: 'x' | 'y' }> = [];
5-
data: Array<{ [key: string]: any }> = [];
16+
axis: Array<ChartAxis> = [];
17+
data: Array<ChartData> = [];
618

719
constructor(id: string, name: string) {
820
this.id = id;
921
this._name = name;
1022
}
1123

12-
init(axis: Array<{ name: string, value: string, type?: 'x' | 'y' }>, data: Array<{ [key: string]: any }>): void {
24+
init(axis: Array<ChartAxis>, data: Array<ChartData>): void {
1325
this.axis = axis;
1426
this.data = data;
1527
}

‎frontend/src/views/chat/component/Component.vue‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
11
<script setup lang="ts">
22
import {computed, onMounted, onUnmounted} from "vue";
33
import {getChartInstance} from "@/views/chat/component/index.ts";
4-
import type {BaseChart} from "@/views/chat/component/BaseChart.ts";
4+
import type {BaseChart, ChartAxis, ChartData} from "@/views/chat/component/BaseChart.ts";
55
66
const params = withDefaults(defineProps<{
77
id: string | number
88
type: string
9-
data?: Array<{ [key: string]: any }>
10-
columns?: Array<{ name: string, value: string }>
11-
x?: Array<{ name: string, value: string }>
12-
y?: Array<{ name: string, value: string }>
9+
data?: Array<ChartData>
10+
columns?: Array<ChartAxis>
11+
x?: Array<ChartAxis>
12+
y?: Array<ChartAxis>
13+
series?: Array<ChartAxis>
1314
}>(), {
1415
data: () => [],
1516
columns: () => [],
1617
x: () => [],
1718
y: () => [],
19+
series: () => [],
1820
})
1921
2022
const chartId = computed(() => {
2123
return "chart-component-" + params.id
2224
})
2325
2426
const axis = computed(() => {
25-
const _list: Array<{ name: string, value: string, type?: 'x' | 'y' }> = []
27+
const _list: Array<ChartAxis> = []
2628
params.columns.forEach(column => {
2729
_list.push({name: column.name, value: column.value})
2830
})
@@ -32,6 +34,9 @@ const axis = computed(() => {
3234
params.y.forEach(column => {
3335
_list.push({name: column.name, value: column.value, type: 'y'})
3436
})
37+
params.series.forEach(column => {
38+
_list.push({name: column.name, value: column.value, type: 'series'})
39+
})
3540
return _list
3641
})
3742

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import {BaseG2Chart} from "@/views/chat/component/BaseG2Chart.ts";
2+
import type {ChartAxis, ChartData} from "@/views/chat/component/BaseChart.ts";
23

34
export class Bar extends BaseG2Chart {
45

56
constructor(id: string) {
67
super(id, "bar");
78
}
89

9-
init(axis: Array<{ name: string; value: string; type: "x" | "y" }>, data: Array<{ [key: string]: any }>) {
10+
init(axis: Array<ChartAxis>, data: Array<ChartData>) {
1011
super.init(axis, data);
1112
const x = this.axis.filter(item => item.type === "x");
1213
const y = this.axis.filter(item => item.type === "y");
@@ -26,7 +27,7 @@ export class Bar extends BaseG2Chart {
2627
.scale('y', {
2728
nice: true,
2829
})
29-
.interaction('elementHighlight', { background: true });
30+
.interaction('elementHighlight', {background: true});
3031

3132
}
3233

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import {BaseG2Chart} from "@/views/chat/component/BaseG2Chart.ts";
2+
import type {ChartAxis, ChartData} from "@/views/chat/component/BaseChart.ts";
23

34
export class Column extends BaseG2Chart {
45

56
constructor(id: string) {
67
super(id, "column");
78
}
89

9-
init(axis: Array<{ name: string; value: string; type: "x" | "y" }>, data: Array<{ [key: string]: any }>) {
10+
init(axis: Array<ChartAxis>, data: Array<ChartData>) {
1011
super.init(axis, data);
1112

1213
const x = this.axis.filter(item => item.type === "x");
@@ -26,7 +27,7 @@ export class Column extends BaseG2Chart {
2627
.scale('y', {
2728
nice: true,
2829
})
29-
.interaction('elementHighlight', { background: true });
30+
.interaction('elementHighlight', {background: true});
3031

3132
}
3233

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import {BaseG2Chart} from "@/views/chat/component/BaseG2Chart.ts";
2+
import type {ChartAxis, ChartData} from "@/views/chat/component/BaseChart.ts";
23

34
export class Line extends BaseG2Chart {
45

56
constructor(id: string) {
67
super(id, "line");
78
}
89

9-
init(axis: Array<{ name: string; value: string; type: "x" | "y" }>, data: Array<{ [key: string]: any }>) {
10+
init(axis: Array<ChartAxis>, data: Array<ChartData>) {
1011
super.init(axis, data);
1112

1213
const x = this.axis.filter(item => item.type === "x");

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import {BaseG2Chart} from "@/views/chat/component/BaseG2Chart.ts";
2+
import type {ChartAxis, ChartData} from "@/views/chat/component/BaseChart.ts";
3+
4+
export class Pie extends BaseG2Chart {
5+
6+
constructor(id: string) {
7+
super(id, "pie");
8+
}
9+
10+
init(axis: Array<ChartAxis>, data: Array<ChartData>) {
11+
super.init(axis, data);
12+
const y = this.axis.filter(item => item.type === "y");
13+
const series = this.axis.filter(item => item.type === "series");
14+
15+
if (series.length == 0 || y.length == 0) {
16+
return;
17+
}
18+
19+
this.chart.coordinate({type: 'theta', outerRadius: 0.8});
20+
21+
this.chart?.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+
;
28+
29+
30+
}
31+
32+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {BaseChart} from "@/views/chat/component/BaseChart.ts";
1+
import {BaseChart, type ChartAxis, type ChartData} from "@/views/chat/component/BaseChart.ts";
22
import {TableSheet, type S2Options, type S2DataConfig, type S2MountContainer} from "@antv/s2";
33
import {debounce} from "lodash-es";
44

@@ -33,7 +33,7 @@ export class Table extends BaseChart {
3333
}
3434
}
3535

36-
init(axis: Array<{ name: string; value: string; type: "x" | "y" }>, data: Array<{ [key: string]: any }>) {
36+
init(axis: Array<ChartAxis>, data: Array<ChartData>) {
3737
super.init(axis, data);
3838

3939
const s2DataConfig: S2DataConfig = {

‎frontend/src/views/chat/component/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@ import {Bar} from "@/views/chat/component/charts/Bar.ts";
33
import {Column} from "@/views/chat/component/charts/Column.ts";
44
import {Line} from "@/views/chat/component/charts/Line.ts";
55
import {Table} from "@/views/chat/component/charts/Table.ts";
6+
import {Pie} from "@/views/chat/component/charts/Pie.ts";
67

78
const CHART_TYPE_MAP: { [key: string]: any } = {
89
"table": Table,
910
"column": Column,
1011
"bar": Bar,
1112
"line": Line,
12-
"pie": undefined
13+
"pie": Pie
1314
}
1415

1516
const isParent = (type: any, parentType: any) => {

0 commit comments

Comments
 (0)