Customize chart display names (#183)

hyperdxio · Jan 5, 2024 · a7647ea · a7647ea
1 parent b04ee14
commit a7647ea
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 25 deletions.
diff --git a/packages/app/src/ChartUtils.tsx b/packages/app/src/ChartUtils.tsx
@@ -77,6 +77,10 @@ const seriesDisplayName = (
   } = {},
 ) => {
   if (s.type === 'time' || s.type === 'table') {
+    if (s.displayName != null) {
+      return s.displayName;
+    }
+
     const displayField =
       s.aggFn !== 'count'
         ? s.table === 'metrics'
@@ -113,13 +117,16 @@ export function seriesColumns({
       ? [
           {
             dataKey: `series_0.data`,
-            displayName: `${seriesDisplayName(series[0], {
-              showField,
-              showWhere,
-            })}/${seriesDisplayName(series[1], {
-              showField,
-              showWhere,
-            })}`,
+            displayName:
+              'displayName' in series[0] && series[0].displayName != null
+                ? series[0].displayName
+                : `${seriesDisplayName(series[0], {
+                    showField,
+                    showWhere,
+                  })}/${seriesDisplayName(series[1], {
+                    showField,
+                    showWhere,
+                  })}`,
             sortOrder:
               'sortOrder' in series[0] ? series[0].sortOrder : undefined,
           },

diff --git a/packages/app/src/HDXMultiSeriesTableChart.tsx b/packages/app/src/HDXMultiSeriesTableChart.tsx
@@ -1,8 +1,6 @@
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { memo, useCallback, useRef } from 'react';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
-import cx from 'classnames';
-import { Anchor, Flex, Text } from '@mantine/core';
+import { Flex, Text } from '@mantine/core';
 import {
   flexRender,
   getCoreRowModel,
@@ -22,7 +20,6 @@ import {
 } from './ChartUtils';
 import { UNDEFINED_WIDTH } from './tableUtils';
 import type { ChartSeries, NumberFormat } from './types';
-import { AggFn } from './types';
 import { formatNumber } from './utils';
 
 const Table = ({
@@ -135,8 +132,6 @@ const Table = ({
     <div
       className="overflow-auto h-100 fs-8 bg-inherit"
       ref={tableContainerRef}
-      // Fixes flickering scroll bar: https://github.com/TanStack/virtual/issues/426#issuecomment-1403438040
-      // style={{ overflowAnchor: 'none' }}
     >
       <table className="w-100 bg-inherit" style={{ tableLayout: 'fixed' }}>
         <thead
@@ -203,13 +198,6 @@ const Table = ({
                                   ? 'isResizing'
                                   : ''
                               }`}
-                              // style={{
-                              //   position: 'absolute',
-                              //   right: 4,
-                              //   top: 0,
-                              //   bottom: 0,
-                              //   width: 12,
-                              // }}
                             >
                               <i className="bi bi-three-dots-vertical" />
                             </div>
@@ -287,10 +275,9 @@ const HDXMultiSeriesTableChart = memo(
     config: {
       series,
       seriesReturnType = 'column',
-      // numberFormat,
       dateRange,
-      sortOrder,
       numberFormat,
+      groupColumnName,
     },
     onSettled,
     onSortClick,
@@ -302,6 +289,7 @@ const HDXMultiSeriesTableChart = memo(
       seriesReturnType: 'ratio' | 'column';
       sortOrder: 'asc' | 'desc';
       numberFormat?: NumberFormat;
+      groupColumnName?: string;
     };
     onSettled?: () => void;
     onSortClick?: (seriesIndex: number) => void;
@@ -346,9 +334,10 @@ const HDXMultiSeriesTableChart = memo(
         <Table
           data={data?.data ?? []}
           groupColumnName={
-            series[0].type === 'table'
+            groupColumnName ??
+            (series[0].type === 'table'
               ? series[0].groupBy.join(' ') || 'Group'
-              : 'Group'
+              : 'Group')
           }
           columns={seriesMeta}
           numberFormat={numberFormat}

diff --git a/packages/app/src/types.ts b/packages/app/src/types.ts
@@ -183,6 +183,7 @@ export type AggFn =
 export type SourceTable = 'logs' | 'rrweb' | 'metrics';
 
 export type TimeChartSeries = {
+  displayName?: string;
   table: SourceTable;
   type: 'time';
   aggFn: AggFn; // TODO: Type
@@ -193,6 +194,7 @@ export type TimeChartSeries = {
 };
 
 export type TableChartSeries = {
+  displayName?: string;
   type: 'table';
   table: SourceTable;
   aggFn: AggFn;