BVB Source Codes

cockpit Show charts.js Source code

Return Download cockpit: download charts.js Source code - Download cockpit Source code - Type:.js
  1. /*
  2.  * This file is part of Cockpit.
  3.  *
  4.  * Copyright (C) 2016 Red Hat, Inc.
  5.  *
  6.  * Cockpit is free software; you can redistribute it and/or modify it
  7.  * under the terms of the GNU Lesser General Public License as published by
  8.  * the Free Software Foundation; either version 2.1 of the License, or
  9.  * (at your option) any later version.
  10.  *
  11.  * Cockpit is distributed in the hope that it will be useful, but
  12.  * WITHOUT ANY WARRANTY; without even the implied warranty of
  13.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
  14.  * Lesser General Public License for more details.
  15.  *
  16.  * You should have received a copy of the GNU Lesser General Public License
  17.  * along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
  18.  */
  19.  
  20. (function() {
  21.     "use strict";
  22.  
  23.     var angular = require('angular');
  24.     require('angular-bootstrap/ui-bootstrap.js');
  25.  
  26.     var d3 = require('d3');
  27.  
  28.     var focusedClasses = {
  29.         "chart-focused": true,
  30.         "chart-unfocused": false
  31.     };
  32.     var unfocusedClasses = {
  33.         "chart-focused": false,
  34.         "chart-unfocused": true
  35.     };
  36.     var focusResetClasses = {
  37.         "chart-focused": false,
  38.         "chart-unfocused": false
  39.     };
  40.  
  41.     function parsePXVal(val) {
  42.         var n;
  43.         if (val)
  44.             n = parseInt(val.slice(0, val.length-2), 10);
  45.  
  46.         if (!n || isNaN(n))
  47.             n = 0;
  48.  
  49.         return n;
  50.     }
  51.  
  52.     function getPadding(el) {
  53.         // May return null on FF when iframe is hidden.
  54.         var style = window.getComputedStyle(el, null);
  55.         if (style) {
  56.             return {
  57.                 left: parsePXVal(style.getPropertyValue('padding-left')),
  58.                 right: parsePXVal(style.getPropertyValue('padding-right')),
  59.                 top: parsePXVal(style.getPropertyValue('padding-top')),
  60.                 bottom: parsePXVal(style.getPropertyValue('padding-bottom'))
  61.             };
  62.         } else {
  63.             return {
  64.                 left: 0,
  65.                 right: 0,
  66.                 top: 0,
  67.                 bottom: 0
  68.             };
  69.         }
  70.     }
  71.  
  72.     function getSize(el) {
  73.         var p = getPadding(el);
  74.         var width = el.clientWidth - p.left - p.right;
  75.         var height = el.clientHeight - p.top - p.bottom;
  76.  
  77.         if (width < 0)
  78.             width = 0;
  79.         if (height < 0)
  80.             height = 0;
  81.  
  82.         return {
  83.             width: width,
  84.             height: height
  85.         };
  86.     }
  87.  
  88.     angular.module('ui.charts', [
  89.         'ui.bootstrap',
  90.     ])
  91.  
  92.     .directive('thresholdHeatMap', [
  93.         "$window",
  94.         "KubeTranslate",
  95.         "$timeout",
  96.         function ($window, translate, $timeout) {
  97.             var _ = translate.gettext;
  98.  
  99.             return {
  100.                 restrict: 'A',
  101.                 scope: {
  102.                     data: '=?',
  103.                     legendLabels: '=?',
  104.                     thresholds: '=?',
  105.                     colors: '=?',
  106.                 },
  107.                 link: function($scope, element, attributes) {
  108.                     var data;
  109.                     var padding = 2;
  110.                     var thresholdDefaults = [0, 0.7, 0.8, 0.9];
  111.                     var heatmapColorDefaults = ['#bbbbbb', '#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000' ];
  112.                     var legendLabelDefaults = [_("Unavailable"), '< 70%', '70-80%', '80-90%', '> 90%'];
  113.  
  114.                     var maxSize = attributes['maxBlockSize'];
  115.                     if (!maxSize || isNaN(maxSize)) {
  116.                         maxSize = 64;
  117.                     } else {
  118.                         maxSize = parseInt(maxSize, 10);
  119.                         if (maxSize < 5)
  120.                             maxSize = 5;
  121.                         else if (maxSize > 64)
  122.                             maxSize = 64;
  123.                     }
  124.  
  125.                     if (!$scope.thresholds)
  126.                         $scope.thresholds = thresholdDefaults;
  127.  
  128.                     if (!$scope.colors)
  129.                         $scope.colors = heatmapColorDefaults;
  130.  
  131.                     if (!$scope.legendLabels)
  132.                         $scope.legendLabels = legendLabelDefaults;
  133.  
  134.                     var svg = d3.select(element[0]).append("svg")
  135.                         .classed("heatmap-pf-svg", true)
  136.                         .style("width", "100%");
  137.  
  138.                     if (attributes['legend'])
  139.                         buildLegend();
  140.  
  141.                     function getBlockSize(n, x, y) {
  142.                         if (x < 1 || y < 1)
  143.                             return 0;
  144.  
  145.                         if (n === 0)
  146.                             return maxSize;
  147.  
  148.                         var px = Math.ceil(Math.sqrt(n * x / y));
  149.                         var py = Math.ceil(Math.sqrt(n * y / x));
  150.                         var sx, sy;
  151.  
  152.                         if (Math.floor(px * y / x) * px < n)
  153.                             sx = y / Math.ceil(px * y / x);
  154.                         else
  155.                             sx = x / px;
  156.  
  157.                         if (Math.floor(py * x / y) * py < n)
  158.                             sy = x / Math.ceil(x * py / y);
  159.                         else
  160.                             sy = y / py;
  161.  
  162.                         return Math.max(sx, sy);
  163.                     }
  164.  
  165.                     function getSizeInfo() {
  166.                         var length = data ? data.length : 0;
  167.                         var size = getSize(element[0]);
  168.                         var h = size.height;
  169.                         var w = size.width;
  170.  
  171.                         var rows;
  172.  
  173.                         var blockSize = getBlockSize(length, w, h);
  174.                         if ((blockSize - padding) > maxSize) {
  175.                             blockSize = padding + maxSize;
  176.  
  177.                             // Attempt to square off the area, check if square fits
  178.                             rows = Math.ceil(Math.sqrt(length));
  179.                             if (blockSize * rows > w ||
  180.                                 blockSize * rows > h) {
  181.                                 rows = (blockSize === 0) ? 0 : Math.floor(h / blockSize);
  182.                             }
  183.  
  184.                         } else {
  185.                             rows = (blockSize === 0) ? 0 : Math.floor(h / blockSize);
  186.                         }
  187.                         return {
  188.                             rows: rows,
  189.                             block: blockSize
  190.                         };
  191.                     }
  192.  
  193.                     function buildLegend() {
  194.                         var colors = $scope.colors.slice(0);
  195.                         var labels = $scope.legendLabels.slice(0);
  196.  
  197.                         labels.reverse();
  198.                         colors.reverse();
  199.  
  200.                         var legend = d3.select("#" + attributes['legend'])
  201.                             .append('ul').classed('chart-legend', true);
  202.  
  203.                         var li = legend.selectAll("li").data(labels);
  204.  
  205.                         var newLi = li.enter().append("li")
  206.                             .classed('chart-legend-item', true)
  207.                             .on("mouseover", function(d, i) {
  208.                                 var color = colors[i];
  209.                                 var rsel = "rect[data-color='" + color + "']";
  210.                                 var lsel = "li[data-color='" + color + "']";
  211.  
  212.                                 legend.selectAll("li").classed(unfocusedClasses);
  213.                                 legend.select(lsel).classed(focusedClasses);
  214.  
  215.                                 svg.selectAll("rect").classed(unfocusedClasses);
  216.                                 svg.selectAll(rsel).classed(focusedClasses);
  217.                             })
  218.                             .on("mouseout", function (d, i) {
  219.                                svg.selectAll("rect").classed(focusResetClasses);
  220.                                legend.selectAll("li").classed(focusResetClasses);
  221.                             });
  222.  
  223.                         newLi.append("span")
  224.                             .classed('legend-pf-color-box', true);
  225.  
  226.                         newLi.append("span")
  227.                             .classed('legend-pf-text', true);
  228.  
  229.                         li.attr("data-color", function (d, i) {
  230.                             return colors[i];
  231.                         });
  232.  
  233.                         li.select("span.legend-pf-color-box")
  234.                             .style("background-color", function (d, i) {
  235.                                 return colors[i];
  236.                             });
  237.  
  238.                         li.select("span.legend-pf-text")
  239.                             .text(function (d) {
  240.                                 return d;
  241.                             });
  242.                     }
  243.  
  244.                     function getcolor(d, colorFunc) {
  245.                         var value = d;
  246.                         if (d && d.value !== undefined)
  247.                             value = d.value;
  248.  
  249.                         if (isNaN(value))
  250.                             value = -1;
  251.  
  252.                         return colorFunc(value);
  253.                     }
  254.  
  255.                     function refresh() {
  256.                         var colorFunc = d3.scale.threshold()
  257.                             .domain($scope.thresholds)
  258.                             .range($scope.colors);
  259.  
  260.                         var size = getSizeInfo();
  261.                         if (!data)
  262.                             data = [ ];
  263.  
  264.                         var fillSize = size.block - padding;
  265.                         if (fillSize < 1)
  266.                             return;
  267.  
  268.                         svg.attr("height", size.block * size.rows);
  269.                         var blocks = svg.selectAll('rect').data(data);
  270.  
  271.                         blocks.enter().append('rect')
  272.                             .on("mouseover", function(d, i) {
  273.                                 svg.selectAll('rect').classed(unfocusedClasses);
  274.                                 d3.select(this).classed(focusedClasses);
  275.                             })
  276.                             .on("mouseout", function (d, i) {
  277.                                 svg.selectAll('rect').classed(focusResetClasses);
  278.                             })
  279.                             .append("title");
  280.  
  281.                         blocks
  282.                             .attr('x', function (d, i) {
  283.                                 return Math.floor(i / size.rows) * size.block;
  284.                             })
  285.                             .attr('y', function (d, i) {
  286.                                 return i % size.rows * size.block;
  287.                             })
  288.                             .attr('width', fillSize)
  289.                             .attr('height', fillSize)
  290.                             .attr('data-color', function (d) {
  291.                                 return getcolor(d, colorFunc);
  292.                             })
  293.                             .style('fill', function (d) {
  294.                                 return getcolor(d, colorFunc);
  295.                             })
  296.                             .on('click', function (d) {
  297.                                 if (d && d.name)
  298.                                     $scope.$emit("boxClick", d.name);
  299.                             })
  300.                             .select("title").text(function(d) {
  301.                                return d.tooltip;
  302.                             });
  303.  
  304.                         blocks.exit().remove();
  305.                     }
  306.  
  307.                     $scope.$watchCollection('data', function(newValue) {
  308.                         data = newValue;
  309.                         refresh();
  310.                     });
  311.  
  312.                     angular.element($window).bind('resize', function () {
  313.                         refresh();
  314.                     });
  315.  
  316.                     $scope.$watch(
  317.                         function () {
  318.                             return [element[0].offsetWidth, element[0].offsetHeight].join('x');
  319.                         },
  320.                         function (value) {
  321.                             refresh();
  322.                         }
  323.                     );
  324.                 }
  325.             };
  326.         }
  327.     ])
  328.  
  329.     .directive('donutPctChart', [
  330.         "$window",
  331.         function ($window) {
  332.  
  333.             return {
  334.                 restrict: 'A',
  335.                 scope: {
  336.                     data: '=?',
  337.                     largeTitle: '=?',
  338.                     smallTitle: '=?',
  339.                 },
  340.                 link: function($scope, element, attributes) {
  341.                     var arc, selectedArc, data;
  342.                     var colors = d3.scale.category20();
  343.  
  344.                     var pie = d3.layout.pie().value(function (d) {
  345.                         if (typeof d === 'object')
  346.                             return d.value;
  347.                         else
  348.                             return d;
  349.                     });
  350.  
  351.                     var legend;
  352.                     if (attributes['legend']) {
  353.                         legend = d3.select("#"+attributes['legend'])
  354.                             .append('ul').classed('chart-legend', true);
  355.                     }
  356.  
  357.                     var svg = d3.select(element[0]).append("svg");
  358.                     svg.style("width", "100%");
  359.                     svg.style("height", "100%");
  360.  
  361.                     var g = svg.append("g");
  362.                     g.append('text').attr('class', "chart-title");
  363.  
  364.                     function updateSize() {
  365.                         var size = getSize(element[0]);
  366.                         var width = size.width;
  367.                         var height = size.height;
  368.                         var c, radius = Math.min(width, height) / 2;
  369.                         var barSize = parseInt(attributes['barSize'], 10);
  370.                         if (isNaN(barSize))
  371.                             barSize = 20;
  372.  
  373.                         if ((barSize * 2) > radius)
  374.                             barSize = radius;
  375.  
  376.                         arc = d3.svg.arc()
  377.                             .innerRadius(radius - (barSize * 2))
  378.                             .outerRadius(radius - barSize);
  379.  
  380.                         selectedArc = d3.svg.arc()
  381.                                         .innerRadius(radius - (barSize * 2))
  382.                                         .outerRadius(radius - (barSize - 2));
  383.  
  384.                         c = (radius - barSize - 2) * 2;
  385.                         g.attr('data-innersize', Math.sqrt((c * c) / 2));
  386.                         updateTitle();
  387.  
  388.                         g.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
  389.                         refresh();
  390.                     }
  391.  
  392.                     function calFontSize() {
  393.                         /* jshint validthis:true */
  394.                         var width = this.getComputedTextLength();
  395.                         var inner = parseInt(g.attr("data-innersize"), 10);
  396.                         var style = window.getComputedStyle(this, null);
  397.                         var size, ratio;
  398.  
  399.                         if (style && width) {
  400.                             size = style.getPropertyValue('font-size');
  401.                             ratio = inner / width;
  402.                         } else {
  403.                             width = 0;
  404.                         }
  405.  
  406.                         if (!isNaN(inner) && width > inner)
  407.                             return "calc(" + size + " * " + ratio + ")";
  408.                     }
  409.  
  410.                     function updateTitle() {
  411.                         var title = g.select('text.chart-title');
  412.                         var size = parseInt(g.attr("data-innersize"), 10);
  413.                         if (isNaN(size))
  414.                             return;
  415.  
  416.                         title.selectAll('tspan').remove();
  417.                         if ($scope.largeTitle) {
  418.                             title.insert('tspan').text($scope.largeTitle)
  419.                                 .classed('donut-title-big-pf', true)
  420.                                 .attr('dy', 0).attr('x', 0)
  421.                                 .style("font-size", calFontSize);
  422.                         }
  423.  
  424.                         if ($scope.smallTitle) {
  425.                             title.insert('tspan').text($scope.smallTitle)
  426.                                 .classed('donut-title-small-pf', true)
  427.                                 .attr('dy', 20).attr('x', 0)
  428.                                 .style("font-size", calFontSize);
  429.                         }
  430.                     }
  431.  
  432.                     function select(id) {
  433.                         var sel = "path[data-id='" + id + "']";
  434.                         var lsel = "li[data-id='" + id + "']";
  435.                         g.selectAll("path").classed(unfocusedClasses);
  436.  
  437.                         g.select(sel).attr("d", function (d, i) {
  438.                             return selectedArc(d, i);
  439.                         });
  440.                         g.select(sel).classed(focusedClasses);
  441.  
  442.                         if (legend) {
  443.                             legend.selectAll("li").classed(unfocusedClasses);
  444.                             legend.select(lsel).classed(focusedClasses);
  445.                         }
  446.                     }
  447.  
  448.                     function unselect() {
  449.                        g.selectAll("path")
  450.                           .classed(focusResetClasses)
  451.                           .attr("d", arc);
  452.                         if (legend) {
  453.                             legend.selectAll("li")
  454.                                 .classed(focusResetClasses);
  455.                         }
  456.                     }
  457.  
  458.                     function refreshLegend() {
  459.                         var li = legend.selectAll("li").data(data);
  460.  
  461.                         var newLi = li.enter().append("li")
  462.                             .classed('chart-legend-item', true)
  463.                             .on("mouseover", function() {
  464.                                 select(this.getAttribute('data-id'));
  465.                             })
  466.                             .on("mouseout", unselect);
  467.  
  468.                         newLi.append("span").classed('legend-pf-color-box', true);
  469.                         newLi.append("span").classed('legend-pf-text', true);
  470.  
  471.                         li.attr("data-id", function (d, i) {
  472.                                 return i;
  473.                             });
  474.  
  475.                         li.select("span.legend-pf-color-box")
  476.                             .style("background-color", function (d, i) {
  477.                                 if (d && d.color)
  478.                                     return d.color;
  479.                                 else
  480.                                     return colors(i);
  481.                             });
  482.  
  483.                         li.select("span.legend-pf-text")
  484.                             .text(function (d) {
  485.                                 if (d && d.label)
  486.                                     return d.label;
  487.                                 else
  488.                                     return d;
  489.                             });
  490.  
  491.                         li.exit().remove();
  492.                     }
  493.  
  494.                     function refresh() {
  495.                         if (!data)
  496.                             data = [];
  497.  
  498.                         var path = g.selectAll("path")
  499.                             .data(pie(data));
  500.  
  501.                         path.enter().append("path")
  502.                             .on("mouseover", function(i) {
  503.                                 select(this.getAttribute('data-id'));
  504.                             })
  505.                             .on("mouseout", unselect)
  506.                             .append("title");
  507.  
  508.                         path.attr("fill", function(d, i) {
  509.                                 if (d.data && d.data.color)
  510.                                     return d.data.color;
  511.                                 else
  512.                                     return colors(i);
  513.                             })
  514.                             .attr("d", arc)
  515.                             .attr("data-id", function (d, i) {
  516.                                 return i;
  517.                             })
  518.                             .select("title").text(function(d) {
  519.                                if (d.data && d.data.tooltip)
  520.                                    return d.data.tooltip;
  521.                             });
  522.  
  523.                         path.exit().remove();
  524.  
  525.                         if (legend)
  526.                             refreshLegend();
  527.                     }
  528.  
  529.                     $scope.$watchCollection('data', function(newValue) {
  530.                         data = newValue;
  531.                         refresh();
  532.                     });
  533.  
  534.                     /* Watch the selection for changes */
  535.                     $scope.$watchGroup(["largeTitle", "smallTitle"], function() {
  536.                         updateTitle();
  537.                     });
  538.  
  539.                     angular.element($window).bind('resize', function () {
  540.                         updateSize();
  541.                     });
  542.  
  543.                     $scope.$watch(
  544.                         function () {
  545.                             return [element[0].offsetWidth, element[0].offsetHeight].join('x');
  546.                         },
  547.                         function (value) {
  548.                             updateSize();
  549.                         }
  550.                     );
  551.                 }
  552.             };
  553.         }
  554.     ]);
  555. }());
  556.  
