Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: fix axes default config in scatter chart #2071 #2079

Merged
merged 3 commits into from
Jul 12, 2024
Merged

fix: fix axes default config in scatter chart #2071 #2079

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a3e0482
fix: fix axes default config in scatter chart #2071
Rui-Sun Jul 12, 2024
991c149
fix: fix axis judgement in hasLinearAxis()
Rui-Sun Jul 12, 2024
87df4dc
fix: add table axes config in hasLinearAxis()
Rui-Sun Jul 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions common/changes/@visactor/vtable/fix-scatter-axes_2024-07-12-08-37.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading