Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Analysis Fixes: Graphs now scale + render time in Myanmar/Yangon time zone #428

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24,428 changes: 12,214 additions & 12,214 deletions package-lock.json

Large diffs are not rendered by default.

235 changes: 118 additions & 117 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,117 +1,118 @@
{
"name": "aggie",
"version": "3.0.0",
"repository": {
"type": "git",
"url": "https://github.com/TID-Lab/aggie.git"
},
"scripts": {
"postinstall": "gulp build",
"dev": "node install.js && cross-env DEBUG=socket.io:* node app.js",
"prestart": "node install.js",
"start": "node app.js",
"serve": "pm2 startOrRestart ecosystem.config.js",
"stop": "pm2 stop ecosystem.config.js",
"premocha": "node install.js",
"mocha": "mocha test/backend",
"karma": "karma start --single-run",
"test": "npm run mocha && npm run karma",
"testrun": "MONGO_AGGIE_DB=aggie-test node app.js",
"preprotractor": "webdriver-manager update",
"protractor": "protractor test/end-to-end/protractor.conf.js",
"protractor-with-apis": "protractor test/end-to-end/with-apis/protractor.conf.js",
"update-ct-lists": "node scripts/ct-list-update.js"
},
"subdomain": "aggie",
"engines": {
"node": "^12.16"
},
"license": "MIT",
"dependencies": {
"JSONStream": "^1.3.5",
"angular-cookies": "^1.2.29",
"angular-translate": "^2.11.1",
"angular-translate-handler-log": "^2.11.1",
"angular-translate-loader-static-files": "^2.11.1",
"async": "^3.2.0",
"aws-sdk": "^2.674.0",
"bcrypt": "^5.0.0",
"body-parser": "^1.19.0",
"browserify": "^16.5.1",
"chance": "^1.1.5",
"connect-mongo": "^3.2.0",
"connect-roles": "^3.1.2",
"cross-env": "^7.0.2",
"deepmerge": "^0.2.10",
"ejs": "^3.1.3",
"express": "^3.21.2",
"express-spa-router": "0.0.8",
"fbgraph": "^1.4.4",
"feedparser": "^2.2.10",
"graceful-fs": "^4.2.4",
"gulp": "^4.0.2",
"gulp-jshint": "^1.11.2",
"gulp-livereload": "^4.0.2",
"gulp-mocha": "^2.1.3",
"gulp-plumber": "^1.2.1",
"gulp-rename": "^2.0.0",
"interval-to-human": "^0.1.1",
"locale": "^0.1.0",
"lodash": "^4.17.19",
"merge-stream": "^2.0.0",
"mkdirp": "^1.0.4",
"moment": "^2.25.3",
"mongoose": "^5.9.16",
"mongoose-sequence": "^5.2.2",
"nconf": "^0.10.0",
"node-cron": "^2.0.3",
"node-sass-middleware": "^0.11.0",
"nodemailer": "^6.4.6",
"nodemailer-sendgrid": "^1.0.3",
"passport": "^0.4.1",
"passport-local": "^1.0.0",
"passport.socketio": "^3.7.0",
"pm2": "^4.4.0",
"promise": "^8.1.0",
"readline-sync": "^1.4.10",
"request": "^2.88.2",
"request-promise": "^4.2.6",
"rwlock": "^5.0.0",
"sanitize-html": "^1.23.0",
"single-line-log": "^1.1.2",
"socket.io": "^2.3.0",
"timekeeper": "^2.2.0",
"timezone": "^1.0.23",
"tweet-matches": "^1.0.2",
"twit": "^2.2.11",
"underscore": "^1.10.2",
"uuid": "^8.0.0",
"validator": "^13.0.0",
"vinyl-source-stream": "^2.0.0",
"winston": "^3.2.1",
"winston-slack-webhook-transport": "^1.2.4"
},
"devDependencies": {
"angular-mocks": "^1.2.18",
"chai": "^3.3.0",
"clarinet": "^0.12.4",
"deep-keys": "^0.5.0",
"gulp-jsoncombine": "^1.0.4",
"gulp-ng-annotate": "^2.1.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^3.0.2",
"karma": "^5.0.8",
"karma-browserify": "^7.0.0",
"karma-chai-plugins": "^0.9.0",
"karma-mocha": "^2.0.1",
"karma-ng-html2js-preprocessor": "^1.0.0",
"karma-phantomjs-launcher": "^1.0.4",
"migrate": "^1.7.0",
"mocha": "^7.1.2",
"protractor": "^7.0.0",
"socket.io-client": "^2.3.0",
"supertest": "^4.0.2",
"vinyl-buffer": "^1.0.1"
}
}
{
"name": "aggie",
"version": "3.0.0",
"repository": {
"type": "git",
"url": "https://github.com/TID-Lab/aggie.git"
},
"scripts": {
"postinstall": "gulp build",
"dev": "node install.js && cross-env DEBUG=socket.io:* node app.js",
"prestart": "node install.js",
"start": "node app.js",
"serve": "pm2 startOrRestart ecosystem.config.js",
"stop": "pm2 stop ecosystem.config.js",
"premocha": "node install.js",
"mocha": "mocha test/backend",
"karma": "karma start --single-run",
"test": "npm run mocha && npm run karma",
"testrun": "MONGO_AGGIE_DB=aggie-test node app.js",
"preprotractor": "webdriver-manager update",
"protractor": "protractor test/end-to-end/protractor.conf.js",
"protractor-with-apis": "protractor test/end-to-end/with-apis/protractor.conf.js",
"update-ct-lists": "node scripts/ct-list-update.js"
},
"subdomain": "aggie",
"engines": {
"node": "^12.16"
},
"license": "MIT",
"dependencies": {
"JSONStream": "^1.3.5",
"angular-cookies": "^1.2.29",
"angular-translate": "^2.11.1",
"angular-translate-handler-log": "^2.11.1",
"angular-translate-loader-static-files": "^2.11.1",
"async": "^3.2.0",
"aws-sdk": "^2.674.0",
"bcrypt": "^5.0.0",
"body-parser": "^1.19.0",
"browserify": "^16.5.1",
"chance": "^1.1.5",
"connect-mongo": "^3.2.0",
"connect-roles": "^3.1.2",
"cross-env": "^7.0.2",
"deepmerge": "^0.2.10",
"ejs": "^3.1.3",
"express": "^3.21.2",
"express-spa-router": "0.0.8",
"fbgraph": "^1.4.4",
"feedparser": "^2.2.10",
"graceful-fs": "^4.2.4",
"gulp": "^4.0.2",
"gulp-jshint": "^1.11.2",
"gulp-livereload": "^4.0.2",
"gulp-mocha": "^2.1.3",
"gulp-plumber": "^1.2.1",
"gulp-rename": "^2.0.0",
"interval-to-human": "^0.1.1",
"locale": "^0.1.0",
"lodash": "^4.17.19",
"merge-stream": "^2.0.0",
"mkdirp": "^1.0.4",
"moment": "^2.25.3",
"moment-timezone": "^0.5.32",
"mongoose": "^5.9.16",
"mongoose-sequence": "^5.2.2",
"nconf": "^0.10.0",
"node-cron": "^2.0.3",
"node-sass-middleware": "^0.11.0",
"nodemailer": "^6.4.6",
"nodemailer-sendgrid": "^1.0.3",
"passport": "^0.4.1",
"passport-local": "^1.0.0",
"passport.socketio": "^3.7.0",
"pm2": "^4.4.0",
"promise": "^8.1.0",
"readline-sync": "^1.4.10",
"request": "^2.88.2",
"request-promise": "^4.2.6",
"rwlock": "^5.0.0",
"sanitize-html": "^1.23.0",
"single-line-log": "^1.1.2",
"socket.io": "^2.3.0",
"timekeeper": "^2.2.0",
"timezone": "^1.0.23",
"tweet-matches": "^1.0.2",
"twit": "^2.2.11",
"underscore": "^1.10.2",
"uuid": "^8.0.0",
"validator": "^13.0.0",
"vinyl-source-stream": "^2.0.0",
"winston": "^3.2.1",
"winston-slack-webhook-transport": "^1.2.4"
},
"devDependencies": {
"angular-mocks": "^1.2.18",
"chai": "^3.3.0",
"clarinet": "^0.12.4",
"deep-keys": "^0.5.0",
"gulp-jsoncombine": "^1.0.4",
"gulp-ng-annotate": "^2.1.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^3.0.2",
"karma": "^5.0.8",
"karma-browserify": "^7.0.0",
"karma-chai-plugins": "^0.9.0",
"karma-mocha": "^2.0.1",
"karma-ng-html2js-preprocessor": "^1.0.0",
"karma-phantomjs-launcher": "^1.0.4",
"migrate": "^1.7.0",
"mocha": "^7.1.2",
"protractor": "^7.0.0",
"socket.io-client": "^2.3.0",
"supertest": "^4.0.2",
"vinyl-buffer": "^1.0.1"
}
}
13 changes: 8 additions & 5 deletions public/angular/js/controllers/analysis/alg-hate-speech-graph.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
var responsivefy = require('./chart-utils');
var moment = require('moment-timezone');
module.exports = function renderHateSpeechReportGraph(id, data, range, description) {
var margin = { top: 50, right: 0, bottom: 55, left: 50 };
var width = 1200,
Expand All @@ -13,14 +15,14 @@ module.exports = function renderHateSpeechReportGraph(id, data, range, descripti
d.value +
" Reports" +
"</div><div>" +
d3.timeFormat("%b. %d %H:00")(d.date).replace(/\s0/g, " ") +
moment(d.data.date).tz("Asia/Yangon").format('MMM. Do hh:mm:ss') +
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I should have said this earlier but I think since the Myanmar project is over, do we still want to make this change? We can maybe just make this change on the Myanmar server and not aggie repo. Lmk if I am missing somthing.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

"</div><div>"
)
.style("left", event.offsetX + "px")
.style("top", event.offsetY - 40 + "px");
};

