Skip to content

Commit 7e6e7c8

Browse files
jeff-phillips-18jeff-phillips-18
authored
change use of patternfly setting functions from '$()' to 'patternfly' (#417)
* change use of patternfly setting functions from '$()' to 'patternfly' to help with non-jquery applications * Pass the patternfly global in IIFEs (add IIFEs where necessary)
1 parent 203ebd7 commit 7e6e7c8

File tree

5 files changed

+430
-426
lines changed

5 files changed

+430
-426
lines changed

‎src/charts/c3/c3-chart-defaults.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
(function () {
1+
(function (patternfly) {
22
'use strict';
33

4-
var patternflyDefaults = $().c3ChartDefaults();
4+
var patternflyDefaults = patternfly.c3ChartDefaults();
55

66
angular.module('patternfly.charts').constant('c3ChartDefaults', {
77
getDefaultColors: patternflyDefaults.getDefaultColors,
@@ -20,4 +20,4 @@
2020
getDefaultSparklineConfig: patternflyDefaults.getDefaultSparklineConfig,
2121
getDefaultLineConfig: patternflyDefaults.getDefaultLineConfig
2222
});
23-
})();
23+
})(patternfly);

‎src/charts/c3/c3-chart.directive.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
$scope.total = 1000;
3939
$scope.available = $scope.total - $scope.used;
4040
41-
$scope.chartConfig = $().c3ChartDefaults().getDefaultDonutConfig('MHz Used');
41+
$scope.chartConfig = patternfly.c3ChartDefaults().getDefaultDonutConfig('MHz Used');
4242
$scope.chartConfig.data = {
4343
type: "donut",
4444
columns: [
@@ -72,7 +72,7 @@
7272
</file>
7373
</example>
7474
*/
75-
(function () {
75+
(function (patternfly) {
7676
'use strict';
7777

7878
angular.module('patternfly.charts').directive('pfC3Chart', function ($timeout) {
@@ -103,4 +103,4 @@
103103
}
104104
};
105105
});
106-
}());
106+
}(patternfly));

‎src/charts/donut/donut-pct-chart-directive.js

Lines changed: 153 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -257,179 +257,180 @@
257257
</file>
258258
</example>
259259
*/
260-
angular.module('patternfly.charts').directive('pfDonutPctChart', function (pfUtils, $timeout) {
260+
(function (patternfly) {
261261
'use strict';
262+
angular.module('patternfly.charts').directive('pfDonutPctChart', function (pfUtils, $timeout) {
263+
return {
264+
restrict: 'A',
265+
scope: {
266+
config: '=',
267+
data: '=',
268+
chartHeight: '=?',
269+
centerLabel: '=?'
270+
},
271+
replace: true,
272+
templateUrl: 'charts/donut/donut-pct-chart.html',
273+
controller: ['$scope',
274+
function ($scope) {
275+
var donutTooltip;
276+
277+
$scope.donutChartId = 'donutChart';
278+
if ($scope.config.chartId) {
279+
$scope.donutChartId = $scope.config.chartId + $scope.donutChartId;
280+
}
262281

263-
return {
264-
restrict: 'A',
265-
scope: {
266-
config: '=',
267-
data: '=',
268-
chartHeight: '=?',
269-
centerLabel: '=?'
270-
},
271-
replace: true,
272-
templateUrl: 'charts/donut/donut-pct-chart.html',
273-
controller: ['$scope',
274-
function ($scope) {
275-
var donutTooltip;
276-
277-
$scope.donutChartId = 'donutChart';
278-
if ($scope.config.chartId) {
279-
$scope.donutChartId = $scope.config.chartId + $scope.donutChartId;
280-
}
281-
282-
$scope.updateAvailable = function () {
283-
$scope.data.available = $scope.data.total - $scope.data.used;
284-
};
282+
$scope.updateAvailable = function () {
283+
$scope.data.available = $scope.data.total - $scope.data.used;
284+
};
285285

286-
if ($scope.data.available === undefined) {
287-
$scope.updateAvailable();
288-
}
286+
if ($scope.data.available === undefined) {
287+
$scope.updateAvailable();
288+
}
289289

290-
$scope.getStatusColor = function (used, thresholds) {
291-
var color = pfUtils.colorPalette.blue;
290+
$scope.getStatusColor = function (used, thresholds) {
291+
var color = pfUtils.colorPalette.blue;
292292

293-
if (thresholds) {
294-
color = pfUtils.colorPalette.green;
295-
if (used >= thresholds.error) {
296-
color = pfUtils.colorPalette.red;
297-
} else if (used >= thresholds.warning) {
298-
color = pfUtils.colorPalette.orange;
293+
if (thresholds) {
294+
color = pfUtils.colorPalette.green;
295+
if (used >= thresholds.error) {
296+
color = pfUtils.colorPalette.red;
297+
} else if (used >= thresholds.warning) {
298+
color = pfUtils.colorPalette.orange;
299+
}
299300
}
300-
}
301301

302-
return color;
303-
};
302+
return color;
303+
};
304304

305-
$scope.statusDonutColor = function (scope) {
306-
var color, percentUsed;
305+
$scope.statusDonutColor = function (scope) {
306+
var color, percentUsed;
307307

308-
color = { pattern: [] };
309-
percentUsed = scope.data.used / scope.data.total * 100.0;
310-
color.pattern[0] = $scope.getStatusColor(percentUsed, scope.config.thresholds);
311-
color.pattern[1] = pfUtils.colorPalette.black300;
312-
return color;
313-
};
308+
color = { pattern: [] };
309+
percentUsed = scope.data.used / scope.data.total * 100.0;
310+
color.pattern[0] = $scope.getStatusColor(percentUsed, scope.config.thresholds);
311+
color.pattern[1] = pfUtils.colorPalette.black300;
312+
return color;
313+
};
314314

315-
donutTooltip = function (scope) {
316-
return {
317-
contents: function (d) {
318-
var tooltipHtml;
319-
320-
if (scope.config.tooltipFn) {
321-
tooltipHtml = '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
322-
scope.config.tooltipFn(d) +
323-
'</span>';
324-
} else {
325-
tooltipHtml = '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
326-
Math.round(d[0].ratio * 100) + '%' + ' ' + $scope.config.units + ' ' + d[0].name +
327-
'</span>';
315+
donutTooltip = function (scope) {
316+
return {
317+
contents: function (d) {
318+
var tooltipHtml;
319+
320+
if (scope.config.tooltipFn) {
321+
tooltipHtml = '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
322+
scope.config.tooltipFn(d) +
323+
'</span>';
324+
} else {
325+
tooltipHtml = '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
326+
Math.round(d[0].ratio * 100) + '%' + ' ' + $scope.config.units + ' ' + d[0].name +
327+
'</span>';
328+
}
329+
330+
return tooltipHtml;
328331
}
329-
330-
return tooltipHtml;
331-
}
332+
};
332333
};
333-
};
334334

335-
$scope.getDonutData = function (scope) {
336-
return {
337-
columns: [
338-
['Used', scope.data.used],
339-
['Available', scope.data.available]
340-
],
341-
type: 'donut',
342-
donut: {
343-
label: {
344-
show: false
345-
}
346-
},
347-
groups: [
348-
['used', 'available']
349-
],
350-
order: null
335+
$scope.getDonutData = function (scope) {
336+
return {
337+
columns: [
338+
['Used', scope.data.used],
339+
['Available', scope.data.available]
340+
],
341+
type: 'donut',
342+
donut: {
343+
label: {
344+
show: false
345+
}
346+
},
347+
groups: [
348+
['used', 'available']
349+
],
350+
order: null
351+
};
351352
};
352-
};
353353

354-
$scope.getCenterLabelText = function () {
355-
var centerLabelText;
356-
357-
// default to 'used' info.
358-
centerLabelText = { bigText: $scope.data.used,
359-
smText: $scope.config.units + ' Used' };
360-
361-
if ($scope.config.centerLabelFn) {
362-
centerLabelText.bigText = $scope.config.centerLabelFn();
363-
centerLabelText.smText = '';
364-
} else if ($scope.centerLabel === 'none') {
365-
centerLabelText.bigText = '';
366-
centerLabelText.smText = '';
367-
} else if ($scope.centerLabel === 'available') {
368-
centerLabelText.bigText = $scope.data.available;
369-
centerLabelText.smText = $scope.config.units + ' Available';
370-
} else if ($scope.centerLabel === 'percent') {
371-
centerLabelText.bigText = Math.round($scope.data.used / $scope.data.total * 100.0) + '%';
372-
centerLabelText.smText = 'of ' + $scope.data.total + ' ' + $scope.config.units;
373-
}
354+
$scope.getCenterLabelText = function () {
355+
var centerLabelText;
356+
357+
// default to 'used' info.
358+
centerLabelText = { bigText: $scope.data.used,
359+
smText: $scope.config.units + ' Used' };
360+
361+
if ($scope.config.centerLabelFn) {
362+
centerLabelText.bigText = $scope.config.centerLabelFn();
363+
centerLabelText.smText = '';
364+
} else if ($scope.centerLabel === 'none') {
365+
centerLabelText.bigText = '';
366+
centerLabelText.smText = '';
367+
} else if ($scope.centerLabel === 'available') {
368+
centerLabelText.bigText = $scope.data.available;
369+
centerLabelText.smText = $scope.config.units + ' Available';
370+
} else if ($scope.centerLabel === 'percent') {
371+
centerLabelText.bigText = Math.round($scope.data.used / $scope.data.total * 100.0) + '%';
372+
centerLabelText.smText = 'of ' + $scope.data.total + ' ' + $scope.config.units;
373+
}
374374

375-
return centerLabelText;
376-
};
375+
return centerLabelText;
376+
};
377377

378378

379-
$scope.updateAll = function (scope) {
380-
$scope.updateAvailable();
381-
$scope.config.data = pfUtils.merge($scope.config.data, $scope.getDonutData($scope));
382-
$scope.config.color = $scope.statusDonutColor($scope);
383-
$scope.config.tooltip = donutTooltip(scope);
384-
$scope.config.data.onclick = $scope.config.onClickFn;
385-
};
379+
$scope.updateAll = function (scope) {
380+
$scope.updateAvailable();
381+
$scope.config.data = pfUtils.merge($scope.config.data, $scope.getDonutData($scope));
382+
$scope.config.color = $scope.statusDonutColor($scope);
383+
$scope.config.tooltip = donutTooltip(scope);
384+
$scope.config.data.onclick = $scope.config.onClickFn;
385+
};
386386

387-
$scope.config = pfUtils.merge($().c3ChartDefaults().getDefaultDonutConfig(), $scope.config);
388-
$scope.updateAll($scope);
387+
$scope.config = pfUtils.merge(patternfly.c3ChartDefaults().getDefaultDonutConfig(), $scope.config);
388+
$scope.updateAll($scope);
389389

390390

391-
}
392-
],
393-
link: function (scope, element) {
394-
var setupDonutChartTitle = function () {
395-
$timeout(function () {
396-
var donutChartTitle, centerLabelText;
397-
398-
donutChartTitle = d3.select(element[0]).select('text.c3-chart-arcs-title');
399-
if (!donutChartTitle) {
400-
return;
401-
}
391+
}
392+
],
393+
link: function (scope, element) {
394+
var setupDonutChartTitle = function () {
395+
$timeout(function () {
396+
var donutChartTitle, centerLabelText;
397+
398+
donutChartTitle = d3.select(element[0]).select('text.c3-chart-arcs-title');
399+
if (!donutChartTitle) {
400+
return;
401+
}
402+
403+
centerLabelText = scope.getCenterLabelText();
402404

403-
centerLabelText = scope.getCenterLabelText();
405+
// Remove any existing title.
406+
donutChartTitle.selectAll('*').remove();
407+
if (centerLabelText.bigText && !centerLabelText.smText) {
408+
donutChartTitle.text(centerLabelText.bigText);
409+
} else {
410+
donutChartTitle.insert('tspan').text(centerLabelText.bigText).classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
411+
donutChartTitle.insert('tspan').text(centerLabelText.smText).classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
412+
}
413+
}, 300);
414+
};
404415

405-
// Remove any existing title.
406-
donutChartTitle.selectAll('*').remove();
407-
if (centerLabelText.bigText && !centerLabelText.smText) {
408-
donutChartTitle.text(centerLabelText.bigText);
409-
} else {
410-
donutChartTitle.insert('tspan').text(centerLabelText.bigText).classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
411-
donutChartTitle.insert('tspan').text(centerLabelText.smText).classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
416+
scope.$watch('config', function () {
417+
scope.updateAll(scope);
418+
setupDonutChartTitle();
419+
}, true);
420+
scope.$watch('chartHeight', function () {
421+
if (scope.chartHeight) {
422+
scope.config.size.height = scope.chartHeight;
412423
}
413-
}, 300);
414-
};
415-
416-
scope.$watch('config', function () {
417-
scope.updateAll(scope);
418-
setupDonutChartTitle();
419-
}, true);
420-
scope.$watch('chartHeight', function () {
421-
if (scope.chartHeight) {
422-
scope.config.size.height = scope.chartHeight;
423-
}
424-
});
425-
scope.$watch('data', function () {
426-
scope.updateAll(scope);
427-
setupDonutChartTitle();
428-
}, true);
429-
430-
scope.$watch('centerLabel', function () {
431-
setupDonutChartTitle();
432-
});
433-
}
434-
};
435-
});
424+
});
425+
scope.$watch('data', function () {
426+
scope.updateAll(scope);
427+
setupDonutChartTitle();
428+
}, true);
429+
430+
scope.$watch('centerLabel', function () {
431+
setupDonutChartTitle();
432+
});
433+
}
434+
};
435+
});
436+
}(patternfly));

0 commit comments

Comments
 (0)