@oneuptime/common 10.0.31 → 10.0.34

package/UI/Components/LogsViewer/components/LogsAnalyticsView.tsx

@@ -14,7 +14,8 @@ import {
   Tooltip,
   ResponsiveContainer,
   CartesianGrid,
-  Legend,
+  AreaChart,
+  Area,
 } from "recharts";
 import RangeStartAndEndDateTime, {
   RangeStartAndEndDateTimeUtil,
@@ -57,15 +58,28 @@ export interface LogsAnalyticsViewProps {
 
 const CHART_COLORS: Array<string> = [
   "#6366f1", // indigo
-  "#f43f5e", // rose
+  "#ec4899", // pink
   "#10b981", // emerald
   "#f59e0b", // amber
   "#06b6d4", // cyan
-  "#ec4899", // pink
-  "#84cc16", // lime
-  "#d946ef", // fuchsia
+  "#8b5cf6", // violet
+  "#f43f5e", // rose
+  "#14b8a6", // teal
   "#64748b", // slate
-  "#ef4444", // red
+  "#84cc16", // lime
+];
+
+const CHART_COLORS_MUTED: Array<string> = [
+  "rgba(99,102,241,0.15)",
+  "rgba(236,72,153,0.15)",
+  "rgba(16,185,129,0.15)",
+  "rgba(245,158,11,0.15)",
+  "rgba(6,182,212,0.15)",
+  "rgba(139,92,246,0.15)",
+  "rgba(244,63,94,0.15)",
+  "rgba(20,184,166,0.15)",
+  "rgba(100,116,139,0.15)",
+  "rgba(132,204,22,0.15)",
 ];
 
 const DIMENSION_OPTIONS: Array<{ value: string; label: string }> = [
@@ -162,6 +176,113 @@ function computeDefaultBucketSize(startTime: Date, endTime: Date): number {
   return 1440;
 }
 
+interface AnalyticsTooltipProps {
+  active?: boolean;
+  label?: string;
+  payload?: Array<{
+    dataKey: string;
+    value: number;
+    color: string;
+  }>;
+}
+
+const AnalyticsTooltip: FunctionComponent<AnalyticsTooltipProps> = (
+  props: AnalyticsTooltipProps,
+): ReactElement | null => {
+  if (!props.active || !props.payload || props.payload.length === 0) {
+    return null;
+  }
+
+  const entries: Array<{ key: string; value: number; color: string }> =
+    props.payload
+      .filter((entry: { value: number }): boolean => {
+        return entry.value > 0;
+      })
+      .map(
+        (entry: {
+          dataKey: string;
+          value: number;
+          color: string;
+        }): { key: string; value: number; color: string } => {
+          return {
+            key: entry.dataKey,
+            value: entry.value,
+            color: entry.color,
+          };
+        },
+      );
+
+  if (entries.length === 0) {
+    return null;
+  }
+
+  const total: number = entries.reduce(
+    (sum: number, e: { value: number }): number => {
+      return sum + e.value;
+    },
+    0,
+  );
+
+  const formatTime: (label: string | undefined) => string = (
+    label: string | undefined,
+  ): string => {
+    if (!label) {
+      return "";
+    }
+
+    const date: Date = new Date(label);
+
+    if (isNaN(date.getTime())) {
+      return label;
+    }
+
+    return date.toLocaleString([], {
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+    });
+  };
+
+  return (
+    <div className="rounded-lg border border-gray-200/80 bg-white/95 px-3.5 py-2.5 shadow-lg backdrop-blur-sm">
+      <p className="mb-2 border-b border-gray-100 pb-2 font-mono text-[11px] font-medium text-gray-400">
+        {formatTime(props.label)}
+      </p>
+      <div className="space-y-1">
+        {entries.map((entry: { key: string; value: number; color: string }) => {
+          return (
+            <div
+              key={entry.key}
+              className="flex items-center justify-between gap-8"
+            >
+              <div className="flex items-center gap-2">
+                <span
+                  className="inline-block h-2.5 w-2.5 rounded-[3px]"
+                  style={{ backgroundColor: entry.color }}
+                />
+                <span className="text-xs text-gray-600">{entry.key}</span>
+              </div>
+              <span className="font-mono text-xs font-semibold tabular-nums text-gray-800">
+                {entry.value.toLocaleString()}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+      {entries.length > 1 && (
+        <div className="mt-2 flex items-center justify-between border-t border-gray-100 pt-2">
+          <span className="text-[11px] font-medium text-gray-400">Total</span>
+          <span className="font-mono text-xs font-bold tabular-nums text-gray-900">
+            {total.toLocaleString()}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};
+
 const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
   props: LogsAnalyticsViewProps,
 ): ReactElement => {
@@ -324,154 +445,171 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
     return pivotTimeseriesData(timeseriesData);
   }, [timeseriesData]);
 
+  const renderSelectControl: (
+    label: string,
+    value: string | number,
+    onChange: (val: string) => void,
+    options: Array<{ value: string | number; label: string }>,
+  ) => ReactElement = (
+    label: string,
+    value: string | number,
+    onChange: (val: string) => void,
+    options: Array<{ value: string | number; label: string }>,
+  ): ReactElement => {
+    return (
+      <div className="flex items-center">
+        <span className="mr-2 text-[11px] font-medium uppercase tracking-wider text-gray-400">
+          {label}
+        </span>
+        <select
+          className="appearance-none rounded-md border border-gray-200 bg-white px-2.5 py-1.5 pr-7 text-xs font-medium text-gray-700 shadow-sm transition-all hover:border-gray-300 focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-100"
+          value={value}
+          onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+            onChange(e.target.value);
+          }}
+          style={{
+            backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")`,
+            backgroundRepeat: "no-repeat",
+            backgroundPosition: "right 6px center",
+          }}
+        >
+          {options.map((opt: { value: string | number; label: string }) => {
+            return (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            );
+          })}
+        </select>
+      </div>
+    );
+  };
+
   const renderQueryBuilder: () => ReactElement = (): ReactElement => {
     return (
-      <div className="flex flex-wrap items-center gap-3 border-b border-gray-100 bg-gray-50/50 px-4 py-3">
-        {/* Chart type */}
-        <div className="flex items-center gap-1.5">
-          <label className="text-xs font-medium text-gray-500">Chart</label>
-          <select
-            className="rounded-md border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
-            value={chartType}
-            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-              setChartType(e.target.value as AnalyticsChartType);
-            }}
-          >
-            <option value="timeseries">Timeseries</option>
-            <option value="toplist">Top List</option>
-            <option value="table">Table</option>
-          </select>
-        </div>
+      <div className="flex flex-wrap items-center gap-4 border-b border-gray-100 px-5 py-3">
+        {renderSelectControl(
+          "Chart",
+          chartType,
+          (val: string) => {
+            setChartType(val as AnalyticsChartType);
+          },
+          [
+            { value: "timeseries", label: "Timeseries" },
+            { value: "toplist", label: "Top List" },
+            { value: "table", label: "Table" },
+          ],
+        )}
 
-        {/* Aggregation */}
-        <div className="flex items-center gap-1.5">
-          <label className="text-xs font-medium text-gray-500">Measure</label>
-          <select
-            className="rounded-md border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
-            value={aggregation}
-            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-              setAggregation(e.target.value as AnalyticsAggregation);
-            }}
-          >
-            <option value="count">Count</option>
-            <option value="unique">Unique Count</option>
-          </select>
-        </div>
+        <div className="h-4 w-px bg-gray-200" />
+
+        {renderSelectControl(
+          "Measure",
+          aggregation,
+          (val: string) => {
+            setAggregation(val as AnalyticsAggregation);
+          },
+          [
+            { value: "count", label: "Count" },
+            { value: "unique", label: "Unique Count" },
+          ],
+        )}
 
-        {/* Aggregation field for unique count */}
         {aggregation === "unique" && (
-          <div className="flex items-center gap-1.5">
-            <label className="text-xs font-medium text-gray-500">of</label>
-            <select
-              className="rounded-md border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
-              value={aggregationField}
-              onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-                setAggregationField(e.target.value);
-              }}
-            >
-              <option value="">Select field...</option>
-              {allDimensionOptions.map(
-                (opt: { value: string; label: string }) => {
-                  return (
-                    <option key={opt.value} value={opt.value}>
-                      {opt.label}
-                    </option>
-                  );
-                },
-              )}
-            </select>
-          </div>
+          <>
+            {renderSelectControl(
+              "of",
+              aggregationField,
+              (val: string) => {
+                setAggregationField(val);
+              },
+              [{ value: "", label: "Select field..." }, ...allDimensionOptions],
+            )}
+          </>
         )}
 
-        {/* Group by */}
-        <div className="flex items-center gap-1.5">
-          <label className="text-xs font-medium text-gray-500">Group by</label>
-          <select
-            className="rounded-md border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
-            value={groupByFields[0] || ""}
-            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-              const val: string = e.target.value;
+        <div className="h-4 w-px bg-gray-200" />
+
+        {renderSelectControl(
+          "Group by",
+          groupByFields[0] || "",
+          (val: string) => {
+            setGroupByFields((prev: Array<string>) => {
+              const next: Array<string> = [...prev];
+              next[0] = val;
+              return next.filter((f: string) => {
+                return f.length > 0;
+              });
+            });
+          },
+          [{ value: "", label: "None" }, ...allDimensionOptions],
+        )}
+
+        {groupByFields[0] &&
+          groupByFields[0].length > 0 &&
+          renderSelectControl(
+            "then by",
+            groupByFields[1] || "",
+            (val: string) => {
               setGroupByFields((prev: Array<string>) => {
-                const next: Array<string> = [...prev];
-                next[0] = val;
+                const next: Array<string> = [prev[0] || ""];
+
+                if (val.length > 0) {
+                  next.push(val);
+                }
+
                 return next.filter((f: string) => {
                   return f.length > 0;
                 });
               });
-            }}
-          >
-            <option value="">None</option>
-            {allDimensionOptions.map(
-              (opt: { value: string; label: string }) => {
-                return (
-                  <option key={opt.value} value={opt.value}>
-                    {opt.label}
-                  </option>
-                );
+            },
+            [
+              { value: "", label: "None" },
+              ...allDimensionOptions.filter((opt: { value: string }) => {
+                return opt.value !== groupByFields[0];
+              }),
+            ],
+          )}
+
+        {(chartType === "toplist" || chartType === "table") && (
+          <>
+            <div className="h-4 w-px bg-gray-200" />
+            {renderSelectControl(
+              "Limit",
+              topListLimit,
+              (val: string) => {
+                setTopListLimit(Number(val));
               },
+              TOP_LIST_LIMITS.map((limit: number) => {
+                return { value: limit, label: String(limit) };
+              }),
             )}
-          </select>
-        </div>
-
-        {/* Second group by (only if first is set) */}
-        {groupByFields[0] && groupByFields[0].length > 0 && (
-          <div className="flex items-center gap-1.5">
-            <label className="text-xs font-medium text-gray-500">then by</label>
-            <select
-              className="rounded-md border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
-              value={groupByFields[1] || ""}
-              onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-                const val: string = e.target.value;
-                setGroupByFields((prev: Array<string>) => {
-                  const next: Array<string> = [prev[0] || ""];
-
-                  if (val.length > 0) {
-                    next.push(val);
-                  }
-
-                  return next.filter((f: string) => {
-                    return f.length > 0;
-                  });
-                });
-              }}
-            >
-              <option value="">None</option>
-              {allDimensionOptions
-                .filter((opt: { value: string }) => {
-                  return opt.value !== groupByFields[0];
-                })
-                .map((opt: { value: string; label: string }) => {
-                  return (
-                    <option key={opt.value} value={opt.value}>
-                      {opt.label}
-                    </option>
-                  );
-                })}
-            </select>
-          </div>
+          </>
         )}
+      </div>
+    );
+  };
 
-        {/* Limit for top list and table */}
-        {(chartType === "toplist" || chartType === "table") && (
-          <div className="flex items-center gap-1.5">
-            <label className="text-xs font-medium text-gray-500">Limit</label>
-            <select
-              className="rounded-md border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
-              value={topListLimit}
-              onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-                setTopListLimit(Number(e.target.value));
-              }}
-            >
-              {TOP_LIST_LIMITS.map((limit: number) => {
-                return (
-                  <option key={limit} value={limit}>
-                    {limit}
-                  </option>
-                );
-              })}
-            </select>
-          </div>
-        )}
+  const renderLegend: () => ReactElement = (): ReactElement => {
+    if (seriesKeys.length <= 1) {
+      return <></>;
+    }
+
+    return (
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 px-5 pb-2">
+        {seriesKeys.map((key: string, index: number) => {
+          return (
+            <div key={key} className="flex items-center gap-1.5">
+              <span
+                className="inline-block h-2.5 w-2.5 rounded-[3px]"
+                style={{
+                  backgroundColor: CHART_COLORS[index % CHART_COLORS.length],
+                }}
+              />
+              <span className="text-[11px] text-gray-500">{key}</span>
+            </div>
+          );
+        })}
       </div>
     );
   };
