Getting data for statistic from endpoint

src/components/Chart/Chart.tsx

@@ -54,6 +54,7 @@ export const Chart: React.FC<{
       left: "3%",
       right: "4%",
       bottom: "3%",
+      top: "10%",
       containLabel: true,
     },
     xAxis: [
@@ -68,6 +69,10 @@ export const Chart: React.FC<{
     yAxis: [
       {
         type: "value",
+        name: "char.",
+        nameTextStyle: {
+          align: "right",
+        },
       },
     ],
     series: [
@@ -77,42 +82,29 @@ export const Chart: React.FC<{
         stack: "Ad",
         data: humanData,
         barWidth: "80%",
+        itemStyle: { normal: { color: "#91cc75" } },
       },
       {
         name: "Refact",
         type: "bar",
         stack: "Ad",
         data: refactData,
         barWidth: "80%",
+        itemStyle: { normal: { color: "#5470c6" } },
       },
     ],
   };
 
   return (
     <Box mt="3" width="100%">
-      <Text as="p" size="2">
+      <Text as="p" size="2" mt="5">
         Refact vs Human
       </Text>
       <ReactEChartsCore
         echarts={echarts}
         option={option}
         style={{ width: "100%", height: "300px" }}
       />
-      <Box>
-        {dates.map((date: string, index: number) => (
-          <Box key={index}>
-            <Text size="1" as="p">
-              Date: {date}
-            </Text>
-            <Text size="1" as="p">
-              Human: {humanData[index]} ch.
-            </Text>
-            <Text size="1" mb="2" as="p">
-              Refact: {refactData[index]} ch.
-            </Text>
-          </Box>
-        ))}
-      </Box>
     </Box>
   );
 };

src/components/Table/Table.tsx

@@ -12,10 +12,10 @@ import { formatTableCell } from "./formatTableCell";
 
 const convertedColumnNames: Record<ColumnName, string> = {
   lang: "Lang.",
-  refact: "Refact",
-  human: "Human",
-  total: "Total",
-  refact_impact: "Refact Impact",
+  refact: "Refact (char.)",
+  human: "Human (char.)",
+  total: "Total (char.)",
+  refact_impact: "Refact Impact (%)",
   completions: "Compl.",
 };
 

src/events/statistic.ts

@@ -1,3 +1,48 @@
 export enum EVENT_NAMES_FROM_STATISTIC {
   BACK_FROM_STATISTIC = "back_from_statistic",
 }
+
+export enum EVENT_NAMES_TO_STATISTIC {
+  REQUEST_STATISTIC_DATA = "request_statistic_data",
+  RECEIVE_STATISTIC_DATA = "receive_statistic_data",
+  RECEIVE_STATISTIC_DATA_ERROR = "receive_statistic_data_error",
+}
+
+interface BaseAction {
+  type: EVENT_NAMES_FROM_STATISTIC | EVENT_NAMES_TO_STATISTIC;
+  payload?: { data: string };
+}
+
+export interface ActionToStatistic extends BaseAction {
+  type: EVENT_NAMES_TO_STATISTIC;
+}
+export interface RequestDataForStatistic extends ActionToStatistic {
+  type: EVENT_NAMES_TO_STATISTIC.REQUEST_STATISTIC_DATA;
+}
+
+export function isActionToStatistic(
+  action: unknown,
+): action is ActionToStatistic {
+  if (!action) return false;
+  if (typeof action !== "object") return false;
+  if (!("type" in action)) return false;
+  if (typeof action.type !== "string") return false;
+  const ALL_EVENT_NAMES: Record<string, string> = {
+    ...EVENT_NAMES_TO_STATISTIC,
+  };
+  return Object.values(ALL_EVENT_NAMES).includes(action.type);
+}
+
+export function isRequestDataForStatistic(
+  action: unknown,
+): action is RequestDataForStatistic {
+  if (!isActionToStatistic(action)) return false;
+  return action.type === EVENT_NAMES_TO_STATISTIC.REQUEST_STATISTIC_DATA;
+}
+
+export function isReceiveDataForStatistic(
+  action: unknown,
+): action is RequestDataForStatistic {
+  if (!isActionToStatistic(action)) return false;
+  return action.type === EVENT_NAMES_TO_STATISTIC.RECEIVE_STATISTIC_DATA;
+}

