Skip to content

Commit

Permalink
Merge pull request #40 from VisActor/refactor/progressbars-callbackfu…
Browse files Browse the repository at this point in the history 
…cntion-arguments-rename-rate-to-percentile

refactor: rename rate to percentile
  • Loading branch information
@fangsmile
fangsmile committed Jun 16, 2023
2 parents ec77e89 + a8db420 commit 0cc8a0b
Show file tree
Hide file tree
Showing 8 changed files with 38 additions and 34 deletions.
6 changes: 3 additions & 3 deletions packages/vtable/examples/pivot/pivot-basic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function generatePivotDataSource(num, colCount) {
return array;
}
const DEFAULT_BAR_COLOR = data => {
const num = (data.rate ?? 0) * 100;
const num = (data.percentile ?? 0) * 100;
if (num > 80) {
return '#20a8d8';
}
Expand Down Expand Up @@ -216,8 +216,8 @@ export function createTable() {
// barBgColor: '#aaa',
// barColor: '#444',
barBgColor: data => {
return `rgb(${100 + 100 * (1 - (data.rate ?? 0))},${100 + 100 * (1 - (data.rate ?? 0))},${
255 * (1 - (data.rate ?? 0))
return `rgb(${100 + 100 * (1 - (data.percentile ?? 0))},${100 + 100 * (1 - (data.percentile ?? 0))},${
255 * (1 - (data.percentile ?? 0))
})`;
},
barColor: 'transparent'
Expand Down
6 changes: 3 additions & 3 deletions packages/vtable/examples/pivot/pivot-header-title.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ function generatePivotDataSource(num, colCount) {
return array;
}
const DEFAULT_BAR_COLOR = data => {
const num = (data.rate ?? 0) * 100;
const num = (data.percentile ?? 0) * 100;
if (num > 80) {
return '#20a8d8';
}
Expand Down Expand Up @@ -215,8 +215,8 @@ export function createTable() {
// barBgColor: '#aaa',
// barColor: '#444',
barBgColor: data => {
return `rgb(${100 + 100 * (1 - (data.rate ?? 0))},${100 + 100 * (1 - (data.rate ?? 0))},${
255 * (1 - (data.rate ?? 0))
return `rgb(${100 + 100 * (1 - (data.percentile ?? 0))},${100 + 100 * (1 - (data.percentile ?? 0))},${
255 * (1 - (data.percentile ?? 0))
})`;
},
barColor: 'transparent'
Expand Down
6 changes: 3 additions & 3 deletions packages/vtable/examples/stack-text/stack-pivot.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ function generatePivotDataSource(num, colCount) {
return array;
}
const DEFAULT_BAR_COLOR = data => {
const num = (data.rate ?? 0) * 100;
const num = (data.percentile ?? 0) * 100;
if (num > 80) {
return '#20a8d8';
}
Expand Down Expand Up @@ -188,8 +188,8 @@ export function createTable() {
// barBgColor: '#aaa',
// barColor: '#444',
barBgColor: data => {
return `rgb(${100 + 100 * (1 - (data.rate ?? 0))},${100 + 100 * (1 - (data.rate ?? 0))},${
255 * (1 - (data.rate ?? 0))
return `rgb(${100 + 100 * (1 - (data.percentile ?? 0))},${100 + 100 * (1 - (data.percentile ?? 0))},${
255 * (1 - (data.percentile ?? 0))
})`;
},
barColor: 'transparent'
Expand Down
6 changes: 4 additions & 2 deletions packages/vtable/examples/style/auto-wrap-text.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ function generatePivotDataSource(num, colCount) {
return array;
}
const DEFAULT_BAR_COLOR = data => {
const num = data.rate * 100;
const num = data.percentile * 100;
if (num > 80) {
return '#20a8d8';
}
Expand Down Expand Up @@ -333,7 +333,9 @@ export function createTable() {
// barBgColor: '#aaa',
// barColor: '#444',
barBgColor: data => {
return `rgb(${100 + 100 * (1 - data.rate)},${100 + 100 * (1 - data.rate)},${255 * (1 - data.rate)})`;
return `rgb(${100 + 100 * (1 - data.percentile)},${100 + 100 * (1 - data.percentile)},${
255 * (1 - data.percentile)
})`;
},
barColor: 'transparent',
autoWrapText: true
Expand Down
6 changes: 4 additions & 2 deletions packages/vtable/examples/style/function.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ function generatePivotDataSource(num, colCount) {
return array;
}
const DEFAULT_BAR_COLOR = data => {
const num = data.rate * 100;
const num = data.percentile * 100;
if (num > 80) {
return '#20a8d8';
}
Expand Down Expand Up @@ -340,7 +340,9 @@ export function createTable() {
// barBgColor: '#aaa',
// barColor: '#444',
barBgColor: data => {
return `rgb(${100 + 100 * (1 - data.rate)},${100 + 100 * (1 - data.rate)},${255 * (1 - data.rate)})`;
return `rgb(${100 + 100 * (1 - data.percentile)},${100 + 100 * (1 - data.percentile)},${
255 * (1 - data.percentile)
})`;
},
barColor: 'transparent'
}),
Expand Down
8 changes: 4 additions & 4 deletions packages/vtable/examples/type/progress-bar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,8 @@ export function createTable() {
// barBgColor: '#aaa',
// barColor: '#444',
barBgColor: data => {
return `rgb(${100 + 100 * (1 - Number(data.rate))},${100 + 100 * (1 - Number(data.rate))},${
255 * (1 - Number(data.rate))
return `rgb(${100 + 100 * (1 - Number(data.percentile))},${100 + 100 * (1 - Number(data.percentile))},${
255 * (1 - Number(data.percentile))
})`;
},
barColor: 'transparent'
Expand All @@ -91,8 +91,8 @@ export function createTable() {
width: 120,
columnType: 'progressbar',
style: {
barBgColor: data => (Number(data.rate) > 0.5 ? '#faa' : '#aaa'),
barColor: data => (Number(data.rate) > 0.5 ? '#f44' : '#444')
barBgColor: data => (Number(data.percentile) > 0.5 ? '#faa' : '#aaa'),
barColor: data => (Number(data.percentile) > 0.5 ? '#f44' : '#444')
}
},
{
Expand Down
32 changes: 16 additions & 16 deletions packages/vtable/src/scenegraph/group-creater/cell-type/progress-bar-cell.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ export function createProgressBarCell(
}

if ((progressBarDefine.barType ?? 'default') === 'default') {
const rate =
const percentile =
num < progressBarDefine.min
? 0
: num > progressBarDefine.max
Expand All @@ -152,7 +152,7 @@ export function createProgressBarCell(
context: null,
value,
dataValue,
rate
percentile
});

if (bgFillColor) {
Expand All @@ -166,7 +166,7 @@ export function createProgressBarCell(
percentCompleteBarGroup.addChild(barBack);
}

const barSize = Math.min(barMaxWidth * rate, barMaxWidth);
const barSize = Math.min(barMaxWidth * percentile, barMaxWidth);
const fillColor =
getOrApply(barColor as any, {
col,
Expand All @@ -175,7 +175,7 @@ export function createProgressBarCell(
context: null,
value,
dataValue,
rate
percentile
}) || '#20a8d8';
const barMain = createRect({
x: barLeft,
Expand Down Expand Up @@ -210,7 +210,7 @@ export function createProgressBarCell(
context: null,
value,
dataValue,
rate: positiveRate
percentile: positiveRate
});
if (bgFillColor) {
const barBack = createRect({
Expand Down Expand Up @@ -249,7 +249,7 @@ export function createProgressBarCell(
context: null,
value,
dataValue,
rate: negativeRate
percentile: negativeRate
}) || '#20a8d8';
const barNega = createRect({
x: barRectNega.left,
Expand Down Expand Up @@ -283,7 +283,7 @@ export function createProgressBarCell(
context: null,
value,
dataValue,
rate: positiveRate
percentile: positiveRate
}) || '#20a8d8';
const barPosi = createRect({
x: barRectPosi.left,
Expand Down Expand Up @@ -324,7 +324,7 @@ export function createProgressBarCell(
context: null,
value,
dataValue,
rate: positiveRate
percentile: positiveRate
}) || '#20a8d8';
if (barMarkPosition === 'right') {
const markLeft = barRightToLeft
Expand All @@ -351,7 +351,7 @@ export function createProgressBarCell(
context: null,
value,
dataValue,
rate: negativeRate
percentile: negativeRate
}) || '#20a8d8';
if (barMarkPosition === 'right') {
const markLeft = barRightToLeft
Expand Down Expand Up @@ -387,12 +387,12 @@ export function createProgressBarCell(
const range = Math.max(_negativeRange, _positiveRange);

// 计算rate
const rate = range === 0 ? 0 : Math.abs(num) / range;
const percentile = range === 0 ? 0 : Math.abs(num) / range;

// 绘制
// 绘制背景
const barMaxWidth = width - barPaddingLeft - barPaddingRight - 1; /*罫線*/
const barSize = Math.min(barMaxWidth * rate, barMaxWidth);
const barSize = Math.min(barMaxWidth * percentile, barMaxWidth);
const barTop = bottom - barPaddingBottom - (barHeight as number) - (barBottom as number) - 1; /*罫線*/
const barLeft = barRightToLeft ? right - barPaddingRight - barSize : left + barPaddingLeft;
const barBgFillColor =
Expand All @@ -403,7 +403,7 @@ export function createProgressBarCell(
context: null,
value,
dataValue,
rate
percentile
}) || '#f0f3f5';
const barBg = createRect({
x: barLeft,
Expand All @@ -430,7 +430,7 @@ export function createProgressBarCell(
table,
context: null,
value,
rate,
percentile,
dataValue
}) || '#20a8d8';
} else {
Expand All @@ -442,7 +442,7 @@ export function createProgressBarCell(
context: null,
value,
dataValue,
rate
percentile
}) || '#20a8d8';
}
const bar = createRect({
Expand All @@ -468,7 +468,7 @@ export function createProgressBarCell(
context: null,
value,
dataValue,
rate
percentile
}) || '#20a8d8';
} else {
barMarkStrokeColor =
Expand All @@ -479,7 +479,7 @@ export function createProgressBarCell(
context: null,
value,
dataValue,
rate
percentile
}) || '#20a8d8';
}
if (barMarkPosition === 'right') {
Expand Down
2 changes: 1 addition & 1 deletion packages/vtable/src/ts-types/style-define.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export interface StylePropertyFunctionArg {
/**原始值 */
dataValue: string;
/** progressbar类型特有，表示当前数值在总体数据范围的比例 */
rate?: number;
percentile?: number;
/** 单元格的表头路径信息 */
cellHeaderPaths: ICellHeaderPaths;
}
Expand Down

0 comments on commit 0cc8a0b

Please sign in to comment.