Skip to content

Fixes: #35 support i18n #74

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.

Sign up for GitHub

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

Closed
erundle wants to merge 1 commit into from
Closed

Fixes: #35 support i18n #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
44 changes: 39 additions & 5 deletions dist/angular-patternfly.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -496,6 +496,14 @@ angular.module('patternfly.card').directive('pfCard', function () {
* <li> 'percent' - displays the Usage Percent of the Total amount in the center label
* <li> 'none' - does not display the center label
* </ul>
*
* @param {object} lang translated i18n strings<br/>
* <ul style='list-style-type: none'>
* <li>.used - string representing the amount used
* <li>.available - string representing the amount available
* <li>.of - string to represent part of percentage
* </ul>

* @example
<example module="patternfly.charts">
<file name="index.html">
Expand Down Expand Up @@ -557,15 +565,20 @@ angular.module('patternfly.card').directive('pfCard', function () {
<div pf-donut-pct-chart config="noneConfig" data="noneData" center-label="noLabel"></div>
center-label =<br> ' none'
</div>

<div class="col-md-12">
<hr>
</div>

<div class="col-md-12">
Custom Tooltip and Center Label
<div pf-donut-pct-chart config="custConfig" data="custData"></div>
</div>
<div class="col-md-12">
<hr>
</div>
<div class="col-md-12">
i18n String replacement for Available
<div pf-donut-pct-chart config="availConfigLang" data="availData" center-label="availLabel" lang="lang"></div>
</div>
</div>
</file>

Expand All @@ -582,6 +595,10 @@ angular.module('patternfly.card').directive('pfCard', function () {
'total': '1000'
};

$scope.lang = {
'available': 'Free',
}

$scope.newUsed = $scope.data.used;

$scope.$watch('newUsed', function (val) {
Expand All @@ -607,6 +624,12 @@ angular.module('patternfly.card').directive('pfCard', function () {
'thresholds':{'warning':'60','error':'90'}
};

$scope.availConfigLang = {
'chartId': 'availChartLang',
'units': 'GB',
'thresholds':{'warning':'60','error':'90'}
};

$scope.availData = {
'used': '350',
'total': '1000'
Expand Down Expand Up @@ -663,6 +686,7 @@ angular.module('patternfly.card').directive('pfCard', function () {
</file>
</example>
*/

angular.module('patternfly.charts').directive('pfDonutPctChart', ["c3ChartDefaults", "$timeout", function (c3ChartDefaults, $timeout) {
'use strict';

Expand All @@ -671,6 +695,7 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ["c3ChartDefaul
scope: {
config: '=',
data: '=',
lang: '=',
centerLabel: '=?'
},
replace: true,
Expand Down Expand Up @@ -761,7 +786,7 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ["c3ChartDefaul

// default to 'used' info.
centerLabelText = { bigText: $scope.data.used,
smText: $scope.config.units + ' Used' };
smText: $scope.config.units + ' ' + $scope.lang.used };

if ($scope.config.centerLabelFn) {
centerLabelText.bigText = $scope.config.centerLabelFn();
Expand All @@ -771,10 +796,10 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ["c3ChartDefaul
centerLabelText.smText = '';
} else if ($scope.centerLabel === 'available') {
centerLabelText.bigText = $scope.data.available;
centerLabelText.smText = $scope.config.units + ' Available';
centerLabelText.smText = $scope.config.units + ' ' + $scope.lang.available;
} else if ($scope.centerLabel === 'percent') {
centerLabelText.bigText = Math.round($scope.data.used / $scope.data.total * 100.0) + '%';
centerLabelText.smText = 'of ' + $scope.data.total + ' ' + $scope.config.units;
centerLabelText.smText = $scope.lang.of + ' ' + $scope.data.total + ' ' + $scope.config.units;
Copy link
Copy Markdown
Author

@erundle erundle Sep 8, 2015

Choose a reason for hiding this comment

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

String concat is bad since we need to handle the ability to reorder strings in say Japanese. I need to see what we can do there but I wanted to get some feedback on this approach

}

return centerLabelText;
Expand All @@ -792,6 +817,7 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ["c3ChartDefaul
}
],
link: function (scope, element) {

var setupDonutChartTitle = function () {
$timeout(function () {
var donutChartTitle, centerLabelText;
Expand All @@ -817,6 +843,14 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ["c3ChartDefaul
}, 300);
};

var langDefaults = {
'available': 'Available',
'used': 'Used',
'of': 'of'
};

scope.lang = angular.extend({}, langDefaults, scope.lang);

scope.$watch('config', function () {
scope.updateAll(scope);
setupDonutChartTitle();
Expand Down
2 changes: 1 addition & 1 deletion dist/angular-patternfly.min.js
View file
Open in desktop

Large diffs are not rendered by default.

44 changes: 39 additions & 5 deletions src/charts/donut/donut-pct-chart-directive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,14 @@
* <li> 'percent' - displays the Usage Percent of the Total amount in the center label
* <li> 'none' - does not display the center label
* </ul>
*
* @param {object} lang translated i18n strings<br/>
Copy link
Copy Markdown
Member

@dtaylor113 dtaylor113 Sep 8, 2015

Choose a reason for hiding this comment

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

If this is an optional param, then it should be:

@param {object=} lang translated i18n strings

* <ul style='list-style-type: none'>
* <li>.used - string representing the amount used
* <li>.available - string representing the amount available
* <li>.of - string to represent part of percentage
* </ul>

* @example
<example module="patternfly.charts">
<file name="index.html">
Expand Down Expand Up @@ -101,15 +109,20 @@
<div pf-donut-pct-chart config="noneConfig" data="noneData" center-label="noLabel"></div>
center-label =<br> ' none'
</div>

<div class="col-md-12">
<hr>
</div>

<div class="col-md-12">
Custom Tooltip and Center Label
<div pf-donut-pct-chart config="custConfig" data="custData"></div>
</div>
<div class="col-md-12">
<hr>
</div>
<div class="col-md-12">
i18n String replacement for Available
<div pf-donut-pct-chart config="availConfigLang" data="availData" center-label="availLabel" lang="lang"></div>
</div>
</div>
</file>

Expand All @@ -126,6 +139,10 @@
'total': '1000'
};

$scope.lang = {
'available': 'Free',
}

$scope.newUsed = $scope.data.used;

$scope.$watch('newUsed', function (val) {
Expand All @@ -151,6 +168,12 @@
'thresholds':{'warning':'60','error':'90'}
};

$scope.availConfigLang = {
'chartId': 'availChartLang',
'units': 'GB',
'thresholds':{'warning':'60','error':'90'}
};

$scope.availData = {
'used': '350',
'total': '1000'
Expand Down Expand Up @@ -207,6 +230,7 @@
</file>
</example>
*/

angular.module('patternfly.charts').directive('pfDonutPctChart', function (c3ChartDefaults, $timeout) {
'use strict';

Expand All @@ -215,6 +239,7 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', function (c3Cha
scope: {
config: '=',
data: '=',
lang: '=',
Copy link
Copy Markdown
Member

@dtaylor113 dtaylor113 Sep 8, 2015

Choose a reason for hiding this comment

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

If this is optional, it should be:
lang: '=?',

centerLabel: '=?'
},
replace: true,
Expand Down Expand Up @@ -305,7 +330,7 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', function (c3Cha

// default to 'used' info.
centerLabelText = { bigText: $scope.data.used,
smText: $scope.config.units + ' Used' };
smText: $scope.config.units + ' ' + $scope.lang.used };

if ($scope.config.centerLabelFn) {
centerLabelText.bigText = $scope.config.centerLabelFn();
Expand All @@ -315,10 +340,10 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', function (c3Cha
centerLabelText.smText = '';
} else if ($scope.centerLabel === 'available') {
centerLabelText.bigText = $scope.data.available;
centerLabelText.smText = $scope.config.units + ' Available';
centerLabelText.smText = $scope.config.units + ' ' + $scope.lang.available;
} else if ($scope.centerLabel === 'percent') {
centerLabelText.bigText = Math.round($scope.data.used / $scope.data.total * 100.0) + '%';
centerLabelText.smText = 'of ' + $scope.data.total + ' ' + $scope.config.units;
centerLabelText.smText = $scope.lang.of + ' ' + $scope.data.total + ' ' + $scope.config.units;
}

return centerLabelText;
Expand All @@ -336,6 +361,7 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', function (c3Cha
}
],
link: function (scope, element) {

var setupDonutChartTitle = function () {
$timeout(function () {
var donutChartTitle, centerLabelText;
Expand All @@ -361,6 +387,14 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', function (c3Cha
}, 300);
};

var langDefaults = {
'available': 'Available',
'used': 'Used',
'of': 'of'
};

scope.lang = angular.extend({}, langDefaults, scope.lang);

scope.$watch('config', function () {
scope.updateAll(scope);
setupDonutChartTitle();
Expand Down
21 changes: 21 additions & 0 deletions test/charts/donut/donut-pct.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@ describe('Directive: pfDonutPctChart', function() {
"total": 1000
};

$scope.lang = {
"available": "Free",
"used": "Not available"
};

});

var compileDonut = function (markup, scope) {
Expand Down Expand Up @@ -78,6 +83,14 @@ describe('Directive: pfDonutPctChart', function() {
expect(isoScope.getCenterLabelText(isoScope).smText).toContain('Available');
});

it("should show 'free' center label - i18n", function() {
element = compileDonut('<div pf-donut-pct-chart config="config" data="data" center-label="cntrLabel" lang="lang"></div>', $scope);

$scope.cntrLabel = 'available';
$scope.$digest();
expect(isoScope.getCenterLabelText(isoScope).smText).toContain('Free');
});

it("should show 'percent' center label", function() {
element = compileDonut('<div pf-donut-pct-chart config="config" data="data" center-label="cntrLabel"></div>', $scope);

Expand All @@ -103,6 +116,14 @@ describe('Directive: pfDonutPctChart', function() {
expect(isoScope.getCenterLabelText(isoScope).smText).toContain('Used');
});

it("should show 'not available' center label - i18n", function() {
element = compileDonut('<div pf-donut-pct-chart config="config" data="data" center-label="cntrLabel" lang="lang"></div>', $scope);

$scope.cntrLabel = 'used';
$scope.$digest();
expect(isoScope.getCenterLabelText(isoScope).smText).toContain('Not available');
});

it("should use center label funtion", function() {
element = compileDonut('<div pf-donut-pct-chart config="config" data="data"></div>', $scope);

Expand Down