feat: Chord charts

src/chart/chord/ChordEdge.ts

@@ -0,0 +1,192 @@
+import type { PathProps, PathStyleProps } from 'zrender/src/graphic/Path';
+import type PathProxy from 'zrender/src/core/PathProxy';
+import { extend, isString } from 'zrender/src/core/util';
+import * as graphic from '../../util/graphic';
+import SeriesData from '../../data/SeriesData';
+import { GraphEdge } from '../../data/Graph';
+import type Model from '../../model/Model';
+import { getSectorCornerRadius } from '../helper/sectorHelper';
+import { saveOldStyle } from '../../animation/basicTransition';
+import ChordSeriesModel, { ChordEdgeItemOption, ChordEdgeLineStyleOption, ChordNodeItemOption } from './ChordSeries';
+import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states';
+import { getECData } from '../../util/innerStore';
+
+export class ChordPathShape {
+    // Souce node, two points forming an arc
+    s1: [number, number] = [0, 0];
+    s2: [number, number] = [0, 0];
+    sStartAngle: number = 0;
+    sEndAngle: number = 0;
+
+    // Target node, two points forming an arc
+    t1: [number, number] = [0, 0];
+    t2: [number, number] = [0, 0];
+    tStartAngle: number = 0;
+    tEndAngle: number = 0;
+
+    cx: number = 0;
+    cy: number = 0;
+    // series.r0 of ChordSeries
+    r: number = 0;
+
+    clockwise: boolean = true;
+}
+
+interface ChordEdgePathProps extends PathProps {
+    shape?: Partial<ChordPathShape>
+}
+
+export class ChordEdge extends graphic.Path<ChordEdgePathProps> {
+    shape: ChordPathShape;
+
+    constructor(
+        nodeData: SeriesData<ChordSeriesModel>,
+        edgeData: SeriesData,
+        edgeIdx: number,
+        startAngle: number
+    ) {
+        super();
+        getECData(this).dataType = 'edge';
+        this.updateData(nodeData, edgeData, edgeIdx, startAngle, true);
+    }
+
+    buildPath(ctx: PathProxy | CanvasRenderingContext2D, shape: ChordPathShape): void {
+        // Start from n11
+        ctx.moveTo(shape.s1[0], shape.s1[1]);
+
+        const ratio = 0.7;
+        const clockwise = shape.clockwise;
+
+        // Draw the arc from n11 to n12
+        ctx.arc(shape.cx, shape.cy, shape.r, shape.sStartAngle, shape.sEndAngle, !clockwise);
+
+        // Bezier curve to cp1 and then to n21
+        ctx.bezierCurveTo(
+            (shape.cx - shape.s2[0]) * ratio + shape.s2[0],
+            (shape.cy - shape.s2[1]) * ratio + shape.s2[1],
+            (shape.cx - shape.t1[0]) * ratio + shape.t1[0],
+            (shape.cy - shape.t1[1]) * ratio + shape.t1[1],
+            shape.t1[0],
+            shape.t1[1]
+        );
+
+        // Draw the arc from n21 to n22
+        ctx.arc(shape.cx, shape.cy, shape.r, shape.tStartAngle, shape.tEndAngle, !clockwise);
+
+        // Bezier curve back to cp2 and then to n11
+        ctx.bezierCurveTo(
+            (shape.cx - shape.t2[0]) * ratio + shape.t2[0],
+            (shape.cy - shape.t2[1]) * ratio + shape.t2[1],
+            (shape.cx - shape.s1[0]) * ratio + shape.s1[0],
+            (shape.cy - shape.s1[1]) * ratio + shape.s1[1],
+            shape.s1[0],
+            shape.s1[1]
+        );
+
+        ctx.closePath();
+    }
+
+    updateData(
+        nodeData: SeriesData<ChordSeriesModel>,
+        edgeData: SeriesData,
+        edgeIdx: number,
+        startAngle: number,
+        firstCreate?: boolean
+    ): void {
+        const seriesModel = nodeData.hostModel as ChordSeriesModel;
+        const edge = edgeData.graph.getEdgeByIndex(edgeIdx);
+        const layout = edge.getLayout();
+        const itemModel = edge.node1.getModel<ChordNodeItemOption>();
+        const edgeModel = edgeData.getItemModel<ChordEdgeItemOption>(edge.dataIndex);
+        const lineStyle = edgeModel.getModel('lineStyle');
+        const emphasisModel = edgeModel.getModel('emphasis');
+        const focus = emphasisModel.get('focus');
+
+        const shape: ChordPathShape = extend(
+            getSectorCornerRadius(itemModel.getModel('itemStyle'), layout, true),
+            layout
+        );
+
+        const el = this;
+
+        // Ignore NaN data.
+        if (isNaN(shape.sStartAngle) || isNaN(shape.tStartAngle)) {
+            // Use NaN shape to avoid drawing shape.
+            el.setShape(shape);
+            return;
+        }
+
+        if (firstCreate) {
+            el.setShape(shape);
+            applyEdgeFill(el, edge, nodeData, lineStyle);
+        }
+        else {
+            saveOldStyle(el);
+
+            applyEdgeFill(el, edge, nodeData, lineStyle);
+            graphic.updateProps(el, {
+                shape: shape
+            }, seriesModel, edgeIdx);
+        }
+
+        toggleHoverEmphasis(
+            this,
+            focus === 'adjacency'
+                ? edge.getAdjacentDataIndices()
+                : focus,
+            emphasisModel.get('blurScope'),
+            emphasisModel.get('disabled')
+        );
+
+        setStatesStylesFromModel(el, edgeModel, 'lineStyle');
+
+        edgeData.setItemGraphicEl(edge.dataIndex, el);
+    }
+}
+
+function applyEdgeFill(
+    edgeShape: ChordEdge,
+    edge: GraphEdge,
+    nodeData: SeriesData<ChordSeriesModel>,
+    lineStyleModel: Model<ChordEdgeLineStyleOption>
+) {
+    const node1 = edge.node1;
+    const node2 = edge.node2;
+    const edgeStyle = edgeShape.style as PathStyleProps;
+
+    edgeShape.setStyle(lineStyleModel.getLineStyle());
+
+    const color = lineStyleModel.get('color');
+    switch (color) {
+        case 'source':
+            // TODO: use visual and node1.getVisual('color');
+            edgeStyle.fill = nodeData.getItemVisual(node1.dataIndex, 'style').fill;
+            edgeStyle.decal = node1.getVisual('style').decal;
+            break;
+        case 'target':
+            edgeStyle.fill = nodeData.getItemVisual(node2.dataIndex, 'style').fill;
+            edgeStyle.decal = node2.getVisual('style').decal;
+            break;
+        case 'gradient':
+            const sourceColor = nodeData.getItemVisual(node1.dataIndex, 'style').fill;
+            const targetColor = nodeData.getItemVisual(node2.dataIndex, 'style').fill;
+            if (isString(sourceColor) && isString(targetColor)) {
+                // Gradient direction is perpendicular to the mid-angles
+                // of source and target nodes.
+                const shape = edgeShape.shape;
+                const sMidX = (shape.s1[0] + shape.s2[0]) / 2;
+                const sMidY = (shape.s1[1] + shape.s2[1]) / 2;
+                const tMidX = (shape.t1[0] + shape.t2[0]) / 2;
+                const tMidY = (shape.t1[1] + shape.t2[1]) / 2;
+                edgeStyle.fill = new graphic.LinearGradient(
+                    sMidX, sMidY, tMidX, tMidY,
+                    [
+                        { offset: 0, color: sourceColor },
+                        { offset: 1, color: targetColor }
+                    ],
+                    true
+                );
+            }
+            break;
+    }
+}

