This is an automated email from the ASF dual-hosted git repository. urfree pushed a commit to branch matrix-page in repository https://gitbox.apache.org/repos/asf/pulsar-site.git
commit 1715991377dc9af29de904f5b767af6c0305fd10 Author: Li Li <[email protected]> AuthorDate: Wed Apr 12 11:12:14 2023 +0800 update Signed-off-by: Li Li <[email protected]> --- data/matrix.js | 81 ++++++++++++++++++++++++++++++++++++++++++-- src/css/custom.css | 4 +-- src/pages/matrix.js | 97 ++++++++++++++++++++++++++++++++--------------------- 3 files changed, 139 insertions(+), 43 deletions(-) diff --git a/data/matrix.js b/data/matrix.js index 51dbcc10492..c0460e56f81 100644 --- a/data/matrix.js +++ b/data/matrix.js @@ -1,3 +1,80 @@ module.exports = { - -} \ No newline at end of file + languages: [ + "Java", + "C++", + "Go", + "Python", + "Node.js", + "C#/DotPulsar", + "Websocket", + "REST", + ".NET (C#/F#/VB)", + ], + client: [ + { + Feature: "TLS encryption", + Java: 2, + "C++": 2, + Go: 2, + Python: 2, + Nodejs: 2, + "C#/DotPulsar": 2, + Websocket: 0, + REST: 0, + "NET(C#/F#/VB)": 2, + }, + { + Feature: "Authentication", + Children: [ + { + Feature: "JWT", + Java: 2, + "C++": 2, + Go: 2, + Python: 2, + Nodejs: 2, + "C#/DotPulsar": 2, + Websocket: 0, + REST: 0, + "NET(C#/F#/VB)": 2, + }, + { + Feature: "mTLS", + Java: 2, + "C++": 2, + Go: 2, + Python: 2, + Nodejs: 2, + "C#/DotPulsar": 2, + Websocket: 0, + REST: 0, + "NET(C#/F#/VB)": 2, + }, + { + Feature: "Kerberos", + Java: 2, + "C++": 0, + Go: 0, + Python: 0, + Nodejs: 0, + "C#/DotPulsar": 0, + Websocket: 0, + REST: 0, + "NET(C#/F#/VB)": 0, + }, + ], + }, + { + Feature: "Transaction", + Java: 2, + "C++": 2, + Go: 2, + Python: 2, + Nodejs: 2, + "C#/DotPulsar": 2, + Websocket: 0, + REST: 0, + "NET(C#/F#/VB)": 2, + }, + ], +}; diff --git a/src/css/custom.css b/src/css/custom.css index d2cd0deda9b..1fd9a6ebd7e 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1303,5 +1303,5 @@ table td { } .BaseTable__row-cell { - border-bottom: 1px solid rgb(209 213 219) !important; -} \ No newline at end of file + border-bottom: 1px solid rgb(209 213 219); +} diff --git a/src/pages/matrix.js b/src/pages/matrix.js index a49c1d3bfc0..f30c1d9814c 100644 --- a/src/pages/matrix.js +++ b/src/pages/matrix.js @@ -12,61 +12,81 @@ import BaseTable, { TableRow as BaseTableRow, } from "react-base-table"; -const generateColumns = (count = 10, prefix = "column-", props) => - new Array(count).fill(0).map((column, columnIndex) => ({ - ...props, - key: `${prefix}${columnIndex}`, - dataKey: `${prefix}${columnIndex}`, - title: `Column ${columnIndex}`, - width: 150, - })); +import { languages, client } from "../../data/matrix.js"; -const generateData = (columns, count = 200, prefix = "row-") => - new Array(count).fill(0).map((row, rowIndex) => { - return columns.reduce( - (rowData, column, columnIndex) => { - if (columnIndex == 0 && rowIndex % 2 == 1) { - rowData[column.dataKey] = ``; - } else { - rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`; - } - return rowData; - }, - { - id: `${prefix}${rowIndex}`, - parentId: null, - } - ); +const _key = (language) => language.replace(".", "").replace(" ", ""); +const genColomns = () => { + return ["Feature", "Sub"].concat(languages).map((language, index) => { + return { + key: _key(language), + dataKey: _key(language), + title: language === "Sub" ? "" : language, + width: index > 1 ? 120 : 150, + }; + }); +}; + +const genData = () => { + const datas = []; + client.forEach((feature) => { + if (feature.Children) { + feature.Children.forEach((child, index) => { + const data = { + id: feature.Feature + "-" + child.Feature, + Feature: index > 0 ? "" : feature.Feature, + Sub: child.Feature, + rowSpan: () => (index > 0 ? 1 : feature.Children.length), + isLast: index === feature.Children.length - 1, + }; + languages.forEach((language) => { + if (language === "Feature") { + data["Sub"] = child["Feature"]; + } else { + data[_key(language)] = child[_key(language)]; + } + }); + datas.push(data); + }); + } else { + const data = { + id: feature.Feature, + Feature: feature.Feature, + Sub: "", + rowSpan: () => 1, + }; + languages.forEach((language) => { + data[_key(language)] = feature[_key(language)]; + }); + datas.push(data); + } }); + return datas; +}; -const columns = generateColumns(10); -const data = generateData(columns, 100); +const columns = genColomns(); +const data = genData(); const fixedColumns = columns.map((column, columnIndex) => { let frozen; if (columnIndex < 2) frozen = Column.FrozenDirection.LEFT; + if (columnIndex === 0) { + return { ...column, frozen, rowSpan: ({ rowData }) => rowData.rowSpan() }; + } return { ...column, frozen }; }); -const rowSpanIndex = 0; -fixedColumns[rowSpanIndex].rowSpan = ({ rowData, rowIndex }) => - rowIndex % 2 === 0 && rowIndex <= data.length - 2 ? 2 : 1; - -// console.log(JSON.stringify(fixedColumns, null, 2)); -// console.log(JSON.stringify(data, null, 2)); -// console.log('...', fixedColumns[rowSpanIndex]); - const rowRenderer = ({ rowData, rowIndex, cells, columns }) => { - const rowSpan = columns[rowSpanIndex].rowSpan({ rowData, rowIndex }); - if (rowSpan > 1) { - const cell = cells[rowSpanIndex]; + const rowSpan = columns[0].rowSpan({ rowData, rowIndex }); + if (rowData.Sub.length > 0 && !rowData.isLast) { + const cell = cells[0]; const style = { ...cell.props.style, height: rowSpan * 50, alignSelf: "flex-start", zIndex: 1, + borderBottom: "0px", }; - cells[rowSpanIndex] = React.cloneElement(cell, { style }); + cells[0] = React.cloneElement(cell, { style }); } return cells; }; @@ -86,7 +106,6 @@ export default function Matrix() { columns={fixedColumns} data={data} rowRenderer={rowRenderer} - // overscanRowCount={2} /> )} </AutoResizer>
