From 3606ef7e7ef68e874aa4959e2857e273db658d6f Mon Sep 17 00:00:00 2001 From: zengyue Date: Fri, 3 Sep 2021 17:49:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85legend=E8=8E=B7?= =?UTF-8?q?=E5=8F=96=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/f2-next/src/chart/index.ts | 7 +++ .../f2-next/src/components/geometry/index.tsx | 38 ++++++++++++++- .../src/components/legend/legendView.tsx | 35 ++++++++------ .../src/components/legend/withLegend.tsx | 47 +++++-------------- .../src/components/tooltip/tooltipView.tsx | 5 +- .../components/interval/interval.test.tsx | 2 +- 6 files changed, 80 insertions(+), 54 deletions(-) diff --git a/packages/f2-next/src/chart/index.ts b/packages/f2-next/src/chart/index.ts index 39a8d4ae8..b226304e8 100644 --- a/packages/f2-next/src/chart/index.ts +++ b/packages/f2-next/src/chart/index.ts @@ -121,6 +121,13 @@ class Chart extends Container implements IChart, ThemeMixin, CoordMixin, ScaleMi return geometrys[0].getSnapRecords(point); } + getLegendItems(point) { + const geometrys = this.getGeometrys(); + if (!geometrys.length) return; + // @ts-ignore + return geometrys[0].getLegendItems(point); + } + getXScales() { const geometrys = this.getGeometrys(); return geometrys.map(component => { diff --git a/packages/f2-next/src/components/geometry/index.tsx b/packages/f2-next/src/components/geometry/index.tsx index 34b20d1a0..b201b157e 100644 --- a/packages/f2-next/src/components/geometry/index.tsx +++ b/packages/f2-next/src/components/geometry/index.tsx @@ -26,6 +26,7 @@ const GROUP_ATTRS = ["color", "size", "shape"]; class Geometry extends Component implements AttrMixin { isGeometry = true; + isInit = false; chart: Chart; data: any; attrs: any = {}; @@ -71,10 +72,18 @@ class Geometry extends Component implements AttrMixin { }); } - mount() { + _init() { + if (this.isInit) { + return; + } this._createAttrs(); this._adjustScales(); this._processData(); + this.isInit = true; + } + + mount() { + this._init(); } _createAttrs() { @@ -422,13 +431,38 @@ class Geometry extends Component implements AttrMixin { const originValue = record[FIELD_ORIGIN][xfield]; if (xScale.type === 'timeCat' && toTimeStamp(originValue) === value) { rst.push(record); - } else if (originValue === value){ + } else if (originValue === value) { rst.push(record); } } } return rst; } + + getLegendItems() { + // TODO 挪到chart里去 + if (!this.isInit) { + this._init(); + } + const colorAttr = this.getAttr('color'); + if (!colorAttr) return null; + const { scale } = colorAttr; + if (!scale.isCategory) return null; + const { chart } = this; + const { theme } = chart; + const ticks = scale.getTicks(); + colorAttr.setRange(theme.colors); + const items = ticks.map(tick => { + const { text, tickValue } = tick; + const color = colorAttr.mapping(tickValue) || theme.colors[0]; + return { + color, + name: text, // for display + tickValue, + }; + }); + return items; + } } applyMixins(Geometry, [ AttrMixin ]); diff --git a/packages/f2-next/src/components/legend/legendView.tsx b/packages/f2-next/src/components/legend/legendView.tsx index 7033f6e82..a20d23a5f 100644 --- a/packages/f2-next/src/components/legend/legendView.tsx +++ b/packages/f2-next/src/components/legend/legendView.tsx @@ -1,24 +1,31 @@ import { jsx } from '../../jsx'; export default (props) => { - const { items } = props; - return null; + const { items, layout } = props; + const { width } = layout; return ( { items.map(item => { const { color, name, value } = item; return ( - + { { value ? + attrs={{ + fill: 'black', + text: `: ${value}`, + }} + /> : - null + null } ) diff --git a/packages/f2-next/src/components/legend/withLegend.tsx b/packages/f2-next/src/components/legend/withLegend.tsx index 515511a7e..75b27c4d8 100644 --- a/packages/f2-next/src/components/legend/withLegend.tsx +++ b/packages/f2-next/src/components/legend/withLegend.tsx @@ -1,50 +1,27 @@ -import { jsx } from '../../jsx'; +import { jsx, render, renderJSXElement } from '../../jsx'; import Component from '../../base/component'; -import Layout from '../../base/layout'; export default View => { return class Legend extends Component { chart: any; - layout: Layout; - - getGeometry() { - const { chart } = this; - - const geometrys = chart.getGeometrys(); - // 默认处理第一个图形 - return geometrys[0]; - } mount() { - // const { layout } = this; - // this.layout = new Layout({ - // left: layout.left, - // top: layout.top, - // width: 0, - // height: 0, - // }); - // this.getItems(); + const { chart, container } = this; + const { coord } = chart; + const shape = render(renderJSXElement(this.render()), container); + const bbox = shape.getBBox(); + shape.remove(); + const { top, height } = coord; + coord.update({ + top: top + bbox.height, + height: height - bbox.height, + }); } getItems() { - const geometry = this.getGeometry(); - const colorOption = geometry.getAttrOption('color'); - if (!colorOption) return null; - const { field } = colorOption; const { chart } = this; - const scale = chart.getScale(field); - if (!scale.isCategory) return null; - - return [{ - color: 'red', - name: '1', - value: '11' - }, { - color: 'red', - name: '1', - value: '11' - }] + return chart.getLegendItems(); } render() { diff --git a/packages/f2-next/src/components/tooltip/tooltipView.tsx b/packages/f2-next/src/components/tooltip/tooltipView.tsx index 58f4924f2..870200010 100644 --- a/packages/f2-next/src/components/tooltip/tooltipView.tsx +++ b/packages/f2-next/src/components/tooltip/tooltipView.tsx @@ -7,15 +7,14 @@ export default (props) => { return ( { records.map(record => { return ( { {/* */} {/* */} + -