@@ -481,79 +619,139 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
       return renderEmptyState();
     }
 
-    return (
-      <div className="p-4" style={{ height: 320 }}>
-        <ResponsiveContainer width="100%" height="100%">
-          <BarChart
-            data={pivotedData}
-            margin={{ top: 8, right: 16, bottom: 0, left: 0 }}
-            barCategoryGap="15%"
-            barGap={0}
-          >
-            <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
-            <XAxis
-              dataKey="time"
-              tickFormatter={formatTickTime}
-              tick={{ fontSize: 11, fill: "#9ca3af" }}
-              axisLine={{ stroke: "#e5e7eb" }}
-              tickLine={false}
-              minTickGap={40}
-              interval="preserveStartEnd"
-            />
-            <YAxis
-              tick={{ fontSize: 11, fill: "#9ca3af" }}
-              axisLine={false}
-              tickLine={false}
-              width={56}
-              allowDecimals={false}
-              tickFormatter={formatYAxisTick}
-            />
-            <Tooltip
-              contentStyle={{
-                fontSize: 12,
-                borderRadius: 6,
-                border: "1px solid #e5e7eb",
-              }}
-              labelFormatter={(label: string) => {
-                const d: Date = new Date(label);
-
-                if (isNaN(d.getTime())) {
-                  return label;
-                }
+    const useAreaChart: boolean = seriesKeys.length === 1;
 
-                return d.toLocaleString([], {
-                  month: "short",
-                  day: "numeric",
-                  hour: "2-digit",
-                  minute: "2-digit",
-                  hour12: false,
-                });
-              }}
-            />
-            <Legend
-              wrapperStyle={{ fontSize: 11 }}
-              iconType="square"
-              iconSize={10}
-            />
-            {seriesKeys.map((key: string, index: number) => {
-              return (
-                <Bar
-                  key={key}
-                  dataKey={key}
-                  stackId="group"
-                  fill={CHART_COLORS[index % CHART_COLORS.length]!}
-                  radius={
-                    index === seriesKeys.length - 1
-                      ? [2, 2, 0, 0]
-                      : [0, 0, 0, 0]
-                  }
+    return (
+      <div className="px-2 pt-4 pb-2">
+        {renderLegend()}
+        <div style={{ height: 320 }}>
+          <ResponsiveContainer width="100%" height="100%">
+            {useAreaChart ? (
+              <AreaChart
+                data={pivotedData}
+                margin={{ top: 8, right: 20, bottom: 4, left: 0 }}
+              >
+                <defs>
+                  <linearGradient
+                    id="areaGradient0"
+                    x1="0"
+                    y1="0"
+                    x2="0"
+                    y2="1"
+                  >
+                    <stop
+                      offset="0%"
+                      stopColor={CHART_COLORS[0]}
+                      stopOpacity={0.2}
+                    />
+                    <stop
+                      offset="95%"
+                      stopColor={CHART_COLORS[0]}
+                      stopOpacity={0.02}
+                    />
+                  </linearGradient>
+                </defs>
+                <CartesianGrid
+                  strokeDasharray="none"
+                  stroke="#f1f5f9"
+                  vertical={false}
+                />
+                <XAxis
+                  dataKey="time"
+                  tickFormatter={formatTickTime}
+                  tick={{ fontSize: 11, fill: "#94a3b8" }}
+                  axisLine={{ stroke: "#e2e8f0" }}
+                  tickLine={false}
+                  minTickGap={50}
+                  interval="preserveStartEnd"
+                  dy={8}
+                />
+                <YAxis
+                  tick={{ fontSize: 11, fill: "#94a3b8" }}
+                  axisLine={false}
+                  tickLine={false}
+                  width={52}
+                  allowDecimals={false}
+                  tickFormatter={formatYAxisTick}
+                />
+                <Tooltip
+                  content={<AnalyticsTooltip />}
+                  cursor={{
+                    stroke: "#c7d2fe",
+                    strokeWidth: 1,
+                    strokeDasharray: "4 4",
+                  }}
+                />
+                <Area
+                  dataKey={seriesKeys[0] || "count"}
+                  stroke={CHART_COLORS[0]}
+                  strokeWidth={2}
+                  fill="url(#areaGradient0)"
+                  dot={false}
+                  activeDot={{
+                    r: 4,
+                    fill: CHART_COLORS[0],
+                    stroke: "#fff",
+                    strokeWidth: 2,
+                  }}
                   isAnimationActive={false}
-                  maxBarSize={32}
                 />
-              );
-            })}
-          </BarChart>
-        </ResponsiveContainer>
+              </AreaChart>
+            ) : (
+              <BarChart
+                data={pivotedData}
+                margin={{ top: 8, right: 20, bottom: 4, left: 0 }}
+                barCategoryGap="20%"
+                barGap={0}
+              >
+                <CartesianGrid
+                  strokeDasharray="none"
+                  stroke="#f1f5f9"
+                  vertical={false}
+                />
+                <XAxis
+                  dataKey="time"
+                  tickFormatter={formatTickTime}
+                  tick={{ fontSize: 11, fill: "#94a3b8" }}
+                  axisLine={{ stroke: "#e2e8f0" }}
+                  tickLine={false}
+                  minTickGap={50}
+                  interval="preserveStartEnd"
+                  dy={8}
+                />
+                <YAxis
+                  tick={{ fontSize: 11, fill: "#94a3b8" }}
+                  axisLine={false}
+                  tickLine={false}
+                  width={52}
+                  allowDecimals={false}
+                  tickFormatter={formatYAxisTick}
+                />
+                <Tooltip
+                  content={<AnalyticsTooltip />}
+                  cursor={{ fill: "rgba(99,102,241,0.04)" }}
+                />
+                {seriesKeys.map((key: string, index: number) => {
+                  return (
+                    <Bar
+                      key={key}
+                      dataKey={key}
+                      stackId="group"
+                      fill={CHART_COLORS[index % CHART_COLORS.length]!}
+                      radius={
+                        index === seriesKeys.length - 1
+                          ? [3, 3, 0, 0]
+                          : [0, 0, 0, 0]
+                      }
+                      isAnimationActive={false}
+                      maxBarSize={40}
+                    />
+                  );
+                })}
+              </BarChart>
+            )}
+          </ResponsiveContainer>
+        </div>
       </div>
     );
   };