src/features/Statistic.tsx

@@ -1,22 +1,19 @@
 import React, { useEffect, useState } from "react";
 import { Box, Flex, Button, Heading, Responsive } from "@radix-ui/themes";
-import { RefactTableData } from "../services/refact";
 import { Table } from "../components/Table/Table";
 import { Chart } from "../components/Chart/Chart";
 import { Spinner } from "../components/Spinner";
 import { ArrowLeftIcon } from "@radix-ui/react-icons";
 import { useConfig } from "../contexts/config-context";
 import { ScrollArea } from "../components/ScrollArea";
-import { TABLE } from "../__fixtures__";
 import { useEventBusForStatistic } from "../hooks";
 
 export const Statistic: React.FC<{
   onCloseStatistic?: () => void;
 }> = ({ onCloseStatistic }) => {
-  const [isLoaded, setIsLoaded] = useState<boolean>(false);
-  const [refactTable, setRefactTable] = useState<RefactTableData | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const { host, tabbed } = useConfig();
-  const { backFromStatistic } = useEventBusForStatistic();
+  const { backFromStatistic, statisticData } = useEventBusForStatistic();
   const LeftRightPadding: Responsive<
     "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
   > =
@@ -38,11 +35,10 @@ export const Statistic: React.FC<{
   };
 
   useEffect(() => {
-    if (TABLE.data) {
-      setRefactTable(JSON.parse(TABLE.data) as RefactTableData);
-      setIsLoaded(true);
+    if (statisticData) {
+      setIsLoading(false);
     }
-  }, []);
+  }, [statisticData]);
 
   return (
     <Flex
@@ -78,7 +74,9 @@ export const Statistic: React.FC<{
             width: "inherit",
           }}
         >
