diff options
Diffstat (limited to 'priv/static/metrics-graphics-3.0-alpha3/src')
-rw-r--r-- | priv/static/metrics-graphics-3.0-alpha3/src/index.html | 238 | ||||
-rw-r--r-- | priv/static/metrics-graphics-3.0-alpha3/src/scss/.gitignore | 0 |
2 files changed, 238 insertions, 0 deletions
diff --git a/priv/static/metrics-graphics-3.0-alpha3/src/index.html b/priv/static/metrics-graphics-3.0-alpha3/src/index.html new file mode 100644 index 0000000..4f9ce02 --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/src/index.html @@ -0,0 +1,238 @@ +<html lang='en'> +<head> + <meta content='text/html; charset=utf-8' http-equiv='Content-Type'> + <link href='images/og-logo.png' rel='icon' type='image/png' /> + <title>MetricsGraphics.js (DEV)</title> + + <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> + <link href='https://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic' rel='stylesheet' type='text/css'> + <link href='https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' rel='stylesheet' type='text/css'> + <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css' rel='stylesheet' type='text/css'> + + <!-- loaded from dist --> + <link href='metricsgraphics.css' rel='stylesheet' type='text/css'> + <!-- loaded from examples/ --> + <link href='css/metricsgraphics-demo.css' rel='stylesheet' type='text/css'> + + <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> + <script src="https://d3js.org/d3.v4.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js" charset="utf-8"></script> + + <!-- dev start --> + <script src='js/MG.js'></script> + <script src='js/misc/utility.js'></script> + <script src='js/common/data_graphic.js'></script> + <script src='js/common/hooks.js'></script> + <script src='js/common/register.js'></script> + <script src='js/common/bootstrap_tooltip_popover.js'></script> + <script src='js/common/chart_title.js'></script> + <script src='js/common/scales.js'></script> + <script src='js/common/y_axis.js'></script> + <script src='js/common/x_axis.js'></script> + <script src='js/common/init.js'></script> + <script src='js/common/markers.js'></script> + <script src='js/common/rollover.js'></script> + <script src='js/common/zoom.js'></script> + <script src='js/common/brush.js'></script> + <script src='js/common/window_listeners.js'></script> + <script src='js/layout/bootstrap_dropdown.js'></script> + <script src='js/layout/button.js'></script> + <script src='js/charts/line.js'></script> + <script src='js/charts/histogram.js'></script> + <script src='js/charts/point.js'></script> + <script src='js/charts/bar.js'></script> + <script src='js/charts/table.js'></script> + <script src='js/charts/missing.js'></script> + <script src='js/misc/process.js'></script> + <script src='js/misc/smoothers.js'></script> + <script src='js/misc/formatters.js'></script> + <script src='js/misc/transitions.js'></script> + <script src='js/misc/error.js'></script> + <!-- dev end --> + + <style> + body { + background-color: #fcfcfc; + } + + .container { + width: 90%; + min-width: 960px; + } + + .data textarea { + font-family: Menlo,Monaco,Consolas,"Courier New",monospace; + font-size: 11px; + height: 100%; + width: 100%; + } + + .footer { + background-image: url(images/divider.png); + background-repeat: no-repeat; + background-position: center 115px; + padding-top: 70px; + margin-bottom: 20px; + } + + .hightop { + margin-top: 40px; + } + + #logo { + margin: 15px 0 10px 0; + } + + .main-windows-titles { + color: #3b3b3b; + font-size: 16px; + padding-bottom: 5px; + text-align: center; + } + + .main-windows-titles .js-title a { + position: absolute; + right: 0; + font-size: 70%; + margin: 7px 1px 0 0; + } + + .main-windows .data, + .main-windows .js, + .main-windows .result { + height: 400px; + } + + p { + padding-top: 6px; + } + + textarea, + #editor { + border-radius: 3px; + border: none; + overflow: auto; + outline: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + padding: 10px; + border: 1px solid #ccc; + } + + .btn { + background-color: steelblue; + color: white; + margin-top: 34px; + outline: none; + position: absolute; + right: 7px; + z-index: 99; + } + + .btn.reset { + right: 65px; + } + + .btn:hover, + .btn:active, + .btn:visited { + color: #efefef; + outline: none; + } + </style> +</head> + +<body> + <div class='container'> + <div class='head'> + <img src='images/logo.svg' id='logo' class='svg' /> + </div> + </div> + + <div class='container'> + <div class='row main-windows-titles'> + <div class='col-xs-2'>Data</div> + <div class='js-title col-xs-5'> + JavaScript <a href='https://github.com/mozilla/metrics-graphics/wiki/List-of-Options#list-of-options' target='_blank'>See Full List of Options</a> + <button type='button' class='update btn'>Run</button> + <button type='button' class='reset btn'>Reset</button> + </div> + </div> + <div class='row main-windows'> + <div class='data col-xs-2'> + <textarea></textarea> + </div> + <div class='js col-xs-5' id='editor'></div> + <div class='result text-center col-xs-5'></div> + </div> + </div> + + <div class='container footer'> + Created by <a href='https://twitter.com/alialmossawi'>Ali Almossawi</a> and + <a href='https://github.com/hamilton'>Hamilton Ulmer</a> + <br />2014-2015 · Shared under a <a href='http://www.mozilla.org/MPL/2.0/'> + Mozilla Public License</a> + </div> + + <script> + var mgKey = 'mg-dev', + editor, + persisted, + defaultCall = '//modify away!\n' + + 'MG.data_graphic({\n' + + ' title: "UFO Sightings",\n' + + ' description: "Yearly UFO sightings from 1945 to 2010.",\n' + + ' data: JSON.parse(document.querySelector(\'.data textarea\').value),\n' + + ' markers: [{\'year\': 1964, \'label\': \'"The Creeping Terror" released\'}],\n' + + ' width: 400,\n' + + ' height: 250,\n' + + ' target: ".result",\n' + + ' x_accessor: "year",\n' + + ' y_accessor: "sightings",\n' + + '});'; + + persisted = JSON.parse(localStorage.getItem(mgKey), null, 2) || {}; + + editor = ace.edit("editor"); + editor.getSession().setMode("ace/mode/javascript"); + editor.setValue(persisted.script || defaultCall); + editor.gotoLine(persisted.line || 1); + editor.setHighlightActiveLine(false); + + d3.select('.update').on('click', function() { + persisted.script = editor.getValue(); + persisted.data = JSON.parse(document.querySelector('.data textarea').value); + saveState(); + run(); + }); + + d3.select('.reset').on('click', function() { + clearState(); + document.location = document.location; + }); + + if (persisted.data) { + document.querySelector('.data textarea').value = JSON.stringify(persisted.data, null, 2); + run(); + } else { + d3.json('data/ufo-sightings.json', function(data) { + document.querySelector('.data textarea').value = JSON.stringify(data, null, 2); + run(); + }) + } + + function run() { + eval(editor.getValue()); + } + + function saveState(){ + localStorage.setItem(mgKey, JSON.stringify(persisted)); + } + + function clearState() { + localStorage.clear(mgKey); + } + </script> +</body> +</html> diff --git a/priv/static/metrics-graphics-3.0-alpha3/src/scss/.gitignore b/priv/static/metrics-graphics-3.0-alpha3/src/scss/.gitignore new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/src/scss/.gitignore |