From d1ed7c20a843fecae09ca70048b1edee5751d725 Mon Sep 17 00:00:00 2001 From: saurabh Date: Sat, 25 Oct 2025 00:38:29 +0530 Subject: [PATCH] fix - hallmark responsiveness on mobile --- src/components/ECharts/UnlocksChart/index.tsx | 10 +++++++--- src/containers/ProtocolOverview/Chart/Chart.tsx | 7 +++++-- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/ECharts/UnlocksChart/index.tsx b/src/components/ECharts/UnlocksChart/index.tsx index 6576deeb4..921093266 100644 --- a/src/components/ECharts/UnlocksChart/index.tsx +++ b/src/components/ECharts/UnlocksChart/index.tsx @@ -5,6 +5,7 @@ import { useDarkModeManager } from '~/contexts/LocalStorage' import type { IChartProps } from '../types' import { useDefaults } from '../useDefaults' import { mergeDeep, stringToColour } from '../utils' +import useWindowSize from '~/hooks/useWindowSize' // TODO remove color prop and use stackColors by default export default function AreaChart({ @@ -33,6 +34,8 @@ export default function AreaChart({ const chartsStack = stacks || customLegendOptions const [isThemeDark] = useDarkModeManager() + const windowSize = useWindowSize() + const isMobile = windowSize.width && windowSize.width < 768 const defaultChartSettings = useDefaults({ color, @@ -91,7 +94,7 @@ export default function AreaChart({ label: { color: isThemeDark ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)', fontFamily: 'sans-serif', - fontSize: 14, + fontSize: isMobile ? 10 : 14, fontWeight: 500 } }, @@ -160,7 +163,7 @@ export default function AreaChart({ label: { color: isThemeDark ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)', fontFamily: 'sans-serif', - fontSize: 14, + fontSize: isMobile ? 10 : 14, fontWeight: 500 } }, @@ -213,7 +216,8 @@ export default function AreaChart({ hideGradient, customLegendName, legendOptions, - expandTo100Percent + expandTo100Percent, + isMobile ]) const createInstance = useCallback(() => { diff --git a/src/containers/ProtocolOverview/Chart/Chart.tsx b/src/containers/ProtocolOverview/Chart/Chart.tsx index 7d967f46f..3506297f9 100644 --- a/src/containers/ProtocolOverview/Chart/Chart.tsx +++ b/src/containers/ProtocolOverview/Chart/Chart.tsx @@ -5,6 +5,7 @@ import { useDefaults } from '~/components/ECharts/useDefaults' import { mergeDeep } from '~/components/ECharts/utils' import { formattedNum } from '~/utils' import { BAR_CHARTS, ProtocolChartsLabels, yAxisByChart } from './constants' +import useWindowSize from '~/hooks/useWindowSize' const customOffsets = { Contributors: 60, @@ -31,6 +32,8 @@ export default function ProtocolLineBarChart({ }) { const id = useId() const isCumulative = groupBy === 'cumulative' + const windowSize = useWindowSize() + const isMobile = windowSize.width && windowSize.width < 768 const defaultChartSettings = useDefaults({ color, @@ -137,7 +140,7 @@ export default function ProtocolLineBarChart({ label: { color: isThemeDark ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)', fontFamily: 'sans-serif', - fontSize: 14, + fontSize: isMobile ? 10 : 14, fontWeight: 500 } }, @@ -162,7 +165,7 @@ export default function ProtocolLineBarChart({ series, allYAxis: Object.entries(indexByYAxis) as Array<[ProtocolChartsLabels, number | undefined]> } - }, [chartData, chartColors, hallmarks, isThemeDark, isCumulative, rangeHallmarks]) + }, [chartData, chartColors, hallmarks, isThemeDark, isCumulative, rangeHallmarks, isMobile]) const createInstance = useCallback(() => { const instance = echarts.getInstanceByDom(document.getElementById(id))