var svg = d3.select(id).append("svg").attr("width", width).attr("height", height);
var svg = d3.select(id).append("svg").attr("width", width).attr("height", height).call(responsivefy);
var graph = svg
.append("g")
.attr("width", graphWidth)
Expand Down Expand Up @@ -71,9 +73,10 @@ module.exports = function renderHateSpeechReportGraph(id, data, range, descripti
xAxis
.tickSize(15)
.tickPadding(5)
.tickFormat(function (d, i) {
return d.getHours() === 0 ? d3.timeFormat("%b. %d")(d) : "";
})
.tickFormat(function(d){
if (d.getHours() !== 0) return "";
return moment(d).tz("Asia/Yangon").format('MMM. Do');
})
)
.selectAll("text");
// .attr("transform", "translate(13,50) rotate(90)");
Expand Down
39 changes: 39 additions & 0 deletions public/angular/js/controllers/analysis/chart-utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
module.exports = function responsivefy(svg) {
// container will be the DOM element
// that the svg is appended to
// we then measure the container
// and find its aspect ratio
var container = d3.select(svg.node().parentNode),
width = parseInt(svg.style('width'), 10),
height = parseInt(svg.style('height'), 10),
aspect = width / height;

// set viewBox attribute to the initial size
// control scaling with preserveAspectRatio
// resize svg on inital page load
svg.attr('viewBox', '0 0 ' + width + ' ' + height)
.attr('preserveAspectRatio', 'xMinYMid')
.call(resize);

// add a listener so the chart will be resized
// when the window resizes
// multiple listeners for the same event type
// requires a namespace, i.e., 'click.foo'
// api docs: https://goo.gl/F3ZCFr
d3.select(window).on(
'resize.' + container.attr('id'),
resize
);

// this is the code that resizes the chart
// it will be called on load
// and in response to window resizes
// gets the width of the container
// and resizes the svg to fill it
// while maintaining a consistent aspect ratio
function resize() {
var w = parseInt(container.style('width'));
svg.attr('width', w);
svg.attr('height', Math.round(w / aspect));
}
}
13 changes: 8 additions & 5 deletions public/angular/js/controllers/analysis/report-graph.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
var responsivefy = require('./chart-utils');
var moment = require('moment-timezone');
module.exports = function renderReportGraph(id, reports, startDate, endDate, description) {
var margin = { top: 50, right: 0, bottom: 55, left: 50 };
var width = 1200,
Expand Down Expand Up @@ -36,14 +38,14 @@ module.exports = function renderReportGraph(id, reports, startDate, endDate, des
d.data.unread +
" unread" +
"</div><div>" +
d3.timeFormat("%b. %d %H:00")(d.data.date).replace(/\s0/g, " ") +
moment(d.data.date).tz("Asia/Yangon").format('MMM. Do hh:mm:ss') +
"</div><div>"
)
.style("left", event.offsetX + "px")
.style("top", event.offsetY - 75 + "px");
};

