feat: mobile responsiveness

globalfund · Jul 15, 2024 · 4bb2e67 · 4bb2e67
1 parent 77de771
commit 4bb2e67
Show file tree

Hide file tree

Showing 45 changed files with 991 additions and 329 deletions.
diff --git a/src/app/components/chart-block/index.tsx b/src/app/components/chart-block/index.tsx
@@ -69,19 +69,24 @@ export const ChartBlock: React.FC<ChartBlockProps> = (
       <Typography variant="h5" marginBottom="5px">
         {props.subtitle}
       </Typography>
-      <Typography variant="subtitle2" lineHeight="normal" marginBottom="20px">
-        <Box
-          sx={{
-            a: { textDecoration: "none", fontWeight: "700", color: "#000" },
-          }}
-          dangerouslySetInnerHTML={{
-            __html: props.text ?? "",
-          }}
-        />
-      </Typography>
+      {props.text && props.text.length > 0 && (
+        <Typography variant="subtitle2" lineHeight="normal" marginBottom="20px">
+          <Box
+            sx={{
+              a: { textDecoration: "none", fontWeight: "700", color: "#000" },
+            }}
+            dangerouslySetInnerHTML={{
+              __html: props.text ?? "",
+            }}
+          />
+        </Typography>
+      )}
       <Divider
         sx={{
           borderTopColor: "#868E96",
+          "@media (max-width: 767px)": {
+            display: "none",
+          },
         }}
       />
       {(showCycles || showRightComponents) && (
@@ -92,6 +97,11 @@ export const ChartBlock: React.FC<ChartBlockProps> = (
           padding="20px 0 40px 0"
           alignItems="flex-start"
           justifyContent={showCycles ? "space-between" : "flex-end"}
+          sx={{
+            "@media (max-width: 767px)": {
+              flexDirection: "column",
+            },
+          }}
         >
           {props.cycles && props.selectedCycles && props.handleCycleChange && (
             <ChartBlockCycles
@@ -107,6 +117,13 @@ export const ChartBlock: React.FC<ChartBlockProps> = (
               display="flex"
               flexDirection="row"
               alignItems="center"
+              sx={{
+                "@media (max-width: 767px)": {
+                  width: "100%",
+                  marginTop: "20px",
+                  justifyContent: "flex-end",
+                },
+              }}
             >
               {props.unitButtons ?? props.unitButtons}
               {props.extraDropdown ?? props.extraDropdown}

diff --git a/src/app/components/charts/bar-series/index.tsx b/src/app/components/charts/bar-series/index.tsx
@@ -19,6 +19,8 @@ import {
   GridComponent,
   LegendComponent,
   TooltipComponent,
+  DataZoomComponentOption,
+  DataZoomSliderComponent,
 } from "echarts/components";
 import {
   GridComponentOption,
@@ -34,6 +36,7 @@ echarts.use([
   GridComponent,
   LegendComponent,
   TooltipComponent,
+  DataZoomSliderComponent,
 ]);
 
 const Tooltip = (props: any) => {
@@ -86,6 +89,7 @@ export const BarSeriesChart: React.FC<BarSeriesChartProps> = (
   props: BarSeriesChartProps
 ) => {
   const isTouch = useMediaQuery("(hover: none)");
+  const mobile = useMediaQuery("(max-width: 767px)");
   const containerRef = React.useRef<HTMLDivElement>(null);
 
   const [stateChart, setStateChart] =
@@ -122,13 +126,14 @@ export const BarSeriesChart: React.FC<BarSeriesChartProps> = (
         | XAXisComponentOption
         | LegendComponentOption
         | TooltipComponentOption
+        | DataZoomComponentOption
       > = {
         grid: {
           top: 40,
           left: 20,
           right: 0,
-          bottom: 20,
           containLabel: true,
+          bottom: mobile ? 50 : 20,
         },
         yAxis: {
           type: "value",
@@ -185,6 +190,13 @@ export const BarSeriesChart: React.FC<BarSeriesChartProps> = (
             },
           },
         },
+        dataZoom: [
+          {
+            start: 90,
+            show: mobile,
+            type: "slider",
+          },
+        ],
         series: props.data.map((serie) => ({
           type: "bar",
           name: serie.name,
@@ -220,7 +232,7 @@ export const BarSeriesChart: React.FC<BarSeriesChartProps> = (
       chart.setOption(option);
       setStateChart(chart);
     }
-  }, [containerRef.current, props.data, props.keys, range]);
+  }, [containerRef.current, props.data, props.keys, range, mobile]);
 
   return (
     <React.Fragment>

diff --git a/src/app/components/charts/bar/index.tsx b/src/app/components/charts/bar/index.tsx
@@ -20,6 +20,8 @@ import {
   GridComponent,
   LegendComponent,
   TooltipComponent,
+  DataZoomSliderComponent,
+  DataZoomComponentOption,
 } from "echarts/components";
 import {
   GridComponentOption,
@@ -35,6 +37,7 @@ echarts.use([
   GridComponent,
   LegendComponent,
   TooltipComponent,
+  DataZoomSliderComponent,
 ]);
 
 const Tooltip = (props: any) => {
@@ -92,6 +95,7 @@ const Tooltip = (props: any) => {
 
 export const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
   const isTouch = useMediaQuery("(hover: none)");
+  const mobile = useMediaQuery("(max-width: 767px)");
   const containerRef = React.useRef<HTMLDivElement>(null);
 
   const [stateChart, setStateChart] =
@@ -126,6 +130,16 @@ export const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
     return [values, values1];
   }, [props.data]);
 
+  const barWidth = React.useMemo(() => {
+    if (mobile) {
+      return "30px";
+    }
+    if (seriesData.length > 1) {
+      return "37px";
+    }
+    return "72px";
+  }, [seriesData, mobile]);
+
   React.useEffect(() => {
     if (containerRef.current) {
       const chart = echarts.init(containerRef.current, undefined, {
@@ -139,13 +153,14 @@ export const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
         | XAXisComponentOption
         | LegendComponentOption
         | TooltipComponentOption
+        | DataZoomComponentOption
       > = {
         grid: {
           top: 40,
           left: 20,
           right: 0,
-          bottom: 20,
           containLabel: true,
+          bottom: mobile ? 50 : 20,
         },
         yAxis: {
           type: "value",
@@ -187,6 +202,8 @@ export const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
             fontSize: "12px",
             fontFamily: "Inter, sans-serif",
             color: appColors.TIME_CYCLE.AXIS_TEXT_COLOR,
+            rotate:
+              mobile && !(seriesData[0] && seriesData[0].length > 4) ? 90 : 0,
           },
           axisLine: {
             lineStyle: {
@@ -195,12 +212,19 @@ export const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
             },
           },
         },
+        dataZoom: [
+          {
+            type: "slider",
+            show: mobile && seriesData[0] && seriesData[0].length > 4,
+            start: mobile && seriesData[0] && seriesData[0].length > 4 ? 70 : 0,
+          },
+        ],
         series: seriesData.map((values, index) => ({
           type: "bar",
           name:
             index === 0 ? props.valueLabels.value : props.valueLabels.value1,
           data: values,
-          barWidth: seriesData.length > 1 ? "37px" : "72px",
+          barWidth,
           colorBy: seriesData.length > 1 ? "series" : "data",
           color:
             seriesData.length > 1
@@ -264,6 +288,9 @@ export const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
   React.useEffect(() => {
     if (stateChart) {
       stateChart.setOption({
+        grid: {
+          bottom: mobile ? 50 : 20,
+        },
         yAxis: {
           axisLabel: {
             formatter: (value: number) => {
@@ -273,11 +300,21 @@ export const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
         },
         xAxis: {
           data: xAxisKeys,
+          rotate:
+            mobile && !(seriesData[0] && seriesData[0].length > 4) ? 90 : 0,
         },
+        dataZoom: [
+          {
+            type: "slider",
+            show: mobile && seriesData[0] && seriesData[0].length > 4,
+            start: mobile && seriesData[0] && seriesData[0].length > 4 ? 70 : 0,
+          },
+        ],
         series: seriesData.map((values, index) => ({
           data: values,
           name:
             index === 0 ? props.valueLabels.value : props.valueLabels.value1,
+          barWidth,
           itemStyle:
             seriesData.length > 1
               ? {
@@ -290,7 +327,15 @@ export const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
         })),
       });
     }
-  }, [range, xAxisKeys, seriesData, props.valueLabels, stateChart]);
+  }, [
+    range,
+    mobile,
+    barWidth,
+    xAxisKeys,
+    seriesData,
+    stateChart,
+    props.valueLabels,
+  ]);
 
   return (
     <React.Fragment>

diff --git a/src/app/components/charts/financial-metric/index.tsx b/src/app/components/charts/financial-metric/index.tsx
@@ -102,22 +102,35 @@ const ExpandableItem: React.FC<FinancialMetricExpandableItemProps> = (
         height="38px"
         display="flex"
         padding="0 10px"
+        bgcolor={bgcolor}
         flexDirection="row"
         alignItems="center"
         borderBottom="1px solid #CFD4DA"
-        bgcolor={bgcolor}
+        sx={{
+          "@media (max-width: 767px)": {
+            height: "auto",
+            paddingTop: "10px",
+            flexDirection: "column",
+          },
+        }}
       >
-        <Typography fontSize="12px" minWidth="50px">
-          {props.value.toFixed(1).replace(".0", "")}%
-        </Typography>
-        <Box
-          width="220px"
-          height="12px"
-          display="flex"
-          bgcolor="#CFD4DA"
-          justifyContent="flex-start"
-        >
-          <Box width={`${props.value}%`} height="100%" bgcolor={props.color} />
+        <Box gap="10px" display="flex" flexDirection="row">
+          <Typography fontSize="12px" minWidth="50px">
+            {props.value.toFixed(1).replace(".0", "")}%
+          </Typography>
+          <Box
+            width="220px"
+            height="12px"
+            display="flex"
+            bgcolor="#CFD4DA"
+            justifyContent="flex-start"
+          >
+            <Box
+              height="100%"
+              bgcolor={props.color}
+              width={`${props.value}%`}
+            />
+          </Box>
         </Box>
         <Button
           fullWidth
@@ -128,7 +141,9 @@ const ExpandableItem: React.FC<FinancialMetricExpandableItemProps> = (
             fontWeight: "400",
             textTransform: "none",
             justifyContent: "flex-start",
-            paddingLeft: `${(props.level + 1 + (props.items.length === 0 ? 1 : 0)) * 20}px`,
+            paddingLeft: `${
+              (props.level + 1 + (props.items.length === 0 ? 1 : 0)) * 20
+            }px`,
             "&:hover": {
               background: "transparent",
             },

diff --git a/src/app/components/charts/heatmap/index.tsx b/src/app/components/charts/heatmap/index.tsx
@@ -253,6 +253,12 @@ export function Heatmap(props: HeatmapProps) {
                 height: "11px",
               },
             },
+            "@media (max-width: 767px)": {
+              gap: "10px",
+              "> div": {
+                flexDirection: "column",
+              },
+            },
           }}
         >
           {LEGENDS.map((item) => (

diff --git a/src/app/components/charts/line/index.tsx b/src/app/components/charts/line/index.tsx
@@ -78,6 +78,7 @@ const Tooltip = (props: any) => {
 
 export const LineChart: React.FC<LineChartProps> = (props: LineChartProps) => {
   const isTouch = useMediaQuery("(hover: none)");
+  const mobile = useMediaQuery("(max-width: 767px)");
   const containerRef = React.useRef<HTMLDivElement>(null);
 
   const [stateChart, setStateChart] =
@@ -157,6 +158,7 @@ export const LineChart: React.FC<LineChartProps> = (props: LineChartProps) => {
           axisLabel: {
             interval: 1,
             fontSize: "10px",
+            rotate: mobile ? 90 : 0,
             fontFamily: "Inter, sans-serif",
             color: appColors.LINE_CHART.CHART_TEXT_COLOR,
           },