| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="https://d3js.org/d3.v5.min.js"></script> |
| </head> |
| <body> |
| <style> |
| body { |
| font-family: Arial, Helvetica, sans-serif; |
| } |
| </style> |
| <div id='canvas'></div> |
| </body> |
| <script src="./graph_utils.js"></script> |
| <script src="./graph_data.js"></script> |
| <script src="./line_plotter.js"></script> |
| <script src="./box_plotter.js"></script> |
| <script src="./dot_plotter.js"></script> |
| <script src="./bar_plotter.js"></script> |
| <script src="./stacked_bar_plotter.js"></script> |
| <script src="./graph_plotter.js"></script> |
| <script> |
| 'use strict'; |
| /* |
| * Example usage of chart plotting. |
| */ |
| const DATA_LOCATION = './example/data/TravelGifPage.csv'; |
| const METRIC_NAME = 'memory:chrome:all_processes:reported_by_os:' + |
| 'proportional_resident_size'; |
| // const without = []; |
| // const withs = []; |
| const MiB = 1024 * 1024; |
| const data = { |
| storyOne: { |
| 'a': [1, 1, 1], |
| 'b': [2, 2, 2], |
| 'c': [3, 3, 3], |
| }, |
| storyTwo: { |
| 'a': [4, 1, 1], |
| 'b': [2, 2, 2], |
| 'c': [3, 3, 3], |
| }, |
| }; |
| const dataTwo = { |
| storyOne: { |
| 'a': [1, 4, 1], |
| 'b': [2, 2, 5], |
| 'c': [20, 3, 3], |
| }, |
| storyTwo: { |
| 'a': [4, 1, 1], |
| 'b': [2, 5, 2], |
| 'c': [1, 3, 3], |
| }, |
| }; |
| |
| const convertBytesToMiB = (value) => +((value / MiB).toFixed(5)); |
| |
| const loadData = async() => { |
| // const data = await d3.csv(DATA_LOCATION); |
| // const propResSizeData = data.filter(row => row.name === METRIC_NAME); |
| // propResSizeData.forEach((row, index) => { |
| // without.push(convertBytesToMiB(+row.avg_y)); |
| // withs.push(convertBytesToMiB(+row.avg_x)); |
| // }); |
| const graph = new GraphData(); |
| graph.xAxis('Stories') |
| .yAxis('Memory used (MiB)') |
| .title('Average memory used with and without site' + |
| 'isolation enabled for each story') |
| .setData({ |
| singleStack: data, |
| secondStack: dataTwo, |
| }) |
| .plotStackedBar(); |
| }; |
| loadData(); |
| </script> |
| </html> |
