Open vks2 opened 1 week ago
Hey @vks2,
There's no need to feel sorry! 👍 Reading your questions helps us understand where people might have open questions when trying to translate Dash to Vizro, so it's really helpful for us!
Here again, custom components are the way to go 😄 If you want to add any dash component (HTML, dcc, dbc, mantine, etc.) unavailable in our library, you can always add it using custom components!
In your case, it would look like the one below. I've updated the layout in this example as well. From a visual perspective, adding text to your screen using the vm.Card might be a better solution. In this case, you also wouldn't need a custom component 👍
from typing import Literal
import vizro.models as vm
import vizro.plotly.express as px
from dash import html
from vizro import Vizro
iris = px.data.iris()
class CustomHTML(vm.VizroBaseModel):
"""New custom component `CustomHTML`."""
type: Literal["html"] = "html"
def build(self):
return html.Div(
children="""
Dash: A web application framework for Python.
"""
)
class IFrame(vm.VizroBaseModel):
"""New custom component `Iframe`."""
type: Literal["iframe"] = "iframe"
def build(self):
return html.Iframe(
src="https://www.ons.gov.uk/visualisations/dvc914/map/index.html",
style={"height": "1067px", "width": "100%"},
)
vm.Page.add_type("components", CustomHTML)
vm.Page.add_type("components", IFrame)
page = vm.Page(
title="Hello Dash",
layout=vm.Layout(grid=[[0]] +
[[1]] * 4 +
[[2]] * 4),
components=[CustomHTML(), vm.Graph(figure=px.bar(iris, x="sepal_width", y="sepal_length", color="species")), IFrame()],
)
dashboard = vm.Dashboard(pages=[page], theme="vizro_light")
Vizro().build(dashboard).run()
One thing I wanted to mention because I am unsure if it's clear, is that Vizro().build(dashboard)
returns you the Dash app object. So, there is always the possibility of appending dash components directly there as well. The limitation of this approach is that it will always append to the existing content, so with the first approach, you have better control over the layout, which I recommend using.
app = Vizro().build(dashboard)
app.dash.layout.children.append(html.Div("hello"))
app.run()
To your last question: You can add js code by creating an assets folder and inserting your js files in there, as explained here: https://vizro.readthedocs.io/en/stable/pages/user-guides/assets/
Hope that helps! 🍀
thanks much. your final note gives flexibility that i really need working with the framework. about js code - could you please provide a working example with 'console.log('hi from Vizro') on document.load? i've played around customizing css (trying to change footer, etc.) it's not so straight forward... thanks much again! even in commercial projects we often see not such a responsive support like here in mckinsey!
Hi @vks2,
Adding custom js code is very similar to adding custom css code, more information can be found on : Vizro assets docs. Any js files in the assets folder that is in the root of your app directory will be picked up automatically via the external_scripts
argument of Dash.
I hope this helps, but let me know if you have any difficulties.
Code to reproduce the example:
Add custom.js
file to the assets folder. assets/js/custom.js
Add js code to the custom.js
file: console.log('Hi from Vizro')
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
df = px.data.gapminder()
page_one = vm.Page(
title="JS example",
components=[
vm.Card(text="Using custom js script with Vizro."),
],
)
dashboard = vm.Dashboard(pages=[page_one])
if __name__ == "__main__":
Vizro().build(dashboard).run()
Question
hello!
please note, that even importing [dbc.themes.BOOTSTRAP] breaks some bootstrap overrides that vizro uses :((
thanks much and sorry for tons of questions
Code/Examples
No response
Other information
No response
Which package?
None
Package version
No response
Python version
No response
OS
No response
Code of Conduct