add table metric visualization

frontend/src/__generated/ve/pages/Graphing/components/Table.css.js

@@ -0,0 +1,9 @@
+// src/pages/Graphing/components/Table.css.ts
+var fullHeight = "_1s4anja1";
+var scrollableBody = "_1s4anja2";
+var tableWrapper = "_1s4anja0";
+export {
+  fullHeight,
+  scrollableBody,
+  tableWrapper
+};

frontend/src/pages/Graphing/GraphingEditor.tsx

@@ -22,17 +22,21 @@ import { MetricAggregator, ProductType } from '@/graph/generated/schemas'
 import { useProjectId } from '@/hooks/useProjectId'
 import { BAR_DISPLAY, BarDisplay } from '@/pages/Graphing/components/BarChart'
 import Graph, {
-	NAME_KEY,
+	GROUP_KEY,
 	View,
 	ViewConfig,
 	VIEWS,
 } from '@/pages/Graphing/components/Graph'
 import {
 	LINE_DISPLAY,
+	LINE_NULL_HANDLING,
 	LineDisplay,
-	NULL_HANDLING,
-	NullHandling,
+	LineNullHandling,
 } from '@/pages/Graphing/components/LineChart'
+import {
+	TABLE_NULL_HANDLING,
+	TableNullHandling,
+} from '@/pages/Graphing/components/Table'
 
 import * as style from './GraphingEditor.css'
 
