dcc.Dropdown( id='model', options=[{'label': 'Cluster', 'value': 1},{'label': 'Random Forest', 'value': 2}], value=2, ), ], width=3, ), dbc.Col( [ html.H2("Student Data"), html.H3("GPA"), daq.GraduatedBar(id='student_gpa', color={"gradient":True,"ranges":{"red":[0,6],"yellow":[6,8],"green":[8,10]}}, showCurrentValue=True, value=10 ), html.Br(), html.H3("Factors"), dcc.Graph(id='student_graph'), html.Br(), html.H2("Prediction"), dbc.Container([dbc.Row([ dbc.Col([ daq.Gauge(id='risk-gauge', showCurrentValue=True, color={"gradient":True,"ranges":{"red":[0,0.4],"yellow":[0.4,0.7],"green":[0.7,1]}}, label="Risk", max=1, min=0,
'width': '30%', 'display': 'inline-block' }), ####################################### Next Line ############################# html.Div(children=''' Data Quality Review. '''), ####################################### Next Line ############################# html.Div([ daq.GraduatedBar(id='GraduatedBar-quality_count', color={ "gradient": True, "ranges": { "green": [90, 100], "yellow": [70, 80], "red": [0, 60] } }, showCurrentValue=True, max=100, value=10) ], style={ 'width': '20%', 'display': 'inline-block' }), html.Div([ daq.LEDDisplay(id='LED-quality_count', labelPosition='top', label='Cover daily measures', size=32,
id="info-container", className="six columns", children=[ html.Div( id="info1", className="six columns", style={'width': '30%'}, children=[ html.Div(children=''' Общая нагрузка '''), daq.GraduatedBar( id='my-daq-graduatedbar', value=4 ) ], ), html.Div( id="info2", className="six columns", style={'width': '10%', }, children=[ html.Div(children=''' Температура '''), build_graph_title('13 C'),
def get_slice(lista, orchestra, custom_id='', initial_chord=''): dummy_fft_size = 22048 def help(topic): return html.Div( html.Details([ html.Summary('?', className='button'), html.Div(get_help.help(topic)) ])) def target_and_orchestration(list_of_instruments): # list_of_instruments: instrument, technique, dynamics, note, target, on/off S = np.ones(dummy_fft_size) + 70 orchestration_sum = np.zeros(44100) target_sum = np.zeros(44100) peaks_o = [] peaks_t = [] masking_curves_o = [] masking_curves_t = [] orch_mfcc_array = np.array(np.zeros(12)) targ_mfcc_array = np.array(np.zeros(12)) min_orch_note = 120 min_target_note = 120 t_cents = [] o_cents = [] inst_idx_number = 0 orchestration_indexes = [] for instrument in list_of_instruments: if instrument[-1] == 1: #If instrument is set "on" if instrument[-2] == 0: #if orchestration #odata=orchestra[instrument[0]][instrument[1]][instrument[2]][instrument[3]]['data'] #orchestration_sum = orchestration_sum+orchestra[instrument[0]][instrument[1]][instrument[2]][instrument[3]]['data'] orch_mfcc_array = np.vstack([ orch_mfcc_array, orchestra[instrument[0]] [instrument[1]][instrument[2]][instrument[3]]['mfcc'] ]) o_cents.append(orchestra[instrument[0]][instrument[1]][ instrument[2]][instrument[3]]['centroid']) pks = orchestra[instrument[0]][instrument[1]][ instrument[2]][instrument[3]]['peaks'] peaks_o = combine_peaks.combine_peaks( peaks_o, [pks[0], pks[1]] ) #orchestra[instrument[0]][instrument[1]][instrument[2]][instrument[3]]['peaks']) masking_curves_o.append( maskingCurve_peakInput.maskingCurve(S, pks)) #Make a list of orchestration instrument indexes for masking calculation: orchestration_indexes.append(inst_idx_number) if instrument[3] < min_orch_note: min_orch_note = instrument[3] if instrument[-2] == 1: #if target #tdata=orchestra[instrument[0]][instrument[1]][instrument[2]][instrument[3]]['data'] #target_sum = target_sum+orchestra[instrument[0]][instrument[1]][instrument[2]][instrument[3]]['data'] t_cents.append(orchestra[instrument[0]][instrument[1]][ instrument[2]][instrument[3]]['centroid']) targ_mfcc_array = np.vstack([ targ_mfcc_array, orchestra[instrument[0]] [instrument[1]][instrument[2]][instrument[3]]['mfcc'] ]) pks = orchestra[instrument[0]][instrument[1]][ instrument[2]][instrument[3]]['peaks'] peaks_t = combine_peaks.combine_peaks( peaks_t, [pks[0], pks[1]] ) #orchestra[instrument[0]][instrument[1]][instrument[2]][instrument[3]]['peaks']) masking_curves_t.append( maskingCurve_peakInput.maskingCurve(S, pks)) if instrument[3] < min_target_note: min_target_note = instrument[3] inst_idx_number += 1 sums = [orchestration_sum + 70, target_sum + 70] #print(masking_curves_o) tgt = True if peaks_t == []: tgt = False orch_mfcc_array = np.delete( orch_mfcc_array, 0, axis=0) #Poistetaan nollat alusta häiritsemästä orch_mfcc = np.mean(orch_mfcc_array, axis=0) o_cents = np.mean(o_cents) min_notes = [min_orch_note, 0] targ_mfcc = [] if tgt: min_notes = [min_orch_note, min_target_note] targ_mfcc_array = np.delete(targ_mfcc_array, 0, axis=0) targ_mfcc = np.mean(targ_mfcc_array, axis=0) t_cents = np.mean(t_cents) return sums, min_notes, orch_mfcc_array, [peaks_o, peaks_t], [ orch_mfcc, targ_mfcc ], [o_cents, t_cents], [masking_curves_o, masking_curves_t], orchestration_indexes from chord import maskingCurve_peakInput from chord import maskingCurve from helpers import constants from helpers import get_fft def get_features(data, peaks, min_note, mfccs, cents): result = dict() S = np.ones(dummy_fft_size) + 70 result["spectrum"] = S try: masking_threshold = maskingCurve_peakInput.maskingCurve( S, peaks) #Calculate the masking curve except: print("Masking calculation fail, using flat masking curve") masking_threshold = np.ones(106) result['masking_locs'] = constants.threshold[:, 0] result['masking_threshold'] = masking_threshold #print("masking calculated") #mfcc_data, centroid = MFCC.custom_mfcc(data) #Calculate mfcc and spectral centroid result['mfcc'] = mfccs #mfcc_data result['centroid'] = cents #centroid #print("mfcc calculated") #LpcLocs, LpcFreqs = lpc_coeffs.lpc_coeffs(data) #calculate LPC-frequency response #result['lpc_locs']=LpcLocs #result['lpc_threshold']=LpcFreqs #locs, peaks = findPeaks.peaks(S, min_note) result['peak_locs'] = peaks[0] result['peaks'] = peaks[1] #print("lpc calculated") return result sums, min_notes, orch_mfcc_array, peaks, mean_mffcs, mean_cents, masking_lists, orchestration_indexes = target_and_orchestration( lista ) #Returns sums list with 2 elements: [orchestration target], peaks [orch, tar] orchestration = get_features(sums[0], peaks[0], min_notes[0], mean_mffcs[0], mean_cents[0]) tgt = True if mean_cents[1] == []: tgt = False if tgt: target = get_features(sums[1], peaks[1], min_notes[1], mean_mffcs[1], mean_cents[1]) else: result = dict() result['masking_locs'] = constants.threshold[:, 0] result['masking_threshold'] = np.ones(106) #print("masking calculated") #mfcc_data, centroid = MFCC.custom_mfcc(data) #Calculate mfcc and spectral centroid result['mfcc'] = orchestration['mfcc'] result['spectrum'] = np.ones(44100) result['centroid'] = 0 #print("mfcc calculated") #LpcLocs, LpcFreqs = lpc_coeffs.lpc_coeffs(data) #calculate LPC-frequency response #result['lpc_locs']=LpcLocs #result['lpc_threshold']=LpcFreqs #locs, peaks = findPeaks.peaks(S, min_note) result['peak_locs'] = [] result['peaks'] = [] target = result fig_layout = { 'plot_bgcolor': plot_color, 'paper_bgcolor': paper_color, 'font': { 'color': 'white' }, 'xaxis': { 'title': 'Frequency in Hz', 'type': 'log', 'rangeslider': { 'visible': True }, 'rangeselector': { 'visible': True, 'buttons': [{ 'step': 'all' }, { 'step': 'day' }, { 'step': 'hour' }] }, 'showgrid': False, #'range': [1, 1.5], }, "title": "Masking curve", 'yaxis': { 'title': 'dB (SPL)', 'showgrid': False, 'zeroline': False }, 'dragmode': 'pan', #'grid': {'rows': 1, 'columns': 2}, #"height": '99vh', # view height } fig_layout2 = { 'plot_bgcolor': plot_color, 'paper_bgcolor': paper_color, 'font': { 'color': 'white' }, "title": "Centroids", 'yaxis': { 'title': 'Frequency in Hz' }, } fig_layout3 = { 'plot_bgcolor': plot_color, 'paper_bgcolor': paper_color, 'font': { 'color': 'white' }, "title": "Orchestration and target mfcc:s", 'yaxis': { 'title': 'MFCCs' }, } fig_layout4 = { 'plot_bgcolor': plot_color, 'paper_bgcolor': paper_color, 'font': { 'color': 'white' }, 'xaxis': { 'title': '' }, "title": "Mfcc vectors", 'yaxis': { 'title': 'mfcc values' }, } audibility_layout = { 'plot_bgcolor': plot_color, 'paper_bgcolor': paper_color, 'font': { 'color': 'white' }, "title": "Audibility of the target", } dark_layout = { 'plot_bgcolor': plot_color, 'paper_bgcolor': paper_color, 'font': { 'color': 'white' }, } fig_config = {'displayModeBar': False} #fig = go.Figure().add_trace(go.Scatter(x=orchestration['masking_locs'], y=orchestration['masking_threshold']), layout=fig_layout, xaxis_type="log") color = [] #Tässä interpoloidaan maskauskäyrän välit vastaamaan targetin huippuja: hearing_target_list = target['peaks'] - np.interp( target['peak_locs'], orchestration['masking_locs'], orchestration['masking_threshold']) #print(hearing_target_list) idx_above = target['peaks'] > np.interp(target['peak_locs'], orchestration['masking_locs'], orchestration['masking_threshold']) indexes_above = 0 for i in range(len(idx_above)): if idx_above[i]: color.append(1) indexes_above += 1 else: color.append(0) #Käyrän alla punainen rasti, käyrän yllä vihreä rasti: colorscale = [[0, 'red'], [1.0, 'green']] output_masking_order_idx = [] if tgt and indexes_above < len(target['peaks'] / 2): for i in range(len(masking_lists[0])): #!! Find the 15 loudest peaks for target, subtract them from orchestration: tgt_peaks = heapq.nlargest( 15, range(len(target['masking_threshold'])), key=target['masking_threshold'].__getitem__) masking_lists[0][i] = np.subtract( masking_lists[0][i][tgt_peaks], np.array(target['masking_threshold'])[tgt_peaks]) masking_lists[0][i] = np.sum(masking_lists[0][i][0:40]) masking_order_idx = heapq.nlargest(len(masking_lists[0]), range(len(masking_lists[0])), key=masking_lists[0].__getitem__) masking_order = [] output_masking_order_idx = [] for id in masking_order_idx: masking_order.append(lista[orchestration_indexes[id]]) output_masking_order_idx.append(orchestration_indexes[id]) trace1 = { "mode": "markers", "type": "scatter", "x": target['peak_locs'], "y": target['peaks'], "name": "Audible peaks", "marker": { 'symbol': 'x', 'size': 12, 'color': color, 'colorscale': colorscale, 'line': { 'width': 0 } }, #Tässä laitetaan eri väriset rastit kuuluvuuden mukaan "line": { 'color': 'Green', 'width': 5 }, } #Build stems for peaks peak_stems_x = [] peak_stems_y = [] for i in range(len(target['peak_locs'])): peak_stems_x.append(target['peak_locs'][i] - 10) peak_stems_y.append(-30) peak_stems_x.append(target['peak_locs'][i]) peak_stems_y.append(target['peaks'][i]) peak_stems_x.append(target['peak_locs'][i] + 10) peak_stems_y.append(-30) peak_stems_x.append(None) peak_stems_y.append(None) stem_trace = { "mode": "lines", "type": "scatter", "x": peak_stems_x, "y": peak_stems_y, "line": { 'color': 'Grey', 'width': 4 }, "opacity": 0.7, "showlegend": False, } trace2 = { "mode": "lines", "type": "scatter", "x": orchestration['masking_locs'], "y": orchestration['masking_threshold'], "name": "masked area", "line": { 'color': 'orange', 'width': 0 }, "fill": "tonexty" } trace3 = { "showlegend": False, "mode": "lines", "type": "scatter", "x": orchestration['masking_locs'], "y": np.zeros(106) - 30, 'line': { 'width': 0 } } trace4 = { "type": "bar", "x": ['orchestration', 'target'], "y": [orchestration['centroid'], target['centroid']] } cv = lambda x: np.std(x) / np.mean(x) var = np.apply_along_axis(cv, axis=0, arr=orch_mfcc_array) var_coeff = np.mean(abs(var)) trace5 = { "type": "bar", "x": [ 'Target mfcc distance to orch.', 'Orchestration variation coefficient' ], "y": [ np.linalg.norm(orchestration['mfcc'][1:] - target['mfcc'][1:]), var_coeff ] } mfcc_distance = np.linalg.norm(orchestration['mfcc'][1:] - target['mfcc'][1:]) distance = { 'mode': "gauge+number", "type": "indicator", 'value': mfcc_distance, 'domain': { 'x': [0, 1], 'y': [0, 1] }, 'title': { 'text': "Target mfcc distance" } } mfcc_vector_trace1 = { "mode": "lines", "type": "scatter", "y": orchestration['mfcc'][1:], "name": "orchestration mfcc vector", "line": { 'color': 'yellow' }, } mfcc_vector_trace2 = { "mode": "lines", "type": "scatter", "y": target['mfcc'][1:], "name": "target mfcc vector", "line": { 'color': 'purple' }, "fill": "tonexty", "fillcolor": "grey" } def generate_barks(): xx = [] yy = [] for f in constants.barks: xx = [*xx, *[f, f, None]] yy = [*yy, *[100, -20, None]] xx[-1] = [] yy[-1] = [] return xx, yy xx, yy = generate_barks() vertical_line = { "mode": "lines", "type": "scatter", "x": xx, "y": yy, "opacity": 0.3, "name": "Critical bands" } hearing_threshold = { "mode": "lines", "type": "scatter", "x": constants.threshold[:, 0], "y": constants.threshold[:, 2], "opacity": 0.7, "name": "Hearing threshold", "line": { "dash": "dash", "color": "red" }, } spect = target['spectrum'] spect[spect < -30] = -30 spec_trace = { "mode": "lines", "type": "scatter", "x": np.arange(19919)[86:], "y": target['spectrum'][86:19919], "opacity": 0.1, "name": "spectrum" } audibility = { 'mode': "gauge+number", "type": "indicator", 'value': 270, 'domain': { 'x': [0, 1], 'y': [0, 1] }, 'title': { 'text': "Audibility" } } if np.count_nonzero(idx_above == True) == 0: masking_percent = 100 else: masking_percent = 100 - 100 * (np.count_nonzero(idx_above == True) / len(idx_above)) #print(masking_percent) def inline(graph): return html.Div(graph, style={'display': 'inline-block'}) if orchestration['centroid'] > (target['centroid'] + 200): brightness = "The orchestration is brighter than target." elif (target['centroid'] - 200) <= orchestration['centroid'] <= (target['centroid'] + 200): brightness = "The orchestration and target are about equal bright." elif orchestration['centroid'] < (target['centroid'] - 200): brightness = "The target is brighter than orchestration." if mfcc_distance < 20: color_distance = "The orchestration and the target have about same sound color." elif 20 <= mfcc_distance <= 70: color_distance = "The target sound color differs from orchestration slightly." elif mfcc_distance >= 70: color_distance = "The target sound has differrent sound color than orchestration." masker = '' if tgt and indexes_above < len(target['peaks'] / 2): masker = "The heaviest masker is {} playing {}.".format( masking_order[0][0], masking_order[0][2]) if masking_order[0][2] == 'p': masker += ' Concider changing the register of {}, or revise the orchestration.'.format( masking_order[0][0]) else: masker += ' Concider lowering dynamics of {}, or increase dynamics of target.'.format( masking_order[0][0]) if len(masking_order) > 1: masker += " The second heaviest masker is {} playing {}.".format( masking_order[1][0], masking_order[1][2]) if len(masking_order) > 2: masker += " The third heaviest masker is {} playing {}.".format( masking_order[2][0], masking_order[2][2]) fig1 = go.Figure( data=[ trace1, trace3, trace2, vertical_line, hearing_threshold, stem_trace ], layout=fig_layout ) #Removing spectrum increase screen update, so, this is out: spec_trace fig2 = go.Figure(data=[trace4], layout=fig_layout2) fig3 = go.Figure(data=[trace5], layout=fig_layout3) distance = go.Figure(data=[distance], layout=dark_layout) #print(mfcc_vector_trace1) mfcc_fig = go.Figure(data=[mfcc_vector_trace1, mfcc_vector_trace2], layout=fig_layout4) audibility = go.Figure(data=audibility, layout=audibility_layout) #fig = go.Figure(data=[go.Scatter(x=orchestration['masking_locs'], y=orchestration['masking_threshold'])], layout=fig_layout) def make_box(content, width): return dac.Box([dac.BoxBody(content)], width=width) masking_graph = make_box( html.Div(className='masking', children=[ html.Div( dcc.Graph(id='masking-graph{}'.format(custom_id), figure=fig1, config=fig_config), ) ]), 12), gauge_graph = html.Div( className='gauge', children=[ #dcc.Graph(id='audibility', figure=audibility, config=fig_config), daq.GraduatedBar(vertical=True, value=masking_percent, max=100, step=1, style={'color': 'black'}, showCurrentValue=True, color={ "gradient": True, "ranges": { "green": [0, 50], "yellow": [50, 90], "red": [90, 100] } }, label={ 'label': '% of target peaks masked', 'style': { 'color': 'white' } }) ]), summary_graph = dac.Box([ dac.BoxHeader( title='Summary:', collapsible=False, style={'height': 50}), dac.BoxBody( html.Div( className='teksti', children=[ html.Div( "There are {} target peaks above the masking threshold." .format(np.count_nonzero(idx_above == True)) + " " + brightness + " " + color_distance + " " + masker), ], style={'textAlign': 'center'})) ], width=12), mfcc_graph = html.Div(className='mfcc', children=[ html.Div( dcc.Graph( id='mfcc-vector{}'.format(custom_id), figure=mfcc_fig, config=fig_config, style={'height': 300})), html.Div(id='place{}'.format(custom_id)) ]), centroid_graph = make_box( html.Div(className='bar1', children=[ html.Div([ dcc.Graph(id='centroid-graph{}'.format(custom_id), figure=fig2, config=fig_config, style={'height': 240}) ]), ]), 12), #This is made-up value, distances are approx up to 250 mfcc_distance_value = mfcc_distance / 250 * 100 distance_graph = html.Div( className='bar2', children=[ #html.Div([dcc.Graph(id='distance-graph', figure=distance, config=fig_config)]), daq.GraduatedBar( vertical=True, value=mfcc_distance_value, max=100, step=1, id='distance-graph{}'.format(custom_id), style={'color': 'black'}, #showCurrentValue=True, color={ "gradient": True, "ranges": { "green": [0, 50], "yellow": [50, 90], "red": [90, 100] } }, label={ 'label': 'Target color distance from orchestration', 'style': { 'color': 'white' } }) ]), hom_val = (2 - var_coeff) / 2 * 100 var_coeff_graph = html.Div( className='bar3', children=[ #html.Div([dcc.Graph(id='varcoeff-graph', figure=fig3, config=fig_config)]), daq.GraduatedBar(vertical=True, value=hom_val, max=100, step=1, style={ 'color': 'black', 'textAlign': 'center' }, showCurrentValue=True, color={ "gradient": True, "ranges": { "grey": [0, 50], "green": [50, 100] } }, label={ 'label': 'Homogenuity % of orchestration', 'style': { 'color': 'white' } }) ]), Analyze_graph = html.Div([ dbc.Row([ #dbc.Col([summary_graph[0], centroid_graph[0]], width=3), dbc.Col(masking_graph, width=12) ]), dbc.Row([ dbc.Col(make_box( dbc.Row([ dbc.Col(gauge_graph[0]), dbc.Col(distance_graph[0]), dbc.Col(var_coeff_graph[0]), ]), 12), width=6), dbc.Col(make_box(mfcc_graph[0], 12), width=6), ]) ]) return orchestration, target, Analyze_graph, summary_graph[ 0], output_masking_order_idx
def uk_ozone(): ## Get the sites availble from the DEFRA AURN network site_regions = LoadData.AURN_regions() region_choices = ['All'] + site_regions region_options = [{'label': i.strip(), 'value': i.strip()} for i in region_choices] site_envs = LoadData.AURN_environment_types() env_choices = ['All'] + site_envs env_options = [{'label': i.strip(), 'value': i.strip()} for i in env_choices] #### Start the page layout page_layout = html.Div(id = 'full_page_container', children = ### The first items are for the common attributes (ie site) [ html.Div(className = 'page-header', children = [ html.Div(id = 'home-logo-holder', children = [html.A(id = 'home-logo', href="/")]), html.Div(id = 'page-header-holder', children = [html.A('UK Atmosphere',id = "page-header-text", href = "/")]), ]), html.Div(className = 'page-body',children = [ html.H3('Analysis for UK ozone from DEFRA AURN sites.'), html.Br(), html.Label('Select a region:'), dcc.Dropdown(id = 'o3_region_choice', multi = True, options = region_options, value = 'All'), html.Br(), html.Label('Select an environment type:'), dcc.Dropdown(id = 'o3_env_choice', multi = True, options = env_options, value = 'All'), html.Br(), html.Label('Select a range of years:'), dcc.Dropdown( id = 'o3_minimum_year', placeholder = 'Select start year...', value = 2000 ), html.P('To'), dcc.Dropdown( id = 'o3_maximum_year', placeholder = 'Select end year...', ), html.Br(), daq.BooleanSwitch(id = 'o3_site_open', on = False, label = 'Only use sites currently open', labelPosition = 'top'), html.Br(), html.Button('Find Ozone Data', id = 'o3_go_button'), html.Br(), html.Br(), dcc.Loading(id="o3_meta_data_load", children=[ html.Div(id = 'o3_meta_data_text')],type="dot"), html.Hr(), html.Button('Load Ozone Data', id = 'o3_load_button'),# disabled = True), html.Hr(), html.Div(id = 'o3_data_values_holder',children = [ daq.GraduatedBar(id = 'o3_load_bar', size = 500, # max = 100, value = 0, showCurrentValue=True), html.Div(id = 'o3_dataframe-holder'), dcc.Interval(id = 'Interval',interval = 500), dcc.Store(id = 'load_id_store'), html.Div(id = 'loaded_sites2'), html.Div(id = 'tester_output')]), ### Create a div to place the dataframe while its being used but not ### viewable by the user. Make data Json - very slow when being read html.Div(id = 'o3_metadata-holder', style = {'display': 'none'}), ### ************************** Site Count *************************** html.Div(id = 'O3_SiteCountHolder', className = 'plot_holder', children = [ dcc.Loading(id="loading-sitecount", children=[ html.Div(id = 'O3_SiteCountPlot')],type="dot", className = 'main_plot'), html.Div(id = 'O3_SiteCountTools', className = 'plot_tools', children = [ html.H3('Site Count Plot Tools:'), html.Br(), html.Label('Plot Title'), dcc.Input( id = 'O3_SiteCountTitle', placeholder = 'Enter Title', value = ''), html.Br(), html.Br(), html.Label('Spliy by:'), dcc.RadioItems(id = 'Site_Count_Split', options = [{'label': i, 'value': i} for i in ['Total', 'Environment Type','Region',]], value = 'Total'), html.Br(), ]), ]), html.Hr(), html.Br(), html.Label(), dcc.RadioItems(id = 'O3_Env_or_Regions', options = [{'label': i, 'value': i} for i in ['Environment Type', 'Region']], value = 'Environment Type', labelStyle={'display': 'inline-block'}), ### Each placeholder for plots and their individual controls go below ### ************************** TimeSeries *************************** html.Div(id = 'O3_TimeSeriesHolder', className = 'plot_holder', children = [ html.Div(id = 'O3_TimeSeries', className = 'main_plot'), html.Div(id = 'TimeSeriesTools', className = 'plot_tools', children = [ html.H3('Time Series Tools:'), html.Br(), html.Label('Plot Title'), dcc.Input( id = 'O3_TimeSeriesTitle', placeholder = 'Enter Title', value = ''), html.Br(), html.Label('X Axis Label'), dcc.Input( id = 'O3_TimeSeriesXTitle', placeholder = 'Enter X axis label', value = 'Year'), html.Br(), html.Label('Y Axis Label'), dcc.Input( id = 'O3_TimeSeriesYTitle', placeholder = 'Enter Y axis label', value = ''), html.Br(), dcc.RadioItems(id = 'O3_TimeSeriesLabelFormat', options = [{'label': i, 'value': i} for i in ['Variable Name', 'Chemical Formula',]], value = 'Variable Name'), html.Br(), html.Label('Value Type'), dcc.RadioItems(id = 'O3_ValueType', options = [{'label': i, 'value': i} for i in ['Annual Mean', 'Annual Maximum','Annual Minimum']], value = 'Annual Mean'), html.Br(), html.Label('Line Type'), dcc.RadioItems(id = 'O3_TimeSeriesLineOrScatter', options = [{'label': i, 'value': i} for i in ['Scatter', 'Line', 'Line & Scatter']], value = 'Line & Scatter', ), ]) ]), html.Hr(), ### ********************* Trend Table ********************************* html.Div(id = 'o3_trend_table'), html.Hr(), ### ********************* Gamma plot ********************************* html.Div(id = 'O3_Gamma_Plot_Holder', className = 'plot_holder', children = [ html.Div(id = 'O3_Gamma_Plot', className = 'main_plot'), html.Div(id = 'O3_GammaTools', className = 'plot_tools', children = [ html.H3('Gamma Plot Tools:'), html.Br(), html.Label('Plot Title'), dcc.Input( id = 'O3_GammaTitle', placeholder = 'Enter Title', value = ''), html.Br(), ]), ]), html.Hr(), ### ********************* YearlyExceed ********************************* html.Div(id = 'O3_YearlyExceedHolder', className = 'plot_holder', children = [ html.Div(id = 'O3_YearlyExceed',className = 'main_plot'), # html.Div(id = 'Correlation', className = 'main_plot'), html.Div(id = 'O3_YearlyExceedTools', className = 'plot_tools', children = [ html.H3('Yearly Exceedance Tools:'), html.Br(), html.Label('Plot Title'), dcc.Input( id = 'O3_YearlyExceedTitle', placeholder = 'Enter Title', value = ''), html.Br(), ]), ]), html.Hr(), ### ********************* Yearly siteExceed ********************************* html.Div(id = 'O3_YearlySiteExceedHolder', className = 'plot_holder', children = [ html.Div(id = 'O3_YearlySiteExceed',className = 'main_plot'), # html.Div(id = 'Correlation', className = 'main_plot'), html.Div(id = 'O3_YearlySiteExceedTools', className = 'plot_tools', children = [ html.H3('Yearly Site Exceedance Tools:'), html.Br(), html.Label('Plot Title'), dcc.Input( id = 'O3_YearlySiteExceedTitle', placeholder = 'Enter Title', value = ''), html.Br(), ]), ]), html.Hr(), ### ********************* MonthlyExceed ********************************* html.Div(id = 'O3_MonthlyExceedHolder', className = 'plot_holder', children = [ html.Div(id = 'O3_MonthlyExceed', className = 'main_plot'), # html.Div(id = 'DiurnalCycle', className = 'main_plot'), html.Div(id = 'O3_MonthlyExceedTools', className = 'plot_tools', children = [ html.H3('Monthly Exceedance Tools:'), html.Br(), html.Label('Plot Title'), dcc.Input( id = 'O3_MonthlyExceedTitle', placeholder = 'Enter Title', value = ''), html.Br(), ]), ]), html.Hr(), ### ******************* WeeklyExceed *************************** html.Div(id = 'O3_WeeklyExceedHolder', className = 'plot_holder', children = [ html.Div(id = 'O3_WeeklyExceed',className = 'main_plot'), # html.Div(id = 'HourlyBoxplots', className = 'main_plot'), html.Div(id = 'O3_WeeklyExceedTools', className = 'plot_tools', children = [ html.H3('Weekly Exceedance Tools:'), html.Br(), html.Label('Plot Title'), dcc.Input( id = 'O3_WeeklyExceedTitle', placeholder = 'Enter Title', value = ''), html.Br(), ]), ]), html.Br(), html.Hr(), ### ********************* ExceedMap ********************************* html.Div(id = 'ExceedMapHolder', className = 'plot_holder', children = [ html.Div(id = 'O3_ExceedMap', className = 'main_plot'), # html.Div(id = 'WeeklyCycle', className = 'main_plot'), html.Div(id = 'O3_ExceedMapTools', className = 'plot_tools', children = [ html.H3('Exceedance Map Tools:'), html.Br(), html.Label('Plot Title'), dcc.Input( id = 'O3_ExceedMapTitle', placeholder = 'Enter Title', value = ''), html.Br(), ]), ]), html.Hr(), ])]) return page_layout
GraduatedBar = html.Div(children=[ html.H1('Graduated bar Examples and Reference'), html.Hr(), html.H3('Default Graduated bar'), reusable_components.Markdown("An example of a default Graduated bar without \ any extra properties."), reusable_components.Markdown( examples['graduated-bar'][0], style=styles.code_container ), html.Div( examples['graduated-bar'][1], className='example-container', style={'overflow-x': 'initial'} ), html.Hr(), html.H3('Orientation'), reusable_components.Markdown("Change the orientation of the bar to vertical `vertical=True`."), ComponentBlock('''import dash_daq as daq daq.GraduatedBar( vertical=True, value=10 )''', style=styles.code_container), html.Hr(), html.H3('Size'), reusable_components.Markdown("Manually adjust the size of the bar in pixels with `size`."), ComponentBlock('''import dash_daq as daq daq.GraduatedBar( size=200, value=10 )''', style=styles.code_container), html.Hr(), html.H3('Max'), reusable_components.Markdown("Manually set a maximum value with `max`."), ComponentBlock('''import dash_daq as daq daq.GraduatedBar( max=100, value=50 )''', style=styles.code_container), html.Hr(), html.H3('Step'), reusable_components.Markdown("Manually set the step size of each bar with `step`."), ComponentBlock('''import dash_daq as daq daq.GraduatedBar( step=2, max=100, value=50 )''', style=styles.code_container), html.Hr(), html.H3('Show Current Value'), reusable_components.Markdown("Display the current value of the graduated bar with `showCurrentValue=True`."), ComponentBlock('''import dash_daq as daq daq.GraduatedBar( showCurrentValue=True, max=100, value=38 )''', style=styles.code_container), html.Hr(), html.H3('Color Range'), reusable_components.Markdown("Set a color range with: \ \n `color={'ranges':{'<color>':[<value>, <value>],'<color>':[<value>, <value>],'<color>':[<value>, <value>]}}`"), ComponentBlock('''import dash_daq as daq daq.GraduatedBar( color={"ranges":{"green":[0,4],"yellow":[4,7],"red":[7,10]}}, showCurrentValue=True, value=10 )''', style=styles.code_container), html.Hr(), html.H3('Color Gradient'), reusable_components.Markdown("Set a color gradient with: \ \n `color={'gradient':True,'ranges':{'<color>':[<value>, <value>],'<color>':[<value>, <value>],'<color>':[<value>, <value>]}}`"), ComponentBlock('''import dash_daq as daq daq.GraduatedBar( color={"gradient":True,"ranges":{"green":[0,4],"yellow":[4,7],"red":[7,10]}}, showCurrentValue=True, value=10 )''', style=styles.code_container), html.Hr(), html.H3("Graduated Bar Properties"), generate_prop_info('GraduatedBar', lib=daq) ])
def generate_metric_row_helper(stopped_interval, index): item = params[index] div_id = item + suffix_row button_id = item + suffix_button_id sparkline_graph_id = item + suffix_sparkline_graph count_id = item + suffix_count ooc_percentage_id = item + suffix_ooc_n ooc_graph_id = item + suffix_ooc_g indicator_id = item + suffix_indicator return generate_metric_row( div_id, None, { "id": item, "className": "metric-row-button-text", "children": html.Button( id=button_id, className="metric-row-button", children=item, title="Click to visualize live SPC chart", n_clicks=0, ), }, { "id": count_id, "children": "0" }, { "id": item + "_sparkline", "children": dcc.Graph( id=sparkline_graph_id, style={ "width": "100%", "height": "95%" }, config={ "staticPlot": False, "editable": False, "displayModeBar": False, }, figure=go.Figure({ "data": [{ "x": state_dict["Batch"]["data"].tolist() [:stopped_interval], "y": state_dict[item]["data"][:stopped_interval], "mode": "lines+markers", "name": item, "line": { "color": "#f4d44d" }, }], "layout": { "uirevision": True, "margin": dict(l=0, r=0, t=4, b=4, pad=0), "xaxis": dict( showline=False, showgrid=False, zeroline=False, showticklabels=False, ), "yaxis": dict( showline=False, showgrid=False, zeroline=False, showticklabels=False, ), "paper_bgcolor": "rgba(0,0,0,0)", "plot_bgcolor": "rgba(0,0,0,0)", }, }), ), }, { "id": ooc_percentage_id, "children": "0.00%" }, { "id": ooc_graph_id + "_container", "children": daq.GraduatedBar( id=ooc_graph_id, color={ "ranges": { "#92e0d3": [0, 3], "#f4d44d ": [3, 7], "#f45060": [7, 15], } }, showCurrentValue=False, max=15, value=0, ), }, { "id": item + "_pf", "children": daq.Indicator( id=indicator_id, value=True, color="#91dfd2", size=12), }, )
units="Kelvin", showCurrentValue=True, color="#303030", ) ], n_clicks=0, ) fuel_indicator = html.Div( id="control-panel-fuel", children=[ daq.GraduatedBar( id="control-panel-fuel-component", label="Fuel Level", min=0, max=100, value=76, step=1, showCurrentValue=True, color="#fec036", ) ], n_clicks=0, ) battery_indicator = html.Div( id="control-panel-battery", children=[ daq.GraduatedBar( id="control-panel-battery-component", label="Battery-Level", min=0,
dcc.Tab(label='Quick Overview', children=[ daq.Gauge(id='vs-gauge', max=100, min=0, units='MPH', showCurrentValue=True, label='Vehicle Speed'), html.H3("Throttle Position"), daq.GraduatedBar( id='overview_tps_grad_bar', color={ "gradient": True, "ranges": { "green": [0, 80], "yellow": [80, 90], "red": [90, 100] } }, showCurrentValue=True, size=1000, max=100, ) ]), dcc.Tab(label="All Sensors", children=[ html.H4("Front Left Wheel Speed"), daq.GraduatedBar( id='fl_vss_grad_bar', color={ "gradient": True, "ranges": {
daq.ToggleSwitch(id='darktheme-daq-toggleswitch', className='dark-theme-control'), html.Br(), daq.ColorPicker(value=17, id='darktheme-daq-colorpicker', className='dark-theme-control'), html.Br(), daq.Gauge(min=0, max=10, value=6, color=theme['primary'], id='darktheme-daq-gauge', className='dark-theme-control'), html.Br(), daq.GraduatedBar(value=4, color=theme['primary'], id='darktheme-daq-graduatedbar', className='dark-theme-control'), html.Br(), daq.Indicator(value=True, color=theme['primary'], id='darktheme-daq-indicator', className='dark-theme-control'), html.Br(), daq.Knob(min=0, max=10, value=6, id='darktheme-daq-knob', className='dark-theme-control'), html.Br(), daq.LEDDisplay(value="3.14159", color=theme['primary'],
import dash_daq as daq import dash_html_components as html from pyotp import TOTP default_secret = 'JHCO GO7V CER3 EJ4L' update_interval = 2 layout = html.Div( id='container', children=[ html.H1('000 000', id='totp_token'), daq.GraduatedBar( id='remaining_bar', max=28, step=2, value=28, size=200 ), html.Hr(), html.Label("TOTP Secret"), dcc.Input( id='totp_secret', type='text', placeholder='Enter TOTP Secret...', value=default_secret ), dcc.Interval( id='interval', interval=update_interval * 1000, n_intervals=0,
]), html.Div(className='indicator-box', children=[ html.H4('Time to completion (hours)'), daq.Gauge( id='time-to-completion', min=0, max=10, showCurrentValue=True, color='blue' ) ]), html.Div(className='indicator-box', children=[ html.H4('Substance levels'), daq.GraduatedBar( id='precursor-levels', min=0, max=100, step=5, color='blue', label='Precursor' ), daq.GraduatedBar( id='reagent-levels', min=0, max=100, step=5, color='blue', label='Reagent' ), daq.GraduatedBar( id='catalyst-levels', min=0, max=100, step=5, color='blue',
def progress(p): return daq.GraduatedBar(value=p / 10)
min=0, max=500, value=290, units='Kelvin', showCurrentValue=True, color='#303030') ], n_clicks=0) fuel_indicator = html.Div(id='control-panel-fuel', children=[ daq.GraduatedBar( id='control-panel-fuel-component', label='Fuel Level', min=0, max=100, value=76, step=1, showCurrentValue=True, color='#303030', ) ], n_clicks=0) battery_indicator = html.Div(id='control-panel-battery', children=[ daq.GraduatedBar( id='control-panel-battery-component', label='Battery-Level', min=0, max=100, value=85,
html.H5(id='total-valor-adiciones-text', className="valor-text"), ], ), html.Div( id='valor-contrato2', children=[ html.H4(id='vc3', children=" Porcentaje promedio de similitud"), daq.GraduatedBar( id='ooc_graph_id', color={ "gradient": True, "ranges": { "red": [0, 7], "yellow": [7, 9], "green": [9, 10], } }, showCurrentValue=True, max=10, value=0, ), ], ), html.Div( id='valor-contrato3', children=[ html.H4(id='vc4', children=" Cantidad de contratos"), html.H5(id='total-cantidad-text', className="valor-text"), ],
html.H1(id='Category', style={ 'color': 'rgba(255,255,255,1)', 'display': 'inline-block' }), html.H1('A', style={ 'color': 'rgba(0,0,0,0)', 'display': 'inline-block' }), daq.GraduatedBar(id='conf-indicator', color={ "ranges": { "rgba(255,0,0,0.6)": [0, 3], "rgba(255,255,0,0.6)": [3, 7], "rgba(69,161,99,0.6)": [7, 10] } }, showCurrentValue=True, label="Confidence %", style={'display': 'inline-block'}) ], style={ 'display': 'flex', 'justify-content': 'center' }), #Hidden division to store image classfications: html.Div(id='Prediction', style={'display': 'none'}), html.Div(id='Confidence', style={'display': 'none'}), ])
value=0, ), ],className="col s6 m4 l4"), ],className="row"), ],className="col s6 m5 l3"),#Tamaño Leds html.Div([ html.Div([ html.Div([ html.Div([html.Div(children='Tanque'), daq.GraduatedBar( id='tanque_bar', step=2, color={"gradient":True,"ranges":{"green":[0,80],"yellow":[80,150],"red":[150,200]}}, showCurrentValue=True, min=0, max=200, value=0, size=None, ) ],className="col s12 m12 l12"), html.Div([html.Div(children='Zoom'), dcc.Slider( id='slider_1', min=0, max=20, step=5, value=0, updatemode='drag',
on=False, size=100, color="red", ), dcc.Interval(id="daq-interval", interval=1000, n_intervals=0), ]), # ➍ 計器を並べる html.Div( [ html.Div( [html.H2("ゲージ"), daq.Gauge(id="guage1")], className="three columns", ), html.Div( [html.H2("グラデュエートバー"), daq.GraduatedBar(id="guage2")], className="three columns", ), html.Div( [html.H2("タンク"), daq.Tank(id="guage3")], className="three columns", ), html.Div( [html.H2("LEDディスプレイ"), daq.LEDDisplay(id="guage4")], className="three columns", ), ], style={"margin": "auto"}, ), ])
def generate_metric_row_helper(path, index): df = read_csv(path) state_dict = init_df(path) params = list(df) item = params[index] div_id = item + suffix_row button_id = item + suffix_button_id sparkline_graph_id = item + suffix_sparkline_graph count_id = item + suffix_count ooc_percentage_id = item + suffix_ooc_n ooc_graph_id = item + suffix_ooc_g indec = np.where(state_dict[item]["data"] == 1)[0] x_array = state_dict["second"]["data"].tolist() y_array = state_dict[item]["data"].tolist() max_x = max(x_array) x_array = [x_array[i] for i in indec] y_array = [y_array[i] for i in indec] ooc_percentage_f = sum(state_dict[item]["data"]) / len( state_dict[item]["data"]) * 100 ooc_percentage_str = "%.2f" % ooc_percentage_f + "%" count_value = sum(state_dict[item]["data"]) if ooc_percentage_f == 0.0: ooc_grad_val = 0.00001 else: ooc_grad_val = float( sum(state_dict[item]["data"]) * 15 / len(state_dict[item]["data"])) return generate_metric_row( div_id, None, { "id": item, "className": "metric-row-button-text", "children": html.Button( id=button_id, className="metric-row-button", children=item, title="Click to visualize live SPC chart", n_clicks=0, ), }, { "id": count_id, "children": count_value }, { "id": item + "_sparkline", "children": dcc.Graph( id=sparkline_graph_id, style={ "width": "100%", "height": "95%" }, config={ "staticPlot": False, "editable": False, "displayModeBar": False, }, figure=go.Figure({ "data": [{ "x": x_array, "y": y_array, "mode": "markers", #+markers", "name": item, "line": { "color": "#f4d44d" }, }], "layout": { "uirevision": True, "margin": dict(l=0, r=0, t=4, b=4, pad=0), "xaxis": dict(showline=False, showgrid=False, zeroline=False, showticklabels=False, range=[0, max_x]), "yaxis": dict( showline=False, showgrid=False, zeroline=False, showticklabels=False, ), "paper_bgcolor": "rgba(0,0,0,0)", "plot_bgcolor": "rgba(0,0,0,0)", }, }), ), }, { "id": ooc_percentage_id, "children": ooc_percentage_str }, { "id": ooc_graph_id + "_container", "children": daq.GraduatedBar( id=ooc_graph_id, color={"ranges": { "#33C3F0": [0, 15] }}, showCurrentValue=False, max=15, value=ooc_grad_val, ), }, )
'borderRadius': '3%', 'background': '#EEFFDD' }), # Dash DAQ html.Div([ html.H3('Dash DAQ', style=compTitle), html.Div([ daq.GraduatedBar(id='bar1', vertical=True, color={ "gradient": True, "ranges": { "green": [0, 8], "yellow": [8, 14], "red": [14, 20] } }, size=500, style={ 'display': 'inline-block', 'margin': '5%' }), daq.GraduatedBar(id='bar2', vertical=True, color={ "gradient": True, "ranges": { "green": [0, 8], "yellow": [8, 14], "red": [14, 20]
def Trending_Projects(df_donations_id, df_latest): df_details = df_latest.set_index("id") df_pivot = pd.pivot_table(df_donations_id, index='id', columns='downloaded_at', values='donated_amount_in_euro', aggfunc='first') df_pivot = df_pivot.dropna() no_columns = len(df_pivot.columns) time_delta = df_pivot.columns[no_columns - 1] - df_pivot.columns[no_columns - 2] time_delta = time_delta.days + (time_delta.seconds / 60 / 60 / 24) df_trending = df_pivot.iloc[:, no_columns - 1] - df_pivot.iloc[:, no_columns - 2] df_trending = df_trending.sort_values(ascending=False) df_trending = df_trending.head(5) list_trends = [] for id in list(df_trending.index): dict_trend = { "title": df_details.at[id, "title"], "summary": df_details.at[id, "summary"], "carrier_name": df_details.at[id, "carrier_name"], "donated_amount_in_euro": df_details.at[id, "donated_amount_in_euro"], "progress_percentage": df_details.at[id, "progress_percentage"], "open_amount_in_cents": df_details.at[id, "open_amount_in_cents"], "country": df_details.at[id, "country"], "donations_per_day": df_trending.loc[id] / time_delta } dict_trend["links"] = "https://www.betterplace.org/de/projects/" + str( id) profile_pictures = df_details.at[id, "profile_picture"] dict_trend["profile_picture"] = profile_pictures["links"][3]["href"] list_trends.append(dict_trend) Cards = [] Cards.append(html.H4("Trending projects:")) for p in list_trends: Card = dbc.Card( [ #dbc.CardHeader(html.B(p["title"], className="card-title")), dbc.CardImg(src=p["profile_picture"], top=True), dbc.CardBody([ html.B(html.A(p["title"], href=p["links"]), className="card-title"), html.P(p["summary"], className="card-text"), ]), dbc.CardFooter([ html.P("Carrier: {}".format(p["carrier_name"])), html.P("Collected Donations: {}€".format( int(p["donated_amount_in_euro"]))), html.P("Donations per day: {}€".format( int(p["donations_per_day"]))), daq.GraduatedBar(showCurrentValue=True, max=100, step=2, value=p["progress_percentage"]) ]) ], style={"width": "100%"}, className="mb-3", outline=True, #color="dark", #inverse=True ) Cards.append(Card) return html.Div(Cards)
daq.Gauge( id='gauge2', min=0, max=10, value=0, className='dark-theme-control' ), html.Div('Activation leadtime (days #)', className='h4 mb-0 text-center text-light'), ] ) graduate1Layout = html.Div( [ daq.GraduatedBar( id='graduate1', value=0, className='dark-theme-control' ), html.Br(), html.Div('Activation %', className='h4 mb-4 text-center text-light'), ] ) graduate2Layout = html.Div( [ daq.GraduatedBar( id='graduate2', value=0, className='dark-theme-control' ), html.Br(),