Skip to content

Commit 6229f8f

Browse files
scottsutscottsut
authored
Merge pull request #905 from TMBigGroup/local/dev-898
Local/dev 898
2 parents 7a78f26 + 3291de1 commit 6229f8f

File tree

29 files changed

+999
-48
lines changed

29 files changed

+999
-48
lines changed

‎frontend/craco.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@ module.exports = {
115115
setupFiles: ['jest-canvas-mock'],
116116
});
117117
},
118+
modulePaths: ['../'],
118119
},
119120

120121
devServer: {

‎frontend/src/app/components/ChartGraph/BasicBarChart/BasicBarChart.tsx‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ import {
2727
getReference2,
2828
getSeriesTooltips4Rectangular2,
2929
getStyles,
30+
hadAxisLabelOverflowConfig,
31+
setOptionsByAxisLabelOverflow,
3032
toFormattedValue,
3133
transformToDataSet,
3234
} from 'app/utils/chartHelper';
@@ -90,6 +92,8 @@ class BasicBarChart extends Chart {
9092

9193
onResize(opt: any, context): void {
9294
this.chart?.resize({ width: context?.width, height: context?.height });
95+
hadAxisLabelOverflowConfig(this.chart?.getOption()) &&
96+
this.onUpdated(opt, context);
9397
}
9498

9599
getOptions(dataset: ChartDataSetDTO, config: ChartConfig) {
@@ -152,6 +156,17 @@ class BasicBarChart extends Chart {
152156
this.makeTransposeAxis(axisInfo);
153157
}
154158

159+
// @TM 溢出自动根据bar长度设置标尺
160+
const option = setOptionsByAxisLabelOverflow({
161+
chart: this.chart,
162+
xAxis: axisInfo.xAxis,
163+
yAxis: axisInfo.yAxis,
164+
grid: getGridStyle(styleConfigs),
165+
yAxisNames,
166+
series,
167+
horizon: this.isHorizonDisplay,
168+
});
169+
155170
return {
156171
tooltip: {
157172
trigger: 'item',
@@ -164,10 +179,7 @@ class BasicBarChart extends Chart {
164179
),
165180
},
166181
legend: this.getLegendStyle(styleConfigs, series),
167-
grid: getGridStyle(styleConfigs),
168-
xAxis: axisInfo.xAxis,
169-
yAxis: axisInfo.yAxis,
170-
series,
182+
...option,
171183
};
172184
}
173185

@@ -428,6 +440,7 @@ class BasicBarChart extends Chart {
428440
rotate,
429441
showInterval,
430442
interval,
443+
overflow,
431444
] = getStyles(
432445
styles,
433446
['xAxis'],
@@ -440,6 +453,7 @@ class BasicBarChart extends Chart {
440453
'rotate',
441454
'showInterval',
442455
'interval',
456+
'overflow',
443457
],
444458
);
445459
const [showVerticalLine, verticalLineStyle] = getStyles(
@@ -455,6 +469,7 @@ class BasicBarChart extends Chart {
455469
show: showLabel,
456470
rotate,
457471
interval: showInterval ? interval : 'auto',
472+
overflow,
458473
...font,
459474
},
460475
axisLine: {
@@ -474,10 +489,10 @@ class BasicBarChart extends Chart {
474489

475490
private getLegendStyle(styles, series) {
476491
const seriesNames = (series || []).map((col: any) => col?.name);
477-
const [show, type, font, legendPos, selectAll] = getStyles(
492+
const [show, type, font, legendPos, selectAll, height] = getStyles(
478493
styles,
479494
['legend'],
480-
['showLegend', 'type', 'font', 'position', 'selectAll'],
495+
['showLegend', 'type', 'font', 'position', 'selectAll', 'height'],
481496
);
482497
let positions = {};
483498
let orient = {};
@@ -512,6 +527,7 @@ class BasicBarChart extends Chart {
512527
...positions,
513528
show,
514529
type,
530+
height: height || null,
515531
orient,
516532
selected,
517533
data: seriesNames,

‎frontend/src/app/components/ChartGraph/BasicBarChart/config.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,16 @@ const config: ChartConfig = {
246246
],
247247
},
248248
},
249+
{
250+
label: 'legend.height',
251+
key: 'height',
252+
default: 0,
253+
comType: 'inputNumber',
254+
options: {
255+
step: 40,
256+
min: 0,
257+
},
258+
},
249259
{
250260
label: 'viz.palette.style.font',
251261
key: 'font',
@@ -553,6 +563,7 @@ const config: ChartConfig = {
553563
position: '位置',
554564
showInterval: '显示刻度',
555565
interval: '刻度间隔',
566+
overflow: '溢出',
556567
showTitleAndUnit: '显示标题和刻度',
557568
nameLocation: '标题位置',
558569
nameRotate: '标题旋转',
@@ -571,6 +582,7 @@ const config: ChartConfig = {
571582
type: '图例类型',
572583
selectAll: '图例全选',
573584
position: '图例位置',
585+
height: '图例高度',
574586
},
575587
data: {
576588
color: '颜色',
@@ -624,6 +636,7 @@ const config: ChartConfig = {
624636
position: 'Position',
625637
showInterval: 'Show Interval',
626638
interval: 'Interval',
639+
overflow: 'Overflow',
627640
showTitleAndUnit: 'Show Title and Unit',
628641
nameLocation: 'Name Location',
629642
nameRotate: 'Name Rotate',
@@ -635,13 +648,15 @@ const config: ChartConfig = {
635648
title: 'Label',
636649
showLabel: 'Show Label',
637650
position: 'Position',
651+
height: 'Height',
638652
},
639653
legend: {
640654
title: 'Legend',
641655
showLegend: 'Show Legend',
642656
type: 'Type',
643657
selectAll: 'Select All',
644658
position: 'Position',
659+
height: 'Height',
645660
},
646661
data: {
647662
color: 'Color',

‎frontend/src/app/components/ChartGraph/BasicDoubleYChart/BasicDoubleYChart.tsx‎

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ import {
3030
getSeriesTooltips4Polar2,
3131
getSplitLine,
3232
getStyles,
33+
hadAxisLabelOverflowConfig,
34+
setOptionsByAxisLabelOverflow,
3335
toFormattedValue,
3436
transformToDataSet,
3537
} from 'app/utils/chartHelper';
@@ -83,6 +85,7 @@ class BasicDoubleYChart extends Chart {
8385

8486
onResize(opt: any, context): void {
8587
this.chart?.resize(context);
88+
hadAxisLabelOverflowConfig(this.chart?.getOption()) && this.onUpdated(opt);
8689
}
8790

8891
private getOptions(dataset: ChartDataSetDTO, config: ChartConfig) {
@@ -117,6 +120,30 @@ class BasicDoubleYChart extends Chart {
117120
return {};
118121
}
119122

123+
const yAxisNames = leftMetricsConfigs
124+
.concat(rightMetricsConfigs)
125+
.map(getColumnRenderName);
126+
127+
// @TM 溢出自动根据bar长度设置标尺
128+
const option = setOptionsByAxisLabelOverflow({
129+
chart: this.chart,
130+
xAxis: this.getXAxis(styleConfigs, groupConfigs, chartDataSet),
131+
yAxis: this.getYAxis(
132+
styleConfigs,
133+
leftMetricsConfigs,
134+
rightMetricsConfigs,
135+
),
136+
grid: getGridStyle(styleConfigs),
137+
series: this.getSeries(
138+
styleConfigs,
139+
settingConfigs,
140+
leftMetricsConfigs,
141+
rightMetricsConfigs,
142+
chartDataSet,
143+
),
144+
yAxisNames,
145+
});
146+
120147
return {
121148
tooltip: {
122149
trigger: 'axis',
@@ -132,24 +159,8 @@ class BasicDoubleYChart extends Chart {
132159
chartDataSet,
133160
),
134161
},
135-
grid: getGridStyle(styleConfigs),
136-
legend: this.getLegend(
137-
styleConfigs,
138-
leftMetricsConfigs.concat(rightMetricsConfigs).map(getColumnRenderName),
139-
),
140-
xAxis: this.getXAxis(styleConfigs, groupConfigs, chartDataSet),
141-
yAxis: this.getYAxis(
142-
styleConfigs,
143-
leftMetricsConfigs,
144-
rightMetricsConfigs,
145-
),
146-
series: this.getSeries(
147-
styleConfigs,
148-
settingConfigs,
149-
leftMetricsConfigs,
150-
rightMetricsConfigs,
151-
chartDataSet,
152-
),
162+
legend: this.getLegend(styleConfigs, yAxisNames),
163+
...option,
153164
};
154165
}
155166

@@ -245,6 +256,7 @@ class BasicDoubleYChart extends Chart {
245256
rotate,
246257
showInterval,
247258
interval,
259+
overflow,
248260
] = getStyles(
249261
styles,
250262
['xAxis'],
@@ -257,6 +269,7 @@ class BasicDoubleYChart extends Chart {
257269
'rotate',
258270
'showInterval',
259271
'interval',
272+
'overflow',
260273
],
261274
);
262275
const [showVerticalLine, verticalLineStyle] = getStyles(
@@ -274,6 +287,7 @@ class BasicDoubleYChart extends Chart {
274287
font,
275288
showInterval ? interval : null,
276289
rotate,
290+
overflow,
277291
),
278292
axisLine: getAxisLine(showAxis, lineStyle),
279293
axisTick: getAxisTick(showLabel, lineStyle),

‎frontend/src/app/components/ChartGraph/BasicDoubleYChart/config.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -416,6 +416,27 @@ const config: ChartConfig = {
416416
default: false,
417417
comType: 'checkbox',
418418
},
419+
{
420+
label: 'common.overflow',
421+
key: 'overflow',
422+
comType: 'select',
423+
default: 'break',
424+
options: {
425+
translateItemLabel: true,
426+
items: [
427+
{ label: '@[email protected]', value: 'none' },
428+
{
429+
label: '@[email protected]',
430+
value: 'truncate',
431+
},
432+
{ label: '@[email protected]', value: 'break' },
433+
{
434+
label: '@[email protected]',
435+
value: 'breakAll',
436+
},
437+
],
438+
},
439+
},
419440
{
420441
label: 'common.interval',
421442
key: 'interval',
@@ -556,12 +577,19 @@ const config: ChartConfig = {
556577
position: '位置',
557578
showInterval: '显示刻度',
558579
interval: '刻度间隔',
580+
overflow: '文本溢出',
559581
showTitleAndUnit: '显示标题和刻度',
560582
nameLocation: '标题位置',
561583
nameRotate: '标题旋转',
562584
nameGap: '标题与轴线距离',
563585
min: '最小值',
564586
max: '最大值',
587+
overflowType: {
588+
none: '溢出',
589+
truncate: '截断',
590+
break: '换行',
591+
breakAll: '强制换行',
592+
},
565593
},
566594
graph: {
567595
title: '图形设置',
@@ -583,6 +611,7 @@ const config: ChartConfig = {
583611
type: '图例类型',
584612
selectAll: '图例全选',
585613
position: '图例位置',
614+
height: '图例高度',
586615
},
587616
graphType: {
588617
line: '折线图',
@@ -631,12 +660,19 @@ const config: ChartConfig = {
631660
position: 'Position',
632661
showInterval: 'Show Interval',
633662
interval: 'Interval',
663+
overflow: 'Overflow',
634664
showTitleAndUnit: 'Show Title and Unit',
635665
nameLocation: 'Name Location',
636666
nameRotate: 'Name Rotate',
637667
nameGap: 'Name Gap',
638668
min: 'Min',
639669
max: 'Max',
670+
overflowType: {
671+
none: 'None',
672+
truncate: 'Truncate',
673+
break: 'Break',
674+
breakAll: 'BreakAll',
675+
},
640676
},
641677
graph: {
642678
title: 'Graph Setting',
@@ -658,6 +694,7 @@ const config: ChartConfig = {
658694
type: 'Type',
659695
selectAll: 'Select All',
660696
position: 'Position',
697+
height: 'Height',
661698
},
662699
leftY: {
663700
graph: 'Show Graph',

0 commit comments

Comments
 (0)