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 b1a59615e9f4c537ecefa7670a6953b031e4693c Author: Li Li <[email protected]> AuthorDate: Wed Apr 12 13:36:17 2023 +0800 update Signed-off-by: Li Li <[email protected]> --- data/matrix.js | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++++- src/css/custom.css | 5 +++ src/pages/matrix.js | 68 ++++++++++++++++++++++++++----------- 3 files changed, 151 insertions(+), 20 deletions(-) diff --git a/data/matrix.js b/data/matrix.js index 61cc175aa27..4b5076e8acc 100644 --- a/data/matrix.js +++ b/data/matrix.js @@ -62,20 +62,116 @@ module.exports = { REST: 0, "NET(C#/F#/VB)": 0, }, + { + Feature: "OAuth2", + Java: 2, + "C++": 2, + Go: 2, + Python: 2, + Nodejs: 2, + "C#/DotPulsar": 0, + Websocket: 0, + REST: 0, + "NET(C#/F#/VB)": 2, + }, + { + Feature: "Athenz", + Java: 2, + "C++": 0, + Go: 2, + Python: 0, + Nodejs: 0, + "C#/DotPulsar": 0, + Websocket: 0, + REST: 0, + "NET(C#/F#/VB)": 0, + }, + { + Feature: "HTTP Basic", + Java: 2, + "C++": 2, + Go: 2, + Python: 2, + Nodejs: 0, + "C#/DotPulsar": 0, + Websocket: 0, + REST: 0, + "NET(C#/F#/VB)": 0, + }, ], }, { Feature: "Transaction", Java: 2, + "C++": 0, + Go: 0, + Python: 0, + Nodejs: 0, + "C#/DotPulsar": 0, + Websocket: 0, + REST: 0, + "NET(C#/F#/VB)": 2, + }, + { + Feature: "Cluster-level failover", + Java: 2, + "C++": 0, + Go: 0, + Python: 0, + Nodejs: 0, + "C#/DotPulsar": 0, + Websocket: 0, + REST: 0, + "NET(C#/F#/VB)": 0, + }, + { + Feature: "Multi-host service", + Java: 2, "C++": 2, Go: 2, Python: 2, Nodejs: 2, - "C#/DotPulsar": 2, + "C#/DotPulsar": 0, Websocket: 0, REST: 0, "NET(C#/F#/VB)": 2, }, + { + Feature: "Statistics", + Java: 2, + "C++": 0, + Go: 0, + Python: 0, + Nodejs: 0, + "C#/DotPulsar": 0, + Websocket: 0, + REST: 0, + "NET(C#/F#/VB)": 2, + }, + { + Feature: "Proxy", + Java: 2, + "C++": 2, + Go: 2, + Python: 2, + Nodejs: 2, + "C#/DotPulsar": 2, + Websocket: 2, + REST: 0, + "NET(C#/F#/VB)": 2, + }, + { + Feature: "Reconnection", + Java: 2, + "C++": 2, + Go: 2, + Python: 2, + Nodejs: 2, + "C#/DotPulsar": 2, + Websocket: 2, + REST: 0, + "NET(C#/F#/VB)": 2, + }, ], producer: [], consumer: [], diff --git a/src/css/custom.css b/src/css/custom.css index 1fd9a6ebd7e..765be722933 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1289,6 +1289,10 @@ table td { background-color: transparent !important; } +.BaseTable__table-main { + outline: 1px solid rgb(209 213 219) !important; +} + .BaseTable__row { background-color: transparent !important; border-bottom: 0px solid rgb(209 213 219) !important; @@ -1300,6 +1304,7 @@ table td { .BaseTable__header-row { background-color: transparent !important; + border-bottom: 1px solid rgb(209 213 219) !important; } .BaseTable__row-cell { diff --git a/src/pages/matrix.js b/src/pages/matrix.js index f04cc322418..a8cb6681ecb 100644 --- a/src/pages/matrix.js +++ b/src/pages/matrix.js @@ -2,7 +2,13 @@ import Layout from "@theme/Layout"; import React from "react"; import "react-base-table/styles.css"; import BaseTable, { Column, AutoResizer } from "react-base-table"; -import { languages, client, producer, reader } from "../../data/matrix.js"; +import { + languages, + client, + producer, + reader, + consumer, +} from "../../data/matrix.js"; const _key = (language) => language.replace(".", "").replace(" ", ""); const genColomns = () => { @@ -11,7 +17,7 @@ const genColomns = () => { key: _key(language), dataKey: _key(language), title: language === "Sub" ? "" : language, - width: index > 1 ? 120 : 150, + width: index > 1 ? 132 : 154, dataGetter: ({ column, rowData }) => { if (parseInt(rowData[column.dataKey]) === 0) { return "🚫"; @@ -22,13 +28,14 @@ const genColomns = () => { } return rowData[column.dataKey]; }, + align: index > 1 ? "center" : "left", }; }); }; -const genData = () => { +const genData = (values) => { const datas = []; - client.forEach((feature) => { + values.forEach((feature) => { if (feature.Children) { feature.Children.forEach((child, index) => { const data = { @@ -63,8 +70,23 @@ const genData = () => { return datas; }; +const genCount = (values) => { + let count = 1; + values.forEach((feature) => { + if (feature.Children) { + count = count + feature.Children.length; + } else { + count = count + 1; + } + }); + return count; +}; + +const getHeigh = (values) => { + return "h-[" + genCount(values) * 50 + "px]"; +}; + const columns = genColomns(); -const data = genData(); const fixedColumns = columns.map((column, columnIndex) => { let frozen; @@ -91,25 +113,33 @@ const rowRenderer = ({ rowData, rowIndex, cells, columns }) => { return cells; }; +const titles = ["Client", "Producer", "Consumer", "Reader"]; export default function Matrix() { return ( <Layout> <div className="tailwind"> <div className="my-12 container"> - <div className="w-full h-[60vh]"> - <AutoResizer> - {({ width, height }) => ( - <BaseTable - fixed - width={width} - height={height} - columns={fixedColumns} - data={data} - rowRenderer={rowRenderer} - /> - )} - </AutoResizer> - </div> + {[client, producer, consumer, reader].map((values, index) => { + return ( + <div className="mb-8" key={index}> + <div className="font-bold text-xl mb-4">{titles[index]}</div> + <div className={`w-full ${getHeigh(values)}`}> + <AutoResizer> + {({ width, height }) => ( + <BaseTable + fixed + width={width} + height={height} + columns={fixedColumns} + data={genData(values)} + rowRenderer={rowRenderer} + /> + )} + </AutoResizer> + </div> + </div> + ); + })} </div> </div> </Layout>
