diff --git a/public/index.html b/public/index.html
index 57ee4ac5b56318afa33646372022d5353445f8eb..8dc655680f3df4819f227526aed06c98bb8a5baf 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,7 +2,7 @@
<html>
<head>
- <!--<link rel="stylesheet" href="style.css">-->
+ <link rel="stylesheet" href="style.css">
<script src="main.js"></script>
</head>
diff --git a/public/main.js b/public/main.js
index 3445abbdb1de99771ee0c488494b190a5b077663..56bceba501b73f2d31db53c08afcd28148741266 100644
--- a/public/main.js
+++ b/public/main.js
@@ -9454,9 +9454,6 @@ var $author$project$Main$update = F2(
$elm$core$Platform$Cmd$none);
case 'StarplotMsg':
switch (msg.a.$) {
- case 'Nothing1':
- var _v5 = msg.a;
- return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
case 'InputChange1':
var id = msg.a.a;
return _Utils_Tuple2(
@@ -9476,7 +9473,7 @@ var $author$project$Main$update = F2(
}),
$elm$core$Platform$Cmd$none);
case 'SubmitNumber1':
- var _v6 = msg.a;
+ var _v5 = msg.a;
return _Utils_Tuple2(
_Utils_update(
model,
@@ -9484,7 +9481,14 @@ var $author$project$Main$update = F2(
starplotOption: {
input1: model.starplotOption.input1,
input2: model.starplotOption.input2,
- modelID1: model.starplotOption.input1,
+ modelID1: function () {
+ var _v6 = $elm$core$String$toInt(model.starplotOption.input1);
+ if (_v6.$ === 'Just') {
+ return model.starplotOption.input1;
+ } else {
+ return model.starplotOption.modelID1;
+ }
+ }(),
modelID2: model.starplotOption.modelID2,
nextChange: (model.starplotOption.nextChange === 1) ? 2 : 1
}
@@ -9500,7 +9504,14 @@ var $author$project$Main$update = F2(
input1: model.starplotOption.input1,
input2: model.starplotOption.input2,
modelID1: model.starplotOption.modelID1,
- modelID2: model.starplotOption.input2,
+ modelID2: function () {
+ var _v8 = $elm$core$String$toInt(model.starplotOption.input2);
+ if (_v8.$ === 'Just') {
+ return model.starplotOption.input2;
+ } else {
+ return model.starplotOption.modelID2;
+ }
+ }(),
nextChange: (model.starplotOption.nextChange === 1) ? 2 : 1
}
}),
@@ -9556,8 +9567,31 @@ var $author$project$Main$StarplotMsg = function (a) {
var $author$project$Main$TreeViewMsg = function (a) {
return {$: 'TreeViewMsg', a: a};
};
-var $elm$html$Html$br = _VirtualDom_node('br');
+var $elm$json$Json$Encode$string = _Json_wrap;
+var $elm$html$Html$Attributes$stringProperty = F2(
+ function (key, string) {
+ return A2(
+ _VirtualDom_property,
+ key,
+ $elm$json$Json$Encode$string(string));
+ });
+var $elm$html$Html$Attributes$align = $elm$html$Html$Attributes$stringProperty('align');
+var $elm$html$Html$b = _VirtualDom_node('b');
var $elm$html$Html$button = _VirtualDom_node('button');
+var $elm$virtual_dom$VirtualDom$attribute = F2(
+ function (key, value) {
+ return A2(
+ _VirtualDom_attribute,
+ _VirtualDom_noOnOrFormAction(key),
+ _VirtualDom_noJavaScriptOrHtmlUri(value));
+ });
+var $elm_community$typed_svg$TypedSvg$Core$attribute = $elm$virtual_dom$VirtualDom$attribute;
+var $elm_community$typed_svg$TypedSvg$Attributes$class = function (names) {
+ return A2(
+ $elm_community$typed_svg$TypedSvg$Core$attribute,
+ 'class',
+ A2($elm$core$String$join, ' ', names));
+};
var $elm$html$Html$div = _VirtualDom_node('div');
var $elm$virtual_dom$VirtualDom$map = _VirtualDom_map;
var $elm$html$Html$map = $elm$virtual_dom$VirtualDom$map;
@@ -9592,6 +9626,7 @@ var $author$project$ParallelCoordinates$SetIRBlasterParallel = function (a) {
var $author$project$ParallelCoordinates$SetNFCParallel = function (a) {
return {$: 'SetNFCParallel', a: a};
};
+var $elm$html$Html$br = _VirtualDom_node('br');
var $elm$html$Html$option = _VirtualDom_node('option');
var $elm$json$Json$Encode$bool = _Json_wrap;
var $elm$html$Html$Attributes$boolProperty = F2(
@@ -9602,14 +9637,6 @@ var $elm$html$Html$Attributes$boolProperty = F2(
$elm$json$Json$Encode$bool(bool));
});
var $elm$html$Html$Attributes$selected = $elm$html$Html$Attributes$boolProperty('selected');
-var $elm$json$Json$Encode$string = _Json_wrap;
-var $elm$html$Html$Attributes$stringProperty = F2(
- function (key, string) {
- return A2(
- _VirtualDom_property,
- key,
- $elm$json$Json$Encode$string(string));
- });
var $elm$html$Html$Attributes$value = $elm$html$Html$Attributes$stringProperty('value');
var $author$project$ParallelCoordinates$createSelectorOptions = F2(
function (select, valueOption) {
@@ -10490,14 +10517,6 @@ var $folkertdev$one_true_path_experiment$Path$element = F2(
attributes),
_List_Nil);
});
-var $elm$virtual_dom$VirtualDom$attribute = F2(
- function (key, value) {
- return A2(
- _VirtualDom_attribute,
- _VirtualDom_noOnOrFormAction(key),
- _VirtualDom_noJavaScriptOrHtmlUri(value));
- });
-var $elm_community$typed_svg$TypedSvg$Core$attribute = $elm$virtual_dom$VirtualDom$attribute;
var $elm$core$String$concat = function (strings) {
return A2($elm$core$String$join, '', strings);
};
@@ -10647,12 +10666,6 @@ var $elm_community$typed_svg$TypedSvg$Types$Translate = F2(
function (a, b) {
return {$: 'Translate', a: a, b: b};
});
-var $elm_community$typed_svg$TypedSvg$Attributes$class = function (names) {
- return A2(
- $elm_community$typed_svg$TypedSvg$Core$attribute,
- 'class',
- A2($elm$core$String$join, ' ', names));
-};
var $elm_community$typed_svg$TypedSvg$Attributes$fontSize = function (length) {
return A2(
$elm_community$typed_svg$TypedSvg$Core$attribute,
@@ -11071,7 +11084,7 @@ var $author$project$ParallelCoordinates$createYAxis = F4(
]))
]));
});
-var $author$project$ParallelCoordinates$h = 450;
+var $author$project$ParallelCoordinates$h = 430;
var $elm_community$typed_svg$TypedSvg$Attributes$height = function (length) {
return A2(
$elm_community$typed_svg$TypedSvg$Core$attribute,
@@ -11884,6 +11897,7 @@ var $author$project$ParallelCoordinates$parallelCoordinatesPlot = F2(
_Utils_ap(lines, yaxis)));
});
var $elm$html$Html$select = _VirtualDom_node('select');
+var $elm$html$Html$span = _VirtualDom_node('span');
var $author$project$ParallelCoordinates$viewParallelCoordinates = function (model) {
var otherFilterValues = _List_fromArray(
['all', 'true', 'false']);
@@ -11902,7 +11916,43 @@ var $author$project$ParallelCoordinates$viewParallelCoordinates = function (mode
_List_Nil,
_List_fromArray(
[
- $elm$html$Html$text(' Brand: '),
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['description'])),
+ $elm$html$Html$Attributes$align('center')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,')
+ ]))
+ ])),
+ A2(
+ $elm$html$Html$span,
+ _List_fromArray(
+ [
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['plotAttributeSelect']))
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text(' Brand: ')
+ ]))
+ ])),
A2(
$elm$html$Html$select,
_List_fromArray(
@@ -11913,39 +11963,90 @@ var $author$project$ParallelCoordinates$viewParallelCoordinates = function (mode
$elm$core$List$map,
$author$project$ParallelCoordinates$createSelectorOptions(model.parallelPlotOption.selectedFilter.brand),
brandFilterValues)),
- $elm$html$Html$text(' 5G: '),
A2(
- $elm$html$Html$select,
+ $elm$html$Html$span,
_List_fromArray(
[
- $elm$html$Html$Events$onInput($author$project$ParallelCoordinates$Set5GParallel)
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['plotAttributeSelect']))
]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text(' 5G: ')
+ ])),
+ A2(
+ $elm$html$Html$select,
+ _List_fromArray(
+ [
+ $elm$html$Html$Events$onInput($author$project$ParallelCoordinates$Set5GParallel)
+ ]),
+ A2(
+ $elm$core$List$map,
+ $author$project$ParallelCoordinates$createSelectorOptions(model.parallelPlotOption.selectedFilter.g5),
+ otherFilterValues))
+ ])),
A2(
- $elm$core$List$map,
- $author$project$ParallelCoordinates$createSelectorOptions(model.parallelPlotOption.selectedFilter.g5),
- otherFilterValues)),
- $elm$html$Html$text(' NFC: '),
- A2(
- $elm$html$Html$select,
+ $elm$html$Html$span,
_List_fromArray(
[
- $elm$html$Html$Events$onInput($author$project$ParallelCoordinates$SetNFCParallel)
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['plotAttributeSelect']))
]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text(' NFC: ')
+ ])),
+ A2(
+ $elm$html$Html$select,
+ _List_fromArray(
+ [
+ $elm$html$Html$Events$onInput($author$project$ParallelCoordinates$SetNFCParallel)
+ ]),
+ A2(
+ $elm$core$List$map,
+ $author$project$ParallelCoordinates$createSelectorOptions(model.parallelPlotOption.selectedFilter.nfc),
+ otherFilterValues))
+ ])),
A2(
- $elm$core$List$map,
- $author$project$ParallelCoordinates$createSelectorOptions(model.parallelPlotOption.selectedFilter.nfc),
- otherFilterValues)),
- $elm$html$Html$text(' IR-Blaster: '),
- A2(
- $elm$html$Html$select,
+ $elm$html$Html$span,
_List_fromArray(
[
- $elm$html$Html$Events$onInput($author$project$ParallelCoordinates$SetIRBlasterParallel)
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['plotAttributeSelect']))
]),
- A2(
- $elm$core$List$map,
- $author$project$ParallelCoordinates$createSelectorOptions(model.parallelPlotOption.selectedFilter.ir_blaster),
- otherFilterValues)),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text(' IR-Blaster: ')
+ ])),
+ A2(
+ $elm$html$Html$select,
+ _List_fromArray(
+ [
+ $elm$html$Html$Events$onInput($author$project$ParallelCoordinates$SetIRBlasterParallel)
+ ]),
+ A2(
+ $elm$core$List$map,
+ $author$project$ParallelCoordinates$createSelectorOptions(model.parallelPlotOption.selectedFilter.ir_blaster),
+ otherFilterValues))
+ ])),
A2($elm$html$Html$br, _List_Nil, _List_Nil),
A2($elm$html$Html$br, _List_Nil, _List_Nil),
A2($author$project$ParallelCoordinates$parallelCoordinatesPlot, model, filteredSmartphoneData)
@@ -12001,7 +12102,6 @@ var $author$project$Scatterplot$attributeSelector = F2(
$author$project$Scatterplot$createSelectorOptions(att2),
attributes));
});
-var $elm$html$Html$b = _VirtualDom_node('b');
var $author$project$Scatterplot$XyData = F3(
function (xDescription, yDescription, data) {
return {data: data, xDescription: xDescription, yDescription: yDescription};
@@ -12076,8 +12176,8 @@ var $author$project$Scatterplot$filterSmartphonesXY = F3(
var filteredSmartphones = A2($elm$core$List$filterMap, $author$project$Scatterplot$mapToPoint, smartphoneDataList);
return A3($author$project$Scatterplot$XyData, model.scatterplotOptions.attribute1, model.scatterplotOptions.attribute2, filteredSmartphones);
});
-var $author$project$Scatterplot$h = 450;
-var $author$project$Scatterplot$padding = 50;
+var $author$project$Scatterplot$h = 430;
+var $author$project$Scatterplot$padding = 30;
var $author$project$Scatterplot$SetStarPlot = function (a) {
return {$: 'SetStarPlot', a: a};
};
@@ -12360,21 +12460,62 @@ var $author$project$Scatterplot$viewScatterplot = function (model) {
_List_fromArray(
[
A2(
- $elm$html$Html$b,
- _List_Nil,
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['description'])),
+ $elm$html$Html$Attributes$align('center')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,')
+ ]))
+ ])),
+ A2(
+ $elm$html$Html$span,
+ _List_fromArray(
+ [
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['plotAttributeSelect']))
+ ]),
_List_fromArray(
[
- $elm$html$Html$text('x-Achse: ')
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text('x-Axis: ')
+ ])),
+ A2($author$project$Scatterplot$attributeSelector, 1, model)
])),
- A2($author$project$Scatterplot$attributeSelector, 1, model),
A2(
- $elm$html$Html$b,
- _List_Nil,
+ $elm$html$Html$span,
+ _List_fromArray(
+ [
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['plotAttributeSelect']))
+ ]),
_List_fromArray(
[
- $elm$html$Html$text(' y-Achse: ')
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text(' y-Axis: ')
+ ])),
+ A2($author$project$Scatterplot$attributeSelector, 2, model)
])),
- A2($author$project$Scatterplot$attributeSelector, 2, model),
$author$project$Scatterplot$scatterplot(filteredSmartphoneData)
]));
};
@@ -12436,7 +12577,6 @@ var $author$project$Starplot$findSmartphoneById = F2(
$author$project$Starplot$checkID(id),
model.data));
});
-var $elm$html$Html$h3 = _VirtualDom_node('h3');
var $elm$html$Html$input = _VirtualDom_node('input');
var $elm$html$Html$Attributes$placeholder = $elm$html$Html$Attributes$stringProperty('placeholder');
var $avh4$elm_color$Color$black = A4($avh4$elm_color$Color$RgbaSpace, 0 / 255, 0 / 255, 0 / 255, 1.0);
@@ -12749,123 +12889,243 @@ var $author$project$Starplot$viewStarplot = function (model) {
_List_Nil,
_List_fromArray(
[
- function () {
- if (spd1.$ === 'Just') {
- var spd = spd1.a;
- return A2(
- $elm$html$Html$h3,
- _List_Nil,
- _List_fromArray(
- [
- $elm$html$Html$text(
- ('Starplot1 | ID:' + A2($elm$core$Maybe$withDefault, 'NaN', spd.id)) + (' | ' + A2($elm$core$Maybe$withDefault, 'NaN', spd.model)))
- ]));
- } else {
- return A2(
- $elm$html$Html$h3,
- _List_Nil,
- _List_fromArray(
- [
- $elm$html$Html$text(('Starplot1 | ID:' + 'NaN') + (' | ' + 'NaN'))
- ]));
- }
- }(),
- function () {
- if (spd2.$ === 'Just') {
- var spd = spd2.a;
- return A2(
- $elm$html$Html$h3,
- _List_Nil,
- _List_fromArray(
- [
- $elm$html$Html$text(
- ('Starplot2 | ID:' + A2($elm$core$Maybe$withDefault, 'NaN', spd.id)) + (' | ' + A2($elm$core$Maybe$withDefault, 'NaN', spd.model)))
- ]));
- } else {
- return A2(
- $elm$html$Html$h3,
- _List_Nil,
- _List_fromArray(
- [
- $elm$html$Html$text(('Starplot2 | ID:' + 'NaN') + (' | ' + 'NaN'))
- ]));
- }
- }(),
- $elm$html$Html$text('ID1 auswaehlen: '),
- A2(
- $elm$html$Html$input,
- _List_fromArray(
- [
- $elm$html$Html$Attributes$placeholder('Enter a number'),
- $elm$html$Html$Events$onInput($author$project$Starplot$InputChange1)
- ]),
- _List_Nil),
A2(
- $elm$html$Html$button,
+ $elm$html$Html$div,
_List_fromArray(
[
- $elm$html$Html$Events$onClick($author$project$Starplot$SubmitNumber1)
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['description'])),
+ $elm$html$Html$Attributes$align('center')
]),
_List_fromArray(
[
- $elm$html$Html$text('Submit for SP1')
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,')
+ ]))
])),
- $elm$html$Html$text(' ID2 auswaehlen: '),
- A2(
- $elm$html$Html$input,
- _List_fromArray(
- [
- $elm$html$Html$Attributes$placeholder('Enter a number'),
- $elm$html$Html$Events$onInput($author$project$Starplot$InputChange2)
- ]),
- _List_Nil),
A2(
- $elm$html$Html$button,
+ $elm$html$Html$span,
_List_fromArray(
[
- $elm$html$Html$Events$onClick($author$project$Starplot$SubmitNumber2)
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['plotStarInfo']))
]),
_List_fromArray(
[
- $elm$html$Html$text('Submit for SP2')
- ]))
- ]));
- });
- var starplotData2 = A2($author$project$Starplot$findSmartphoneById, model, model.starplotOption.modelID2);
- var starplotData1 = A2($author$project$Starplot$findSmartphoneById, model, model.starplotOption.modelID1);
- var smartphoneFunctions = _List_fromArray(
- [
- function ($) {
- return $.price;
- },
- function ($) {
- return $.rating;
- },
- function ($) {
- return $.num_cores;
- },
- function ($) {
- return $.processor_speed;
- },
- function ($) {
- return $.battery;
- },
- function ($) {
- return $.fast_charging;
- },
- function ($) {
- return $.memory;
- },
- function ($) {
- return $.ram;
- },
- function ($) {
- return $.screen_size;
- },
- function ($) {
- return $.refresh_rate;
- }
- ]);
+ function () {
+ if (spd1.$ === 'Just') {
+ var spd = spd1.a;
+ return A2(
+ $elm$html$Html$span,
+ _List_Nil,
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text(
+ ('Starplot1 | ID:' + A2($elm$core$Maybe$withDefault, 'NaN', spd.id)) + (' | ' + A2($elm$core$Maybe$withDefault, 'NaN', spd.model)))
+ ])),
+ A2($elm$html$Html$br, _List_Nil, _List_Nil),
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Select ID1: ')
+ ])),
+ A2(
+ $elm$html$Html$input,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$placeholder('Enter a number'),
+ $elm$html$Html$Events$onInput($author$project$Starplot$InputChange1)
+ ]),
+ _List_Nil),
+ A2(
+ $elm$html$Html$button,
+ _List_fromArray(
+ [
+ $elm$html$Html$Events$onClick($author$project$Starplot$SubmitNumber1)
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Submit for SP1')
+ ]))
+ ]));
+ } else {
+ return A2(
+ $elm$html$Html$span,
+ _List_Nil,
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text(('Starplot1 | ID:' + 'NaN') + (' | ' + 'NaN'))
+ ])),
+ A2($elm$html$Html$br, _List_Nil, _List_Nil),
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Select ID1: ')
+ ])),
+ A2(
+ $elm$html$Html$input,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$placeholder('Enter a number'),
+ $elm$html$Html$Events$onInput($author$project$Starplot$InputChange1)
+ ]),
+ _List_Nil),
+ A2(
+ $elm$html$Html$button,
+ _List_fromArray(
+ [
+ $elm$html$Html$Events$onClick($author$project$Starplot$SubmitNumber1)
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Submit for SP1')
+ ]))
+ ]));
+ }
+ }(),
+ function () {
+ if (spd2.$ === 'Just') {
+ var spd = spd2.a;
+ return A2(
+ $elm$html$Html$span,
+ _List_Nil,
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text(
+ ('Starplot2 | ID:' + A2($elm$core$Maybe$withDefault, 'NaN', spd.id)) + (' | ' + A2($elm$core$Maybe$withDefault, 'NaN', spd.model)))
+ ])),
+ A2($elm$html$Html$br, _List_Nil, _List_Nil),
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text(' Select ID2: ')
+ ])),
+ A2(
+ $elm$html$Html$input,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$placeholder('Enter a number'),
+ $elm$html$Html$Events$onInput($author$project$Starplot$InputChange2)
+ ]),
+ _List_Nil),
+ A2(
+ $elm$html$Html$button,
+ _List_fromArray(
+ [
+ $elm$html$Html$Events$onClick($author$project$Starplot$SubmitNumber2)
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Submit for SP2')
+ ]))
+ ]));
+ } else {
+ return A2(
+ $elm$html$Html$span,
+ _List_Nil,
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text(('Starplot2 | ID:' + 'NaN') + (' | ' + 'NaN'))
+ ])),
+ A2($elm$html$Html$br, _List_Nil, _List_Nil),
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text(' Select ID2: ')
+ ])),
+ A2(
+ $elm$html$Html$input,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$placeholder('Enter a number'),
+ $elm$html$Html$Events$onInput($author$project$Starplot$InputChange2)
+ ]),
+ _List_Nil),
+ A2(
+ $elm$html$Html$button,
+ _List_fromArray(
+ [
+ $elm$html$Html$Events$onClick($author$project$Starplot$SubmitNumber2)
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Submit for SP2')
+ ]))
+ ]));
+ }
+ }()
+ ]))
+ ]));
+ });
+ var starplotData2 = A2($author$project$Starplot$findSmartphoneById, model, model.starplotOption.modelID2);
+ var starplotData1 = A2($author$project$Starplot$findSmartphoneById, model, model.starplotOption.modelID1);
+ var smartphoneFunctions = _List_fromArray(
+ [
+ function ($) {
+ return $.price;
+ },
+ function ($) {
+ return $.rating;
+ },
+ function ($) {
+ return $.num_cores;
+ },
+ function ($) {
+ return $.processor_speed;
+ },
+ function ($) {
+ return $.battery;
+ },
+ function ($) {
+ return $.fast_charging;
+ },
+ function ($) {
+ return $.memory;
+ },
+ function ($) {
+ return $.ram;
+ },
+ function ($) {
+ return $.screen_size;
+ },
+ function ($) {
+ return $.refresh_rate;
+ }
+ ]);
var maxValues = A2(
$elm$core$List$map,
$author$project$Starplot$findMaxValue(model),
@@ -15947,125 +16207,356 @@ var $author$project$TreeView$viewTree = function (model) {
_List_Nil,
_List_fromArray(
[
- $elm$html$Html$text(
- 'Knoten im Baum: ' + ($elm$core$Debug$toString(nodeCounts.b) + (' | Knoten gesamt: ' + $elm$core$Debug$toString(nodeCounts.a)))),
- A2($elm$html$Html$br, _List_Nil, _List_Nil),
- $elm$html$Html$text(
- 'manuelle entfernte Knoten: ' + $elm$core$Debug$toString(model.treeOption.dropCount)),
- A2($elm$html$Html$br, _List_Nil, _List_Nil),
- $elm$html$Html$text('Anzahl zu entfernender Knoten: '),
A2(
- $elm$html$Html$input,
+ $elm$html$Html$div,
_List_fromArray(
[
- $elm$html$Html$Events$onInput($author$project$TreeView$SetDropCountInput)
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['description'])),
+ $elm$html$Html$Attributes$align('center')
]),
- _List_Nil),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,')
+ ]))
+ ])),
A2(
- $elm$html$Html$button,
+ $elm$html$Html$div,
_List_fromArray(
[
- $elm$html$Html$Events$onClick($author$project$TreeView$SetDropCount)
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['plotTreeInfo']))
]),
_List_fromArray(
[
- $elm$html$Html$text('Entferne Knoten')
+ A2(
+ $elm$html$Html$span,
+ _List_fromArray(
+ [
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['plotAttributeSelect']))
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text(
+ 'Smartphones in Tree: ' + $elm$core$Debug$toString(nodeCounts.b))
+ ]))
+ ])),
+ A2(
+ $elm$html$Html$span,
+ _List_fromArray(
+ [
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['plotAttributeSelect']))
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text(
+ 'Total Smartphones: ' + $elm$core$Debug$toString(nodeCounts.a))
+ ]))
+ ]))
])),
- $elm$html$Html$text(' Brand: '),
A2(
- $elm$html$Html$select,
+ $elm$html$Html$span,
_List_fromArray(
[
- $elm$html$Html$Events$onInput($author$project$TreeView$SetBrandTree)
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['plotAttributeSelect']))
]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text(' Brand: ')
+ ])),
+ A2(
+ $elm$html$Html$select,
+ _List_fromArray(
+ [
+ $elm$html$Html$Events$onInput($author$project$TreeView$SetBrandTree)
+ ]),
+ A2(
+ $elm$core$List$map,
+ $author$project$TreeView$createSelectorOptions(model.treeOption.selectedFilter.brand),
+ brandFilterValues))
+ ])),
A2(
- $elm$core$List$map,
- $author$project$TreeView$createSelectorOptions(model.treeOption.selectedFilter.brand),
- brandFilterValues)),
- $elm$html$Html$text(' 5G: '),
- A2(
- $elm$html$Html$select,
+ $elm$html$Html$span,
_List_fromArray(
[
- $elm$html$Html$Events$onInput($author$project$TreeView$Set5GTree)
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['plotAttributeSelect']))
]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text(' 5G: ')
+ ])),
+ A2(
+ $elm$html$Html$select,
+ _List_fromArray(
+ [
+ $elm$html$Html$Events$onInput($author$project$TreeView$Set5GTree)
+ ]),
+ A2(
+ $elm$core$List$map,
+ $author$project$TreeView$createSelectorOptions(model.treeOption.selectedFilter.g5),
+ otherFilterValues))
+ ])),
A2(
- $elm$core$List$map,
- $author$project$TreeView$createSelectorOptions(model.treeOption.selectedFilter.g5),
- otherFilterValues)),
- $elm$html$Html$text(' NFC: '),
- A2(
- $elm$html$Html$select,
+ $elm$html$Html$span,
_List_fromArray(
[
- $elm$html$Html$Events$onInput($author$project$TreeView$SetNFCTree)
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['plotAttributeSelect']))
]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text(' NFC: ')
+ ])),
+ A2(
+ $elm$html$Html$select,
+ _List_fromArray(
+ [
+ $elm$html$Html$Events$onInput($author$project$TreeView$SetNFCTree)
+ ]),
+ A2(
+ $elm$core$List$map,
+ $author$project$TreeView$createSelectorOptions(model.treeOption.selectedFilter.nfc),
+ otherFilterValues))
+ ])),
A2(
- $elm$core$List$map,
- $author$project$TreeView$createSelectorOptions(model.treeOption.selectedFilter.nfc),
- otherFilterValues)),
- $elm$html$Html$text(' IR-Blaster: '),
- A2(
- $elm$html$Html$select,
+ $elm$html$Html$span,
_List_fromArray(
[
- $elm$html$Html$Events$onInput($author$project$TreeView$SetIRBlasterTree)
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['plotAttributeSelect']))
]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text(' IR-Blaster: ')
+ ])),
+ A2(
+ $elm$html$Html$select,
+ _List_fromArray(
+ [
+ $elm$html$Html$Events$onInput($author$project$TreeView$SetIRBlasterTree)
+ ]),
+ A2(
+ $elm$core$List$map,
+ $author$project$TreeView$createSelectorOptions(model.treeOption.selectedFilter.ir_blaster),
+ otherFilterValues))
+ ])),
A2(
- $elm$core$List$map,
- $author$project$TreeView$createSelectorOptions(model.treeOption.selectedFilter.ir_blaster),
- otherFilterValues)),
- treeView
- ]));
-};
-var $author$project$Main$view = function (model) {
- return A2(
- $elm$html$Html$div,
- _List_Nil,
- _List_fromArray(
- [
- A2(
- $elm$html$Html$button,
+ $elm$html$Html$span,
_List_fromArray(
[
- $elm$html$Html$Events$onClick($author$project$Main$SetViewScatterplot)
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['plotAttributeSelect']))
]),
_List_fromArray(
[
- $elm$html$Html$text('Scatterplot')
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Number of nodes to remove: ')
+ ])),
+ A2(
+ $elm$html$Html$input,
+ _List_fromArray(
+ [
+ $elm$html$Html$Events$onInput($author$project$TreeView$SetDropCountInput)
+ ]),
+ _List_Nil),
+ A2(
+ $elm$html$Html$button,
+ _List_fromArray(
+ [
+ $elm$html$Html$Events$onClick($author$project$TreeView$SetDropCount)
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Remove nodes')
+ ]))
])),
A2(
- $elm$html$Html$button,
+ $elm$html$Html$span,
_List_fromArray(
[
- $elm$html$Html$Events$onClick($author$project$Main$SetViewParallelCoordesPlot)
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['plotAttributeSelect']))
]),
_List_fromArray(
[
- $elm$html$Html$text('ParallelCoordinates')
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text(
+ 'Manual removed nodes: ' + $elm$core$Debug$toString(model.treeOption.dropCount))
+ ]))
])),
+ treeView
+ ]));
+};
+var $author$project$Main$view = function (model) {
+ return A2(
+ $elm$html$Html$div,
+ _List_Nil,
+ _List_fromArray(
+ [
A2(
- $elm$html$Html$button,
+ $elm$html$Html$div,
_List_fromArray(
[
- $elm$html$Html$Events$onClick($author$project$Main$SetViewTree)
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['caption'])),
+ $elm$html$Html$Attributes$align('center')
]),
_List_fromArray(
[
- $elm$html$Html$text('TreeView')
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Smartphone Analysis Visualization')
+ ]))
])),
A2(
- $elm$html$Html$button,
+ $elm$html$Html$div,
_List_fromArray(
[
- $elm$html$Html$Events$onClick($author$project$Main$SetViewStarPlot)
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['buttonMenu'])),
+ $elm$html$Html$Attributes$align('center')
]),
_List_fromArray(
[
- $elm$html$Html$text('Starplot')
+ A2(
+ $elm$html$Html$button,
+ _List_fromArray(
+ [
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['plotButton'])),
+ $elm$html$Html$Events$onClick($author$project$Main$SetViewScatterplot)
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Scatterplot')
+ ]))
+ ])),
+ A2(
+ $elm$html$Html$button,
+ _List_fromArray(
+ [
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['plotButton'])),
+ $elm$html$Html$Events$onClick($author$project$Main$SetViewParallelCoordesPlot)
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text('ParallelCoordinates')
+ ]))
+ ])),
+ A2(
+ $elm$html$Html$button,
+ _List_fromArray(
+ [
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['plotButton'])),
+ $elm$html$Html$Events$onClick($author$project$Main$SetViewTree)
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text('TreeView')
+ ]))
+ ])),
+ A2(
+ $elm$html$Html$button,
+ _List_fromArray(
+ [
+ $elm_community$typed_svg$TypedSvg$Attributes$class(
+ _List_fromArray(
+ ['plotButton'])),
+ $elm$html$Html$Events$onClick($author$project$Main$SetViewStarPlot)
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$b,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Starplot')
+ ]))
+ ]))
])),
- A2($elm$html$Html$br, _List_Nil, _List_Nil),
- A2($elm$html$Html$br, _List_Nil, _List_Nil),
model.plotVisible.scatterPlot ? A2(
$elm$html$Html$map,
$author$project$Main$ScatterplotMsg,
diff --git a/public/style.css b/public/style.css
index ae1f65da50e91c15540a59896c9bfdf417c8ec1e..d91704951cde4b6d574df2c37b7274f52202c52c 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,27 +1,49 @@
-/* body {
- font-family: sans-serif;
- margin: auto;
- max-width: 1280px;
+.caption {
+ background-color: rgb(74, 145, 167);
+ font-size: 30px;
+ padding: 5px;
}
-.navbar {
- background-color: #313236;
- border-radius: 2px;
- max-width: 800px;
+.buttonMenu {
+ background-color: lightblue;
+ padding: 8px;
}
-.navbar a {
- color: #aaa;
- display: inline-block;
- font-size: 15px;
- padding: 10px;
- text-decoration: none;
+.plotButton {
+ background-color: lightblue;
+ padding: 5px 15px 5px 15px;
+ margin-left: 10px;
+ margin-right: 10px;
}
-.navbar a:hover {
- color: #ffffff;
-} */
+.plotButton:hover {
+ background-color: rgb(112, 178, 199);
+}
+
+.description {
+ font-size: 20px;
+ margin-bottom: 8px;
+ background-color: lightblue;
+ padding: 5px;
+}
+
+.plotAttributeSelect {
+ margin-left: 15px;
+ margin-right: 15px;
+}
+
+.plotTreeInfo {
+ margin-bottom: 5px;
+}
+
+.plotStarInfo {
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 8px;
+}
-#test1 {
- background-color: blue;
+.plotStarInfo span {
+ flex: auto;
+ font-size: 20px;
+ margin-left: 50px;
}
\ No newline at end of file
diff --git a/src/Main.elm b/src/Main.elm
index 8802cc26074cdc93018dd97c4ac131bd97c6bfcc..3f872cb45bdfb458c385d841efcc082a37bf4bac 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -2,7 +2,8 @@ module Main exposing (..)
import Browser
import Csv.Decode as Decode exposing (Decoder)
-import Html exposing (Html, br, button, div, text)
+import Html exposing (Html, b, button, div, text)
+import Html.Attributes exposing (align)
import Html.Events exposing (onClick)
import Http
import List.Extra
@@ -12,7 +13,9 @@ import Result exposing (Result(..))
import Scatterplot exposing (Msg(..))
import SmartPhoneType exposing (Smartphone)
import Starplot exposing (Msg(..))
+import String exposing (toInt)
import TreeView exposing (Msg(..))
+import TypedSvg.Attributes exposing (class)
import Zoom
@@ -426,11 +429,6 @@ update msg model =
, Cmd.none
)
- StarplotMsg Nothing1 ->
- ( model
- , Cmd.none
- )
-
StarplotMsg (InputChange1 id) ->
( { model
| starplotOption =
@@ -460,7 +458,13 @@ update msg model =
StarplotMsg SubmitNumber1 ->
( { model
| starplotOption =
- { modelID1 = model.starplotOption.input1
+ { modelID1 =
+ case toInt model.starplotOption.input1 of
+ Just _ ->
+ model.starplotOption.input1
+
+ Nothing ->
+ model.starplotOption.modelID1
, modelID2 = model.starplotOption.modelID2
, input1 = model.starplotOption.input1
, input2 = model.starplotOption.input2
@@ -479,7 +483,13 @@ update msg model =
( { model
| starplotOption =
{ modelID1 = model.starplotOption.modelID1
- , modelID2 = model.starplotOption.input2
+ , modelID2 =
+ case toInt model.starplotOption.input2 of
+ Just _ ->
+ model.starplotOption.input2
+
+ Nothing ->
+ model.starplotOption.modelID2
, input1 = model.starplotOption.input1
, input2 = model.starplotOption.input2
, nextChange =
@@ -549,12 +559,13 @@ createAttList model att =
view : Model -> Html Msg
view model =
div []
- [ button [ onClick SetViewScatterplot ] [ text "Scatterplot" ]
- , button [ onClick SetViewParallelCoordesPlot ] [ text "ParallelCoordinates" ]
- , button [ onClick SetViewTree ] [ text "TreeView" ]
- , button [ onClick SetViewStarPlot ] [ text "Starplot" ]
- , br [] []
- , br [] []
+ [ div [ class [ "caption" ], align "center" ] [ b [] [ text "Smartphone Analysis Visualization" ] ]
+ , div [ class [ "buttonMenu" ], align "center" ]
+ [ button [ class [ "plotButton" ], onClick SetViewScatterplot ] [ b [] [ text "Scatterplot" ] ]
+ , button [ class [ "plotButton" ], onClick SetViewParallelCoordesPlot ] [ b [] [ text "ParallelCoordinates" ] ]
+ , button [ class [ "plotButton" ], onClick SetViewTree ] [ b [] [ text "TreeView" ] ]
+ , button [ class [ "plotButton" ], onClick SetViewStarPlot ] [ b [] [ text "Starplot" ] ]
+ ]
, if model.plotVisible.scatterPlot then
Scatterplot.viewScatterplot model |> Html.map ScatterplotMsg
diff --git a/src/ParallelCoordinates.elm b/src/ParallelCoordinates.elm
index 55387c2ed64f290eaa84841a7d14b9d696848b7e..039cb146c248662e1c8879d5f6ae785de982471e 100644
--- a/src/ParallelCoordinates.elm
+++ b/src/ParallelCoordinates.elm
@@ -3,8 +3,8 @@ module ParallelCoordinates exposing (..)
import Axis exposing (..)
import Color
import ExtendedFunctions exposing (listmap10, map10)
-import Html exposing (Html, br, option, select, text)
-import Html.Attributes exposing (selected, value)
+import Html exposing (Html, b, br, option, select, text)
+import Html.Attributes exposing (align, selected, value)
import Html.Events exposing (onClick, onInput)
import List
import Maybe
@@ -29,7 +29,7 @@ w =
h : Float
h =
- 450
+ 430
padding : Float
@@ -52,6 +52,15 @@ defaultExtent =
( 0, 200000 )
+type Msg
+ = ChangeOrder Int Int
+ | SetScatterPlotFromParallelPlot String String
+ | SetBrandParallel String
+ | Set5GParallel String
+ | SetNFCParallel String
+ | SetIRBlasterParallel String
+
+
parallelCoordinatesPlot : Model -> List Smartphone -> Svg Msg
parallelCoordinatesPlot model smartphonesList =
let
@@ -360,17 +369,24 @@ viewParallelCoordinates model =
[ "all", "true", "false" ]
in
Html.div []
- [ text " Brand: "
+ [ Html.div [ class [ "description" ], align "center" ] [ Html.b [] [ Html.text "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren," ] ]
+ , Html.span [ class [ "plotAttributeSelect" ] ] [ b [] [ text " Brand: " ] ]
, select [ onInput SetBrandParallel ] (List.map (createSelectorOptions model.parallelPlotOption.selectedFilter.brand) brandFilterValues)
- , text " 5G: "
- , select [ onInput Set5GParallel ]
- (List.map (createSelectorOptions model.parallelPlotOption.selectedFilter.g5) otherFilterValues)
- , text " NFC: "
- , select [ onInput SetNFCParallel ]
- (List.map (createSelectorOptions model.parallelPlotOption.selectedFilter.nfc) otherFilterValues)
- , text " IR-Blaster: "
- , select [ onInput SetIRBlasterParallel ]
- (List.map (createSelectorOptions model.parallelPlotOption.selectedFilter.ir_blaster) otherFilterValues)
+ , Html.span [ class [ "plotAttributeSelect" ] ]
+ [ b [] [ text " 5G: " ]
+ , select [ onInput Set5GParallel ]
+ (List.map (createSelectorOptions model.parallelPlotOption.selectedFilter.g5) otherFilterValues)
+ ]
+ , Html.span [ class [ "plotAttributeSelect" ] ]
+ [ b [] [ text " NFC: " ]
+ , select [ onInput SetNFCParallel ]
+ (List.map (createSelectorOptions model.parallelPlotOption.selectedFilter.nfc) otherFilterValues)
+ ]
+ , Html.span [ class [ "plotAttributeSelect" ] ]
+ [ b [] [ text " IR-Blaster: " ]
+ , select [ onInput SetIRBlasterParallel ]
+ (List.map (createSelectorOptions model.parallelPlotOption.selectedFilter.ir_blaster) otherFilterValues)
+ ]
, br [] []
, br [] []
, parallelCoordinatesPlot model filteredSmartphoneData
@@ -394,12 +410,3 @@ type alias MultiDimData =
{ dimDescription : List String
, data : List (List MultiDimPoint)
}
-
-
-type Msg
- = ChangeOrder Int Int
- | SetScatterPlotFromParallelPlot String String
- | SetBrandParallel String
- | Set5GParallel String
- | SetNFCParallel String
- | SetIRBlasterParallel String
diff --git a/src/Scatterplot.elm b/src/Scatterplot.elm
index 84c463980898af05d4e0c8933308e63d66fc4e9f..97619df2abab1539ffaaece761f1e3f434e8c26e 100644
--- a/src/Scatterplot.elm
+++ b/src/Scatterplot.elm
@@ -2,36 +2,18 @@ module Scatterplot exposing (..)
import Axis exposing (..)
import Html exposing (Html, option)
-import Html.Attributes exposing (selected, value)
+import Html.Attributes exposing (align, selected, value)
import Html.Events exposing (onClick, onInput)
import Model exposing (Model)
import Scale exposing (ContinuousScale)
import Statistics
-import TypedSvg exposing (circle, g, style, svg, text_)
+import TypedSvg exposing (circle, g, svg, text_)
import TypedSvg.Attributes exposing (class, fontFamily, fontSize, textAnchor, transform, viewBox)
import TypedSvg.Attributes.InPx exposing (cx, cy, r, x, y)
import TypedSvg.Core exposing (Svg)
import TypedSvg.Types exposing (AnchorAlignment(..), Length(..), Transform(..))
-
-{- type alias Model =
- { data : List Smartphone
- , error : Maybe String
- , csvdata : String
- , scatterplotOptions : ScatterPlotOption
- , parallelPlotOption : ParallelPlotOption
- }
--}
-{- type alias ScatterPlotOption =
- { attribute1 : String
- , attribute2 : String
- , att1List : List (Maybe Float)
- , att2List : List (Maybe Float)
- }
--}
-
-
w : Float
w =
900
@@ -39,12 +21,12 @@ w =
h : Float
h =
- 450
+ 430
padding : Float
padding =
- 50
+ 30
radius : Float
@@ -62,6 +44,12 @@ defaultExtent =
( 0, 200000 )
+type Msg
+ = ChangeAttribute1 String
+ | ChangeAttribute2 String
+ | SetStarPlot String
+
+
scatterplot : XyData -> Svg Msg
scatterplot model =
let
@@ -88,7 +76,7 @@ scatterplot model =
}
in
svg [ viewBox 0 0 w h, TypedSvg.Attributes.width <| TypedSvg.Types.Percent 100, TypedSvg.Attributes.height <| TypedSvg.Types.Percent 100 ]
- [ style [] [ TypedSvg.Core.text """
+ [ TypedSvg.style [] [ TypedSvg.Core.text """
.point circle { stroke: rgba(0, 0, 0,0.4); fill: rgba(255, 255, 255,0.3); }
.point text { display: none; }
.point:hover circle { stroke: rgba(0, 0, 0,1.0); fill: rgb(118, 214, 78); }
@@ -238,10 +226,15 @@ viewScatterplot model =
filterSmartphonesXY model att1List att2List
in
Html.div []
- [ Html.b [] [ Html.text "x-Achse: " ]
- , attributeSelector 1 model
- , Html.b [] [ Html.text " y-Achse: " ]
- , attributeSelector 2 model
+ [ Html.div [ class [ "description" ], align "center" ] [ Html.b [] [ Html.text "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren," ] ]
+ , Html.span [ class [ "plotAttributeSelect" ] ]
+ [ Html.b [] [ Html.text "x-Axis: " ]
+ , attributeSelector 1 model
+ ]
+ , Html.span [ class [ "plotAttributeSelect" ] ]
+ [ Html.b [] [ Html.text " y-Axis: " ]
+ , attributeSelector 2 model
+ ]
, scatterplot filteredSmartphoneData
]
@@ -292,9 +285,3 @@ createSelectorOptions select att =
else
option [ value att ] [ Html.text att ]
-
-
-type Msg
- = ChangeAttribute1 String
- | ChangeAttribute2 String
- | SetStarPlot String
diff --git a/src/Starplot.elm b/src/Starplot.elm
index 15d41defebbe3c1e5c0c02c2a1b4636672a21657..08f9562e34331e97aa3fd7852e109367d3406171 100644
--- a/src/Starplot.elm
+++ b/src/Starplot.elm
@@ -2,8 +2,8 @@ module Starplot exposing (..)
import Color
import Debug exposing (toString)
-import Html exposing (Html, button, div, h3, input, text)
-import Html.Attributes exposing (placeholder, value)
+import Html exposing (Html, b, br, button, div, input, text)
+import Html.Attributes exposing (align, placeholder, value)
import Html.Events exposing (onClick, onInput)
import List
import Model exposing (Model)
@@ -48,8 +48,7 @@ starlength =
type Msg
- = Nothing1
- | InputChange1 String
+ = InputChange1 String
| SubmitNumber1
| InputChange2 String
| SubmitNumber2
@@ -344,24 +343,45 @@ viewStarplot model =
starplotViewHead spd1 spd2 =
div []
- [ case spd1 of
- Just spd ->
- h3 [] [ text <| ("Starplot1 | ID:" ++ Maybe.withDefault "NaN" spd.id) ++ (" | " ++ Maybe.withDefault "NaN" spd.model) ]
-
- Nothing ->
- h3 [] [ text <| ("Starplot1 | ID:" ++ "NaN") ++ (" | " ++ "NaN") ]
- , case spd2 of
- Just spd ->
- h3 [] [ text <| ("Starplot2 | ID:" ++ Maybe.withDefault "NaN" spd.id) ++ (" | " ++ Maybe.withDefault "NaN" spd.model) ]
-
- Nothing ->
- h3 [] [ text <| ("Starplot2 | ID:" ++ "NaN") ++ (" | " ++ "NaN") ]
- , text "ID1 auswaehlen: "
- , input [ placeholder "Enter a number", onInput InputChange1 ] []
- , button [ onClick SubmitNumber1 ] [ text "Submit for SP1" ]
- , text " ID2 auswaehlen: "
- , input [ placeholder "Enter a number", onInput InputChange2 ] []
- , button [ onClick SubmitNumber2 ] [ text "Submit for SP2" ]
+ [ Html.div [ class [ "description" ], align "center" ] [ Html.b [] [ Html.text "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren," ] ]
+ , Html.span [ class [ "plotStarInfo" ] ]
+ [ case spd1 of
+ Just spd ->
+ Html.span []
+ [ b [] [ text <| ("Starplot1 | ID:" ++ Maybe.withDefault "NaN" spd.id) ++ (" | " ++ Maybe.withDefault "NaN" spd.model) ]
+ , br [] []
+ , b [] [ text "Select ID1: " ]
+ , input [ placeholder "Enter a number", onInput InputChange1 ] []
+ , button [ onClick SubmitNumber1 ] [ text "Submit for SP1" ]
+ ]
+
+ Nothing ->
+ Html.span []
+ [ b [] [ text <| ("Starplot1 | ID:" ++ "NaN") ++ (" | " ++ "NaN") ]
+ , br [] []
+ , b [] [ text "Select ID1: " ]
+ , input [ placeholder "Enter a number", onInput InputChange1 ] []
+ , button [ onClick SubmitNumber1 ] [ text "Submit for SP1" ]
+ ]
+ , case spd2 of
+ Just spd ->
+ Html.span []
+ [ b [] [ text <| ("Starplot2 | ID:" ++ Maybe.withDefault "NaN" spd.id) ++ (" | " ++ Maybe.withDefault "NaN" spd.model) ]
+ , br [] []
+ , b [] [ text " Select ID2: " ]
+ , input [ placeholder "Enter a number", onInput InputChange2 ] []
+ , button [ onClick SubmitNumber2 ] [ text "Submit for SP2" ]
+ ]
+
+ Nothing ->
+ Html.span []
+ [ b [] [ text <| ("Starplot2 | ID:" ++ "NaN") ++ (" | " ++ "NaN") ]
+ , br [] []
+ , b [] [ text " Select ID2: " ]
+ , input [ placeholder "Enter a number", onInput InputChange2 ] []
+ , button [ onClick SubmitNumber2 ] [ text "Submit for SP2" ]
+ ]
+ ]
]
in
div []
diff --git a/src/TreeView.elm b/src/TreeView.elm
index 80f8d704e88cc34eb8a40f779e19cef9a0fb9c06..ec5b71c6c8f9df9be44a704e46b98e140fa96829 100644
--- a/src/TreeView.elm
+++ b/src/TreeView.elm
@@ -4,8 +4,8 @@ import Color
import Curve
import Debug exposing (toString)
import Hierarchy
-import Html exposing (Html, br, button, div, input, option, select, text)
-import Html.Attributes exposing (selected, value)
+import Html exposing (Html, b, button, div, input, option, select, text)
+import Html.Attributes exposing (align, selected, value)
import Html.Events exposing (onClick, onInput)
import List.Extra
import Model exposing (Model)
@@ -15,7 +15,7 @@ import Shape
import SmartPhoneType exposing (Smartphone)
import Tree exposing (Tree)
import TypedSvg exposing (g, rect, svg)
-import TypedSvg.Attributes exposing (dy, fill, href, id, pointerEvents, stroke, style, textAnchor, transform, viewBox)
+import TypedSvg.Attributes exposing (class, dy, fill, href, id, pointerEvents, stroke, style, textAnchor, transform, viewBox)
import TypedSvg.Attributes.InPx exposing (fontSize, height, strokeWidth, width, x, y)
import TypedSvg.Core exposing (Svg)
import TypedSvg.Events
@@ -182,24 +182,42 @@ viewTree model =
Tuple.second treeViewInfo
in
div []
- [ text ("Knoten im Baum: " ++ (toString <| Tuple.second nodeCounts) ++ " | Knoten gesamt: " ++ (toString <| Tuple.first nodeCounts))
- , br [] []
- , text ("manuelle entfernte Knoten: " ++ toString model.treeOption.dropCount)
- , br [] []
- , text "Anzahl zu entfernender Knoten: "
- , input [ onInput SetDropCountInput ] []
- , button [ onClick SetDropCount ] [ text "Entferne Knoten" ]
- , text " Brand: "
- , select [ onInput SetBrandTree ] (List.map (createSelectorOptions model.treeOption.selectedFilter.brand) brandFilterValues)
- , text " 5G: "
- , select [ onInput Set5GTree ]
- (List.map (createSelectorOptions model.treeOption.selectedFilter.g5) otherFilterValues)
- , text " NFC: "
- , select [ onInput SetNFCTree ]
- (List.map (createSelectorOptions model.treeOption.selectedFilter.nfc) otherFilterValues)
- , text " IR-Blaster: "
- , select [ onInput SetIRBlasterTree ]
- (List.map (createSelectorOptions model.treeOption.selectedFilter.ir_blaster) otherFilterValues)
+ [ Html.div [ class [ "description" ], align "center" ] [ Html.b [] [ Html.text "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren," ] ]
+ , Html.div [ class [ "plotTreeInfo" ] ]
+ [ Html.span [ class [ "plotAttributeSelect" ] ]
+ [ b [] [ text <| "Smartphones in Tree: " ++ (toString <| Tuple.second nodeCounts) ]
+ ]
+ , Html.span [ class [ "plotAttributeSelect" ] ]
+ [ b [] [ text <| "Total Smartphones: " ++ (toString <| Tuple.first nodeCounts) ]
+ ]
+ ]
+ , Html.span [ class [ "plotAttributeSelect" ] ]
+ [ b [] [ text " Brand: " ]
+ , select [ onInput SetBrandTree ] (List.map (createSelectorOptions model.treeOption.selectedFilter.brand) brandFilterValues)
+ ]
+ , Html.span [ class [ "plotAttributeSelect" ] ]
+ [ b [] [ text " 5G: " ]
+ , select [ onInput Set5GTree ]
+ (List.map (createSelectorOptions model.treeOption.selectedFilter.g5) otherFilterValues)
+ ]
+ , Html.span [ class [ "plotAttributeSelect" ] ]
+ [ b [] [ text " NFC: " ]
+ , select [ onInput SetNFCTree ]
+ (List.map (createSelectorOptions model.treeOption.selectedFilter.nfc) otherFilterValues)
+ ]
+ , Html.span [ class [ "plotAttributeSelect" ] ]
+ [ b [] [ text " IR-Blaster: " ]
+ , select [ onInput SetIRBlasterTree ]
+ (List.map (createSelectorOptions model.treeOption.selectedFilter.ir_blaster) otherFilterValues)
+ ]
+ , Html.span [ class [ "plotAttributeSelect" ] ]
+ [ b [] [ text "Number of nodes to remove: " ]
+ , input [ onInput SetDropCountInput ] []
+ , button [ onClick SetDropCount ] [ text "Remove nodes" ]
+ ]
+ , Html.span [ class [ "plotAttributeSelect" ] ]
+ [ b [] [ text ("Manual removed nodes: " ++ toString model.treeOption.dropCount) ]
+ ]
, treeView
]