From 30342a53493e41429083eeefc600372ffbae8cf5 Mon Sep 17 00:00:00 2001
From: Tom Schindler <tom.schindler@student.uni-halle.de>
Date: Fri, 16 Aug 2024 00:15:44 +0200
Subject: [PATCH] =?UTF-8?q?Css=20bei=20allen=20Plots,=20etwas=20Gestaltung?=
=?UTF-8?q?=20der=20Webseite=20(Caption,=20Men=C3=BC=20f=C3=BCr=20Plots=20?=
=?UTF-8?q?und=20Beschreibung),=20Anpassung=20Submit=20Button=20update=20F?=
=?UTF-8?q?ehlerbehandlung?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
public/index.html | 2 +-
public/main.js | 955 +++++++++++++++++++++++++++---------
public/style.css | 60 ++-
src/Main.elm | 39 +-
src/ParallelCoordinates.elm | 51 +-
src/Scatterplot.elm | 53 +-
src/Starplot.elm | 64 ++-
src/TreeView.elm | 60 ++-
8 files changed, 920 insertions(+), 364 deletions(-)
diff --git a/public/index.html b/public/index.html
index 57ee4ac..8dc6556 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 3445abb..56bceba 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 ae1f65d..d917049 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 8802cc2..3f872cb 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 55387c2..039cb14 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 84c4639..97619df 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 15d41de..08f9562 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 80f8d70..ec5b71c 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
]
--
GitLab