admin/stonks-oracle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: rich tooltips in SQL Explorer charts show all row values

Browse Source 
Hover over any bar, line point, or scatter dot to see every column
value for that data point. The Y-axis column is highlighted in
brand color, X-axis in white, and other columns in gray. Works
for all chart types (bar, line, scatter, auto).
This commit is contained in:
Celes Renata
2026-04-16 05:57:06 +00:00
parent b43ad88f5d
commit 79a85723b6
1 changed files with 30 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/SqlExplorer.tsx
+30 -4
View File
@@ -149,14 +149,40 @@ export function SqlExplorerPage() {
? result.rows.map((row) => {
const yRaw = row[effectiveYCol];
const yNum = yRaw != null ? parseFloat(String(yRaw)) : NaN;
return {
const entry: Record<string, unknown> = {
x: row[effectiveXCol],
y: isNaN(yNum) ? 0 : yNum,
label: String(row[effectiveXCol] ?? ''),
};
// Attach all column values for rich tooltips
for (let i = 0; i < result.columns.length; i++) {
entry[`_col${i}`] = row[i];
}
return entry;
})
: [];
// Custom tooltip that shows all row values on hover
const renderTooltip = (props: { active?: boolean; payload?: Array<{ payload: Record<string, unknown> }> }) => {
if (!props.active || !props.payload?.length || !result) return null;
const data = props.payload[0].payload;
return (
<div className="rounded-lg border border-surface-700 bg-surface-900 px-3 py-2 text-xs shadow-lg">
{result.columns.map((col, i) => {
const val = data[`_col${i}`];
const isY = i === effectiveYCol;
const isX = i === effectiveXCol;
return (
<div key={i} className={`flex justify-between gap-4 ${isY ? 'font-semibold text-brand-300' : isX ? 'text-gray-200' : 'text-gray-400'}`}>
<span>{col.name}:</span>
<span>{val == null ? 'NULL' : String(val)}</span>
</div>
);
})}
</div>
);
};
// Split saved queries into pre-built (no id-based delete) and user-saved
const preBuiltNames = new Set([
'Company Overview', 'Recent Recommendations', 'High Confidence Buys',
@@ -342,7 +368,7 @@ export function SqlExplorerPage() {
<CartesianGrid strokeDasharray="3 3" stroke="#334155" />
<XAxis dataKey="label" tick={{ fill: '#6b7280', fontSize: 10 }} />
<YAxis tick={{ fill: '#6b7280', fontSize: 10 }} />
<Tooltip contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: 8 }} />
<Tooltip content={renderTooltip} />
<Bar dataKey="y" fill="#3b82f6" />
</BarChart>
) : effectiveChartType === 'line' ? (
@@ -350,7 +376,7 @@ export function SqlExplorerPage() {
<CartesianGrid strokeDasharray="3 3" stroke="#334155" />
<XAxis dataKey="label" tick={{ fill: '#6b7280', fontSize: 10 }} />
<YAxis tick={{ fill: '#6b7280', fontSize: 10 }} />
<Tooltip contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: 8 }} />
<Tooltip content={renderTooltip} />
<Line type="monotone" dataKey="y" stroke="#3b82f6" dot={false} />
</LineChart>
) : (
@@ -358,7 +384,7 @@ export function SqlExplorerPage() {
<CartesianGrid strokeDasharray="3 3" stroke="#334155" />
<XAxis dataKey="x" tick={{ fill: '#6b7280', fontSize: 10 }} name={result.columns[effectiveXCol]?.name} />
<YAxis dataKey="y" tick={{ fill: '#6b7280', fontSize: 10 }} name={result.columns[effectiveYCol]?.name} />
<Tooltip contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: 8 }} />
<Tooltip content={renderTooltip} />
<Scatter data={chartData} fill="#3b82f6" />
</ScatterChart>
)}