From 84ad5370fb2ae0613126a49fae5c4322211d0410 Mon Sep 17 00:00:00 2001 From: stfrigerio Date: Sun, 13 Apr 2025 12:41:56 +0200 Subject: [PATCH] wrapper for graphs --- main.ts | 4 +- .../dateHeader/dom/buildDateNavigatorDOM.ts | 2 +- .../SqlChart/registerSqlChart.ts | 62 +++++++++++++++++++ .../registerTimestampUpdaterButton.ts | 2 - tsconfig.json | 4 +- 5 files changed, 69 insertions(+), 5 deletions(-) create mode 100644 src/webcomponents/SqlChart/registerSqlChart.ts diff --git a/main.ts b/main.ts index 99541c6..b4f5226 100644 --- a/main.ts +++ b/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 diff --git a/src/codeblocks/dateHeader/dom/buildDateNavigatorDOM.ts b/src/codeblocks/dateHeader/dom/buildDateNavigatorDOM.ts index 83e9a35..4d35ab0 100644 --- a/src/codeblocks/dateHeader/dom/buildDateNavigatorDOM.ts +++ b/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) { diff --git a/src/webcomponents/SqlChart/registerSqlChart.ts b/src/webcomponents/SqlChart/registerSqlChart.ts new file mode 100644 index 0000000..8435e7f --- /dev/null +++ b/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('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."); +} \ No newline at end of file diff --git a/src/webcomponents/TimestampUpdaterButton/registerTimestampUpdaterButton.ts b/src/webcomponents/TimestampUpdaterButton/registerTimestampUpdaterButton.ts index eba433e..0f8b5ee 100644 --- a/src/webcomponents/TimestampUpdaterButton/registerTimestampUpdaterButton.ts +++ b/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) { diff --git a/tsconfig.json b/tsconfig.json index 29d45d9..ec00b91 100644 --- a/tsconfig.json +++ b/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" ] }