cleanup, change sampling config

packages/web-console/src/scenes/Editor/Metrics/graph.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useRef, useState } from "react"
 import styled from "styled-components"
-import { MetricDuration, xAxisFormat } from "./utils"
+import { MetricDuration, Widget, xAxisFormat } from "./utils"
 import { useGraphOptions } from "./useGraphOptions"
 import uPlot from "uplot"
 import UplotReact from "uplot-react"
@@ -94,40 +94,38 @@ type Props = {
   lastRefresh?: number
   tableId?: number
   tableName?: string
-  isTableMetric: boolean
-  label: string
   beforeLabel?: React.ReactNode
   loading?: boolean
   data: uPlot.AlignedData
   canZoomToData?: boolean
   colors: string[]
   duration: MetricDuration
-  yValue: (rawValue: number) => string
   actions?: React.ReactNode
   onZoomToData?: () => void
+  widgetConfig: Widget
 }
 
 export const Graph = ({
   lastRefresh,
   tableId,
   tableName,
-  isTableMetric,
-  label,
   beforeLabel,
   data,
   canZoomToData,
   colors,
   duration,
-  yValue,
   loading,
   actions,
   onZoomToData,
+  widgetConfig,
 }: Props) => {
   const timeRef = useRef(null)
   const valueRef = useRef(null)
   const uPlotRef = useRef<uPlot>()
   const [dateNow, setDateNow] = useState(new Date())
 
+  const { isTableMetric, mapYValue, label } = widgetConfig
+
   const resizeObserver = new ResizeObserver((entries) => {
     uPlotRef.current?.setSize({
       width: entries[0].contentRect.width,
@@ -142,8 +140,8 @@ export const Graph = ({
     duration,
     timeRef,
     valueRef,
-    xValue: xAxisFormat[duration],
-    yValue,
+    mapXValue: xAxisFormat[duration],
+    mapYValue,
   })
 
   const graphRootRef = useRef<HTMLDivElement>(null)
@@ -160,7 +158,7 @@ export const Graph = ({
 
   useEffect(() => {
     setDateNow(new Date())
-  }, [lastRefresh])
+  }, [lastRefresh, data])
 
   return (
     <Root ref={graphRootRef}>

packages/web-console/src/scenes/Editor/Metrics/metric.tsx

@@ -218,11 +218,9 @@ export const Metric = ({
       colors={[metric.color]}
       loading={loading}
       duration={metricDuration}
-      label={widgetConfig.label}
-      yValue={widgetConfig.mapYValue}
       tableId={metric.tableId}
       tableName={tableName}
-      isTableMetric={widgetConfig.isTableMetric}
+      widgetConfig={widgetConfig}
       beforeLabel={
         <TableSelector
           tableId={metric.tableId}

packages/web-console/src/scenes/Editor/Metrics/useGraphOptions.ts

@@ -12,16 +12,16 @@ type Params = {
   colors: string[]
   duration: MetricDuration
   tickValue?: (rawValue: number) => string
-  xValue: (rawValue: number, index: number, ticks: number[]) => string | null
-  yValue: (rawValue: number) => string
+  mapXValue: (rawValue: number, index: number, ticks: number[]) => string | null
+  mapYValue: (rawValue: number) => string
   timeRef: React.RefObject<HTMLSpanElement>
   valueRef: React.RefObject<HTMLSpanElement>
 }
 
 const valuePlugin = (
   timeRef: React.RefObject<HTMLSpanElement>,
   valueRef: React.RefObject<HTMLSpanElement>,
-  yValue: (rawValue: number) => string,
+  mapYValue: (rawValue: number) => string,
 ) => ({
   hooks: {
     setCursor: (u: uPlot) => {
@@ -36,7 +36,7 @@ const valuePlugin = (
           x as number,
           "dd/MM/yyyy HH:mm:ss",
         )
-        valueRef.current!.textContent = yValue(y as number)
+        valueRef.current!.textContent = mapYValue(y as number)
       } else {
         timeRef.current!.textContent = null
         valueRef.current!.textContent = null
@@ -51,8 +51,8 @@ export const useGraphOptions = ({
   colors,
   duration,
   tickValue = (rawValue) => (+rawValue).toString(),
-  xValue,
-  yValue = (rawValue) => (+rawValue).toFixed(4),
+  mapXValue,
+  mapYValue = (rawValue) => (+rawValue).toFixed(4),
   timeRef,
   valueRef,
 }: Params): Omit<uPlot.Options, "width" | "height"> => {
@@ -84,7 +84,7 @@ export const useGraphOptions = ({
       values: (_self, ticks) => {
         let found: string[] = []
         return ticks.map((rawValue, index) => {
-          const mapped = xValue(rawValue, index, ticks)
+          const mapped = mapXValue(rawValue, index, ticks)
           if (mapped === null) {
             return null
           }
@@ -99,7 +99,7 @@ export const useGraphOptions = ({
     },
     {
       ...baseAxisConfig,
-      values: (_self, ticks) => ticks.map((rawValue) => yValue(rawValue)),
+      values: (_self, ticks) => ticks.map((rawValue) => mapYValue(rawValue)),
     },
   ]
 
@@ -112,7 +112,7 @@ export const useGraphOptions = ({
       },
       stroke: colors[0],
       width: 2,
-      value: (_self, rawValue) => yValue(rawValue),
+      value: (_self, rawValue) => mapYValue(rawValue),
     },
   }
 
@@ -150,6 +150,6 @@ export const useGraphOptions = ({
       },
     },
 
-    plugins: [valuePlugin(timeRef, valueRef, yValue)],
+    plugins: [valuePlugin(timeRef, valueRef, mapYValue)],
   }
 }

packages/web-console/src/scenes/Editor/Metrics/utils.ts

@@ -41,6 +41,7 @@ export enum MetricDuration {
 export enum SampleBy {
   ONE_SECOND = "1s",
   ONE_MINUTE = "1m",
+  FIVE_MINUTES = "5m",
   FIFTEEN_MINUTES = "15m",
   ONE_HOUR = "1h",
 }
@@ -96,12 +97,12 @@ export const defaultSampleByForDuration: Record<MetricDuration, SampleBy> = {
   [MetricDuration.FIVE_MINUTES]: SampleBy.ONE_SECOND,
   [MetricDuration.FIFTEEN_MINUTES]: SampleBy.ONE_SECOND,
   [MetricDuration.ONE_HOUR]: SampleBy.ONE_SECOND,
-  [MetricDuration.THREE_HOURS]: SampleBy.ONE_SECOND,
-  [MetricDuration.SIX_HOURS]: SampleBy.ONE_SECOND,
-  [MetricDuration.TWELVE_HOURS]: SampleBy.ONE_SECOND,
-  [MetricDuration.TWENTY_FOUR_HOURS]: SampleBy.ONE_MINUTE,
-  [MetricDuration.THREE_DAYS]: SampleBy.ONE_MINUTE,
-  [MetricDuration.SEVEN_DAYS]: SampleBy.ONE_MINUTE,
+  [MetricDuration.THREE_HOURS]: SampleBy.ONE_MINUTE,
+  [MetricDuration.SIX_HOURS]: SampleBy.ONE_MINUTE,
+  [MetricDuration.TWELVE_HOURS]: SampleBy.ONE_MINUTE,
+  [MetricDuration.TWENTY_FOUR_HOURS]: SampleBy.FIVE_MINUTES,
+  [MetricDuration.THREE_DAYS]: SampleBy.FIFTEEN_MINUTES,
+  [MetricDuration.SEVEN_DAYS]: SampleBy.FIFTEEN_MINUTES,
 }
 
 export type CommitRate = {