-          {isLoaded ? (
+          {isLoading ? (
+            <Spinner />
+          ) : (
             <Box
               style={{
                 width: "inherit",
@@ -90,25 +88,23 @@ export const Statistic: React.FC<{
                   width: "inherit",
                 }}
               >
-                <Heading as="h3" align="center" mb="1">
+                <Heading as="h3" align="center" mb="5">
                   Statistics
                 </Heading>
-                {refactTable !== null && (
+                {statisticData !== null && (
                   <Flex align="center" justify="center" direction="column">
                     <Table
-                      refactImpactTable={refactTable.table_refact_impact.data}
+                      refactImpactTable={statisticData.table_refact_impact.data}
                     />
                     <Chart
                       refactImpactDatesWeekly={
-                        refactTable.refact_impact_dates.data.weekly
+                        statisticData.refact_impact_dates.data.weekly
                       }
                     />
                   </Flex>
                 )}
               </Flex>
             </Box>
-          ) : (
-            <Spinner />
           )}
         </Flex>
       </ScrollArea>

src/hooks/useEventBusForHost.ts

@@ -3,14 +3,17 @@ import { sendChat, getCaps, ChatContextFile } from "../services/refact";
 import { useChatHistory } from "./useChatHistory";
 import {
   EVENT_NAMES_TO_CHAT,
+  EVENT_NAMES_TO_STATISTIC,
   ChatThread,
   isQuestionFromChat,
   isSaveChatFromChat,
   isRequestCapsFromChat,
   isStopStreamingFromChat,
   isRequestForFileFromChat,
+  isRequestDataForStatistic,
 } from "../events";
 import { useConfig } from "../contexts/config-context";
+import { getStatisticData } from "../services/refact";
 
 export function useEventBusForHost() {
   const { lspUrl } = useConfig();
@@ -119,6 +122,24 @@ export function useEventBusForHost() {
             );
           });
       }
+
+      if (isRequestDataForStatistic(event.data)) {
+        getStatisticData(lspUrl)
+          .then((data) => {
+            window.postMessage({
+              type: EVENT_NAMES_TO_STATISTIC.RECEIVE_STATISTIC_DATA,
+              payload: data,
+            });
+          })
+          .catch((error: Error) => {
+            window.postMessage({
+              type: EVENT_NAMES_TO_STATISTIC.RECEIVE_STATISTIC_DATA_ERROR,
+              payload: {
+                message: error.message,
+              },
+            });
+          });
+      }
     };
 
     window.addEventListener("message", listener);

src/hooks/useEventBusForStatistic.ts

@@ -1,16 +1,55 @@
-import { EVENT_NAMES_FROM_STATISTIC } from "../events";
+import {
+  EVENT_NAMES_FROM_STATISTIC,
+  EVENT_NAMES_TO_STATISTIC,
+  isReceiveDataForStatistic,
+} from "../events";
 import { usePostMessage } from "./usePostMessage";
+import { useEffect, useState } from "react";
+import { StatisticData } from "../services/refact";
 
 export const useEventBusForStatistic = () => {
   const postMessage = usePostMessage();
+  const [statisticData, setStatisticData] = useState<StatisticData | null>(
+    null,
+  );
 
-  function backFromStatistic() {
+  const backFromStatistic = () => {
     postMessage({
       type: EVENT_NAMES_FROM_STATISTIC.BACK_FROM_STATISTIC,
     });
-  }
+  };
+
+  useEffect(() => {
+    const listener = (event: MessageEvent) => {
+      if (isReceiveDataForStatistic(event.data)) {
+        if (event.data.payload !== undefined) {
+          const parsedData = JSON.parse(
+            event.data.payload.data,
+          ) as StatisticData;
+          setStatisticData(parsedData);
+        }
+      }
+    };
+
+    window.addEventListener("message", listener);
+
+    return () => {
+      window.removeEventListener("message", listener);
+    };
+  }, []);
+
+  useEffect(() => {
+    const requestStatisticData = () => {
+      postMessage({
+        type: EVENT_NAMES_TO_STATISTIC.REQUEST_STATISTIC_DATA,
+      });
+    };
+
+    requestStatisticData();
+  }, [postMessage]);
 
   return {
     backFromStatistic,
+    statisticData,
   };
 };

src/services/refact.ts

@@ -1,6 +1,7 @@
 import { getApiKey } from "../utils/ApiKey";
 const CHAT_URL = `/v1/chat`;
 const CAPS_URL = `/v1/caps`;
+const STATISTIC_URL = `/v1/get-dashboard-plots`;
 
 export type ChatRole = "user" | "assistant" | "context_file" | "system";
 
@@ -154,6 +155,37 @@ export async function getCaps(lspUrl?: string): Promise<CapsResponse> {
   return json;
 }
 
+export function isStatisticDataResponse(
+  json: unknown,
+): json is { data: string } {
+  if (!json || typeof json !== "object") return false;
+  return typeof (json as { data?: unknown }).data === "string";
+}
+
+export async function getStatisticData(
+  lspUrl?: string,
+): Promise<{ data: string }> {
+  const statisticDataEndpoint = lspUrl
+    ? `${lspUrl.replace(/\/*$/, "")}${STATISTIC_URL}`
+    : STATISTIC_URL;
+  const response = await fetch(statisticDataEndpoint, {
+    method: "GET",
+    credentials: "same-origin",
+    headers: {
+      accept: "application/json",
+    },
+  });
+  if (!response.ok) {
+    throw new Error(response.statusText);
+  }
+
+  const json: unknown = await response.json();
+  if (!isStatisticDataResponse(json)) {
+    throw new Error("Invalid response for statistic data");
+  }
+  return json;
+}
+
 type CodeChatModel = {
   default_scratchpad: string;
   n_ctx: number;
@@ -211,7 +243,7 @@ export type RefactTableImpactDateObj = {
 export type RefactTableImpactLanguagesRow = {
   [key in ColumnName]: string | number;
 };
-export type RefactTableData = {
+export type StatisticData = {
   refact_impact_dates: {
     data: {
       daily: Record<string, RefactTableImpactDateObj>;