sqlite-hub 0.9.1 → 0.9.3

package/changelog.md

@@ -1,3 +1,10 @@
+# v0.9.3
+
+- improving rerendering
+- fixed the sorting bug in charts
+- data row size is stored in localstorage
+- saved charts
+
 # v0.9.1
 
 - Improvements in tagging queue

package/frontend/index.html

@@ -22,7 +22,7 @@
           extend: {
             colors: {
               "on-secondary-fixed": "#1c1b1b",
-              background: "#131313",
+              background: "rgb(var(--rgb-background) / <alpha-value>)",
               "inverse-primary": "#6a5f00",
               "primary-fixed": "#fde403",
               tertiary: "#fbfffe",
@@ -34,39 +34,39 @@
               "on-tertiary-fixed-variant": "#004f51",
               "secondary-fixed-dim": "#c8c6c5",
               "tertiary-fixed-dim": "#00dce1",
-              "on-background": "#e5e2e1",
+              "on-background": "rgb(var(--rgb-on-surface) / <alpha-value>)",
               "surface-tint": "#dec800",
               "primary-fixed-dim": "#dec800",
-              "on-surface": "#e5e2e1",
-              "surface-container-low": "#1c1b1b",
+              "on-surface": "rgb(var(--rgb-on-surface) / <alpha-value>)",
+              "surface-container-low": "rgb(var(--rgb-surface-low) / <alpha-value>)",
               "on-tertiary": "#003738",
-              "surface-container": "#201f1f",
-              "on-surface-variant": "#cdc7ab",
+              "surface-container": "rgb(var(--rgb-surface-container) / <alpha-value>)",
+              "on-surface-variant": "rgb(var(--rgb-on-surface-variant) / <alpha-value>)",
               "on-primary-container": "#706400",
               "on-error": "#690005",
-              "surface-container-high": "#2a2a2a",
-              "surface-container-highest": "#353534",
-              error: "#ffb4ab",
+              "surface-container-high": "rgb(var(--rgb-surface-high) / <alpha-value>)",
+              "surface-container-highest": "rgb(var(--rgb-surface-highest) / <alpha-value>)",
+              error: "rgb(var(--rgb-error) / <alpha-value>)",
               primary: "#fffeff",
-              "outline-variant": "#4b4732",
+              "outline-variant": "rgb(var(--rgb-outline) / <alpha-value>)",
               "on-error-container": "#ffdad6",
               "on-secondary-fixed-variant": "#474746",
-              "surface-container-lowest": "#0e0e0e",
+              "surface-container-lowest": "rgb(var(--rgb-surface-lowest) / <alpha-value>)",
               "inverse-surface": "#e5e2e1",
-              surface: "#131313",
+              surface: "rgb(var(--rgb-surface) / <alpha-value>)",
               "tertiary-container": "#04faff",
               "on-tertiary-fixed": "#002021",
               "tertiary-fixed": "#2dfaff",
               "surface-variant": "#353534",
               "on-primary": "#373100",
-              "primary-container": "#fce300",
+              "primary-container": "rgb(var(--rgb-primary) / <alpha-value>)",
               "inverse-on-surface": "#313030",
               secondary: "#c8c6c5",
               "on-secondary-container": "#b7b5b4",
               "on-primary-fixed": "#201c00",
               "secondary-container": "#474746",
-              "surface-dim": "#131313",
-              "surface-bright": "#3a3939",
+              "surface-dim": "rgb(var(--rgb-surface) / <alpha-value>)",
+              "surface-bright": "rgb(var(--rgb-surface-bright) / <alpha-value>)",
               "secondary-fixed": "#e5e2e1",
             },
             fontFamily: {
@@ -89,14 +89,14 @@
       @layer components {
         .signature-button {
           @apply inline-flex items-center justify-center gap-2 h-[var(--control-height)] min-h-[var(--control-height)] border border-primary-container bg-primary-container px-[var(--control-padding-inline)] font-headline text-xs font-bold uppercase tracking-[0.16em] text-on-primary transition-all;
-          box-shadow: 0 0 18px -10px rgba(252, 227, 0, 0.7);
+          box-shadow: 0 0 18px -10px rgb(var(--rgb-primary) / 0.7);
           clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
         }
 
         .signature-button:hover {
           @apply -translate-y-px bg-primary-fixed text-on-primary;
-          border-color: rgba(252, 227, 0, 0.55);
-          box-shadow: 0 0 24px -8px rgba(252, 227, 0, 0.92);
+          border-color: rgb(var(--rgb-primary) / 0.55);
+          box-shadow: 0 0 24px -8px rgb(var(--rgb-primary) / 0.92);
           filter: brightness(1.03);
         }
 
@@ -118,12 +118,12 @@
 
         .standard-button:hover {
           @apply bg-surface-container-highest text-primary-container;
-          border-color: rgba(252, 227, 0, 0.24);
+          border-color: var(--primary-alpha-24);
         }
 
         .standard-button.is-active {
           @apply bg-surface-container-high text-primary-container;
-          border-color: rgba(252, 227, 0, 0.3);
+          border-color: var(--primary-alpha-30);
         }
 
         .standard-button:disabled,
@@ -166,6 +166,7 @@
     </style>
     <link href="styles/tokens.css" rel="stylesheet" />
     <link href="styles/base.css" rel="stylesheet" />
+    <link href="styles/utilities.css" rel="stylesheet" />
     <link href="styles/layout.css" rel="stylesheet" />
     <link href="styles/components.css" rel="stylesheet" />
     <link href="styles/views.css" rel="stylesheet" />

package/frontend/js/app.js

@@ -69,6 +69,7 @@ import {
     toggleDataTablesPanel,
     setCurrentQuery,
     setChartsHeightPreset,
+    setChartsHistoryTab,
     setEditorPanelVisibility,
     setEditorTab,
     submitDeleteChartConfirmation,
@@ -111,7 +112,7 @@ import {
     applyCurrentMediaTaggingSelection,
     removeCurrentTableDesignerColumn,
 } from './store.js';
-import { renderChartsView } from './views/charts.js';
+import { renderChartsDetail, renderChartsView } from './views/charts.js';
 import { renderConnectionsView } from './views/connections.js';
 import { renderDataRowEditorPanel, renderDataView } from './views/data.js';
 import { renderEditorView } from './views/editor.js';
@@ -146,6 +147,7 @@ let lastRenderedMainMarkup = '';
 let lastRenderedPanelMarkup = '';
 let lastRenderedModalMarkup = '';
 let lastRenderedToastMarkup = '';
+let lastRenderedChartsHistorySignature = '';
 let lastRenderedPanelOpen = false;
 let lastRenderedLockedRoute = false;
 let pendingNewTableDesignerAutofocus = false;
@@ -417,6 +419,188 @@ function syncQueryHistorySelectionUi(selectedHistoryId = null) {
     return true;
 }
 
+function isEditorRouteName(routeName) {
+    return routeName === 'editor' || routeName === 'editorResults';
+}
+
+function captureQueryHistoryScrollState() {
+    if (!isEditorRouteName(lastRenderedRouteName)) {
+        return null;
+    }
+
+    const scrollNode = shellRefs.view.querySelector('[data-query-history-scroll]');
+
+    if (!(scrollNode instanceof HTMLElement)) {
+        return null;
+    }
+
+    return {
+        committedSearch: scrollNode.dataset.queryHistoryCommittedSearch ?? '',
+        historyTab: scrollNode.dataset.queryHistoryTab ?? '',
+        routeName: lastRenderedRouteName,
+        renderedItemCount: scrollNode.querySelectorAll('.query-history-item').length,
+        renderedLoadingMore: scrollNode.dataset.queryHistoryLoadingMore === 'true',
+        searchInput: scrollNode.dataset.queryHistorySearch ?? '',
+        scrollLeft: scrollNode.scrollLeft,
+        scrollTop: scrollNode.scrollTop,
+    };
+}
+
+function shouldRestoreQueryHistoryScroll(snapshot, state) {
+    if (!snapshot || !isEditorRouteName(state.route.name) || snapshot.routeName !== state.route.name) {
+        return false;
+    }
+
+    if (!state.editor.historyPanelVisible) {
+        return false;
+    }
+
+    if (
+        snapshot.historyTab !== state.editor.historyTab ||
+        snapshot.searchInput !== state.editor.historySearchInput ||
+        snapshot.committedSearch !== state.editor.historySearch
+    ) {
+        return false;
+    }
+
+    return (
+        state.editor.historyLoadingMore ||
+        snapshot.renderedLoadingMore ||
+        state.editor.history.length > snapshot.renderedItemCount
+    );
+}
+
+function restoreQueryHistoryScrollState(snapshot) {
+    const scrollNode = shellRefs.view.querySelector('[data-query-history-scroll]');
+
+    if (!(scrollNode instanceof HTMLElement)) {
+        return false;
+    }
+
+    scrollNode.scrollLeft = snapshot.scrollLeft;
+    scrollNode.scrollTop = snapshot.scrollTop;
+    return true;
+}
+
+function buildChartsHistorySignature(state) {
+    if (state.route.name !== 'charts') {
+        return '';
+    }
+
+    const historyVisible = state.editor.historyPanelVisible !== false || !state.charts.selectedHistoryId;
+
+    if (!historyVisible) {
+        return 'charts-history:hidden';
+    }
+
+    const queries = state.charts.queries ?? [];
+
+    if (!queries.length) {
+        if (state.charts.loading) {
+            return 'charts-history:loading-empty';
+        }
+
+        if (state.charts.error) {
+            return `charts-history:error:${state.charts.error.code}:${state.charts.error.message}`;
+        }
+
+        return 'charts-history:empty';
+    }
+
+    return JSON.stringify({
+        tab: state.charts.historyTab ?? 'recent',
+        queries: queries.map(item => [
+            item.id,
+            item.displayTitle,
+            item.previewSql,
+            Boolean(item.isSaved),
+            Array.isArray(item.chartTypes) ? item.chartTypes.join(',') : '',
+        ]),
+    });
+}
+
+function syncChartsHistorySelectionUi(state) {
+    const selectedHistoryId = String(state.charts.selectedHistoryId ?? '');
+    const historyButtons = shellRefs.view.querySelectorAll(
+        '.charts-view__sidebar [data-action="navigate"][data-history-id]',
+    );
+
+    for (const button of historyButtons) {
+        if (!(button instanceof HTMLElement)) {
+            continue;
+        }
+
+        const itemNode = button.closest('[data-charts-history-item]');
+        const isSelected = button.dataset.historyId === selectedHistoryId;
+        const titleNode = button.querySelector('[data-charts-history-title]');
+        const selectionNode = itemNode instanceof HTMLElement ? itemNode : button;
+
+        selectionNode.classList.toggle('border-primary-container/30', isSelected);
+        selectionNode.classList.toggle('bg-surface-container-high', isSelected);
+        selectionNode.classList.toggle('border-outline-variant/10', !isSelected);
+        selectionNode.classList.toggle('bg-surface-container-lowest', !isSelected);
+        selectionNode.classList.toggle('hover:bg-surface-container-high', !isSelected);
+
+        if (titleNode instanceof HTMLElement) {
+            titleNode.classList.toggle('text-primary-container', isSelected);
+            titleNode.classList.toggle('text-on-surface', !isSelected);
+        }
+    }
+
+    return true;
+}
+
+function syncChartsSavedToggleUi(actionNode, nextValue) {
+    const itemNode = actionNode.closest('[data-charts-history-item]');
+
+    actionNode.classList.toggle('is-active', nextValue);
+    actionNode.dataset.nextValue = nextValue ? 'false' : 'true';
+    actionNode.title = nextValue ? 'Remove from saved' : 'Save query';
+
+    const iconNode = actionNode.querySelector('.material-symbols-outlined');
+    if (iconNode instanceof HTMLElement) {
+        iconNode.textContent = nextValue ? 'bookmark' : 'bookmark_add';
+    }
+
+    if (itemNode instanceof HTMLElement) {
+        itemNode.querySelector('[data-charts-saved-badge]')?.toggleAttribute('hidden', !nextValue);
+
+        if (!nextValue && getState().charts.historyTab === 'saved') {
+            itemNode.remove();
+        }
+    }
+
+    const countNode = shellRefs.view.querySelector('[data-charts-history-count]');
+    if (countNode instanceof HTMLElement) {
+        const state = getState();
+        const count =
+            state.charts.historyTab === 'saved'
+                ? (state.charts.queries ?? []).filter(item => item.isSaved).length
+                : (state.charts.queries ?? []).length;
+        countNode.textContent = String(count);
+    }
+}
+
+function patchChartsDetailUi(state) {
+    const chartsView = shellRefs.view.querySelector('.charts-view');
+    const detailNode = chartsView?.querySelector('.charts-view__detail');
+
+    if (!(chartsView instanceof HTMLElement) || !(detailNode instanceof HTMLElement)) {
+        return false;
+    }
+
+    const historyVisible = state.editor.historyPanelVisible !== false || !state.charts.selectedHistoryId;
+    const sidebarNode = chartsView.querySelector('.charts-view__sidebar');
+
+    if (Boolean(sidebarNode) !== historyVisible) {
+        return false;
+    }
+
+    detailNode.innerHTML = renderChartsDetail(state);
+    syncChartsHistorySelectionUi(state);
+    return true;
+}
+
 function readFileAsBase64(file) {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();
@@ -755,6 +939,7 @@ function renderApp(state) {
     const statusBarMarkup = renderStatusBar(state);
     const modalMarkup = renderModal(state);
     const toastMarkup = renderToasts(state.toasts);
+    const chartsHistorySignature = buildChartsHistorySignature(state);
     const isLockedRoute = [
         'editor',
         'editorResults',
@@ -772,6 +957,7 @@ function renderApp(state) {
     const mainChanged = main !== lastRenderedMainMarkup;
     const panelChanged = panel !== lastRenderedPanelMarkup;
     const modalChanged = modalMarkup !== lastRenderedModalMarkup;
+    const chartsHistoryChanged = chartsHistorySignature !== lastRenderedChartsHistorySignature;
     const panelOpenChanged = panelOpen !== lastRenderedPanelOpen;
     const lockedRouteChanged = isLockedRoute !== lastRenderedLockedRoute;
     const shellMarkupUnchanged =
@@ -796,6 +982,7 @@ function renderApp(state) {
     }
 
     const focusedInput = captureFocusedInputState();
+    const queryHistoryScrollState = captureQueryHistoryScrollState();
     const isEnteringNewTableDesignerRoute =
         state.route.name === 'tableDesigner' && state.route.params?.isNew && previousRoutePath !== state.route.path;
 
@@ -805,9 +992,20 @@ function renderApp(state) {
         pendingNewTableDesignerAutofocus = false;
     }
 
-    if (mainChanged) {
-        teardownStructureGraph();
+    const canPatchChartsMain =
+        mainChanged && previousRouteName === 'charts' && state.route.name === 'charts' && !chartsHistoryChanged;
+    let mainPatched = false;
+
+    if (canPatchChartsMain) {
         teardownQueryChartRenderer();
+        mainPatched = patchChartsDetailUi(state);
+    }
+
+    if (mainChanged) {
+        if (!mainPatched) {
+            teardownStructureGraph();
+            teardownQueryChartRenderer();
+        }
     }
 
     if (topNavChanged) {
@@ -829,7 +1027,7 @@ function renderApp(state) {
         shellRefs.statusBar.innerHTML = statusBarMarkup;
     }
 
-    if (mainChanged) {
+    if (mainChanged && !mainPatched) {
         shellRefs.view.innerHTML = main;
     }
 
@@ -853,6 +1051,10 @@ function renderApp(state) {
         shellRefs.shell.classList.toggle('panel-open', panelOpen);
     }
 
+    if (shouldRestoreQueryHistoryScroll(queryHistoryScrollState, state)) {
+        restoreQueryHistoryScrollState(queryHistoryScrollState);
+    }
+
     if (pendingQueryEditorFocus && (state.route.name === 'editor' || state.route.name === 'editorResults')) {
         if (focusQueryEditorInput()) {
             pendingQueryEditorFocus = false;
@@ -883,6 +1085,7 @@ function renderApp(state) {
     lastRenderedPanelMarkup = panel;
     lastRenderedModalMarkup = modalMarkup;
     lastRenderedToastMarkup = toastMarkup;
+    lastRenderedChartsHistorySignature = chartsHistorySignature;
     lastRenderedPanelOpen = panelOpen;
     lastRenderedLockedRoute = isLockedRoute;
 
@@ -1063,6 +1266,20 @@ async function handleAction(actionNode) {
                 );
             }
             return;
+        case 'toggle-charts-query-history-saved':
+            if (actionNode.dataset.historyId) {
+                const nextValue = actionNode.dataset.nextValue === 'true';
+                const updated = await toggleQueryHistorySavedState(actionNode.dataset.historyId, nextValue, {
+                    notify: false,
+                    refresh: false,
+                    toast: false,
+                });
+
+                if (updated) {
+                    syncChartsSavedToggleUi(actionNode, nextValue);
+                }
+            }
+            return;
         case 'toggle-charts-sql-panel':
             toggleChartsSqlPanel();
             return;
@@ -1074,6 +1291,11 @@ async function handleAction(actionNode) {
                 setChartsHeightPreset(actionNode.dataset.preset);
             }
             return;
+        case 'set-charts-history-tab':
+            if (actionNode.dataset.tab) {
+                setChartsHistoryTab(actionNode.dataset.tab);
+            }
+            return;
         case 'export-query-chart-png':
             if (actionNode.dataset.chartId && !exportQueryChartAsPng(actionNode.dataset.chartId)) {
                 showToast('The selected chart is not ready for PNG export.', 'alert');

package/frontend/js/components/modal.js

@@ -481,13 +481,22 @@ function renderChartEditorForm(modal, state) {
           bind: "query-chart-draft-config:y_column",
         })}
       </div>
-      <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
+        ${renderSelectField({
+          label: "Sort By",
+          value: draft.config?.sort_by ?? "y",
+          options: [
+            { value: "x", label: "X column" },
+            { value: "y", label: "Y value" },
+          ],
+          bind: "query-chart-draft-config:sort_by",
+        })}
         ${renderSelectField({
           label: "Sort Direction",
-          value: draft.config?.sort_direction ?? "asc",
+          value: draft.config?.sort_direction ?? "desc",
           options: [
-            { value: "asc", label: "Ascending" },
-            { value: "desc", label: "Descending" },
+            { value: "asc", label: "Ascending / smallest first" },
+            { value: "desc", label: "Descending / largest first" },
           ],
           bind: "query-chart-draft-config:sort_direction",
         })}

package/frontend/js/components/queryHistoryPanel.js

@@ -139,6 +139,7 @@ export function renderQueryHistoryPanel({
   error = null,
   activeTab = "recent",
   search = "",
+  committedSearch = "",
   total = 0,
   hasMore = false,
   activeHistoryId = null,
@@ -176,7 +177,14 @@ export function renderQueryHistoryPanel({
           />
         </label>
       </div>
-      <div class="custom-scrollbar min-h-0 flex-1 overflow-auto px-3 py-3">
+      <div
+        class="custom-scrollbar min-h-0 flex-1 overflow-auto px-3 py-3"
+        data-query-history-committed-search="${escapeHtml(committedSearch)}"
+        data-query-history-loading-more="${loadingMore ? "true" : "false"}"
+        data-query-history-search="${escapeHtml(search)}"
+        data-query-history-scroll
+        data-query-history-tab="${escapeHtml(activeTab)}"
+      >
         ${
           error
             ? `

package/frontend/js/components/rowEditorPanel.js

@@ -50,15 +50,7 @@ function renderReadonlyField(label, value) {
     <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">
       <div class="flex flex-wrap items-center gap-2 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
         <span>${escapeHtml(displayLabel)}</span>
-        ${badges
-          .map(
-            (badge) => `
-              <span class="border border-outline-variant/20 bg-surface-container px-2 py-1 text-[9px] text-primary-container">
-                ${escapeHtml(badge)}
-              </span>
-            `
-          )
-          .join("")}
+        ${badges.map((badge) => renderFieldBadge(badge)).join("")}
       </div>
       ${
         jsonPreview
@@ -72,37 +64,68 @@ function renderReadonlyField(label, value) {
 function renderEditableField(field) {
   const badges = Array.isArray(field.badges) ? field.badges : [];
   const jsonPreview = getJsonPreview(field.value);
+  const inputType = field.inputType === "number" ? "number" : "text";
+  const numberStep = field.numberStep === "1" ? "1" : "any";
 
   return `
     <label class="block space-y-2">
       <span class="flex flex-wrap items-center gap-2 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
         <span>${escapeHtml(field.label ?? field.name)}</span>
-        ${badges
-          .map(
-            (badge) => `
-              <span class="border border-outline-variant/20 bg-surface-container px-2 py-1 text-[9px] text-primary-container">
-                ${escapeHtml(badge)}
-              </span>
-            `
-          )
-          .join("")}
+        ${badges.map((badge) => renderFieldBadge(badge)).join("")}
       </span>
       ${
         jsonPreview
           ? renderJsonViewer(jsonPreview, "JSON Preview")
           : ""
       }
-      <textarea
-        class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container ${
-          jsonPreview ? "min-h-[14rem] font-mono leading-6" : "min-h-[56px]"
-        }"
-        name="field:${escapeHtml(field.name)}"
-        spellcheck="false"
-      >${escapeHtml(field.value ?? "")}</textarea>
+      ${
+        inputType === "number" && !jsonPreview
+          ? `
+              <input
+                class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+                name="field:${escapeHtml(field.name)}"
+                step="${escapeHtml(numberStep)}"
+                type="number"
+                value="${escapeHtml(field.value ?? "")}"
+              />
+            `
+          : `
+              <textarea
+                class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container ${
+                  jsonPreview ? "min-h-[14rem] font-mono leading-6" : "min-h-[56px]"
+                }"
+                name="field:${escapeHtml(field.name)}"
+                spellcheck="false"
+              >${escapeHtml(field.value ?? "")}</textarea>
+            `
+      }
     </label>
   `;
 }
 
+function getFieldBadgeClassName(tone) {
+  if (tone === "primary-key") {
+    return "border-primary-container/35 bg-primary-container/15 text-primary-container";
+  }
+
+  if (tone === "foreign-key") {
+    return "border-tertiary-fixed-dim/35 bg-tertiary-fixed-dim/15 text-tertiary-fixed-dim";
+  }
+
+  return "border-outline-variant/20 bg-surface-container text-on-surface-variant";
+}
+
+function renderFieldBadge(badge) {
+  const label = typeof badge === "object" ? badge.label : badge;
+  const tone = typeof badge === "object" ? badge.tone : "";
+
+  return `
+    <span class="border px-2 py-1 text-[9px] ${getFieldBadgeClassName(tone)}">
+      ${escapeHtml(label)}
+    </span>
+  `;
+}
+
 export function renderRowEditorPanel({
   title,
   sectionLabel = "Row Editor",

package/frontend/js/lib/queryChartOptions.js

@@ -5,6 +5,7 @@ import {
   formatQueryChartAxisValue,
   getAnalysisColumn,
   sortQueryChartRows,
+  sortQueryChartRowsByNumericColumn,
 } from "./queryCharts.js";
 
 const CHART_PALETTE = ["#FCE300", "#2DFAFF", "#FFB4AB", "#CDC7AB", "#7DD3FC", "#86EFAC"];
@@ -55,7 +56,10 @@ function buildLineLabelConfig(enabled) {
 }
 
 export function buildBarChartOption(chart, rows) {
-  const sortedRows = sortQueryChartRows(rows, chart.config.x_column, chart.config.sort_direction);
+  const sortedRows =
+    chart.config.sort_by === "y"
+      ? sortQueryChartRowsByNumericColumn(rows, chart.config.y_column, chart.config.sort_direction)
+      : sortQueryChartRows(rows, chart.config.x_column, chart.config.sort_direction);
 
   return {
     ...buildCommonOption(),

package/frontend/js/lib/queryCharts.js

@@ -312,7 +312,43 @@ function getFirstColumn(columns, predicate) {
 
 function getNextNumericColumn(analysis, excludedNames = []) {
   const excluded = new Set(excludedNames);
-  return getFirstColumn(analysis?.numberColumns, (column) => !excluded.has(column.name));
+  const candidates = (analysis?.numberColumns ?? []).filter((column) => !excluded.has(column.name));
+
+  if (!candidates.length) {
+    return null;
+  }
+
+  const scoredCandidates = candidates
+    .map((column, index) => ({
+      column,
+      index,
+      score: getNumericMeasureScore(column.name),
+    }))
+    .sort((left, right) => right.score - left.score || left.index - right.index);
+
+  return scoredCandidates[0]?.column ?? null;
+}
+
+function getNumericMeasureScore(columnName = "") {
+  const normalized = String(columnName ?? "")
+    .trim()
+    .toLowerCase();
+
+  let score = 0;
+
+  if (
+    /(count|total|sum|avg|average|amount|score|size|value|price|cost|rate|percent|pct|percentage|number)/.test(
+      normalized
+    )
+  ) {
+    score += 20;
+  }
+
+  if (/(^|_)(id|uuid|pk|key)$/.test(normalized) || /(^|_)id$/.test(normalized)) {
+    score -= 40;
+  }
+
+  return score;
 }
 
 function getPrimaryDimensionColumn(analysis) {
@@ -406,7 +442,8 @@ export function buildSuggestedChartConfig(chartType, analysis) {
         y_column: firstNumeric?.name ?? "",
         show_legend: true,
         show_labels: false,
-        sort_direction: "asc",
+        sort_by: "y",
+        sort_direction: "desc",
       };
   }
 }
@@ -524,6 +561,17 @@ export function sortQueryChartRows(rows, columnName, direction = "asc") {
   );
 }
 
+export function sortQueryChartRowsByNumericColumn(rows, columnName, direction = "asc") {
+  const multiplier = direction === "desc" ? -1 : 1;
+
+  return [...(rows ?? [])].sort((left, right) => {
+    const leftValue = coerceNumericChartValue(left?.[columnName]);
+    const rightValue = coerceNumericChartValue(right?.[columnName]);
+
+    return compareValues(leftValue, rightValue) * multiplier;
+  });
+}
+
 export function formatQueryChartAxisValue(value) {
   if (value === null || value === undefined) {
     return "NULL";