import dash
import dash_cytoscape as cyto
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    cyto.Cytoscape(
        id='cytoscape-two-nodes',
        layout={'name': 'preset'},
        style={'width': '100%', 'height': '400px'},
        elements=[
            {'data': {'id': 'one', 'label': 'Node 1'}, 'position': {'x': 75, 'y': 75}},
            {'data': {'id': 'two', 'label': 'Node 2'}, 'position': {'x': 200, 'y': 200}},
            {'data': {'source': 'one', 'target': 'two'}}
        ]
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.ToggleSwitch(
        id='my-toggle-switch',
        value=False
    ),
    html.Br(),
    html.Div(id='my-toggle-switch-output')
])

@app.callback(
    Output('my-toggle-switch-output', 'children'),
    Input('my-toggle-switch', 'value')
)
def update_output(value):
    return 'The switch is {}.'.format(value)

if __name__ == '__main__':
    app.run_server(debug=True)

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.Thermometer(
        id='my-thermometer-1',
        value=5,
        min=0,
        max=10,
        style={
            'margin-bottom': '5%'
        }
    ),
    html.Br(),
    dcc.Slider(
        id='thermometer-slider-1',
        value=5,
        min=0,
        max=10,

    ),
])

@app.callback(
    Output('my-thermometer-1', 'value'),
    Input('thermometer-slider-1', 'value')
)
def update_thermometer(value):
    return value

if __name__ == '__main__':
    app.run_server(debug=True)

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Br(),
    daq.Tank(
        id='my-tank-1',
        value=5,
        min=0,
        max=10,
        style={'margin-left': '50px'}
    ),
    html.Br(),
    dcc.Slider(
        id='tank-slider-1',
        value=5,
        min=0,
        max=10,
    ),
])

@app.callback(Output('my-tank-1', 'value'), Input('tank-slider-1', 'value'))
def update_tank(value):
    return value

if __name__ == '__main__':
    app.run_server(debug=True)

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.StopButton(
        id='my-stop-button-1',
        label='Default',
        n_clicks=0
    ),
    html.Br(),
    html.Div(id='stop-button-output-1')
])

@app.callback(
    Output('stop-button-output-1', 'children'),
    Input('my-stop-button-1', 'n_clicks')
)
def update_output(n_clicks):
    return 'The stop button has been clicked {} times.'.format(n_clicks)

if __name__ == '__main__':
    app.run_server(debug=True)

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Br(),
    daq.Slider(
        id='our-daq-slider-ex',
        value=50
    ),
    html.Br(),
    html.Div(id='slider-result')
])

@app.callback(
    Output('slider-result', 'children'),
    Input('our-daq-slider-ex', 'value')
)
def update_output(value):
    return 'The slider is currently at {}.'.format(value)

if __name__ == '__main__':
    app.run_server(debug=True)

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.PrecisionInput(
        id='our-precision',
        label='Default',
        precision=6,
        value=1234
    ),
    html.Div(id='precision-result')
])

@app.callback(
    Output('precision-result', 'children'),
    Input('our-precision', 'value')
)
def update_output(value):
    return 'The current value is {}.'.format(value)

if __name__ == '__main__':
    app.run_server(debug=True)

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.PowerButton(
        id='our-power-button',
        on=False
    ),
    html.Div(id='power-button-result')
])

@app.callback(
    Output('power-button-result', 'children'),
    Input('our-power-button', 'on')
)
def update_output(on):
    return 'The button is {}.'.format(on)

if __name__ == '__main__':
    app.run_server(debug=True)

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.NumericInput(
        id='our-numeric-input',
        value=0
    ),
    html.Div(id='numeric-input-result')
])

@app.callback(
    Output('numeric-input-result', 'children'),
    Input('our-numeric-input', 'value')
)
def update_output(value):
    return 'The value is {}.'.format(value)

if __name__ == '__main__':
    app.run_server(debug=True)