Skip to content

Commit

Permalink
feat(mapping): color shape size 字段只去对应的字段即可 (#1720)
Browse files Browse the repository at this point in the history 
* feat(color): color mapping field only 1

* feat(mapping): size, shape mapping field only 1
  • Loading branch information
@hustcc
hustcc authored Oct 14, 2020
1 parent 4f68222 commit 328fec7
Show file tree
Hide file tree
Showing 6 changed files with 45 additions and 36 deletions.
22 changes: 8 additions & 14 deletions __tests__/unit/adaptor/geometries/base-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,13 +74,13 @@ describe('adaptor - geometry', () => {
},
},
});
expect(plot.chart.geometries[0].getAttribute('color').getFields()).toEqual(['value']);
expect(plot.chart.geometries[0].getAttribute('color').getFields()).toEqual(['date']);

expect(plot.chart.geometries[0].getAttribute('color').values).toEqual([]);
expect(plot.chart.geometries[0].getAttribute('color').callback).toBeDefined();

expect(p).toEqual({
value: 1800,
date: '25/01/2018',
});
});

Expand Down Expand Up @@ -123,14 +123,13 @@ describe('adaptor - geometry', () => {
},
},
});
expect(plot.chart.geometries[0].getAttribute('color').getFields()).toEqual(['type', 'value']);
expect(plot.chart.geometries[0].getAttribute('color').getFields()).toEqual(['type']);

expect(plot.chart.geometries[0].getAttribute('color').values).toEqual([]);
expect(plot.chart.geometries[0].getAttribute('color').callback).toBeDefined();

expect(p).toEqual({
type: 'Ind/Oth',
value: 1800,
});
});

Expand All @@ -147,7 +146,7 @@ describe('adaptor - geometry', () => {
});

expect(plot.chart.geometries[0].type).toBe('interval');
expect(plot.chart.geometries[0].getAttribute('color').getFields()).toEqual(['type', 'date', 'value']);
expect(plot.chart.geometries[0].getAttribute('color').getFields()).toEqual(['type']);
});

it('size without sizeField', () => {
Expand Down Expand Up @@ -183,14 +182,13 @@ describe('adaptor - geometry', () => {
},
},
});
expect(plot.chart.geometries[0].getAttribute('size').getFields()).toEqual(['date', 'value']);
expect(plot.chart.geometries[0].getAttribute('size').getFields()).toEqual(['date']);

expect(plot.chart.geometries[0].getAttribute('size').values).toEqual([]);
expect(plot.chart.geometries[0].getAttribute('size').callback).toBeDefined();

expect(p).toEqual({
date: '25/01/2018',
value: 1800,
});
});

Expand Down Expand Up @@ -228,13 +226,12 @@ describe('adaptor - geometry', () => {
},
},
});
expect(plot.chart.geometries[0].getAttribute('size').getFields()).toEqual(['value', 'date']);
expect(plot.chart.geometries[0].getAttribute('size').getFields()).toEqual(['value']);

expect(plot.chart.geometries[0].getAttribute('size').values).toEqual([]);
expect(plot.chart.geometries[0].getAttribute('size').callback).toBeDefined();

expect(p).toEqual({
date: '25/01/2018',
value: 1800,
});
});
Expand Down Expand Up @@ -272,13 +269,12 @@ describe('adaptor - geometry', () => {
},
},
});
expect(plot.chart.geometries[0].getAttribute('shape').getFields()).toEqual(['date', 'value']);
expect(plot.chart.geometries[0].getAttribute('shape').getFields()).toEqual(['date']);
expect(plot.chart.geometries[0].getAttribute('shape').values).toEqual([]);
expect(plot.chart.geometries[0].getAttribute('shape').callback).toBeDefined();

expect(p).toEqual({
date: '25/01/2018',
value: 1800,
});
});

Expand Down Expand Up @@ -316,15 +312,13 @@ describe('adaptor - geometry', () => {
},
},
});
expect(plot.chart.geometries[0].getAttribute('shape').getFields()).toEqual(['type', 'date', 'value']);
expect(plot.chart.geometries[0].getAttribute('shape').getFields()).toEqual(['type']);

expect(plot.chart.geometries[0].getAttribute('shape').values).toEqual([]);
expect(plot.chart.geometries[0].getAttribute('shape').callback).toBeDefined();

expect(p).toEqual({
date: '25/01/2018',
type: 'Ind/Oth',
value: 1800,
});
});

Expand Down
2 changes: 1 addition & 1 deletion __tests__/unit/plots/liquid/liquid-style-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ describe('liquid', () => {
fill: percent > 0.75 ? 'red' : 'green',
};
},
color: () => 'blue',
color: 'blue',
});