@@ -570,31 +768,61 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
       1,
     );
 
+    const totalCount: number = topListData.reduce(
+      (sum: number, item: AnalyticsTopItem) => {
+        return sum + item.count;
+      },
+      0,
+    );
+
     return (
-      <div className="p-4">
-        <div className="space-y-2">
+      <div className="p-5">
+        <div className="space-y-1.5">
           {topListData.map((item: AnalyticsTopItem, index: number) => {
             const percentage: number = (item.count / maxCount) * 100;
+            const sharePercent: number =
+              totalCount > 0 ? Math.round((item.count / totalCount) * 100) : 0;
+            const color: string =
+              CHART_COLORS[index % CHART_COLORS.length] || CHART_COLORS[0]!;
+            const mutedColor: string =
+              CHART_COLORS_MUTED[index % CHART_COLORS_MUTED.length] ||
+              CHART_COLORS_MUTED[0]!;
+
             return (
-              <div key={index} className="flex items-center gap-3">
-                <div className="w-40 truncate text-xs font-medium text-gray-700">
+              <div
+                key={index}
+                className="group flex items-center gap-3 rounded-lg px-3 py-2 transition-colors hover:bg-gray-50/80"
+              >
+                <span className="w-5 text-right font-mono text-[11px] font-medium text-gray-300">
+                  {index + 1}
+                </span>
+                <div
+                  className="h-2 w-2 rounded-full flex-shrink-0"
+                  style={{ backgroundColor: color }}
+                />
+                <div className="w-44 min-w-0 truncate text-sm font-medium text-gray-700">
                   {item.value || "(empty)"}
                 </div>
                 <div className="flex-1">
-                  <div className="relative h-6 w-full overflow-hidden rounded bg-gray-100">
+                  <div className="relative h-7 w-full overflow-hidden rounded-md bg-gray-50">
                     <div
-                      className="absolute left-0 top-0 h-full rounded transition-all"
+                      className="absolute left-0 top-0 h-full rounded-md transition-all duration-300"
                       style={{
                         width: `${percentage}%`,
-                        backgroundColor:
-                          CHART_COLORS[index % CHART_COLORS.length],
+                        backgroundColor: mutedColor,
+                        borderLeft: `3px solid ${color}`,
                       }}
                     />
-                    <div className="absolute right-2 top-0 flex h-full items-center text-xs font-medium text-gray-600">
-                      {item.count.toLocaleString()}
-                    </div>
                   </div>
                 </div>
+                <div className="flex items-center gap-3 flex-shrink-0">
+                  <span className="font-mono text-sm font-semibold tabular-nums text-gray-800">
+                    {item.count.toLocaleString()}
+                  </span>
+                  <span className="w-10 text-right font-mono text-[11px] tabular-nums text-gray-400">
+                    {sharePercent}%
+                  </span>
+                </div>
               </div>
             );
           })}
@@ -612,44 +840,80 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
       tableData[0]?.groupValues || {},
     );
 
