import zero_true as ztimport matplotlib.pyplot as pltimport plotly.graph_objects as goimport plotlyimport ioimport base64import jsonimport pandas as pdimport warnings# Use Agg backend for Matplotlib to avoid GUI issuesplt.switch_backend('Agg')# Initialize statezt_state = zt.state()# Sample data for demonstrationdata ={'Category':['A','B','C','D'],'Values':[23,17,35,29]}df = pd.DataFrame(data)# Function to create Plotly componentdefcreate_plotly_component():# Create a sample Plotly figure plotly_fig = go.Figure(data=go.Bar(x=df['Category'], y=df['Values'])) plotly_fig.update_layout(title="Sample Plotly Bar Chart", xaxis_title="Category", yaxis_title="Values")# Serialize the Plotly figure to JSON plotly_json = json.dumps(plotly_fig, cls=plotly.utils.PlotlyJSONEncoder)# Create a PlotlyComponent sample_plotly = zt.PlotlyComponent(id="sample_plotly", figure_json=plotly_json # Serialized Plotly figure as JSON string)return sample_plotly# Create componentplotly_component = create_plotly_component()layout = plotly_component.id# Render the layoutdefrender_layout():# Assuming you have a mechanism to render or use thispassrender_layout()
The PlotlyComponent is designed to incorporate interactive Plotly graphs within web interfaces, ideal for data visualization tasks that require interactivity and detailed graphical displays. This component accepts serialized Plotly figures, allowing for dynamic and responsive data visualization solutions.
The uniqueness of each component is ensured by a validation process for component IDs, making it suitable for applications that involve multiple interactive elements. This integration capability makes it a valuable tool for scientific research, data analysis, and interactive reporting.
{"title":"PlotlyComponent","description":"Component to display a Plotly figure","type":"object","properties":{"id":{"description":"ID for the component","title":"Id","type":"string"},"variable_name":{"default":"","description":"Optional variable name associated with a component","title":"Variable Name","type":"string"},"component":{"default":"plotly-plot","description":"Vue component name for Plotly","title":"Component","type":"string"},"figure_json":{"description":"Serialized Plotly figure as JSON string","title":"Figure Json","type":"string"}},"required":["id","figure_json"]}
Bellow are the various attributes you can assign to the component. Utlizing them can allow for modifications to the pre-created object.
zero_true.Plotly
Zero True Component
field component: str = ‘plotly-plot’;
Vue component name for Plotly.
field figure_json: str [Required];
Serialized Plotly figure as JSON string.
field id: str [Required];
ID for the component.
Methods
from_figure: (figure: Figure, id: str);
Creates a PlotlyComponent instance from a Plotly figure.
to_json
to_json: Converts the component to a JSON-serializable dictionary.