Merge pull request #1 from HousewareHQ/product-analytics/adding-info-…

…for-graph

changes for adding some ui elements for metadata of pa charts

src/components/charts/Funnels.tsx

@@ -1,9 +1,30 @@
-import { Card, Flex, Typography } from "antd";
+import { Card, Flex, Typography, Tag } from "antd";
 import ReactECharts from "echarts-for-react";
-
 import Markdown from "react-markdown";
 import { useThemeManager } from "../useThemeManager";
 import getFunnelsChartOptions from "./getFunnelsChartOptions";
+import { CalendarOutlined, FieldTimeOutlined } from "@ant-design/icons";
+
+function formatConversionWindow(intervalInSeconds: number): string {
+  const units = [
+    { value: 60 * 60 * 24 * 30, name: 'month' },
+    { value: 60 * 60 * 24 * 7, name: 'week' },
+    { value: 60 * 60 * 24, name: 'day' },
+    { value: 60 * 60, name: 'hour' },
+    { value: 60, name: 'minute' },
+    { value: 1, name: 'second' }
+  ];
+
+  for (const unit of units) {
+    if (intervalInSeconds >= unit.value) {
+      const value = Math.round(intervalInSeconds / unit.value * 100) / 100;
+      const unitName = value === 1 ? unit.name : `${unit.name}s`;
+      return `${value} ${unitName}`;
+    }
+  }
+
+  return `${intervalInSeconds} seconds`;
+}
 
 export function Funnels({
   chartResponse,
@@ -20,6 +41,12 @@ export function Funnels({
     themeMode: currentTheme,
   });
 
+  const startDate = queryConfiguration?.start_date;
+  const endDate = queryConfiguration?.end_date;
+
+  const windowInterval = queryConfiguration?.conversion?.window_interval;
+  const formattedWindow = formatConversionWindow(windowInterval);
+
   return (
     <Flex
       vertical
@@ -35,6 +62,14 @@ export function Funnels({
           width: "100%",
         }}
       >
+        <Flex justify="flex-end" align="center" style={{ marginBottom: 16 }}>
+          <Tag icon={<CalendarOutlined />} color="blue">
+            {startDate} - {endDate}
+          </Tag>
+          <Tag icon={<FieldTimeOutlined />} color="green" style={{ marginLeft: 8 }}>
+            {formattedWindow} window
+          </Tag>
+        </Flex>
         <ReactECharts
           style={{ height: "40vh", width: "100%" }}
           option={chartOptions}

src/components/charts/Trends.tsx

@@ -1,8 +1,9 @@
-import { Card, Flex, Typography } from "antd";
+import { Card, Flex, Typography, Tag } from "antd";
 import ReactECharts from "echarts-for-react";
 import Markdown from "react-markdown";
 import { useThemeManager } from "../useThemeManager";
 import { getTrendsChartOptions } from "./getTrendsChartOptions";
+import { CalendarOutlined } from "@ant-design/icons";
 
 export function Trends({
   chartResponse,
@@ -19,6 +20,9 @@ export function Trends({
     themeMode: currentTheme,
   });
 
+  const startDate = queryConfiguration?.time?.start_date;
+  const endDate = queryConfiguration?.time?.end_date;
+
   return (
     <Flex
       vertical
@@ -34,6 +38,11 @@ export function Trends({
           width: "100%",
         }}
       >
+        <Flex justify="flex-end" align="center" style={{ marginBottom: 16 }}>
+          <Tag icon={<CalendarOutlined />} color="blue">
+            {startDate} - {endDate}
+          </Tag>
+        </Flex>
         <ReactECharts
           style={{ height: "40vh", width: "100%" }}
           option={chartOptions}