+    const maxCount: number = Math.max(
+      ...tableData.map((row: AnalyticsTableRow) => {
+        return row.count;
+      }),
+      1,
+    );
+
     return (
-      <div className="p-4">
-        <div className="overflow-hidden rounded-lg border border-gray-200">
-          <table className="min-w-full divide-y divide-gray-200">
-            <thead className="bg-gray-50">
-              <tr>
+      <div className="p-5">
+        <div className="overflow-hidden rounded-lg border border-gray-200/80">
+          <table className="min-w-full">
+            <thead>
+              <tr className="border-b border-gray-200/80 bg-gray-50/80">
+                <th className="w-10 px-4 py-2.5 text-left text-[11px] font-semibold uppercase tracking-wider text-gray-400">
+                  #
+                </th>
                 {groupKeys.map((key: string) => {
                   return (
                     <th
                       key={key}
-                      className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
+                      className="px-4 py-2.5 text-left text-[11px] font-semibold uppercase tracking-wider text-gray-400"
                     >
                       {key}
                     </th>
                   );
                 })}
-                <th className="px-4 py-2 text-right text-xs font-medium uppercase tracking-wider text-gray-500">
+                <th className="px-4 py-2.5 text-right text-[11px] font-semibold uppercase tracking-wider text-gray-400">
                   Count
                 </th>
+                <th className="w-48 px-4 py-2.5 text-[11px] font-semibold uppercase tracking-wider text-gray-400" />
               </tr>
             </thead>
-            <tbody className="divide-y divide-gray-100 bg-white">
+            <tbody>
               {tableData.map((row: AnalyticsTableRow, index: number) => {
+                const barWidth: number = (row.count / maxCount) * 100;
+                const color: string =
+                  CHART_COLORS[index % CHART_COLORS.length] || CHART_COLORS[0]!;
+                const mutedColor: string =
+                  CHART_COLORS_MUTED[index % CHART_COLORS_MUTED.length] ||
+                  CHART_COLORS_MUTED[0]!;
+
                 return (
-                  <tr key={index} className="hover:bg-gray-50">
+                  <tr
+                    key={index}
+                    className="border-b border-gray-100/80 transition-colors last:border-b-0 hover:bg-gray-50/50"
+                  >
+                    <td className="px-4 py-2.5 font-mono text-[11px] text-gray-300">
+                      {index + 1}
+                    </td>
                     {groupKeys.map((key: string) => {
                       return (
                         <td
                           key={key}
-                          className="whitespace-nowrap px-4 py-2 text-xs text-gray-700"
+                          className="whitespace-nowrap px-4 py-2.5 text-sm text-gray-700"
                         >
                           {row.groupValues[key] || "(empty)"}
                         </td>
                       );
                     })}
-                    <td className="whitespace-nowrap px-4 py-2 text-right text-xs font-medium text-gray-900">
+                    <td className="whitespace-nowrap px-4 py-2.5 text-right font-mono text-sm font-semibold tabular-nums text-gray-800">
                       {row.count.toLocaleString()}
                     </td>
+                    <td className="px-4 py-2.5">
+                      <div className="h-5 w-full overflow-hidden rounded bg-gray-50">
+                        <div
+                          className="h-full rounded transition-all duration-300"
+                          style={{
+                            width: `${barWidth}%`,
+                            backgroundColor: mutedColor,
+                            borderLeft: `2px solid ${color}`,
+                          }}
+                        />
+                      </div>
+                    </td>
                   </tr>
                 );
               })}
@@ -662,8 +926,23 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
 
   const renderEmptyState: () => ReactElement = (): ReactElement => {
     return (
-      <div className="flex h-64 items-center justify-center text-sm text-gray-400">
-        No data available for the selected query.
+      <div className="flex h-72 flex-col items-center justify-center gap-3">
+        <svg
+          className="h-10 w-10 text-gray-200"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={1.5}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
+          />
+        </svg>
+        <p className="text-sm text-gray-400">
+          No data available for the selected query
+        </p>
       </div>
     );
   };
@@ -671,7 +950,7 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
   const renderChart: () => ReactElement = (): ReactElement => {
     if (isLoading) {
       return (
-        <div className="flex h-64 items-center justify-center">
+        <div className="flex h-72 items-center justify-center">
           <ComponentLoader />
         </div>
       );
@@ -689,7 +968,7 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
   };
 
   return (
-    <div className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm">
+    <div className="overflow-hidden rounded-lg border border-gray-200/80 bg-white shadow-sm">
       {renderQueryBuilder()}
       {renderChart()}
     </div>