diff --git a/core/core-frontend/src/models/chart/chart-senior.d.ts b/core/core-frontend/src/models/chart/chart-senior.d.ts index ab9d0cdceb..30747503dd 100644 --- a/core/core-frontend/src/models/chart/chart-senior.d.ts +++ b/core/core-frontend/src/models/chart/chart-senior.d.ts @@ -123,6 +123,10 @@ declare interface ChartThreshold { * 仪表盘阈值: x,y,z */ gaugeThreshold: string + /** + * 水波图阈值: x,y,z + */ + liquidThreshold: string /** * 指标卡阈值 */ diff --git a/core/core-frontend/src/models/chart/chart.d.ts b/core/core-frontend/src/models/chart/chart.d.ts index a39be37515..9de6ebdd0e 100644 --- a/core/core-frontend/src/models/chart/chart.d.ts +++ b/core/core-frontend/src/models/chart/chart.d.ts @@ -117,6 +117,14 @@ declare interface Axis extends ChartViewField { * 维度/指标分组类型 */ groupType: 'q' | 'd' + /** + * 排序规则 + */ + sort: 'asc' | 'desc' | 'none' | 'custom_sort' + /** + * 自定义排序项 + */ + customSort: string[] } declare interface ChartViewField { /** diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue index f10de480e6..589eb39de0 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue @@ -61,10 +61,10 @@ const init = () => { const changeThreshold = () => { emit('onThresholdChange', state.thresholdForm) } -const gaugeThresholdChange = () => { +const changeSplitThreshold = (threshold: string) => { // check input - if (state.thresholdForm.gaugeThreshold) { - const arr = state.thresholdForm.gaugeThreshold.split(',') + if (threshold) { + const arr = threshold.split(',') for (let i = 0; i < arr.length; i++) { const ele = arr[i] if (parseFloat(ele).toString() === 'NaN' || parseFloat(ele) <= 0 || parseFloat(ele) >= 100) { @@ -246,7 +246,7 @@ init() style="width: 100px; margin: 0 10px" size="small" clearable - @change="gaugeThresholdChange" + @change="changeSplitThreshold" /> ,100 @@ -260,6 +260,36 @@ init() + + + + 0, + + ,100 + + + + + + + diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts index 29e38eebe1..4e7bd2fa6e 100644 --- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts +++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts @@ -675,6 +675,7 @@ export const DEFAULT_ASSIST_LINE_CFG: ChartAssistLineCfg = { export const DEFAULT_THRESHOLD: ChartThreshold = { enable: false, gaugeThreshold: '', + liquidThreshold: '', labelThreshold: [], tableThreshold: [], textLabelThreshold: [] diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts index 40de8d9e64..bdbd824b2d 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts @@ -19,7 +19,8 @@ export class Liquid extends G2PlotChartView { 'basic-style-selector', 'label-selector', 'misc-selector', - 'title-selector' + 'title-selector', + 'threshold' ] propertyInner: EditorPropertyInner = { 'background-overall-component': ['all'], @@ -37,7 +38,8 @@ export class Liquid extends G2PlotChartView { 'fontFamily', 'letterSpace', 'fontShadow' - ] + ], + threshold: ['liquidThreshold'] } axis: AxisType[] = ['yAxis', 'filter'] axisConfig: AxisConfig = { @@ -147,6 +149,31 @@ export class Liquid extends G2PlotChartView { } } + protected configThreshold(chart: Chart, options: LiquidOptions): LiquidOptions { + const senior = parseJson(chart.senior) + if (senior?.threshold?.enable) { + const { liquidThreshold } = senior?.threshold + if (liquidThreshold) { + const { paletteQualitative10: colors } = (options.theme as any).styleSheet + const liquidStyle = () => { + const thresholdArr = liquidThreshold.split(',') + let index = 0 + thresholdArr.forEach((v, i) => { + if (options.percent > parseFloat(v) / 100) { + index = i + 1 + } + }) + return { + fill: colors[index % colors.length], + stroke: colors[index % colors.length] + } + } + return { ...options, liquidStyle } + } + } + return options + } + setupDefaultOptions(chart: ChartObj): ChartObj { chart.customAttr.label = { ...chart.customAttr.label, @@ -162,7 +189,12 @@ export class Liquid extends G2PlotChartView { } protected setupOptions(chart: Chart, options: LiquidOptions): LiquidOptions { - return flow(this.configTheme, this.configMisc, this.configLabel)(chart, options) + return flow( + this.configTheme, + this.configMisc, + this.configLabel, + this.configThreshold + )(chart, options) } constructor() { super('liquid', DEFAULT_LIQUID_DATA)