Files
supabase/apps/studio/components/ui/QueryBlock/QueryBlock.utils.ts
T
Joshen Lim d434c63bad joshen/fe 4150 explorer query cells result display settings (#49003)
## Context

Related to Explorer / Notebooks - this adds chart functionality for the
Query cells
<img width="250" alt="image"
src="https://github.com/user-attachments/assets/4ea37c14-87dc-4c43-ba7f-cb9436085c81"
/>

Query results can be rendered as either bar or line chart - using the
chart packages from `ui-patterns`
[NOTE]: For design team reviewers - am patching the chart packages to be
agnostic to the `timestamp` property within the provided data set. Would
love to use this component from a consistency POV instead of the old
`BarChart` component we have.

Have intentionally omitted log scale functionality from this PR - will
have that separately 🙏

<img width="999" height="483" alt="image"
src="https://github.com/user-attachments/assets/14356ee4-c658-4fd1-90e0-17c38dac4822"
/>
<img width="988" height="478" alt="image"
src="https://github.com/user-attachments/assets/cd0ca088-9a03-4aa3-9884-17bc36d3cabf"
/>



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added chart views for notebook query results, including bar and line
charts.
- Added display settings for selecting X/Y columns, chart type, scale,
cumulative values, and label visibility.
  - Added configurable X-axis support for charts.
  - Display preferences are saved with each notebook cell.

- **Improvements**
  - New database cells default to table view.
  - Chart results better handle varied data types.
- Empty results and incomplete chart settings now display clear
placeholders.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-13 10:09:54 +07:00

70 lines
2.2 KiB
TypeScript

export const checkHasNonPositiveValues = (data: Record<string, unknown>[], key: string): boolean =>
data.some((row) => (row[key] as number) <= 0)
export const formatYAxisTick = (value: number): string => {
if (Math.abs(value) >= 1_000_000) {
const n = value / 1_000_000
return `${Number.isInteger(n) ? n : n.toFixed(1)}M`
}
if (Math.abs(value) >= 1_000) {
const n = value / 1_000
return `${Number.isInteger(n) ? n : n.toFixed(1)}K`
}
if (value !== 0 && Math.abs(value) < 1) {
return parseFloat(value.toFixed(2)).toString()
}
if (!Number.isInteger(value)) {
return parseFloat(value.toFixed(1)).toString()
}
return String(value)
}
export const computeYAxisWidth = (
data: Record<string, unknown>[],
key: string,
{
isLogScale = false,
isPercentage = false,
}: { isLogScale?: boolean; isPercentage?: boolean } = {}
): number => {
if (isLogScale) return 52
if (isPercentage) return Math.max(36, (3 + 1) * 8) // max tick is "100"
const maxMagnitude = data.reduce((max, d) => {
const magnitude = Math.abs(Number(d[key]) || 0)
return magnitude > max ? magnitude : max
}, 0)
return Math.max(36, (formatYAxisTick(maxMagnitude).length + 1) * 8)
}
export const formatLogTick = (value: number): string => {
if (value >= 1_000_000)
return `${(value / 1_000_000).toLocaleString(undefined, { maximumFractionDigits: 1 })}M`
if (value >= 1_000)
return `${(value / 1_000).toLocaleString(undefined, { maximumFractionDigits: 1 })}k`
return value.toLocaleString()
}
export const getCumulativeResults = (
results: { rows: readonly any[] },
config: { yKey: string }
) => {
if (!results?.rows?.length) {
return []
}
const cumulativeResults = results.rows.reduce((acc, row) => {
const prev = acc[acc.length - 1] || {}
// Coerce to Number before adding: Postgres returns `bigint`, `numeric`,
// `money` and `count(*)` columns as strings, so a bare `+` would
// concatenate (e.g. "10" + "20" -> "1020") instead of summing.
const next = {
...row,
[config.yKey]: (Number(prev[config.yKey]) || 0) + (Number(row[config.yKey]) || 0),
}
return [...acc, next]
}, [])
return cumulativeResults
}