diff --git a/public/main.js b/public/main.js index 5ccb39f9be4624d57efb591d34af79ba367012be..e86b10fed054712542a3404f8bdbc58792a007a2 100644 --- a/public/main.js +++ b/public/main.js @@ -5417,9 +5417,9 @@ var $elm$core$Task$perform = F2( A2($elm$core$Task$map, toMessage, task))); }); var $elm$browser$Browser$element = _Browser_element; -var $author$project$Model$Model = F6( - function (data, error, csvdata, scatterplotOptions, parallelPlotOption, treeOption) { - return {csvdata: csvdata, data: data, error: error, parallelPlotOption: parallelPlotOption, scatterplotOptions: scatterplotOptions, treeOption: treeOption}; +var $author$project$Model$Model = F8( + function (data, error, csvdata, scatterplotOptions, parallelPlotOption, treeOption, starplotOption, plotVisible) { + return {csvdata: csvdata, data: data, error: error, parallelPlotOption: parallelPlotOption, plotVisible: plotVisible, scatterplotOptions: scatterplotOptions, starplotOption: starplotOption, treeOption: treeOption}; }); var $author$project$Main$DataReceived = function (a) { return {$: 'DataReceived', a: a}; @@ -6263,7 +6263,7 @@ var $gampleman$elm_visualization$Zoom$translateExtent = F2( var $author$project$TreeView$w = 990; var $author$project$Main$init = function (_v0) { return _Utils_Tuple2( - A6( + A8( $author$project$Model$Model, _List_Nil, $elm$core$Maybe$Nothing, @@ -6318,7 +6318,9 @@ var $author$project$Main$init = function (_v0) { 100, $gampleman$elm_visualization$Zoom$init( {height: $author$project$TreeView$h, width: $author$project$TreeView$w}))) - }), + }, + {modelID: '0'}, + {parallelCoordinatesPlot: false, scatterPlot: true, starPlot: false, treeView: false}), $author$project$Main$fetchData); }; var $author$project$Main$ZooomMsg = function (a) { @@ -9237,7 +9239,7 @@ var $author$project$Main$update = F2( }), $elm$core$Platform$Cmd$none); } - default: + case 'ZooomMsg': var m = msg.a; return _Utils_Tuple2( _Utils_update( @@ -9248,6 +9250,41 @@ var $author$project$Main$update = F2( } }), $elm$core$Platform$Cmd$none); + case 'StarplotMsg': + var _v3 = msg.a; + return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none); + case 'SetViewScatterplot': + return _Utils_Tuple2( + _Utils_update( + model, + { + plotVisible: {parallelCoordinatesPlot: false, scatterPlot: true, starPlot: false, treeView: false} + }), + $elm$core$Platform$Cmd$none); + case 'SetViewParallelCoordesPlot': + return _Utils_Tuple2( + _Utils_update( + model, + { + plotVisible: {parallelCoordinatesPlot: true, scatterPlot: false, starPlot: false, treeView: false} + }), + $elm$core$Platform$Cmd$none); + case 'SetViewTree': + return _Utils_Tuple2( + _Utils_update( + model, + { + plotVisible: {parallelCoordinatesPlot: false, scatterPlot: false, starPlot: false, treeView: true} + }), + $elm$core$Platform$Cmd$none); + default: + return _Utils_Tuple2( + _Utils_update( + model, + { + plotVisible: {parallelCoordinatesPlot: false, scatterPlot: false, starPlot: true, treeView: false} + }), + $elm$core$Platform$Cmd$none); } }); var $author$project$Main$ParallelCoordinatesMsg = function (a) { @@ -9256,18 +9293,40 @@ var $author$project$Main$ParallelCoordinatesMsg = function (a) { var $author$project$Main$ScatterplotMsg = function (a) { return {$: 'ScatterplotMsg', a: a}; }; +var $author$project$Main$SetViewParallelCoordesPlot = {$: 'SetViewParallelCoordesPlot'}; +var $author$project$Main$SetViewScatterplot = {$: 'SetViewScatterplot'}; +var $author$project$Main$SetViewStarPlot = {$: 'SetViewStarPlot'}; +var $author$project$Main$SetViewTree = {$: 'SetViewTree'}; +var $author$project$Main$StarplotMsg = function (a) { + return {$: 'StarplotMsg', a: a}; +}; var $author$project$Main$TreeViewMsg = function (a) { return {$: 'TreeViewMsg', a: a}; }; +var $elm$html$Html$br = _VirtualDom_node('br'); +var $elm$html$Html$button = _VirtualDom_node('button'); 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; -var $author$project$ParallelCoordinates$ChangeOrder = F2( - function (a, b) { - return {$: 'ChangeOrder', a: a, b: b}; +var $elm$virtual_dom$VirtualDom$Normal = function (a) { + return {$: 'Normal', a: a}; +}; +var $elm$virtual_dom$VirtualDom$on = _VirtualDom_on; +var $elm$html$Html$Events$on = F2( + function (event, decoder) { + return A2( + $elm$virtual_dom$VirtualDom$on, + event, + $elm$virtual_dom$VirtualDom$Normal(decoder)); }); -var $elm$html$Html$br = _VirtualDom_node('br'); -var $elm$html$Html$button = _VirtualDom_node('button'); +var $elm$html$Html$Events$onClick = function (msg) { + return A2( + $elm$html$Html$Events$on, + 'click', + $elm$json$Json$Decode$succeed(msg)); +}; +var $elm$virtual_dom$VirtualDom$text = _VirtualDom_text; +var $elm$html$Html$text = $elm$virtual_dom$VirtualDom$text; var $elm$core$Maybe$andThen = F2( function (callback, maybeValue) { if (maybeValue.$ === 'Just') { @@ -9401,26 +9460,10 @@ var $author$project$ParallelCoordinates$filterSPData = function (smartphone) { var smartphoneList = A2($elm$core$List$filterMap, $author$project$ParallelCoordinates$mapToSPData, smartphone); return smartphoneList; }; -var $elm$virtual_dom$VirtualDom$Normal = function (a) { - return {$: 'Normal', a: a}; -}; -var $elm$virtual_dom$VirtualDom$on = _VirtualDom_on; -var $elm$html$Html$Events$on = F2( - function (event, decoder) { - return A2( - $elm$virtual_dom$VirtualDom$on, - event, - $elm$virtual_dom$VirtualDom$Normal(decoder)); - }); -var $elm$html$Html$Events$onClick = function (msg) { - return A2( - $elm$html$Html$Events$on, - 'click', - $elm$json$Json$Decode$succeed(msg)); -}; var $elm_community$typed_svg$TypedSvg$Types$Percent = function (a) { return {$: 'Percent', a: a}; }; +var $author$project$ParallelCoordinates$axisPaddig = 40; var $gampleman$elm_visualization$Scale$convert = F2( function (_v0, value) { var scale = _v0.a; @@ -10205,7 +10248,13 @@ var $author$project$ParallelCoordinates$createLine = function (path) { ])) ])); }; +var $elm_community$typed_svg$TypedSvg$Types$AnchorEnd = {$: 'AnchorEnd'}; var $elm_community$typed_svg$TypedSvg$Types$AnchorMiddle = {$: 'AnchorMiddle'}; +var $elm_community$typed_svg$TypedSvg$Types$AnchorStart = {$: 'AnchorStart'}; +var $author$project$ParallelCoordinates$ChangeOrder = F2( + function (a, b) { + return {$: 'ChangeOrder', a: a, b: b}; + }); var $elm_community$typed_svg$TypedSvg$Types$Translate = F2( function (a, b) { return {$: 'Translate', a: a, b: b}; @@ -10222,8 +10271,6 @@ var $elm_community$typed_svg$TypedSvg$Attributes$fontSize = function (length) { 'font-size', $elm_community$typed_svg$TypedSvg$TypesToStrings$lengthToString(length)); }; -var $elm$virtual_dom$VirtualDom$text = _VirtualDom_text; -var $elm$html$Html$text = $elm$virtual_dom$VirtualDom$text; var $elm_community$typed_svg$TypedSvg$TypesToStrings$anchorAlignmentToString = function (anchorAlignment) { switch (anchorAlignment.$) { case 'AnchorInherit': @@ -10322,6 +10369,16 @@ var $elm_community$typed_svg$TypedSvg$Attributes$transform = function (transform A2($elm$core$List$map, $elm_community$typed_svg$TypedSvg$TypesToStrings$transformToString, transforms))); }; var $elm_community$typed_svg$TypedSvg$Types$px = $elm_community$typed_svg$TypedSvg$Types$Px; +var $elm_community$typed_svg$TypedSvg$Attributes$x = function (length) { + return A2( + $elm_community$typed_svg$TypedSvg$Core$attribute, + 'x', + $elm_community$typed_svg$TypedSvg$TypesToStrings$lengthToString(length)); +}; +var $elm_community$typed_svg$TypedSvg$Attributes$InPx$x = function (value) { + return $elm_community$typed_svg$TypedSvg$Attributes$x( + $elm_community$typed_svg$TypedSvg$Types$px(value)); +}; var $elm_community$typed_svg$TypedSvg$Attributes$y = function (length) { return A2( $elm_community$typed_svg$TypedSvg$Core$attribute, @@ -10539,6 +10596,9 @@ var $author$project$ParallelCoordinates$yAxis = function (scale) { var $author$project$ParallelCoordinates$createYAxis = F3( function (scaleX, scaleY, text) { var index = scaleY.a; + var indexF = index; + var indexafter = (index === 9) ? 0 : (index + 1); + var indexbefore = (!index) ? 9 : (index - 1); return A2( $elm_community$typed_svg$TypedSvg$g, _List_fromArray( @@ -10548,23 +10608,53 @@ var $author$project$ParallelCoordinates$createYAxis = F3( [ A2( $elm_community$typed_svg$TypedSvg$Types$Translate, - A2($gampleman$elm_visualization$Scale$convert, scaleX, index), - 20) - ])) + A2($gampleman$elm_visualization$Scale$convert, scaleX, indexF), + $author$project$ParallelCoordinates$axisPaddig) + ])), + $elm_community$typed_svg$TypedSvg$Attributes$class( + _List_fromArray( + ['axis'])) ]), _List_fromArray( [ A2( $elm_community$typed_svg$TypedSvg$g, + _List_Nil, _List_fromArray( [ - $elm_community$typed_svg$TypedSvg$Attributes$class( - _List_fromArray( - ['axis'])) + $author$project$ParallelCoordinates$yAxis(scaleY.b) + ])), + A2( + $elm_community$typed_svg$TypedSvg$text_, + _List_fromArray( + [ + $elm_community$typed_svg$TypedSvg$Attributes$InPx$x(-10), + $elm_community$typed_svg$TypedSvg$Attributes$InPx$y(-30), + $elm_community$typed_svg$TypedSvg$Attributes$textAnchor($elm_community$typed_svg$TypedSvg$Types$AnchorEnd), + $elm_community$typed_svg$TypedSvg$Attributes$fontSize( + $elm_community$typed_svg$TypedSvg$Types$Px(10)), + $elm$html$Html$Events$onClick( + A2($author$project$ParallelCoordinates$ChangeOrder, index, indexbefore)) ]), _List_fromArray( [ - $author$project$ParallelCoordinates$yAxis(scaleY.b) + $elm$html$Html$text('<<< ') + ])), + A2( + $elm_community$typed_svg$TypedSvg$text_, + _List_fromArray( + [ + $elm_community$typed_svg$TypedSvg$Attributes$InPx$x(10), + $elm_community$typed_svg$TypedSvg$Attributes$InPx$y(-30), + $elm_community$typed_svg$TypedSvg$Attributes$textAnchor($elm_community$typed_svg$TypedSvg$Types$AnchorStart), + $elm_community$typed_svg$TypedSvg$Attributes$fontSize( + $elm_community$typed_svg$TypedSvg$Types$Px(10)), + $elm$html$Html$Events$onClick( + A2($author$project$ParallelCoordinates$ChangeOrder, index, indexafter)) + ]), + _List_fromArray( + [ + $elm$html$Html$text('>>>') ])), A2( $elm_community$typed_svg$TypedSvg$text_, @@ -11228,7 +11318,7 @@ var $author$project$ParallelCoordinates$wideExtent = function (values) { var $author$project$ParallelCoordinates$xScale = function (values) { return A2( $gampleman$elm_visualization$Scale$linear, - _Utils_Tuple2($author$project$ParallelCoordinates$padding, $author$project$ParallelCoordinates$w - $author$project$ParallelCoordinates$padding), + _Utils_Tuple2($author$project$ParallelCoordinates$padding, $author$project$ParallelCoordinates$w), $author$project$ParallelCoordinates$wideExtent(values)); }; var $author$project$ParallelCoordinates$yScale = function (values) { @@ -11293,7 +11383,7 @@ var $author$project$ParallelCoordinates$parallelCoordinatesPlot = F2( return $elm$core$Maybe$Just( _Utils_Tuple2( A2($gampleman$elm_visualization$Scale$convert, xScaleLocal, x), - A2($gampleman$elm_visualization$Scale$convert, yS, y) + 20)); + A2($gampleman$elm_visualization$Scale$convert, yS, y) + $author$project$ParallelCoordinates$axisPaddig)); }), yScaleLocals, yPoints, @@ -11373,7 +11463,7 @@ var $author$project$ParallelCoordinates$parallelCoordinatesPlot = F2( $elm_community$typed_svg$TypedSvg$svg, _List_fromArray( [ - A4($elm_community$typed_svg$TypedSvg$Attributes$viewBox, 0, 0, $author$project$ParallelCoordinates$w + 30, $author$project$ParallelCoordinates$h + 30), + A4($elm_community$typed_svg$TypedSvg$Attributes$viewBox, 0, 0, $author$project$ParallelCoordinates$w + 45, $author$project$ParallelCoordinates$h + 45), $elm_community$typed_svg$TypedSvg$Attributes$width( $elm_community$typed_svg$TypedSvg$Types$Percent(100)), $elm_community$typed_svg$TypedSvg$Attributes$height( @@ -11387,7 +11477,7 @@ var $author$project$ParallelCoordinates$parallelCoordinatesPlot = F2( _List_Nil, _List_fromArray( [ - $elm_community$typed_svg$TypedSvg$Core$text('\r\n .axis text { display: none; }\r\n .axis:hover text { display: inline; }\r\n .axis1:hover text {display: inline; }\r\n ') + $elm_community$typed_svg$TypedSvg$Core$text('\r\n .axis .tick text { display: none; }\r\n .axis:hover .tick text { display: inline; }\r\n ') ])), A2($elm_community$typed_svg$TypedSvg$g, _List_Nil, _List_Nil) ]), @@ -11400,107 +11490,6 @@ var $author$project$ParallelCoordinates$viewParallelCoordinates = function (mode _List_Nil, _List_fromArray( [ - A2( - $elm$html$Html$button, - _List_fromArray( - [ - $elm$html$Html$Events$onClick( - A2($author$project$ParallelCoordinates$ChangeOrder, 0, 1)) - ]), - _List_fromArray( - [ - $elm$html$Html$text('1<->2') - ])), - A2( - $elm$html$Html$button, - _List_fromArray( - [ - $elm$html$Html$Events$onClick( - A2($author$project$ParallelCoordinates$ChangeOrder, 1, 2)) - ]), - _List_fromArray( - [ - $elm$html$Html$text('2<->3') - ])), - A2( - $elm$html$Html$button, - _List_fromArray( - [ - $elm$html$Html$Events$onClick( - A2($author$project$ParallelCoordinates$ChangeOrder, 2, 3)) - ]), - _List_fromArray( - [ - $elm$html$Html$text('3<->4') - ])), - A2( - $elm$html$Html$button, - _List_fromArray( - [ - $elm$html$Html$Events$onClick( - A2($author$project$ParallelCoordinates$ChangeOrder, 3, 4)) - ]), - _List_fromArray( - [ - $elm$html$Html$text('4<->5') - ])), - A2( - $elm$html$Html$button, - _List_fromArray( - [ - $elm$html$Html$Events$onClick( - A2($author$project$ParallelCoordinates$ChangeOrder, 4, 5)) - ]), - _List_fromArray( - [ - $elm$html$Html$text('5<->6') - ])), - A2( - $elm$html$Html$button, - _List_fromArray( - [ - $elm$html$Html$Events$onClick( - A2($author$project$ParallelCoordinates$ChangeOrder, 5, 6)) - ]), - _List_fromArray( - [ - $elm$html$Html$text('6<->7') - ])), - A2( - $elm$html$Html$button, - _List_fromArray( - [ - $elm$html$Html$Events$onClick( - A2($author$project$ParallelCoordinates$ChangeOrder, 6, 7)) - ]), - _List_fromArray( - [ - $elm$html$Html$text('7<->8') - ])), - A2( - $elm$html$Html$button, - _List_fromArray( - [ - $elm$html$Html$Events$onClick( - A2($author$project$ParallelCoordinates$ChangeOrder, 7, 8)) - ]), - _List_fromArray( - [ - $elm$html$Html$text('8<->9') - ])), - A2( - $elm$html$Html$button, - _List_fromArray( - [ - $elm$html$Html$Events$onClick( - A2($author$project$ParallelCoordinates$ChangeOrder, 8, 9)) - ]), - _List_fromArray( - [ - $elm$html$Html$text('9<->10') - ])), - 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) ])); }; @@ -11696,8 +11685,9 @@ var $author$project$Scatterplot$XyData = F3( function (xDescription, yDescription, data) { return {data: data, xDescription: xDescription, yDescription: yDescription}; }); -var $elm$core$Maybe$map3 = F4( - function (func, ma, mb, mc) { +var $elm$core$List$map4 = _List_map4; +var $elm$core$Maybe$map4 = F5( + function (func, ma, mb, mc, md) { if (ma.$ === 'Nothing') { return $elm$core$Maybe$Nothing; } else { @@ -11710,18 +11700,24 @@ var $elm$core$Maybe$map3 = F4( return $elm$core$Maybe$Nothing; } else { var c = mc.a; - return $elm$core$Maybe$Just( - A3(func, a, b, c)); + if (md.$ === 'Nothing') { + return $elm$core$Maybe$Nothing; + } else { + var d = md.a; + return $elm$core$Maybe$Just( + A4(func, a, b, c, d)); + } } } } }); var $author$project$Scatterplot$mapToPoint = function (smartphoneData) { - return A4( - $elm$core$Maybe$map3, - F3( - function (att1, att2, name) { + return A5( + $elm$core$Maybe$map4, + F4( + function (att1, att2, name, index) { return { + id: index, pointName: name + (' (' + ($elm$core$String$fromFloat(att1) + (',' + ($elm$core$String$fromFloat(att2) + ')')))), x: att1, y: att2 @@ -11729,7 +11725,8 @@ var $author$project$Scatterplot$mapToPoint = function (smartphoneData) { }), smartphoneData.att1, smartphoneData.att2, - smartphoneData.name); + smartphoneData.name, + smartphoneData.id); }; var $author$project$Scatterplot$filterSmartphonesXY = F3( function (model, att1List, att2List) { @@ -11739,15 +11736,22 @@ var $author$project$Scatterplot$filterSmartphonesXY = F3( return $.model; }, model.data); - var smartphoneDataList = A4( - $elm$core$List$map3, - F3( - function (a1, a2, mn) { - return {att1: a1, att2: a2, name: mn}; + var idList = A2( + $elm$core$List$map, + function ($) { + return $.id; + }, + model.data); + var smartphoneDataList = A5( + $elm$core$List$map4, + F4( + function (a1, a2, mn, i) { + return {att1: a1, att2: a2, id: i, name: mn}; }), att1List, att2List, - modelList); + modelList, + idList); 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); }); @@ -11795,16 +11799,6 @@ var $elm_community$typed_svg$TypedSvg$Attributes$InPx$r = function (value) { $elm_community$typed_svg$TypedSvg$Types$px(value)); }; var $author$project$Scatterplot$radius = 2.0; -var $elm_community$typed_svg$TypedSvg$Attributes$x = function (length) { - return A2( - $elm_community$typed_svg$TypedSvg$Core$attribute, - 'x', - $elm_community$typed_svg$TypedSvg$TypesToStrings$lengthToString(length)); -}; -var $elm_community$typed_svg$TypedSvg$Attributes$InPx$x = function (value) { - return $elm_community$typed_svg$TypedSvg$Attributes$x( - $elm_community$typed_svg$TypedSvg$Types$px(value)); -}; var $author$project$Scatterplot$point = F3( function (scaleX, scaleY, xyPoint) { return A2( @@ -12058,6 +12052,91 @@ var $author$project$Scatterplot$viewScatterplot = function (model) { $author$project$Scatterplot$scatterplot(filteredSmartphoneData) ])); }; +var $author$project$Starplot$checkID = F2( + function (modelID, smartphone) { + return _Utils_eq( + A2($elm$core$Maybe$withDefault, 'NaN', smartphone.id), + modelID); + }); +var $author$project$Starplot$findSmartphoneById = function (model) { + return $elm$core$List$head( + A2( + $elm$core$List$filter, + $author$project$Starplot$checkID(model.starplotOption.modelID), + model.data)); +}; +var $author$project$Starplot$h = 450; +var $elm_community$typed_svg$TypedSvg$Attributes$InPx$height = function (value) { + return $elm_community$typed_svg$TypedSvg$Attributes$height( + $elm_community$typed_svg$TypedSvg$Types$px(value)); +}; +var $author$project$Starplot$midX = 450; +var $author$project$Starplot$midY = 225; +var $elm_community$typed_svg$TypedSvg$rect = $elm_community$typed_svg$TypedSvg$Core$node('rect'); +var $avh4$elm_color$Color$rgba = F4( + function (r, g, b, a) { + return A4($avh4$elm_color$Color$RgbaSpace, r, g, b, a); + }); +var $elm_community$typed_svg$TypedSvg$Attributes$InPx$strokeWidth = function (value) { + return $elm_community$typed_svg$TypedSvg$Attributes$strokeWidth( + $elm_community$typed_svg$TypedSvg$Types$px(value)); +}; +var $author$project$Starplot$w = 990; +var $elm_community$typed_svg$TypedSvg$Attributes$InPx$width = function (value) { + return $elm_community$typed_svg$TypedSvg$Attributes$width( + $elm_community$typed_svg$TypedSvg$Types$px(value)); +}; +var $author$project$Starplot$starplot = function (smartphone) { + var a = 1; + return A2( + $elm_community$typed_svg$TypedSvg$svg, + _List_fromArray( + [ + A4($elm_community$typed_svg$TypedSvg$Attributes$viewBox, 0, 0, $author$project$Starplot$w, $author$project$Starplot$h), + $elm_community$typed_svg$TypedSvg$Attributes$width( + $elm_community$typed_svg$TypedSvg$Types$Percent(100)), + $elm_community$typed_svg$TypedSvg$Attributes$height( + $elm_community$typed_svg$TypedSvg$Types$Percent(100)) + ]), + _List_fromArray( + [ + A2( + $elm_community$typed_svg$TypedSvg$rect, + _List_fromArray( + [ + $elm_community$typed_svg$TypedSvg$Attributes$InPx$width($author$project$Starplot$midX), + $elm_community$typed_svg$TypedSvg$Attributes$InPx$height($author$project$Starplot$midY), + $elm_community$typed_svg$TypedSvg$Attributes$fill( + $elm_community$typed_svg$TypedSvg$Types$Paint( + A4($avh4$elm_color$Color$rgba, 0, 0, 0, 0))), + $elm_community$typed_svg$TypedSvg$Attributes$stroke( + $elm_community$typed_svg$TypedSvg$Types$Paint($avh4$elm_color$Color$black)), + $elm_community$typed_svg$TypedSvg$Attributes$InPx$strokeWidth(2) + ]), + _List_Nil), + A2( + $elm_community$typed_svg$TypedSvg$text_, + _List_fromArray( + [ + $elm_community$typed_svg$TypedSvg$Attributes$InPx$x(100), + $elm_community$typed_svg$TypedSvg$Attributes$InPx$y(100) + ]), + _List_fromArray( + [ + $elm$html$Html$text('Test, hier entsteht bald ein StarPlot.') + ])) + ])); +}; +var $author$project$Starplot$viewStarplot = function (model) { + var starplotData = $author$project$Starplot$findSmartphoneById(model); + return _Utils_eq(starplotData, $elm$core$Maybe$Nothing) ? A2( + $elm$html$Html$div, + _List_Nil, + _List_fromArray( + [ + $elm$html$Html$text('Error: Starplot kann nicht dargestellt werden, da zu dieser Id keine Data vorliegen.') + ])) : $author$project$Starplot$starplot(starplotData); +}; var $author$project$TreeView$ZoomMsg = function (a) { return {$: 'ZoomMsg', a: a}; }; @@ -12451,10 +12530,6 @@ var $gampleman$elm_visualization$Zoom$events = F2( A2($gampleman$elm_visualization$Zoom$onGesture, zoom, tagger), A2($gampleman$elm_visualization$Zoom$onTouch, zoom, tagger))))); }); -var $elm_community$typed_svg$TypedSvg$Attributes$InPx$height = function (value) { - return $elm_community$typed_svg$TypedSvg$Attributes$height( - $elm_community$typed_svg$TypedSvg$Types$px(value)); -}; var $author$project$TreeView$Click = function (a) { return {$: 'Click', a: a}; }; @@ -14700,8 +14775,7 @@ var $elm$core$Result$withDefault = F2( }); var $author$project$TreeView$tree = function (model) { var filteredSmartphoneData = $author$project$TreeView$filterSPData(model.data); - var lengthFSP = $elm$core$List$length(filteredSmartphoneData); - var limitedfilteredSmartphones = A2($elm$core$List$drop, 0, filteredSmartphoneData); + var limitedfilteredSmartphones = A2($elm$core$List$drop, 500, filteredSmartphoneData); return A2( $gampleman$elm_rosetree$Tree$sortBy, A2( @@ -14904,11 +14978,6 @@ var $gampleman$elm_rosetree$Tree$links = function (t) { _List_Nil, t)); }; -var $elm_community$typed_svg$TypedSvg$rect = $elm_community$typed_svg$TypedSvg$Core$node('rect'); -var $avh4$elm_color$Color$rgba = F4( - function (r, g, b, a) { - return A4($avh4$elm_color$Color$RgbaSpace, r, g, b, a); - }); var $gampleman$elm_rosetree$Tree$foldr = F3( function (f, acc, t) { return A3( @@ -14931,10 +15000,6 @@ var $gampleman$elm_visualization$Zoom$transform = function (_v0) { return $elm$svg$Svg$Attributes$transform( $gampleman$elm_visualization$Zoom$Transform$toString(zoom.transform)); }; -var $elm_community$typed_svg$TypedSvg$Attributes$InPx$width = function (value) { - return $elm_community$typed_svg$TypedSvg$Attributes$width( - $elm_community$typed_svg$TypedSvg$Types$px(value)); -}; var $author$project$TreeView$viewTree = function (model) { return A2( $elm_community$typed_svg$TypedSvg$svg, @@ -14957,7 +15022,14 @@ var $author$project$TreeView$viewTree = function (model) { $elm_community$typed_svg$TypedSvg$Attributes$fill( $elm_community$typed_svg$TypedSvg$Types$Paint( A4($avh4$elm_color$Color$rgba, 0, 0, 0, 0))), - A2($gampleman$elm_visualization$Zoom$events, model.treeOption.zoomOption, $author$project$TreeView$ZoomMsg)))), + A2( + $elm$core$List$cons, + $elm_community$typed_svg$TypedSvg$Attributes$stroke( + $elm_community$typed_svg$TypedSvg$Types$Paint($avh4$elm_color$Color$black)), + A2( + $elm$core$List$cons, + $elm_community$typed_svg$TypedSvg$Attributes$InPx$strokeWidth(2), + A2($gampleman$elm_visualization$Zoom$events, model.treeOption.zoomOption, $author$project$TreeView$ZoomMsg)))))), _List_Nil), A2( $elm_community$typed_svg$TypedSvg$g, @@ -15026,17 +15098,63 @@ var $author$project$Main$view = function (model) { _List_fromArray( [ A2( + $elm$html$Html$button, + _List_fromArray( + [ + $elm$html$Html$Events$onClick($author$project$Main$SetViewScatterplot) + ]), + _List_fromArray( + [ + $elm$html$Html$text('Scatterplot') + ])), + A2( + $elm$html$Html$button, + _List_fromArray( + [ + $elm$html$Html$Events$onClick($author$project$Main$SetViewParallelCoordesPlot) + ]), + _List_fromArray( + [ + $elm$html$Html$text('ParallelCoordinates') + ])), + A2( + $elm$html$Html$button, + _List_fromArray( + [ + $elm$html$Html$Events$onClick($author$project$Main$SetViewTree) + ]), + _List_fromArray( + [ + $elm$html$Html$text('TreeView') + ])), + A2( + $elm$html$Html$button, + _List_fromArray( + [ + $elm$html$Html$Events$onClick($author$project$Main$SetViewStarPlot) + ]), + _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, - $author$project$Scatterplot$viewScatterplot(model)), - A2( + $author$project$Scatterplot$viewScatterplot(model)) : A2($elm$html$Html$div, _List_Nil, _List_Nil), + model.plotVisible.parallelCoordinatesPlot ? A2( $elm$html$Html$map, $author$project$Main$ParallelCoordinatesMsg, - $author$project$ParallelCoordinates$viewParallelCoordinates(model)), - A2( + $author$project$ParallelCoordinates$viewParallelCoordinates(model)) : A2($elm$html$Html$div, _List_Nil, _List_Nil), + model.plotVisible.treeView ? A2( $elm$html$Html$map, $author$project$Main$TreeViewMsg, - $author$project$TreeView$viewTree(model)) + $author$project$TreeView$viewTree(model)) : A2($elm$html$Html$div, _List_Nil, _List_Nil), + model.plotVisible.starPlot ? A2( + $elm$html$Html$map, + $author$project$Main$StarplotMsg, + $author$project$Starplot$viewStarplot(model)) : A2($elm$html$Html$div, _List_Nil, _List_Nil) ])); }; var $author$project$Main$main = $elm$browser$Browser$element( diff --git a/src/Main.elm b/src/Main.elm index c8506f28d99d7016afd94d21cfbf288995e4c430..4ad2ea43a7a0bef8d9532d31429d9dc169377464 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, div) +import Html exposing (Html, br, button, div, text) +import Html.Events exposing (onClick) import Http import List.Extra import Model exposing (Model) @@ -10,6 +11,7 @@ import ParallelCoordinates exposing (Msg(..)) import Result exposing (Result(..)) import Scatterplot exposing (Msg(..)) import SmartPhoneType exposing (Smartphone) +import Starplot exposing (Msg(..)) import TreeView exposing (Msg(..)) import Zoom @@ -22,18 +24,6 @@ main = Browser.element { init = init, update = update, subscriptions = subscriptions, view = view } - --- MODEL -{- type alias Model = - { data : List Smartphone - , error : Maybe String - , csvdata : String - , scatterplotOptions : ScatterPlotOption - , parallelPlotOption : ParallelPlotOption - } --} - - init : () -> ( Model, Cmd Msg ) init _ = ( Model [] @@ -70,6 +60,13 @@ init _ = |> Zoom.scaleExtent 1 100 |> Zoom.translateExtent ( ( 0, 0 ), ( TreeView.w, TreeView.h ) ) } + { modelID = "0" + } + { scatterPlot = True + , parallelCoordinatesPlot = False + , treeView = False + , starPlot = False + } , fetchData ) @@ -84,7 +81,12 @@ type Msg | ScatterplotMsg Scatterplot.Msg | ParallelCoordinatesMsg ParallelCoordinates.Msg | TreeViewMsg TreeView.Msg + | StarplotMsg Starplot.Msg | ZooomMsg Zoom.OnZoom + | SetViewScatterplot + | SetViewParallelCoordesPlot + | SetViewTree + | SetViewStarPlot update : Msg -> Model -> ( Model, Cmd Msg ) @@ -151,6 +153,23 @@ update msg model = ZooomMsg m -> ( { model | treeOption = { zoomOption = Zoom.update m model.treeOption.zoomOption } }, Cmd.none ) + StarplotMsg Nothing1 -> + ( model + , Cmd.none + ) + + SetViewScatterplot -> + ( { model | plotVisible = { scatterPlot = True, parallelCoordinatesPlot = False, treeView = False, starPlot = False } }, Cmd.none ) + + SetViewParallelCoordesPlot -> + ( { model | plotVisible = { scatterPlot = False, parallelCoordinatesPlot = True, treeView = False, starPlot = False } }, Cmd.none ) + + SetViewTree -> + ( { model | plotVisible = { scatterPlot = False, parallelCoordinatesPlot = False, treeView = True, starPlot = False } }, Cmd.none ) + + SetViewStarPlot -> + ( { model | plotVisible = { scatterPlot = False, parallelCoordinatesPlot = False, treeView = False, starPlot = True } }, Cmd.none ) + createAttList : Model -> String -> List (Maybe Float) createAttList model att = @@ -195,9 +214,32 @@ createAttList model att = view : Model -> Html Msg view model = div [] - [ Scatterplot.viewScatterplot model |> Html.map ScatterplotMsg - , ParallelCoordinates.viewParallelCoordinates model |> Html.map ParallelCoordinatesMsg - , TreeView.viewTree model |> Html.map TreeViewMsg + [ button [ onClick SetViewScatterplot ] [ text "Scatterplot" ] + , button [ onClick SetViewParallelCoordesPlot ] [ text "ParallelCoordinates" ] + , button [ onClick SetViewTree ] [ text "TreeView" ] + , button [ onClick SetViewStarPlot ] [ text "Starplot" ] + , br [] [] + , br [] [] + , if model.plotVisible.scatterPlot then + Scatterplot.viewScatterplot model |> Html.map ScatterplotMsg + + else + div [] [] + , if model.plotVisible.parallelCoordinatesPlot then + ParallelCoordinates.viewParallelCoordinates model |> Html.map ParallelCoordinatesMsg + + else + div [] [] + , if model.plotVisible.treeView then + TreeView.viewTree model |> Html.map TreeViewMsg + + else + div [] [] + , if model.plotVisible.starPlot then + Starplot.viewStarplot model |> Html.map StarplotMsg + + else + div [] [] ] diff --git a/src/Model.elm b/src/Model.elm index c1f0075b9ef3cf819bb041787805af13a6f54eef..02e8b1cd17e301fe5f35c1e738a443da1cf637fb 100644 --- a/src/Model.elm +++ b/src/Model.elm @@ -11,6 +11,13 @@ type alias Model = , scatterplotOptions : ScatterPlotOption , parallelPlotOption : ParallelPlotOption , treeOption : TreeOption + , starplotOption : StarPlotOption + , plotVisible : + { scatterPlot : Bool + , parallelCoordinatesPlot : Bool + , treeView : Bool + , starPlot : Bool + } } @@ -31,3 +38,8 @@ type alias ParallelPlotOption = type alias TreeOption = { zoomOption : Zoom } + + +type alias StarPlotOption = + { modelID : String + } diff --git a/src/ParallelCoordinates.elm b/src/ParallelCoordinates.elm index 50186070b51712126e50d8949a51400e350b3f1f..f5933ba2fdd275e3f6deeda97265c293541420b6 100644 --- a/src/ParallelCoordinates.elm +++ b/src/ParallelCoordinates.elm @@ -5,7 +5,7 @@ module ParallelCoordinates exposing (..) import Axis exposing (..) import Color import ExtendedFunctions exposing (listmap10, map10) -import Html exposing (Html, br, button, text) +import Html exposing (Html, text) import Html.Events exposing (onClick) import List import Maybe @@ -37,6 +37,11 @@ padding = 50 +axisPaddig : Float +axisPaddig = + 40 + + tickCount : Int tickCount = 3 @@ -47,7 +52,7 @@ defaultExtent = ( 0, 200000 ) -parallelCoordinatesPlot : Model -> List Smartphone -> Svg msg +parallelCoordinatesPlot : Model -> List Smartphone -> Svg Msg parallelCoordinatesPlot model smartphonesList = let getAttributeList : (Smartphone -> Maybe Float) -> List Smartphone -> List (Maybe Float) @@ -129,7 +134,7 @@ parallelCoordinatesPlot model smartphonesList = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ] yPointsScaled = - List.map3 (\yS y x -> Just ( Scale.convert xScaleLocal x, Scale.convert yS y + 20 )) yScaleLocals yPoints xPoints + List.map3 (\yS y x -> Just ( Scale.convert xScaleLocal x, Scale.convert yS y + axisPaddig )) yScaleLocals yPoints xPoints in yPointsScaled |> Shape.line Shape.linearCurve @@ -137,14 +142,13 @@ parallelCoordinatesPlot model smartphonesList = List.map createLine paths in svg - [ viewBox 0 0 (w + 30) (h + 30) + [ viewBox 0 0 (w + 45) (h + 45) , TypedSvg.Attributes.width <| TypedSvg.Types.Percent 100 , TypedSvg.Attributes.height <| TypedSvg.Types.Percent 100 ] ([ style [] [ TypedSvg.Core.text """ - .axis text { display: none; } - .axis:hover text { display: inline; } - .axis1:hover text {display: inline; } + .axis .tick text { display: none; } + .axis:hover .tick text { display: inline; } """ ] , g [] [] ] @@ -164,14 +168,37 @@ createLine path = ] -createYAxis : ContinuousScale Float -> ( Int, ContinuousScale Float ) -> String -> Svg msg +createYAxis : ContinuousScale Float -> ( Int, ContinuousScale Float ) -> String -> Svg Msg createYAxis scaleX scaleY text = let index = - Tuple.first scaleY |> toFloat + Tuple.first scaleY + + indexF = + index |> toFloat + + indexbefore = + if index == 0 then + 9 + + else + index - 1 + + indexafter = + if index == 9 then + 0 + + else + index + 1 in - g [ transform [ Translate (Scale.convert scaleX index) 20 ] ] - [ g [ class [ "axis" ] ] [ yAxis (Tuple.second scaleY) ] + g [ transform [ Translate (Scale.convert scaleX indexF) axisPaddig ], class [ "axis" ] ] + [ g [] [ yAxis (Tuple.second scaleY) ] + , text_ + [ x -10, y -30, textAnchor AnchorEnd, fontSize <| Px 10, onClick (ChangeOrder index indexbefore) ] + [ Html.text "<<< " ] + , text_ + [ x 10, y -30, textAnchor AnchorStart, fontSize <| Px 10, onClick (ChangeOrder index indexafter) ] + [ Html.text ">>>" ] , text_ [ y -10, textAnchor AnchorMiddle, fontSize <| Px 14 ] [ Html.text text ] @@ -185,7 +212,7 @@ yAxis scale = xScale : List Float -> ContinuousScale Float xScale values = - Scale.linear ( padding, w - padding ) (wideExtent values) + Scale.linear ( padding, w ) (wideExtent values) yScale : List Float -> ContinuousScale Float @@ -297,18 +324,19 @@ viewParallelCoordinates model = filterSPData model.data in Html.div [] - [ button [ onClick (ChangeOrder 0 1) ] [ text "1<->2" ] - , button [ onClick (ChangeOrder 1 2) ] [ text "2<->3" ] - , button [ onClick (ChangeOrder 2 3) ] [ text "3<->4" ] - , button [ onClick (ChangeOrder 3 4) ] [ text "4<->5" ] - , button [ onClick (ChangeOrder 4 5) ] [ text "5<->6" ] - , button [ onClick (ChangeOrder 5 6) ] [ text "6<->7" ] - , button [ onClick (ChangeOrder 6 7) ] [ text "7<->8" ] - , button [ onClick (ChangeOrder 7 8) ] [ text "8<->9" ] - , button [ onClick (ChangeOrder 8 9) ] [ text "9<->10" ] - , br [] [] - , br [] [] - , parallelCoordinatesPlot model filteredSmartphoneData + [ {- button [ onClick (ChangeOrder 0 1) ] [ text "1<->2" ] + , button [ onClick (ChangeOrder 1 2) ] [ text "2<->3" ] + , button [ onClick (ChangeOrder 2 3) ] [ text "3<->4" ] + , button [ onClick (ChangeOrder 3 4) ] [ text "4<->5" ] + , button [ onClick (ChangeOrder 4 5) ] [ text "5<->6" ] + , button [ onClick (ChangeOrder 5 6) ] [ text "6<->7" ] + , button [ onClick (ChangeOrder 6 7) ] [ text "7<->8" ] + , button [ onClick (ChangeOrder 7 8) ] [ text "8<->9" ] + , button [ onClick (ChangeOrder 8 9) ] [ text "9<->10" ] + , br [] [] + , br [] [] + -} + parallelCoordinatesPlot model filteredSmartphoneData ] diff --git a/src/Scatterplot.elm b/src/Scatterplot.elm index 760b4aa9b823b3e539a4678ff3a9799c6960fe61..b86821e8f27d26150d31bde7de8ab424116544ee 100644 --- a/src/Scatterplot.elm +++ b/src/Scatterplot.elm @@ -173,7 +173,7 @@ yAxis values = type alias Point = - { pointName : String, x : Float, y : Float } + { pointName : String, id : String, x : Float, y : Float } type alias XyData = @@ -189,8 +189,11 @@ filterSmartphonesXY model att1List att2List = modelList = List.map .model model.data + idList = + List.map .id model.data + smartphoneDataList = - List.map3 (\a1 a2 mn -> { att1 = a1, att2 = a2, name = mn }) att1List att2List modelList + List.map4 (\a1 a2 mn i -> { att1 = a1, att2 = a2, name = mn, id = i }) att1List att2List modelList idList filteredSmartphones = List.filterMap mapToPoint smartphoneDataList @@ -198,11 +201,12 @@ filterSmartphonesXY model att1List att2List = XyData model.scatterplotOptions.attribute1 model.scatterplotOptions.attribute2 filteredSmartphones -mapToPoint : { att1 : Maybe Float, att2 : Maybe Float, name : Maybe String } -> Maybe Point +mapToPoint : { att1 : Maybe Float, att2 : Maybe Float, name : Maybe String, id : Maybe String } -> Maybe Point mapToPoint smartphoneData = - Maybe.map3 - (\att1 att2 name -> + Maybe.map4 + (\att1 att2 name index -> { pointName = name ++ " (" ++ String.fromFloat att1 ++ "," ++ String.fromFloat att2 ++ ")" + , id = index , x = att1 , y = att2 } @@ -210,6 +214,7 @@ mapToPoint smartphoneData = smartphoneData.att1 smartphoneData.att2 smartphoneData.name + smartphoneData.id viewScatterplot : Model -> Html Msg diff --git a/src/Starplot.elm b/src/Starplot.elm new file mode 100644 index 0000000000000000000000000000000000000000..1a4ac539b5a4d9d76df2e8143f686bd8314e8f46 --- /dev/null +++ b/src/Starplot.elm @@ -0,0 +1,93 @@ +module Starplot exposing (..) + +import Color +import Html exposing (Html, div, text) +import List +import Model exposing (Model) +import SmartPhoneType exposing (Smartphone) +import TypedSvg exposing (rect, svg, text_) +import TypedSvg.Attributes exposing (fill, stroke, viewBox) +import TypedSvg.Attributes.InPx exposing (height, strokeWidth, width, x, y) +import TypedSvg.Core exposing (Svg) +import TypedSvg.Types exposing (AnchorAlignment(..), Length(..), Paint(..), Transform(..)) + + +w : Float +w = + 990 + + +h : Float +h = + 450 + + +midX : Float +midX = + 450 + + +midY : Float +midY = + 225 + + +padding : Float +padding = + 30 + + +starlength : Float +starlength = + 100 + + +type Msg + = Nothing1 + + +starplot : Maybe Smartphone -> Svg msg +starplot smartphone = + let + a = + 1 + in + svg + [ viewBox 0 0 w h + , TypedSvg.Attributes.width <| TypedSvg.Types.Percent 100 + , TypedSvg.Attributes.height <| TypedSvg.Types.Percent 100 + ] + [ rect + [ width midX + , height midY + , fill (Paint (Color.rgba 0 0 0 0)) + , stroke (Paint Color.black) + , strokeWidth 2 + ] + [] + , text_ [ x 100, y 100 ] [ text "Test, hier entsteht bald ein StarPlot." ] + ] + + +findSmartphoneById : Model -> Maybe Smartphone +findSmartphoneById model = + List.head <| + List.filter (checkID model.starplotOption.modelID) model.data + + +checkID : String -> Smartphone -> Bool +checkID modelID smartphone = + Maybe.withDefault "NaN" smartphone.id == modelID + + +viewStarplot : Model -> Html Msg +viewStarplot model = + let + starplotData = + findSmartphoneById model + in + if starplotData == Maybe.Nothing then + div [] [ text "Error: Starplot kann nicht dargestellt werden, da zu dieser Id keine Data vorliegen." ] + + else + starplot starplotData diff --git a/src/TreeView.elm b/src/TreeView.elm index ab563ba7131de158a98fac6dddd561536a734198..7e3e1c7ff2ca52e9638c5db325fb0f12d08e1a57 100644 --- a/src/TreeView.elm +++ b/src/TreeView.elm @@ -2,7 +2,7 @@ module TreeView exposing (..) import Color import Curve -import ExtendedFunctions exposing (map10, map21) +import ExtendedFunctions exposing (map10) import Hierarchy import List.Extra import Model exposing (Model) @@ -12,7 +12,7 @@ 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.InPx exposing (fontSize, height, width, x, y) +import TypedSvg.Attributes.InPx exposing (fontSize, height, strokeWidth, width, x, y) import TypedSvg.Core exposing (Svg) import TypedSvg.Events import TypedSvg.Types exposing (AnchorAlignment(..), ClipPath(..), Paint(..), Transform(..), em) @@ -144,6 +144,8 @@ viewTree model = (width w :: height h :: fill (Paint (Color.rgba 0 0 0 0)) + :: stroke (Paint Color.black) + :: strokeWidth 2 :: Zoom.events model.treeOption.zoomOption ZoomMsg ) [] @@ -294,7 +296,9 @@ tree model = -- lengthFSP = -- List.length filteredSmartphoneData limitedfilteredSmartphones = - List.drop 0 filteredSmartphoneData + List.drop 500 filteredSmartphoneData + + -- drop 500 Smartphones später auswählen Attribute in Tree.stratifyWithPath { path = \item -> String.split "." item.name @@ -421,15 +425,3 @@ mapToSPData smartphone = smartphone.card smartphone.os -} - - -data : List { name : String, size : Float } -data = - [ { name = "flare.analytics.cluster.Battery:100", size = 1000 } - , { name = "flare.analytics.cluster.CommunityStructure", size = 1000 } - , { name = "flare.analytics.cluster.HierarchicalCluster", size = 1000 } - , { name = "flare.analytics.cluster.MergeEdge", size = 1000 } - , { name = "flare.analytics.graph.BetweennessCentrality", size = 3534 } - , { name = "flare.analytics.graph.LinkDistance", size = 5731 } - , { name = "flare.analytics.graph.MaxFlowMinCut", size = 7840 } - ]