Portfolio analysis

src/components/layout/Sidebar.tsx

@@ -194,6 +194,7 @@ export default function Sidebar({ fixedWidth, ...boxProps }: SidebarProps) {
       { label: 'Financial Metrics', isHeader: true },
       { label: 'Protocol Analytics', isDisabled: true },
       { label: 'Sharpe Ratio', href: '/terminal/sharpe' },
+      { label: 'Portfolio Analytics', href: '/terminal/portfolio' },
 
       { label: 'Stablecoin Health', isHeader: true },
       {

src/components/pages/Terminal/SharpeChartBox.tsx

@@ -275,11 +275,13 @@ function useSharpeRatioModel(tokens: ExtendedCurrency[]) {
 interface SharpeChartBoxProps {
   tokens: ExtendedCurrency[];
   defaultTokens?: ExtendedCurrency[];
+  isPortfolioOnly?: boolean;
 }
 
 export default function SharpeChartBox({
   tokens,
   defaultTokens = [],
+  isPortfolioOnly,
 }: SharpeChartBoxProps) {
   const chartRef = useRef<EChartsInstance>();
   const containerRef = useRef(null);
@@ -351,6 +353,7 @@ export default function SharpeChartBox({
         }}
         isExpanded={isFullScreen}
         toggleExpand={toggleFullScreen}
+        hideDownloadAndExpand={isPortfolioOnly}
       />
       <Box overflowX="auto" py="2">
         <HStack>

src/components/shared/Charts/ChartHeader/index.tsx

@@ -37,6 +37,7 @@ export interface ChartHeaderProps {
   info?: React.ReactNode;
   externalLink?: string;
   noShadow?: boolean;
+  hideDownloadAndExpand?: boolean;
 }
 
 const ChartHeader = ({
@@ -49,6 +50,7 @@ const ChartHeader = ({
   tooltip,
   externalLink,
   noShadow = false,
+  hideDownloadAndExpand,
 }: ChartHeaderProps) => {
   return (
     <HStack
@@ -90,38 +92,40 @@ const ChartHeader = ({
 
       <Spacer />
 
-      <Flex zIndex={99} alignItems="center" gap="16px">
-        {downloadCsv && (
-          <CSVLink
-            filename={downloadCsv.filename}
-            headers={downloadCsv.headers}
-            data={downloadCsv.data}
-            style={{ display: 'flex' }}
-            aria-label="Download"
-          >
+      {!hideDownloadAndExpand && (
+        <Flex zIndex={99} alignItems="center" gap="16px">
+          {downloadCsv && (
+            <CSVLink
+              filename={downloadCsv.filename}
+              headers={downloadCsv.headers}
+              data={downloadCsv.data}
+              style={{ display: 'flex' }}
+              aria-label="Download"
+            >
+              <Icon
+                width="15px"
+                height="15px"
+                cursor="pointer"
+                marginInlineStart={0}
+                as={FileDownloadIcon}
+                color="gray.900"
+              />
+            </CSVLink>
+          )}
+
+          {toggleExpand && (
             <Icon
+              cursor="pointer"
+              onClick={toggleExpand}
+              as={isExpanded ? FullscreenExitIcon : FullscreenIcon}
               width="15px"
               height="15px"
-              cursor="pointer"
-              marginInlineStart={0}
-              as={FileDownloadIcon}
+              marginInlineStart="0 !important"
               color="gray.900"
             />
-          </CSVLink>
-        )}
-
-        {toggleExpand && (
-          <Icon
-            cursor="pointer"
-            onClick={toggleExpand}
-            as={isExpanded ? FullscreenExitIcon : FullscreenIcon}
-            width="15px"
-            height="15px"
-            marginInlineStart="0 !important"
-            color="gray.900"
-          />
-        )}
-      </Flex>
+          )}
+        </Flex>
+      )}
     </HStack>
   );
 };

src/components/shared/Charts/PieChart.tsx

@@ -0,0 +1,104 @@
+import { Box, Center, Text } from '@chakra-ui/layout';
+import { Spinner } from '@chakra-ui/react';
+import ReactEChartsCore from 'echarts-for-react/lib/core';
+import { PieChart } from 'echarts/charts';
+import {
+  GridComponent,
+  TooltipComponent,
+  TitleComponent,
+  LegendComponent,
+} from 'echarts/components';
+import * as echarts from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import React from 'react';
+
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  PieChart,
+  CanvasRenderer,
+]);
+
+interface PieChartsProps<T> {
+  dataset?: T[];
+  loading?: boolean;
+  title?: string;
+  isFullScreen?: boolean;
+  height?: number;
+}
+
+const PieCharts = <T,>({
+  isFullScreen,
+  loading,
+  dataset,
+  height = 224,
+  title,
+}: PieChartsProps<T>) => {
+  const option = {
+    tooltip: {
+      trigger: 'item',
+    },
+    legend: {
+      top: '5%',
+      left: 'center',
+    },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center',
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: '40',
+            fontWeight: 'bold',
+          },
+        },
+        labelLine: {
+          show: false,
+        },
+        data: dataset,
+      },
+    ],
+  };
+
+  if (loading) {
+    return (
+      <Center position="absolute" top="0" left="0" right="0" bottom="0">
+        <Spinner color="purple.500" />
+      </Center>
+    );
+  }
+  return (
+    <Box>
+      {title && (
+        <Text
+          paddingBottom="20px"
+          size="14px"
+          fontWeight="700"
+          textAlign="center"
+        >
+          {title}
+        </Text>
+      )}
+      <ReactEChartsCore
+        echarts={echarts}
+        option={option}
+        lazyUpdate={true}
+        notMerge={true}
+        style={{
+          height: isFullScreen ? '100%' : height + 'px',
+        }}
+        theme={'theme_name'}
+      />
+    </Box>
+  );
+};
+export default PieCharts;

src/hooks/useModel.ts

@@ -183,6 +183,7 @@ export function useModelRunner<O>(props: ModelRunnerProps<O>) {
           : (resp.output as O);
 
         validateOutputMemoized(_output);
+        console.log('_output', _output);
         setOutput(_output);
       })
       .catch((err) => {