======================== CODE SNIPPETS ======================== TITLE: Install report_creator Python Package DESCRIPTION: Instructions to install the report_creator library using pip, including the upgrade flag to ensure the latest version is installed. SOURCE: https://github.com/darenr/report_creator/blob/main/docs/source/getting_started.rst#_snippet_0 LANGUAGE: bash CODE: ``` $ python -m pip install report_creator -U ``` ---------------------------------------- TITLE: Example: Creating a Single Metric Component in Python DESCRIPTION: This Python snippet demonstrates how to instantiate an `rc.Metric` component. It sets a heading, a value, a unit, and a descriptive label to display a probability of rain. SOURCE: https://github.com/darenr/report_creator/blob/main/docs/source/getting_started.rst#_snippet_6 LANGUAGE: python CODE: ``` rc.Metric( heading="Chances of rain", value="84", unit="%", label="Probability of rain in the next 24 hours using a weather model trained on historical data." ) ``` ---------------------------------------- TITLE: Create a Dynamic Report with report_creator in Python DESCRIPTION: This comprehensive example demonstrates how to initialize a ReportCreator instance, add diverse content blocks such as Markdown text, metric displays, bar charts, and scatter plots, and finally save the generated report to an HTML file. It showcases the flexibility of combining various components within a report. SOURCE: https://github.com/darenr/report_creator/blob/main/docs/source/getting_started.rst#_snippet_1 LANGUAGE: python CODE: ``` import plotly.express as px # for chart data # Import the report_creator module import report_creator as rc with rc.ReportCreator( title="My Report", description="My Report Description", footer="My Report Footer", logo="octocat", ) as report: view = rc.Block( rc.Markdown("""It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of light, it was the season of darkness, it was the spring of hope, it was the winter of despair.""", label="Charles Dickens, A Tale of Two Cities"), rc.Group( rc.Metric( heading="Answer to Life, The Universe, and Everything", value="42", ), rc.Metric( heading="Author", value="Douglas Adams", ), ), rc.Bar(px.data.medals_long(), x="nation", y="count", dimension="medal", label="Bar Chart - Olympic Medals", ), rc.Scatter( px.data.iris(), x="sepal_width", y="sepal_length", dimension="species", marginal="histogram", label="Scatter Plot - Iris", ), ) report.save(view, "report.html") ``` ---------------------------------------- TITLE: Development setup and build commands for Report Creator DESCRIPTION: This section provides a series of shell commands for setting up the development environment, formatting code, installing the package locally, viewing dependencies, building examples, running tests, generating documentation, and releasing new versions of the Report Creator project. SOURCE: https://github.com/darenr/report_creator/blob/main/README.md#_snippet_1 LANGUAGE: sh CODE: ``` conda create -n rc -c conda-forge python=3.13 conda activate rc make setup # recommended for code hygiene make format # install as a local package: python3 -m pip install -e . # see dependency tree: pipdeptree --exclude pip,pipdeptree,setuptools,wheel,twine # build examples: make examples # build a *specific* example: make examples EXAMPLES=examples/myreport.py # run tests make tests # build doc make doc # release new version make release # show list of make targets make targets ``` ---------------------------------------- TITLE: Example: Embedding a Mermaid Diagram in Python DESCRIPTION: This Python snippet demonstrates how to use the `rc.Diagram` component to embed a Mermaid JS flowchart. The diagram code is provided as a multi-line string. SOURCE: https://github.com/darenr/report_creator/blob/main/docs/source/getting_started.rst#_snippet_9 LANGUAGE: python CODE: ``` rc.Diagram(""" graph LR A[Square Rect] -- Link text --> B((Circle)) A --> C(Round Rect) B --> D{Rhombus} C --> D """) ``` ---------------------------------------- TITLE: Generate a Histogram Chart with report_creator DESCRIPTION: Illustrates the usage of the rc.Histogram component to create a histogram chart. This example demonstrates how to pass data, specify the x-axis, and define a dimension for grouping, along with a custom label. SOURCE: https://github.com/darenr/report_creator/blob/main/docs/source/getting_started.rst#_snippet_2 LANGUAGE: python CODE: ``` rc.Histogram( px.data.tips(), x="total_bill", dimension="sex", label="rc.Histogram() Chart of Total Bill", ) ``` ---------------------------------------- TITLE: report_creator Components API Reference DESCRIPTION: Detailed API reference for the various components available in the report_creator library, including constructors, parameters, and their primary functions for building structured and dynamic reports. SOURCE: https://github.com/darenr/report_creator/blob/main/docs/source/getting_started.rst#_snippet_3 LANGUAGE: APIDOC CODE: ``` report_creator Library Components: rc.ReportCreator(title: str, description: str, footer: str, logo: str | None) - title: Title of the report. - description: Description of the report. - footer: Footer text for the report. - logo: Optional. Path to logo file, URL, base64 encoded image, or GitHub handle (e.g., "octocat", "apple"). - save(view: rc.Block | rc.Group | rc.Select, filename: str): Saves the report to an HTML file. Layout Components: - rc.Block(*components, label: str | None): Vertical layout container. Accepts any report_creator component as arguments. - rc.Group(*components, label: str | None): Horizontal layout container. Accepts any report_creator component as arguments. - rc.Select(*components, label: str | None): Tabbed container. Note: May not be suitable for printed reports. Text Components: - rc.Markdown(text: str, label: str | None): Renders GitHub extended Markdown syntax. Supports tables and styled code blocks. - rc.Html(html_content: str, label: str | None): Renders raw HTML content. - rc.Text(text: str, label: str | None): Deprecated in favor of rc.Markdown(). Code Components (for syntax highlighting and rendering): - rc.Yaml(code: str, label: str | None) - rc.Json(code: str, label: str | None) - rc.Python(code: str, label: str | None) - rc.Prolog(code: str, label: str | None) - rc.Java(code: str, label: str | None) - rc.Shell(code: str, label: str | None) - rc.Sql(code: str, label: str | None) - rc.Plaintext(code: str, label: str | None): For displaying code not in common languages, with limited styling. Image Component: - rc.Image(src: str, convert_to_base64: bool = False, label: str | None) - src: Image source (URL or local path). - convert_to_base64: If True, the image is retrieved and embedded as base64 at report creation time, useful for offline viewing or bypassing CORS issues. Charting Components (wrappers around plotly.express for easy integration): - rc.Radar(data, *args, label: str | None) - rc.Bar(data, *args, label: str | None) - rc.Scatter(data, *args, label: str | None) - rc.Histogram(data, *args, label: str | None) - rc.Box(data, *args, label: str | None) - rc.Line(data, *args, label: str | None) - rc.Pie(data, *args, label: str | None) - rc.Widget(obj, label: str | None): Displays objects that support the `repr_html()` function, commonly used in Jupyter notebooks (e.g., matplotlib objects). Table Components: - rc.Table(data, label: str | None): For displaying simple tabular data. - rc.DataTable(data, label: str | None): Provides a richer, more interactive experience for displaying tabular data. ``` ---------------------------------------- TITLE: API Reference: Utility Components (rc.Separator, rc.Collapse, rc.Diagram) DESCRIPTION: This entry describes various utility components. `rc.Separator()` creates a visual separation. `rc.Collapse()` hides content under a dropdown. `rc.Diagram()` allows embedding Mermaid JS diagrams. SOURCE: https://github.com/darenr/report_creator/blob/main/docs/source/getting_started.rst#_snippet_8 LANGUAGE: APIDOC CODE: ``` rc.Separator() Purpose: Creates a visual separator. rc.Collapse(content: Any, label: Optional[str] = "Show/Hide") Purpose: Hides content under a dropdown. rc.Diagram(mermaid_code: str) Purpose: Embeds a Mermaid JS diagram. ``` ---------------------------------------- TITLE: API Reference: rc.DataTable() Component DESCRIPTION: The `rc.DataTable()` component is used to display tabular data. It supports pagination, searching, and export functionalities (PDF, print). It constructs from table-like objects and allows specifying precision for numeric values. SOURCE: https://github.com/darenr/report_creator/blob/main/docs/source/getting_started.rst#_snippet_4 LANGUAGE: APIDOC CODE: ``` rc.DataTable(data: table-like, precision: Optional[int]) Purpose: Displays paginated, searchable, and exportable tabular data. Allows specifying numeric precision. ``` ---------------------------------------- TITLE: Create and Save a Basic HTML Report with Report Creator DESCRIPTION: This Python example demonstrates how to initialize a Report Creator instance, add a simple block with a heading and markdown content, and save the generated report as an HTML file. It showcases the fundamental steps for creating a self-contained report. SOURCE: https://github.com/darenr/report_creator/blob/main/docs/source/index.rst#_snippet_0 LANGUAGE: python3 CODE: ``` import report_creator as rc report = rc.ReportCreator(title="My Report") report.add_component(rc.Block( rc.Heading("Hello World", level=1), rc.Markdown("This is a simple report using Report Creator."), )) report.save("report.html") ``` ---------------------------------------- TITLE: API Reference: rc.MetricGroup() Component DESCRIPTION: The `rc.MetricGroup()` component is useful for displaying multiple metrics from a Pandas DataFrame. It creates an `rc.Metric` component for each row in the DataFrame, using specified columns for headings and values. SOURCE: https://github.com/darenr/report_creator/blob/main/docs/source/getting_started.rst#_snippet_7 LANGUAGE: APIDOC CODE: ``` rc.MetricGroup(dataframe: pandas.DataFrame, heading_col: str, value_col: str) Purpose: Creates an rc.Metric component for each row of a Pandas DataFrame. ``` ---------------------------------------- TITLE: API Reference: rc.Metric() Component DESCRIPTION: The `rc.Metric()` component is designed to display single numeric or text results, such as scores. It ensures legible contrast for colors and prevents adjacent metrics from having the same background color. It takes heading, value, and optional unit and label. SOURCE: https://github.com/darenr/report_creator/blob/main/docs/source/getting_started.rst#_snippet_5 LANGUAGE: APIDOC CODE: ``` rc.Metric(heading: str, value: str, unit: Optional[str] = None, label: Optional[str] = None) Purpose: Displays single numeric/text results with responsive layout and legible color contrast. ``` ---------------------------------------- TITLE: Create and save an HTML report with Report Creator DESCRIPTION: This Python example demonstrates how to use the `report_creator` library to build a structured HTML report. It initializes a `ReportCreator` instance with a title, description, and footer, then constructs a `Block` containing various components like text, metrics, and Plotly Express charts (Bar, Scatter). Finally, it saves the generated report to an HTML file. SOURCE: https://github.com/darenr/report_creator/blob/main/README.md#_snippet_0 LANGUAGE: python CODE: ``` import report_creator as rc with rc.ReportCreator( title="My Report", description="My Report Description", footer="My Report Footer", ) as report: view = rc.Block( rc.Text( """It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of light, it was the season of darkness, it was the spring of hope, it was the winter of despair.""", label="Charles Dickens, A Tale of Two Cities", ), rc.Group( rc.Metric( heading="Answer to Life, The Universe, and Everything", value="42", ), rc.Metric( heading="Author", value="Douglas Adams", ), ), rc.Bar( px.data.medals_long(), x="nation", y="count", dimension="medal", label="Bar Chart - Olympic Medals", ), rc.Scatter( px.data.iris(), x="sepal_width", y="sepal_length", dimension="species", marginal="histogram", label="Scatter Plot - Iris", ), ) report.save(view, "report.html") ``` ---------------------------------------- TITLE: CSS Styling for a Progress Timeline Component DESCRIPTION: This CSS defines the visual appearance and layout for a responsive progress timeline component. It includes styles for the main container, individual steps, circular indicators, and a progress line, with active states for visual feedback. The timeline typically represents a sequence of steps like 'Register', 'Choose plan', 'Purchase', and 'Receive Product'. SOURCE: https://github.com/darenr/report_creator/blob/main/ideas/steps.html#_snippet_0 LANGUAGE: css CODE: ``` body { background-color: #1a1a1a; font-family: Arial, sans-serif; color: #fff; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .timeline { display: flex; align-items: center; position: relative; width: 600px; } .step { display: flex; flex-direction: column; align-items: center; position: relative; flex: 1; } .circle { width: 30px; height: 30px; background-color: #666; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff; font-weight: bold; z-index: 1; } .circle.active { background-color: #4a90e2; } .label { margin-top: 10px; font-size: 14px; text-align: center; } .line { position: absolute; height: 4px; background-color: #666; top: 13px; left: 0; right: 0; } .line-progress { position: absolute; height: 4px; background-color: #4a90e2; top: 13px; left: 0; width: 33.33%; /* Adjust this based on progress (33.33% for 1-2 completed) */ } ``` ---------------------------------------- TITLE: Conditional Third-Party Library Initialization DESCRIPTION: A self-executing anonymous function responsible for initializing various frontend libraries based on conditional flags. It sets up highlight.js for code syntax highlighting, DataTables for interactive tables, and Mermaid.js for diagram rendering, including Panzoom functionality for diagrams. It also handles default button clicks and ensures responsive elements are correctly sized on page load. SOURCE: https://github.com/darenr/report_creator/blob/main/report_creator/templates/default.html#_snippet_4 LANGUAGE: JavaScript CODE: ``` (function () { // Initialize highlight.js, mermaid.js, dataTables.js etc conditionally {% if include_hljs %} console.log("initializing highlight.js (theme: {{code_theme}})"); // style any code blocks document .querySelectorAll(".syntax-color, .codehilite pre code") .forEach((element, key) => { hljs.highlightElement(element); hljs.configure({ ignoreUnescapedHTML: true, }); }); {% endif %} document.querySelectorAll(".defaultOpen").forEach(function (button) { button.click(); }); {% if include_datatable %} console.log("initializing DataTables"); // style tables table = new DataTable("table.fancy-table", { layout: { topStart: { buttons: ["copyHtml5", "excelHtml5", "csvHtml5", "print"], }, }, colReorder: true, responsive: true, autoWidth: true, }); {% endif %} {% if include_mermaid %} console.log("initializing mermaid (theme: {{diagram_theme}})"); mermaid.initialize({ startOnLoad: true, securityLevel: "loose", theme: "{{diagram_theme}}", themeVariables: { fontFamily: "Helvetica Neue", }, }); mermaid.run({ querySelector: '.mermaid-pan-zoom', postRenderCallback: (id) => { const svgElement = document.getElementById(id); // Initialize Panzoom const panzoom = Panzoom(svgElement, { cursor: 'grab', // Change the cursor style }); svgElement.addEventListener('wheel', function(event) { if (!event.shiftKey) return panzoom.zoomWithWheel(event) }) document.querySelectorAll(".panzoom-reset").forEach(function (button) { button.addEventListener("click", function () { panzoom.reset(); }); }); } }); {% endif %} // plotly doesn't properly resize on page load, so trigger responsive event triggerResize(); })(); ``` ---------------------------------------- TITLE: General Web Page Styling DESCRIPTION: Provides fundamental CSS rules for web page layout and component presentation, including overflow handling, hiding specific elements, bolding summaries, centering footers, and styling markdown list items. SOURCE: https://github.com/darenr/report_creator/blob/main/report_creator/templates/default.html#_snippet_1 LANGUAGE: CSS CODE: ``` overflow-x: auto; white-space: nowrap; border: none; .component-description { font-size: 0.8em; color: var(--text-muted); } details report-caption { /* don't show the caption label within an accodion */ display: none; } summary { font-weight: bold; } footer { text-align: center; padding: 3px; } .markdown-wrapper li.task-list-item { list-style-type: none; margin-left: -1.5em; } ``` ---------------------------------------- TITLE: CSS Styles for Randomized Animated Heading DESCRIPTION: Defines the visual layout, initial hidden state of words, and the keyframe animation for fading in and sliding up. It sets up the container, heading, and individual word styles, including button styling. SOURCE: https://github.com/darenr/report_creator/blob/main/ideas/animated-heading-random.html#_snippet_0 LANGUAGE: CSS CODE: ``` body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f9f9f9; } .heading-container { overflow: hidden; text-align: center; } .heading { font-size: 3rem; color: #333; margin: 0; } .word { display: inline-block; opacity: 0; transform: translateY(20px); } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } button { margin-top: 40px; padding: 10px 20px; font-size: 16px; background-color: #4285f4; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #3367d6; } ``` ---------------------------------------- TITLE: JavaScript Functions for Random Word Animation DESCRIPTION: Provides functions to generate random numbers, animate a heading by applying random speeds and delays to its words, and initialize the animation on page load and button click. It also demonstrates how to use custom text for the heading. SOURCE: https://github.com/darenr/report_creator/blob/main/ideas/animated-heading-random.html#_snippet_1 LANGUAGE: JavaScript CODE: ``` // Function to get a random number between min and max function getRandomValue(min, max) { return Math.random() * (max - min) + min; } // Function to animate heading with random intervals function animateHeadingRandom(selector, customText = null) { const heading = document.querySelector(selector); // If custom text is provided, replace the heading content if (customText) { heading.innerHTML = ''; const words = customText.split(' '); words.forEach(word => { const span = document.createElement('span'); span.textContent = word + ' '; span.className = 'word'; heading.appendChild(span); }); } // Get all word spans const wordSpans = heading.querySelectorAll('.word'); // Reset any existing animations wordSpans.forEach(span => { span.style.opacity = '0'; span.style.transform = 'translateY(20px)'; span.style.animation = 'none'; }); // Force reflow to ensure animation reset void heading.offsetWidth; // Apply random animations to each word wordSpans.forEach(span => { const speed = getRandomValue(0.5, 1.0); const delay = getRandomValue(0.0, 0.75); // Apply the animation span.style.animation = `fadeIn ${speed.toFixed(2)}s ease-out ${delay.toFixed(2)}s forwards`; }); } // Run the animation when the page loads document.addEventListener('DOMContentLoaded', function() { animateHeadingRandom('.heading'); // Add button click handler to re-animate document.getElementById('animate-btn').addEventListener('click', function() { animateHeadingRandom('.heading'); }); }); // Example of how to use with custom text: // animateHeadingRandom('.heading', 'This is a custom animated heading'); ``` ---------------------------------------- TITLE: Dynamic Tab Content Management DESCRIPTION: Implements a tabbed interface by dynamically showing and hiding content sections based on user interaction. It manages the visibility of tab panes and the active state of tab buttons, ensuring only the selected tab's content is displayed. A resize event is triggered after tab switching to accommodate layout changes. SOURCE: https://github.com/darenr/report_creator/blob/main/report_creator/templates/default.html#_snippet_3 LANGUAGE: JavaScript CODE: ``` function openTab(evt, tabName, tableIndex) { // Declare variables var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them tabcontent = document.querySelectorAll( '.tabcontent\[data-group-id="' + tableIndex + '"\]' ); // Hide all tab contents for the specified table index for (i = 0; i < tabcontent.length; i++) { tabcontent\[i\].classList.add('offscreen'); } // Get all elements with class="tablinks" and remove the class "active" tablinks = document.querySelectorAll( '.tablinks\[data-group-id="' + tableIndex + '"\]' ); for (i = 0; i < tablinks.length; i++) { tablinks\[i\].classList.remove("active"); } // Show the current tab, and add an "active" class to the button that opened the tab for (i = 0; i < tabcontent.length; i++) { if (tabcontent\[i\].getAttribute('data-tab-name') == tabName && tabcontent\[i\].getAttribute('data-group-id') == tableIndex) { tabcontent\[i\].classList.remove('offscreen'); } } evt.currentTarget.classList.add("active"); triggerResize(); } ``` ---------------------------------------- TITLE: Core CSS Styling for Report Creator UI DESCRIPTION: This CSS defines the visual presentation and layout for various components within the Report Creator application. It includes global typography settings, responsive design rules, styling for structural elements like headers, metrics, and tabbed interfaces, and utility classes for common UI patterns. SOURCE: https://github.com/darenr/report_creator/blob/main/report_creator/templates/default.html#_snippet_0 LANGUAGE: CSS CODE: ``` :root { --focus: {{accent_color}}; --button-hover: black; } html { font-smooth: auto !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } body { max-width: 95%; font-family: "Ariana Grande", "Helvetica Neue", sans-serif; font-size: 1.1em; } hr { width: 100%; /* Full width, fixes issue with flex container */ } /* Styles for desktop (90% width) */ @media (min-width: 768px) { body { max-width: 90%; } } input:disabled { opacity: unset; } details { background-color: var(--background-body); margin: 0; } .collapse { display: block; width: inherit; } summary { background-color: var(--background-body); margin-left: -20px !important; } blockquote { background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.75em 10px; } blockquote:before { color: #ccc; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; } blockquote p { display: inline; } block { display: flex; flex-wrap: wrap; flex-direction: column; min-width: 0; width: 100%; flex-wrap: nowrap; } block-component { display: flex; flex-direction: column; padding: 10px; flex: 1; align-items: stretch; } .group { display: flex; flex-wrap: wrap; gap: 1em; } .group > * { flex: 1 1 300px; } div.round-bordered { border: 1px solid var(--border); border-radius: 0.75rem; padding: 20px; } .metric { padding: 10px; padding-left: 25px; border: 1px solid var(--border); border-radius: 0.75rem; height: 100%; width: 100%; box-sizing: border-box; } .metric h1 { font-size: 3.5rem; margin-top: 3px; margin-bottom: 3px; word-wrap: break-word; word-break: break-word; } .metric p { color: var(--text-main); margin-top: 0; } .block-bordered { border-left: 10px solid var(--focus) !important; padding-left: 15px !important; } header { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row; flex-wrap: wrap; align-content: stretch; gap: 25px; } header .header-text { display: flex; flex-direction: column; } header .header-text h1 { font-size: 4rem; } header .letter-icon { display: flex; flex-direction: column; } report-caption { display: block; margin-top: 0.75em; margin-bottom: 1.2em; font-size: 2em; font-weight: bold; border-left: 5px solid var(--focus); padding-left: 15px; } report-caption a { color: var(--text-bright); } report-text { margin-top: 0.5em; margin-bottom: 1.5em; font-size: 1.1em; } caption { margin-top: 0.5em; margin-bottom: 1em; font-size: 1.5em; font-weight: bold; border-left: 5px solid var(--focus); padding-left: 15px; } select:not([multiple]):not([size]) { /* this selector targets standard, single-select dropdown lists */ padding-right: 1.5rem; background-repeat: no-repeat; background-position: right 0.75rem center; -moz-appearance: none; -webkit-appearance: none; appearance: none; } .tab { overflow: hidden; border-bottom: 3px solid var(--button-hover); } .tab button { font-weight: normal; background: var(--background-body) !important; color: var(--text-muted); float: left; cursor: pointer; transition: 0.1s; margin: 0 !important; border-radius: 0; border: none; outline: none; box-shadow: none !important; } .tab button:hover { color: var(--text-bright); } .tab button.active { background: var(--button-hover) !important; color: white; border-top-right-radius: 0.25em; border-top-left-radius: 0.25em; } .tabcontent { width: 100%; border: 0.5px solid var(--border); box-sizing: border-box; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; padding: 20px; } .offscreen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media print { .offscreen { display: none; } } .indented-text-block { text-indent: 20px; } .diagram-block { flex: 1; box-sizing: border-box; } .diagram-block figure { margin: 0 !important; } .image-block { flex: 1; box-sizing: border-box; } .image-block figure { margin: 0 !important; } .image-block img { /* height: 500px; */ object-fit: scale-down; } div.markdown-wrapper { flex: 1; } .rounded { border-radius: 0.75rem; } div.markdown-wrapper pre { white-space: pre-wrap; } .remove-all-styles { all: unset; display: block; } div.dt-search input { all: unset; } div.dt-layout-cell caption { border: unset; padding: unset; font-size: unset; } table.dataTable tbody tr { font-weight: normal; } .code-block { height: 100%; box-sizing: border-box; position: relative; } .code-block-label { position: absolute; box-sizing: border-box; top: 0; right: 0;; padding: 5px 10px; border-radius: 0 0.75rem 0 0.75rem; overflow: hidden; } .code-block pre { white-space: pre-wrap; word-wrap: break-word; box-sizing: border-box; margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 0.75rem; } .report-widget { width: 100%; } .report-widget table { display: block; max-width: -moz-fit-content; max-width: fit-content; o ``` ---------------------------------------- TITLE: Trigger Window Resize Event DESCRIPTION: Dispatches a custom 'resize' event on the global window object. This function is crucial for forcing responsive UI components and libraries (e.g., Plotly) to re-evaluate and adjust their dimensions, ensuring proper rendering after dynamic content changes. SOURCE: https://github.com/darenr/report_creator/blob/main/report_creator/templates/default.html#_snippet_2 LANGUAGE: JavaScript CODE: ``` function triggerResize() { window.dispatchEvent(new Event("resize")); } ```