skills.rest
nodefony
nodefonyOFFICIAL
Explore all skills by this author →
WebsiteGitHub

nodefony-html-report

Generates self-contained HTML reports with server-rendered SVG charts and interactive tables.

Updated Dec 19, 2023
Search Tags:#data visualization#server-side rendering#echarts#print-ready#svg charts#html report#benchmark report
One-click install
npx skills add https://github.com/nodefony/nodefony-core --skill nodefony-html-report-nodefony
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nodefony-html-report
Source: https://github.com/nodefony/nodefony-core/tree/main/.claude/skills/nodefony-html-report
Command: npx skills add https://github.com/nodefony/nodefony-core --skill nodefony-html-report-nodefony

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires echarts, and includes scripts (resource) and references (resource) components.

What problem does it solve? Decision-makers need reports they can read, print, and share without a server, CDN, or build step. This Skill produces a single autonomous .html file — sortable tables, interactive calculators, and static SVG charts rendered server-side — that survives email attachments, CI artifacts, and offline viewing. ## Core Features & Use Cases - Report component library: lib/report.mjs provides pure functions for documents, key-figure cards, sortable/filterable tables with CSV export, bar/line/scatter/waterfall/heatmap/gauge/donut charts, interactive calculators, tabs, and print-ready output. - Server-side ECharts engine: lib/echarts.mjs renders Apache ECharts to static SVG (Sankey, boxplot, radar, treemap, funnel, dual-axis lines) in both light and dark themes, with French number formatting and enforced honest axis scales. - Mermaid diagram rendering: lib/schemas.mjs draws flowcharts and sequence diagrams from untouched mermaid source. - Use Case: After running a load test, generate a capacity report with key metrics on top, a sortable latency table, median-with-range bar charts, and an interactive pod-sizing calculator — all in one printable HTML file. ## Quick Start Ask the AI to generate a self-contained HTML report from your benchmark or audit data using the nodefony-html-report library, with the conclusion and key figures at the top.

Frequently Asked Questions about nodefony-html-report

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a self-contained HTML report without a CDN?▼

Import pure functions from lib/report.mjs such as doc, section, cards, table, and barChart, then write the returned HTML string to a file. The output embeds all CSS, JavaScript, and the logo as a data-URI, so it works fully offline.

How to render ECharts charts server-side as static SVG?▼

Use lib/echarts.mjs, which calls ECharts renderToSVGString() in SSR mode with animation disabled. It produces static SVG for 14 chart families including Sankey, boxplot, radar, and heatmap, in both light and dark themes.

Does the report require JavaScript to display charts?▼

Charts from lib/echarts.mjs are static SVG and render with JavaScript disabled. Interactive elements like sortable tables, tabs, and calculators use small inline scripts, but all content remains printable and readable.

What happens if the echarts package is not installed?▼

The engine loads ECharts via createRequire and throws an actionable error telling you to run npm i -D echarts, instead of a generic module-not-found failure. It is a devDependency, so published packages never depend on it.

When should I use Markdown instead of an HTML report?▼

Choose Markdown when the output must be versioned in git diffs or re-injected into an LLM as context. Choose HTML when a human must decide, print, or present the content, since HTML supports charts, calculators, and print layout.

Why do bar charts always start at zero in this library?▼

Bars are compared by length, so truncating the axis visually exaggerates small differences. The echelle() function enforces a zero baseline for length comparisons while allowing recentered axes for position-based charts like scatter plots and boxplots.

Related Skills

Explore More Software Engineering Skills→
cescraflicescrafli

benchmark

Measure performance baselines and detect regressions across software changes.

Community
Intermediate
DirtybitGamesDirtybitGames
15

demo-page

Convert a Markdown source document into an HTML demo page and deploy it to the gh-pages branch.

Official
Intermediate
msmt2017msmt2017
17

ab

Send HTTP requests with ApacheBench to measure server response times.

Community
Basic
jeremybrasherjeremybrasher

principle-model-the-domain

Encodes domain logic in data structures instead of scattered conditionals across code.

Community
Intermediate