I cannot figure out how to obtain the same row height for every column when using table or indexedTable in elm-ui. Is this possible (without setting a fixed height) or should I resort to implementing my own table with row and column?
The following ellie illustrates the issue.
This is the code used to build the table
bgcolor idx =
(if modBy 2 idx == 0 then
gray
else
white
)
|> Background.color
view model =
indexedTable []
{ data =
[ { f1 = "f11", f2 = "f12" }
, { f1 = "f21", f2 = "f22" }
, { f1 = "f31", f2 = "f32" }
, { f1 = "f41", f2 = "f42" }
]
, columns =
[ { header = text "f1"
, width = fill
, view = \idx d -> el [ Font.size 30, bgcolor idx ] <| text d.f1
}
, { header = text "f2"
, width = fill
, view = \idx d -> el [ Font.size 15, bgcolor idx ] <| text d.f2
}
]
}
|> layout []
Thanks in advance.
Adding height fill to each cell's attributes fixes your Ellie example:
, columns =
[ { header = text "f1"
, width = fill
, view =
\idx d ->
el
[ Font.size 30
, bgcolor idx
, height fill -- NEW!!!
]
<|
text d.f1
--
}
, { header = text "f2"
, width = fill
, view =
\idx d ->
el
[ Font.size 15
, bgcolor idx
, height fill -- NEW!!!
]
<|
text d.f2
}
]
Fixed Ellie here.
Related
For all the different plotly languages version there is an option to generate graphs with two Y axis.
Either with the use of secondary_y or yaxis2 depending on the language.
I have browsed the different examples on the Plotly.kt github but haven't found a way to do this.
Is this even possible with the Kotlin version of Plotly ?
I have tried adding two yaxis blocks, but the second one just seems to overwrite the first one.
val plot = Plotly.plot {
traces(
scatter {
x.strings = priceData.map { it.first.toString() }
y.numbers = priceData.map { it.second }
mode = ScatterMode.lines
axis("Price")
},
bar {
x.strings = volumeData.map { it.first.toString() }
y.numbers = volumeData.map { it.second }
marker {
width = 1.0
opacity = 0.4
}
axis("Volume")
}
)
layout {
title { text = "Sales"}
showlegend = false
xaxis {
type = AxisType.date
gridwidth = 2.0
}
yaxis {
type = AxisType.linear
automargin = true
gridwidth = 2.0
title = "Price"
}
yaxis {
type = AxisType.linear
showgrid = false
title = "Volume"
}
}
}
games =
[ { id = 1
, points =
[ { player_id = 1, score = 20 }
, { player_id = 2, score = 10 }
, { player_id = 3, score = 0 }
]
}
, { id = 2
, points =
[ { player_id = 1, score = 20 }
, { player_id = 2, score = 5 }
, { player_id = 3, score = 0 }
]
}
, { id = 3
, points =
[ { player_id = 1, score = 20 }
, { player_id = 2, score = 5 }
, { player_id = 3, score = 10 }
]
}
]
I have a list of 'games' records which each have a list of points for each player.
Is it possible to fold each score of each player across each game to display a 'total'.
Something like:
[ { player_id = 1, score = 60 }
, { player_id = 2, score = 20 }
, { player_id = 3, score = 10 }
]
Thanks in advance.
You need a double fold, where the key code is
main : Html msg
main =
let
go { points } acc =
let
goInner { player_id, score } accInner =
Dict.update player_id (updater score) accInner
in
List.foldl goInner acc points
in
List.foldl go Dict.empty games
|> toString
|> text
updater : Int -> Maybe Int -> Maybe Int
updater score existingVal =
existingVal
|> Maybe.withDefault 0
|> (+) score
|> Just
See [https://ellie-app.com/gq8VFfS8Ja1/0](this ellie)
This gets you the answer you want albeit in a slightly different format
I want to update my model this way:
updatedModel =
if model.firstChord && model.secondChord then
{ model | firstChord = {}, secondChord = {} }
else
model
the firstChord and the secondChord both are of the type Chord:
type alias Chord =
{ root : Maybe Pitch
, third : Maybe Pitch
, fifth : Maybe Pitch
}
The pitch type looks like:
-- pitch
type alias Pitch = ( PitchName, PitchLevel )
-- pitch name
type alias PitchName = String
-- pitch level
type alias PitchLevel = Int
My initial Model has these fields:
{ firstChord =
{ root = ( "C", 3 )
, third = ( "E", 3 )
, fifth = ( "G", 3 )
}
, secondChord =
{ root = ( "F", 3 )
, third = ( "A", 3 )
, fifth = ( "C", 4 )
}
I like to have optional pitch values.
How can I update my model giving it a value OR nothing?
Thanks.
Not quite sure what are you looking for. I guest you would like to have a Maybe Chord like this.
type Pitch =
Pitch String Int
type alias Chord =
{ root: Maybe Pitch
, third: Maybe Pitch
, fifth: Maybe Pitch
}
type alias Model =
{ firstChord: Maybe Chord
, secondChord: Maybe Chord
}
init: Model
init =
{ firstChord =
{ root = Pitch "C" 3
, third = Pitch "E" 3
, fifth = Pitch "G" 3
}
, secondChord =
{ root = Pitch "F" 3
, third = Pitch "A" 3
, fifth = Pitch "C" 4
}
}
update: Model -> Model
update model =
case (model.firstChord, model.secondChord) of
(Just first, Just second) ->
{ model | firstChord = Nothing, secondChord = Nothing}
_ ->
model
When you have a Maybe a type, such as Maybe Pitch you have two ways to set its value: Nothing or Just a. So instead of this:
{ firstChord =
{ root = ( "C", 3 )
, third = ( "E", 3 )
, fifth = ( "G", 3 )
}
, secondChord =
{ root = ( "F", 3 )
, third = ( "A", 3 )
, fifth = ( "C", 4 )
}
...you need to do this:
{ firstChord =
{ root = Just ( "C", 3 )
, third = Just ( "E", 3 )
, fifth = Just ( "G", 3 )
}
, secondChord =
{ root = Just ( "F", 3 )
, third = Just ( "A", 3 )
, fifth = Just ( "C", 4 )
}
Of course, you then use Nothing so indicate no value:
firstChord =
{ root = Just ( "C", 3 )
, third = Just ( "E", 3 )
, fifth = Nothing
}
(edit) i'm using F# interactive in Xamarin 6.3 on MacOS Sierra and Deedle 1.2.5 together with FsLab –
I'm trying this code taken from http://bluemountaincapital.github.io/Deedle/frame.html
and this produces an error.
type Person =
{ Name:string; Age:int; Countries:string list; }
let peopleRecds =
[ { Name = "Joe"; Age = 51; Countries = [ "UK"; "US"; "UK"] }
{ Name = "Tomas"; Age = 28; Countries = [ "CZ"; "UK"; "US"; "CZ" ] }
{ Name = "Eve"; Age = 2; Countries = [ "FR" ] }
{ Name = "Suzanne"; Age = 15; Countries = [ "US" ] } ]
// Turn the list of records into data frame
let peopleList = Frame.ofRecords peopleRecds
// Use the 'Name' column as a key (of type string)
let people = peopleList |> Frame.indexRowsString "Name"
people?Age;;
val it : Series<string,float> =
Joe -> 51
Tomas -> 28
Eve -> 2
Suzanne -> 15
people.Columns?Age.TryAs<string>();;
Stopped due to error System.Exception: Operation could not be
completed due to earlier error Lookup on object of indeterminate type
based on information prior to this program point. A type annotation
may be
I'm new to web programming and until now i was just creating table with rows which have only one radio button or checkbox etc... But now i have to create a table with rows containing different number of radio buttons. My table has only 2 columns. First column will contain indicator names of rows. Second column will contain radio buttons. So how can i create a cell containing multiple radio buttons. Some row would have 10 or more radio buttons so no one would want to append 10 radio buttons one after another, right?
Edit: I created it like this:
List anketScoreList = [{'id': 'university','text': 'University Score'},
{'id': 'gpa', 'text': 'GPA Score'},
{'id': 'language', 'text': 'Language Score'},
{'id': 'success', 'text': 'Success Score'},
{'id': 'fabric', 'text': 'Fabric Score'},
{'id': 'essay', 'text': 'Essay Score'}];
//Radio values
List score3 = ["1", "1.5", "2"];
List score5 = ["1", "2", "3", "4", "5"];
List score10 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
//creating table body
anketScoreList.forEach((a) {
index += 1;
tbody.append(new Element.tr()
..append(new TableCellElement()..text = index.toString())
..append(new TableCellElement()..append(new LabelElement()
..text = a['text']
..setAttribute('for', a['id'])))
..append(createRadioButtons(a)));
});
Element createRadioButtons(metadata){
List m;
if(metadata['id'] == "university"){
m = score3;
} else if(metadata['id'] == "gpa" || metadata['id'] == "language" ||
metadata['id'] == "essay"){
m = score5;
} else if(metadata['id'] == "success" || metadata['id'] == "fabric"){
m = score10;
}
var td = new TableCellElement();
m.forEach((score){
td.append(new InputElement()
..type = "radio"
..id = metadata['id']
..value = score
..name = metadata['id']
..classes.add("radio")
..onSelect.listen((e){
})
);
});
return td;
}
So is there any easier way to do this? Specially for the lists that i created, assuming there will be other values like genders, types etc... ?
In addition i have another little question. I tried onSelect, onClick on my radio input element but it didn't work. I was just testing with something like x = x + 10 so just removed that code from my onSelect.listen function.
What you could do is create a map for the scores:
Map scores = {
'university': score3,
'gpa':, score5,
'language: score5,
'essay: score5,
'success': score10,
'fabric': score10
};
your createRadioButtons could the be simplified to
Element createRadioButtons(metadata){
// or use a switch
//
// List m;
// switch(metadata['id']) {
// case 'university':
// m = score3;
// break;
// case 'gpa':
// case 'language':
// case 'essay':
// m = score5;
// break;
// case 'success':
// case 'fabric':
// m = score10;
// break;
// }
var td = new TableCellElement();
//m.forEach((score) {
scores[metadata['id']].forEach((score){
td.append(new InputElement()
..type = "radio"
..id = metadata['id']
..value = score
..name = metadata['id']
..classes.add("radio")
..onSelect.listen((e){
})
);
});
return td;
}
For change notification you can use onClick or onChange
http://www.dyn-web.com/tutorials/forms/radio/onclick-onchange.php