wrapper for graphs

main.ts

@@ -19,10 +19,11 @@ import { injectDateNavigatorStyles, removeDateNavigatorStyles } from './src/styl
 import { registerHabitCounter } from "./src/webcomponents/HabitCounter/registerHabitCounter";
 import { registerBooleanSwitch } from "src/webcomponents/BooleanSwitch/registerBooleanSwitch";
 import { registerTextInput } from "src/webcomponents/TextInput/registerTextInput";
+import { registerTimestampUpdaterButton } from "src/webcomponents/TimestampUpdaterButton/registerTimestampUpdaterButton";
+import { registerSqlChartRenderer } from "src/webcomponents/SqlChart/registerSqlChart";
 
 import { SQLiteDBSettings, DEFAULT_SETTINGS } from "./src/types";
 import { pluginState } from "src/pluginState";
-import { registerTimestampUpdaterButton } from "src/webcomponents/TimestampUpdaterButton/registerTimestampUpdaterButton";
 
 export default class SQLiteDBPlugin extends Plugin {
 	settings: SQLiteDBSettings;
@@ -46,6 +47,7 @@ export default class SQLiteDBPlugin extends Plugin {
 			registerTextInput(el, this.app, this.dbService);
 		});
 
+		registerSqlChartRenderer(this, this.dbService);
         registerTimestampUpdaterButton(this);
 
 		//? Codeblocks

src/codeblocks/dateHeader/dom/buildDateNavigatorDOM.ts

@@ -68,7 +68,7 @@ export function updateDateNavigatorDisplay(
     newPeriod: NavigationPeriod
 ): void {
     const displayString = formatPeriodForDisplay(newIsoDate, newPeriod);
-    if (!elements) { console.error("[DateNavDOM] Cannot update display, elements object is null."); return; }
+    if (!elements) { return; }
 
     // Update Title
     if (elements.dateDisplay) {

src/webcomponents/SqlChart/registerSqlChart.ts

@@ -0,0 +1,62 @@
+import { MarkdownPostProcessorContext, Plugin } from 'obsidian';
+import { DBService } from '../../DBService'; // Adjust path as needed
+import { processSqlChartBlock } from '../../codeblocks/processSqlChartBlock'; // Adjust path as needed
+import { replacePlaceholders } from 'src/helpers/replacePlaceholders';
+
+// This function sets up the post-processor
+export function registerSqlChartRenderer(plugin: Plugin, dbService: DBService) {
+
+    plugin.registerMarkdownPostProcessor(
+        async (el: HTMLElement, ctx: MarkdownPostProcessorContext) => {
+
+            // Find all divs with the class 'sql-chart-render' inside the rendered element 'el'
+            const chartContainers = el.querySelectorAll<HTMLElement>('div.sql-chart-render');
+
+            if (chartContainers.length === 0) {
+                return; // No charts found in this section
+            }
+
+            // Use Promise.all to process charts potentially in parallel (optional)
+            // Or a simple loop if preferred: for (const container of chartContainers) { ... }
+            await Promise.all(Array.from(chartContainers).map(async (container) => {
+                // Check if already processed (important if post-processor runs multiple times)
+                if (container.dataset.sqlChartProcessed) {
+                    return;
+                }
+                // Mark as processed
+                container.dataset.sqlChartProcessed = 'true';
+
+                const source = container.innerHTML.trim();
+                const parsedSource = replacePlaceholders(source);
+
+                // Clear the original config text before rendering
+                container.innerHTML = ''; // Clear the container
+
+                if (!source) {
+                    container.createEl("p", { text: "Error: SQL Chart configuration block is empty." });
+                    console.warn("Empty sql-chart-render block found", container);
+                    return;
+                }
+
+                // Add a loading indicator (optional)
+                const loadingEl = container.createEl("p", { text: "Loading chart..." });
+
+                try {
+                    // Call your existing core logic directly on the container
+                    await processSqlChartBlock(dbService, parsedSource, container);
+                    // Remove loading indicator if processSqlChartBlock doesn't clear the container itself
+                    loadingEl.remove();
+                } catch (error: any) {
+                    console.error("Error rendering SQL Chart from div:", error);
+                    // Clear potential loading message or partial render
+                    container.innerHTML = '';
+                    container.createEl("p", { text: "Error rendering SQL Chart:" });
+                    // Display the error message safely
+                    container.createEl("pre", { text: String(error.message || error) });
+                }
+            }));
+        }
+    );
+
+    console.log("SQL Chart Renderer registered.");
+}

src/webcomponents/TimestampUpdaterButton/registerTimestampUpdaterButton.ts

@@ -12,8 +12,6 @@ export function registerTimestampUpdaterButton(plugin: Plugin): void {
 
     plugin.registerMarkdownPostProcessor((element, context: MarkdownPostProcessorContext) => {
         const { app } = plugin;
-        console.log(`Timestamp PostProcessor running for section in: ${context.sourcePath}`);
-
         const placeholderElements = element.querySelectorAll('.timestamp-updater-placeholder');
 
         if (placeholderElements.length === 0) {

tsconfig.json

@@ -12,6 +12,7 @@
     "isolatedModules": true,
     "strictNullChecks": true,
     "esModuleInterop": true,
+    "jsx": "react",
     "lib": [
       "DOM",
       "ES5",
@@ -20,6 +21,7 @@
     ]
   },
   "include": [
-    "**/*.ts"
+    "**/*.ts",
+    "**/*.tsx"
   ]
 }