Add isPartial to GraphDatum

Author: apata

assets/js/dashboard/stats-query.ts

@@ -15,6 +15,7 @@ type QueryInclude = {
   imports: boolean
   imports_meta: boolean
   time_labels: boolean
+  partial_time_labels: boolean
   compare: IncludeCompare
   compare_match_day_of_week: boolean
   present_index?: boolean
@@ -49,6 +50,7 @@ export function createStatsQuery(
       imports: dashboardState.with_imported,
       imports_meta: reportParams.include?.imports_meta || false,
       time_labels: reportParams.include?.time_labels || false,
+      partial_time_labels: reportParams.include?.partial_time_labels || false,
       compare: createIncludeCompare(dashboardState),
       compare_match_day_of_week: dashboardState.match_day_of_week
     }

assets/js/dashboard/stats/graph/main-graph.tsx

@@ -41,6 +41,7 @@ type MainGraphResponse = {
     (ResultItem & { change: [number | null] | null }) | null
   >
   meta: {
+    partial_time_labels: string[] | null
     time_labels: string[]
     time_label_result_indices: (number | null)[]
     comparison_time_labels?: string[]
@@ -56,6 +57,7 @@ type MainGraphResponse = {
 }
 type GraphDatum = {
   value: number | null
+  isPartial: boolean | null
   timeLabel: string | null
   comparisonValue?: number | null
   comparisonTimeLabel?: string | null
@@ -149,7 +151,9 @@ export const MainGraph = ({
                 ? getXLabel(datum.timeLabel, {
                     shouldShowYear: hasMultipleYears,
                     period,
-                    interval
+                    interval,
+                    bucketIndex: bucketIndex.valueOf(),
+                    totalBuckets: remappedData.length
                   })
                 : ''
               : ''
@@ -354,6 +358,8 @@ export const MainGraph = ({
           x={tooltip.x}
           y={tooltip.y}
           datum={remappedData[selectedIndex]}
+          bucketIndex={selectedIndex}
+          totalBuckets={remappedData.length}
         />
       )}
     </div>
@@ -369,7 +375,9 @@ const GraphTooltip = ({
   x,
   y,
   datum,
-  showZoomToPeriod
+  showZoomToPeriod,
+  bucketIndex,
+  totalBuckets
 }: {
   metric: FormattableMetric
   interval: string
@@ -379,6 +387,8 @@ const GraphTooltip = ({
   y: number
   datum: GraphDatum
   showZoomToPeriod?: boolean
+  bucketIndex: number
+  totalBuckets: number
   width: number
 }) => {
   const formatter = MetricFormatterShort[metric]
@@ -420,10 +430,13 @@ const GraphTooltip = ({
               <span className="flex items-center mr-4">
                 <div className="size-2 mr-2 rounded-full bg-indigo-400"></div>
                 <span>
-                  {getXLabel(datum.timeLabel, {
+                  {getFullBucketLabel(datum.timeLabel, {
                     period,
                     interval,
-                    shouldShowYear
+                    shouldShowYear,
+                    bucketIndex,
+                    totalBuckets,
+                    isPartial: datum.isPartial!
                   })}
                 </span>
               </span>
@@ -436,10 +449,13 @@ const GraphTooltip = ({
               <span className="flex items-center mr-4">
                 <div className="size-2 mr-2 rounded-full bg-gray-500"></div>
                 <span>
-                  {getXLabel(datum.comparisonTimeLabel, {
+                  {getFullBucketLabel(datum.comparisonTimeLabel, {
                     period,
                     interval,
-                    shouldShowYear
+                    shouldShowYear,
+                    bucketIndex,
+                    totalBuckets,
+                    isPartial: false
                   })}
                 </span>
               </span>
@@ -480,12 +496,16 @@ const getXLabel = (
   {
     shouldShowYear,
     period,
-    interval
+    interval,
+    bucketIndex,
+    totalBuckets
   }: {
     shouldShowYear: boolean
     /* "month" | "week" | "day" | "hour" | "minute" */
     interval: string
     period: DashboardPeriod
+    bucketIndex: number
+    totalBuckets: number
   }
 ) => {
   const parsedDate = parseNaiveDate(xValue)
@@ -507,7 +527,76 @@ const getXLabel = (
       return `${formatDayShort(parsedDate, shouldShowYear)}, ${time}`
     }
     case 'minute':
-      if (period === 'realtime') return `${xValue}m`
+      if (period === DashboardPeriod.realtime) {
+        const minutesAgo = totalBuckets - bucketIndex
+        return `-${minutesAgo}m`
+      }
+      return formatTime(parsedDate, {
+        use12HourClock: is12HourClock(),
+        includeMinutes: true
+      })
+    default:
+      return ''
+  }
+}
+
+const getFullBucketLabel = (
+  // in the format "YYYY-MM-DD" or "YYYY-MM-DD HH:MM:SS"
+  xValue: string,
+  {
+    shouldShowYear,
+    period,
+    interval,
+    bucketIndex,
+    totalBuckets,
+    isPartial
+  }: {
+    isPartial: boolean
+    shouldShowYear: boolean
+    /* "month" | "week" | "day" | "hour" | "minute" */
+    interval: string
+    period: DashboardPeriod
+    bucketIndex: number
+    totalBuckets: number
+  }
+) => {
+  const parsedDate = parseNaiveDate(xValue)
+  switch (interval) {
+    case 'month': {
+      const month = getXLabel(xValue, {
+        shouldShowYear,
+        interval,
+        period,
+        bucketIndex,
+        totalBuckets
+      })
+      return isPartial ? `Partial of ${month}` : month
+    }
+    case 'week': {
+      const date = getXLabel(xValue, {
+        shouldShowYear,
+        interval,
+        period,
+        bucketIndex,
+        totalBuckets
+      })
+      return isPartial ? `Partial week of ${date}` : `Week of ${date}`
+    }
+    case 'day':
+      return parsedDate.format('ddd, D MMM')
+    case 'hour':
+      return getXLabel(xValue, {
+        shouldShowYear,
+        interval,
+        period,
+        bucketIndex,
+        totalBuckets
+      })
+    case 'minute':
+      if (period === DashboardPeriod.realtime) {
+        const minutesAgo = totalBuckets - bucketIndex
+        return minutesAgo === 1 ? `1 minute ago` : `${minutesAgo} minutes ago`
+      }
       return formatTime(parsedDate, {
         use12HourClock: is12HourClock(),
         includeMinutes: true
@@ -558,8 +647,14 @@ const remapToGraphData = (
       const mainResultDefined = typeof timeLabel === 'string'
       const comparisonResultDefined = typeof comparisonTimeLabel === 'string'
 
+      let isPartial: boolean | null = null
       let value: number | null = null
       if (mainResultDefined) {
+        isPartial = (data.meta.partial_time_labels ?? []).find(
+          (l) => l === timeLabel
+        )
+          ? true
+          : false
         if (firstTimeLabel === null) {
           firstTimeLabel = timeLabel
         }
@@ -608,7 +703,14 @@ const remapToGraphData = (
         yMax = comparisonValue
       }
 
-      return { value, comparisonValue, timeLabel, comparisonTimeLabel, change }
+      return {
+        value,
+        comparisonValue,
+        timeLabel,
+        comparisonTimeLabel,
+        change,
+        isPartial
+      }
     })
 
   const hasMultipleYears =