feat: matrix coordinate #19807
feat: matrix coordinate #19807
Conversation
|
Thanks for your contribution! The pull request is marked to be |
echarts-bot
bot
added
the
PR: awaiting doc
|
Document changes are required in this PR. Please also make a PR to apache/echarts-doc for document changes and update the issue id in the PR description. When the doc PR is merged, the maintainers will remove the |
|
The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-19807@ab3efd3 |
doc(matrix): add doc for apache/echarts#19807
| @@ -34,6 +34,7 @@ import type Cartesian2D from '../../coord/cartesian/Cartesian2D'; | |||
| import type Calendar from '../../coord/calendar/Calendar'; | |||
| import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle'; | |||
| import type Element from 'zrender/src/Element'; | |||
| import Matrix from '../../coord/matrix/Matrix'; | |||
There was a problem hiding this comment.
Always good to import type explicitly.
| static type = 'matrix'; | ||
| type = MatrixView.type; | ||
|
|
||
| render(matrixModel: MatrixModel, ecModel: GlobalModel, api: ExtensionAPI) { |
There was a problem hiding this comment.
The latter two parameters are unused, just remove them and relative imports.
| if (!this._option.data) { | ||
| this._leavesCount = 0; | ||
| return 0; | ||
| } | ||
| if (typeof this._option.data === 'string') { | ||
| this._leavesCount = 1; | ||
| return 1; | ||
| } | ||
| let cnt = 0; | ||
| for (let i = 0; i < this._option.data.length; i++) { | ||
| cnt += this._countLeaves(this._option.data[i]); | ||
| } |
There was a problem hiding this comment.
Extract this._option.data to a local constant for reducing several characters.
| this._leavesCount = 0; | ||
| return 0; | ||
| } | ||
| if (typeof this._option.data === 'string') { |
There was a problem hiding this comment.
Consider using the isString helper.
| if (!this._option.data) { | ||
| return 0; | ||
| } | ||
| if (typeof this._option.data === 'string') { | ||
| return 1; | ||
| } | ||
| let height = 0; | ||
| for (let i = 0; i < this._option.data.length; i++) { | ||
| height = Math.max(height, this._countHeight(this._option.data[i])); | ||
| } |
| this.group.add(new graphic.Text({ | ||
| style: createTextStyle(xLabelModel, { | ||
| text: cell.value, | ||
| x: left + width / 2, | ||
| y: top + height / 2, | ||
| verticalAlign: 'middle', | ||
| align: 'center' | ||
| }) | ||
| })); |
There was a problem hiding this comment.
It would be better to use the new API setTextConfig & setTextContent added since v5. We also should support silent option to allow disabling mouse events.
cellRect.setTextConfig({
position: 'inside'
});
cellRect.setTextContent(
new graphic.Text({
style: createTextStyle(xLabelModel, {
text: cell.value,
verticalAlign: 'middle',
align: 'center',
}),
silent: xLabelModel.get('silent')
})
);| this.group.add(new graphic.Text({ | ||
| style: createTextStyle(yLabelModel, { | ||
| text: cell.value, | ||
| x: left + width / 2, | ||
| y: top + height / 2, | ||
| verticalAlign: 'middle', | ||
| align: 'center' | ||
| }) | ||
| })); |
| } | ||
|
|
||
| // Outer border | ||
| const backgroundStyle = matrixModel |
There was a problem hiding this comment.
These borders may overlap and cause a darker border color. I'm not sure if we should provide a similar ability like the CSS table property border-collapse. It looks not easy to implement that feature.
And the chart seems rendering unexpectedly if I set the width of both the outer border and inner border to 0.
backgroundStyle: {
borderWidth: 0
},
innerBackgroundStyle: {
borderWidth: 0
}
There was a problem hiding this comment.
The package.json may need to be updated as well. 🤔
Line 172 in ab3efd3
Brief Information
This pull request is in the type of:
What does this PR do?
This PR introduces a new coordinate called "Matrix".
Multiple series like heatmap, pie, graph, custom can be used along with it.
More applications:
Fixed issues
Details
Before: What was the problem?
After: How does it behave after the fixing?
Document Info
One of the following should be checked.
Misc
ZRender Changes
Related test cases or examples to use the new APIs
N.A.
Others
Merging options
Other information