diff --git a/src/pages/analytics/components/RelayerChartWithChainSlider.tsx b/src/pages/analytics/components/RelayerChartWithChainSlider.tsx
new file mode 100644
index 00000000..eda37b0e
--- /dev/null
+++ b/src/pages/analytics/components/RelayerChartWithChainSlider.tsx
@@ -0,0 +1,270 @@
+import { useContext, useEffect, useState } from 'react'
+import { bech32PrefixToChainName, formatNumber } from 'utils/commons'
+import Tooltip from '@mui/material/Tooltip'
+import Slider from '@mui/material/Slider'
+import {
+ Chart as ChartJS,
+ CategoryScale,
+ LinearScale,
+ BarElement,
+ Tooltip as ChartTooltip,
+ Legend,
+ BarController
+} from 'chart.js'
+import { Bar } from 'react-chartjs-2'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
+import { useUserPreferencesStore } from 'store/UserPreferences'
+import { APIContext } from 'context/APIContext'
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, ChartTooltip, Legend, BarController)
+
+type Entry = {
+ Date: string
+ IBC_Counterpart: string
+ Relayer: string
+ Transactions: number
+}
+
+export default function RelayerChartWithChainSlider() {
+ const { theme } = useUserPreferencesStore()
+ const { analyticsData4 } = useContext(APIContext)
+ const [chartData, setChartData] = useState
(null)
+ const [chainLabels, setChainLabels] = useState([])
+ const [selectedChainIndex, setSelectedChainIndex] = useState(0)
+ const [chainMap, setChainMap] = useState>({})
+ const [marks, setMarks] = useState<{ value: number; label: string }[]>([])
+
+ const updateChartDataForChain = (chainName: string, entries: Entry[]) => {
+ // Initialize data structures
+ const dataMatrix: Map> = new Map()
+ const datesSet: Set = new Set()
+ const relayersSet: Set = new Set()
+
+ // Build dataMatrix and collect unique dates and relayers
+ for (const entry of entries) {
+ const date = new Date(entry.Date).toISOString().split('T')[0]
+ const relayer = entry.Relayer || 'Other'
+
+ datesSet.add(date)
+ relayersSet.add(relayer)
+
+ if (!dataMatrix.has(relayer)) {
+ dataMatrix.set(relayer, new Map())
+ }
+ const dateMap = dataMatrix.get(relayer)!
+ dateMap.set(date, (dateMap.get(date) || 0) + entry.Transactions)
+ }
+
+ // Sort dates
+ const sortedDates = Array.from(datesSet).sort((a, b) => new Date(a).getTime() - new Date(b).getTime())
+
+ // Sort relayers
+ const sortedRelayers = Array.from(relayersSet).sort((a, b) => a.localeCompare(b))
+
+ // Create datasets for each relayer
+ const datasets = sortedRelayers.map((relayer) => {
+ const dateMap = dataMatrix.get(relayer)!
+ const data = sortedDates.map((date) => dateMap.get(date) || 0)
+ return {
+ label: relayer,
+ data,
+ backgroundColor: getColorFromRelayer(relayer)
+ }
+ })
+
+ // Set chart data with prepared labels and datasets
+ setChartData({
+ labels: sortedDates,
+ datasets
+ })
+ }
+
+ useEffect(() => {
+ // Process data grouped by chain
+ const chainMap: Record = {}
+
+ analyticsData4
+ .filter((entry: Entry) => entry.IBC_Counterpart !== null && entry.IBC_Counterpart !== 'secret')
+ .forEach((entry: Entry) => {
+ const chainBech32Prefix = entry.IBC_Counterpart
+ const chainName = bech32PrefixToChainName.get(chainBech32Prefix) || chainBech32Prefix
+ chainMap[chainName] ||= []
+ chainMap[chainName].push(entry)
+ })
+
+ const sortedChains = Object.keys(chainMap).sort((a, b) => a.localeCompare(b))
+ setChainLabels(sortedChains)
+ setChainMap(chainMap)
+
+ // Generate marks for the slider
+ const marks: { value: number; label: string }[] = []
+ const lettersSeen = new Set()
+ sortedChains.forEach((chainName, index) => {
+ const letter = chainName.charAt(0).toUpperCase()
+ if (!lettersSeen.has(letter)) {
+ marks.push({ value: index, label: letter })
+ lettersSeen.add(letter)
+ }
+ })
+ setMarks(marks)
+
+ // Find the index of "osmosis"
+ const osmosisIndex = sortedChains.findIndex((chainName) => chainName.toLowerCase() === 'osmosis')
+
+ // Determine the default index
+ const defaultIndex = osmosisIndex !== -1 ? osmosisIndex : 0
+ setSelectedChainIndex(defaultIndex)
+
+ // Initialize chart data with the default chain's data
+ if (sortedChains.length > 0) {
+ const initialChain = sortedChains[defaultIndex]
+ updateChartDataForChain(initialChain, chainMap[initialChain])
+ }
+ }, [analyticsData4])
+
+ const handleSliderChange = (event: Event, newValue: number | number[]) => {
+ const index = newValue as number
+ setSelectedChainIndex(index)
+
+ const selectedChain = chainLabels[index]
+ const chainEntries = chainMap[selectedChain] || []
+
+ updateChartDataForChain(selectedChain, chainEntries)
+ }
+
+ const options = {
+ responsive: true,
+ animation: true,
+ maintainAspectRatio: false,
+ scales: {
+ x: {
+ stacked: true,
+ ticks: {
+ color: theme === 'dark' ? '#fff' : '#000',
+ callback: function (value: any, index: number) {
+ return new Date(chartData.labels[index]).toLocaleDateString(undefined, {
+ year: '2-digit',
+ month: '2-digit',
+ day: '2-digit'
+ })
+ }
+ },
+ grid: {
+ color: theme === 'dark' ? '#fff' : '#000',
+ alpha: 0.5,
+ display: false,
+ drawOnChartArea: true,
+ drawTicks: true,
+ tickLength: 0
+ },
+ border: {
+ color: theme === 'dark' ? '#fff' : '#000'
+ }
+ },
+ y: {
+ beginAtZero: true,
+ stacked: true,
+ ticks: {
+ color: theme === 'dark' ? '#fff' : '#000',
+ callback: function (value: any) {
+ return formatNumber(value, 2)
+ }
+ },
+ border: {
+ color: theme === 'dark' ? '#fff' : '#000'
+ },
+ grid: {
+ color: theme === 'dark' ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)',
+ display: true,
+ drawOnChartArea: true,
+ drawTicks: true,
+ tickLength: 0
+ }
+ }
+ },
+ plugins: {
+ legend: {
+ display: false
+ },
+ tooltip: {
+ xAlign: 'center',
+ color: theme === 'dark' ? '#fff' : '#000',
+ callbacks: {
+ label: function (context: any) {
+ if (context.parsed.y !== null) {
+ return `${context.dataset.label}: ${formatNumber(context.parsed.y)} Transactions`
+ }
+ return ''
+ }
+ }
+ }
+ }
+ }
+
+ function getColorFromRelayer(relayer: string) {
+ // Generate a unique color based on the relayer name
+ let hash = 0
+ for (let i = 0; i < relayer.length; i++) {
+ hash = relayer.charCodeAt(i) + ((hash << 5) - hash)
+ }
+ const color = `#${(hash & 0x00ffffff).toString(16).padStart(6, '0').slice(-6)}`
+ return color
+ }
+
+ return (
+ <>
+
+
+ {`IBC Transactions by Date and Relayer for ${chainLabels[selectedChainIndex]}`}
+
+
+
+
+
+
+
+
+ {chartData ? : null}
+
+
+ {/* Remove the separate selected chain name display */}
+
+ Chain:
+ chainLabels[value]}
+ sx={{
+ color: theme === 'dark' ? '#fff' : '#000', // Set the slider color based on the theme
+ '& .MuiSlider-thumb': {
+ backgroundColor: theme === 'dark' ? '#fff' : '#000' // Thumb color
+ },
+ '& .MuiSlider-track': {
+ backgroundColor: theme === 'dark' ? '#fff' : '#000' // Track color
+ },
+ '& .MuiSlider-rail': {
+ backgroundColor: theme === 'dark' ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)' // Rail color
+ },
+ '& .MuiSlider-mark': {
+ backgroundColor: theme === 'dark' ? '#fff' : '#000' // Marks color
+ },
+ '& .MuiSlider-markLabel': {
+ color: theme === 'dark' ? '#fff' : '#000' // Mark labels color
+ }
+ }}
+ />
+
+
+
+ IBC Transactions by Chain and Relayer
+
+
+
+
+
+
+
+
+ {chartData ? : null}
+
+
+
+
+ new Date(dates[value]).toLocaleDateString(undefined, {
+ year: '2-digit',
+ month: '2-digit',
+ day: '2-digit'
+ })
+ }
+ sx={{
+ color: theme === 'dark' ? '#fff' : '#000', // Set the slider color based on the theme
+ '& .MuiSlider-thumb': {
+ backgroundColor: theme === 'dark' ? '#fff' : '#000' // Thumb color
+ },
+ '& .MuiSlider-track': {
+ backgroundColor: theme === 'dark' ? '#fff' : '#000' // Track color
+ },
+ '& .MuiSlider-rail': {
+ backgroundColor: theme === 'dark' ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)' // Rail color (unfilled part of the slider)
+ },
+ '& .MuiSlider-mark': {
+ backgroundColor: theme === 'dark' ? '#fff' : '#000' // Marks color
+ },
+ '& .MuiSlider-markLabel': {
+ color: theme === 'dark' ? '#fff' : '#000' // Mark labels color
+ }
+ }}
+ />
+
+
+
+ IBC Transactions by Date and Chain (Per Relayer)
+
+
+
+
+
+
+
+
+ {chartData ? : null}
+
+
+
+ Relayer:
+ relayers[value]}
+ sx={{
+ color: theme === 'dark' ? '#fff' : '#000', // Set the slider color based on the theme
+ '& .MuiSlider-thumb': {
+ backgroundColor: theme === 'dark' ? '#fff' : '#000' // Thumb color
+ },
+ '& .MuiSlider-track': {
+ backgroundColor: theme === 'dark' ? '#fff' : '#000' // Track color
+ },
+ '& .MuiSlider-rail': {
+ backgroundColor: theme === 'dark' ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)' // Rail color
+ },
+ '& .MuiSlider-mark': {
+ backgroundColor: theme === 'dark' ? '#fff' : '#000' // Marks color
+ },
+ '& .MuiSlider-markLabel': {
+ color: theme === 'dark' ? '#fff' : '#000'
+ }
+ }}
+ />
+
+