src/chart/chord/ChordPiece.ts

@@ -0,0 +1,169 @@
+import { extend, retrieve3 } from 'zrender/src/core/util';
+import * as graphic from '../../util/graphic';
+import SeriesData from '../../data/SeriesData';
+import { getSectorCornerRadius } from '../helper/sectorHelper';
+import ChordSeriesModel, { ChordNodeItemOption } from './ChordSeries';
+import type Model from '../../model/Model';
+import type { GraphNode } from '../../data/Graph';
+import { getLabelStatesModels, setLabelStyle } from '../../label/labelStyle';
+import type { BuiltinTextPosition } from 'zrender/src/core/types';
+import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states';
+import { getECData } from '../../util/innerStore';
+
+export default class ChordPiece extends graphic.Sector {
+
+    constructor(data: SeriesData, idx: number, startAngle: number) {
+        super();
+        getECData(this).dataType = 'node';
+        this.z2 = 2;
+
+        const text = new graphic.Text();
+
+        this.setTextContent(text);
+
+        this.updateData(data, idx, startAngle, true);
+    }
+
+    updateData(data: SeriesData, idx: number, startAngle?: number, firstCreate?: boolean): void {
+        const sector = this;
+        const node = data.graph.getNodeByIndex(idx);
+
+        const seriesModel = data.hostModel as ChordSeriesModel;
+        const itemModel = node.getModel<ChordNodeItemOption>();
+        const emphasisModel = itemModel.getModel('emphasis');
+
+        // layout position is the center of the sector
+        const layout = data.getItemLayout(idx) as graphic.Sector['shape'];
+        const shape: graphic.Sector['shape'] = extend(
+            getSectorCornerRadius(itemModel.getModel('itemStyle'), layout, true),
+            layout
+        );
+
+        const el = this;
+
+        // Ignore NaN data.
+        if (isNaN(shape.startAngle)) {
+            // Use NaN shape to avoid drawing shape.
+            el.setShape(shape);
+            return;
+        }
+
+        if (firstCreate) {
+            el.setShape(shape);
+        }
+        else {
+            graphic.updateProps(el, {
+                shape: shape
+            }, seriesModel, idx);
+        }
+
+        const sectorShape = extend(
+            getSectorCornerRadius(
+                itemModel.getModel('itemStyle'),
+                layout,
+                true
+            ),
+            layout
+        );
+        sector.setShape(sectorShape);
+        sector.useStyle(data.getItemVisual(idx, 'style'));
+        setStatesStylesFromModel(sector, itemModel);
+
+        this._updateLabel(seriesModel, itemModel, node);
+
+        data.setItemGraphicEl(idx, el);
+        setStatesStylesFromModel(el, itemModel, 'itemStyle');
+
+        // Add focus/blur states handling
+        const focus = emphasisModel.get('focus');
+        toggleHoverEmphasis(
+            this,
+            focus === 'adjacency'
+                ? node.getAdjacentDataIndices()
+                : focus,
+            emphasisModel.get('blurScope'),
+            emphasisModel.get('disabled')
+        );
+    }
+
+    protected _updateLabel(
+        seriesModel: ChordSeriesModel,
+        itemModel: Model<ChordNodeItemOption>,
+        node: GraphNode
+    ) {
+        const label = this.getTextContent();
+        const layout = node.getLayout();
+        const midAngle = (layout.startAngle + layout.endAngle) / 2;
+        const dx = Math.cos(midAngle);
+        const dy = Math.sin(midAngle);
+
+        const normalLabelModel = itemModel.getModel('label');
+        label.ignore = !normalLabelModel.get('show');
+
+        // Set label style
+        const labelStateModels = getLabelStatesModels(itemModel);
+        const style = node.getVisual('style');
+        setLabelStyle(
+            label,
+            labelStateModels,
+            {
+                labelFetcher: {
+                    getFormattedLabel(dataIndex, stateName, dataType, labelDimIndex, formatter, extendParams) {
+                        return seriesModel.getFormattedLabel(
+                            dataIndex, stateName, 'node',
+                            labelDimIndex,
+                            // ensure edgeLabel formatter is provided
+                            // to prevent the inheritance from `label.formatter` of the series
+                            retrieve3(
+                                formatter,
+                                labelStateModels.normal && labelStateModels.normal.get('formatter'),
+                                itemModel.get('name')
+                            ),
+                            extendParams
+                        );
+                    }
+                },
+                labelDataIndex: node.dataIndex,
+                defaultText: node.dataIndex + '',
+                inheritColor: style.fill,
+                defaultOpacity: style.opacity,
+                defaultOutsidePosition: 'startArc' as BuiltinTextPosition
+            }
+        );
+
+        // Set label position
+        const labelPosition = normalLabelModel.get('position') || 'outside';
+        const labelPadding = normalLabelModel.get('distance') || 0;
+
+        let r;
+        if (labelPosition === 'outside') {
+            r = layout.r + labelPadding;
+        }
+        else {
+            r = (layout.r + layout.r0) / 2;
+        }
+
+        this.textConfig = {
+            inside: labelPosition !== 'outside'
+        };
+
+        const align = labelPosition !== 'outside'
+            ? normalLabelModel.get('align') || 'center'
+            : (dx > 0 ? 'left' : 'right');
+
+        const verticalAlign = labelPosition !== 'outside'
+            ? normalLabelModel.get('verticalAlign') || 'middle'
+            : (dy > 0 ? 'top' : 'bottom');
+
+        label.attr({
+            x: dx * r + layout.cx,
+            y: dy * r + layout.cy,
+            rotation: 0,
+            style: {
+                align,
+                verticalAlign
+            }
+        });
+    }
+}
+