Ovilia commented on code in PR #19807: URL: https://github.com/apache/echarts/pull/19807#discussion_r1623906750
########## src/component/matrix/MatrixView.ts: ########## @@ -0,0 +1,172 @@ +/* +* Licensed to the Apache Software Foundation (ASF) under one +* or more contributor license agreements. See the NOTICE file +* distributed with this work for additional information +* regarding copyright ownership. The ASF licenses this file +* to you under the Apache License, Version 2.0 (the +* "License"); you may not use this file except in compliance +* with the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ + +import MatrixModel from '../../coord/matrix/MatrixModel'; +import ExtensionAPI from '../../core/ExtensionAPI'; +import ComponentView from '../../view/Component'; +import { createTextStyle } from '../../label/labelStyle'; +import GlobalModel from '../../model/Global'; +import * as graphic from '../../util/graphic'; + +class MatrixView extends ComponentView { + + static type = 'matrix'; + type = MatrixView.type; + + render(matrixModel: MatrixModel, ecModel: GlobalModel, api: ExtensionAPI) { + + const group = this.group; + + group.removeAll(); + + this._renderTable(matrixModel); + } + + protected _renderTable(matrixModel: MatrixModel) { + const coordSys = matrixModel.coordinateSystem; + const xDim = coordSys.getDim('x'); + const yDim = coordSys.getDim('y'); + const xModel = matrixModel.getModel('x'); + const yModel = matrixModel.getModel('y'); + const xLabelModel = xModel.getModel('label'); + const yLabelModel = yModel.getModel('label'); + const xItemStyle = xModel.getModel('itemStyle').getItemStyle(); + const yItemStyle = yModel.getModel('itemStyle').getItemStyle(); + + const rect = coordSys.getRect(); + const xLeavesCnt = xDim.getLeavesCount(); + const yLeavesCnt = yDim.getLeavesCount(); + const xCells = xDim.getCells(); + const xHeight = xDim.getHeight(); + const yCells = yDim.getCells(); + const yHeight = yDim.getHeight(); + const cellWidth = rect.width / (xLeavesCnt + yHeight); + const cellHeight = rect.height / (yLeavesCnt + xHeight); + + const xLeft = rect.x + cellWidth * yHeight; + for (let i = 0; i < xCells.length; i++) { + const cell = xCells[i]; + const width = cellWidth * cell.colSpan; + const height = cellHeight * cell.rowSpan; + const left = xLeft + cellWidth * cell.colId; + const top = rect.y + cellHeight * cell.rowId; + + this.group.add(new graphic.Rect({ + shape: { + x: left, + y: top, + width: width, + height: height + }, + style: xItemStyle + })); + if (xLabelModel.get('show')) { + this.group.add(new graphic.Text({ + style: createTextStyle(xLabelModel, { + text: cell.value, + x: left + width / 2, + y: top + height / 2, + verticalAlign: 'middle', + align: 'center' + }) + })); + } + } + + const yTop = rect.y + cellHeight * xHeight; + for (let i = 0; i < yCells.length; i++) { + const cell = yCells[i]; + const width = cellWidth * cell.rowSpan; + const height = cellHeight * cell.colSpan; + const left = rect.x + cellWidth * cell.rowId; + const top = yTop + cellHeight * cell.colId; + + this.group.add(new graphic.Rect({ + shape: { + x: left, + y: top, + width: width, + height: height + }, + style: yItemStyle + })); + if (yLabelModel.get('show')) { + this.group.add(new graphic.Text({ + style: createTextStyle(yLabelModel, { + text: cell.value, + x: left + width / 2, + y: top + height / 2, + verticalAlign: 'middle', + align: 'center' + }) + })); + } + } + + // Inner cells + const innerBackgroundStyle = matrixModel + .getModel('innerBackgroundStyle') + .getItemStyle(); + for (let i = 0; i < xLeavesCnt; i++) { + for (let j = 0; j < yLeavesCnt; j++) { + const left = xLeft + cellWidth * i; + const top = yTop + cellHeight * j; + this.group.add(new graphic.Rect({ + shape: { + x: left, + y: top, + width: cellWidth, + height: cellHeight + }, + style: innerBackgroundStyle + })); + } + } + + // Outer border + const backgroundStyle = matrixModel Review Comment: The border won't be darker unless the opacity of borderColors are not 1. I personally think providing a `border-collapse` like mechanism is over-kill because then, we should also implement other features like border widths and colors being different values at four sides. This should bring much work to implement it robustly. The reason why I choose to render rectangles with background and border is that it would be more difficult to think which option controls which border line. The image you provided is as expected. You should add `x.itemStyle.borderWidth: 0` and `y.itemStyle.borderWidth: 0` if you want to remove those rest borders. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org
