This is an automated email from the ASF dual-hosted git repository. tison pushed a commit to branch drop-charts in repository https://gitbox.apache.org/repos/asf/kvrocks-website.git
commit e7b636cdbd6dd3f2d36777ae6b3add6085f6f010 Author: tison <[email protected]> AuthorDate: Sat Sep 23 12:22:53 2023 +0800 drop code demo and performance charts Signed-off-by: tison <[email protected]> --- docusaurus.config.js | 2 +- package.json | 1 - src/components/HomepageFeatures/index.tsx | 291 +----------------------------- src/pages/index.module.css | 1 + yarn.lock | 3 +- 5 files changed, 4 insertions(+), 294 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 8d78ba0..1cb463a 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -7,7 +7,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula'); /** @type {import('@docusaurus/types').Config} */ const config = { title: 'Apache Kvrocks', - tagline: 'A distributed key value NoSQL database that uses RocksDB as storage engine and is compatible with Redis protocol', + tagline: 'A distributed key value NoSQL database that uses RocksDB as storage engine and is compatible with Redis protocol.', url: 'https://kvrocks.apache.org', baseUrl: '/', onBrokenLinks: 'throw', diff --git a/package.json b/package.json index 119b68d..a2f9e68 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,6 @@ "@docusaurus/preset-classic": "^2.3.1", "@easyops-cn/docusaurus-search-local": "^0.26.1", "@mdx-js/react": "^1.6.22", - "ace-builds": "^1.18.0", "antd": "^5.4.5", "clsx": "^1.1.1", "docusaurus-plugin-image-zoom": "^0.1.1", diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx index c5bfa91..6f469eb 100644 --- a/src/components/HomepageFeatures/index.tsx +++ b/src/components/HomepageFeatures/index.tsx @@ -1,15 +1,6 @@ -import React, {useState,useEffect} from 'react'; +import React from 'react'; import clsx from 'clsx'; import styles from './styles.module.css'; -import * as echarts from 'echarts'; -import type {MenuProps} from 'antd'; -import { Menu } from 'antd'; -import AceEditor from "react-ace"; -import "ace-builds/src-noconflict/mode-python"; -import "ace-builds/src-noconflict/mode-golang"; -import "ace-builds/src-noconflict/mode-java"; -import "ace-builds/src-noconflict/theme-monokai"; -import "ace-builds/src-noconflict/ext-language_tools"; type FeatureItem = { imgPath:string; @@ -69,291 +60,11 @@ function Feature({imgPath,title, description}: FeatureItem) { </div> ); } - -export function PieChartRight(): JSX.Element { - useEffect(() => { - var myChart_obj=document.getElementById("PieChartRight") - if (myChart_obj != null && myChart_obj != undefined){ - echarts.dispose(document.getElementById("PieChartRight")) - } - var myChart = echarts.init(document.getElementById("PieChartRight")); - myChart.setOption({ - title: { - text: 'Supported Commands', - left: 'center' - }, - tooltip: { - trigger: 'item', - - }, - legend: { - orient: 'vertical', - left: 'right' - }, - series: [ - { - type: 'pie', - radius: '75%', - data: [ - { value: 875, name: 'Supported ',itemStyle: {color: 'rgb(255,0,102)'} }, - { value: 125, name: 'Todo',itemStyle: {color: 'rgb(246,108,104)'} } - ], - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)' - } - } - } - ] - }); - }) - return <div id="PieChartRight" style={{width: "50%",height: "480px"}} /> -} - -export function HistogramChartLeft(): JSX.Element { - useEffect(() => { - var myChart_obj=document.getElementById("LineChartLeft") - if (myChart_obj != null && myChart_obj != undefined){ - echarts.dispose(document.getElementById("LineChartLeft")) - } - var myChart = echarts.init(document.getElementById("LineChartLeft")); - myChart.setOption({ - title: { - text: 'QPS On Command', - left: 'center' - }, - tooltip: { - trigger: 'axis', - axisPointer: { - // Use axis to trigger tooltip - type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' - } - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, - xAxis: { - type: 'value', - name:'QPS', - }, - yAxis: { - type: 'category', - - data: ['HSET', 'ZADD', 'SADD', 'LPUSH','INCR','GET','SET','PING_BULK','PING_INLINE'] - }, - series: [ - { - name: 'Direct', - type: 'bar', - stack: 'total', - emphasis: { - focus: 'series' - }, - data: [ - {value: 220000,itemStyle: {color: 'rgb(41,90,166)'}}, - {value: 195000,itemStyle: {color: 'rgb(81,189,189)'}}, - {value: 280000,itemStyle: {color: 'rgb(141,197,132)'}}, - {value: 275000,itemStyle: {color: 'rgb(206,230,214)'}}, - {value: 280000,itemStyle: {color: 'rgb(247,132,165)'}}, - {value: 395000,itemStyle: {color: 'rgb(206,181,89)'}}, - {value: 310000,itemStyle: {color: 'rgb(48,181,214)'}}, - {value: 680000,itemStyle: {color: 'rgb(248,132,107)'}}, - {value: 670000,itemStyle: {color: 'rgb(65,208,118)'}}] - } - ] - }) - }) - return <div id="LineChartLeft" style={{width: "50%",height: "400px"}} /> -} - -export function LineChartRight(): JSX.Element { - useEffect(() => { - var myChart_obj=document.getElementById("LineChartRight") - if (myChart_obj != null && myChart_obj != undefined){ - echarts.dispose(document.getElementById("LineChartRight")) - } - var myChart = echarts.init(document.getElementById("LineChartRight")); - myChart.setOption({ - title: { - text: 'QBS On Bytes', - subtext: 'GET/SET benchmark', - left: 'center' - }, - xAxis: { - type: 'category', - data: [128,512,1024,4096], - name:'Bytes' - }, - yAxis: { - type: 'value', - name:'QPS' - }, - series: [ - { - data: [290000,260000,210000,94000], - type: 'line', - name:'SET' - }, - { - data: [400000,330000,305000,240000], - type: 'line', - name:'GET', - color: "red", - lineStyle:{ - color:"red" - } - } - ], - legend: { - data: ['SET', 'GET'], - x: 'right', - y: 'top', - }, - }); - }) - return <div id="LineChartRight" style={{width: "50%",height: "445px",marginLeft:"50px",marginTop:"40px"}} /> -} - -export function CodeBlock(): JSX.Element { - const [pythonCode, setPythonCode]=useState('import redis\n' + - '\n' + - 'r = redis.Redis(host=\'localhost\', port=6666, decode_responses=True)\n' + - '\n' + - 'r.set(\'username\', \'kvrocks\')\n' + - '# True\n' + - 'r.get(\'username\')\n' + - '# kvrocks\n') - const [javaCode, setJavaCode]=useState('package org.example;\n\n' + - 'import redis.clients.jedis.Jedis;\n' + - 'import redis.clients.jedis.JedisPool;\n' + - '\n' + - 'JedisPool pool = new JedisPool("127.0.0.1", 6666);\n' + - '\n' + - 'try (Jedis jedis = pool.getResource()) {\n' + - '\tjedis.set("username", "kvrocks");\n' + - ' System.out.println(jedis.get("username"));\n' + - '}\n') - const [golangCode, setGolangCode]=useState('import (\n' + - '\t"context"\n' + - '\t"fmt"\n' + - '\t"github.com/redis/go-redis/v9"\n' + - ')\n' + - '\n' + - 'client := redis.NewClient(&redis.Options{\n' + - '\tAddr:\t "localhost:6666",\n' + - '})\n' + - '\n' + - 'err := client.Set(ctx, "username", "kvrocks", 0).Err()\n' + - 'if err != nil {\n' + - ' panic(err)\n' + - '}\n' + - '\n' + - 'val, err := client.Get(ctx, "username").Result()\n' + - 'if err != nil {\n' + - ' panic(err)\n' + - '}\n\n' + - 'fmt.Println("username", val)\n') - const [code, setCode]=useState(javaCode) - const [current, setCurrent] = useState('java'); - const onClick: MenuProps['onClick'] = (e) => { - console.log('click ', e); - setCurrent(e.key); - if (e.key=="python"){ - setCode(pythonCode) - } - else if(e.key=="java"){ - setCode(javaCode) - } - else if(e.key=="golang"){ - setCode(golangCode) - } - } - const items: MenuProps['items'] = [ - {label: 'Java',key: 'java'}, - {label: 'Go',key: 'golang'}, - {label: 'Python3',key: 'python'}] - return ( - <div style={{width:"50%"}}> - <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} /> - <AceEditor - mode="python" - theme="monokai" - name="blah2" - fontSize={14} - showPrintMargin={true} - showGutter={true} - highlightActiveLine={true} - value={code} - readOnly={true} - setOptions={{ - enableBasicAutocompletion: false, - enableLiveAutocompletion: false, - enableSnippets: false, - showLineNumbers: true, - useWorker:false, - tabSize: 2 - }} - style={{marginTop:"10px",height:"400px",width:"100%"}}/> - </div> - ) -} - -export function SelectMenu(): JSX.Element { - const [menuFlag, setMenuFlag] = useState(true); - const handleShow = (e)=>{ - setMenuFlag(!menuFlag); - } - return( - <div className={styles.selectMenuBlock}> - <div className="text--center padding-horiz--md" style={{width:'100%',height:'100%',marginTop:'50px', - display:"flex",justifyContent:"center"}} > - <div className={styles.menuBlock}> - <h1 onClick={handleShow} style={{color:(menuFlag) ? "black" : "gray"}} data-value="redisCompatible">Redis Compatible</h1> - <div className={styles.redisStyle} style={{ visibility:(menuFlag) ? "visible" : "hidden", color:(menuFlag) ? "black" : "gray"}}> - <div className={styles.blueLine} > - <div></div> - </div> - <p style={{fontSize:"22px"}}>Users can access Apache Kvrocks via any Redis client.</p> - </div> - </div> - <div className={styles.menuBlock}> - <h1 onClick={handleShow} style={{color:(!menuFlag) ? "black" : "gray"}} data-value="performanceCompare">Performance Compare</h1> - <div className={styles.performanceStyle} style={{ visibility:(!menuFlag) ? "visible" : "hidden"}}> - <div className={styles.blueLine} > - <div></div> - </div> - <p style={{fontSize:"22px"}}>The perfect balance between performance and cost.</p> - </div> - </div> - </div> - <div className="text--center padding-horiz--md" style={{width:'100%',height:'100%',marginTop:'50px', - display:"flex",justifyContent:"center"}} > - <div className={styles.chartBlock} style={{ display:(menuFlag) ? "flex" : "none"}}> - <CodeBlock/> - <PieChartRight/> - </div> - <div className={styles.chartBlock} style={{ display:(!menuFlag) ? "flex" : "none"}}> - <HistogramChartLeft/> - <LineChartRight/> - </div> - </div> - </div> - ); -} - export default function HomepageFeatures(): JSX.Element { return ( <section className={styles.features}> <div className={styles.container}> <div className="row" > - <div className={clsx('col col--12')} style={{marginBottom:'100px'}}> - <SelectMenu /> - </div> {FeatureList.map((props, idx) => ( <Feature key={idx} {...props} /> ))} diff --git a/src/pages/index.module.css b/src/pages/index.module.css index ecf29e7..12f7329 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -15,6 +15,7 @@ .container{ width:100%; + height:100%; display: flex; } diff --git a/yarn.lock b/yarn.lock index 010be65..fcd2f8c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3554,7 +3554,7 @@ __metadata: languageName: node linkType: hard -"ace-builds@npm:^1.18.0, ace-builds@npm:^1.4.6": +"ace-builds@npm:^1.4.6": version: 1.19.0 resolution: "ace-builds@npm:1.19.0" checksum: 4a4544ac0ab355d877ab21442222106e86eca2a98d441cbdfb023c64cb31b746515e4d49c91ccc82cc87887e00d03c9ab09a8d1b65727353888afad8732f1cac @@ -11888,7 +11888,6 @@ __metadata: "@easyops-cn/docusaurus-search-local": ^0.26.1 "@mdx-js/react": ^1.6.22 "@tsconfig/docusaurus": ^1.0.5 - ace-builds: ^1.18.0 antd: ^5.4.5 clsx: ^1.1.1 docusaurus-plugin-image-zoom: ^0.1.1
