Skip to content
This repository has been archived by the owner on Jan 20, 2022. It is now read-only.

Commit

Permalink
Fix Bug 1133086, modifications to data portability infographic
Browse files Browse the repository at this point in the history
  • Loading branch information
schalkneethling committed Apr 14, 2015
1 parent 9fe9ef2 commit d6bde86
Show file tree
Hide file tree
Showing 9 changed files with 107 additions and 198 deletions.
29 changes: 2 additions & 27 deletions src/app/lorax/directives/chart-data-portability.js
View file
Expand Up @@ -2,19 +2,18 @@
* @fileOverview Data Portability Chart directive
* @author <a href='mailto:chris@work.co'>Chris James</a>
*/
define(['jquery', 'd3'], function ($, d3) {
define(function() {
'use strict';

/**
* Terms & Conditions Chart directive
* Data Portability Chart directive
*/
var ChartDataPortabilityDirective = function () {
return {
restrict: 'A',
replace: true,
scope: true,
controller: ChartDataPortabilityController,
link: ChartDataPortabilityLinkFn,
templateUrl: '/app/lorax/directives/chart-data-portability.tpl.html'
};
};
Expand Down Expand Up @@ -50,29 +49,5 @@ define(['jquery', 'd3'], function ($, d3) {
'$timeout'
];

/**
* Link function for Data Portability Chart directive
* @param {object} scope Angular scope.
* @param {JQuery} iElem jQuery element.
* @param {object} iAttrs Directive attributes.
* @param {object} controller Controller reference.
*/
var ChartDataPortabilityLinkFn = function (scope, iElem, iAttrs, controller) {
controller._$timeout(function() {
d3.selectAll('.data-portability__symbol')
.append('div')
.attr('class', function(d, i) {
var answer = controller._$scope.dataStandards.data[i].answer;
if (answer === 'Yes') {
return 'data-portability__symbol-yes';
} else if (answer === 'Partial') {
return 'data-portability__symbol-partial';
} else if (answer === 'No') {
return 'data-portability__symbol-no';
}
});
}.bind(controller));
};

return ChartDataPortabilityDirective;
});
34 changes: 18 additions & 16 deletions src/app/lorax/directives/chart-data-portability.tpl.html
View file
@@ -1,18 +1,20 @@
<table class="data-portability">
<thead>
<tr>
<th>{{::dataStandards.localeData.services}}</th>
<th></th>
<th></th>
<th>{{::dataStandards.localeData.dataExtractable}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="company in ::dataStandards.data" class="data-portability__company">
<td class="data-portability__service">{{::company.service}}</td>
<td class="data-portability__line"><div></div></td>
<td class="data-portability__symbol"></td>
<td class="data-portability__answer">{{::company.answer}}. {{::company.comments}}</td>
</tr>
</tbody>
<thead>
<tr>
<th>{{::dataStandards.localeData.services}}</th>
<th></th>
<th>{{::dataStandards.localeData.dataExtractable}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="company in ::dataStandards.data">
<td scope="row">{{::company.service}}</td>
<td>
<div class="data-portability-line"></div>
</td>
<td class="data-portability__answer">
{{::company.answer}}
</td>
</tr>
</tbody>
</table>
4 changes: 2 additions & 2 deletions src/app/lorax/directives/modal-issue.tpl.html
View file
Expand Up @@ -16,7 +16,7 @@ <h2 class="detail-header-title">{{modalIssue.issue.getTitle()}}</h2>
</figure>

<section class="action-container">
<div class="mozilla-action">
<div class="mozilla-action" ng-if="modalIssue.issue.getMozActionCopy()">
<h3 class="detail-link__header">{{modalIssue.issue.getMiscLocale().mozDoingLabel}}</h3>
<p>{{modalIssue.issue.getMozActionCopy()}}</p>
<ul>
Expand All @@ -30,7 +30,7 @@ <h3 class="detail-link__header">{{modalIssue.issue.getMiscLocale().mozDoingLabel
</ul>
</div>

<div class="your-action">
<div class="your-action" ng-if="modalIssue.issue.getYourActionCopy()">
<h3 class="detail-link__header">{{modalIssue.issue.getMiscLocale().yourDoingLabel}}</h3>
<p>{{modalIssue.issue.getYourActionCopy()}}</p>

Expand Down
2 changes: 1 addition & 1 deletion src/data/base/main.json
View file
Expand Up @@ -50,7 +50,7 @@
},
"dataPortability": {
"status": 1,
"infographicType": "data-lorax-chart-public-trust",
"infographicType": "data-lorax-chart-data-portability",
"infographicOverflow": false,
"infographicMap": false,
"tags": []
Expand Down
126 changes: 39 additions & 87 deletions src/data/i18n/infographics.json
View file
Expand Up @@ -357,117 +357,69 @@
}
},
"dataPortability": {
"header": "Net positive view of industries",
"subheader": "Percent by Year",
"header": "Do key online services allow data portability?",
"subheader": "Ability to export user data from a given Internet service or application.",
"source": {
"name": "",
"name": "Analysis by Mozilla",
"src": ""
},
"dataPoints": {
"dataLabels": [
"Internet",
"Computing"
],
"lineGraphData": [
"dataStandards": [
{
"label": "2001",
"data": [
17,
57
]
"service": "Twitter",
"answer": "Yes",
"comments": ""
},
{
"label": "2002",
"data": [
22,
55
]
"service": "WhatsApp",
"answer": "Yes",
"comments": ""
},
{
"label": "2003",
"data": [
31,
64
]
"service": "Wordpress",
"answer": "Yes",
"comments": ""
},
{
"label": "2004",
"data": [
23,
52
]
"service": "Google",
"answer": "Partial",
"comments": "An impressive number of products and services, but not search history"
},
{
"label": "2005",
"data": [
24,
47
]
"service": "Facebook",
"answer": "Partial",
"comments": "Almost all of your data, but not your search history"
},
{
"label": "2006",
"data": [
29,
50
]
"service": "LinkedIn",
"answer": "Partial",
"comments": "Contact export is allowed, which is core to LinkedIn's offer"
},
{
"label": "2007",
"data": [
35,
51
]
"service": "Reddit",
"answer": "No",
"comments": ""
},
{
"label": "2008",
"data": [
32,
54
]
"service": "Tumblr",
"answer": "No",
"comments": ""
},
{
"label": "2009",
"data": [
30,
53
]
},
{
"label": "2010",
"data": [
28,
49
]
},
{
"label": "2011",
"data": [
40,
62
]
},
{
"label": "2012",
"data": [
36,
63
]
},
{
"label": "2013",
"data": [
34,
56
]
"service": "Pinterest",
"answer": "No",
"comments": ""
},
{
"label": "2014",
"data": [
27,
58
]
"service": "Instagram",
"answer": "No",
"comments": ""
}
]
],
"labels": {
"services": "Service",
"dataExtractable": "Extractable Data?"
}
}
},
"dataProtection": {
Expand Down
43 changes: 43 additions & 0 deletions src/styles/infographics/data-portability.less
View file
@@ -0,0 +1,43 @@
/* Data Portability
========================================================================== */

.data-portability {
margin-left: @baseLine * 3;
border-collapse: collapse;
width: 80%;
th {
color: @black;
padding: 24px 32px 24px 0;
.font-size(1.7rem);
font-weight: 600;
text-align: left;
text-transform: uppercase;
}
td {
padding: 10px 10px 35px 0;
width: 10%;
.font-size(1.7rem);
text-align: center;
&:first-child {
width: 10%;
text-align: left;
}
&:last-child {
width: 80%;
font-weight: 600;
text-align: left;
text-transform: uppercase;
}
span {
display: block;
margin-top: 8px;
.font-size(1.4rem);
font-weight: 400;
text-transform: none;
}
}
.data-portability-line {
border-bottom: 1px solid @black;
width:80%;
}
}
1 change: 1 addition & 0 deletions src/styles/main.less
View file
Expand Up @@ -21,6 +21,7 @@

// Infographics
@import 'infographics/accessible';
@import 'infographics/data-portability';

// Animation
@import 'animation';
64 changes: 0 additions & 64 deletions src/styles/modules/infographics.less
View file
Expand Up @@ -544,70 +544,6 @@
color: #fff;
}

/* Data Portability
========================================================================== */

.data-portability {
border-collapse: separate;

th {
.font-size(1.4rem);
color: @extra-dark-grey;
padding: 0;
text-align: left;
text-transform: uppercase;
padding-bottom: 10px;
}

td {
padding-bottom: 35px;
}
}

.data-portability__company {
padding: 0px;
.font-size(1.1rem);
}

.data-portability__service {
width: 11%;
}

.data-portability__line {
width: 12%;

div {
border-bottom: 1px solid rgba(0,0,0,0.3);
}
}

.data-portability__symbol {
width: 2%;
padding: 0 15px;
div {
width: 10px;
height: 10px;
border-radius: 10px;
}

.data-portability__symbol-yes {
background: @white;
}

.data-portability__symbol-partial {
background: transparent;
border: 2px solid @white;
}

.data-portability__symbol-no {
background: @extra-dark-grey;
}
}

.data-portability__answer {
width: 75%;
}

/* Open Source
========================================================================== */

Expand Down

0 comments on commit d6bde86

Please sign in to comment.