apply mantine ui framework

apps/bbgo-backtest-report/components/ReportDetails.tsx

@@ -2,9 +2,11 @@ import React, {useEffect, useState} from 'react';
 
 import TradingViewChart from './TradingViewChart';
 
-import {Container} from '@nextui-org/react';
 import {ReportSummary} from "../types";
 
+import { Title } from '@mantine/core';
+import { Button } from '@mantine/core';
+
 interface ReportDetailsProps {
   basePath: string;
   runID: string;
@@ -30,22 +32,22 @@ const ReportDetails = (props: ReportDetailsProps) => {
   }, [props.runID])
 
   if (!reportSummary) {
-    return <Container>
+    return <div>
       <h2>Loading {props.runID}</h2>
-    </Container>;
+    </div>;
   }
 
-  return <Container>
-    <h2>Back-test Run {props.runID}</h2>
+  return <div>
+    <Title order={2}>Back-test Run {props.runID}</Title>
     <div>
       {
-        reportSummary.symbols.map((symbol: string) => {
-          return <TradingViewChart basePath={props.basePath} runID={props.runID} reportSummary={reportSummary} symbol={symbol} intervals={["1m", "5m", "1h"]}/>
+        reportSummary.symbols.map((symbol: string, i : number) => {
+          return <TradingViewChart key={i} basePath={props.basePath} runID={props.runID} reportSummary={reportSummary} symbol={symbol} intervals={["1m", "5m", "1h"]}/>
         })
       }
 
     </div>
-  </Container>;
+  </div>;
 };
 
 export default ReportDetails;

apps/bbgo-backtest-report/components/ReportNavigator.tsx

@@ -1,5 +1,7 @@
 import React, {useEffect, useState} from 'react';
-import {Link} from '@nextui-org/react';
+import {List, ThemeIcon} from '@mantine/core';
+import {CircleCheck} from 'tabler-icons-react';
+
 import {ReportEntry, ReportIndex} from '../types';
 
 function fetchIndex(basePath: string, setter: (data: any) => void) {
@@ -39,16 +41,29 @@ const ReportNavigator = (props: ReportNavigatorProps) => {
     return <div>No back-test report data</div>
   }
 
-  return <div>
-    {
-      reportIndex.runs.map((entry) => {
-        return <Link key={entry.id} onClick={() => {
-          if (props.onSelect) {
-            props.onSelect(entry);
-          }
-        }}>{entry.id}</Link>
-      })
-    }
+  return <div className={"report-navigator"}>
+    <List
+      spacing="xs"
+      size="xs"
+      center
+      icon={
+        <ThemeIcon color="teal" size={24} radius="xl">
+          <CircleCheck size={16}/>
+        </ThemeIcon>
+      }
+    >
+      {
+        reportIndex.runs.map((entry) => {
+          return <List.Item key={entry.id} onClick={() => {
+            if (props.onSelect) {
+              props.onSelect(entry);
+            }
+          }}>
+            {entry.id}
+          </List.Item>
+        })
+      }
+    </List>
   </div>;
 
 

apps/bbgo-backtest-report/components/TradingViewChart.js

@@ -1,12 +1,10 @@
 import React, {useEffect, useRef, useState} from 'react';
 import {tsvParse} from "d3-dsv";
+import { Button } from '@mantine/core';
 
 // https://github.com/tradingview/lightweight-charts/issues/543
 // const createChart = dynamic(() => import('lightweight-charts'));
 import {createChart, CrosshairMode} from 'lightweight-charts';
-import {Button} from "@nextui-org/react";
-
-// const parseDate = timeParse("%Y-%m-%d");
 
 const parseKline = () => {
   return (d) => {
@@ -426,15 +424,15 @@ const TradingViewChart = (props) => {
 
   return (
     <div>
-      <Button.Group>
+      <span>
         {intervals.map((interval) => {
-          return <Button size="xs" key={interval} onPress={(e) => {
+          return <Button key={interval} compact onClick={(e) => {
             setCurrentInterval(interval)
           }}>
             {interval}
           </Button>
         })}
-      </Button.Group>
+      </span>
       <div ref={chartContainerRef} style={{'flex': 1, 'minHeight': 300}}>
       </div>
     </div>

apps/bbgo-backtest-report/package.json

@@ -9,14 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@nextui-org/react": "^1.0.0-beta.7",
+    "@mantine/core": "^4.2.5",
+    "@mantine/hooks": "^4.2.5",
+    "@mantine/next": "^4.2.5",
     "d3-dsv": "^3.0.1",
     "d3-format": "^3.1.0",
     "d3-time-format": "^4.1.0",
     "lightweight-charts": "^3.8.0",
     "next": "12.1.6",
     "react": "18.1.0",
-    "react-dom": "18.1.0"
+    "react-dom": "18.1.0",
+    "tabler-icons-react": "^1.48.0"
   },
   "devDependencies": {
     "@types/d3-dsv": "^3.0.0",

apps/bbgo-backtest-report/pages/_app.tsx

@@ -1,11 +1,26 @@
 import '../styles/globals.css'
 import type {AppProps} from 'next/app'
-import {NextUIProvider} from '@nextui-org/react'
+import Head from 'next/head';
+
+import { MantineProvider } from '@mantine/core';
 
 function MyApp({Component, pageProps}: AppProps) {
-  return <NextUIProvider>
-    <Component {...pageProps} />
-  </NextUIProvider>
+  return <>
+    <Head>
+      <title>Page title</title>
+      <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+    </Head>
+    <MantineProvider
+      withGlobalStyles
+      withNormalizeCSS
+      theme={{
+        /** Put your mantine theme override here */
+        colorScheme: 'light',
+      }}
+    >
+      <Component {...pageProps} />
+    </MantineProvider>
+  </>
 }
 
 export default MyApp

apps/bbgo-backtest-report/pages/_document.tsx

@@ -1,24 +1,41 @@
 import Document, {DocumentContext, Head, Html, Main, NextScript} from 'next/document';
-import {CssBaseline} from '@nextui-org/react';
+
+// ----- mantine setup
+import {createStylesServer, ServerStyles} from '@mantine/next';
+import {DocumentInitialProps} from "next/dist/shared/lib/utils";
+
+// const getInitialProps = createGetInitialProps();
+const stylesServer = createStylesServer();
+// -----
 
 class MyDocument extends Document {
-  static async getInitialProps(ctx: DocumentContext) {
+  // this is for mantine
+  // static getInitialProps = getInitialProps;
+
+  static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
     const initialProps = await Document.getInitialProps(ctx);
 
-    // @ts-ignore
-    initialProps.styles = <>{initialProps.styles}</>;
-    return initialProps;
+    return {
+      ...initialProps,
+
+      // use bracket [] instead of () to fix the type error
+      styles: [
+        <>
+          {initialProps.styles}
+          <ServerStyles html={initialProps.html} server={stylesServer}/>
+        </>
+      ],
+    };
   }
 
   render() {
     return (
       <Html lang="en">
         <Head>
-          {CssBaseline.flush()}
         </Head>
         <body>
-          <Main/>
-          <NextScript/>
+        <Main/>
+        <NextScript/>
         </body>
       </Html>
     );

apps/bbgo-backtest-report/pages/index.tsx

@@ -2,6 +2,8 @@ import type {NextPage} from 'next'
 import Head from 'next/head'
 import styles from '../styles/Home.module.css'
 
+import {AppShell, Header, Navbar, Text} from '@mantine/core';
+
 import ReportDetails from '../components/ReportDetails';
 import ReportNavigator from '../components/ReportNavigator';
 import {useState} from "react";
@@ -9,19 +11,35 @@ import {useState} from "react";
 const Home: NextPage = () => {
   const [currentReport, setCurrentReport] = useState<any>();
   return (
-    <div className={styles.container}>
+    <div>
       <Head>
-        <title>Back-Test Report</title>
+        <title>BBGO Back-Test Report</title>
         <meta name="description" content="Generated by create next app"/>
         <link rel="icon" href="/favicon.ico"/>
       </Head>
       <main className={styles.main}>
-        <ReportNavigator onSelect={(reportEntry) => {
-          setCurrentReport(reportEntry)
-        }}/>
-        {
-          currentReport ? <ReportDetails basePath={'/output'} runID={currentReport.id}/> : null
-        }
+        <AppShell
+          padding="md"
+          navbar={<Navbar width={{base: 250}} height={500} p="xs">
+
+            <ReportNavigator onSelect={(reportEntry) => {
+              setCurrentReport(reportEntry)
+            }}/>
+
+          </Navbar>}
+          header={
+            <Header height={60} p="md">
+              <Text>BBGO Back-Test Report</Text>
+            </Header>
+          }
+          styles={(theme) => ({
+            main: {backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0]},
+          })}
+        >
+          {
+            currentReport ? <ReportDetails basePath={'/output'} runID={currentReport.id}/> : null
+          }
+        </AppShell>
       </main>
     </div>
   )

apps/bbgo-backtest-report/styles/Home.module.css

@@ -1,10 +1,5 @@
-.container {
-  padding: 0 2rem;
-}
-
 .main {
   min-height: 100vh;
-  padding: 2rem 0;
 }
 
 .footer {