@@ -107,7 +111,7 @@ const OptionDropdown = <T extends string>({
 	selection,
 	setSelection,
 }: {
-	options: string[]
+	options: T[]
 	selection: string
 	setSelection: (option: T) => void
 }) => {
@@ -179,8 +183,8 @@ const LineChartSettings = ({
 	lineDisplay,
 	setLineDisplay,
 }: {
-	nullHandling: NullHandling
-	setNullHandling: (option: NullHandling) => void
+	nullHandling: LineNullHandling
+	setNullHandling: (option: LineNullHandling) => void
 	lineDisplay: LineDisplay
 	setLineDisplay: (option: LineDisplay) => void
 }) => (
@@ -192,9 +196,9 @@ const LineChartSettings = ({
 				setSelection={setLineDisplay}
 			/>
 		</LabeledRow>
-		<LabeledRow label="Nulls" name="nullHandling">
+		<LabeledRow label="Nulls" name="lineNullHandling">
 			<OptionDropdown
-				options={NULL_HANDLING}
+				options={LINE_NULL_HANDLING}
 				selection={nullHandling}
 				setSelection={setNullHandling}
 			/>
@@ -220,6 +224,24 @@ const BarChartSettings = ({
 	</>
 )
 
+const TableSettings = ({
+	nullHandling,
+	setNullHandling,
+}: {
+	nullHandling: TableNullHandling
+	setNullHandling: (option: TableNullHandling) => void
+}) => (
+	<>
+		<LabeledRow label="Nulls" name="tableNullHandling">
+			<OptionDropdown
+				options={TABLE_NULL_HANDLING}
+				selection={nullHandling}
+				setSelection={setNullHandling}
+			/>
+		</LabeledRow>
+	</>
+)
+
 export const GraphingEditor = () => {
 	const { projectId } = useProjectId()
 	const [endDate] = useState(moment().toISOString())
@@ -228,7 +250,12 @@ export const GraphingEditor = () => {
 	const [productType, setProductType] = useState(PRODUCTS[0])
 	const [viewType, setViewType] = useState(VIEWS[0])
 	const [functionType, setFunctionType] = useState(FUNCTION_TYPES[0])
-	const [nullHandling, setNullHandling] = useState(NULL_HANDLING[0])
+	const [lineNullHandling, setLineNullHandling] = useState(
+		LINE_NULL_HANDLING[0],
+	)
+	const [tableNullHandling, setTableNullHandling] = useState(
+		TABLE_NULL_HANDLING[0],
+	)
 	const [lineDisplay, setLineDisplay] = useState(LINE_DISPLAY[0])
 	const [barDisplay, setBarDisplay] = useState(BAR_DISPLAY[0])
 
@@ -339,19 +366,11 @@ export const GraphingEditor = () => {
 					(b.bucket_min + b.bucket_max) / 2
 				data[b.bucket_id][seriesKey] = b.metric_value
 			}
-
-			if (nullHandling === 'Zero') {
-				for (let i = 0; i < metricsToUse.metrics.bucket_count; i++) {
-					for (const key of seriesKeys) {
-						data[i][key] = data[i][key] ?? 0
-					}
-				}
-			}
 		} else {
 			data = []
 			for (const b of metricsToUse.metrics.buckets) {
 				data.push({
-					[NAME_KEY]: b.group.join(' '),
+					[GROUP_KEY]: b.group.join(' '),
 					'': b.metric_value,
 				})
 			}
@@ -362,17 +381,26 @@ export const GraphingEditor = () => {
 	if (viewType === 'Line chart') {
 		viewConfig = {
 			type: viewType,
+			showLegend: true,
 			display: lineDisplay,
-			nullHandling: nullHandling,
+			nullHandling: lineNullHandling,
 		}
 	} else if (viewType === 'Bar chart') {
 		viewConfig = {
 			type: viewType,
+			showLegend: true,
 			display: barDisplay,
 		}
+	} else if (viewType === 'Table') {
+		viewConfig = {
+			type: viewType,
+			showLegend: false,
+			nullHandling: tableNullHandling,
+		}
 	} else {
 		viewConfig = {
 			type: 'Line chart',
+			showLegend: true,
 		}
 	}
 
@@ -452,9 +480,14 @@ export const GraphingEditor = () => {
 								loading={metricsLoading}
 								title={metricViewTitle}
 								xAxisMetric={
-									bucketByEnabled ? bucketByKey : NAME_KEY
+									bucketByEnabled ? bucketByKey : GROUP_KEY
 								}
-								yAxisMetric={metric}
+								yAxisMetric={
+									functionType === MetricAggregator.Count
+										? ''
+										: metric
+								}
+								yAxisFunction={functionType}
 								viewConfig={viewConfig}
 							/>
 						</Box>
@@ -508,8 +541,10 @@ export const GraphingEditor = () => {
 									</LabeledRow>
 									{viewType === 'Line chart' && (
 										<LineChartSettings
-											nullHandling={nullHandling}
-											setNullHandling={setNullHandling}
+											nullHandling={lineNullHandling}
+											setNullHandling={
+												setLineNullHandling
+											}
 											lineDisplay={lineDisplay}
 											setLineDisplay={setLineDisplay}
 										/>
@@ -520,6 +555,14 @@ export const GraphingEditor = () => {
 											setBarDisplay={setBarDisplay}
 										/>
 									)}
+									{viewType === 'Table' && (
+										<TableSettings
+											nullHandling={tableNullHandling}
+											setNullHandling={
+												setTableNullHandling
+											}
+										/>
+									)}
 								</SidebarSection>
 								<Divider className="m-0" />
 								<SidebarSection>

frontend/src/pages/Graphing/components/BarChart.tsx

@@ -12,6 +12,7 @@ import {
 	CustomXAxisTick,
 	CustomYAxisTick,
 	getFormatter,
+	GROUP_KEY,
 	isActive,
 	SeriesInfo,
 	strokeColors,
@@ -22,6 +23,7 @@ export const BAR_DISPLAY: BarDisplay[] = ['Grouped', 'Stacked']
 
 export type BarChartConfig = {
 	type: 'Bar chart'
+	showLegend: true
 	display?: BarDisplay
 }
 
@@ -71,7 +73,7 @@ export const BarChart = ({
 					tickLine={{ visibility: 'hidden' }}
 					axisLine={{ visibility: 'hidden' }}
 					height={12}
-					type={xAxisMetric === 'name' ? 'category' : 'number'}
+					type={xAxisMetric === GROUP_KEY ? 'category' : 'number'}
 					domain={['auto', 'auto']}
 				/>
 

frontend/src/pages/Graphing/components/Graph.tsx

@@ -8,6 +8,7 @@ import {
 	LineChart,
 	LineChartConfig,
 } from '@/pages/Graphing/components/LineChart'
+import { MetricTable, TableConfig } from '@/pages/Graphing/components/Table'
 import { HistogramLoading } from '@/pages/Traces/TracesPage'
 
 import * as style from './Graph.css'
@@ -21,19 +22,17 @@ export const VIEWS: View[] = [
 	'List',
 ]
 
-export const NAME_KEY = 'name'
+export const GROUP_KEY = 'Group'
 const MAX_LABEL_CHARS = 100
 
 export type PieChartConfig = {
 	type: 'Pie chart'
-}
-
-export type TableConfig = {
-	type: 'Table'
+	showLegend: true
 }
 
 export type ListConfig = {
 	type: 'List'
+	showLegend: false
 }
 
 export type ViewConfig =
@@ -47,14 +46,15 @@ export interface ChartProps<TConfig> {
 	data: any[] | undefined
 	xAxisMetric: string
 	yAxisMetric: string
+	yAxisFunction: string
 	title?: string
 	loading?: boolean
 	viewConfig: TConfig
 }
 
 export interface SeriesInfo {
 	series: string[]
-	spotlight: number | undefined
+	spotlight?: number | undefined
 }
 
 export const strokeColors = ['#0090FF', '#D6409F']
@@ -70,14 +70,17 @@ const durationUnitMap: [number, string][] = [
 ]
 
 const formatNumber = (n: number) => {
+	if (n < 10000) {
+		return parseFloat(n.toPrecision(4)).toString()
+	}
 	const k = 1000
 	const sizes = ['', 'K', 'M', 'B', 'T']
 	const i = Math.max(
 		Math.min(Math.floor(Math.log(n) / Math.log(k)), sizes.length),
 		0,
 	)
 	const res = n / Math.pow(k, i)
-	return parseFloat(res.toPrecision(2)) + sizes[i]
+	return parseFloat(res.toPrecision(3)) + sizes[i]
 }
 
 export const getFormatter = (metric: string, bucketCount?: number) => {
@@ -95,7 +98,7 @@ export const getFormatter = (metric: string, bucketCount?: number) => {
 			}
 			return `${value.toFixed(0)}${lastUnit}`
 		}
-	} else if (metric === NAME_KEY) {
+	} else if (metric === GROUP_KEY) {
 		const maxChars = Math.max(MAX_LABEL_CHARS / (bucketCount || 1), 10)
 		return (value: any) => {
 			let result = value.toString() as string
@@ -166,6 +169,7 @@ const Graph = ({
 	data,
 	xAxisMetric,
 	yAxisMetric,
+	yAxisFunction,
 	title,
 	loading,
 	viewConfig,
@@ -193,6 +197,7 @@ const Graph = ({
 					data={data}
 					xAxisMetric={xAxisMetric}
 					yAxisMetric={yAxisMetric}
+					yAxisFunction={yAxisFunction}
 					viewConfig={viewConfig}
 					series={series}
 					spotlight={spotlight}
@@ -205,16 +210,28 @@ const Graph = ({
 					data={data}
 					xAxisMetric={xAxisMetric}
 					yAxisMetric={yAxisMetric}
+					yAxisFunction={yAxisFunction}
 					viewConfig={viewConfig}
 					series={series}
 					spotlight={spotlight}
 				/>
 			)
 			break
+		case 'Table':
+			innerChart = (
+				<MetricTable
+					data={data}
+					xAxisMetric={xAxisMetric}
+					yAxisMetric={yAxisMetric}
+					yAxisFunction={yAxisFunction}
+					viewConfig={viewConfig}
+					series={series}
+				/>
+			)
+			break
 	}
 
-	const showLegend = series.join('') !== ''
-
+	const showLegend = viewConfig.showLegend && series.join('') !== ''
 	return (
 		<Box cssClass={style.graphWrapper} shadow="small">
 			<Box
@@ -250,7 +267,7 @@ const Graph = ({
 						<Box>
 							<Text
 								size="small"
-								weight="medium"
+								color="default"
 								cssClass={style.titleText}
 							>
 								{title || 'Untitled metric view'}