mirror of
https://gh-proxy.org/https://github.com/klinsmaya/SQLBot.git
synced 2026-11-08 01:06:59 +08:00
feat: change chat config
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import { BaseG2Chart } from '@/views/chat/component/BaseG2Chart.ts'
|
||||
import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
|
||||
import type { G2Spec } from '@antv/g2'
|
||||
|
||||
export class Bar extends BaseG2Chart {
|
||||
constructor(id: string) {
|
||||
@@ -17,37 +18,54 @@ export class Bar extends BaseG2Chart {
|
||||
return
|
||||
}
|
||||
|
||||
this.chart
|
||||
?.interval()
|
||||
.coordinate({ transform: [{ type: 'transpose' }] })
|
||||
.data(data)
|
||||
.encode('x', x[0].value)
|
||||
.encode('y', y[0].value)
|
||||
.axis({
|
||||
const options: G2Spec = {
|
||||
...this.chart.options(),
|
||||
type: 'interval',
|
||||
data: data,
|
||||
coordinate: { transform: [{ type: 'transpose' }] },
|
||||
encode: {
|
||||
x: x[0].value,
|
||||
y: y[0].value,
|
||||
color: series.length > 0 ? series[0].value : undefined,
|
||||
},
|
||||
axis: {
|
||||
x: { title: x[0].name },
|
||||
y: { title: y[0].name },
|
||||
})
|
||||
.scale('x', {
|
||||
nice: true,
|
||||
})
|
||||
.scale('y', {
|
||||
nice: true,
|
||||
})
|
||||
.interaction('elementHighlight', { background: true })
|
||||
.tooltip((data) => {
|
||||
},
|
||||
scale: {
|
||||
x: {
|
||||
nice: true,
|
||||
},
|
||||
y: {
|
||||
nice: true,
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
elementHighlight: { background: true },
|
||||
},
|
||||
tooltip: (data) => {
|
||||
if (series.length > 0) {
|
||||
return { name: data[series[0].value], value: data[y[0].value] }
|
||||
} else {
|
||||
return { name: y[0].name, value: data[y[0].value] }
|
||||
}
|
||||
})
|
||||
.label({
|
||||
text: y[0].value,
|
||||
transform: [{ type: 'overlapDodgeY' }, { type: 'exceedAdjust' }, { type: 'overlapHide' }],
|
||||
})
|
||||
},
|
||||
labels: [
|
||||
{
|
||||
text: y[0].value,
|
||||
transform: [
|
||||
{ type: 'overlapDodgeY' },
|
||||
{ type: 'contrastReverse' },
|
||||
{ type: 'overlapHide' },
|
||||
],
|
||||
},
|
||||
],
|
||||
} as G2Spec
|
||||
|
||||
if (series.length > 0) {
|
||||
this.chart?.encode('color', series[0].value).transform({ type: 'stackY' })
|
||||
options.transform = [{ type: 'stackY' }]
|
||||
}
|
||||
|
||||
this.chart.options(options)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { BaseG2Chart } from '@/views/chat/component/BaseG2Chart.ts'
|
||||
import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
|
||||
import type { G2Spec } from '@antv/g2'
|
||||
|
||||
export class Column extends BaseG2Chart {
|
||||
constructor(id: string) {
|
||||
@@ -17,36 +18,55 @@ export class Column extends BaseG2Chart {
|
||||
return
|
||||
}
|
||||
|
||||
this.chart
|
||||
?.interval()
|
||||
.data(data)
|
||||
.encode('x', x[0].value)
|
||||
.encode('y', y[0].value)
|
||||
.axis({
|
||||
const options: G2Spec = {
|
||||
...this.chart.options(),
|
||||
type: 'interval',
|
||||
data: data,
|
||||
encode: {
|
||||
x: x[0].value,
|
||||
y: y[0].value,
|
||||
color: series.length > 0 ? series[0].value : undefined,
|
||||
},
|
||||
axis: {
|
||||
x: { title: x[0].name },
|
||||
y: { title: y[0].name },
|
||||
})
|
||||
.scale('x', {
|
||||
nice: true,
|
||||
})
|
||||
.scale('y', {
|
||||
nice: true,
|
||||
})
|
||||
.interaction('elementHighlight', { background: true })
|
||||
.tooltip((data) => {
|
||||
},
|
||||
scale: {
|
||||
x: {
|
||||
nice: true,
|
||||
},
|
||||
y: {
|
||||
nice: true,
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
elementHighlight: { background: true },
|
||||
},
|
||||
tooltip: (data) => {
|
||||
if (series.length > 0) {
|
||||
return { name: data[series[0].value], value: data[y[0].value] }
|
||||
} else {
|
||||
return { name: y[0].name, value: data[y[0].value] }
|
||||
}
|
||||
})
|
||||
.label({
|
||||
text: y[0].value,
|
||||
transform: [{ type: 'overlapDodgeY' }, { type: 'exceedAdjust' }, { type: 'overlapHide' }],
|
||||
})
|
||||
},
|
||||
labels: [
|
||||
{
|
||||
text: y[0].value,
|
||||
position: 'top',
|
||||
dy: -25,
|
||||
transform: [
|
||||
{ type: 'overlapDodgeY' },
|
||||
{ type: 'contrastReverse' },
|
||||
{ type: 'overlapHide' },
|
||||
],
|
||||
},
|
||||
],
|
||||
} as G2Spec
|
||||
|
||||
if (series.length > 0) {
|
||||
this.chart?.encode('color', series[0].value).transform({ type: 'stackY' })
|
||||
options.transform = [{ type: 'stackY' }]
|
||||
}
|
||||
|
||||
this.chart.options(options)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { BaseG2Chart } from '@/views/chat/component/BaseG2Chart.ts'
|
||||
import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
|
||||
import type { G2Spec } from '@antv/g2'
|
||||
|
||||
export class Line extends BaseG2Chart {
|
||||
constructor(id: string) {
|
||||
@@ -17,43 +18,62 @@ export class Line extends BaseG2Chart {
|
||||
return
|
||||
}
|
||||
|
||||
this.chart
|
||||
?.data(data)
|
||||
.encode('x', x[0].value)
|
||||
.encode('y', y[0].value)
|
||||
.axis({
|
||||
const options: G2Spec = {
|
||||
...this.chart.options(),
|
||||
type: 'view',
|
||||
data: data,
|
||||
encode: {
|
||||
x: x[0].value,
|
||||
y: y[0].value,
|
||||
color: series.length > 0 ? series[0].value : undefined,
|
||||
},
|
||||
axis: {
|
||||
x: { title: x[0].name },
|
||||
y: { title: y[0].name },
|
||||
})
|
||||
.scale('x', {
|
||||
nice: true,
|
||||
})
|
||||
.scale('y', {
|
||||
nice: true,
|
||||
})
|
||||
|
||||
if (series.length > 0) {
|
||||
this.chart?.encode('color', series[0].value)
|
||||
}
|
||||
|
||||
this.chart
|
||||
?.line()
|
||||
.label({
|
||||
text: y[0].value,
|
||||
style: {
|
||||
dx: -10,
|
||||
dy: -12,
|
||||
},
|
||||
scale: {
|
||||
x: {
|
||||
nice: true,
|
||||
},
|
||||
transform: [{ type: 'overlapDodgeY' }, { type: 'exceedAdjust' }, { type: 'overlapHide' }],
|
||||
})
|
||||
.tooltip((data) => {
|
||||
if (series.length > 0) {
|
||||
return { name: data[series[0].value], value: data[y[0].value] }
|
||||
} else {
|
||||
return { name: y[0].name, value: data[y[0].value] }
|
||||
}
|
||||
})
|
||||
y: {
|
||||
nice: true,
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'line',
|
||||
labels: [
|
||||
{
|
||||
text: y[0].value,
|
||||
style: {
|
||||
dx: -10,
|
||||
dy: -12,
|
||||
},
|
||||
transform: [
|
||||
{ type: 'overlapDodgeY' },
|
||||
{ type: 'exceedAdjust' },
|
||||
{ type: 'overlapHide' },
|
||||
],
|
||||
},
|
||||
],
|
||||
tooltip: (data) => {
|
||||
if (series.length > 0) {
|
||||
return { name: data[series[0].value], value: data[y[0].value] }
|
||||
} else {
|
||||
return { name: y[0].name, value: data[y[0].value] }
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'point',
|
||||
style: {
|
||||
fill: 'white',
|
||||
},
|
||||
tooltip: false,
|
||||
},
|
||||
],
|
||||
} as G2Spec
|
||||
|
||||
this.chart?.point().style('fill', 'white').tooltip(false)
|
||||
this.chart.options(options)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { BaseG2Chart } from '@/views/chat/component/BaseG2Chart.ts'
|
||||
import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
|
||||
import type { G2Spec } from '@antv/g2'
|
||||
|
||||
export class Pie extends BaseG2Chart {
|
||||
constructor(id: string) {
|
||||
@@ -15,21 +16,30 @@ export class Pie extends BaseG2Chart {
|
||||
return
|
||||
}
|
||||
|
||||
this.chart.coordinate({ type: 'theta', outerRadius: 0.8 })
|
||||
|
||||
this.chart
|
||||
?.interval()
|
||||
.transform({ type: 'stackY' })
|
||||
.data(data)
|
||||
.encode('y', y[0].value)
|
||||
.encode('color', series[0].value)
|
||||
.legend('color', { position: 'bottom', layout: { justifyContent: 'center' } })
|
||||
.label({
|
||||
position: 'outside',
|
||||
text: (data: any) => `${data[series[0].value]}: ${data[y[0].value]}`,
|
||||
})
|
||||
.tooltip((data) => {
|
||||
const options: G2Spec = {
|
||||
...this.chart.options(),
|
||||
type: 'interval',
|
||||
coordinate: { type: 'theta', outerRadius: 0.8 },
|
||||
transform: [{ type: 'stackY' }],
|
||||
data: data,
|
||||
encode: {
|
||||
y: y[0].value,
|
||||
color: series[0].value,
|
||||
},
|
||||
legend: {
|
||||
color: { position: 'bottom', layout: { justifyContent: 'center' } },
|
||||
},
|
||||
labels: [
|
||||
{
|
||||
position: 'outside',
|
||||
text: (data: any) => `${data[series[0].value]}: ${data[y[0].value]}`,
|
||||
},
|
||||
],
|
||||
tooltip: (data) => {
|
||||
return { name: y[0].name, value: data[y[0].value] }
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
this.chart.options(options)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user