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(),
