Add daily stats to console (#12329)

web-console/src/components/segment-timeline/bar-group.tsx

@@ -56,6 +56,7 @@ export class BarGroup extends React.Component<BarGroupProps> {
         datasource: entry.datasource,
         xValue: entry.x,
         yValue: entry.y,
+        dailySize: entry.dailySize,
       };
       return (
         <BarUnit

web-console/src/components/segment-timeline/segment-timeline.tsx

@@ -193,6 +193,7 @@ ORDER BY "start" DESC`;
             y0,
             datasource,
             color: SegmentTimeline.getColor(i),
+            dailySize: d.total,
           };
           y0 += d[datasource] === undefined ? 0 : d[datasource];
           return barUnitData;

web-console/src/components/segment-timeline/stacked-bar-chart.tsx

@@ -31,6 +31,7 @@ export interface BarUnitData {
   width: number;
   datasource: string;
   color: string;
+  dailySize?: number;
 }
 
 export interface BarChartMargin {
@@ -48,6 +49,7 @@ export interface HoveredBarInfo {
   datasource?: string;
   xValue?: number;
   yValue?: number;
+  dailySize?: number;
 }
 
 interface StackedBarChartProps {
@@ -151,6 +153,11 @@ export const StackedBarChart = React.memo(function StackedBarChart(props: Stacke
           <div className="bar-chart-tooltip">
             <div>Datasource: {hoverOn.datasource}</div>
             <div>Time: {hoverOn.xValue}</div>
+            <div>
+              {`${
+                activeDataType === 'countData' ? 'Daily total count:' : 'Daily total size:'
+              } ${formatTick(hoverOn.dailySize!)}`}
+            </div>
             <div>
               {`${activeDataType === 'countData' ? 'Count:' : 'Size:'} ${formatTick(
                 hoverOn.yValue!,