Skip to content

Commit

Permalink
Merge pull request #2079 from VisActor/fix/scatter-axes
Browse files Browse the repository at this point in the history 
fix: fix axes default config in scatter chart #2071
  • Loading branch information
@Rui-Sun
Rui-Sun authored Jul 12, 2024
2 parents 82cb9f5 + 87df4dc commit 876c580
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 27 deletions.
10 changes: 10 additions & 0 deletions common/changes/@visactor/vtable/fix-scatter-axes_2024-07-12-08-37.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vtable",
"comment": "fix: fix axes default config in scatter chart #2071",
"type": "none"
}
],
"packageName": "@visactor/vtable"
}
22 changes: 15 additions & 7 deletions packages/vtable/src/PivotChart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ import {
registerTextCell,
registerVideoCell
} from './scenegraph/group-creater/cell-type';
import { hasLinearAxis } from './layout/chart-helper/get-axis-config';

registerAxis();
registerEmptyTip();
Expand Down Expand Up @@ -969,7 +970,8 @@ export class PivotChart extends BaseTable implements PivotChartAPI {
collectValuesBy[xField] = {
by: columnKeys,
type: chartSeries.direction !== 'horizontal' ? 'xField' : undefined,
range: chartSeries.type === 'scatter' ? true : chartSeries.direction === 'horizontal',
// range: chartSeries.type === 'scatter' ? true : chartSeries.direction === 'horizontal',
range: hasLinearAxis(chartSeries, this._axes, chartSeries.direction === 'horizontal', true),
sortBy:
chartSeries.direction !== 'horizontal'
? chartSeries?.data?.fields?.[xField]?.domain ?? indicatorSpec?.data?.fields?.[xField]?.domain
Expand All @@ -982,7 +984,8 @@ export class PivotChart extends BaseTable implements PivotChartAPI {
(chartSeries.stack = true); //明确指定 chartSpec.stack为true
collectValuesBy[yField] = {
by: rowKeys,
range: chartSeries.type === 'scatter' ? true : chartSeries.direction !== 'horizontal', // direction默认为'vertical'
// range: chartSeries.type === 'scatter' ? true : chartSeries.direction !== 'horizontal', // direction默认为'vertical'
range: hasLinearAxis(chartSeries, this._axes, chartSeries.direction === 'horizontal', false),
sumBy: chartSeries.stack && columnKeys.concat(chartSeries?.xField), // 逻辑严谨的话 这个concat的值也需要结合 chartSeries.direction来判断是xField还是yField
sortBy:
chartSeries.direction === 'horizontal'
Expand All @@ -996,7 +999,8 @@ export class PivotChart extends BaseTable implements PivotChartAPI {
collectValuesBy[xField] = {
by: columnKeys,
type: indicatorSpec.direction !== 'horizontal' ? 'xField' : undefined,
range: indicatorSpec.type === 'scatter' ? true : indicatorSpec.direction === 'horizontal',
// range: indicatorSpec.type === 'scatter' ? true : indicatorSpec.direction === 'horizontal',
range: hasLinearAxis(indicatorSpec, this._axes, indicatorSpec.direction === 'horizontal', true),
sortBy:
indicatorSpec.direction !== 'horizontal' ? indicatorSpec?.data?.fields?.[xField]?.domain : undefined
};
Expand Down Expand Up @@ -1034,7 +1038,8 @@ export class PivotChart extends BaseTable implements PivotChartAPI {
collectValuesBy[yField] = {
by: rowKeys,
type: chartSeries.direction === 'horizontal' ? 'yField' : undefined,
range: chartSeries.type === 'scatter' ? true : chartSeries.direction !== 'horizontal',
// range: chartSeries.type === 'scatter' ? true : chartSeries.direction !== 'horizontal',
range: hasLinearAxis(chartSeries, this._axes, chartSeries.direction === 'horizontal', false),
sortBy:
chartSeries.direction === 'horizontal'
? chartSeries?.data?.fields?.[yField]?.domain ?? indicatorSpec?.data?.fields?.[yField]?.domain
Expand All @@ -1047,7 +1052,8 @@ export class PivotChart extends BaseTable implements PivotChartAPI {
(chartSeries.stack = true); //明确指定 chartSpec.stack为true
collectValuesBy[xField] = {
by: columnKeys,
range: chartSeries.type === 'scatter' ? true : chartSeries.direction === 'horizontal', // direction默认为'vertical'
// range: chartSeries.type === 'scatter' ? true : chartSeries.direction === 'horizontal', // direction默认为'vertical'
range: hasLinearAxis(chartSeries, this._axes, chartSeries.direction === 'horizontal', true),
sumBy: chartSeries.stack && rowKeys.concat(chartSeries?.yField),
sortBy:
chartSeries.direction !== 'horizontal'
Expand All @@ -1061,7 +1067,8 @@ export class PivotChart extends BaseTable implements PivotChartAPI {
collectValuesBy[yField] = {
by: rowKeys,
type: indicatorSpec.direction === 'horizontal' ? 'yField' : undefined,
range: indicatorSpec.type === 'scatter' ? true : indicatorSpec.direction !== 'horizontal',
// range: indicatorSpec.type === 'scatter' ? true : indicatorSpec.direction !== 'horizontal',
range: hasLinearAxis(indicatorSpec, this._axes, indicatorSpec.direction === 'horizontal', false),
sortBy:
indicatorSpec.direction === 'horizontal' ? indicatorSpec?.data?.fields?.[yField]?.domain : undefined
};
Expand All @@ -1073,7 +1080,8 @@ export class PivotChart extends BaseTable implements PivotChartAPI {
const xField = indicatorSpec.xField;
collectValuesBy[xField] = {
by: columnKeys,
range: indicatorSpec.type === 'scatter' ? true : indicatorSpec.direction === 'horizontal', // direction默认为'vertical'
// range: indicatorSpec.type === 'scatter' ? true : indicatorSpec.direction === 'horizontal', // direction默认为'vertical'
range: hasLinearAxis(indicatorSpec, this._axes, indicatorSpec.direction === 'horizontal', true),
sumBy: indicatorSpec.stack && rowKeys.concat(indicatorSpec?.yField),
sortBy:
indicatorSpec.direction !== 'horizontal' ? indicatorSpec?.data?.fields?.[xField]?.domain : undefined,
Expand Down
74 changes: 60 additions & 14 deletions packages/vtable/src/layout/chart-helper/get-axis-config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,22 +174,19 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo
// 左侧维度轴
return merge(
{
domain: chartType === 'scatter' ? undefined : Array.from(domain),
// domain:
// chartType === 'scatter'
// ? undefined
// : spec?.series?.length >= 1 //chartType === 'common' 原来这样判断的
// ? Array.from(domain)
// : Array.from(domain).reverse(),
range: chartType === 'scatter' ? domain : undefined,
// domain: chartType === 'scatter' ? undefined : Array.from(domain),
domain: axisOption?.type === 'linear' ? undefined : Array.from(domain),
// range: chartType === 'scatter' ? domain : undefined,
range: axisOption?.type === 'linear' ? domain : undefined,
title: {
autoRotate: true
}
},
axisOption,
{
orient: 'left',
type: chartType === 'scatter' ? axisOption?.type ?? 'linear' : 'band',
// type: chartType === 'scatter' ? axisOption?.type ?? 'linear' : 'band',
type: axisOption?.type ?? 'band',
__vtableChartTheme: theme,
// 默认左侧维度轴对应的图表direction 为 horizontal
// 散点图特殊处理
Expand Down Expand Up @@ -353,15 +350,16 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo
// 底部维度轴
return merge(
{
// domain: Array.from(domain)
domain: chartType === 'scatter' ? undefined : Array.from(domain),

range: chartType === 'scatter' ? domain : undefined
// domain: chartType === 'scatter' ? undefined : Array.from(domain),
domain: axisOption?.type === 'linear' ? undefined : Array.from(domain),
// range: chartType === 'scatter' ? domain : undefined
range: axisOption?.type === 'linear' ? domain : undefined
},
axisOption,
{
orient: 'bottom',
type: chartType === 'scatter' ? axisOption?.type ?? 'linear' : 'band',
// type: chartType === 'scatter' ? axisOption?.type ?? 'linear' : 'band',
type: axisOption?.type ?? 'band',
__vtableChartTheme: theme
}
);
Expand Down Expand Up @@ -684,3 +682,51 @@ type IOrientType = 'left' | 'top' | 'right' | 'bottom' | 'z';
function isXAxis(orient: IOrientType) {
return orient === 'bottom' || orient === 'top';
}

export function hasLinearAxis(spec: any, tableAxesConfig: any, isHorizontal: boolean, isThisXAxis: boolean): boolean {
if (!isArray(spec.axes) || spec.axes.length === 0) {
return (isHorizontal && isThisXAxis) || (!isHorizontal && !isThisXAxis);
}

for (let i = 0; i < spec.axes.length; i++) {
const axisSpec = spec.axes[i];
if (!isHorizontal && isThisXAxis && axisSpec.orient === 'bottom' && axisSpec.type === 'linear') {
return true;
}

if (isHorizontal && isThisXAxis && axisSpec.orient === 'bottom' && axisSpec.type !== 'linear') {
return true;
}

if (!isHorizontal && !isThisXAxis && axisSpec.orient === 'left' && axisSpec.type !== 'linear') {
return true;
}

if (isHorizontal && !isThisXAxis && axisSpec.orient === 'left' && axisSpec.type === 'linear') {
return true;
}
}

if (isArray(tableAxesConfig) && tableAxesConfig.length > 0) {
for (let i = 0; i < tableAxesConfig.length; i++) {
const axisSpec = tableAxesConfig[i];
if (!isHorizontal && isThisXAxis && axisSpec.orient === 'bottom' && axisSpec.type === 'linear') {
return true;
}

if (isHorizontal && isThisXAxis && axisSpec.orient === 'bottom' && axisSpec.type !== 'linear') {
return true;
}

if (!isHorizontal && !isThisXAxis && axisSpec.orient === 'left' && axisSpec.type !== 'linear') {
return true;
}

if (isHorizontal && !isThisXAxis && axisSpec.orient === 'left' && axisSpec.type === 'linear') {
return true;
}
}
}

return (isHorizontal && isThisXAxis) || (!isHorizontal && !isThisXAxis);
}
20 changes: 14 additions & 6 deletions packages/vtable/src/layout/chart-helper/get-chart-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,15 +246,19 @@ export function getChartAxes(col: number, row: number, layout: PivotHeaderLayout
const domain = data[rowPath ?? ''] as Set<string>;
const { axisOption, isPercent, chartType } = getAxisOption(col, row, 'left', layout);
axes.push(
// 左侧维度轴
merge(
{
domain: chartType === 'scatter' && !Array.isArray(domain) ? undefined : Array.from(domain ?? []),
range: chartType === 'scatter' && !Array.isArray(domain) ? domain : undefined,
// domain: chartType === 'scatter' && !Array.isArray(domain) ? undefined : Array.from(domain ?? []),
domain: axisOption?.type === 'linear' && !Array.isArray(domain) ? undefined : Array.from(domain ?? []),
// range: chartType === 'scatter' && !Array.isArray(domain) ? domain : undefined,
range: axisOption?.type === 'linear' && !Array.isArray(domain) ? domain : undefined,
label: { style: { fontSize: DEFAULT_TEXT_FONT_SIZE } }
},
axisOption,
{
type: chartType === 'scatter' && !Array.isArray(domain) ? axisOption?.type ?? 'linear' : 'band',
// type: chartType === 'scatter' && !Array.isArray(domain) ? axisOption?.type ?? 'linear' : 'band',
type: axisOption?.type ?? 'band',
orient: 'left',
// visible: true,
label: { visible: false },
Expand Down Expand Up @@ -347,15 +351,19 @@ export function getChartAxes(col: number, row: number, layout: PivotHeaderLayout

const { axisOption, isPercent, chartType } = getAxisOption(col, row, 'bottom', layout);
axes.push(
// 底部维度轴
merge(
{
domain: chartType === 'scatter' && !Array.isArray(domain) ? undefined : Array.from(domain ?? []),
range: chartType === 'scatter' && !Array.isArray(domain) ? domain : undefined,
// domain: chartType === 'scatter' && !Array.isArray(domain) ? undefined : Array.from(domain ?? []),
domain: axisOption?.type === 'linear' && !Array.isArray(domain) ? undefined : Array.from(domain ?? []),
// range: chartType === 'scatter' && !Array.isArray(domain) ? domain : undefined,
range: axisOption?.type === 'linear' && !Array.isArray(domain) ? domain : undefined,
label: { style: { fontSize: DEFAULT_TEXT_FONT_SIZE } }
},
axisOption,
{
type: chartType === 'scatter' && !Array.isArray(domain) ? axisOption?.type ?? 'linear' : 'band',
// type: chartType === 'scatter' && !Array.isArray(domain) ? axisOption?.type ?? 'linear' : 'band',
type: axisOption?.type ?? 'band',
orient: 'bottom',
visible: true,
label: { visible: false },
Expand Down

0 comments on commit 876c580

Please sign in to comment.