Mattupham/fe 944 portfolio add chart expand minimize

packages/web/components/chart/historical-chart.tsx

@@ -70,14 +70,36 @@ interface HistoricalChartProps {
   onPointerHover?: (price: number, time: Time) => void;
   onPointerOut?: () => void;
   style?: Style;
+  showScales?: boolean;
 }
 
 export const HistoricalChart = memo((props: HistoricalChartProps) => {
-  const { data = [], onPointerHover, onPointerOut, style = "neutral" } = props;
+  const {
+    data = [],
+    onPointerHover,
+    onPointerOut,
+    style = "neutral",
+    showScales = true,
+  } = props;
+
+  const options = showScales
+    ? {}
+    : {
+        rightPriceScale: {
+          visible: false,
+        },
+        leftPriceScale: {
+          visible: false,
+        },
+        timeScale: {
+          visible: false,
+        },
+      };
 
   return (
     <Chart
       Controller={AreaChartController}
+      options={options}
       series={[
         {
           type: "Area",
@@ -164,6 +186,7 @@ export const HistoricalChartSkeleton = () => {
           viewBox="0 0 700 346"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
+          preserveAspectRatio="none"
         >
           <g clipPath="url(#clip0_2029_22138)">
             <path

packages/web/components/chart/light-weight-charts/chart.tsx

@@ -54,6 +54,7 @@ export const defaultOptions: DeepPartial<TimeChartOptions> = {
     borderVisible: false,
     ticksVisible: false,
     entireTextOnly: true,
+    // visible: false, // Hide the right price scale
     scaleMargins: {
       top: 0.25,
       bottom: 0.1,
@@ -64,6 +65,7 @@ export const defaultOptions: DeepPartial<TimeChartOptions> = {
     borderVisible: false,
     ticksVisible: false,
     entireTextOnly: true,
+    // visible: true, // Hide the left price scale
     scaleMargins: {
       top: 0.25,
       bottom: 0.1,
@@ -106,6 +108,7 @@ export const defaultOptions: DeepPartial<TimeChartOptions> = {
     },
   },
   timeScale: {
+    // visible: false, // Hide the time scale
     timeVisible: true,
     secondsVisible: false,
     lockVisibleTimeRangeOnResize: true,
@@ -146,8 +149,17 @@ const defaultOptionsWithSeries = (
   series?: Series[]
 ): DeepPartial<TimeChartOptions> => ({
   ...defaultOptions,
+  leftPriceScale: {
+    ...defaultOptions.leftPriceScale,
+    // visible: false,
+  },
+  rightPriceScale: {
+    ...defaultOptions.rightPriceScale,
+    // visible: false,
+  },
   timeScale: {
     ...defaultOptions.timeScale,
+    // visible: false,
     tickMarkFormatter: (timePoint: Time, tickMarkType: TickMarkType) => {
       const formatOptions: Intl.DateTimeFormatOptions = {};