# Code belongs to yazid - https://github.com/leberber
from dash import  Dash, dcc, html, Input, Output, clientside_callback, ClientsideFunction
import dash_mantine_components as dmc
app = Dash(__name__, external_scripts=['https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js'])
app.layout = dmc.MantineProvider(
    theme={
        "colors": {
            "myColor": [                
              "#F2FFB6",
              "#DCF97E",
              "#C3E35B",
              "#AAC944",
              "#98BC20",
              "#86AC09",
              "#78A000",
              "#668B00",
              "#547200",
              "#455D00",                
            ]
        },
    },
    children=[
        html.Button("Click me", id="button"),
        html.Div(id="emchart-container", style={"width": "800px", "height": "800px"}),  # Set dimensions
    ]
)
clientside_callback(
    ClientsideFunction(
        namespace='emChart',
        function_name='heatMap'
    ),
    Output("emchart-container", "children"),
    Input("button", "n_clicks"),
)
if __name__ == "__main__":
    app.run_server(debug=True)