import dash from dash import dcc, html app = dash.Dash(__name__) app.layout = html.Div([ # ========== ヘッダー ========== html.Div([ html.H1(‘売上ダッシュボード’, style={‘color’: ‘white’, ‘margin’: ‘0’}), ], style={ ‘backgroundColor’: ‘#0068B7’, ‘padding’: ’20px’, ‘textAlign’: ‘center’ }), # ========== フィルターエリア ========== html.Div([ # 地域選択 html.Div([ html.Label(‘地域:’, style={‘fontWeight’: ‘bold’}), dcc.Dropdown( id=’region’, options=[ {‘label’: ‘全国’, ‘value’: ‘all’}, {‘label’: ‘関東’, ‘value’: ‘kanto’}, {‘label’: ‘関西’, ‘value’: ‘kansai’} ], value=’all’, style={‘width’: ‘200px’} ) ], style={‘display’: ‘inline-block’, ‘marginRight’: ’20px’}), # 期間選択 html.Div([ html.Label(‘期間:’, style={‘fontWeight’: ‘bold’}), dcc.DatePickerRange( id=’date-range’, start_date=’2024-01-01′, end_date=’2024-12-31′ ) ], style={‘display’: ‘inline-block’}) ], style={‘padding’: ’20px’, ‘backgroundColor’: ‘#f8f9fa’}), # ========== グラフエリア ========== html.Div([ # 左側: 売上推移 html.Div([ dcc.Graph(id=’sales-graph’) ], style={‘width’: ‘60%’, ‘display’: ‘inline-block’}), # 右側: カテゴリ別 html.Div([ dcc.Graph(id=’category-graph’) ], style={‘width’: ‘40%’, ‘display’: ‘inline-block’}) ]) ]) if __name__ == ‘__main__’: app.run_server(debug=True)

from dash import Dash, dcc, html, Input, Output import plotly.graph_objects as go app = Dash(__name__) app.layout = html.Div([ html.H1(‘商品別売上グラフ’, style={‘textAlign’: ‘center’}), dcc.Dropdown( id=’dropdown’, options=[ {‘label’: ‘商品A’, ‘value’: ‘A’}, {‘label’: ‘商品B’, ‘value’: ‘B’}, {‘label’: ‘商品C’, ‘value’: ‘C’} ], value=’A’, style={‘width’: ‘200px’, ‘margin’: ’20px auto’} ), dcc.Graph(id=’graph’) ]) @app.callback( Output(‘graph’, ‘figure’), Input(‘dropdown’, ‘value’) ) def update_graph(selected): # 商品ごとのデータ data = { ‘A’: [10, 15, 13, 17, 20], ‘B’: [16, 12, 18, 14, 22], ‘C’: [8, 11, 14, 16, 19] } # グラフ作成 fig = go.Figure() fig.add_trace(go.Bar( x=[‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’], y=data[selected], marker_color=’#0068B7′ )) fig.update_layout( title=f’商品{selected}の月別売上’, xaxis_title=’月’, yaxis_title=’売上（万円）’ ) return fig if __name__ == ‘__main__’: app.run_server(debug=True)

from dash import Dash, dcc, html, Input, Output import plotly.graph_objects as go app = Dash(__name__) app.layout = html.Div([ html.H1(‘売上ダッシュボード’, style={‘textAlign’: ‘center’}), # フィルター html.Div([ html.Label(‘商品:’), dcc.Dropdown( id=’dropdown’, options=[ {‘label’: ‘商品A’, ‘value’: ‘A’}, {‘label’: ‘商品B’, ‘value’: ‘B’} ], value=’A’, style={‘width’: ‘150px’, ‘display’: ‘inline-block’} ), html.Label(‘目標:’, style={‘marginLeft’: ’20px’}), dcc.Slider( id=’slider’, min=0, max=30, step=5, value=15, marks={0: ‘0’, 15: ’15’, 30: ’30’} ) ], style={‘padding’: ’20px’}), # グラフ dcc.Graph(id=’graph’), # テキスト html.Div(id=’text’, style={‘padding’: ’20px’, ‘fontSize’: ’18px’}) ]) @app.callback( [Output(‘graph’, ‘figure’), Output(‘text’, ‘children’)], [Input(‘dropdown’, ‘value’), Input(‘slider’, ‘value’)] ) def update_dashboard(product, target): # データ data = { ‘A’: [10, 15, 13, 17], ‘B’: [16, 12, 18, 14] } values = data[product] # グラフ作成 fig = go.Figure() fig.add_trace(go.Bar( x=[‘1月’, ‘2月’, ‘3月’, ‘4月’], y=values, marker_color=’#0068B7′ )) # 目標線を追加 fig.add_hline(y=target, line_dash=’dash’, line_color=’red’, annotation_text=f’目標: {target}’) fig.update_layout(title=f’商品{product}の売上’) # テキスト作成 avg = sum(values) / len(values) status = ‘達成’ if avg >= target else ‘未達’ text = f’商品{product}の平均売上: {avg:.1f}万円（目標{target}万円、{status}）’ return fig, text if __name__ == ‘__main__’: app.run_server(debug=True)

from dash import Dash, dcc, html, Input, Output, State app = Dash(__name__) app.layout = html.Div([ html.H1(‘検索アプリ’, style={‘textAlign’: ‘center’}), html.Div([ dcc.Input( id=’search-input’, type=’text’, placeholder=’検索ワードを入力…’, style={‘width’: ‘300px’, ‘padding’: ’10px’, ‘fontSize’: ’16px’} ), html.Button( ‘検索’, id=’search-button’, style={ ‘marginLeft’: ’10px’, ‘padding’: ’10px 20px’, ‘backgroundColor’: ‘#0068B7’, ‘color’: ‘white’, ‘border’: ‘none’, ‘cursor’: ‘pointer’ } ) ], style={‘textAlign’: ‘center’, ‘padding’: ’20px’}), html.Div( id=’search-result’, style={‘textAlign’: ‘center’, ‘fontSize’: ’18px’, ‘padding’: ’20px’} ) ]) @app.callback( Output(‘search-result’, ‘children’), Input(‘search-button’, ‘n_clicks’), State(‘search-input’, ‘value’) ) def search(n_clicks, search_term): # ボタンがクリックされていない場合 if n_clicks is None or n_clicks == 0: return ‘検索ワードを入力して「検索」ボタンをクリックしてください’ # 検索ワードが空の場合 if not search_term: return ‘検索ワードを入力してください’ # 検索結果を表示 return f’「{search_term}」の検索結果: {n_clicks}件見つかりました’ if __name__ == ‘__main__’: app.run_server(debug=True)

import streamlit as st import pandas as pd import plotly.graph_objects as go # ========== タイトル ========== st.title(‘🚀 売上ダッシュボード’) st.write(‘Streamlitで作成したダッシュボードです’) # ========== サイドバー ========== st.sidebar.header(‘フィルター’) region = st.sidebar.selectbox( ‘地域を選択’, [‘全国’, ‘関東’, ‘関西’, ‘中部’] ) threshold = st.sidebar.slider( ‘目標売上（万円）’, min_value=0, max_value=200, value=100 ) # ========== データ ========== df = pd.DataFrame({ ‘月’: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’], ‘売上’: [80, 95, 110, 105, 120, 130] }) # ========== メトリクス ========== st.subheader(‘📊 KPI’) col1, col2, col3 = st.columns(3) col1.metric(‘合計売上’, f'{df[“売上”].sum()}万円’, ‘+15%’) col2.metric(‘平均売上’, f'{df[“売上”].mean():.0f}万円’, ‘+8%’) col3.metric(‘最高売上’, f'{df[“売上”].max()}万円’) # ========== グラフ ========== st.subheader(‘📈 月別売上推移’) fig = go.Figure() fig.add_trace(go.Bar(x=df[‘月’], y=df[‘売上’], marker_color=’#0068B7′)) fig.add_hline(y=threshold, line_dash=’dash’, line_color=’red’, annotation_text=f’目標: {threshold}万円’) fig.update_layout(xaxis_title=’月’, yaxis_title=’売上（万円）’) st.plotly_chart(fig, use_container_width=True) # ========== データテーブル ========== st.subheader(‘📋 データテーブル’) st.dataframe(df, use_container_width=True) # ========== フッター ========== st.info(f’選択された地域: {region}’)

from dash import Dash, dcc, html, Input, Output import plotly.graph_objects as go from datetime import datetime import random app = Dash(__name__) app.layout = html.Div([ html.H1(‘リアルタイムダッシュボード’, style={‘textAlign’: ‘center’}), # 自動更新トリガー（1秒ごと） dcc.Interval( id=’interval’, interval=1000, # 1000ミリ秒 = 1秒 n_intervals=0 ), # 現在時刻 html.Div(id=’time’, style={ ‘textAlign’: ‘center’, ‘fontSize’: ’24px’, ‘padding’: ’20px’ }), # グラフ dcc.Graph(id=’graph’) ]) # データを保持するリスト（実際のアプリではデータベースから取得） values = [] @app.callback( [Output(‘time’, ‘children’), Output(‘graph’, ‘figure’)], Input(‘interval’, ‘n_intervals’) ) def update(n): # 現在時刻 now = datetime.now().strftime(‘%Y-%m-%d %H:%M:%S’) # 新しいデータを追加（実際はセンサーやAPIから取得） values.append(random.randint(50, 100)) # 最新20件のみ保持 if len(values) > 20: values.pop(0) # グラフ作成 fig = go.Figure() fig.add_trace(go.Scatter( y=values, mode=’lines+markers’, line=dict(color=’#0068B7′, width=2), marker=dict(size=8) )) fig.update_layout( title=’リアルタイムデータ’, xaxis_title=’時間’, yaxis_title=’値’, yaxis=dict(range=[0, 120]) ) return f’現在時刻: {now}’, fig if __name__ == ‘__main__’: app.run_server(debug=True)