downloadcharts.js Source code - Download cockpit Source code
Related Source Codes/Software:
elasticsearch-kopf - web admin interface for elasticsearch 2017-05-07
xunlei-lixian - Thunderbolt offline download script 2017-05-07
xadmin - Drop-in replacement of Django admin comes with lot... 2017-05-07
p2pspider - DHT Spider + BitTorrent Client = P2P Spider 2017-05-07
Backbone.localStorage - A localStorage adapter for Backbone.j 2017-05-07
phenomic - 2017-05-07
shoulda - Makes tests easy on the fingers and the eyes ... 2017-05-07
mio - Metal IO library for Rust 2017-05-07
nova - OpenStack Compute (Nova) ht... 2017-05-07
gobyexample - Go by Example https://gobye... 2017-05-07
react-boilerplate - 2017-06-07
webtorrent - Streaming torrent client for the web ... 2017-06-06
machine-learning-for-software-engineers - A complete daily plan for studying to become a mac... 2017-06-06
upterm - A terminal emulator for the 21st century. 2017-06-06
huginn - Create agents that monitor and act on your behalf.... 2017-06-06
system-design-primer - Learn how to design large-scale systems. Prep for ... 2017-06-06
design-patterns-for-humans - Design Patterns for Humans - An ultra-simplified e... 2017-06-06
developer-roadmap - Roadmap to becoming a web developer in 2017 2017-06-06
nylas-mail - 2017-06-06

 Back to top