liquid.render();
Expand Down
4 changes: 2 additions & 2 deletions __tests__/unit/plots/scatter/size-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,8 @@ describe('scatter', () => {
data,
xField: 'weight',
yField: 'height',
size: ({ height }) => {
return Math.ceil(height / 10);
size: ({ weight }) => {
return Math.ceil(weight / 10);
},
xAxis: {
nice: true,
Expand Down
4 changes: 4 additions & 0 deletions __tests__/unit/plots/waterfall/index-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,10 @@ describe('waterfall plot', () => {

it('color: risingFill & fallingFill', () => {
waterfall.update({ ...waterfall.options, risingFill: 'pink', fallingFill: '#000' });

// @ts-ignore
window.waterfall = waterfall;

expect(waterfall.chart.geometries[0].elements[0].shape.get('children')[0].attr('fill')).toBe('pink');
expect(waterfall.chart.geometries[0].elements[2].shape.get('children')[0].attr('fill')).toBe('#000');
});
Expand Down
40 changes: 26 additions & 14 deletions src/adaptor/geometries/base.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,16 +47,30 @@ export interface GeometryOptions extends Options {
*/
export function getMappingField(o: GeometryOptions, field: 'color' | 'shape' | 'size' | 'style'): string[] {
const { xField, yField, colorField, shapeField, sizeField, styleField, rawFields = [] } = o;
const fields = [xField, yField, colorField, shapeField, sizeField, styleField, ...rawFields];

// 一定能找到的！
const idx = ['x', 'y', 'color', 'shape', 'size', 'style'].indexOf(field);
let fields = [];

// 因为 color 会影响到数据分组，以及最后的图形映射。所以导致 bar 图中的 widthRatio 设置不生效
// 所以对于 color 字段，仅仅保留 colorField 好了！ + rawFields
// shape, size 同理
if (field === 'color') {
fields = [colorField || xField, ...rawFields];
} else if (field === 'shape') {
fields = [shapeField || xField, ...rawFields];
} else if (field === 'size') {
fields = [sizeField || xField, ...rawFields];
} else {
fields = [xField, yField, colorField, shapeField, sizeField, styleField, ...rawFields];

// 一定能找到的！
const idx = ['x', 'y', 'color', 'shape', 'size', 'style'].indexOf(field);

const f = fields[idx];
// 删除当前字段
fields.splice(idx, 1);
// 插入到第一个
fields.unshift(f);
const f = fields[idx];
// 删除当前字段
fields.splice(idx, 1);
// 插入到第一个
fields.unshift(f);
}

return uniq(fields.filter((f) => !!f));
}
Expand Down Expand Up @@ -88,7 +102,7 @@ export function getMappingFunction(mappingFields: string[], func: (datum: Datum)
*/
export function geometry<O extends GeometryOptions>(params: Params<O>): Params<O> {
const { chart, options } = params;
const { type, args, mapping, xField, yField, colorField, shapeField, sizeField } = options;
const { type, args, mapping, xField, yField, colorField, shapeField, sizeField, rawFields } = options;

// 如果没有 mapping 信息，那么直接返回
if (!mapping) {
Expand All @@ -104,15 +118,13 @@ export function geometry<O extends GeometryOptions>(params: Params<O>): Params<O
* color 的几种情况
* g.color('red');
* g.color('color', ['red', 'blue']);
* g.color('x*y', (x, y) => 'red');
* g.color('color*x*y', (color, x, y) => 'red');
* g.color('x', (x, y) => 'red');
* g.color('color', (color, x, y) => 'red');
*/
if (isString(color)) {
colorField ? geometry.color(colorField, color) : geometry.color(color);
} else if (isFunction(color)) {
// 对于单折线图、单面积图的特殊处理，如果 x 轴是分类 scale，会导致映射错误
let mappingFields = getMappingField(options, 'color');
mappingFields = ['line', 'area'].includes(type) ? mappingFields.filter((f: string) => f !== xField) : mappingFields;
const mappingFields = getMappingField(options, 'color');
geometry.color(mappingFields.join('*'), getMappingFunction(mappingFields, color));
} else {
colorField && geometry.color(colorField, color);
Expand Down
9 changes: 4 additions & 5 deletions src/plots/waterfall/adaptor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,22 +33,21 @@ function geometry(params: Params<WaterfallOptions>): Params<WaterfallOptions> {
chart.data(transformData(data, xField, yField, total));

// 瀑布图自带的 colorMapping
let colorMapping = color;
if (!color) {
colorMapping = (datum: Datum) => {
const colorMapping =
color ||
function (datum: Datum) {
if (get(datum, [IS_TOTAL])) {
return get(total, ['style', 'fill'], '');
}
return get(datum, [Y_FIELD, 1]) - get(datum, [Y_FIELD, 0]) > 0 ? risingFill : fallingFill;
};
}

const p = deepMix({}, params, {
options: {
xField: xField,
yField: Y_FIELD,
seriesField: xField,
rawFields: [yField, DIFF_FIELD, IS_TOTAL],
rawFields: [yField, DIFF_FIELD, IS_TOTAL, Y_FIELD],
widthRatio: columnWidthRatio,
interval: {
style: waterfallStyle,
Expand Down

0 comments on commit 328fec7

Please sign in to comment.