import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas as pd
import mysql.connector
from sqlite3 import Error
conn = mysql.connector.connect(
host='localhost',
user='root',
password='aparna',
database='vehicledata1'
)
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
meta_tags = [{'name': 'viewport', 'content': 'width=device-width, initial-scale=1'}]
cursor = conn.cursor()
cursor.execute("SHOW TABLES")
tables = [table[0] for table in cursor.fetchall()]
app.layout = html.Div([
html.H1('Dashboard'),
html.Div(
className='container',
children=[
html.Div(
className='table-container',
children=[
html.Div(
className='table-radio-buttons',
children=[
dcc.RadioItems(
id='table-selection',
options=[{'label': table, 'value': table} for table in tables],
value=tables[0] if tables else None,
)
]
)
]
),
html.Div(
id='card-container',
className='card-container',
children=[
html.Div(id='card', className='card')
]
)
]
)
])
@app.callback(
Output('card', 'children'),
Input('table-selection', 'value')
)
def update_card(table_name):
if not table_name:
return ''
query = f"SELECT * FROM {table_name}"
cursor.execute(query)
data = cursor.fetchall()
df = pd.DataFrame(data, columns=[col[0] for col in cursor.description])
df = df[(df['IGN'] == 'On') & (df['GPS'] == 'On')]
df2 = df.drop_duplicates(subset=['Odometer'])
df1 = df2[df2['Odometer'] != 0]
df1["Odometer"] = df1["Odometer"].diff()
df3 = df1.groupby(df1.date_time.dt.date)['Odometer'].sum()
result = df3.sum() / len(df3) * 0.001
formatted_num = "{:.2f}".format(result)
card_content = html.Div(
className="result-card",
children=[
html.H4("Average Km/day", className="card-title"),
html.H3(formatted_num, className="card-value")
]
)
return card_content
if __name__ == '__main__':
app.run_server(debug=True, port=5656)
i have this code iam new to dash frame work iam unable to arrange the div elements this is the response iam getting
i want to arrange my table container to left end side how to do it here is my css file
.wrapper {
margin: 0 auto;
padding: 20px;
}
.card {
background-color: #f2f2f2;
border-radius: 5px;
padding: 15px;
width: 200px;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.table-container {
display: flex;
flex-direction: column;
}
.table-radio-buttons {
width: 20rem;
}
body {
font-family: sans-serif;
}
h2, h3, h4, h5, h6 {
color: hotpink;
}
.container {
display: flex;
justify-content: flex-start;
}
.card-container {
margin-left: 100px;
}
.result-card {
margin-bottom: 30px;
}