from dash_html_components import Div, Img, Button, H2, H1, P, Hr, A, Span, Label
from templates.wordcloud import wordloud_controls
import dash_core_components as dcc
from dash.dependencies import Input, Output, State
from app import app
from templates.wordcloud import make_word_cloud, footer
from templates.amazonIframe import amazonMusicProduct
import lorem

body = Div([
    Div([
        Div([
            H1("Copy & Paste Word Cloud Generator", className='display-4'),
            Hr(),
            P('This is the copy & paste word cloud generator. Simply copy and paste the text into the box below.'
              ),
        ],
            className='container')
    ],
        className="jumbotron jumbotron-fluid"),
    Div([
        Div([
            Div('Text Field Wordcloud', className='card-header'),
            dcc.Loading(Div([
                H2('', className='card-title'),
                Div([Img(src='', className='card-img-top', width='100%')],
                    style={'height': 500}),
            ],
                            className='card-body',
                            id='text-field-wordcloud'),
                        style={
Ejemplo n.º 2
0
def create_line_break(idx: str):
    return Hr(id=idx, style=LINE_STYLE)
Ejemplo n.º 3
0
def makeRoot_Contents():

    return Container(
        [
            Div(id='store', hidden=True),
            Modal([
                ModalHeader([
                    B('Welcome to the Global Risk Management Visualization')
                ]),
                ModalBody(
                    P([
                        B('Global risk data for everyone'),
                        P('It is frustrating when you can nott make a qualified assessment on the global risk position of a multinational corporation due to the enormous complexity of its operations. The global risk visualization addresses that challenge by offering the most intuitive options to interact with corporate risk data all in one place.'
                          ),
                        B('Valuable insights through disparate data connections'
                          ),
                        P('By connecting financial performance, global footprint, and national risk data for over 100 countries, the visualization helps you get a better sense of the political, economic and financial risks facing these organizations.'
                          ),
                        Hr(),
                        B('Target Audience:'),
                        P('Investors, Students, Corporate Legal and Researchers'
                          ),
                        Hr(),
                        B('Data Sources:'),
                        P('Yahoo Finance, PRS Global Risk Dataset, Orbis Global Footprint Dataset, and SAP Capital IQ M&A Dataset'
                          ),
                        Hr(),
                        B('Team:'),
                        P('Jay Venkata, Keith Wertsching, and Pri Nonis'),
                        Hr(),
                        Iframe(
                            src=
                            'https://zoom.us/rec/play/vJYqcu-grzM3SIWW5ASDB_IqW9W9La6sgyke8qdYyx63VSZRYVCuMuYRMAI0fIKQL0LNUUuXXcgTFVo',
                            width=1106,
                            height=650)
                    ])),
                ModalFooter(Button('Close', id='close', className='ml-auto')),
            ],
                  id='modal',
                  size='xl',
                  is_open=True),
            makeRoot_ToolsBar(),
            Row(
                [
                    Col(
                        makeCard('stock-plot', 'manda', hide=False),
                        width=12,
                    ),
                    # Col(
                    #     makeCard('table-plot', 'manda', hide = False),
                    #     width = 3
                    # ),
                ],
                className='manda'),
            Row([
                Col(makeCard('world-plot', 'risks', hide=True),
                    width=6,
                    style={'paddingRight': '0rem'}),
                Col(makeCard('total-plot', 'risks', hide=True), width=6),
            ],
                className='risks t1p'),
            Row([
                Col(makeCard('burst-plot', 'risks', hide=True),
                    width=3,
                    style={'paddingRight': '0rem'}),
                Col(makeCard('trend-plot', 'risks', hide=True), width=9),
            ],
                className='risks v1p'),
        ],
        fluid=True,
        style={})
Ejemplo n.º 4
0
def get_layout(app):
    row_0 = Div([
        H2("Upload to Database (excel file)", style={'textAlign': 'left'}),
        Upload(
            id='upload-data',
            children=Div(['Drag and Drop or ',
                          A('Select Files')]),
            style={
                'width': '100%',
                'height': '60px',
                'lineHeight': '60px',
                'borderWidth': '1px',
                'borderStyle': 'dashed',
                'borderRadius': '5px',
                'textAlign': 'center',
                'margin': '10px'
            },
            # Allow multiple files to be uploaded
            multiple=False),
        Loading(
            id="loading",
            children=[Div(id='output-data-upload')],
            type="default",
        ),
    ])
    row_1 = Div([
        Div([
            H2("Text input", style={'textAlign': 'left'}),
            RadioItems(id='radio1',
                       options=[{
                           'label': 'Partial match',
                           'value': 'PMATCH'
                       }, {
                           'label': 'Exact match',
                           'value': 'EMATCH'
                       }],
                       value='EMATCH',
                       labelStyle={
                           'display': 'inline-block',
                       }),
            Input(id="input1", type="text", placeholder="Query"),
            Br(),
            Button('Start text search', id='button')
        ],
            className='col-6'),
        Div([
            H2("Search field", style={'textAlign': 'left'}),
            RadioItems(id='radio2',
                       options=[{
                           'label': 'Chemical name',
                           'value': 'NAME'
                       }, {
                           'label': 'CAS Number',
                           'value': 'CAS'
                       }, {
                           'label': 'IASO Barcode No.',
                           'value': 'BAR'
                       }],
                       value='NAME',
                       labelStyle={
                           'display': 'inline-block',
                       }),
        ],
            className='col-6')
    ],
                className='row')
    row_2 = Div([
        Div([
            H2("Graphical search type", style={'textAlign': 'left'}),
            RadioItems(id='radio3',
                       options=[{
                           'label': 'Similarity ',
                           'value': 'SIM'
                       }, {
                           'label': 'Substructural ',
                           'value': 'SUB'
                       }, {
                           'label': 'Exact ',
                           'value': 'EX'
                       }],
                       value='SIM',
                       labelStyle={
                           'display': 'inline-block',
                       }),
            DashMarvinJS(id='editor',
                         marvin_url=app.get_asset_url('mjs/editor.html'),
                         marvin_width='100%')
        ],
            className='col-6'),
        Div([
            H2("Search results", style={'textAlign': 'left'}),
            DataTable(
                id='table',
                columns=fields1,
                fixed_rows={
                    'headers': True,
                    'data': 0
                },
                row_selectable='single',
                style_data={
                    'whiteSpace': 'normal',
                    'height': 'auto',
                    'width': 'auto'
                },
                style_table={
                    'overflowY': 'hidden',
                    'overflowX': 'hidden',
                    'margin-left': '0px'
                },
                style_cell={
                    'textAlign': 'left',
                    'padding': '5px',
                    'height': 'auto',
                    'padding-left': '17px',
                    'whiteSpace': 'normal',
                    'minWidth': '10px',
                    'maxWidth': '150px'
                },
                style_as_list_view=True,
                style_cell_conditional=[
                    {
                        'if': {
                            'column_id': 'Picture'
                        },
                        'width': '60%'
                    },
                    {
                        'if': {
                            'column_id': 'Brutto formula'
                        },
                        'width': '10%'
                    },
                    {
                        'if': {
                            'column_id': 'Chemical name'
                        },
                        'width': '15%'
                    },
                    {
                        'if': {
                            'column_id': 'CAS No.'
                        },
                        'width': '10%'
                    },
                ],
            )
        ],
            className='col-6')
    ],
                className='row')
    row_3 = DataTable(
        id='table2',
        columns=fields2,
        fixed_rows={
            'headers': True,
            'data': 0
        },
        #row_selectable='single',
        editable=True,
        row_deletable=True,
        style_data={
            'whiteSpace': 'normal',
            'height': 'auto'
        },
        style_table={
            'maxHeight': '500px',
            'overflowY': 'hidden',
            'overflowX': 'hidden',
            'margin-left': '0px'
        },
        style_cell={
            'textAlign': 'left',
            'padding': '10px',
            'padding-left': '20px',
            'height': 'auto',
            'whiteSpace': 'normal',
            'minWidth': '120px',
            'width': '150px'
        },
        #style_cell_conditional=[
        #    {'if': {'column_id': 'Quantity'},
        #     'width': '150px'},
        #   {'if': {'column_id': 'Quantity unit'},
        #     'width': '150px'},
        #],
        style_as_list_view=True)
    row_4 = Div([
        Button('Add Row', id='addrow', n_clicks=0),
        Button('Submit changes', id='submit', n_clicks=0),
        ConfirmDialog(
            id='confirm',
            message=
            'All changes will be applied from now! Are you sure you want to continue?',
        )
    ])

    layout = Div([
        H1("Chemicals Storage", style={'textAlign': 'center'}), row_0,
        Hr(), row_1,
        Hr(), row_2,
        Hr(), row_3,
        Hr(), row_4
    ])
    return layout
Ejemplo n.º 5
0
                dcc.Link(btn_text, href=btn_href, className='btn btn-primary', style={'color': 'white'})
            ], className='card-footer')
        ], className='card')

    return body

body = Div([
    Div([
        Div([
            Div([
                H1("Word Cloud World", className='display-4 text-center'),
                Img(src="/static/world.png", width="300", height="300", alt="",
                    style={'display': 'block', 'margin': '0 auto'})
            ], className=''),
            P("Welcome!", className="lead text-center"),
            Hr()
        ], className='container')
    ], className="jumbotron jumbotron-fluid", style={'background-image': '/static/world.png'}),
    Div([
        P("""Welcome to Word Cloud World! Word clouds are a creative way to visually represent textual data.
             They allow you to see the most significant or frequent words used in any body of text.
             Here at Word Cloud World we have created automated apps to visualise Wikipedia articles or Song lyrics.
             You can also create your own word cloud by cutting and pasting text or by uploading a textfile!
             You can customize your word cloud by changing its colour, shape and size.
        """),
        H5('Some Inspiration'),
        Div([
            card('/static/wiki-word-cloud.png',
                'Wikipedia', 'Create word clouds from Wikipedia articles', 'Explore!', '/wordcloud/wikipedia'),
            card('/static/lyrics.png',
                'Song Lyrics', 'Create word clouds from song lyrics', 'Explore!', '/wordcloud/lyrics')