use new graphs on the performance tab

[linear[bot]]

loading state / empty state

use full height

[linear[bot]]

HIG-4674 use new graphs on the performance tab

[greptile-apps[bot]]

To use the new graphs on the performance tab, follow these steps:

1. Update Performance Tab Component:

   • Locate the performance tab component file.
   • Import the Graph component from /frontend/src/pages/Graphing/components/Graph.tsx.

2. Fetch Data:

   • Use the useGetMetricsTimelineQuery hook from /frontend/src/pages/Player/Toolbar/DevToolsWindow/ResourcePage/components/RequestMetrics/RequestMetrics.tsx to fetch the necessary metrics data.

3. Render Graph:

   <Graph
    title="Performance Metrics"
    viewConfig={viewConfig}
    productType={productType}
    projectId={projectId}
    startDate={startDate}
    endDate={endDate}
    query={query}
    metric={metric}
    functionType={functionType}
    bucketByKey={bucketByKey}
    bucketCount={bucketCount}
    groupByKey={groupByKey}
    limit={limit}
    limitFunctionType={limitFunctionType}
    limitMetric={limitMetric}
    onShare={onShare}
    onExpand={onExpand}
    onEdit={onEdit}
   />

4. Configure Graph:

   • Define the viewConfig, productType, projectId, startDate, endDate, query, metric, functionType, bucketByKey, bucketCount, groupByKey, limit, limitFunctionType, limitMetric, onShare, onExpand, and onEdit props as needed.

5. Styling:

   • Ensure the graph is styled appropriately by using the existing styles or adding new styles in the performance tab component's CSS module.

References

/frontend/src/pages/Graphing/GraphingEditor.tsx /frontend/src/pages/Graphing/Dashboard.tsx /frontend/src/pages/Graphing/ExpandedGraph.tsx /frontend/src/pages/Graphing/components/Graph.tsx /frontend/src/pages/Player/Toolbar/DevToolsWindow/ResourcePage/components/RequestMetrics/RequestMetrics.tsx

Ask Greptile