Integrate SpiderGraph in the UI.
This commit is contained in:
Родитель
b35a8514c3
Коммит
7adccb42f2
|
@ -5,12 +5,6 @@
|
|||
<title>about:interests</title>
|
||||
</head>
|
||||
<body ng-cloak>
|
||||
<div class="container">
|
||||
<div class="navbar">
|
||||
<h1>About Your Interests</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container content" ng-controller="vizCtrl">
|
||||
<div class="dropdowns">
|
||||
<select ng-init="selectedType = getTypes()[0]" ng-model="selectedType" ng-options="val for val in getTypes()">
|
||||
|
@ -36,39 +30,12 @@
|
|||
|
||||
<div ng-show="historyComputeComplete && !rankingAvailable" class="alert alert-info">{{emptyMessage}}</div>
|
||||
</div>
|
||||
|
||||
<div class="rankingSection">
|
||||
<div class="rankingData">
|
||||
<h2>
|
||||
Top Intents
|
||||
</h2>
|
||||
<div id="intentCharts" class="row"></div>
|
||||
<h2>
|
||||
Top Interests
|
||||
</h2>
|
||||
<div id="interestCharts" class="row"></div>
|
||||
<div id="interestsBarChart">
|
||||
<h2>
|
||||
Category Visit Percentage
|
||||
</h2>
|
||||
<svg style="height: 300px; width: 100%;"></svg>
|
||||
</div>
|
||||
<div id="interestsTimeline">
|
||||
<h2>
|
||||
History Timeline
|
||||
</h2>
|
||||
<svg style="overflow: visible; height: 800px; width: 100%;"></svg>
|
||||
</div>
|
||||
<div id="weightIntensityChart">
|
||||
<h2>
|
||||
Days Visited vs. Visits Per Day
|
||||
</h2>
|
||||
<svg style="overflow: visible; height: 800px; width: 100%;"></svg>
|
||||
</div>
|
||||
<p ng-hide="rankingAvailable || historyComputeInProgress">Ranking data is not available.</p>
|
||||
<p ng-show="historyComputeInProgress" ng-hide="rankingAvailable">processing...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="spiderGraph">
|
||||
<h2>
|
||||
Spider Graph
|
||||
</h2>
|
||||
<svg width="1420" height="800"></svg>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -12,14 +12,8 @@ let ChartManager = {
|
|||
* @data - storage.chartData object which contains data for all charts
|
||||
*/
|
||||
graphAllFromScratch: function(data, type, namespace) {
|
||||
if (!this._charts["timeline"]) {
|
||||
this._charts["timeline"] = new TimelineChart();
|
||||
}
|
||||
if (!this._charts["weightIntensity"]) {
|
||||
this._charts["weightIntensity"] = new WeightIntensityChart();
|
||||
}
|
||||
if (!this._charts["intentInterest"]) {
|
||||
this._charts["intentInterest"] = new IntentInterestCharts();
|
||||
if (!this._charts["spider"]) {
|
||||
this._charts["spider"] = new SpiderGraph();
|
||||
}
|
||||
for (let chart in this._charts) {
|
||||
this._charts[chart].setTypeAndNamespace(type, namespace);
|
||||
|
|
|
@ -4,4 +4,37 @@
|
|||
.content { margin-top: 20px; }
|
||||
.alerts { margin-top: 10px; }
|
||||
|
||||
.margin-fix { margin: -50px 0 0 0 !important; }
|
||||
.margin-fix { margin: -50px 0 0 0 !important; }
|
||||
|
||||
.link {
|
||||
stroke: #000000;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.node {
|
||||
cursor: move;
|
||||
stroke: #000;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
#spiderGraph {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 1420px;
|
||||
}
|
||||
|
||||
text {
|
||||
cursor: move;
|
||||
-moz-user-select: none;
|
||||
pointer-events: none;
|
||||
text-anchor: middle;
|
||||
dominant-baseline: central;
|
||||
user-select: central;
|
||||
stroke: none;
|
||||
fill: #000000;
|
||||
}
|
||||
|
||||
rect {
|
||||
fill: #FFFFFF;
|
||||
stroke: #000000;
|
||||
}
|
|
@ -268,6 +268,7 @@ let AboutInterests = {
|
|||
data.url("vendor/nvd3/nv.d3.min.js"),
|
||||
data.url("about-interests.js"),
|
||||
data.url("charts/ChartManager.js"),
|
||||
data.url("charts/SpiderGraph.js"),
|
||||
data.url("charts/TimelineChart.js"),
|
||||
data.url("charts/WeightIntensityChart.js"),
|
||||
data.url("charts/IntentInterestCharts.js")
|
||||
|
|
Загрузка…
Ссылка в новой задаче