var svg = d3.select(id).append("svg").attr("width", width).attr("height", height);
var svg = d3.select(id).append("svg").attr("width", width).attr("height", height).call(responsivefy);
var graph = svg
.append("g")
.attr("width", graphWidth)
Expand Down Expand Up @@ -111,9 +113,10 @@ module.exports = function renderReportGraph(id, reports, startDate, endDate, des
xAxis
.tickSize(15)
.tickPadding(5)
.tickFormat(function (d, i) {
return d.getHours() === 0 ? d3.timeFormat("%b. %d")(d) : "";
})
.tickFormat(function(d){
if (d.getHours() !== 0) return "";
return moment(d).tz("Asia/Yangon").format('MMM. Do');
})
)
.selectAll("text");
// .attr("transform", "translate(13,50) rotate(90)");
Expand Down
3 changes: 2 additions & 1 deletion public/angular/js/controllers/analysis/source-bar.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
var responsivefy = require('./chart-utils');
module.exports = function renderSourceBar(id, sources, totalReports, description) {
var stackedSources = d3
.stack()
Expand Down Expand Up @@ -30,7 +31,7 @@ module.exports = function renderSourceBar(id, sources, totalReports, description
height = 90;

var margin = { top: 40, right: 0, bottom: 30, left: 50 };
var svg = d3.select(id).append("svg").attr("width", width).attr("height", height);
var svg = d3.select(id).append("svg").attr("width", width).attr("height", height).call(responsivefy);
var x = d3.scaleLinear([0, d3.sum(Object.values(sources))], [margin.left, width - margin.right]);
var formatPercent = x.tickFormat(null, "%");
svg
Expand Down
Loading