Skip to content

Commit 4c1ab97

Browse files
StigmatozStigmatoz
committed
add title & set active tooltipe & fix set active tab on list
1 parent 6d7cc8f commit 4c1ab97

File tree

6 files changed

+47
-24
lines changed

6 files changed

+47
-24
lines changed

‎index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@
1414
</head>
1515

1616
<body>
17+
<div id="title">
18+
<p class="title">Web Activity Time Tracker</p>
19+
</div>
1720
<div id="chart"></div>
1821
<hr>
1922
<div class="list-of-site" id="resultTable"></div>

‎scripts/background.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ function backgroundCheck() {
2525
}
2626

2727
if (tab !== undefined) {
28+
activity.setCurrentActiveTab(tab.url);
2829
chrome.idle.queryState(SETTINGS_INTERVAL_INACTIVITY, function (state) {
2930
if (state === 'active') {
3031
tab.summaryTime += 1;

‎scripts/chart/chart-core.js‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
function donutChart() {
22
var width,
33
height,
4-
margin = {top: 10, right: 10, bottom: 10, left: 10},
4+
margin = { top: 10, right: 10, bottom: 10, left: 10 },
55
colour = d3.scaleOrdinal(d3.schemeCategory20), // colour scheme
66
variable, // value in data that will dictate proportions on chart
77
category, // compare data by
@@ -10,8 +10,8 @@ function donutChart() {
1010
cornerRadius, // sets how rounded the corners are on each slice
1111
percentFormat = d3.format(',.2%');
1212

13-
function chart(selection){
14-
selection.each(function(data) {
13+
function chart(selection) {
14+
selection.each(function (data) {
1515
// generate chart
1616

1717
// ===========================================================================================
@@ -20,7 +20,7 @@ function donutChart() {
2020

2121
// creates a new pie generator
2222
var pie = d3.pie()
23-
.value(function(d) { return floatFormat(d[variable]); })
23+
.value(function (d) { return floatFormat(d[variable]); })
2424
.sort(null);
2525

2626
// contructs and arc generator. This will be used for the donut. The difference between outer and inner
@@ -42,7 +42,8 @@ function donutChart() {
4242
var svg = selection.append('svg')
4343
.attr('width', width + margin.left + margin.right)
4444
.attr('height', height + margin.top + margin.bottom)
45-
.append('g')
45+
.attr('class', 'backColorChart')
46+
.append('g')
4647
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
4748
// ===========================================================================================
4849

@@ -58,22 +59,23 @@ function donutChart() {
5859
var path = svg.select('.slices')
5960
.datum(data).selectAll('path')
6061
.data(pie)
61-
.enter().append('path')
62-
.attr('fill', function(d) { return colour(d.data[category]); })
63-
.attr('d', arc);
62+
.enter().append('path')
63+
.attr('fill', function (d) { return colour(d.data[category]); })
64+
.attr('d', arc)
65+
.attr('id', function (d) { return d.data[category]; });
6466
// ===========================================================================================
6567

6668
// ===========================================================================================
6769
// add text labels
6870
var label = svg.select('.labelName').selectAll('text')
6971
.data(pie)
70-
.enter().append('text')
72+
.enter().append('text')
7173
.attr('dy', '.35em')
72-
.html(function(d) {
74+
.html(function (d) {
7375
// add "key: value" for given category. Number inside tspan is bolded in stylesheet.
7476
return ' <tspan class="siteName">' + d.data[category] + ' </tspan>';
7577
})
76-
.attr('transform', function(d) {
78+
.attr('transform', function (d) {
7779

7880
// effectively computes the centre of the slice.
7981
// see https://github.com/d3/d3-shape/blob/master/README.md#arc_centroid
@@ -83,7 +85,7 @@ function donutChart() {
8385
pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);
8486
return 'translate(' + pos + ')';
8587
})
86-
.style('text-anchor', function(d) {
88+
.style('text-anchor', function (d) {
8789
// if slice centre is on the left, anchor text to start, otherwise anchor to end
8890
return (midAngle(d)) < Math.PI ? 'start' : 'end';
8991
});
@@ -94,8 +96,8 @@ function donutChart() {
9496
var polyline = svg.select('.lines')
9597
.selectAll('polyline')
9698
.data(pie)
97-
.enter().append('polyline')
98-
.attr('points', function(d) {
99+
.enter().append('polyline')
100+
.attr('points', function (d) {
99101

100102
// see label transform function for explanations of these three lines.
101103
var pos = outerArc.centroid(d);
@@ -147,7 +149,7 @@ function donutChart() {
147149
function toolTipHTML(data) {
148150

149151
var tip = '',
150-
i = 0;
152+
i = 0;
151153

152154
for (var key in data.data) {
153155

@@ -174,55 +176,55 @@ function donutChart() {
174176
}
175177

176178
// getter and setter functions. See Mike Bostocks post "Towards Reusable Charts" for a tutorial on how this works.
177-
chart.width = function(value) {
179+
chart.width = function (value) {
178180
if (!arguments.length) return width;
179181
width = value;
180182
return chart;
181183
};
182184

183-
chart.height = function(value) {
185+
chart.height = function (value) {
184186
if (!arguments.length) return height;
185187
height = value;
186188
return chart;
187189
};
188190

189-
chart.margin = function(value) {
191+
chart.margin = function (value) {
190192
if (!arguments.length) return margin;
191193
margin = value;
192194
return chart;
193195
};
194196

195-
chart.radius = function(value) {
197+
chart.radius = function (value) {
196198
if (!arguments.length) return radius;
197199
radius = value;
198200
return chart;
199201
};
200202

201-
chart.padAngle = function(value) {
203+
chart.padAngle = function (value) {
202204
if (!arguments.length) return padAngle;
203205
padAngle = value;
204206
return chart;
205207
};
206208

207-
chart.cornerRadius = function(value) {
209+
chart.cornerRadius = function (value) {
208210
if (!arguments.length) return cornerRadius;
209211
cornerRadius = value;
210212
return chart;
211213
};
212214

213-
chart.colour = function(value) {
215+
chart.colour = function (value) {
214216
if (!arguments.length) return colour;
215217
colour = value;
216218
return chart;
217219
};
218220

219-
chart.variable = function(value) {
221+
chart.variable = function (value) {
220222
if (!arguments.length) return variable;
221223
variable = value;
222224
return chart;
223225
};
224226

225-
chart.category = function(value) {
227+
chart.category = function (value) {
226228
if (!arguments.length) return category;
227229
category = value;
228230
return chart;

‎scripts/webact.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ function getTabsFromStorage(tabs) {
5757
}
5858

5959
drawChart(tabsForChart);
60+
setActiveTooltipe(currentTab);
6061
}
6162

6263
function setTotalTime(tabs) {
@@ -118,4 +119,9 @@ function drawChart(tabs) {
118119
d3.select('#chart')
119120
.datum(tabs) // bind data to the div
120121
.call(donut); // draw chart in div
122+
}
123+
124+
function setActiveTooltipe(currentTab){
125+
var event = new Event("mouseenter");
126+
document.getElementById(currentTab).dispatchEvent(event);
121127
}

‎style/chart.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,8 @@ tspan{
3636
.percentageValue{
3737
font-size: 1.8em !important;
3838
font-weight: 600 !important;
39+
}
40+
41+
.backColorChart{
42+
background-color: rgb(227, 245, 243);
3943
}

‎style/webact.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,4 +77,11 @@ hr {
7777
border-radius: 10px;
7878
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
7979
background-color: #555;
80+
}
81+
82+
.title{
83+
font-size: 17px;
84+
font-weight: 650;
85+
margin: 5px;
86+
text-align: center;
8087
}

0 commit comments

Comments
 (0)