feat: Allow metrics and ratios in NumberChart (#314)

![Screenshot 2024-02-19 at 11 37 52 PM](https://github.com/hyperdxio/hyperdx/assets/149748269/74a28fd3-8a25-46c6-af88-85762cc51b5e)

![Screenshot 2024-02-19 at 11 37 57 PM](https://github.com/hyperdxio/hyperdx/assets/149748269/ff57756a-ed73-4f9c-bac3-20c265751447)

![Screenshot 2024-02-19 at 11 33 42 PM](https://github.com/hyperdxio/hyperdx/assets/149748269/beebcaf4-f6b1-423c-9c3b-580ddeb1bfe0)

![Screenshot 2024-02-19 at 11 35 08 PM](https://github.com/hyperdxio/hyperdx/assets/149748269/631159ec-d2ec-45cd-97db-0d2243675c93)

- [x] make sure backwards compatible
- [x] make sure previously created number charts can be edited
- [x] make sure it works on chart explorer page

packages/api/src/clickhouse/index.ts

@@ -1715,7 +1715,7 @@ export const getMultiSeriesChart = async ({
 
     queries = await Promise.all(
       series.map(s => {
-        if (s.type != 'time' && s.type != 'table') {
+        if (s.type != 'time' && s.type != 'table' && s.type != 'number') {
           throw new Error(`Unsupported series type: ${s.type}`);
         }
         if (s.table != 'logs' && s.table != null) {
@@ -1727,7 +1727,7 @@ export const getMultiSeriesChart = async ({
           endTime,
           field: s.field,
           granularity,
-          groupBy: s.groupBy,
+          groupBy: s.type === 'number' ? [] : s.groupBy,
           propertyTypeMappingsModel,
           q: s.where,
           sortOrder: s.type === 'table' ? s.sortOrder : undefined,
@@ -1746,7 +1746,7 @@ export const getMultiSeriesChart = async ({
 
     queries = await Promise.all(
       series.map(s => {
-        if (s.type != 'time' && s.type != 'table') {
+        if (s.type != 'time' && s.type != 'table' && s.type != 'number') {
           throw new Error(`Unsupported series type: ${s.type}`);
         }
         if (s.table != 'metrics') {
@@ -1764,13 +1764,13 @@ export const getMultiSeriesChart = async ({
           endTime,
           name: s.field,
           granularity,
-          groupBy: s.groupBy,
           sortOrder: s.type === 'table' ? s.sortOrder : undefined,
           q: s.where,
           startTime,
           teamId,
           dataType: s.metricDataType,
           propertyTypeMappingsModel,
+          groupBy: s.type === 'number' ? [] : s.groupBy,
         });
       }),
     );

packages/app/src/ChartUtils.tsx

@@ -77,6 +77,23 @@ export enum Granularity {
   ThirtyDay = '30 day',
 }
 
+export const GRANULARITY_SECONDS_MAP: Record<Granularity, number> = {
+  [Granularity.ThirtySecond]: 30,
+  [Granularity.OneMinute]: 60,
+  [Granularity.FiveMinute]: 5 * 60,
+  [Granularity.TenMinute]: 10 * 60,
+  [Granularity.FifteenMinute]: 15 * 60,
+  [Granularity.ThirtyMinute]: 30 * 60,
+  [Granularity.OneHour]: 60 * 60,
+  [Granularity.TwoHour]: 2 * 60 * 60,
+  [Granularity.SixHour]: 6 * 60 * 60,
+  [Granularity.TwelveHour]: 12 * 60 * 60,
+  [Granularity.OneDay]: 24 * 60 * 60,
+  [Granularity.TwoDay]: 2 * 24 * 60 * 60,
+  [Granularity.SevenDay]: 7 * 24 * 60 * 60,
+  [Granularity.ThirtyDay]: 30 * 24 * 60 * 60,
+};
+
 export const isGranularity = (value: string): value is Granularity => {
   return Object.values(Granularity).includes(value as Granularity);
 };

packages/app/src/DashboardPage.tsx

@@ -189,12 +189,18 @@ const Tile = forwardRef(
         : type === 'number'
         ? {
             type,
-            table: chart.series[0].table ?? 'logs',
-            aggFn: chart.series[0].aggFn,
             field: chart.series[0].field ?? '', // TODO: Fix in definition
-            where: buildAndWhereClause(query, chart.series[0].where),
-            dateRange,
             numberFormat: chart.series[0].numberFormat,
+            series: chart.series.map(s => ({
+              ...s,
+              where: buildAndWhereClause(
+                query,
+                s.type === 'number' ? s.where : '',
+              ),
+            })),
+            dateRange,
+            granularity:
+              granularity ?? convertDateRangeToGranularityString(dateRange, 60),
           }
         : {
             type,