I have a a DBC Dashboard that relies on a selected dropdown menu.
Looks Good
Dropdown options are styled appropriately
HOWEVER, once an option is selected, the dropdown goes blank without text. The other parts of the app show that the callback fired, and my selection went through...but the container always shows blank.
BLANK
RELEVANT PART OF CODE:
app = JupyterDash(external_stylesheets=[dbc.themes.DARKLY])
...
dcc.Tabs([
dcc.Tab(label='Step 1 - Adjust Parameters', selected_style=taby, style={'align':'justify-center', 'text-align':'center','font-weight': 'bold', 'fontSize': '1em', 'background-color':'lightslategrey'}, children=[
html.Div([
html.H5("Select item:"),
dcc.Dropdown(
options=[
{"label": "Item #1", "value": Thing1},
{"label": "Item #2", "value": Thing2},
{"label": "Item #3", "value": Thing3},
{"label": "Item #4", "value": Thing4}
], id='dropdown', style={'color':'black','width': '65%', 'position': 'relative'}),
I am using DASH Styles (Darkly), and have racked my brain trying to fix this. I think it is styling, but maybe the selection is not occurring like I believe.
Any ideas?
Related
I am using this chart: https://vega.github.io/vega/examples/stacked-bar-chart/
I want to show a color note for the chart below.
But I can't find a solution to apply this type of chart. Do you have any solution for this type of chart?
I found the solution, just add Legend in.
"legends": [
{
"title": "% of Obese Adults",
"orient": "right",
"type": "symbol",
"fill": "color",
"format": ".1%",
"clipHeight": 16
}
],
I am trying to conditionally color the text of a heat map in the same style black and white text on this page: Condition
I am looking specifically at the conditional color encoding:
"encoding": {
"text": {"field": "num_cars", "type": "quantitative"},
"color": {
"condition": {"test": "datum['num_cars'] < 40", "value": "black"},
"value": "white"
}
}
I can't seem to get something similar to work in Vega-Lite. My latest version looks like this:
vl.data(weatherData)
.transform(
vl.calculate("monthAbbrevFormat(month(datum.date))").as("month"),
vl.calculate("date(datum.date)").as("day"),
vl.aggregate([{op:"average",
field:"temp_max",
as:"avg_temp"
}]).groupby(["month","day"])
)
.encode(
vl.y().fieldO("month").sort(["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]),
vl.x().fieldO("day")
)
.layer(
vl.markRect({tooltip: true, clip: true})
.encode(
vl.color().average("avg_temp").scale({scheme:"redyellowblue", reverse:true})
),
vl.markText({tooltip: true, clip: true})
.encode(
vl.text().average("avg_temp").format(".1f"),
vl.color().condition({test:"datum['avg_temp'] > 26",value:"white"}).value("black")
)
)
.width(1000)
.height(400)
.render()
When I convert that to JSON, I get
"color":{
"condition":{"test":"datum['avg_temp'] > 26", "value":"white"},
"value":"black"
}
which looks the same to my eyes. However, the text resolutely stays black.
I've put the output JSON into the Vega editor, and it also doesn't work there, so the problem isn't limited to my problems with the JavaScript API. It would great if someone could point out where my logic is failing (and also fill me in on the correct syntax in the API as the documentation is sadly lacking in examples).
I figured out my problem. In an earlier version I was computing the average in the encoding. I switched to pre-computing it in the transform, and didn't update the encoding for the text. So it was still
.encode(
vl.text().average("avg_temp").format(".1f"),
vl.color().condition({test:"datum['avg_temp'] > 26",value:"white"}).value("black")
)
The average wasn't changing the values, but it meant that dataum['avg_temp'] wasn't available.
If there is a way to compute the average as part of the test, that would make this a lot cleaner, but I couldn't find a way to do that.
I am trying to show TextBlock elements on my adaptive card depending in the value selected in a ChoiceSet (radio buttons). And I am not getting it to work properly.
The ChoiceSet does not have an ActionSet integrated, so I cannot call a ToggleVisibility action on selection. Then I tried to use the selectAction Property, but neither the Input.ChoiceSet nor Input.Choice support this property.
The last approach was to use the "$when" property on the element I want to toggle and bind it to the value of the ChoiceSet. Depending on which value it has, the element should be shown or hidden. But I do not get it to work, I tried
"$when": "{damagepart=2}" but it seems that only works with some kind of data binding?!
I am not able to find a proper example of that in the decumentation or in the samples of adaptivecards.io...
Does anyone have an example or some hints on how to get this task solved?
While this can theoretically be done in Web Chat using the extensibility features of Adaptive Cards, you may also not that this feature is in the Adaptive Cards roadmap: https://portal.productboard.com/adaptivecards/1-adaptive-cards-features/c/25-client-side-update-card-upon-input-changes-or-button-presses
I made this example that might be useful for you.
The column section that contain a text box and a action hyperlink will hide and show depending on the condition or the value of the variable.
card payload editor
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "This line will visible when the condition meet:",
"wrap": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"title": "Any button you want to show"
}
]
}
]
}
],
"$when": "${$root.MatchVariableValue == \"yes\"}"
}
]
}
use the following sample on Data editor to see how the section appear and hide depending on your input/value.
{"MatchVariableValue":"yes"}
or use
"$when": "${$root.MatchVariableValue}"
if your data is as simple as
{"MatchVariableValue":true}
How can I add link in legend text in fusion chart?
I tried below code but it is adding link in chart not on legend's text:
"data": [{
"label": "Workplace Services",
"value": "24",
"color": "#81cee3",
"link": "http://google.com" // added this
}]
For adding a link to the legend you need to use FusionCharts legendItemClicked API event, to know more check this link - https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events#legenditemclicked-97
Refer this snippet - "events": {
"legendItemClicked": function(eventObj, dataObj) {
if( eventObj.data.datasetName==="Food"){
window.location.href= "https://www.fusioncharts.com/dev/";
}
}
}
I am working on a Angular 4 code where i need to create a table/grid structure UI with expanded selection and every item has radio button.
Below is the Exact UI which i want
example
and I also have below format input data in my Json file
{
"Id": 1,
"Name": "India",
"Description": "India",
"ParentId": 0,
"SubGroup": [
{
"Id": 2,
"Name": "Mumbai",
"Description": "Mumbai",
"ParentId": 1,}
]
}
Please tell me which Library i can use or how i can achieve this UI with Angular 4.
PrimeNg Tree Table Can be a good choice. Good comunity support also there.