Integrate SpiderGraph in the UI.

This commit is contained in:
Marina Samuel 2014-07-10 15:38:43 -04:00
Родитель b35a8514c3
Коммит 7adccb42f2
4 изменённых файлов: 43 добавлений и 48 удалений

Просмотреть файл

@ -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")