From 26bdd53e1022d563e68e6f0b9e39cd67e80606ed Mon Sep 17 00:00:00 2001
From: zuies <zurabichkhikvadze66@gmail.com>
Date: Thu, 30 Nov 2023 12:19:26 +0300
Subject: [PATCH] fix updating heatmap data

---
 .../platform/TcCommunityName.tsx              |  7 +++--
 .../platform/TcPlatformChannels.tsx           |  2 +-
 .../platform/TcPlatformPeriod.tsx             |  2 +-
 .../pages/pageIndex/HeatmapChart.tsx          | 27 +++++++++++++++++--
 4 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/components/communitySettings/platform/TcCommunityName.tsx b/src/components/communitySettings/platform/TcCommunityName.tsx
index 6d8787dd..27c09409 100644
--- a/src/components/communitySettings/platform/TcCommunityName.tsx
+++ b/src/components/communitySettings/platform/TcCommunityName.tsx
@@ -1,8 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import TcText from '../../shared/TcText';
 import TcAvatar from '../../shared/TcAvatar';
 import moment from 'moment';
 import { IPlatformProps } from '../../../utils/interfaces';
+import { MdGroups } from 'react-icons/md';
 
 interface TccommunityName {
   platform: IPlatformProps | null;
@@ -11,7 +12,9 @@ interface TccommunityName {
 function TcCommunityName({ platform }: TccommunityName) {
   return (
     <div className="flex justify-start space-x-4 items-center py-3">
-      <TcAvatar data-testid="tc-avatar" />
+      <TcAvatar data-testid="tc-avatar">
+        <MdGroups />
+      </TcAvatar>
       <div className="flex flex-col">
         <TcText text={platform?.metadata?.name} variant="body1" />
         <TcText
diff --git a/src/components/communitySettings/platform/TcPlatformChannels.tsx b/src/components/communitySettings/platform/TcPlatformChannels.tsx
index 8c8ee14c..94af1031 100644
--- a/src/components/communitySettings/platform/TcPlatformChannels.tsx
+++ b/src/components/communitySettings/platform/TcPlatformChannels.tsx
@@ -8,7 +8,7 @@ function TcPlatformChannels() {
     <div>
       <div className="flex items-stretch md:space-x-4">
         <TcAvatar className="hidden md:flex">
-          <FaHashtag color="black" />
+          <FaHashtag color="white" />
         </TcAvatar>
         <div className="space-y-4 pt-2">
           <TcPlatformChannelDialog />
diff --git a/src/components/communitySettings/platform/TcPlatformPeriod.tsx b/src/components/communitySettings/platform/TcPlatformPeriod.tsx
index 1923b8a5..a92b0dc4 100644
--- a/src/components/communitySettings/platform/TcPlatformPeriod.tsx
+++ b/src/components/communitySettings/platform/TcPlatformPeriod.tsx
@@ -21,7 +21,7 @@ function TcPlatformPeriod({ onDateChange, platform }: ITcPlatformPeriodProps) {
     <div>
       <div className="flex items-stretch md:space-x-4">
         <TcAvatar className="hidden md:flex">
-          <MdOutlineCalendarToday color="black" />
+          <MdOutlineCalendarToday color="white" />
         </TcAvatar>
         <div className="space-y-4 pt-2">
           <TcText
diff --git a/src/components/pages/pageIndex/HeatmapChart.tsx b/src/components/pages/pageIndex/HeatmapChart.tsx
index a7943450..1eac800c 100644
--- a/src/components/pages/pageIndex/HeatmapChart.tsx
+++ b/src/components/pages/pageIndex/HeatmapChart.tsx
@@ -24,6 +24,9 @@ if (typeof Highcharts === 'object') {
   HighchartsHeatmap(Highcharts);
 }
 
+type HeatmapDataPoint = [number, number, number | null];
+type HeatmapData = HeatmapDataPoint[];
+
 const HeatmapChart = () => {
   const channelContext = useContext(ChannelContext);
 
@@ -55,13 +58,15 @@ const HeatmapChart = () => {
     setLoading(true);
     try {
       if (platformId) {
-        await fetchHeatmapData(
+        const data = await fetchHeatmapData(
           platformId,
           dateRange[0],
           dateRange[1],
           selectedZone,
           extractTrueSubChannelIds(selectedSubChannels)
         );
+
+        updateHeatmapData(data);
       }
     } catch (error) {
     } finally {
@@ -69,6 +74,24 @@ const HeatmapChart = () => {
     }
   };
 
+  const updateHeatmapData = (responseData: HeatmapData) => {
+    const newOptions = {
+      ...defaultHeatmapChartOptions,
+      series: [
+        {
+          ...defaultHeatmapChartOptions.series[0],
+          data: responseData.map((item: HeatmapDataPoint) => [
+            item[1],
+            item[0],
+            item[2] ?? 0,
+          ]),
+        },
+      ],
+    };
+
+    setHeatmapChartOptions(newOptions);
+  };
+
   useEffect(() => {
     fetchPlatformChannels();
     fetchData();
@@ -151,7 +174,7 @@ const HeatmapChart = () => {
       return;
     }
     fetchData();
-  }, [dateRange, selectedZone]);
+  }, [dateRange, selectedZone, platformId]);
 
   return (
     <div className="bg-white shadow-box rounded-lg p-5 min-h-[400px]">