amoljagadale-max opened a new issue, #36794: URL: https://github.com/apache/superset/issues/36794
## Screenshot <img width="1920" height="1833" alt="Image" src="https://github.com/user-attachments/assets/0b6ad2e9-e9de-46cf-8edf-33b2b7e324e6"; /> <img width="1540" height="797" alt="Image" src="https://github.com/user-attachments/assets/18d5abc8-1afc-4002-b7bf-255d71425e01"; /> <img width="1016" height="526" alt="Image" src="https://github.com/user-attachments/assets/10837400-4d75-4664-9e0e-d779121f653b"; /> [score card - GE - EN.pdf](https://github.com/user-attachments/files/24291558/score.card.-.GE.-.EN.pdf) --- ## Description I am facing multiple UI/UX and export-related limitations while working with **Apache Superset**, specifically when trying to: * Reproduce a **Figma-based dashboard design** * Apply **Ant Design themes** * Extend **ECharts capabilities** * Export **mobile-friendly PNG/PDF reports via email** Despite trying various supported and suggested approaches, I am unable to achieve the expected results. Below are the detailed issues. --- ### Issue 1: Unable to Reproduce Figma Dashboard UI/UX (Layout & Styling Limitations) I tried to closely match the dashboard UI/UX as defined in Figma, but due to Superset’s layout and styling constraints, I am unable to reproduce it accurately. What I’ve tried: * Nested **rows and columns** * **Markdown / Text components** for layout structuring * Adjusting chart sizes, padding, and spacing * Applying **global CSS overrides** for dashboard background, chart cards, and containers Observed behavior: * Dashboard and chart cards always render with a **plain white appearance** * CSS changes for: * Background colors * Card coloring * Section grouping either do not apply or apply inconsistently * Fine-grained control (pixel-perfect alignment, grouped visual sections, rich card UI) similar to Figma seems very difficult or not achievable **Question:** Are these UI/UX limitations expected by design in Superset, or is there a recommended approach to build **design-heavy dashboards**? --- ### Issue 2: Ant Design Theme Configuration Has No Impact on Dashboards I attempted to customize the UI using **Ant Design themes** generated from the Ant Theme Editor: [https://ant.design/theme-editor](https://ant.design/theme-editor) Steps taken: * Generated Ant Design theme tokens * Applied the theme configuration in Superset * Verified that Superset internally uses Ant Design Observed behavior: * No visible changes on dashboards or charts * No impact on: * Colors * Typography * Spacing * Card appearance **Questions:** * Do Ant Design themes apply: * Per dashboard? * Per chart? * Only at application/template level? * Are Ant themes expected to affect dashboard visuals at all, or only core UI elements (menus, buttons, filters)? Currently, it appears Ant Design theming does **not** influence dashboard UI in a meaningful way. --- ### Issue 3: Limited ECharts & iFrame Embedding Errors https://echarts.apache.org/examples/en/index.html#chart-type-funnel Superset provides a limited set of built-in ECharts. To extend this, I attempted to embed custom ECharts using **iFrames inside Markdown**, based on community and GPT suggestions. I modified `config.py` with the following settings: ```python # ---- ENABLE IFRAME IN MARKDOWN ---- ALLOW_IFRAME = True ENABLE_JINJA_TEMPLATING = True HTML_SANITIZATION = True HTML_SANITIZATION_SCHEMA_EXTENSIONS = { "tagNames": ["iframe"], "attributes": { "iframe": [ "src", "width", "height", "style", "frameborder", "allow", "allowfullscreen" ] } } TALISMAN_ENABLED = False ``` Observed behavior: * Dashboards fail to render properly * iFrames are still blocked or error out * Security / sanitization-related errors appear (screenshots attached) **Questions:** * Is embedding custom ECharts via iFrame officially supported? * Are additional CSP or security settings required? * What is the recommended way to extend ECharts beyond Superset’s built-in options? --- ### Issue 4: Dashboard Export (Email Reports) Not Mobile-Friendly & Limited to Viewport I am also facing major limitations with **PNG / PDF exports via Email Reports**, especially for **mobile consumption**. #### Observed issues 1. **Minimum width limitation (~600px)** * Exported PNGs/PDFs appear to have a minimum width of ~600px * Reports are hard to read on mobile devices * Mobile-first dashboard layouts are not respected in exports 2. **Blank / dead space in exported images** * When chart data occupies a smaller area, exported images still reserve large empty space * Results in poor visual density and wasted screen space 3. **Only current viewport is captured** * If the dashboard is scrollable: * Only the visible viewport is captured * Content below the fold is missing in exports 4. **No responsive scaling for mobile** * Exports reuse desktop layout * No reflow or scaling based on device size --- #### Expected behavior Ideally, we are looking for: * Ability to export the **entire scrollable dashboard** * Control over export **width, height, resolution, or scaling** * Better handling of: * Auto-sizing charts * Removing unused blank space * Support or best practices for **mobile-friendly email reports** --- #### Questions * Is there any supported way to: * Export the **full dashboard**, not just the visible viewport? * Configure export resolution or viewport size? * Are there configuration flags related to: * Screenshot dimensions * Mobile-friendly rendering * Are these limitations known and expected with the current export engine? --- ## Design input I would appreciate guidance from: * **Superset core contributors** (platform capabilities & limitations) * **UI/UX or design contributors** (what is realistically achievable) Specifically, I’m looking for clarity on: * Whether **pixel-perfect Figma replication** is feasible in Superset * The real scope of **Ant Design theming** * Supported approaches to: * Rich UI dashboards * Custom ECharts * Mobile-friendly exports If needed, this can be treated as a **design review or design suggestion**. Thank you for your time and guidance. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
