diff --git a/.gitignore b/.gitignore index 8c1deb0..4491ed0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,10 @@ +.DS_Store .grunt .sass-cache node_modules bower_components +user.js +dist/ +docs/build +angular-dimple.zip +docs/source/assets/js/lib diff --git a/CHANGELOG.md b/CHANGELOG.md index 1cb67ae..2164ec9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,30 +1,34 @@ # Angular-Dimple Changelog -# v1.1.2 +## v1.1.3 +* rebuild site +* add `color` attribute on graph.js + +## v1.1.2 * add default width (100%) * add default height (100%) * add default margin (60, 60, 20, 40) -# v1.1.1 +## v1.1.1 * add time formats and such -# v1.1.0 +## v1.1.0 * add functionality inside ng-repeat * graphs update live when scope changes * add ring charts -# v1.0.2 +## v1.0.2 * add bower dependencies -# v1.0.1 +## v1.0.1 * add bower manifest * add changelog * add label attribute to scatter-plots -# v1.0.0 +## v1.0.0 * support for graph, axis, and legend * support for bar, stacked, bar, area, stacked area, line, and scatter-plots * full documentation -# v0.0.1 +## v0.0.1 * alpha release \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index 3cfe35e..ad5ce8d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,147 +1,218 @@ +// ┌─────────────┐ +// │ Gruntfile │ +// └─────────────┘ +// Grunt wraps several tasks to ease development +// runs acetate, deploys the site, and tags new releases + +// To draft a release, add GitHub credentials to user.js +var fs = require('fs'); +var user = function(){}; + +if (fs.existsSync('./user.js')) { + user = require('./user.js'); +} + +// Gets current version description from CHANGELOG.md +function findVersion(log) { + var newVersion = log.split('## v')[1]; + var description = newVersion.substring(5,newVersion.length); + return description; +} + module.exports = function(grunt) { + var pkg = grunt.file.readJSON('package.json'); + var name = pkg.name; + var repo = pkg.repository.split('github.com/')[1]; + var currentVersion = 'v' + pkg.version; + var log = grunt.file.read('CHANGELOG.md'); + var description = findVersion(log); + + // Javascript banner + var banner = '/*! ' + name + ' - <%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %>\n' + + '* https://github.com/' + repo + '\n' + + '* Licensed ISC */\n'; + + require('load-grunt-tasks')(grunt); - // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), - 'gh-pages': { - options: { - base: 'site', - repo: 'https://github.com/esripdx/angular-dimple.git' - }, - src: '**/*' - }, - 'watch': { - source: { - files: ['./source/**/*'], - tasks: ['concat', 'uglify', 'jshint'], - options: { - nospawn: true - } + + // Build documentation site + 'acetate': { + build: { + config: 'acetate.conf.js' }, - examples: { - files: ['./site/js/*.js'], - tasks: ['jshint'], + watch: { + config: 'acetate.conf.js', options: { - nospawn: true + watch: true, + server: true } - }, + } + }, + + // Watch sass, images, and javascript + 'watch': { sass: { - files: ['./site/scss/**/*'], - tasks: ['compass'], - options: { - nospawn: true - } + files: ['docs/source/assets/css/**/*'], + tasks: ['sass'] }, - docs: { - files: ['documentation/**'], - tasks: ['markdown'], - options: { - nospawn: true - } + img: { + files: ['docs/source/assets/img/**/*'], + tasks: ['newer:imagemin'] + }, + js: { + files: ['docs/source/assets/js/**/*', 'lib/**.*'], + tasks: ['lib', 'jshint:docs', 'copy:docs'] } }, - 'compass': { - dev: { + + // Build site sass + 'sass': { + expanded: { options: { - sassDir: 'site/scss', - cssDir: 'site/css' + style: 'expanded', + sourcemap: 'none', + loadPath: 'bower_components' + }, + files: { + 'docs/build/assets/css/style.css': 'docs/source/assets/css/style.scss' } } }, + + // Optimize images + 'imagemin': { + doc: { + files: [{ + expand: true, + cwd: 'docs/source/assets/img', + src: ['**/*.{png,jpg,svg}'], + dest: 'docs/build/assets/img/' + }] + } + }, + + // Check js for errors 'jshint': { - files: [ - './source/**/*.js', - './site/js/*.js' + lib: [ + 'lib/**/*.js' + ], + docs: [ + 'docs/source/assets/js/**.js' ] }, + + // Concatenate lib 'concat': { options: { stripBanners: true, - banner: '/*! Angular-Dimple - <%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %>\n' + - '* https://github.com/esripdx/angular-dimple\n' + - '* Licensed ISC */\n' + banner: banner }, dist: { - src: ['source/*.js'], - dest: 'dist/angular-dimple.js' - }, - examples: { - src: ['source/*.js'], - dest: 'site/js/lib/angular-dimple.js' - }, + src: ['lib/*.js'], + dest: 'dist/' + name + '.js' + } }, + + // Minified version of lib 'uglify': { dist: { - files: { - 'dist/angular-dimple.min.js': ['source/*.js'] - } - }, - examples: { - files: { - 'site/js/lib/angular-dimple.min.js': ['source/*.js'] - } + src: ['lib/*.js'], + dest: 'dist/' + name + '.min.js' } }, - 'connect': { - 'static': { - options: { - base: 'site/', - hostname: 'localhost', - port: 8001 - } + + // Copy files + 'copy': { + dist: { + expand: true, + cwd: 'dist/', + src: ['*'], + dest: 'docs/source/assets/js/lib/' + }, + docs: { + expand: true, + cwd: 'docs/source/assets/js/', + src: ['**/*'], + dest: 'docs/build/assets/js/' + }, + data: { + expand: true, + cwd: 'docs/source/data', + src: ['*'], + dest: 'docs/build/data/' } }, - 'markdown': { - all: { - files: [ - { - expand: true, - src: 'documentation/index.md', - dest: 'site/', - ext: '.html' - } - ], + + // Make a zip file of the dist folder + 'compress': { + main: { options: { - template: 'documentation/layout.html', - markdownOptions: { - gfm: true, - highlight: 'manual' - } - } - }, - partials: { + archive: repo + '.zip' + }, files: [ { - expand: true, - src: 'documentation/partials/*.md', - dest: 'site/', - ext: '.html' - } - ], - options: { - template: 'documentation/blank.html', - markdownOptions: { - gfm: true, - highlight: 'manual' - } + src: ['dist/**'], + dest: './' + }, + ] + } + }, + + // This task runs right after npm install + 'concurrent': { + prepublish: [ + 'sass', + 'uglify', + 'copy', + 'concat:dist', + 'newer:imagemin' + ] + }, + + // Release a new version on GitHub + 'github-release': { + options: { + repository: repo, + auth: user(), + release: { + tag_name: currentVersion, + name: currentVersion, + body: description, + prerelease: true } + }, + files: { + src: name + '.zip' } + }, + + // Deploy the docs site to gh-pages + 'gh-pages': { + options: { + base: 'build', + repo: 'https://github.com/' + repo + '.git' + }, + src: ['**'] } }); - grunt.loadNpmTasks('grunt-contrib-jshint'); - grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.loadNpmTasks('grunt-contrib-compass'); - grunt.loadNpmTasks('grunt-contrib-connect'); - grunt.loadNpmTasks('grunt-contrib-uglify'); - grunt.loadNpmTasks('grunt-contrib-concat'); - grunt.loadNpmTasks('grunt-gh-pages'); - grunt.loadNpmTasks('grunt-markdown'); - - grunt.registerTask('test', ['jshint']); - grunt.registerTask('build', ['test', 'concat', 'uglify', 'markdown', 'compass']); - grunt.registerTask('develop', ['connect', 'build', 'watch']); - grunt.registerTask('deploy', ['build', 'gh-pages']); - grunt.registerTask('default', ['develop']); + // Build a dist folder with all assets + grunt.registerTask('prepublish', [ + 'concurrent:prepublish' + ]); + + grunt.registerTask('lib', ['jshint:lib', 'concat:dist', 'uglify:dist']); + grunt.registerTask('deploy', ['lib', 'acetate:build', 'sass', 'newer:imagemin', 'gh-pages']); + + // Release a new version of the framework + grunt.registerTask('release', [ + 'prepublish', + 'compress', + 'github-release' + ]); + + grunt.registerTask('default', ['lib', 'jshint:docs', 'copy', 'newer:imagemin', 'sass', 'acetate:watch', 'watch']); }; diff --git a/acetate.conf.js b/acetate.conf.js new file mode 100644 index 0000000..a930497 --- /dev/null +++ b/acetate.conf.js @@ -0,0 +1,11 @@ +module.exports = function (acetate) { + acetate.global('config', { + environment: 'dev' + }); + + acetate.layout('**/*', 'layouts/_layout:content'); + acetate.layout('posts/**/*', 'layouts/_post:post'); + + acetate.options.src = 'docs/source'; + acetate.options.dest = 'docs/build'; +}; \ No newline at end of file diff --git a/bower.json b/bower.json index 6ada2b8..780e00f 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular-dimple", - "version": "1.1.2", + "version": "1.1.3", "main": "dist/angular-dimple.js", "homepage": "http://esripdx.github.io/angular-dimple/", "authors": [ @@ -27,6 +27,9 @@ ], "dependencies": { "d3": "~3.4.8", - "dimple": "~2.0.0" + "dimple": "~2.0.0", + "typecabinet": "~0.0.2", + "viewport-grid": "*", + "rye": "~0.0.1" } } diff --git a/dist/angular-dimple.js b/dist/angular-dimple.js deleted file mode 100644 index 7fcdb55..0000000 --- a/dist/angular-dimple.js +++ /dev/null @@ -1,564 +0,0 @@ -/*! Angular-Dimple - 1.1.2 - 2014-09-26 -* https://github.com/esripdx/angular-dimple -* Licensed ISC */ -angular.module('angular-dimple', [ - 'angular-dimple.graph', - 'angular-dimple.legend', - 'angular-dimple.x', - 'angular-dimple.y', - 'angular-dimple.r', - 'angular-dimple.line', - 'angular-dimple.bar', - 'angular-dimple.stacked-bar', - 'angular-dimple.area', - 'angular-dimple.stacked-area', - 'angular-dimple.scatter-plot', - 'angular-dimple.ring' -]) - -.constant('MODULE_VERSION', '0.0.1') - -.value('defaults', { - foo: 'bar' -}); -angular.module('angular-dimple.area', []) - -.directive('area', [function () { - return { - restrict: 'E', - replace: true, - require: ['area', '^graph'], - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - }], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var areaController = $controllers[0]; - var chart = graphController.getChart(); - - function addArea () { - if ($attrs.value) { - area = chart.addSeries([$attrs.field], dimple.plot.area); - graphController.filter($attrs); - area.lineMarkers = true; - } else { - var values = dimple.getUniqueValues($scope.data, $attrs.field); - angular.forEach(values, function(value){ - area = chart.addSeries([$attrs.field], dimple.plot.area); - graphController.filter($attrs); - area.lineMarkers = true; - }); - } - graphController.draw(); - } - - $scope.$watch('dataReady', function(newValue, oldValue) { - if (newValue === true) { - addArea(); - } - }); - } - }; -}]); - - -angular.module('angular-dimple.bar', []) - -.directive('bar', [function () { - return { - restrict: 'E', - replace: true, - require: ['bar', '^graph'], - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - }], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var lineController = $controllers[0]; - var chart = graphController.getChart(); - - function addBar () { - var filteredData; - bar = chart.addSeries([$attrs.field], dimple.plot.bar); - graphController.filter($attrs); - graphController.draw(); - } - - - - $scope.$watch('dataReady', function(newValue, oldValue) { - if (newValue === true) { - addBar(); - } - }); - } - }; -}]); -angular.module('angular-dimple.graph', []) - -.directive('graph', [function () { - return { - restrict: 'E', - replace: true, - scope: { - data: '=', - }, - require: ['graph'], - transclude: true, - link: function (scope, element, attrs, controllers, transclude) { - var graphController = controllers[0]; - graphController._createChart(); - scope.dataReady = false; - scope.filters = []; - - var chart = graphController.getChart(); - var transition; - if (attrs.transition) { - transition = attrs.transition; - } else { - transition = 750; - } - - scope.$watch('data', function(newValue, oldValue) { - if (newValue) { - scope.dataReady = true; - graphController.setData(); - chart.draw(transition); - } - }); - - transclude(scope, function(clone){ - element.append(clone); - }); - }, - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - var chart; - - this._createChart = function () { - // create an svg element - var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - if ($attrs.width) { - svg.setAttribute('width', $attrs.width); - } else { - svg.setAttribute('width', '100%'); - } - if ($attrs.height) { - svg.setAttribute('height', $attrs.height); - } else { - svg.setAttribute('height', '100%'); - } - - // end the svg to this - $element.append(svg); - - // create the dimple chart using the d3 selection of our element - chart = new dimple.chart(d3.select(svg)); - - if ($attrs.margin) { - chart.setMargins($attrs.margin); - } else { - chart.setMargins(60, 60, 20, 40); - } - - // auto style - var autoStyle = $attrs.autoStyle === 'false' ? true : false; - chart.noFormats = autoStyle; - }; - - this.getChart = function () { - return chart; - }; - - this.setData = function () { - chart.data = $scope.data; - }; - - this.draw = function () { - chart.draw(); - }; - - this.getID = function () { - return id; - }; - - this.filter = function (attrs) { - if (attrs.value !== undefined) { - $scope.filters.push(attrs.value); - } - if ($scope.filters.length) { - chart.data = dimple.filterData($scope.data, attrs.field, $scope.filters); - } - - if (attrs.filter !== undefined) { - console.log("i see a filter"); - var thisFilter = attrs.filter.split(':'); - var field = thisFilter[0]; - var value = [thisFilter[1]]; - chart.data = dimple.filterData($scope.data, field, value); - } - }; - - }] - }; -}]); -angular.module('angular-dimple.legend', []) - -.directive('legend', [function () { - return { - restrict: 'E', - replace: true, - require: ['legend', '^graph'], - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - }], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var chart = graphController.getChart(); - - function addLegend () { - var left = $attrs.left ? $attrs.left : "10%"; - var top = $attrs.top ? $attrs.top : "4%"; - var height = $attrs.height ? $attrs.height : "10%"; - var width = $attrs.width ? $attrs.width : "90%"; - var position = $attrs.position ? $attrs.position : 'left'; - chart.addLegend(left, top, width, height, position); - } - - $scope.$watch('dataReady', function(newValue, oldValue) { - if (newValue === true) { - addLegend(); - } - }); - } - }; -}]); -angular.module('angular-dimple.line', []) - -.directive('line', [function () { - return { - restrict: 'E', - replace: true, - require: ['line', '^graph'], - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - }], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var chart = graphController.getChart(); - var drawn = false; - - function addLine () { - var filteredData; - line = chart.addSeries([$attrs.field], dimple.plot.line); - graphController.filter($attrs); - line.lineMarkers = true; - graphController.draw(); - } - - $scope.$watch('dataReady', function(newValue, oldValue) { - if (newValue === true) { - addLine(); - } - }); - - } - }; -}]); -angular.module('angular-dimple.r', []) - -.directive('r', [function () { - return { - restrict: 'E', - replace: true, - require: ['r', '^graph'], - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - }], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var chart = graphController.getChart(); - - function addAxis () { - r = chart.addMeasureAxis('p', $attrs.field); - - if ($attrs.title && $attrs.title !== "null") { - r.title = $attrs.title; - } else if ($attrs.title == "null") { - r.title = null; - } - } - - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { - addAxis(); - } - }); - } - }; -}]); -angular.module('angular-dimple.ring', []) - -.directive('ring', [function () { - return { - restrict: 'E', - replace: true, - require: ['ring', '^graph'], - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - }], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var areaController = $controllers[0]; - var chart = graphController.getChart(); - - function setData (data, series) { - series.data = data; - } - - function addRing () { - var thickness; - ring = chart.addSeries([$attrs.field], dimple.plot.pie); - if ($attrs.thickness && !$attrs.diameter) { - thickness = (100 - $attrs.thickness) + '%'; - ring.innerRadius = thickness; - } else if ($attrs.thickness && $attrs.diameter) { - thickness = ($attrs.diameter - $attrs.thickness) + '%'; - ring.innerRadius = thickness; - } else { - ring.innerRadius = "50%"; - } - - if ($attrs.diameter) { - ring.outerRadius = ($attrs.diameter) + '%'; - } - graphController.filter($attrs); - graphController.draw(); - } - - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { - addRing(); - } - }); - } - }; -}]); - - -angular.module('angular-dimple.scatter-plot', []) - -.directive('scatterPlot', [function () { - return { - restrict: 'E', - replace: true, - require: ['scatterPlot', '^graph'], - controller: [function() {}], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var chart = graphController.getChart(); - - function addScatterPlot () { - var array = []; - - if ($attrs.series){ array.push($attrs.series); } - array.push($attrs.field); - if ($attrs.label || $attrs.label === '') { array.push($attrs.label); } - scatterPlot = chart.addSeries(array, dimple.plot.bubble); - scatterPlot.aggregate = dimple.aggregateMethod.avg; - graphController.filter($attrs); - graphController.draw(); - } - - $scope.$watch('dataReady', function(newValue, oldValue) { - if (newValue === true) { - addScatterPlot(); - } - }); - } - }; -}]); -angular.module('angular-dimple.stacked-area', []) - -.directive('stackedArea', [function () { - return { - restrict: 'E', - replace: true, - require: ['stackedArea', '^graph'], - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - }], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var areaController = $controllers[0]; - var chart = graphController.getChart(); - - function addArea () { - if ($attrs.series) { - area = chart.addSeries([$attrs.series], dimple.plot.area); - } else { - area = chart.addSeries([$attrs.field], dimple.plot.area); - } - graphController.filter($attrs); - area.lineMarkers = false; - graphController.draw(); - } - - $scope.$watch('dataReady', function(newValue, oldValue) { - if (newValue === true) { - addArea(); - } - }); - } - }; -}]); -angular.module('angular-dimple.stacked-bar', []) - -.directive('stackedBar', [function () { - return { - restrict: 'E', - replace: true, - require: ['stackedBar', '^graph'], - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - }], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var lineController = $controllers[0]; - var chart = graphController.getChart(); - - function addBar () { - if ($attrs.series) { - bar = chart.addSeries([$attrs.series], dimple.plot.bar); - } else { - bar = chart.addSeries([$attrs.field], dimple.plot.bar); - } - graphController.filter($attrs); - graphController.draw(); - } - - $scope.$watch('dataReady', function(newValue, oldValue) { - if (newValue === true) { - addBar(); - } - }); - } - }; -}]); -angular.module('angular-dimple.x', []) - -.directive('x', [function () { - return { - restrict: 'E', - replace: true, - require: ['x', '^graph'], - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - }], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var chart = graphController.getChart(); - - function addAxis () { - if ($attrs.groupBy) { - if ($attrs.type == 'Measure') { - x = chart.addMeasureAxis('x', [$attrs.groupBy, $attrs.field]); - } else if ($attrs.type == 'Percent') { - x = chart.addPctAxis('x', $attrs.field); - } else if ($attrs.type == 'Time') { - x = chart.addTimeAxis('x', $attrs.field); - if ($attrs.format) { - x.tickFormat = $attrs.format; - } - } else { - x = chart.addCategoryAxis('x', [$attrs.groupBy, $attrs.field]); - } - if ($attrs.orderBy) { - x.addGroupOrderRule($attrs.orderBy); - } - } else { - if ($attrs.type == 'Measure') { - x = chart.addMeasureAxis('x', $attrs.field); - } else if ($attrs.type == 'Percent') { - x = chart.addPctAxis('x', $attrs.field); - } else if ($attrs.type == 'Time') { - x = chart.addTimeAxis('x', $attrs.field); - if ($attrs.format) { - x.tickFormat = $attrs.format; - } - } else { - x = chart.addCategoryAxis('x', $attrs.field); - } - if ($attrs.orderBy) { - x.addOrderRule($attrs.orderBy); - } - } - - if ($attrs.title && $attrs.title !== "null") { - x.title = $attrs.title; - } else if ($attrs.title == "null") { - x.title = null; - } - } - - $scope.$watch('dataReady', function(newValue, oldValue) { - if (newValue === true) { - addAxis(); - } - }); - } - }; -}]); -angular.module('angular-dimple.y', []) - -.directive('y', [function () { - return { - restrict: 'E', - replace: true, - require: ['y', '^graph'], - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - }], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var chart = graphController.getChart(); - - function addAxis () { - if ($attrs.groupBy) { - if ($attrs.type == 'Category') { - y = chart.addCategoryAxis('y', $attrs.field); - } else if ($attrs.type == 'Percent') { - y = chart.addPctAxis('y', $attrs.field); - } else if ($attrs.type == 'Time') { - y = chart.addTimeAxis('x', $attrs.field); - if ($attrs.format) { - y.tickFormat = $attrs.format; - } - } else { - y = chart.addMeasureAxis('y', $attrs.field); - } - if ($attrs.orderBy) { - y.addGroupOrderRule($attrs.orderBy); - } - } else { - if ($attrs.type == 'Category') { - y = chart.addCategoryAxis('y', $attrs.field); - } else if ($attrs.type == 'Percent') { - y = chart.addPctAxis('y', $attrs.field); - } else if ($attrs.type == 'Time') { - y = chart.addTimeAxis('x', $attrs.field); - if ($attrs.format) { - y.tickFormat = $attrs.format; - } - } else { - y = chart.addMeasureAxis('y', $attrs.field); - } - if ($attrs.orderBy) { - y.addOrderRule($attrs.orderBy); - } - } - - if ($attrs.title && $attrs.title !== "null") { - y.title = $attrs.title; - } else if ($attrs.title == "null") { - y.title = null; - } - } - - $scope.$watch('dataReady', function(newValue, oldValue) { - if (newValue === true) { - addAxis(); - } - }); - } - }; -}]); \ No newline at end of file diff --git a/dist/angular-dimple.min.js b/dist/angular-dimple.min.js deleted file mode 100644 index 2adacbd..0000000 --- a/dist/angular-dimple.min.js +++ /dev/null @@ -1 +0,0 @@ -angular.module("angular-dimple",["angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.r","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",[function(){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(c.value)area=g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!0;else{var b=dimple.getUniqueValues(a.data,c.field);angular.forEach(b,function(){area=g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!0})}f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",[function(){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,link:function(a,b,c,d,e){var f=d[0];f._createChart(),a.dataReady=!1,a.filters=[];var g,h=f.getChart();g=c.transition?c.transition:750,a.$watch("data",function(b){b&&(a.dataReady=!0,f.setData(),h.draw(g))}),e(a,function(a){b.append(a)})},controller:["$scope","$element","$attrs",function(a,b,c){var d;this._createChart=function(){var a=document.createElementNS("http://www.w3.org/2000/svg","svg");c.width?a.setAttribute("width",c.width):a.setAttribute("width","100%"),c.height?a.setAttribute("height",c.height):a.setAttribute("height","100%"),b.append(a),d=new dimple.chart(d3.select(a)),c.margin?d.setMargins(c.margin):d.setMargins(60,60,20,40);var e="false"===c.autoStyle?!0:!1;d.noFormats=e},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return id},this.filter=function(b){if(void 0!==b.value&&a.filters.push(b.value),a.filters.length&&(d.data=dimple.filterData(a.data,b.field,a.filters)),void 0!==b.filter){console.log("i see a filter");var c=b.filter.split(":"),e=c[0],f=[c[1]];d.data=dimple.filterData(a.data,e,f)}}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",[function(){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){line=g.addSeries([c.field],dimple.plot.line),f.filter(c),line.lineMarkers=!0,f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.r",[]).directive("r",[function(){return{restrict:"E",replace:!0,require:["r","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){r=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?r.title=c.title:"null"==c.title&&(r.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",[function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",[function(){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(a,b,c,d){function e(){var a=[];c.series&&a.push(c.series),a.push(c.field),(c.label||""===c.label)&&a.push(c.label),scatterPlot=g.addSeries(a,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,f.filter(c),f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",[function(){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){area=c.series?g.addSeries([c.series],dimple.plot.area):g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!1,f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",[function(){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=c.series?g.addSeries([c.series],dimple.plot.bar):g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?("Measure"==c.type?x=g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?x=g.addPctAxis("x",c.field):"Time"==c.type?(x=g.addTimeAxis("x",c.field),c.format&&(x.tickFormat=c.format)):x=g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):("Measure"==c.type?x=g.addMeasureAxis("x",c.field):"Percent"==c.type?x=g.addPctAxis("x",c.field):"Time"==c.type?(x=g.addTimeAxis("x",c.field),c.format&&(x.tickFormat=c.format)):x=g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?("Category"==c.type?y=g.addCategoryAxis("y",c.field):"Percent"==c.type?y=g.addPctAxis("y",c.field):"Time"==c.type?(y=g.addTimeAxis("x",c.field),c.format&&(y.tickFormat=c.format)):y=g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):("Category"==c.type?y=g.addCategoryAxis("y",c.field):"Percent"==c.type?y=g.addPctAxis("y",c.field):"Time"==c.type?(y=g.addTimeAxis("x",c.field),c.format&&(y.tickFormat=c.format)):y=g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]); \ No newline at end of file diff --git a/docs/source/_banner.html b/docs/source/_banner.html new file mode 100644 index 0000000..3c91265 --- /dev/null +++ b/docs/source/_banner.html @@ -0,0 +1,44 @@ + + \ No newline at end of file diff --git a/site/scss/base/_buttons.scss b/docs/source/assets/css/base/_buttons.scss similarity index 91% rename from site/scss/base/_buttons.scss rename to docs/source/assets/css/base/_buttons.scss index 8a888e4..687b458 100644 --- a/site/scss/base/_buttons.scss +++ b/docs/source/assets/css/base/_buttons.scss @@ -5,13 +5,11 @@ background-color: $blue; color: $lighter-gray; border: none; - @include border-radius(3px); + border-radius: 3px; text-decoration: none; - font-family: $source; font-size: 0.75em; font-weight: 300; cursor: pointer; - @include user-select(none); @include transition(background-color 75ms linear, color 75ms linear); &:hover, &:focus { background-color: lighten($blue, 10%); diff --git a/docs/source/assets/css/base/_code.scss b/docs/source/assets/css/base/_code.scss new file mode 100644 index 0000000..7535c86 --- /dev/null +++ b/docs/source/assets/css/base/_code.scss @@ -0,0 +1,110 @@ +/* + +Orginal Style from ethanschoonover.hljs-com/solarized (c) Jeremy Hull + +*/ + +pre { + background: #002b36; + color: #839496; + + code { + background: #002b36; + } + + .hljs-comment, + .hljs-template_comment, + .hljs-diff .hljs-header, + .hljs-doctype, + .hljs-pi, + .hljs-lisp .hljs-string, + .hljs-javadoc { + color: #586e75; + } + + /* Solarized Green */ + .hljs-keyword, + .hljs-winutils, + .hljs-method, + .hljs-addition, + .hljs-css .hljs-tag, + .hljs-request, + .hljs-status, + .hljs-nginx .hljs-title { + color: #859900; + } + + /* Solarized Cyan */ + .hljs-number, + .hljs-command, + .hljs-string, + .hljs-tag .hljs-value, + .hljs-rules .hljs-value, + .hljs-phpdoc, + .hljs-tex .hljs-formula, + .hljs-regexp, + .hljs-hexcolor, + .hljs-link_url { + color: #2aa198; + } + + /* Solarized Blue */ + .hljs-title, + .hljs-localvars, + .hljs-chunk, + .hljs-decorator, + .hljs-built_in, + .hljs-identifier, + .hljs-vhdl .hljs-literal, + .hljs-id, + .hljs-css .hljs-function { + color: #268bd2; + } + + /* Solarized Yellow */ + .hljs-attribute, + .hljs-variable, + .hljs-lisp .hljs-body, + .hljs-smalltalk .hljs-number, + .hljs-constant, + .hljs-class .hljs-title, + .hljs-parent, + .hljs-haskell .hljs-type, + .hljs-link_reference { + color: #b58900; + } + + /* Solarized Orange */ + .hljs-preprocessor, + .hljs-preprocessor .hljs-keyword, + .hljs-pragma, + .hljs-shebang, + .hljs-symbol, + .hljs-symbol .hljs-string, + .hljs-diff .hljs-change, + .hljs-special, + .hljs-attr_selector, + .hljs-subst, + .hljs-cdata, + .hljs-clojure .hljs-title, + .hljs-css .hljs-pseudo, + .hljs-header { + color: #cb4b16; + } + + /* Solarized Red */ + .hljs-deletion, + .hljs-important { + color: #dc322f; + } + + /* Solarized Violet */ + .hljs-link_label { + color: #6c71c4; + } + + .hljs-tex .hljs-formula { + background: #073642; + } + +} diff --git a/docs/source/assets/css/base/_config.scss b/docs/source/assets/css/base/_config.scss new file mode 100644 index 0000000..9e5ae13 --- /dev/null +++ b/docs/source/assets/css/base/_config.scss @@ -0,0 +1,109 @@ +// Colors +$white: #FFFFFF !default; +$off-white: #FAFBFE !default; +$lighter-gray: #ECF0F3 !default; +$light-gray: #DDE3E8 !default; +$gray: #76899B !default; +$dark-gray: #4C5156 !default; +$darker-gray: #2C3136 !default; +$blue: #1F85C4 !default; +$light-blue: lighten($blue, 10%); +$dark-blue: #245070 !default; +$darker-blue: #234052 !default; + +// ┌────────────┐ +// │ Structural │ +// └────────────┘ + +// Breakpoints +$small: 480px !default; +$medium: 860px !default; +$large: 1280px !default; + +// Grid Settings +$vw-ratio: 0.9; +$container-width: $vw-ratio * 100vw !default; +$container-min: 0 !default; +$container-max: $large * $vw-ratio !default; +$column-gutter: 1rem !default; + +$vertical-range: 7 !default; + +// $ratio: $golden ; +$body-size: 0.875rem ; +$small-size: 0.75rem ; +$baseline: 1.25rem ; +$indent: 1em ; + +// ┌───────────────┐ +// │ Font Families │ +// └───────────────┘ +$header-family: 'Clear Sans', + 'Helvetica Neue', + 'Helvetica', + 'Arial', + sans-serif ; + +$header-thin: false ; +$header-thin: false ; +$header-light: 200, 400 ; +$header-regular: 400, 600 ; +$header-medium: false ; +$header-demi: false ; +$header-bold: 600, 600 ; +$header-black: false ; + +$body-family: 'Clear Sans', + 'Helvetica Neue', + 'Helvetica', + 'Arial', + sans-serif ; + +$body-thin: false ; +$body-thin: false ; +$body-light: false ; +$body-regular: 400, 700 ; +$body-medium: false ; +$body-demi: false ; +$body-bold: 700, 700 ; +$body-black: false ; + +$secondary-family: Georgia, + serif ; + +$secondary-thin: false ; +$secondary-thin: false ; +$secondary-light: false ; +$secondary-regular: 400, 700 ; +$secondary-medium: false ; +$secondary-demi: false ; +$secondary-bold: 700, 700 ; +$secondary-black: false ; + +$code-family: 'Source Code Pro', + 'Inconsolata', + "Consolas", + "Andale Mono", + "Lucida Console", + "Monaco", + "Courier New", + Courier, + monospace ; + +$code-thin: false ; +$code-thin: false ; +$code-light: false ; +$code-regular: 400, 400 ; +$code-medium: false ; +$code-demi: false ; +$code-bold: false ; +$code-black: false ; + + +// ┌───────────────┐ +// │ Base Tracking │ +// └───────────────┘ +$header-tracking: 0 ; +$body-tracking: 30 ; +$secondary-tracking: 10 ; +$code-tracking: 0 ; diff --git a/site/scss/base/_reset.scss b/docs/source/assets/css/base/_reset.scss similarity index 100% rename from site/scss/base/_reset.scss rename to docs/source/assets/css/base/_reset.scss diff --git a/site/scss/base/_tabs.scss b/docs/source/assets/css/base/_tabs.scss similarity index 86% rename from site/scss/base/_tabs.scss rename to docs/source/assets/css/base/_tabs.scss index e1e6f00..ee64357 100644 --- a/site/scss/base/_tabs.scss +++ b/docs/source/assets/css/base/_tabs.scss @@ -15,14 +15,14 @@ background-color: $off-white; border: 1px solid $lighter-gray; border-left: none; - @include border-radius(0); + border-radius: 0; background-image: none; &:first-child { - @include border-radius(3px 0 0 0); + border-radius: 3px 0 0 0; border-left: 1px solid $lighter-gray; } &:last-child { - @include border-radius(0 3px 0 0); + border-radius: 0 3px 0 0; } &:hover { background-color: mix($off-white, $white); @@ -39,7 +39,7 @@ .tab-contents { width: 100%; border: 1px solid $lighter-gray; - @include border-radius(0 0 3px 3px); + border-radius: 0 0 3px 3px; margin-top: -1px; @include box-sizing(border-box); .tab-content { @@ -47,7 +47,7 @@ display: none; width: 100%; @include box-sizing(border-box); - @include border-radius(0 0 3px 3px); + border-radius: 0 0 3px 3px; padding: 1em; overflow: auto; &.active { @@ -60,6 +60,8 @@ } pre { background: transparent; + padding: 0; + border: none; margin-bottom: 0; } } diff --git a/site/scss/examples.scss b/docs/source/assets/css/examples.scss similarity index 94% rename from site/scss/examples.scss rename to docs/source/assets/css/examples.scss index 0be6065..be34d96 100644 --- a/site/scss/examples.scss +++ b/docs/source/assets/css/examples.scss @@ -26,9 +26,8 @@ h2 { .example-link { margin-top: -2.75rem; float: right; - font-family: $source; - font-size: 1rem; - + @extend .code-face; + @include font-size(0); } @@ -36,7 +35,6 @@ h2 { font-size: 1rem; float: right; line-height: 3.25rem; - } .example-link, diff --git a/docs/source/assets/css/style.scss b/docs/source/assets/css/style.scss new file mode 100644 index 0000000..fa3dfa0 --- /dev/null +++ b/docs/source/assets/css/style.scss @@ -0,0 +1,479 @@ +@import "base/config"; +@import "base/reset"; + +@import "viewport-grid/lib/viewport-grid.scss"; +@import "typecabinet/dist/typecabinet.scss"; +@import "rye/dist/rye.scss"; + +@import "base/buttons"; +@import "base/code"; +@import "base/tabs"; + +body { + color: $dark-gray; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; + padding-top: $baseline; + padding-bottom: $baseline; + font-weight: 300; + line-height: $baseline; +} + +h1 { font-size: 2.75rem; line-height: 2*$baseline;} +h2 { font-size: 2.00rem; line-height: 2*$baseline;} +h3 { font-size: 1.75rem; line-height: 2*$baseline;} +h4 { font-size: 1.50rem; line-height: $baseline;} +h5 { font-size: 1.25rem; line-height: $baseline;} +h6 { font-size: 1.00rem; line-height: $baseline;} + +blockquote { + font-style: italic; + font-weight: 400; + font-size: 1.75rem; + color: $light-gray; +} + +p { + margin: 0; + padding-bottom: $baseline; + font-size: 1.05rem; + line-height: 1.5em; + font-weight: 300; + &.large { + font-size: 1.35rem; + } + &.small { + font-size: .85rem; + } +} + +b, strong { + font-weight: 700; +} + +small { + font-size: .875rem; + color: $gray; +} + +a { + color: $blue; + text-decoration: none; + @include transition(color 200ms linear); + &:hover, &:focus { + color: $dark-blue; + cursor: pointer; + } + &:active, &:hover { + outline: 0; + } +} + +ul, ol { + list-style-position: inside; + margin-top: 0; + padding: 0; + ul, ol { + padding-left: 1.25em; + } +} + +ul { + list-style-type: none; +} + + +ol { + +} + +code, kbd, pre, samp { + @extend .code-face; +} + +code { + border-radius: 2px; + background: $off-white; + padding: .2em; + border: 1px solid darken($off-white, 5%); + white-space: pre; + font-size: .75rem; + line-height: 1.5em; +} + +pre { + padding: 1em; +// white-space: pre; +// white-space: pre-wrap; +// word-wrap: break-word; + tab-size: 4; +// background: $off-white; + border: 1px solid $lighter-gray; + max-width: 100%; + code { +// background-color: $off-white; + display: block; + overflow: auto; + word-wrap: normal; + border: none; + } +} + +hr { + display: none; + margin-top: 2rem; + border: none; + border-top: 2rem solid $blue; +} + +.center-text { + text-align: center; +} + +img::selection { + background: transparent; +} + +img::moz-selection { + background: transparent; +} + +table { + width: 100%; + background-color: $white; + border-collapse: collapse; + border-spacing: 0; + border: 1px solid mix($lighter-gray, $light-gray); + text-align: left; + > thead { + background-color: mix($off-white, $lighter-gray); + border-bottom: 1px solid mix($lighter-gray, $light-gray); + } + th, td { + border-left: 1px solid mix($lighter-gray, $light-gray); + border-right: 1px solid mix($lighter-gray, $light-gray); + padding: 12px; + } + tr { + border-bottom: 1px solid mix($lighter-gray, $light-gray); + text-align: left; + &:last-child { + border-bottom: none; + } + &:nth-child(even){ + background-color: $off-white; + td { + background-color: $off-white; + } + } + } +} + +.white-panel { + margin-bottom: 1rem; + background-color: $white; + border: 1px solid $lighter-gray; + @include box-sizing(border-box); + &.padded { + padding: 2rem; + } + + h2 { + padding: 6rem 0 1rem 0; + } +} + +h2 { + @include respond-to($small) { + display: inline-block; + } +} + +.example-link { + margin-top: -2.75rem; + float: right; + @extend .code-face; + @include font-size(0); +} + + +.api-link { + font-size: 1rem; + float: right; + line-height: 3.25rem; +} + +.example-link, +.api-link { + @include respond-to($small) { + width: 100%; + display: block; + margin-top: 0rem; + margin-bottom: 1.5rem; + float: left; + } +} + +@include respond-to($small){ + .container { + padding: 0 0; + } + .white-panel.padded { + padding: 2rem 1rem; + } +} + +.homepage-navigation { + position: relative; + z-index: 2; + @extend .header-light; + margin-top: 1rem; + a { + color: $off-white; + &:hover { + color: $white; + } + } +} + +// code { +// background-color: $white; +// border-color: $lighter-gray; +// } + +.banner { + position: relative; + overflow: hidden; + color: $white; + background: url(../img/dots.svg) $dark-blue; + z-index: 20; + .banner-copy { + position: relative; + margin: 5rem 0 9rem 0; + z-index: 2; + font-weight: 200; + } + .banner-graphic { + position: absolute; + top: -260px; + bottom: 0; + left: 50%; + z-index: 1; + width: 2400px; + margin-left: -1200px; + z-index: 1; + } + .dimple-axis { + display: none; + } + .dimple-gridline{ + display: none; + } + .dimple-line { + opacity: 0.8; + fill: none; + stroke: $darker-blue; + stroke-width: 2; + } + .dimple-marker-back { + fill: $darker-blue; + } + .dimple-marker { + display: none; + fill: $darker-blue; + } +} + +.charts-list { + a { + color: $gray; + } +} + +[ng-cloak] { display: none;} + +.fullscreen { + padding: 8rem 0; + .darker-blue { + background-color: $darker-blue; + } +} + +.darker-blue { + color: $gray; + background-color: $darker-blue; + a { + color: lighten($blue, 10%); + &:hover { + color: lighten($blue, 20%); + } + } +} + +.off-white { + color: $dark-gray; + background-color: $off-white; +} + +.primary-navigation { + font-weight: 300; + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: $white; + border-bottom: 1px solid $light-gray; + padding: 1rem 0; + z-index: 10; + + @include respond-to($small) { + position: absolute; + } +} + +.angular-dimple-logo { + float: left; + @include respond-to($medium) { + width: 100%; + text-align: center; + } +} + +.navigation-section { + width: 50%; + text-align: right; + float: right; + @include respond-to($medium) { + width: 100%; + text-align: center; + } +} + +.numbered { + text-align: center; + width: 2em; + height: 2em; + margin-right: 1em; + display: inline-block; + color: $white; + @extend .code-face; + font-size: .75rem; + line-height: 2em; + vertical-align: .25em; + background-color: $blue; + border-radius: 50%; +} + +.navigation { + position: fixed; + height: 100vh; + width: 14em; + padding: 1em; + background-color: #ededed; +} + +.sidebar { + position: absolute; + overflow: auto; + background-color: $off-white; + z-index: 2; + li { + margin-bottom: 1rem; + padding: .25rem 0; + } + a { + width: 100%; + img { + float: left; + height: 3rem; + width: 3rem; + margin-right: 1rem; + background-color: $white; + border: 2px solid $light-gray; + border-radius: 50%; + box-shadow: 0 0 0 0 $light-gray; + @include transition(all 200ms linear); + } + &:hover { + img { + box-shadow: 0 0 0 4px $light-gray; + } + } + } + span { + display: inline-block; + line-height: 3rem; + } + + @include respond-to($medium){ + padding-top: 1rem; + position: relative; + height: auto; + + li { + display: inline-block; + padding-right: 1rem; + } + } +} +.scroll-to-top { + position: fixed; + @include respond-to($medium){ + display: none; + } +} + +.chart { + position: absolute; + top: 0; + bottom: 0; + left: 14rem; + right: 0; + height: 100vh; + padding-left: 1rem; +} + +.chart-icon { + @extend %clearfix; + display: inline-block; + margin-bottom: 1rem; + background-color: $white; + height: 6rem; + width: 6rem; + position: relative; + border-radius: 50%; + cursor: pointer; + @include transition(all 200ms linear); + border: 1px solid $light-gray; + &:hover { + background-color: $off-white; + } + &:before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: block; + border-radius: 50%; + box-shadow:0 0 0 6px $light-gray; + @include transition(all 200ms linear); + } + &:hover { + &:before { + box-shadow:0 0 0 12px $light-gray; + } + } + img { + width: 100%; + height: auto; + } +} + +.footer { + position: relative; + z-index: 5; +} diff --git a/site/img/Angular-Dimple-Logo.svg b/docs/source/assets/img/Angular-Dimple-Logo.svg similarity index 100% rename from site/img/Angular-Dimple-Logo.svg rename to docs/source/assets/img/Angular-Dimple-Logo.svg diff --git a/site/img/area.svg b/docs/source/assets/img/area.svg similarity index 100% rename from site/img/area.svg rename to docs/source/assets/img/area.svg diff --git a/site/img/bar.svg b/docs/source/assets/img/bar.svg similarity index 100% rename from site/img/bar.svg rename to docs/source/assets/img/bar.svg diff --git a/site/img/dots.svg b/docs/source/assets/img/dots.svg similarity index 100% rename from site/img/dots.svg rename to docs/source/assets/img/dots.svg diff --git a/docs/source/assets/img/front.svg b/docs/source/assets/img/front.svg new file mode 100644 index 0000000..8d1ca83 --- /dev/null +++ b/docs/source/assets/img/front.svg @@ -0,0 +1,106 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/site/img/graph.svg b/docs/source/assets/img/graph.svg similarity index 100% rename from site/img/graph.svg rename to docs/source/assets/img/graph.svg diff --git a/site/img/legend.svg b/docs/source/assets/img/legend.svg similarity index 100% rename from site/img/legend.svg rename to docs/source/assets/img/legend.svg diff --git a/site/img/line.svg b/docs/source/assets/img/line.svg similarity index 100% rename from site/img/line.svg rename to docs/source/assets/img/line.svg diff --git a/site/img/ring.svg b/docs/source/assets/img/ring.svg similarity index 100% rename from site/img/ring.svg rename to docs/source/assets/img/ring.svg diff --git a/site/img/scatter-plot.svg b/docs/source/assets/img/scatter-plot.svg similarity index 100% rename from site/img/scatter-plot.svg rename to docs/source/assets/img/scatter-plot.svg diff --git a/site/img/stacked-area.svg b/docs/source/assets/img/stacked-area.svg similarity index 100% rename from site/img/stacked-area.svg rename to docs/source/assets/img/stacked-area.svg diff --git a/site/img/stacked-bar.svg b/docs/source/assets/img/stacked-bar.svg similarity index 100% rename from site/img/stacked-bar.svg rename to docs/source/assets/img/stacked-bar.svg diff --git a/site/img/x.svg b/docs/source/assets/img/x.svg similarity index 98% rename from site/img/x.svg rename to docs/source/assets/img/x.svg index 949f401..42ec994 100644 --- a/site/img/x.svg +++ b/docs/source/assets/img/x.svg @@ -14,3 +14,4 @@ + diff --git a/site/img/y.svg b/docs/source/assets/img/y.svg similarity index 98% rename from site/img/y.svg rename to docs/source/assets/img/y.svg index b8b4e6d..41e2bfd 100644 --- a/site/img/y.svg +++ b/docs/source/assets/img/y.svg @@ -12,3 +12,4 @@ + diff --git a/site/js/app.js b/docs/source/assets/js/app.js similarity index 61% rename from site/js/app.js rename to docs/source/assets/js/app.js index 7fbc695..a0b198e 100644 --- a/site/js/app.js +++ b/docs/source/assets/js/app.js @@ -11,49 +11,45 @@ angular.module('myApp', [ $routeProvider .when('/animation-test', { - templateUrl: '../documentation/partials/animation-test.html', + templateUrl: '/examples/partials/animation-test.html', controller: 'testController' }) - - .when('/line-graph', { - templateUrl: '../documentation/partials/line-graph.html', + templateUrl: '/examples/partials/line-graph/index.html', controller: 'lineGraphController' }) .when('/stacked-area', { - templateUrl: '../documentation/partials/stacked-area.html', + templateUrl: '/examples/partials/stacked-area/index.html', controller: 'stackedAreaController' }) .when('/area', { - templateUrl: '../documentation/partials/area.html', + templateUrl: '/examples/partials/area/index.html', controller: 'areaController' }) .when('/expanded-stacked-area', { - templateUrl: '../documentation/partials/expanded-stacked-area.html', + templateUrl: '/examples/partials/expanded-stacked-area/index.html', controller: 'expandedAreaController' }) .when('/bar', { - templateUrl: '../documentation/partials/bar-graph.html', + templateUrl: '/examples/partials/bar-graph/index.html', controller: 'barController' }) .when('/stacked-bar', { - templateUrl: '../documentation/partials/stacked-bar-graph.html', + templateUrl: '/examples/partials/stacked-bar-graph/index.html', controller: 'stackedBarController' }) .when('/scatter-plot', { - templateUrl: '../documentation/partials/scatter-plot.html', + templateUrl: '/examples/partials/scatter-plot/index.html', controller: 'scatterController' }) .when('/ring', { - templateUrl: '../documentation/partials/ring.html', + templateUrl: '/examples/partials/ring/index.html', controller: 'ringController' }) - .otherwise({ redirectTo: '/line-graph' }); $logProvider.debugEnabled(true); -}]); - +}]); \ No newline at end of file diff --git a/site/js/controllers.js b/docs/source/assets/js/controllers.js similarity index 70% rename from site/js/controllers.js rename to docs/source/assets/js/controllers.js index e81dd52..3942b21 100644 --- a/site/js/controllers.js +++ b/docs/source/assets/js/controllers.js @@ -1,35 +1,46 @@ angular.module('myApp.controllers', []) - - .controller('testController', ['$scope', 'dataService', function($scope, dataService) { - $scope.line = true; - $scope.generate_data = function () { - var retary = []; - for (var i = 0; i < 5; i++) { - var date = new Date(Date.now() + i * 86400000); - var obj = { - 'Date': date, - 'Month': date.getMonth() + '-' + date.getDate(), - 'Owner': 'Aperture', - 'Unit Sales': (Math.random() * 1000) + 1000 - }; - retary[retary.length] = obj; - } - return {'data': retary}; - }; - - $scope.update_data = function () { - var newData = $scope.generate_data().data; - $scope.graphData = newData; - }; - - $scope.update_data(); + $scope.palette = [ + { + name: "Black Mesa", + fill: "#FFBEB4", + }, + { + name: "Aperture", + fill: "#7B9ACC", + }, + { + name: "Tyrell Corp", + fill: "#D1FFA9", + } + ]; + + $scope.line = true; + + $scope.generate_data = function () { + var retary = []; + for (var i = 0; i < 5; i++) { + var date = new Date(Date.now() + i * 86400000); + var obj = { + 'Date': date, + 'Month': date.getMonth() + '-' + date.getDate(), + 'Owner': 'Aperture', + 'Unit Sales': (Math.random() * 1000) + 1000 + }; + retary[retary.length] = obj; + } + return {'data': retary}; + }; + + $scope.update_data = function () { + $scope.graphData = $scope.generate_data().data; + }; + + $scope.update_data(); }]) - - .controller('lineGraphController', ['$scope', 'dataService', function($scope, dataService) { dataService.getData().then(function(response) { $scope.graphData = response.data; @@ -43,7 +54,6 @@ angular.module('myApp.controllers', []) }); }]) - .controller('stackedAreaController', ['$scope', 'dataService', function($scope, dataService) { dataService.getData().then(function(response) { $scope.graphData = response.data; @@ -81,4 +91,4 @@ angular.module('myApp.controllers', []) dataService.getSimpleData().then(function(response) { $scope.simpleData = response.data; }); -}]); +}]); \ No newline at end of file diff --git a/site/js/directives.js b/docs/source/assets/js/directives.js similarity index 100% rename from site/js/directives.js rename to docs/source/assets/js/directives.js diff --git a/site/js/filters.js b/docs/source/assets/js/filters.js similarity index 100% rename from site/js/filters.js rename to docs/source/assets/js/filters.js diff --git a/site/js/services.js b/docs/source/assets/js/services.js similarity index 59% rename from site/js/services.js rename to docs/source/assets/js/services.js index b4d6678..97c22a3 100644 --- a/site/js/services.js +++ b/docs/source/assets/js/services.js @@ -1,14 +1,12 @@ angular.module('myApp.services', []) -.value('version', '0.1') - .service('dataService', ['$http', function($http) { return { getData: function() { - return $http.get('../data/example_data.json'); + return $http.get('/data/example_data.json'); }, getSimpleData: function() { - return $http.get('../data/simple.json'); + return $http.get('/data/simple.json'); } }; }]); diff --git a/docs/source/assets/js/tailcoat.js b/docs/source/assets/js/tailcoat.js new file mode 100644 index 0000000..2208600 --- /dev/null +++ b/docs/source/assets/js/tailcoat.js @@ -0,0 +1,258 @@ +/*! tailcoat - v1.1.8 - 2014-08-21 +* https://github.com/ArcGIS/tailcoat +* Copyright (c) 2014 Environmental Systems Research Institute, Inc. +* Apache 2.0 License */ +(function Tailcoat () { + + var T = {}; + + // ┌───────────────┐ + // │ DOM utilities │ + // └───────────────┘ + + var dom = T.utils = {}; + + // ┌──────────────────────┐ + // │ DOM event management │ + // └──────────────────────┘ + + // returns standard interaction event based on touch support + dom.event = function () { + return "click"; + }; + + // add a callback function to an event on an element + dom.addEvent = function (el, event, fn) { + if (el.addEventListener) { + return el.addEventListener(event, fn, false); + } + if (el.attachEvent) { + return el.attachEvent('on' + event, fn); + } + }; + + dom.removeEvent = function (el, event, fn) { + if (el.removeEventListener) { + return el.removeEventListener(event, fn, false); + } + if (el.detachEvent) { + return el.detachEvent('on' + event, fn); + } + }; + + // get the target element of an event + dom.eventTarget = function (event) { + if (!event.target) { + return event.srcElement; + } + if (event.target) { + return event.target; + } + }; + + // prevent default behavior of an event + dom.preventDefault = function (event) { + if (event.preventDefault) { + return event.preventDefault(); + } + if (event.returnValue) { + event.returnValue = false; + } + }; + + // stop and event from bubbling up the DOM tree + dom.stopPropagation = function (event) { + event = event || window.event; + if (event.stopPropagation) { + return event.stopPropagation(); + } + if (event.cancelBubble) { + event.cancelBubble = true; + } + }; + + // ┌────────────────────┐ + // │ class manipulation │ + // └────────────────────┘ + + // check if an element has a specific class + dom.hasClass = function (elem, className) { + var exp = new RegExp(' ' + className + ' '); + if (exp.test(' ' + elem.className + ' ')) { + return true; + } + + return false; + }; + + // add one or more classes to an element + dom.addClass = function (elem, classes) { + classes = classes.split(' '); + + for (var i = 0; i < classes.length; i++) { + if (!dom.hasClass(elem, classes[i])) { + elem.className += ' ' + classes[i]; + } + } + }; + + // remove one or more classes from an element + dom.removeClass = function (elem, classes) { + classes = classes.split(' '); + + for (var i = 0; i < classes.length; i++) { + var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ') + ' '; + + if (dom.hasClass(elem, classes[i])) { + while (newClass.indexOf(' ' + classes[i] + ' ') >= 0) { + newClass = newClass.replace(' ' + classes[i] + ' ', ' '); + } + + elem.className = newClass.replace(/^\s+|\s+$/g, ''); + } + } + }; + + // ┌───────────────┐ + // │ DOM traversal │ + // └───────────────┘ + + // returns closest element up the DOM tree matching a given class + dom.closest = function (className, context) { + var result, current; + for (current = context; current; current = current.parentNode) { + if (current.nodeType === 1 && dom.hasClass(current, className)) { + result = current; + break; + } + } + return current; + }; + + dom.getAttr = function(el, attr) { + if (el.getAttribute) { + return el.getAttribute(attr); + } + + var result; + var attrs = el.attributes; + + for (var i = 0; i < attrs.length; i++) { + if (attrs[i].nodeName === attr) { + result = attrs[i].nodeValue; + } + } + + return result; + }; + + // ┌──────┐ + // │ misc │ + // └──────┘ + + // return the index of an object in an array with optional offset + dom.indexOf = function (obj, arr, offset) { + var i = offset || 0; + + if (arr.indexOf) { + return arr.indexOf(obj, i); + } + + for (i; i < arr.length; i++) { + if (arr[i] === obj) { + return i; + } + } + + return -1; + }; + + dom.makeArray = function (object) { + var array = []; + for (var i = 0; i < object.length; i++) { + array.push(object[i]); + } + return array; + }; + + // ┌───────────────────┐ + // │ feature detection │ + // └───────────────────┘ + // detect features like touch, ie, etc. + + dom.isTouch = function () { + if (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0)) { + return true; + } + return false; + }; + + dom.isIE8 = function () { + var html = document.getElementsByTagName('html')[0]; + if (dom.hasClass(html, 'ie8')){ + return true; + } else { + return false; + } + }; + + // ┌──────┐ + // │ TABS │ + // └──────┘ + // tabbed content pane + + T.tabs = function () { + var tabs = document.querySelectorAll('.tab'); + if (tabs.length > 0) { + // variables to be used in loops + var i, j, k, tab, group, tabsInGroup, percent; + var tabGroups = document.querySelectorAll('.tab-group'); + + // Attach the switchTab event to all tabs + for (i = 0; i < tabs.length; i++) { + tab = tabs[i]; + dom.addEvent(tab, dom.event(), switchTab); + } + + for (j = 0; j < tabGroups.length; j++) { + group = tabGroups[j]; + tabsInGroup = group.querySelectorAll('.tab'); + percent = 100 / tabsInGroup.length; + + for (k = 0; k < tabsInGroup.length; k++){ + if (dom.isIE8()) { + tabsInGroup[k].style.width = percent + "%"; + } else { + tabsInGroup[k].style.maxWidth = percent + "%"; + } + + } + } + } + }; + + function switchTab (event) { + dom.preventDefault(event); + + var tab; + var target = dom.eventTarget(event); + if (dom.hasClass(target, 'tab')) { + tab = target; + } else { + tab = dom.closest('tab', target); + } + var tabs = dom.closest('tab-nav', tab).querySelectorAll('.tab'); + var index = dom.indexOf(tab, tabs); + var contents = dom.closest('tab-group', tab).querySelectorAll('.tab-content'); + + for (var i = 0; i < tabs.length; i++){ + dom.removeClass(tabs[i], 'active'); + dom.removeClass(contents[i], 'active'); + } + + dom.addClass(tab, 'active'); + dom.addClass(contents[index], 'active'); + } + + T.tabs(); +})(); diff --git a/site/data/example_data.json b/docs/source/data/example_data.json similarity index 100% rename from site/data/example_data.json rename to docs/source/data/example_data.json diff --git a/site/data/example_data.tsv b/docs/source/data/example_data.tsv similarity index 100% rename from site/data/example_data.tsv rename to docs/source/data/example_data.tsv diff --git a/site/data/simple.json b/docs/source/data/simple.json similarity index 100% rename from site/data/simple.json rename to docs/source/data/simple.json diff --git a/documentation/index.md b/docs/source/documentation/_content.md similarity index 91% rename from documentation/index.md rename to docs/source/documentation/_content.md index 79c0d31..dd4fb67 100644 --- a/documentation/index.md +++ b/docs/source/documentation/_content.md @@ -1,9 +1,8 @@ - # Angular Dimple Documentation Angular Dimple is a series of Angular directives that help you create graphs and visualizations based on [Dimple.js](http://dimplejs.org/) and [d3](http://d3js.org/). It's designed to create graphs as simply as possible from flat JSON data. ---- +***** ## Graph @@ -25,8 +24,32 @@ This directive creates a div with a dynamic id, and initializes a new Dimple gra | width | 100% | Accepts a percent or a number. Sets the width of the chart, either in pixels or percent. | | height | 100% | Accepts a percent or a number. Sets the width of the chart, either in pixels or percent. | | auto-style | true | Boolean. If false, no default dimple color, fill, or stroke styles will be applied to the graph. Allows for custom css styling. | +| color | none | String. Matches to a color palette on the scope. See below for syntax | + +```js + $scope.palette = [ + { + name: "Black Mesa", // Required, name of field to assign + fill: "#FFBEB4", // Requried, fill color + stroke: "#FFBEB4", // Optional, stroke color + opacity: "1" // Optional, opacity + }, + { + name: "Aperture", + fill: "#7B9ACC", + stroke: "#7B9ACC", + opacity: "1" + }, + { + name: "Tyrell Corp", + fill: "#D1FFA9", + stroke: "#D1FFA9", + opacity: "1" + } + ]; +``` ---- +***** ## X @@ -46,7 +69,7 @@ The `` directive sets up your x axis for the graph. Defining an x axis is req | group-by | none | Creates small mutliple graphs grouped by a Categorical data field. | title | field value | Labels the x axis. If 'null', will not draw a title for the axis. | ---- +***** ## Y @@ -68,7 +91,7 @@ Changing the axis to to 'Percent' will tie the largest value on the defined fiel | group-by | none | Creates small mutliple graphs grouped by a Categorical data field. | title | field value | Labels the y-axis. If 'null', will not draw a title for the axis. | ---- +***** ## Legend @@ -76,13 +99,13 @@ The `` directive creates a legend for your graph. The legend is generate | attribute | default | description | | --------- | ----------- | ----------- | -| left | 10% | Accepts a percent or a number. Sets position from left of chart in either pixels or percent. | -| top | 4% | Accepts a percent or a number. Sets position from top of chart in either pixels or percent. | -| height | 100% | Accepts a percent or a number. Sets height of legend in either pixels or percent. | +| left | 10% | Accepts a percent or a number. Sets position from left of chart in either pixels or percent. | +| top | 4% | Accepts a percent or a number. Sets position from top of chart in either pixels or percent. | +| height | 100% | Accepts a percent or a number. Sets height of legend in either pixels or percent. | | width | 90% | Accepts a percent or a number. Sets width of legend in either pixels or percent. | -| position | left | Accepts 'left' or 'right'. Set float position of legend. | +| position | left | Accepts 'left' or 'right'. Set float position of legend. | ---- +***** ## Line example @@ -106,7 +129,7 @@ The `` directive plots your data as a line. The `field` attribute (require | value | Will plot a line where the field is the given value. | | filter | Accepts a string 'field:value'. Will filter the data to only points where the defined field matches the defined value. | ---- +***** ## Bar example @@ -129,9 +152,9 @@ The `` directive plots your data as series of bars. The `field` attribute ( | value | Will plot a line where the field is the given value. | | filter | Accepts a string 'field:value'. Will filter the data to only points where the defined field matches the defined value. | ---- +***** ---- +***** ## Stacked Bar example @@ -154,7 +177,7 @@ The `` directive plots your data as series of bars. The `field` attribute ( | value | Will plot a line where the field is the given value. | | filter | Accepts a string 'field:value'. Will filter the data to only points where the defined field matches the defined value. | ---- +***** ## Area example @@ -178,7 +201,7 @@ The `` directive plots your data to an area chart. The `field` attribute w | value | Will plot a line where the field is the given value. | | filter | Accepts a string 'field:value'. Will filter the data to only points where the defined field matches the defined value. | ---- +***** ## Stacked Area example @@ -213,7 +236,7 @@ Setting the y axis in a stacked area graph with create an expanded stacked area, | filter | Accepts a string 'field:value'. Will filter the data to only points where the defined field matches the defined value. | ---- +***** ## Scatter Plot example @@ -240,7 +263,7 @@ Scatter Plots also use the `series` attribute. Series defines the categorical da | series | Accepts a string 'field'. | | filter | Accepts a string 'field:value'. Will filter the data to only points where the defined field matches the defined value. | ---- +***** ## Ring example @@ -270,4 +293,3 @@ You can define both the thickness of the ring (as a percentage) and the diameter - diff --git a/docs/source/documentation/index.html b/docs/source/documentation/index.html new file mode 100644 index 0000000..5c660c5 --- /dev/null +++ b/docs/source/documentation/index.html @@ -0,0 +1,87 @@ +
+
+ + + +
+ +
+ + +
+
+ {% markdown %}{% include 'documentation/_content' %}{% endmarkdown %} +
+
+ +
+
\ No newline at end of file diff --git a/docs/source/examples/index.html b/docs/source/examples/index.html new file mode 100644 index 0000000..c041856 --- /dev/null +++ b/docs/source/examples/index.html @@ -0,0 +1,64 @@ +--- +title: "Examples Angular App Thing" +description: "Should process a nested index.html page correctly" +--- +
+
+ + + +
+ +
+ + +
+
+
+
+
diff --git a/documentation/partials/animation-test.md b/docs/source/examples/partials/animation-test.md similarity index 93% rename from documentation/partials/animation-test.md rename to docs/source/examples/partials/animation-test.md index ff28bd8..b606145 100644 --- a/documentation/partials/animation-test.md +++ b/docs/source/examples/partials/animation-test.md @@ -1,4 +1,6 @@ - +--- +layout: false +---
diff --git a/documentation/partials/area.md b/docs/source/examples/partials/area.md similarity index 98% rename from documentation/partials/area.md rename to docs/source/examples/partials/area.md index 5f39df8..a650a57 100644 --- a/documentation/partials/area.md +++ b/docs/source/examples/partials/area.md @@ -1,3 +1,6 @@ +--- +layout: false +---

Area Graph diff --git a/documentation/partials/bar-graph.md b/docs/source/examples/partials/bar-graph.md similarity index 98% rename from documentation/partials/bar-graph.md rename to docs/source/examples/partials/bar-graph.md index 81265ba..2b6c39f 100644 --- a/documentation/partials/bar-graph.md +++ b/docs/source/examples/partials/bar-graph.md @@ -1,3 +1,6 @@ +--- +layout: false +---

Bar Graph diff --git a/documentation/partials/expanded-stacked-area.md b/docs/source/examples/partials/expanded-stacked-area.md similarity index 98% rename from documentation/partials/expanded-stacked-area.md rename to docs/source/examples/partials/expanded-stacked-area.md index bf0b8b5..ebbd316 100644 --- a/documentation/partials/expanded-stacked-area.md +++ b/docs/source/examples/partials/expanded-stacked-area.md @@ -1,3 +1,6 @@ +--- +layout: false +---

Expanded Stacked Area diff --git a/documentation/partials/homepage-code.md b/docs/source/examples/partials/homepage-code.md similarity index 98% rename from documentation/partials/homepage-code.md rename to docs/source/examples/partials/homepage-code.md index 9f927eb..0c5438d 100644 --- a/documentation/partials/homepage-code.md +++ b/docs/source/examples/partials/homepage-code.md @@ -1,5 +1,6 @@ -Top Tabbed Code Sample: - +--- +layout: false +--- ```html diff --git a/documentation/partials/line-graph.md b/docs/source/examples/partials/line-graph.md similarity index 98% rename from documentation/partials/line-graph.md rename to docs/source/examples/partials/line-graph.md index ec3e847..fd3fa48 100644 --- a/documentation/partials/line-graph.md +++ b/docs/source/examples/partials/line-graph.md @@ -1,4 +1,6 @@ - +--- +layout: false +---

Line Graph diff --git a/documentation/partials/ring.md b/docs/source/examples/partials/ring.md similarity index 98% rename from documentation/partials/ring.md rename to docs/source/examples/partials/ring.md index dd25b13..65af3f0 100644 --- a/documentation/partials/ring.md +++ b/docs/source/examples/partials/ring.md @@ -1,3 +1,6 @@ +--- +layout: false +---

Ring Chart diff --git a/documentation/partials/scatter-plot.md b/docs/source/examples/partials/scatter-plot.md similarity index 99% rename from documentation/partials/scatter-plot.md rename to docs/source/examples/partials/scatter-plot.md index fe7c699..afbdc21 100644 --- a/documentation/partials/scatter-plot.md +++ b/docs/source/examples/partials/scatter-plot.md @@ -1,3 +1,6 @@ +--- +layout: false +---

Scatter Plot diff --git a/documentation/partials/stacked-area.md b/docs/source/examples/partials/stacked-area.md similarity index 99% rename from documentation/partials/stacked-area.md rename to docs/source/examples/partials/stacked-area.md index d1515cc..1a78e27 100644 --- a/documentation/partials/stacked-area.md +++ b/docs/source/examples/partials/stacked-area.md @@ -1,3 +1,6 @@ +--- +layout: false +---

Stacked Area diff --git a/documentation/partials/stacked-bar-graph.md b/docs/source/examples/partials/stacked-bar-graph.md similarity index 98% rename from documentation/partials/stacked-bar-graph.md rename to docs/source/examples/partials/stacked-bar-graph.md index 68ead76..02c6f96 100644 --- a/documentation/partials/stacked-bar-graph.md +++ b/docs/source/examples/partials/stacked-bar-graph.md @@ -1,3 +1,6 @@ +--- +layout: false +---

Stacked Bar diff --git a/docs/source/index.html b/docs/source/index.html new file mode 100644 index 0000000..04bfea8 --- /dev/null +++ b/docs/source/index.html @@ -0,0 +1,282 @@ +--- +title: Acetate +active: home +--- + + + + + +
+
+
+
+

The Power of Angular Directives

+

With Angular directives, Angular-Dimple allows you to create graphs and visualizations clearly and declaratively. Want a line graph? Just use a <line> element inside of a <graph> element. Add some axes and you're done.

+
+
+
+ +
+
+{% markdown %} +``` + + + + + + +``` +{% endmarkdown %} +
+
+ + + + + + +
+
+
+
+
+
+
+ + + +
+
+
+ + + +

+ Line +

+

+ Examples | + Reference +

+
+
+ + + +

+ Area +

+

+ Examples | + Reference +

+
+
+ + + +

+ Stacked Area +

+

+ Examples | + Reference +

+
+
+ + + +

+ Bar +

+

+ Examples | + Reference +

+
+
+ + + +

+ Stacked Bar +

+

+ Examples | + Reference +

+
+
+ + + +

+ Scatter Plot +

+

+ Examples | + Reference +

+
+ +
+ + + +

+ Ring +

+

+ Examples | + Reference +

+
+
+ + +
+
+
+
+

Get Started

+

1Create a basic Angular app

+

2Include Angular-Dimple as a dependency

+

3Add data

+
+
+
+ +
+
+{% markdown %} +``` + + + + + + + +
+ + + + + +
+ + + + + +``` +{% endmarkdown %} +
+
+{% markdown %} +``` +angular.module('myApp', [ + 'angular-dimple' +]) + +.controller('myController', ['$scope', 'dataService', function($scope, dataService) { + dataService.getData().then(function(response) { + $scope.graphData = response.data; + }); +}]) + +.service('dataService', ['$http', function($http) { + return { + getData: function() { + return $http.get('data.json'); + } + }; +}]); +``` +{% endmarkdown %} +
+
+{% markdown %} +``` +[ + { + "Date": "01\/01\/2011", + "Month": "Jan-11", + "Owner": "Aperture", + "Unit Sales": "1765" + }, + { + "Date": "02\/01\/2011", + "Month": "Jan-11", + "Owner": "Aperture", + "Unit Sales": "1899" + }, + { + "Date": "02\/01\/2011", + "Month": "Jan-11", + "Owner": "Aperture", + "Unit Sales": "1565" + } +] +``` +{% endmarkdown %} +
+
+
+
+
+
+
+
diff --git a/docs/source/layouts/_layout.html b/docs/source/layouts/_layout.html new file mode 100644 index 0000000..e1059df --- /dev/null +++ b/docs/source/layouts/_layout.html @@ -0,0 +1,89 @@ + + + + {{title}} | Angular Dimple + + + + + {% block head %} + + + + + + + + {% endblock %} + + + + + + {% block content %}{% endblock %} + + +
+
+
+
+

Made by EsriPDX

+ + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/documentation/blank.html b/documentation/blank.html deleted file mode 100644 index 70d1174..0000000 --- a/documentation/blank.html +++ /dev/null @@ -1 +0,0 @@ -<%= content %> \ No newline at end of file diff --git a/documentation/layout.html b/documentation/layout.html deleted file mode 100644 index 0f25937..0000000 --- a/documentation/layout.html +++ /dev/null @@ -1,160 +0,0 @@ - - - - - - Angular Dimple Reference - - Documentation | Angular Dimple - - - - - - - - - - - - - - - - - -
-
- - - - -
- -
- - -
-
- <%= content %> -
-
- -
-
- - -
-
-
-
-

Made by EsriPDX

- -
-
-
-
- - - - - diff --git a/source/angular-dimple.js b/lib/angular-dimple.js similarity index 100% rename from source/angular-dimple.js rename to lib/angular-dimple.js diff --git a/source/area.js b/lib/area.js similarity index 100% rename from source/area.js rename to lib/area.js diff --git a/source/bar.js b/lib/bar.js similarity index 100% rename from source/bar.js rename to lib/bar.js diff --git a/source/graph.js b/lib/graph.js similarity index 90% rename from source/graph.js rename to lib/graph.js index 06a8091..8c7e85b 100644 --- a/source/graph.js +++ b/lib/graph.js @@ -6,6 +6,7 @@ angular.module('angular-dimple.graph', []) replace: true, scope: { data: '=', + color: '=' }, require: ['graph'], transclude: true, @@ -67,6 +68,14 @@ angular.module('angular-dimple.graph', []) // auto style var autoStyle = $attrs.autoStyle === 'false' ? true : false; chart.noFormats = autoStyle; + + // Apply palette styles + if ($attrs.color) { + var palette = $scope.color; + for (var i = 0; i < palette.length; i++ ) { + chart.assignColor(palette[i].name, palette[i].fill, palette[i].stroke, palette[i].opacity); + } + } }; this.getChart = function () { diff --git a/source/legend.js b/lib/legend.js similarity index 100% rename from source/legend.js rename to lib/legend.js diff --git a/source/line.js b/lib/line.js similarity index 100% rename from source/line.js rename to lib/line.js diff --git a/source/r.js b/lib/r.js similarity index 100% rename from source/r.js rename to lib/r.js diff --git a/source/ring.js b/lib/ring.js similarity index 100% rename from source/ring.js rename to lib/ring.js diff --git a/source/scatter-plot.js b/lib/scatter-plot.js similarity index 100% rename from source/scatter-plot.js rename to lib/scatter-plot.js diff --git a/source/stacked-area.js b/lib/stacked-area.js similarity index 100% rename from source/stacked-area.js rename to lib/stacked-area.js diff --git a/source/stacked-bar.js b/lib/stacked-bar.js similarity index 100% rename from source/stacked-bar.js rename to lib/stacked-bar.js diff --git a/source/x.js b/lib/x.js similarity index 100% rename from source/x.js rename to lib/x.js diff --git a/source/y.js b/lib/y.js similarity index 100% rename from source/y.js rename to lib/y.js diff --git a/package.json b/package.json index 66f803c..97632d1 100644 --- a/package.json +++ b/package.json @@ -1,18 +1,30 @@ { "name": "angular-dimple", - "version": "1.1.2", + "version": "1.1.3", "description": "Angular.js wrapper for the Dimple charting language", "repository": "https://github.com/esripdx/angular-dimple", "license": "ISC", + "scripts": { + "prepublish": "bower install && grunt prepublish", + "start": "grunt" + }, "devDependencies": { - "grunt": "^0.4.5", - "grunt-contrib-compass": "^0.8.0", - "grunt-contrib-connect": "^0.7.1", + "acetate": "0.0.7", + "grunt": "~0.4.5", + "grunt-acetate": "0.0.5", + "grunt-contrib-imagemin": "^0.8.1", + "grunt-contrib-sass": "^0.8.1", + "grunt-contrib-watch": "~0.6.1", "grunt-contrib-concat": "^0.4.0", "grunt-contrib-jshint": "^0.10.0", "grunt-contrib-uglify": "^0.4.0", - "grunt-contrib-watch": "^0.6.1", - "grunt-markdown": "^0.6.1", - "grunt-gh-pages": "~0.9.1" + "grunt-contrib-copy": "^0.5.0", + "grunt-contrib-compress": "^0.11.0", + "grunt-gh-pages": "^0.9.1", + "grunt-newer": "^0.7.0", + "load-grunt-tasks": "~0.6.0", + "minimist": "~1.1.0", + "grunt-concurrent": "^0.5.0", + "grunt-github-releaser": "^0.1.17" } } diff --git a/site/css/examples.css b/site/css/examples.css deleted file mode 100644 index 9d2a982..0000000 --- a/site/css/examples.css +++ /dev/null @@ -1,163 +0,0 @@ -/* line 109, ../scss/base/_mixins.scss */ -.show { - visibility: visible; -} - -/* line 113, ../scss/base/_mixins.scss */ -.hide { - display: none !important; - visibility: hidden; -} - -@media screen and (min-width: 960px) { - /* line 118, ../scss/base/_mixins.scss */ - .phone-hide { - visibility: visible; - } - - /* line 119, ../scss/base/_mixins.scss */ - .tablet-hide { - visibility: visible; - } - - /* line 120, ../scss/base/_mixins.scss */ - .phone-show { - display: none !important; - visibility: hidden; - } - - /* line 121, ../scss/base/_mixins.scss */ - .tablet-show { - display: none !important; - visibility: hidden; - } - - /* line 122, ../scss/base/_mixins.scss */ - .tablet-only { - display: none !important; - visibility: hidden; - } -} -@media screen and (max-width: 959px) and (min-width: 480px) { - /* line 127, ../scss/base/_mixins.scss */ - .phone-hide { - visibility: visible; - } - - /* line 128, ../scss/base/_mixins.scss */ - .tablet-hide { - display: none !important; - visibility: hidden; - } - - /* line 129, ../scss/base/_mixins.scss */ - .phone-show { - display: none !important; - visibility: hidden; - } - - /* line 130, ../scss/base/_mixins.scss */ - .tablet-show { - visibility: visible; - } - - /* line 131, ../scss/base/_mixins.scss */ - .tablet-only { - visibility: visible; - } -} -@media screen and (max-width: 479px) { - /* line 136, ../scss/base/_mixins.scss */ - .phone-hide { - display: none !important; - visibility: hidden; - } - - /* line 137, ../scss/base/_mixins.scss */ - .tablet-hide { - display: none !important; - visibility: hidden; - } - - /* line 138, ../scss/base/_mixins.scss */ - .phone-show { - visibility: visible; - } - - /* line 139, ../scss/base/_mixins.scss */ - .tablet-show { - visibility: visible; - } - - /* line 140, ../scss/base/_mixins.scss */ - .tablet-only { - display: none !important; - visibility: hidden; - } -} -/* line 5, ../scss/examples.scss */ -.white-panel { - margin-bottom: 1rem; - background-color: #FFFFFF; - border: 1px solid #ECF0F3; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; -} -/* line 11, ../scss/examples.scss */ -.white-panel.padded { - padding: 2rem; -} -/* line 15, ../scss/examples.scss */ -.white-panel h2 { - padding: 6rem 0 1rem 0; -} - -@media screen and (max-width: 662px) { - /* line 20, ../scss/examples.scss */ - h2 { - display: inline-block; - } -} - -/* line 26, ../scss/examples.scss */ -.example-link { - margin-top: -2.75rem; - float: right; - font-family: "Source Code Pro", "Inconsolata", "Consolas", "Courier New", monospace; - font-size: 1rem; -} - -/* line 35, ../scss/examples.scss */ -.api-link { - font-size: 1rem; - float: right; - line-height: 3.25rem; -} - -@media screen and (max-width: 662px) { - /* line 42, ../scss/examples.scss */ - .example-link, - .api-link { - width: 100%; - display: block; - margin-top: 0rem; - margin-bottom: 1.5rem; - float: left; - } -} - -@media screen and (max-width: 480px) { - /* line 54, ../scss/examples.scss */ - .container { - padding: 0 0; - } - - /* line 57, ../scss/examples.scss */ - .white-panel.padded { - padding: 2rem 1rem; - } -} diff --git a/site/css/home.css b/site/css/home.css deleted file mode 100644 index 0935b24..0000000 --- a/site/css/home.css +++ /dev/null @@ -1,83 +0,0 @@ -/* line 4, ../scss/home.scss */ -.homepage-navigation { - position: relative; - z-index: 2; - font-weight: 200; - margin-top: 1rem; -} -/* line 9, ../scss/home.scss */ -.homepage-navigation a { - color: #FAFBFE; -} -/* line 11, ../scss/home.scss */ -.homepage-navigation a:hover { - color: #FFFFFF; -} - -/* line 17, ../scss/home.scss */ -pre { - padding: 0; - border: none; -} - -/* line 22, ../scss/home.scss */ -code { - background-color: #FFFFFF; - border-color: #ECF0F3; -} - -/* line 27, ../scss/home.scss */ -.banner { - position: relative; - overflow: hidden; - color: #FFFFFF; - background: url(../img/dots.svg) #245070; - z-index: 20; -} -/* line 33, ../scss/home.scss */ -.banner .banner-copy { - position: relative; - margin: 5rem 0 9rem 0; - z-index: 2; - font-weight: 200; -} -/* line 39, ../scss/home.scss */ -.banner .banner-graphic { - position: absolute; - top: -260px; - bottom: 0; - left: 50%; - z-index: 1; - width: 2400px; - margin-left: -1200px; - z-index: 1; -} -/* line 49, ../scss/home.scss */ -.banner .dimple-axis { - display: none; -} -/* line 52, ../scss/home.scss */ -.banner .dimple-gridline { - display: none; -} -/* line 55, ../scss/home.scss */ -.banner .dimple-line { - opacity: 0.8; - fill: none; - stroke: #234052; - stroke-width: 2; -} -/* line 61, ../scss/home.scss */ -.banner .dimple-marker-back { - fill: #234052; -} -/* line 64, ../scss/home.scss */ -.banner .dimple-marker { - display: none; - fill: #234052; -} - -/* line 71, ../scss/home.scss */ -.charts-list a { - color: #76899B; -} diff --git a/site/css/style.css b/site/css/style.css deleted file mode 100644 index 0ab0c0c..0000000 --- a/site/css/style.css +++ /dev/null @@ -1,2162 +0,0 @@ -/* line 1, ../scss/base/_reset.scss */ -html { - overflow-y: scroll; - font-size: 100%; - -webkit-text-size-adjust: 100%; - -moz-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} - -/* line 9, ../scss/base/_reset.scss */ -body { - margin: 0; -} - -/* line 15, ../scss/base/_reset.scss */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -nav, -section, -summary { - display: block; -} - -/* line 29, ../scss/base/_reset.scss */ -audio, -canvas, -video { - display: inline-block; -} - -/* line 35, ../scss/base/_reset.scss */ -audio:not([controls]) { - display: none; - height: 0; -} - -/* line 40, ../scss/base/_reset.scss */ -[hidden] { - display: none; -} - -/* line 44, ../scss/base/_reset.scss */ -svg:not(:root) { - overflow: hidden; -} - -/* line 3, ../scss/base/_mixins.scss */ -.container:before, .row:before, .tab-group .tab-nav:before, .chart-icon:before, .container:after, .row:after, .tab-group .tab-nav:after, .chart-icon:after { - content: " "; - display: table; -} -/* line 8, ../scss/base/_mixins.scss */ -.container:after, .row:after, .tab-group .tab-nav:after, .chart-icon:after { - clear: both; -} - -/* line 52, ../scss/base/_mixins.scss */ -.column-1, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12, .column-13, .column-14, .column-15, .column-16, .column-17, .column-18, .column-19, .column-20, .column-21, .column-22, .column-23, .column-24 { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - float: left; - padding: 0 0.5em; -} - -/* line 109, ../scss/base/_mixins.scss */ -.show { - visibility: visible; -} - -/* line 113, ../scss/base/_mixins.scss */ -.hide { - display: none !important; - visibility: hidden; -} - -@media screen and (min-width: 960px) { - /* line 118, ../scss/base/_mixins.scss */ - .phone-hide { - visibility: visible; - } - - /* line 119, ../scss/base/_mixins.scss */ - .tablet-hide { - visibility: visible; - } - - /* line 120, ../scss/base/_mixins.scss */ - .phone-show { - display: none !important; - visibility: hidden; - } - - /* line 121, ../scss/base/_mixins.scss */ - .tablet-show { - display: none !important; - visibility: hidden; - } - - /* line 122, ../scss/base/_mixins.scss */ - .tablet-only { - display: none !important; - visibility: hidden; - } -} -@media screen and (max-width: 959px) and (min-width: 480px) { - /* line 127, ../scss/base/_mixins.scss */ - .phone-hide { - visibility: visible; - } - - /* line 128, ../scss/base/_mixins.scss */ - .tablet-hide { - display: none !important; - visibility: hidden; - } - - /* line 129, ../scss/base/_mixins.scss */ - .phone-show { - display: none !important; - visibility: hidden; - } - - /* line 130, ../scss/base/_mixins.scss */ - .tablet-show { - visibility: visible; - } - - /* line 131, ../scss/base/_mixins.scss */ - .tablet-only { - visibility: visible; - } -} -@media screen and (max-width: 479px) { - /* line 136, ../scss/base/_mixins.scss */ - .phone-hide { - display: none !important; - visibility: hidden; - } - - /* line 137, ../scss/base/_mixins.scss */ - .tablet-hide { - display: none !important; - visibility: hidden; - } - - /* line 138, ../scss/base/_mixins.scss */ - .phone-show { - visibility: visible; - } - - /* line 139, ../scss/base/_mixins.scss */ - .tablet-show { - visibility: visible; - } - - /* line 140, ../scss/base/_mixins.scss */ - .tablet-only { - display: none !important; - visibility: hidden; - } -} -/* line 2, ../scss/base/_grid.scss */ -.container { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - width: 100%; - max-width: 1280px; - min-width: 0; - padding: 0 1em; - margin-right: auto; - margin-left: auto; -} - -/* line 6, ../scss/base/_grid.scss */ -.row { - position: relative; -} -/* line 9, ../scss/base/_grid.scss */ -.row .row { - width: auto; - max-width: none; - min-width: 0; - margin-left: -0.5em; - margin-right: -0.5em; -} - -/* line 18, ../scss/base/_grid.scss */ -img, object, embed, video { - max-width: 100%; - height: auto; -} - -/* line 23, ../scss/base/_grid.scss */ -img { - border: 0; - -ms-interpolation-mode: bicubic; -} - -/* line 29, ../scss/base/_grid.scss */ -[class*="column-"].last-column { - float: right; -} -/* line 32, ../scss/base/_grid.scss */ -[class*="column-"].center { - float: none; - margin-left: auto; - margin-right: auto; - clear: both; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-1 { - width: 4.16667%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-2 { - width: 8.33333%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-3 { - width: 12.5%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-4 { - width: 16.66667%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-5 { - width: 20.83333%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-6 { - width: 25%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-7 { - width: 29.16667%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-8 { - width: 33.33333%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-9 { - width: 37.5%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-10 { - width: 41.66667%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-11 { - width: 45.83333%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-12 { - width: 50%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-13 { - width: 54.16667%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-14 { - width: 58.33333%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-15 { - width: 62.5%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-16 { - width: 66.66667%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-17 { - width: 70.83333%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-18 { - width: 75%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-19 { - width: 79.16667%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-20 { - width: 83.33333%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-21 { - width: 87.5%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-22 { - width: 91.66667%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-23 { - width: 95.83333%; -} - -/* line 38, ../scss/base/_grid.scss */ -.column-24 { - width: 100%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-0 { - margin-left: 0%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-0 { - margin-right: 0%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-1 { - margin-left: 4.16667%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-1 { - margin-right: 4.16667%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-2 { - margin-left: 8.33333%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-2 { - margin-right: 8.33333%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-3 { - margin-left: 12.5%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-3 { - margin-right: 12.5%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-4 { - margin-left: 16.66667%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-4 { - margin-right: 16.66667%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-5 { - margin-left: 20.83333%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-5 { - margin-right: 20.83333%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-6 { - margin-left: 25%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-6 { - margin-right: 25%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-7 { - margin-left: 29.16667%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-7 { - margin-right: 29.16667%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-8 { - margin-left: 33.33333%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-8 { - margin-right: 33.33333%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-9 { - margin-left: 37.5%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-9 { - margin-right: 37.5%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-10 { - margin-left: 41.66667%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-10 { - margin-right: 41.66667%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-11 { - margin-left: 45.83333%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-11 { - margin-right: 45.83333%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-12 { - margin-left: 50%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-12 { - margin-right: 50%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-13 { - margin-left: 54.16667%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-13 { - margin-right: 54.16667%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-14 { - margin-left: 58.33333%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-14 { - margin-right: 58.33333%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-15 { - margin-left: 62.5%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-15 { - margin-right: 62.5%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-16 { - margin-left: 66.66667%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-16 { - margin-right: 66.66667%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-17 { - margin-left: 70.83333%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-17 { - margin-right: 70.83333%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-18 { - margin-left: 75%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-18 { - margin-right: 75%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-19 { - margin-left: 79.16667%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-19 { - margin-right: 79.16667%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-20 { - margin-left: 83.33333%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-20 { - margin-right: 83.33333%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-21 { - margin-left: 87.5%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-21 { - margin-right: 87.5%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-22 { - margin-left: 91.66667%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-22 { - margin-right: 91.66667%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-23 { - margin-left: 95.83333%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-23 { - margin-right: 95.83333%; -} - -/* line 45, ../scss/base/_grid.scss */ -.pre-24 { - margin-left: 100%; -} - -/* line 48, ../scss/base/_grid.scss */ -.post-24 { - margin-right: 100%; -} - -@media screen and (max-width: 960px) { - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-1 { - width: 4.16667%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-2 { - width: 8.33333%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-3 { - width: 12.5%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-4 { - width: 16.66667%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-5 { - width: 20.83333%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-6 { - width: 25%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-7 { - width: 29.16667%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-8 { - width: 33.33333%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-9 { - width: 37.5%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-10 { - width: 41.66667%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-11 { - width: 45.83333%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-12 { - width: 50%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-13 { - width: 54.16667%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-14 { - width: 58.33333%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-15 { - width: 62.5%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-16 { - width: 66.66667%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-17 { - width: 70.83333%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-18 { - width: 75%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-19 { - width: 79.16667%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-20 { - width: 83.33333%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-21 { - width: 87.5%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-22 { - width: 91.66667%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-23 { - width: 95.83333%; - } - - /* line 55, ../scss/base/_grid.scss */ - .tablet-column-24 { - width: 100%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-0 { - margin-right: 0%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-0 { - margin-left: 0%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-1 { - margin-right: 4.16667%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-1 { - margin-left: 4.16667%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-2 { - margin-right: 8.33333%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-2 { - margin-left: 8.33333%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-3 { - margin-right: 12.5%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-3 { - margin-left: 12.5%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-4 { - margin-right: 16.66667%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-4 { - margin-left: 16.66667%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-5 { - margin-right: 20.83333%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-5 { - margin-left: 20.83333%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-6 { - margin-right: 25%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-6 { - margin-left: 25%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-7 { - margin-right: 29.16667%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-7 { - margin-left: 29.16667%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-8 { - margin-right: 33.33333%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-8 { - margin-left: 33.33333%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-9 { - margin-right: 37.5%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-9 { - margin-left: 37.5%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-10 { - margin-right: 41.66667%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-10 { - margin-left: 41.66667%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-11 { - margin-right: 45.83333%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-11 { - margin-left: 45.83333%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-12 { - margin-right: 50%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-12 { - margin-left: 50%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-13 { - margin-right: 54.16667%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-13 { - margin-left: 54.16667%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-14 { - margin-right: 58.33333%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-14 { - margin-left: 58.33333%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-15 { - margin-right: 62.5%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-15 { - margin-left: 62.5%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-16 { - margin-right: 66.66667%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-16 { - margin-left: 66.66667%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-17 { - margin-right: 70.83333%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-17 { - margin-left: 70.83333%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-18 { - margin-right: 75%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-18 { - margin-left: 75%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-19 { - margin-right: 79.16667%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-19 { - margin-left: 79.16667%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-20 { - margin-right: 83.33333%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-20 { - margin-left: 83.33333%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-21 { - margin-right: 87.5%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-21 { - margin-left: 87.5%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-22 { - margin-right: 91.66667%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-22 { - margin-left: 91.66667%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-23 { - margin-right: 95.83333%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-23 { - margin-left: 95.83333%; - } - - /* line 60, ../scss/base/_grid.scss */ - .tablet-post-24 { - margin-right: 100%; - } - - /* line 63, ../scss/base/_grid.scss */ - .tablet-pre-24 { - margin-left: 100%; - } -} -@media screen and (max-width: 480px) { - /* line 71, ../scss/base/_grid.scss */ - .phone-column-1 { - width: 4.16667%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-2 { - width: 8.33333%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-3 { - width: 12.5%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-4 { - width: 16.66667%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-5 { - width: 20.83333%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-6 { - width: 25%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-7 { - width: 29.16667%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-8 { - width: 33.33333%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-9 { - width: 37.5%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-10 { - width: 41.66667%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-11 { - width: 45.83333%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-12 { - width: 50%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-13 { - width: 54.16667%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-14 { - width: 58.33333%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-15 { - width: 62.5%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-16 { - width: 66.66667%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-17 { - width: 70.83333%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-18 { - width: 75%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-19 { - width: 79.16667%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-20 { - width: 83.33333%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-21 { - width: 87.5%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-22 { - width: 91.66667%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-23 { - width: 95.83333%; - } - - /* line 71, ../scss/base/_grid.scss */ - .phone-column-24 { - width: 100%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-0 { - margin-right: 0%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-0 { - margin-left: 0%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-1 { - margin-right: 4.16667%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-1 { - margin-left: 4.16667%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-2 { - margin-right: 8.33333%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-2 { - margin-left: 8.33333%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-3 { - margin-right: 12.5%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-3 { - margin-left: 12.5%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-4 { - margin-right: 16.66667%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-4 { - margin-left: 16.66667%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-5 { - margin-right: 20.83333%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-5 { - margin-left: 20.83333%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-6 { - margin-right: 25%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-6 { - margin-left: 25%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-7 { - margin-right: 29.16667%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-7 { - margin-left: 29.16667%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-8 { - margin-right: 33.33333%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-8 { - margin-left: 33.33333%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-9 { - margin-right: 37.5%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-9 { - margin-left: 37.5%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-10 { - margin-right: 41.66667%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-10 { - margin-left: 41.66667%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-11 { - margin-right: 45.83333%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-11 { - margin-left: 45.83333%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-12 { - margin-right: 50%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-12 { - margin-left: 50%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-13 { - margin-right: 54.16667%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-13 { - margin-left: 54.16667%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-14 { - margin-right: 58.33333%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-14 { - margin-left: 58.33333%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-15 { - margin-right: 62.5%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-15 { - margin-left: 62.5%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-16 { - margin-right: 66.66667%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-16 { - margin-left: 66.66667%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-17 { - margin-right: 70.83333%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-17 { - margin-left: 70.83333%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-18 { - margin-right: 75%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-18 { - margin-left: 75%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-19 { - margin-right: 79.16667%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-19 { - margin-left: 79.16667%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-20 { - margin-right: 83.33333%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-20 { - margin-left: 83.33333%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-21 { - margin-right: 87.5%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-21 { - margin-left: 87.5%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-22 { - margin-right: 91.66667%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-22 { - margin-left: 91.66667%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-23 { - margin-right: 95.83333%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-23 { - margin-left: 95.83333%; - } - - /* line 76, ../scss/base/_grid.scss */ - .phone-post-24 { - margin-right: 100%; - } - - /* line 79, ../scss/base/_grid.scss */ - .phone-pre-24 { - margin-left: 100%; - } -} -/* line 87, ../scss/base/_grid.scss */ -.leader-0 { - margin-top: 0rem; -} - -/* line 88, ../scss/base/_grid.scss */ -.trailer-0 { - margin-bottom: 0rem; -} - -/* line 87, ../scss/base/_grid.scss */ -.leader-1 { - margin-top: 1rem; -} - -/* line 88, ../scss/base/_grid.scss */ -.trailer-1 { - margin-bottom: 1rem; -} - -/* line 87, ../scss/base/_grid.scss */ -.leader-2 { - margin-top: 2rem; -} - -/* line 88, ../scss/base/_grid.scss */ -.trailer-2 { - margin-bottom: 2rem; -} - -/* line 87, ../scss/base/_grid.scss */ -.leader-3 { - margin-top: 3rem; -} - -/* line 88, ../scss/base/_grid.scss */ -.trailer-3 { - margin-bottom: 3rem; -} - -/* line 87, ../scss/base/_grid.scss */ -.leader-4 { - margin-top: 4rem; -} - -/* line 88, ../scss/base/_grid.scss */ -.trailer-4 { - margin-bottom: 4rem; -} - -/* line 87, ../scss/base/_grid.scss */ -.leader-5 { - margin-top: 5rem; -} - -/* line 88, ../scss/base/_grid.scss */ -.trailer-5 { - margin-bottom: 5rem; -} - -/* line 87, ../scss/base/_grid.scss */ -.leader-6 { - margin-top: 6rem; -} - -/* line 88, ../scss/base/_grid.scss */ -.trailer-6 { - margin-bottom: 6rem; -} - -/* line 87, ../scss/base/_grid.scss */ -.leader-7 { - margin-top: 7rem; -} - -/* line 88, ../scss/base/_grid.scss */ -.trailer-7 { - margin-bottom: 7rem; -} - -/* line 92, ../scss/base/_grid.scss */ -.right { - float: right !important; -} - -/* line 96, ../scss/base/_grid.scss */ -.left { - float: left !important; -} - -/* line 3, ../scss/base/_type.scss */ -body { - color: #4C5156; - font-family: "Clear Sans", "Helvetica", "Arial", sans-serif; -} - -/* line 8, ../scss/base/_type.scss */ -h1, h2, h3, h4, h5, h6 { - margin: 0; - padding-top: 1.25rem; - padding-bottom: 1.25rem; - font-family: "Clear Sans", "Helvetica", "Arial", sans-serif; - font-weight: 300; - line-height: 1.25rem; -} - -/* line 17, ../scss/base/_type.scss */ -h1 { - font-size: 2.75rem; - line-height: 2.5rem; -} - -/* line 18, ../scss/base/_type.scss */ -h2 { - font-size: 2.00rem; - line-height: 2.5rem; -} - -/* line 19, ../scss/base/_type.scss */ -h3 { - font-size: 1.75rem; - line-height: 2.5rem; -} - -/* line 20, ../scss/base/_type.scss */ -h4 { - font-size: 1.50rem; - line-height: 1.25rem; -} - -/* line 21, ../scss/base/_type.scss */ -h5 { - font-size: 1.25rem; - line-height: 1.25rem; -} - -/* line 22, ../scss/base/_type.scss */ -h6 { - font-size: 1.00rem; - line-height: 1.25rem; -} - -/* line 24, ../scss/base/_type.scss */ -blockquote { - font-family: "Clear Sans", "Helvetica", "Arial", sans-serif; - font-style: italic; - font-weight: 400; - font-size: 1.75rem; - color: #DDE3E8; -} - -/* line 32, ../scss/base/_type.scss */ -p { - margin: 0; - padding-bottom: 1.25rem; - font-size: 1.05rem; - line-height: 1.5em; - font-weight: 300; -} -/* line 38, ../scss/base/_type.scss */ -p.large { - font-size: 1.35rem; -} -/* line 41, ../scss/base/_type.scss */ -p.small { - font-size: .85rem; -} - -/* line 46, ../scss/base/_type.scss */ -b, strong { - font-weight: 700; -} - -/* line 50, ../scss/base/_type.scss */ -small { - font-size: .875rem; - color: #76899B; -} - -/* line 55, ../scss/base/_type.scss */ -a { - color: #1F85C4; - text-decoration: none; - -moz-transition: color 200ms linear; - -o-transition: color 200ms linear; - -webkit-transition: color 200ms linear; - transition: color 200ms linear; -} -/* line 59, ../scss/base/_type.scss */ -a:hover, a:focus { - color: #245070; - cursor: pointer; -} -/* line 63, ../scss/base/_type.scss */ -a:active, a:hover { - outline: 0; -} - -/* line 68, ../scss/base/_type.scss */ -ul, ol { - list-style-position: inside; - margin-top: 0; - padding: 0; -} -/* line 72, ../scss/base/_type.scss */ -ul ul, ul ol, ol ul, ol ol { - padding-left: 1.25em; -} - -/* line 77, ../scss/base/_type.scss */ -ul { - list-style-type: none; -} - -/* line 86, ../scss/base/_type.scss */ -code, kbd, pre, samp { - font-family: "Source Code Pro", "Inconsolata", "Consolas", "Courier New", monospace; -} - -/* line 90, ../scss/base/_type.scss */ -code { - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; - background: #FAFBFE; - padding: .2em; - border: 1px solid #e5eafa; - white-space: pre; - font-size: .75rem; - line-height: 1.5em; -} - -/* line 100, ../scss/base/_type.scss */ -pre { - padding: 1em; - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; - -webkit-tab-size: 4; - -moz-tab-size: 4; - -ms-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - background: #FAFBFE; - border: 1px solid #ECF0F3; - max-width: 100%; -} -/* line 109, ../scss/base/_type.scss */ -pre code { - background-color: #FAFBFE; - display: block; - overflow: auto; - word-wrap: normal; - border: none; -} - -/* line 118, ../scss/base/_type.scss */ -hr { - display: none; - margin-top: 2rem; - border: none; - border-top: 2rem solid #1F85C4; -} - -/* line 125, ../scss/base/_type.scss */ -.center-text { - text-align: center; -} - -/* line 129, ../scss/base/_type.scss */ -img::selection { - background: transparent; -} - -/* line 133, ../scss/base/_type.scss */ -img::moz-selection { - background: transparent; -} - -/* line 137, ../scss/base/_type.scss */ -table { - width: 100%; - background-color: #FFFFFF; - border-collapse: collapse; - border-spacing: 0; - border: 1px solid #e4e9ed; - text-align: left; -} -/* line 144, ../scss/base/_type.scss */ -table > thead { - background-color: #f3f5f8; - border-bottom: 1px solid #e4e9ed; -} -/* line 148, ../scss/base/_type.scss */ -table th, table td { - border-left: 1px solid #e4e9ed; - border-right: 1px solid #e4e9ed; - padding: 12px; -} -/* line 153, ../scss/base/_type.scss */ -table tr { - border-bottom: 1px solid #e4e9ed; - text-align: left; -} -/* line 156, ../scss/base/_type.scss */ -table tr:last-child { - border-bottom: none; -} -/* line 159, ../scss/base/_type.scss */ -table tr:nth-child(even) { - background-color: #FAFBFE; -} -/* line 161, ../scss/base/_type.scss */ -table tr:nth-child(even) td { - background-color: #FAFBFE; -} - -/* - -Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull - -*/ -/* line 7, ../scss/base/_code.scss */ -pre { - background: #002b36; - color: #839496; - /* Solarized Green */ - /* Solarized Cyan */ - /* Solarized Blue */ - /* Solarized Yellow */ - /* Solarized Orange */ - /* Solarized Red */ - /* Solarized Violet */ -} -/* line 11, ../scss/base/_code.scss */ -pre code { - background: #002b36; -} -/* line 15, ../scss/base/_code.scss */ -pre .comment, -pre .template_comment, -pre .diff .header, -pre .doctype, -pre .pi, -pre .lisp .string, -pre .javadoc { - color: #586e75; -} -/* line 26, ../scss/base/_code.scss */ -pre .keyword, -pre .winutils, -pre .method, -pre .addition, -pre .css .tag, -pre .request, -pre .status, -pre .nginx .title { - color: #859900; -} -/* line 38, ../scss/base/_code.scss */ -pre .number, -pre .command, -pre .string, -pre .tag .value, -pre .rules .value, -pre .phpdoc, -pre .tex .formula, -pre .regexp, -pre .hexcolor, -pre .link_url { - color: #2aa198; -} -/* line 52, ../scss/base/_code.scss */ -pre .title, -pre .localvars, -pre .chunk, -pre .decorator, -pre .built_in, -pre .identifier, -pre .vhdl .literal, -pre .id, -pre .css .function { - color: #268bd2; -} -/* line 65, ../scss/base/_code.scss */ -pre .attribute, -pre .variable, -pre .lisp .body, -pre .smalltalk .number, -pre .constant, -pre .class .title, -pre .parent, -pre .haskell .type, -pre .link_reference { - color: #b58900; -} -/* line 78, ../scss/base/_code.scss */ -pre .preprocessor, -pre .preprocessor .keyword, -pre .pragma, -pre .shebang, -pre .symbol, -pre .symbol .string, -pre .diff .change, -pre .special, -pre .attr_selector, -pre .subst, -pre .cdata, -pre .clojure .title, -pre .css .pseudo, -pre .header { - color: #cb4b16; -} -/* line 96, ../scss/base/_code.scss */ -pre .deletion, -pre .important { - color: #dc322f; -} -/* line 102, ../scss/base/_code.scss */ -pre .link_label { - color: #6c71c4; -} -/* line 106, ../scss/base/_code.scss */ -pre .tex .formula { - background: #073642; -} - -/* line 2, ../scss/base/_tabs.scss */ -.tab-group { - width: 100%; -} -/* line 4, ../scss/base/_tabs.scss */ -.tab-group .tab-nav { - width: 100%; - display: block; -} -/* line 8, ../scss/base/_tabs.scss */ -.tab-group .tab-nav .tab { - float: left; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - padding: 0.5em 1em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - background-color: #FAFBFE; - border: 1px solid #ECF0F3; - border-left: none; - -moz-border-radius: 0; - -webkit-border-radius: 0; - border-radius: 0; - background-image: none; -} -/* line 20, ../scss/base/_tabs.scss */ -.tab-group .tab-nav .tab:first-child { - -moz-border-radius: 3px 0 0 0; - -webkit-border-radius: 3px; - border-radius: 3px 0 0 0; - border-left: 1px solid #ECF0F3; -} -/* line 24, ../scss/base/_tabs.scss */ -.tab-group .tab-nav .tab:last-child { - -moz-border-radius: 0 3px 0 0; - -webkit-border-radius: 0; - border-radius: 0 3px 0 0; -} -/* line 27, ../scss/base/_tabs.scss */ -.tab-group .tab-nav .tab:hover { - background-color: #fcfdfe; -} -/* line 30, ../scss/base/_tabs.scss */ -.tab-group .tab-nav .tab.active { - border-bottom: 1px solid transparent; - background-color: #FFFFFF; -} -/* line 33, ../scss/base/_tabs.scss */ -.tab-group .tab-nav .tab.active:hover { - background-color: #FFFFFF; -} -/* line 39, ../scss/base/_tabs.scss */ -.tab-group .tab-contents { - width: 100%; - border: 1px solid #ECF0F3; - -moz-border-radius: 0 0 3px 3px; - -webkit-border-radius: 0; - border-radius: 0 0 3px 3px; - margin-top: -1px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} -/* line 45, ../scss/base/_tabs.scss */ -.tab-group .tab-contents .tab-content { - background-color: #FFFFFF; - display: none; - width: 100%; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - -moz-border-radius: 0 0 3px 3px; - -webkit-border-radius: 0; - border-radius: 0 0 3px 3px; - padding: 1em; - overflow: auto; -} -/* line 53, ../scss/base/_tabs.scss */ -.tab-group .tab-contents .tab-content.active { - display: block; -} -/* line 56, ../scss/base/_tabs.scss */ -.tab-group .tab-contents .tab-content code { - border: none; - overflow: initial; - background: transparent; -} -/* line 61, ../scss/base/_tabs.scss */ -.tab-group .tab-contents .tab-content pre { - background: transparent; - margin-bottom: 0; -} - -/* line 2, ../scss/base/_buttons.scss */ -.btn { - display: inline-block; - padding: 1em; - background-color: #1F85C4; - color: #ECF0F3; - border: none; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; - text-decoration: none; - font-family: "Source Code Pro", "Inconsolata", "Consolas", "Courier New", monospace; - font-size: 0.75em; - font-weight: 300; - cursor: pointer; - -moz-user-select: -moz-none; - -ms-user-select: none; - -webkit-user-select: none; - user-select: none; - -moz-transition: background-color 75ms linear, color 75ms linear; - -o-transition: background-color 75ms linear, color 75ms linear; - -webkit-transition: background-color 75ms linear, color 75ms linear; - transition: background-color 75ms linear, color 75ms linear; -} -/* line 16, ../scss/base/_buttons.scss */ -.btn:hover, .btn:focus { - background-color: #379fdf; - color: #FFFFFF; - outline: none; -} -/* line 21, ../scss/base/_buttons.scss */ -.btn.outline { - background: transparent; - color: #1F85C4; - border: 1px solid #1F85C4; -} -/* line 25, ../scss/base/_buttons.scss */ -.btn.outline:hover { - background-color: #379fdf; - color: #FFFFFF; - border: 1px solid #379fdf; -} -/* line 31, ../scss/base/_buttons.scss */ -.btn.dark-blue { - background: #245070; - color: #DDE3E8; -} -/* line 34, ../scss/base/_buttons.scss */ -.btn.dark-blue:hover { - background-color: #306c97; - color: #ECF0F3; -} -/* line 39, ../scss/base/_buttons.scss */ -.btn.white { - background: #FAFBFE; - color: #245070; -} -/* line 42, ../scss/base/_buttons.scss */ -.btn.white:hover { - background-color: #FFFFFF; - color: #1F85C4; -} - -/* line 12, ../scss/style.scss */ -[ng-cloak] { - display: none; -} - -/* line 14, ../scss/style.scss */ -.fullscreen { - padding: 8rem 0; -} -/* line 16, ../scss/style.scss */ -.fullscreen .darker-blue { - background-color: #234052; -} - -/* line 21, ../scss/style.scss */ -.darker-blue { - color: #76899B; - background-color: #234052; -} -/* line 24, ../scss/style.scss */ -.darker-blue a { - color: #379fdf; -} -/* line 26, ../scss/style.scss */ -.darker-blue a:hover { - color: #63b4e6; -} - -/* line 32, ../scss/style.scss */ -.off-white { - color: #4C5156; - background-color: #FAFBFE; -} - -/* line 37, ../scss/style.scss */ -.primary-navigation { - font-weight: 300; - position: fixed; - top: 0; - left: 0; - right: 0; - background-color: #FFFFFF; - border-bottom: 1px solid #DDE3E8; - padding: 1rem 0; - z-index: 10; -} -@media screen and (max-width: 662px) { - /* line 37, ../scss/style.scss */ - .primary-navigation { - position: absolute; - } -} - -/* line 53, ../scss/style.scss */ -.angular-dimple-logo { - float: left; -} -@media screen and (max-width: 960px) { - /* line 53, ../scss/style.scss */ - .angular-dimple-logo { - width: 100%; - text-align: center; - } -} - -/* line 61, ../scss/style.scss */ -.navigation-section { - width: 50%; - text-align: right; - float: right; -} -@media screen and (max-width: 960px) { - /* line 61, ../scss/style.scss */ - .navigation-section { - width: 100%; - text-align: center; - } -} - -/* line 71, ../scss/style.scss */ -.numbered { - text-align: center; - width: 2em; - height: 2em; - margin-right: 1em; - display: inline-block; - color: #FFFFFF; - font-family: "Source Code Pro", "Inconsolata", "Consolas", "Courier New", monospace; - font-size: .75rem; - line-height: 2em; - vertical-align: .25em; - background-color: #1F85C4; - -moz-border-radius: 50%; - -webkit-border-radius: 50%; - border-radius: 50%; -} - -/* line 86, ../scss/style.scss */ -.navigation { - position: fixed; - height: 100vh; - width: 14em; - padding: 1em; - background-color: #ededed; -} - -/* line 94, ../scss/style.scss */ -.sidebar { - position: absolute; - overflow: auto; - background-color: #FAFBFE; - z-index: 2; -} -/* line 99, ../scss/style.scss */ -.sidebar li { - margin-bottom: 1rem; - padding: .25rem 0; -} -/* line 103, ../scss/style.scss */ -.sidebar a { - width: 100%; -} -/* line 105, ../scss/style.scss */ -.sidebar a img { - float: left; - height: 3rem; - width: 3rem; - margin-right: 1rem; - background-color: #FFFFFF; - border: 2px solid #DDE3E8; - -moz-border-radius: 50%; - -webkit-border-radius: 50%; - border-radius: 50%; - -moz-box-shadow: 0 0 0 0 #DDE3E8; - -webkit-box-shadow: 0 0 0 0 #DDE3E8; - box-shadow: 0 0 0 0 #DDE3E8; - -moz-transition: all 200ms linear; - -o-transition: all 200ms linear; - -webkit-transition: all 200ms linear; - transition: all 200ms linear; -} -/* line 117, ../scss/style.scss */ -.sidebar a:hover img { - -moz-box-shadow: 0 0 0 4px #DDE3E8; - -webkit-box-shadow: 0 0 0 4px #DDE3E8; - box-shadow: 0 0 0 4px #DDE3E8; -} -/* line 122, ../scss/style.scss */ -.sidebar span { - display: inline-block; - line-height: 3rem; -} -@media screen and (max-width: 960px) { - /* line 94, ../scss/style.scss */ - .sidebar { - padding-top: 1rem; - position: relative; - height: auto; - } - /* line 132, ../scss/style.scss */ - .sidebar li { - display: inline-block; - padding-right: 1rem; - } -} - -/* line 138, ../scss/style.scss */ -.scroll-to-top { - position: fixed; -} -@media screen and (max-width: 960px) { - /* line 138, ../scss/style.scss */ - .scroll-to-top { - display: none; - } -} - -/* line 145, ../scss/style.scss */ -.chart { - position: absolute; - top: 0; - bottom: 0; - left: 14rem; - right: 0; - height: 100vh; - padding-left: 1rem; -} - -/* line 155, ../scss/style.scss */ -.chart-icon { - display: inline-block; - margin-bottom: 1rem; - background-color: #FFFFFF; - height: 6rem; - width: 6rem; - position: relative; - -moz-border-radius: 50%; - -webkit-border-radius: 50%; - border-radius: 50%; - cursor: pointer; - -moz-transition: all 200ms linear; - -o-transition: all 200ms linear; - -webkit-transition: all 200ms linear; - transition: all 200ms linear; - border: 1px solid #DDE3E8; -} -/* line 167, ../scss/style.scss */ -.chart-icon:hover { - background-color: #FAFBFE; -} -/* line 170, ../scss/style.scss */ -.chart-icon:before { - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: block; - -moz-border-radius: 50%; - -webkit-border-radius: 50%; - border-radius: 50%; - -moz-box-shadow: 0 0 0 6px #DDE3E8; - -webkit-box-shadow: 0 0 0 6px #DDE3E8; - box-shadow: 0 0 0 6px #DDE3E8; - -moz-transition: all 200ms linear; - -o-transition: all 200ms linear; - -webkit-transition: all 200ms linear; - transition: all 200ms linear; -} -/* line 183, ../scss/style.scss */ -.chart-icon:hover:before { - -moz-box-shadow: 0 0 0 12px #DDE3E8; - -webkit-box-shadow: 0 0 0 12px #DDE3E8; - box-shadow: 0 0 0 12px #DDE3E8; -} -/* line 187, ../scss/style.scss */ -.chart-icon img { - width: 100%; - height: auto; -} - -/* line 193, ../scss/style.scss */ -.footer { - position: relative; - z-index: 5; -} diff --git a/site/documentation/index.html b/site/documentation/index.html deleted file mode 100644 index d4919a1..0000000 --- a/site/documentation/index.html +++ /dev/null @@ -1,566 +0,0 @@ - - - - - - Angular Dimple Reference - - Documentation | Angular Dimple - - - - - - - - - - - - - - - - - -
-
- - - - -
- -
- - -
-
-

Angular Dimple Documentation

-

Angular Dimple is a series of Angular directives that help you create graphs and visualizations based on Dimple.js and d3. It's designed to create graphs as simply as possible from flat JSON data.

-
-

Graph

-

The <graph> directive is the wrapper directive for every type of chart in Angular Dimple. This is where you define what data to graph, as well as the size of the graph. The data property accepts a scope variable, and you should handle the variables creation in your own data service – Dimple Angular provides some simple methods of data filtering on a graph, but avoids intensive data compiling and manipulation.

-

This directive creates a div with a dynamic id, and initializes a new Dimple graph inside of it with several default options. Default heighth and width are 100% of the parent container.

-
<graph data='data' width='100%' height='100%'>
-
-<graph>
-

Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
attributedefaultdescription
datanoneRequired. Angular Dimple graphs accept flat JSON files as a $scope variable, set from a service. Or something
width100%Accepts a percent or a number. Sets the width of the chart, either in pixels or percent.
height100%Accepts a percent or a number. Sets the width of the chart, either in pixels or percent.
auto-styletrueBoolean. If false, no default dimple color, fill, or stroke styles will be applied to the graph. Allows for custom css styling.
-
-

X

-

The <x> directive sets up your x axis for the graph. Defining an x axis is required. Because it's graph. Be default, <x> will expect to tie to categorical data rather than measure data.

-
<x field='Month' type='Category' order-by='Date' group-by='Owner' title='Month, Year'></x>
-

Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
attributedefaultdescription
fieldnoneRequired. Field from your data to set as the X-Axis.
typeCategoryAccepts 'Category', 'Measure', or 'Percent'. Defines axis type.
order-bynoneField from your data to order the x axis by.
group-bynoneCreates small mutliple graphs grouped by a Categorical data field.
titlefield valueLabels the x axis. If 'null', will not draw a title for the axis.
-
-

Y

-

The <y> directive sets up your y axis for the graph. One y axis is requires, but you can set multiple axes of each type and the graph will display them. By default, <y> will expect to plot measure data rather than categorical data.

-

Changing the axis to to 'Percent' will tie the largest value on the defined field to 100%, and compare the rest of the values to that.

-
<y field='Unit Sales' type='Measure' order-by='Unit Sales' group-by='Owner' title='Sales'></x>
-

Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
attributedefaultdescription
fieldnoneRequired. Field from your data to set as the Y-Axis.
typeMeasureAccepts 'Category', 'Measure', or 'Percent'. Defines axis type.
order-bynoneField from your data to order the y axis by.
group-bynoneCreates small mutliple graphs grouped by a Categorical data field.
titlefield valueLabels the y-axis. If 'null', will not draw a title for the axis.
-
-

Legend

-

The <legend> directive creates a legend for your graph. The legend is generated from the plotted data.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
attributedefaultdescription
left10%Accepts a percent or a number. Sets position from left of chart in either pixels or percent.
top4%Accepts a percent or a number. Sets position from top of chart in either pixels or percent.
height100%Accepts a percent or a number. Sets height of legend in either pixels or percent.
width90%Accepts a percent or a number. Sets width of legend in either pixels or percent.
positionleftAccepts 'left' or 'right'. Set float position of legend.
-
-

Line

-

example

-

The <line> directive plots your data as a line. The field attribute (required) will define the field from your data to plot to the graph. The value attribute will plot a single line to your graph for that value in the field. You can include as many line elements in your graph as you have unique values. Leaving the value attribute blank will plot each unique value in the data set as it's own line.

-
<line field="Owner"></line>
-
-<!-- OR -->
-
-<line field="Owner" val="Aperture"></line>
-<line field="Owner" val="Black Mesa"></line>
-

Attributes

- - - - - - - - - - - - - - - - - - - - - -
attributedescription
fieldRequired. Field to plot as a line.
valueWill plot a line where the field is the given value.
filterAccepts a string 'field:value'. Will filter the data to only points where the defined field matches the defined value.
-
-

Bar

-

example

-

The <bar> directive plots your data as series of bars. The field attribute (required) will define the field from your data to plot to the graph. The value attribute will plot the bars to your graph for that value in the field. If no value is defined, or multiple bars are included in the graph, the data will plot as a stacked bar.

-
<bar field="Owner" val="Aperture"></bar>
-
-<!-- OR -->
-
-<bar field="Owner"></bar>
-

Attributes

- - - - - - - - - - - - - - - - - - - - - -
attributedescription
fieldRequired. Field to plot as a line.
valueWill plot a line where the field is the given value.
filterAccepts a string 'field:value'. Will filter the data to only points where the defined field matches the defined value.
-
-
-

Stacked Bar

-

example

-

The <bar> directive plots your data as series of bars. The field attribute (required) will define the field from your data to plot to the graph. The value attribute will plot the bars to your graph for that value in the field. If no value is defined, or multiple bars are included in the graph, the data will plot as a stacked bar.

-
<stacked-bar field="Owner" val="Aperture"></stacked-bar>
-
-<!-- OR -->
-
-<stacked-bar field="Owner"></stacked-bar>
-

Attributes

- - - - - - - - - - - - - - - - - - - - - -
attributedescription
fieldRequired. Field to plot as a line.
valueWill plot a line where the field is the given value.
filterAccepts a string 'field:value'. Will filter the data to only points where the defined field matches the defined value.
-
-

Area

-

example

-

The <area> directive plots your data to an area chart. The field attribute will define the field from your data to plot to the graph. The value attribute will plot a single area to your graph for that value in the field. You can include as many area elements in your graph as you have unique values.

-
<area field="Owner"></area>
-
-<!-- OR -->
-
-<area field="Owner" val="Aperture"></area>
-<area field="Owner" val="Black Mesa"></area>
-

Attributes

- - - - - - - - - - - - - - - - - - - - - -
attributedescription
fieldRequired. Field to plot as a line.
valueWill plot a line where the field is the given value.
filterAccepts a string 'field:value'. Will filter the data to only points where the defined field matches the defined value.
-
-

Stacked Area

-

example

-

The <stacked-area> directive plots your data to a stacked area chart. The field attribute will define the field from your data to plot to the graph. The value attribute will plot a single line to your graph for that value in the field. You can include as many area elements in your graph as you have unique values.

-
<stacked-area field="Owner"></stacked-area>
-
-<!-- OR -->
-
-<stacked-area field="Owner" val="Aperture"></stacked-area>
-<stacked-area field="Owner" val="Black Mesa"></stacked-area>
-

Expanded Stacked Area

-

example

-

Setting the y axis in a stacked area graph with create an expanded stacked area, where the total combined value of the field is equal to 100%.

-
<y field='Unit Sales' type="Percent"></y>
-<stacked-area field="Owner"></stacked-area>
-

Attributes

- - - - - - - - - - - - - - - - - - - - - -
attributedescription
fieldRequired. Field to plot as a line.
valueWill plot a line where the field is the given value.
filterAccepts a string 'field:value'. Will filter the data to only points where the defined field matches the defined value.
-
-

Scatter Plot

-

example

-

The <scatter-plot> directive plots your data to an scatter plot chart. The field attribute will define the field from your data to plot to the graph. The value attribute will plot a single scatter plot to your graph for that value in the field. You can include as many scatter plot elements in your graph as you have unique values.

-

Scatter Plots also use the series attribute. Series defines the categorical data to plot against the fields on the axes.

-
<scatter-plot field="Owner" series="SKU"></scatter-plot>
-
-<!-- OR -->
-
-<scatter-plot field="Channel" val="Supermarket" series="SKU" filter="Owner:Aperture"></scatter-plot>
-<scatter-plot field="Channel" val="Hypermarket" series="SKU" filter="Owner:Aperture"></scatter-plot>
-

Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - -
attributedescription
fieldRequired. Field to plot as a line.
valueWill plot a line where the field is the given value.
seriesAccepts a string 'field'.
filterAccepts a string 'field:value'. Will filter the data to only points where the defined field matches the defined value.
-
-

Ring

-

example

-

The ring directive creates pie and donut charts - but require a seperate type of axis that the other charts in Angular Dimple. A ring chart uses a <p></p> axis to plot a single measure. Adding multiple series to a ring chart will create concentric circles within the chart.

-

You can define both the thickness of the ring (as a percentage) and the diameter of the ring (as a percentage).

-
<r field="Unit Sales"></r>
-<ring field="Owner"></ring>
-
-<!-- OR -->
-
-<r field="Unit Sales"></r>
-<ring field="Owner" thickness="20"></ring>
-<ring field="Price Tier" thickness="20" diameter="75"></ring>>
-

Attributes

- - - - - - - - - - - - - - - - - - - - - -
attributedescription
fieldRequired. Field to plot as a ring.
thicknessAccepts a number. Width of ring, as percent of circle size.
diameterAccepts a number. Size of ring, as percent of circle size.
- -
-
- -
-
- - -
-
-
-
-

Made by EsriPDX

- -
-
-
-
- - - - - diff --git a/site/documentation/partials/animation-test.html b/site/documentation/partials/animation-test.html deleted file mode 100644 index ec6b134..0000000 --- a/site/documentation/partials/animation-test.html +++ /dev/null @@ -1,12 +0,0 @@ -
- - - - - - -
- - diff --git a/site/documentation/partials/area.html b/site/documentation/partials/area.html deleted file mode 100644 index 114eba2..0000000 --- a/site/documentation/partials/area.html +++ /dev/null @@ -1,48 +0,0 @@ -

- Area Graph - - Area Graph Documentation - -

- -
- - - - - - -
- -
<!-- Default -->
-<div class="white-panel">
- <graph data="graphData" width="100%" height="600px">
-    <x field="Month" order-by="Date"></x>
-    <y field="Unit Sales"></y>
-    <legend></legend>
-    <area field="Owner"></area>
-  </graph>
-</div>
-

-
- - - - - - - - -
- -
<!-- Grouped Area -->
-<div class="white-panel">
- <graph data="graphData" width="100%" height="600px">
-    <x group-by="Owner" field="Month" order-by="Date" title="Cream, Get the Money"></x>
-    <y field="Unit Sales" type="Measure" title="Dollah Dolah Bill Yall"></y>
-
-    <area field="Owner" value="Aperture"></area>
-    <area field="Owner" value="Black Mesa"></area>
-    <area field="Owner" value="Tyrell Corp"></area>
-  </graph>
-</div>
diff --git a/site/documentation/partials/bar-graph.html b/site/documentation/partials/bar-graph.html deleted file mode 100644 index 9c526e6..0000000 --- a/site/documentation/partials/bar-graph.html +++ /dev/null @@ -1,35 +0,0 @@ -

- Bar Graph - - Bar Graph Documentation - -

- -
- - - - - - -
- -
<graph data="graphData" width="100%" height="600px">
-  <x field="Month" order-by="Date"></x>
-  <y field="Unit Sales"></y>
-  <legend></legend>
-  <bar field="Owner" value="Black Mesa"></bar>
-</graph>
-
- - - - - -
- -
<graph data="graphData" width="100%" height="600px">
-  <x group-by="Owner" field="Month" order-by="Date" type="Category" title="Cream, Get the Money"></x>
-  <y field="Unit Sales" type="Measure" title="Dollah Dolah Bill Yall"></y>
-  <bar field="Owner"></bar>
-</graph>
diff --git a/site/documentation/partials/expanded-stacked-area.html b/site/documentation/partials/expanded-stacked-area.html deleted file mode 100644 index e896d54..0000000 --- a/site/documentation/partials/expanded-stacked-area.html +++ /dev/null @@ -1,37 +0,0 @@ -

- Expanded Stacked Area - - Expanded Stacked Area Documentation - -

- - - - - - - - -
<!-- Default Stacked -->
-<graph data="graphData" width="100%" height="600px">
-  <x field="Month" order-by="Date"></x>
-  <y field="Unit Sales" type="Percent"></y>
-  <legend></legend>
-  <stacked-area field="Owner"></area>
-</graph>
- - - - - - - - -
<!-- Grouped, with Attrs -->
-<graph data="graphData" width="100%" height="600px">
-  <x group-by="Owner" field="Month" order-by="Date" type="Category" title="Cream, Get the Money"></x>
-  <y field="Unit Sales" type="Percent" title="Dollah Dolah Bill Yall"></y>
-  <stacked-area field="Owner" value="Aperture" series='SKU'></stacked-area>
-  <stacked-area field="Owner" value="Black Mesa" series='SKU'></stacked-area>
-  <stacked-area field="Owner" value="Tyrell Corp" series='SKU'></stacked-area>
-</graph>
diff --git a/site/documentation/partials/homepage-code.html b/site/documentation/partials/homepage-code.html deleted file mode 100644 index 20e0500..0000000 --- a/site/documentation/partials/homepage-code.html +++ /dev/null @@ -1,66 +0,0 @@ -

Top Tabbed Code Sample:

-
<graph data="graphData" height="400" width="100%">
-  <x field="Month" order-by="Date"></x>
-  <y field="Unit Sales"></y>
-  <legend></legend>
-  <line field="Owner" value="Aperture"></line>
-</graph>
-

index.html:

-
<!DOCTYPE html>
-<html>
-  <head>
-    <script src="http://d3js.org/d3.v3.min.js"></script>
-    <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
-  </head>
-  <body ng-app="myApp">
-    <div ng-controller="myController">
-      <graph data="graphData">
-        <x field="Month" order-by="Date"></x>
-        <y field="Unit Sales"></y>
-        <line field="Owner" value="Aperture"></line>
-      </graph>
-    </div>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>
-    <script src="angular-dimple.js"></script>
-    <script src="app.js"></script>
-  </body>
-</html>
-

app.js

-
angular.module('myApp', [
-  'angular-dimple'
-])
-
-.controller('myController', ['$scope', 'dataService', function($scope, dataService) {
-  dataService.getData().then(function(response) {
-    $scope.graphData = response.data;
-  });
-}])
-
-.service('dataService', ['$http', function($http) {
-  return {
-    getData: function() {
-      return $http.get('data.json');
-    }
-  };
-}]);
-

data.json

-
[
-  {
-    "Date": "01\/01\/2011",
-    "Month": "Jan-11",
-    "Owner": "Aperture",
-    "Unit Sales": "1765"
-  },
-  {
-    "Date": "02\/01\/2011",
-    "Month": "Jan-11",
-    "Owner": "Aperture",
-    "Unit Sales": "1899"
-  },
-  {
-    "Date": "02\/01\/2011",
-    "Month": "Jan-11",
-    "Owner": "Aperture",
-    "Unit Sales": "1565"
-  }
-]
diff --git a/site/documentation/partials/line-graph.html b/site/documentation/partials/line-graph.html deleted file mode 100644 index c8f190d..0000000 --- a/site/documentation/partials/line-graph.html +++ /dev/null @@ -1,60 +0,0 @@ -

- Line Graph - - Line Graph Documentation - -

- -
- - - - - - -
- -
<!-- Default -->
-<graph data="graphData" width="100%" height="600px">
-  <x field="Month" order-by="Date"></x>
-  <y field="Unit Sales"></y>
-  <legend></legend>
-  <line field="Owner"></line>
-</graph>
-
- - - - - - - - -
- -
<!-- With Attrs -->
-<graph data="graphData" width="100%" height="600px">
-  <x group-by="Owner" field="Month" order-by="Date" type="Category" title="Cream, Get the Money"></x>
-  <y field="Unit Sales" type="Measure" title="Dollah Dolah Bill Yall"></y>
-  <legend left="0" top="4%" height="100%" width="90%" position="right"> </legend>
-  <line field="Owner" value="Aperture"></line>
-  <line field="Owner" value="Black Mesa"></line>
-  <line field="Owner" value="Tyrell Corp"></line>
-</graph>
-

Inside ng-repeat

-
- - - - - - -
- -
<!-- Default -->
-<graph data="graphData" width="100%" height="600px">
-  <x field="Month" order-by="Date"></x>
-  <y field="Unit Sales"></y>
-  <legend></legend>
-  <line field="Owner"></line>
-</graph>
diff --git a/site/documentation/partials/ring.html b/site/documentation/partials/ring.html deleted file mode 100644 index 2134323..0000000 --- a/site/documentation/partials/ring.html +++ /dev/null @@ -1,44 +0,0 @@ -

- Ring Chart - - Ring Chart Documentation - -

- -
- - - - - -
- -
<!-- Default Stacked -->
-  <graph data="graphData" width="100%" height="600px">
-    <r field="Unit Sales"></r>
-    <legend></legend>
-    <ring field="Owner" thickness="20"></ring>
-  </graph>
-

- Multi Ring Chart - - Ring Chart Documentation - -

- -
- - - - - - -
- -
<!-- Default Stacked -->
-  <graph data="graphData" width="100%" height="600px">
-    <r field="Unit Sales"></r>
-    <legend></legend>
-    <ring field="Owner" thickness="20"></ring>
-      <ring field="Price Tier" thickness="20" diameter="75"></ring>
-  </graph>
diff --git a/site/documentation/partials/scatter-plot.html b/site/documentation/partials/scatter-plot.html deleted file mode 100644 index 1d8d70c..0000000 --- a/site/documentation/partials/scatter-plot.html +++ /dev/null @@ -1,78 +0,0 @@ -

- Scatter Plot - - Scatter Plot Documentation - -

- -
- - - - - - -
- -
<!-- With Attrs -->
-<graph data="graphData" width="100%" height="600px">
-  <x field="Operating Profit" type="Measure"></x>
-  <y field="Unit Sales" type="Measure"></y>
-  <legend></legend>
-  <!-- plot all of Aperture's SKU's against profit and sales
-       'series' is the data you'd like to plot on the graph -->
-  <scatter-plot field="Owner" value="Aperture" series="SKU"></scatter-plot>
-</graph>
-
- - - - - - -
- -
<graph data="graphData" width="100%" height="600px">
-  <x field="Operating Profit" type="Measure" title="Profit, Aperture"></x>
-  <y field="Unit Sales" type="Measure"></y>
-  <legend></legend>
-  <!-- plot the SKU of each channel as a different color,
-       using 'filter' to only show entries for Aperture. -->
-  <scatter-plot field="Channel" series="SKU" filter="Owner:Aperture"></scatter-plot>
-</graph>
-
- - - - - -
- -
<graph data="simpleData" width="100%" height="600px">
-  <x field="Height" type="Measure"></x>
-  <y field="Weight" type="Measure"></y>
-  <!-- pass a 'label' to the scatter-plot to group entries,
-       here, all data points are plotted but they're colored the same -->
-  <scatter-plot field="Height" series="Weight" label="Group A"></scatter-plot>
-</graph>
-
[
-  {
-    "Height": 64,
-    "Weight": 190
-  },{
-    "Height": 68,
-    "Weight": 195
-  },{
-    "Height": 69,
-    "Weight": 198
-  },{
-    "Height": 70,
-    "Weight": 205
-  },{
-    "Height": 67,
-    "Weight": 198
-  },{
-    "Height": 76,
-    "Weight": 195
-  }
-]
diff --git a/site/documentation/partials/stacked-area.html b/site/documentation/partials/stacked-area.html deleted file mode 100644 index 5037028..0000000 --- a/site/documentation/partials/stacked-area.html +++ /dev/null @@ -1,63 +0,0 @@ -

- Stacked Area - - Stacked Area Documentation - -

- -
- - - - - - -
- -
<!-- Default Stacked -->
-<graph data="graphData">
-  <x field="Month" order-by="Date"></x>
-  <y field="Unit Sales"></y>
-  <legend></legend>
-  <stacked-area field="Owner"></area>
-</graph>
-
- - - - - - - -
- -
<!-- Grouped, with Attrs -->
-<graph data="graphData" width="100%" height="600px">
-  <x group-by="Owner" field="Month" order-by="Date" type="Category" title="Cream, Get the Money"></x>
-  <y field="Unit Sales" type="Measure" title="Dollah Dolah Bill Yall"></y>
-  <stacked-area field="Owner" value="Aperture" series='SKU' series-val="Theta Pack 6 Standard, Theta Pacl 18 Standard"></stacked-area>
-  <stacked-area field="Owner" value="Black Mesa" series='SKU'></stacked-area>
-  <stacked-area field="Owner" value="Tyrell Corp" series='SKU'></stacked-area>
-</graph>
-

- Expanded Stacked Area - - Stacked Area Documentation - -

- -
- - - - - - -
- -
<graph data="graphData" width="100%" height="600px">
-  <x field="Month" order-by="Date"></x>
-  <y field="Unit Sales" type="Percent"></y>
-  <legend></legend>
-  <stacked-area field="Owner"></area>
-</graph>
diff --git a/site/documentation/partials/stacked-bar-graph.html b/site/documentation/partials/stacked-bar-graph.html deleted file mode 100644 index ccb3aae..0000000 --- a/site/documentation/partials/stacked-bar-graph.html +++ /dev/null @@ -1,36 +0,0 @@ -

- Stacked Bar - - Stacked Bar Documentatoin - -

- -
- - - - - - -
- -
<!-- As Stacked Bar -->
-<graph data="graphData" width="100%" height="600px">
-  <x field="Month" order-by="Date"></x>
-  <y field="Unit Sales"></y>
-  <legend></legend>
-  <stacked-bar field="Owner"></stacked-bar>
-</graph>
-
- - - - - -
- -
<graph data="graphData" width="100%" height="600px">
-  <x group-by="Owner" field="Month" order-by="Date" type="Category" title="Cream, Get the Money"></x>
-  <y field="Unit Sales" type="Measure" title="Dollah Dolah Bill Yall"></y>
-  <stacked-bar field="Owner" series='SKU'></stacked-bar>
-</graph>
diff --git a/site/examples/index.html b/site/examples/index.html deleted file mode 100644 index 39b6ab4..0000000 --- a/site/examples/index.html +++ /dev/null @@ -1,152 +0,0 @@ - - - - - - Examples | Angular Dimple - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - -
- -
- - -
-
-
- -
-
- - -
-
-
-
-

Made by EsriPDX

- - -
-
-
-
- - - - - - - - - - - - - - - - - - diff --git a/site/favicon.ico b/site/favicon.ico deleted file mode 100644 index f21c6cf..0000000 Binary files a/site/favicon.ico and /dev/null differ diff --git a/site/index.html b/site/index.html deleted file mode 100644 index d43b30d..0000000 --- a/site/index.html +++ /dev/null @@ -1,348 +0,0 @@ - - - - - - Angular Dimple - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - -
-
-
-
-

The Power of Angular Directives

-

With Angular directives, Angular-Dimple allows you to create graphs and visualizations clearly and declaratively. Want a line graph? Just use a <line> element inside of a <graph> element. Add some axes and you're done.

-
-
-
- -
-
-
<graph data="graphData" height="400">
-  <x field="Month" order-by="Date"></x>
-  <y field="Unit Sales"></y>
-  <legend></legend>
-  <line field="Owner" value="Aperture"></line>
-</graph>
-
-
- - - - - - -
-
-
-
-
-
-
- - -
-
-
- - - -

- Line -

-

- Examples | - Reference -

-
-
- - - -

- Area -

-

- Examples | - Reference -

-
-
- - - -

- Stacked Area -

-

- Examples | - Reference -

-
-
- - - -

- Bar -

-

- Examples | - Reference -

-
-
- - - -

- Stacked Bar -

-

- Examples | - Reference -

-
-
- - - -

- Scatter Plot -

-

- Examples | - Reference -

-
- -
- - - -

- Ring -

-

- Examples | - Reference -

-
- -
-
- - -
-
-
-
-

Get Started

-

1Create a basic Angular app

-

2Include Angular-Dimple as a dependency

-

3Add data

-
-
-
- -
-
-
<!DOCTYPE html>
-<html>
-  <head>
-    <script src="http://d3js.org/d3.v3.min.js"></script>
-    <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
-  </head>
-  <body ng-app="myApp">
-    <div ng-controller="myController">
-      <graph data="graphData">
-        <x field="Month" order-by="Date"></x>
-        <y field="Unit Sales"></y>
-        <line field="Owner" value="Aperture"></line>
-      </graph>
-    </div>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>
-    <script src="angular-dimple.js"></script>
-    <script src="app.js"></script>
-  </body>
-</html>
-
-
-
angular.module('myApp', [
-  'angular-dimple'
-])
-
-.controller('myController', ['$scope', 'dataService', function($scope, dataService) {
-  dataService.getData().then(function(response) {
-    $scope.graphData = response.data;
-  });
-}])
-
-.service('dataService', ['$http', function($http) {
-  return {
-    getData: function() {
-      return $http.get('data.json');
-    }
-  };
-}]);
-
-
-
[
-  {
-    "Date": "01\/01\/2011",
-    "Month": "Jan-11",
-    "Owner": "Aperture",
-    "Unit Sales": "1765"
-  },
-  {
-    "Date": "02\/01\/2011",
-    "Month": "Jan-11",
-    "Owner": "Aperture",
-    "Unit Sales": "1899"
-  },
-  {
-    "Date": "02\/01\/2011",
-    "Month": "Jan-11",
-    "Owner": "Aperture",
-    "Unit Sales": "1565"
-  }
-]
-
-
-
-
-
-
-
- - -
-
-
-
-

Made by EsriPDX

- - -
-
-
-
- - - - - - - - - - - - diff --git a/site/js/home.js b/site/js/home.js deleted file mode 100644 index a19090c..0000000 --- a/site/js/home.js +++ /dev/null @@ -1,18 +0,0 @@ -angular.module('homeApp', [ - 'angular-dimple' -]) - -.controller('homeController', ['$scope', 'dataService', function($scope, dataService) { - dataService.getData().then(function(response) { - $scope.graphData = response.data; - }); - T.init(); -}]) - -.service('dataService', ['$http', function($http) { - return { - getData: function() { - return $http.get('data/example_data.json'); - } - }; -}]); \ No newline at end of file diff --git a/site/js/lib/angular-dimple.js b/site/js/lib/angular-dimple.js deleted file mode 100644 index 7fcdb55..0000000 --- a/site/js/lib/angular-dimple.js +++ /dev/null @@ -1,564 +0,0 @@ -/*! Angular-Dimple - 1.1.2 - 2014-09-26 -* https://github.com/esripdx/angular-dimple -* Licensed ISC */ -angular.module('angular-dimple', [ - 'angular-dimple.graph', - 'angular-dimple.legend', - 'angular-dimple.x', - 'angular-dimple.y', - 'angular-dimple.r', - 'angular-dimple.line', - 'angular-dimple.bar', - 'angular-dimple.stacked-bar', - 'angular-dimple.area', - 'angular-dimple.stacked-area', - 'angular-dimple.scatter-plot', - 'angular-dimple.ring' -]) - -.constant('MODULE_VERSION', '0.0.1') - -.value('defaults', { - foo: 'bar' -}); -angular.module('angular-dimple.area', []) - -.directive('area', [function () { - return { - restrict: 'E', - replace: true, - require: ['area', '^graph'], - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - }], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var areaController = $controllers[0]; - var chart = graphController.getChart(); - - function addArea () { - if ($attrs.value) { - area = chart.addSeries([$attrs.field], dimple.plot.area); - graphController.filter($attrs); - area.lineMarkers = true; - } else { - var values = dimple.getUniqueValues($scope.data, $attrs.field); - angular.forEach(values, function(value){ - area = chart.addSeries([$attrs.field], dimple.plot.area); - graphController.filter($attrs); - area.lineMarkers = true; - }); - } - graphController.draw(); - } - - $scope.$watch('dataReady', function(newValue, oldValue) { - if (newValue === true) { - addArea(); - } - }); - } - }; -}]); - - -angular.module('angular-dimple.bar', []) - -.directive('bar', [function () { - return { - restrict: 'E', - replace: true, - require: ['bar', '^graph'], - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - }], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var lineController = $controllers[0]; - var chart = graphController.getChart(); - - function addBar () { - var filteredData; - bar = chart.addSeries([$attrs.field], dimple.plot.bar); - graphController.filter($attrs); - graphController.draw(); - } - - - - $scope.$watch('dataReady', function(newValue, oldValue) { - if (newValue === true) { - addBar(); - } - }); - } - }; -}]); -angular.module('angular-dimple.graph', []) - -.directive('graph', [function () { - return { - restrict: 'E', - replace: true, - scope: { - data: '=', - }, - require: ['graph'], - transclude: true, - link: function (scope, element, attrs, controllers, transclude) { - var graphController = controllers[0]; - graphController._createChart(); - scope.dataReady = false; - scope.filters = []; - - var chart = graphController.getChart(); - var transition; - if (attrs.transition) { - transition = attrs.transition; - } else { - transition = 750; - } - - scope.$watch('data', function(newValue, oldValue) { - if (newValue) { - scope.dataReady = true; - graphController.setData(); - chart.draw(transition); - } - }); - - transclude(scope, function(clone){ - element.append(clone); - }); - }, - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - var chart; - - this._createChart = function () { - // create an svg element - var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - if ($attrs.width) { - svg.setAttribute('width', $attrs.width); - } else { - svg.setAttribute('width', '100%'); - } - if ($attrs.height) { - svg.setAttribute('height', $attrs.height); - } else { - svg.setAttribute('height', '100%'); - } - - // end the svg to this - $element.append(svg); - - // create the dimple chart using the d3 selection of our element - chart = new dimple.chart(d3.select(svg)); - - if ($attrs.margin) { - chart.setMargins($attrs.margin); - } else { - chart.setMargins(60, 60, 20, 40); - } - - // auto style - var autoStyle = $attrs.autoStyle === 'false' ? true : false; - chart.noFormats = autoStyle; - }; - - this.getChart = function () { - return chart; - }; - - this.setData = function () { - chart.data = $scope.data; - }; - - this.draw = function () { - chart.draw(); - }; - - this.getID = function () { - return id; - }; - - this.filter = function (attrs) { - if (attrs.value !== undefined) { - $scope.filters.push(attrs.value); - } - if ($scope.filters.length) { - chart.data = dimple.filterData($scope.data, attrs.field, $scope.filters); - } - - if (attrs.filter !== undefined) { - console.log("i see a filter"); - var thisFilter = attrs.filter.split(':'); - var field = thisFilter[0]; - var value = [thisFilter[1]]; - chart.data = dimple.filterData($scope.data, field, value); - } - }; - - }] - }; -}]); -angular.module('angular-dimple.legend', []) - -.directive('legend', [function () { - return { - restrict: 'E', - replace: true, - require: ['legend', '^graph'], - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - }], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var chart = graphController.getChart(); - - function addLegend () { - var left = $attrs.left ? $attrs.left : "10%"; - var top = $attrs.top ? $attrs.top : "4%"; - var height = $attrs.height ? $attrs.height : "10%"; - var width = $attrs.width ? $attrs.width : "90%"; - var position = $attrs.position ? $attrs.position : 'left'; - chart.addLegend(left, top, width, height, position); - } - - $scope.$watch('dataReady', function(newValue, oldValue) { - if (newValue === true) { - addLegend(); - } - }); - } - }; -}]); -angular.module('angular-dimple.line', []) - -.directive('line', [function () { - return { - restrict: 'E', - replace: true, - require: ['line', '^graph'], - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - }], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var chart = graphController.getChart(); - var drawn = false; - - function addLine () { - var filteredData; - line = chart.addSeries([$attrs.field], dimple.plot.line); - graphController.filter($attrs); - line.lineMarkers = true; - graphController.draw(); - } - - $scope.$watch('dataReady', function(newValue, oldValue) { - if (newValue === true) { - addLine(); - } - }); - - } - }; -}]); -angular.module('angular-dimple.r', []) - -.directive('r', [function () { - return { - restrict: 'E', - replace: true, - require: ['r', '^graph'], - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - }], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var chart = graphController.getChart(); - - function addAxis () { - r = chart.addMeasureAxis('p', $attrs.field); - - if ($attrs.title && $attrs.title !== "null") { - r.title = $attrs.title; - } else if ($attrs.title == "null") { - r.title = null; - } - } - - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { - addAxis(); - } - }); - } - }; -}]); -angular.module('angular-dimple.ring', []) - -.directive('ring', [function () { - return { - restrict: 'E', - replace: true, - require: ['ring', '^graph'], - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - }], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var areaController = $controllers[0]; - var chart = graphController.getChart(); - - function setData (data, series) { - series.data = data; - } - - function addRing () { - var thickness; - ring = chart.addSeries([$attrs.field], dimple.plot.pie); - if ($attrs.thickness && !$attrs.diameter) { - thickness = (100 - $attrs.thickness) + '%'; - ring.innerRadius = thickness; - } else if ($attrs.thickness && $attrs.diameter) { - thickness = ($attrs.diameter - $attrs.thickness) + '%'; - ring.innerRadius = thickness; - } else { - ring.innerRadius = "50%"; - } - - if ($attrs.diameter) { - ring.outerRadius = ($attrs.diameter) + '%'; - } - graphController.filter($attrs); - graphController.draw(); - } - - $scope.$watch('data', function(newValue, oldValue) { - if (newValue) { - addRing(); - } - }); - } - }; -}]); - - -angular.module('angular-dimple.scatter-plot', []) - -.directive('scatterPlot', [function () { - return { - restrict: 'E', - replace: true, - require: ['scatterPlot', '^graph'], - controller: [function() {}], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var chart = graphController.getChart(); - - function addScatterPlot () { - var array = []; - - if ($attrs.series){ array.push($attrs.series); } - array.push($attrs.field); - if ($attrs.label || $attrs.label === '') { array.push($attrs.label); } - scatterPlot = chart.addSeries(array, dimple.plot.bubble); - scatterPlot.aggregate = dimple.aggregateMethod.avg; - graphController.filter($attrs); - graphController.draw(); - } - - $scope.$watch('dataReady', function(newValue, oldValue) { - if (newValue === true) { - addScatterPlot(); - } - }); - } - }; -}]); -angular.module('angular-dimple.stacked-area', []) - -.directive('stackedArea', [function () { - return { - restrict: 'E', - replace: true, - require: ['stackedArea', '^graph'], - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - }], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var areaController = $controllers[0]; - var chart = graphController.getChart(); - - function addArea () { - if ($attrs.series) { - area = chart.addSeries([$attrs.series], dimple.plot.area); - } else { - area = chart.addSeries([$attrs.field], dimple.plot.area); - } - graphController.filter($attrs); - area.lineMarkers = false; - graphController.draw(); - } - - $scope.$watch('dataReady', function(newValue, oldValue) { - if (newValue === true) { - addArea(); - } - }); - } - }; -}]); -angular.module('angular-dimple.stacked-bar', []) - -.directive('stackedBar', [function () { - return { - restrict: 'E', - replace: true, - require: ['stackedBar', '^graph'], - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - }], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var lineController = $controllers[0]; - var chart = graphController.getChart(); - - function addBar () { - if ($attrs.series) { - bar = chart.addSeries([$attrs.series], dimple.plot.bar); - } else { - bar = chart.addSeries([$attrs.field], dimple.plot.bar); - } - graphController.filter($attrs); - graphController.draw(); - } - - $scope.$watch('dataReady', function(newValue, oldValue) { - if (newValue === true) { - addBar(); - } - }); - } - }; -}]); -angular.module('angular-dimple.x', []) - -.directive('x', [function () { - return { - restrict: 'E', - replace: true, - require: ['x', '^graph'], - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - }], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var chart = graphController.getChart(); - - function addAxis () { - if ($attrs.groupBy) { - if ($attrs.type == 'Measure') { - x = chart.addMeasureAxis('x', [$attrs.groupBy, $attrs.field]); - } else if ($attrs.type == 'Percent') { - x = chart.addPctAxis('x', $attrs.field); - } else if ($attrs.type == 'Time') { - x = chart.addTimeAxis('x', $attrs.field); - if ($attrs.format) { - x.tickFormat = $attrs.format; - } - } else { - x = chart.addCategoryAxis('x', [$attrs.groupBy, $attrs.field]); - } - if ($attrs.orderBy) { - x.addGroupOrderRule($attrs.orderBy); - } - } else { - if ($attrs.type == 'Measure') { - x = chart.addMeasureAxis('x', $attrs.field); - } else if ($attrs.type == 'Percent') { - x = chart.addPctAxis('x', $attrs.field); - } else if ($attrs.type == 'Time') { - x = chart.addTimeAxis('x', $attrs.field); - if ($attrs.format) { - x.tickFormat = $attrs.format; - } - } else { - x = chart.addCategoryAxis('x', $attrs.field); - } - if ($attrs.orderBy) { - x.addOrderRule($attrs.orderBy); - } - } - - if ($attrs.title && $attrs.title !== "null") { - x.title = $attrs.title; - } else if ($attrs.title == "null") { - x.title = null; - } - } - - $scope.$watch('dataReady', function(newValue, oldValue) { - if (newValue === true) { - addAxis(); - } - }); - } - }; -}]); -angular.module('angular-dimple.y', []) - -.directive('y', [function () { - return { - restrict: 'E', - replace: true, - require: ['y', '^graph'], - controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { - }], - link: function($scope, $element, $attrs, $controllers) { - var graphController = $controllers[1]; - var chart = graphController.getChart(); - - function addAxis () { - if ($attrs.groupBy) { - if ($attrs.type == 'Category') { - y = chart.addCategoryAxis('y', $attrs.field); - } else if ($attrs.type == 'Percent') { - y = chart.addPctAxis('y', $attrs.field); - } else if ($attrs.type == 'Time') { - y = chart.addTimeAxis('x', $attrs.field); - if ($attrs.format) { - y.tickFormat = $attrs.format; - } - } else { - y = chart.addMeasureAxis('y', $attrs.field); - } - if ($attrs.orderBy) { - y.addGroupOrderRule($attrs.orderBy); - } - } else { - if ($attrs.type == 'Category') { - y = chart.addCategoryAxis('y', $attrs.field); - } else if ($attrs.type == 'Percent') { - y = chart.addPctAxis('y', $attrs.field); - } else if ($attrs.type == 'Time') { - y = chart.addTimeAxis('x', $attrs.field); - if ($attrs.format) { - y.tickFormat = $attrs.format; - } - } else { - y = chart.addMeasureAxis('y', $attrs.field); - } - if ($attrs.orderBy) { - y.addOrderRule($attrs.orderBy); - } - } - - if ($attrs.title && $attrs.title !== "null") { - y.title = $attrs.title; - } else if ($attrs.title == "null") { - y.title = null; - } - } - - $scope.$watch('dataReady', function(newValue, oldValue) { - if (newValue === true) { - addAxis(); - } - }); - } - }; -}]); \ No newline at end of file diff --git a/site/js/lib/angular-dimple.min.js b/site/js/lib/angular-dimple.min.js deleted file mode 100644 index 2adacbd..0000000 --- a/site/js/lib/angular-dimple.min.js +++ /dev/null @@ -1 +0,0 @@ -angular.module("angular-dimple",["angular-dimple.graph","angular-dimple.legend","angular-dimple.x","angular-dimple.y","angular-dimple.r","angular-dimple.line","angular-dimple.bar","angular-dimple.stacked-bar","angular-dimple.area","angular-dimple.stacked-area","angular-dimple.scatter-plot","angular-dimple.ring"]).constant("MODULE_VERSION","0.0.1").value("defaults",{foo:"bar"}),angular.module("angular-dimple.area",[]).directive("area",[function(){return{restrict:"E",replace:!0,require:["area","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){if(c.value)area=g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!0;else{var b=dimple.getUniqueValues(a.data,c.field);angular.forEach(b,function(){area=g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!0})}f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.bar",[]).directive("bar",[function(){return{restrict:"E",replace:!0,require:["bar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.graph",[]).directive("graph",[function(){return{restrict:"E",replace:!0,scope:{data:"="},require:["graph"],transclude:!0,link:function(a,b,c,d,e){var f=d[0];f._createChart(),a.dataReady=!1,a.filters=[];var g,h=f.getChart();g=c.transition?c.transition:750,a.$watch("data",function(b){b&&(a.dataReady=!0,f.setData(),h.draw(g))}),e(a,function(a){b.append(a)})},controller:["$scope","$element","$attrs",function(a,b,c){var d;this._createChart=function(){var a=document.createElementNS("http://www.w3.org/2000/svg","svg");c.width?a.setAttribute("width",c.width):a.setAttribute("width","100%"),c.height?a.setAttribute("height",c.height):a.setAttribute("height","100%"),b.append(a),d=new dimple.chart(d3.select(a)),c.margin?d.setMargins(c.margin):d.setMargins(60,60,20,40);var e="false"===c.autoStyle?!0:!1;d.noFormats=e},this.getChart=function(){return d},this.setData=function(){d.data=a.data},this.draw=function(){d.draw()},this.getID=function(){return id},this.filter=function(b){if(void 0!==b.value&&a.filters.push(b.value),a.filters.length&&(d.data=dimple.filterData(a.data,b.field,a.filters)),void 0!==b.filter){console.log("i see a filter");var c=b.filter.split(":"),e=c[0],f=[c[1]];d.data=dimple.filterData(a.data,e,f)}}}]}}]),angular.module("angular-dimple.legend",[]).directive("legend",[function(){return{restrict:"E",replace:!0,require:["legend","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a=c.left?c.left:"10%",b=c.top?c.top:"4%",d=c.height?c.height:"10%",e=c.width?c.width:"90%",f=c.position?c.position:"left";g.addLegend(a,b,e,d,f)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.line",[]).directive("line",[function(){return{restrict:"E",replace:!0,require:["line","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){line=g.addSeries([c.field],dimple.plot.line),f.filter(c),line.lineMarkers=!0,f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.r",[]).directive("r",[function(){return{restrict:"E",replace:!0,require:["r","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){r=g.addMeasureAxis("p",c.field),c.title&&"null"!==c.title?r.title=c.title:"null"==c.title&&(r.title=null)}var f=d[1],g=f.getChart();a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.ring",[]).directive("ring",[function(){return{restrict:"E",replace:!0,require:["ring","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){var a;ring=g.addSeries([c.field],dimple.plot.pie),c.thickness&&!c.diameter?(a=100-c.thickness+"%",ring.innerRadius=a):c.thickness&&c.diameter?(a=c.diameter-c.thickness+"%",ring.innerRadius=a):ring.innerRadius="50%",c.diameter&&(ring.outerRadius=c.diameter+"%"),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("data",function(a){a&&e()})}}}]),angular.module("angular-dimple.scatter-plot",[]).directive("scatterPlot",[function(){return{restrict:"E",replace:!0,require:["scatterPlot","^graph"],controller:[function(){}],link:function(a,b,c,d){function e(){var a=[];c.series&&a.push(c.series),a.push(c.field),(c.label||""===c.label)&&a.push(c.label),scatterPlot=g.addSeries(a,dimple.plot.bubble),scatterPlot.aggregate=dimple.aggregateMethod.avg,f.filter(c),f.draw()}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-area",[]).directive("stackedArea",[function(){return{restrict:"E",replace:!0,require:["stackedArea","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){area=c.series?g.addSeries([c.series],dimple.plot.area):g.addSeries([c.field],dimple.plot.area),f.filter(c),area.lineMarkers=!1,f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.stacked-bar",[]).directive("stackedBar",[function(){return{restrict:"E",replace:!0,require:["stackedBar","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){bar=c.series?g.addSeries([c.series],dimple.plot.bar):g.addSeries([c.field],dimple.plot.bar),f.filter(c),f.draw()}var f=d[1],g=(d[0],f.getChart());a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.x",[]).directive("x",[function(){return{restrict:"E",replace:!0,require:["x","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?("Measure"==c.type?x=g.addMeasureAxis("x",[c.groupBy,c.field]):"Percent"==c.type?x=g.addPctAxis("x",c.field):"Time"==c.type?(x=g.addTimeAxis("x",c.field),c.format&&(x.tickFormat=c.format)):x=g.addCategoryAxis("x",[c.groupBy,c.field]),c.orderBy&&x.addGroupOrderRule(c.orderBy)):("Measure"==c.type?x=g.addMeasureAxis("x",c.field):"Percent"==c.type?x=g.addPctAxis("x",c.field):"Time"==c.type?(x=g.addTimeAxis("x",c.field),c.format&&(x.tickFormat=c.format)):x=g.addCategoryAxis("x",c.field),c.orderBy&&x.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?x.title=c.title:"null"==c.title&&(x.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]),angular.module("angular-dimple.y",[]).directive("y",[function(){return{restrict:"E",replace:!0,require:["y","^graph"],controller:["$scope","$element","$attrs",function(){}],link:function(a,b,c,d){function e(){c.groupBy?("Category"==c.type?y=g.addCategoryAxis("y",c.field):"Percent"==c.type?y=g.addPctAxis("y",c.field):"Time"==c.type?(y=g.addTimeAxis("x",c.field),c.format&&(y.tickFormat=c.format)):y=g.addMeasureAxis("y",c.field),c.orderBy&&y.addGroupOrderRule(c.orderBy)):("Category"==c.type?y=g.addCategoryAxis("y",c.field):"Percent"==c.type?y=g.addPctAxis("y",c.field):"Time"==c.type?(y=g.addTimeAxis("x",c.field),c.format&&(y.tickFormat=c.format)):y=g.addMeasureAxis("y",c.field),c.orderBy&&y.addOrderRule(c.orderBy)),c.title&&"null"!==c.title?y.title=c.title:"null"==c.title&&(y.title=null)}var f=d[1],g=f.getChart();a.$watch("dataReady",function(a){a===!0&&e()})}}}]); \ No newline at end of file diff --git a/site/js/lib/tailcoat.js b/site/js/lib/tailcoat.js deleted file mode 100644 index 5b219db..0000000 --- a/site/js/lib/tailcoat.js +++ /dev/null @@ -1,701 +0,0 @@ -(function Tailcoat () { - -var T = { - version: '1.1.0' -}; - -// ┌───────────────┐ -// │ DOM utilities │ -// └───────────────┘ - -var dom = T.utils = {}; - -// ┌──────────────────────┐ -// │ DOM event management │ -// └──────────────────────┘ - -// returns standard interaction event based on touch support -dom.event = function () { - // Due to complexity of pointer events and touch events - // (pointerdown, msPointerDown, touchstart, touchmove what wait no) - // we are returning click on dom.event untill we have a chance to do - // more robust touch/mouse handling. This should solve weird Win8 bugs. - return "click"; -}; - -// add a callback function to an event on an element -dom.addEvent = function (el, event, fn) { - if (el.addEventListener) { - return el.addEventListener(event, fn, false); - } - if (el.attachEvent) { - return el.attachEvent('on' + event, fn); - } -}; - -dom.removeEvent = function (el, event, fn) { - if (el.removeEventListener) { - return el.removeEventListener(event, fn, false); - } - if (el.detachEvent) { - return el.detachEvent('on' + event, fn); - } -}; - -// get the target element of an event -dom.eventTarget = function (event) { - if (!event.target) { - return event.srcElement; - } - if (event.target) { - return event.target; - } -}; - -// prevent default behavior of an event -dom.preventDefault = function (event) { - if (event.preventDefault) { - return event.preventDefault(); - } - if (event.returnValue) { - event.returnValue = false; - } -}; - -// stop and event from bubbling up the DOM tree -dom.stopPropagation = function (event) { - event = event || window.event; - if (event.stopPropagation) { - return event.stopPropagation(); - } - if (event.cancelBubble) { - event.cancelBubble = true; - } -}; - -// ┌────────────────────┐ -// │ class manipulation │ -// └────────────────────┘ - -// check if an element has a specific class -dom.hasClass = function (elem, className) { - var exp = new RegExp(' ' + className + ' '); - if (exp.test(' ' + elem.className + ' ')) { - return true; - } - - return false; -}; - -// add one or more classes to an element -dom.addClass = function (elem, classes) { - classes = classes.split(' '); - - for (var i = 0; i < classes.length; i++) { - if (!dom.hasClass(elem, classes[i])) { - elem.className += ' ' + classes[i]; - } - } -}; - -// remove one or more classes from an element -dom.removeClass = function (elem, classes) { - classes = classes.split(' '); - - for (var i = 0; i < classes.length; i++) { - var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ') + ' '; - - if (dom.hasClass(elem, classes[i])) { - while (newClass.indexOf(' ' + classes[i] + ' ') >= 0) { - newClass = newClass.replace(' ' + classes[i] + ' ', ' '); - } - - elem.className = newClass.replace(/^\s+|\s+$/g, ''); - } - } -}; - -// ┌───────────────┐ -// │ DOM traversal │ -// └───────────────┘ - -// returns closest element up the DOM tree matching a given class -dom.closest = function (className, context) { - var result, current; - for (current = context; current; current = current.parentNode) { - if (current.nodeType === 1 && dom.hasClass(current, className)) { - result = current; - break; - } - } - return current; -}; - -dom.getAttr = function(el, attr) { - if (el.getAttribute) { - return el.getAttribute(attr); - } - - var result; - var attrs = el.attributes; - - for (var i = 0; i < attrs.length; i++) { - if (attrs[i].nodeName === attr) { - result = attrs[i].nodeValue; - } - } - - return result; -}; - -// ┌──────┐ -// │ misc │ -// └──────┘ - -// return the index of an object in an array with optional offset -dom.indexOf = function (obj, arr, offset) { - var i = offset || 0; - - if (arr.indexOf) { - return arr.indexOf(obj, i); - } - - for (i; i < arr.length; i++) { - if (arr[i] === obj) { - return i; - } - } - - return -1; -}; - -dom.makeArray = function (object) { - var array = []; - for (var i = 0; i < object.length; i++) { - array.push(object[i]); - } - return array; -}; - -// ┌───────────────────┐ -// │ feature detection │ -// └───────────────────┘ -// detect features like touch, ie, etc. - -dom.isTouch = function () { - if (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0)) { - return true; - } - return false; -}; - -dom.isIE8 = function () { - var html = document.getElementsByTagName('html')[0]; - if (dom.hasClass(html, 'ie8')){ - return true; - } else { - return false; - } -}; - -dom.supportsPlaceholder = function () { - var input = document.createElement("input"); - return ('placeholder' in input); -}; - -// ┌───────────────┐ -// │ JS Components │ -// └───────────────┘ - -// ┌───────────┐ -// │ ACCORDION │ -// └───────────┘ -// Collapsible accordion list - -T.accordion = function () { - var accordions = document.querySelectorAll('.accordion'); - - if (accordions.length > 0) { - for (var i = 0; i < accordions.length; i++) { - var children = accordions[i].children; - - for (var j = 0; j < children.length; j++) { - dom.addEvent(children[j], dom.event(), toggleAccordion); - } - } - } -}; - -function toggleAccordion (event) { - var parent = dom.closest('accordion-section', dom.eventTarget(event)); - var children = dom.closest('accordion', parent).children; - - for (var i = 0; i < children.length; i++){ - dom.removeClass(children[i], 'active'); - } - - dom.addClass(parent, 'active'); -} - -// ┌────────────────┐ -// │ CLICK DROPDOWN │ -// └────────────────┘ -// dropdown menu that shows on click - -T.clickDropdown = function () { - var dropdowns = dom.makeArray(document.querySelectorAll('.click-dropdown')); - var body = document.querySelector('body'); - - if (dropdowns.length === 0) { - return; - } - - function closeAllDropdowns () { - for (var i = 0; i < dropdowns.length; i++) { - dom.removeClass(dropdowns[i], 'visible'); - } - } - - function bodyClickHandler (event) { - var dropdown = dom.closest('click-dropdown', event.target); - if (!dropdown) { - closeAllDropdowns(); - dom.removeEvent(body, dom.event(), bodyClickHandler); - } - } - - function bindDropdown (el) { - dom.addEvent(el, dom.event(), function(event) { - dom.preventDefault(event); - var dropdown = dom.closest('click-dropdown', event.target); - if (dom.hasClass(dropdown, 'visible')) { - dom.removeClass(dropdown, 'visible'); - dom.removeEvent(body, dom.event(), bodyClickHandler); - } else { - closeAllDropdowns(); - dom.addClass(dropdown, 'visible'); - dom.addEvent(body, dom.event(), bodyClickHandler); - } - }); - } - - for (var i = 0; i < dropdowns.length; i++) { - var link = dom.closest('click-dropdown', dropdowns[i]); - bindDropdown(link); - } - -}; - -// ┌────────┐ -// │ DRAWER │ -// └────────┘ -// Toggleable menu drawer - -T.drawer = function () { - var drawer = document.querySelector('.drawer'); - var buttons = dom.makeArray(document.querySelectorAll('.drawer-toggle')); - - if (buttons.length === 0) { - return; - } - - dom.addEvent(drawer, dom.event(), function(event) { - var html = document.querySelector('html'); - var isDrawer = dom.hasClass(dom.eventTarget(event), 'drawer'); - - if (isDrawer) { - dom.preventDefault(event); - dom.stopPropagation(event); - - dom.removeClass(drawer, 'active-left active-right'); - dom.removeClass(html, 'scroll-lock'); - - setTimeout(function(){ - drawer.style.display = 'none'; - }, 250); - } - }); - - for (var i = 0; i < buttons.length; i++) { - bindDrawerToggle(buttons[i], drawer); - } -}; - -function bindDrawerToggle (el, drawer) { - - dom.addEvent(el, dom.event(), function(event) { - var direction = dom.getAttr(el, 'data-direction'); - var html = document.querySelector('html'); - - dom.stopPropagation(event); - dom.preventDefault(event); - - drawer.style.display = 'block'; - - setTimeout(function(){ - dom.addClass(drawer, direction); - dom.addClass(html, 'scroll-lock'); - }, 0); - }); -} - -// ┌───────────────┐ -// │ SITE DROPDOWN │ -// └───────────────┘ -// dropdown menu for all featured ArcGIS sites - -T.dropdown = function () { - var dropdown = document.querySelector('.site-dropdown'); - var toggle = document.querySelector('.site-dropdown-toggle'); - var body = document.querySelector('body'); - - function closeDropdown (event) { - var isToggle = dom.hasClass(event.target, 'site-dropdown-toggle'); - var isDropdown = dom.closest('site-dropdown', event.target); - - if (!isToggle && !isDropdown) { - dom.removeClass(dropdown, 'visible'); - dom.removeEvent(body, dom.event(), closeDropdown); - } - } - - if (dropdown) { - dom.addEvent(toggle, dom.event(), function(event) { - if (dom.hasClass(dropdown, 'visible')) { - dom.removeClass(dropdown, 'visible'); - dom.removeEvent(body, dom.event(), closeDropdown); - } else { - dom.addClass(dropdown, 'visible'); - dom.addEvent(body, dom.event(), closeDropdown); - } - }); - } -}; - -// ┌───────┐ -// │ MODAL │ -// └───────┘ -// dismissable modal dialog box - -T.modal = function () { - var buttons = document.querySelectorAll('.modal-show'); - - if (buttons.length > 0) { - for (var i = 0; i < buttons.length; i++) { - bindModalShow(buttons[i]); - } - - bindModalDismiss(); - } -}; - -function bindModalShow (button) { - var modal; - var modalId = dom.getAttr(button, 'data-modal'); - var modals = document.querySelectorAll('.modal'); - - for (var i = 0; i < modals.length; i++) { - if (dom.getAttr(modals[i], 'data-modal') === modalId) { - modal = modals[i]; - break; - } - } - - if (modal !== null && typeof modal !== 'undefined') { - dom.addEvent(button, dom.event(), function(event) { - var overlay = document.querySelector('.modal-overlay'); - var html = document.querySelector('html'); - - dom.stopPropagation(event); - dom.preventDefault(event); - - dom.addClass(html, 'scroll-lock'); - dom.addClass(overlay, 'visible'); - dom.addClass(modal, 'visible'); - - if ((modal.offsetHeight + 50) < document.documentElement.clientHeight) { - modal.style.marginTop = (modal.offsetHeight / -2) + 'px'; - dom.addClass(modal, 'vertically-centered'); - } - }); - } -} - -function bindModalDismiss () { - var buttons = document.querySelectorAll('.modal-dismiss'); - var overlay = document.querySelector('.modal-overlay'); - - if (buttons.length > 0) { - // bind close modal to every modal-dismiss button - for (var i = 0; i < buttons.length; i++) { - dom.addEvent(buttons[i], dom.event(), closeModal); - } - } - - dom.addEvent(overlay, dom.event(), closeModal); -} - -function closeModal (event) { - - var isOverlay = dom.hasClass(dom.eventTarget(event), 'modal-overlay'); - var isDismiss = dom.hasClass(dom.eventTarget(event), 'modal-dismiss'); - - if (!isOverlay && !isDismiss) { - return; - } - - var modals = document.querySelectorAll('.modal'); - var overlay = document.querySelector('.modal-overlay'); - var html = document.querySelector('html'); - - dom.stopPropagation(event); - dom.preventDefault(event); - - for (var j = 0; j < modals.length; j++) { - dom.removeClass(modals[j], 'visible'); - } - - dom.removeClass(html, 'scroll-lock'); - dom.removeClass(overlay, 'visible'); -} - -// ┌─────────────┐ -// │ PLACEHOLDER │ -// └─────────────┘ -// Shim to add placeholder support to older browsers - -T.placeholder = function () { - - var inputs = document.querySelectorAll('input'); - var supportsPlaceholder = dom.supportsPlaceholder(); - - if (supportsPlaceholder === false) { - - for (var i = 0; i < inputs.length; i++) { - var type = inputs[i].type; - var validTypes = ['text', 'search', 'url', 'tel', 'email', 'password']; - - // Is the input a type with placeholder? - if ( dom.indexOf(type, validTypes) !== -1 ){ - // Is the input's value attribute empty? - var hasNoValue; - if (inputs[i].value === '' || inputs[i].value === undefined) { - hasNoValue = true; - } else { - hasNoValue = false; - } - - // Does the input have a placeholder? - var hasPlaceholder; - if (inputs[i].getAttribute('placeholder') !== null) { - hasPlaceholder = true; - } else { - hasPlaceholder = false; - } - - if (hasNoValue && hasPlaceholder) { - setInputValue(inputs[i]); - dom.addEvent(inputs[i], 'focus', inputFocus); - } - } - } - } -}; - -// Set input value to the text of the placeholder, give it a placeholder class -function setInputValue (input) { - input.value = input.placeholder; - dom.addClass(input, 'placeholder'); -} - -// Remove the input value on focus, remove the placeholder class -function inputFocus (event) { - var target = (dom.isIE8) ? event.srcElement : event.target; - target.value = ''; - dom.removeClass(target, 'placeholder'); -} - -// ┌─────────────┐ -// │ SITE SEARCH │ -// └─────────────┘ -// navigation element that expands to become a search bar - -T.siteSearch = function () { - var input = document.querySelector('.site-search-input'); - var search = document.querySelector('.site-search'); - function closeSearch (event) { - if (dom.closest('site-search-form', event.target) !== null) { - return; - } - input.value = 'Search'; - dom.removeClass(search, 'active'); - dom.removeEvent(document.querySelector('body'), 'click', closeSearch); - } - - if (input) { - input.value = 'Search'; - dom.addEvent(input, 'focus', function(event) { - input.value = ''; - dom.addClass(search, 'active'); - dom.addEvent(document.querySelector('body'), 'click', closeSearch); - }); - } -}; - -// ┌────────┐ -// │ SUBNAV │ -// └────────┘ -// responsive subnav - -T.subnav = function () { - var subnavs = document.querySelectorAll('.navigation-bar.responsive'); - - if (subnavs.length > 0) { - var i, j, k, tab, group, linksInGroup, percent; - var linkGroups = document.querySelectorAll('.navigation-bar.responsive ul'); - - for (i = 0; i < subnavs.length; i++) { - var nav = subnavs[i].children[0].children[1]; - var toggle = nav.children[0]; - dom.addEvent(toggle, dom.event(), toggleSubnav); - } - - for (j = 0; j < linkGroups.length; j++) { - group = linkGroups[j]; - linksInGroup = group.querySelectorAll('li'); - percent = (100 - 2*linksInGroup.length) / linksInGroup.length; - - for (k = 0; k < linksInGroup.length; k++){ - if (dom.isIE8()) { - linksInGroup[k].style.width = percent + "%"; - } else { - linksInGroup[k].style.maxWidth = percent + "%"; - } - - } - } - } -}; - -function toggleSubnav (event) { - dom.preventDefault(event); - var nav = dom.closest('navigation-bar-nav', event.target); - - if (dom.hasClass(nav, 'open')) { - dom.removeClass(nav, 'open'); - } else { - dom.addClass(nav, 'open'); - } -} - -// ┌──────┐ -// │ TABS │ -// └──────┘ -// tabbed content pane - -T.tabs = function () { - var tabs = document.querySelectorAll('.tab'); - if (tabs.length > 0) { - // variables to be used in loops - var i, j, k, tab, group, tabsInGroup, percent; - var tabGroups = document.querySelectorAll('.tab-group'); - - // Attach the switchTab event to all tabs - for (i = 0; i < tabs.length; i++) { - tab = tabs[i]; - dom.addEvent(tab, dom.event(), switchTab); - } - - for (j = 0; j < tabGroups.length; j++) { - group = tabGroups[j]; - tabsInGroup = group.querySelectorAll('.tab'); - percent = 100 / tabsInGroup.length; - - for (k = 0; k < tabsInGroup.length; k++){ - if (dom.isIE8()) { - tabsInGroup[k].style.width = percent + "%"; - } else { - tabsInGroup[k].style.maxWidth = percent + "%"; - } - - } - } - } -}; - -function switchTab (event) { - dom.preventDefault(event); - - var tab = dom.eventTarget(event); - var tabs = dom.closest('tab-nav', tab).querySelectorAll('.tab'); - var index = dom.indexOf(tab, tabs); - var contents = dom.closest('tab-group', tab).querySelectorAll('.tab-content'); - - for (var i = 0; i < tabs.length; i++){ - dom.removeClass(tabs[i], 'active'); - dom.removeClass(contents[i], 'active'); - } - - dom.addClass(tab, 'active'); - dom.addClass(contents[index], 'active'); -} - -// ┌─────────────────────┐ -// │ Initialize Tailcoat │ -// └─────────────────────┘ -// start up Tailcoat and attach all the patterns -// optionally pass an array of patterns you'd like to watch - -T.init = function (patterns) { - if (patterns) { - for (var i = 0; i < patterns.length; i++) { - T[patterns[i]](); - } - } else { - T.accordion(); - T.drawer(); - T.dropdown(); - T.clickDropdown(); - T.modal(); - T.placeholder(); - T.siteSearch(); - T.subnav(); - T.tabs(); - } - if ( dom.isTouch() ) { - dom.addClass(document.body, 'tailcoat-touch'); - } -}; - -// ┌─────────────────┐ -// │ Expose Tailcoat │ -// └─────────────────┘ -// implementation borrowed from Leaflet - -function expose () { - var oldT = window.T; - - T.noConflict = function () { - window.T = oldT; - return this; - }; - - window.T = T; -} - -// define Tailcoat for Node module pattern loaders, including Browserify -if (typeof module === 'object' && typeof module.exports === 'object') { - module.exports = T; -} - -// define Tailcoat as an AMD module -else if (typeof define === 'function' && define.amd) { - define(T); -} - -// define Tailcoat as a global T variable, saving the original T to restore later if needed -else { - expose(); -} - -})(); diff --git a/site/scss/_config.scss b/site/scss/_config.scss deleted file mode 100644 index 487148b..0000000 --- a/site/scss/_config.scss +++ /dev/null @@ -1,35 +0,0 @@ -// Fonts -$clear: 'Clear Sans', 'Helvetica', 'Arial', sans-serif; -$source: 'Source Code Pro', 'Inconsolata', 'Consolas', 'Courier New', monospace; - -// Colors -$white: #FFFFFF !default; -$off-white: #FAFBFE !default; -$lighter-gray: #ECF0F3 !default; -$light-gray: #DDE3E8 !default; -$gray: #76899B !default; -$dark-gray: #4C5156 !default; -$darker-gray: #2C3136 !default; -$blue: #1F85C4 !default; -$light-blue: lighten($blue, 10%); -$dark-blue: #245070 !default; -$darker-blue: #234052 !default; - -// Grid Variables -$total-columns: 24 !default; -$container-width: 100% !default; -$container-max: 1280px !default; -$container-min: 0 !default; -$column-gutter: 1em !default; -$container-gutter: 1em !default; - -// Breakpoints -$desktop: 1280px !default; -$laptop-large: 1180px !default; -$laptop: 1080px !default; -$tablet-wide: 1024px !default; -$tablet-mid: 960px !default; -$tablet-tall: 768px !default; -$phone-large: 662px !default; -$phone: 480px !default; -$phone-tall: 320px !default; diff --git a/site/scss/base/_code.scss b/site/scss/base/_code.scss deleted file mode 100644 index e173845..0000000 --- a/site/scss/base/_code.scss +++ /dev/null @@ -1,110 +0,0 @@ -/* - -Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull - -*/ - -pre { - background: #002b36; - color: #839496; - - code { - background: #002b36; - } - - .comment, - .template_comment, - .diff .header, - .doctype, - .pi, - .lisp .string, - .javadoc { - color: #586e75; - } - - /* Solarized Green */ - .keyword, - .winutils, - .method, - .addition, - .css .tag, - .request, - .status, - .nginx .title { - color: #859900; - } - - /* Solarized Cyan */ - .number, - .command, - .string, - .tag .value, - .rules .value, - .phpdoc, - .tex .formula, - .regexp, - .hexcolor, - .link_url { - color: #2aa198; - } - - /* Solarized Blue */ - .title, - .localvars, - .chunk, - .decorator, - .built_in, - .identifier, - .vhdl .literal, - .id, - .css .function { - color: #268bd2; - } - - /* Solarized Yellow */ - .attribute, - .variable, - .lisp .body, - .smalltalk .number, - .constant, - .class .title, - .parent, - .haskell .type, - .link_reference { - color: #b58900; - } - - /* Solarized Orange */ - .preprocessor, - .preprocessor .keyword, - .pragma, - .shebang, - .symbol, - .symbol .string, - .diff .change, - .special, - .attr_selector, - .subst, - .cdata, - .clojure .title, - .css .pseudo, - .header { - color: #cb4b16; - } - - /* Solarized Red */ - .deletion, - .important { - color: #dc322f; - } - - /* Solarized Violet */ - .link_label { - color: #6c71c4; - } - - .tex .formula { - background: #073642; - } - -} diff --git a/site/scss/base/_grid.scss b/site/scss/base/_grid.scss deleted file mode 100644 index 89ce02a..0000000 --- a/site/scss/base/_grid.scss +++ /dev/null @@ -1,98 +0,0 @@ -// Grid Classes -.container { - @include container($container-width, $container-max, $container-min, $container-gutter); -} - -.row { - @include clearfix(); - position: relative; - .row { - width: auto; - max-width: none; - min-width: 0; - margin-left: -0.5em; - margin-right: -0.5em; - } -} - -img, object, embed, video { - max-width: 100%; - height: auto; -} - -img { - border: 0; - -ms-interpolation-mode: bicubic; -} - -[class*="column-"] { - &.last-column { - float: right; - } - &.center { - @include center-column(); - } -} - -@for $i from 1 through $total-columns { - .column-#{$i} { - @extend %column-base; - @include column-width($i); - } -} - -@for $i from 0 through $total-columns { - .pre-#{$i} { - @include pre($i) - } - .post-#{$i} { - @include post($i) - } -} - -@include respond-to($tablet-mid){ - @for $i from 1 through $total-columns { - .tablet-column-#{$i} { - @include column-width($i); - } - } - @for $i from 0 through $total-columns { - .tablet-post-#{$i} { - @include post($i); - } - .tablet-pre-#{$i} { - @include pre($i); - } - } -} - -@include respond-to($phone){ - @for $i from 1 through $total-columns { - .phone-column-#{$i} { - @include column-width($i); - } - } - @for $i from 0 through $total-columns { - .phone-post-#{$i} { - @include post($i); - } - .phone-pre-#{$i} { - @include pre($i); - } - } -} - -// Leader & Trailer -@for $i from 0 through 7 { - .leader-#{$i} { margin-top: $i * 1rem; } - .trailer-#{$i} { margin-bottom: $i * 1rem; } -} - -// Right and Left -.right { - float: right !important; -} - -.left { - float: left !important; -} diff --git a/site/scss/base/_mixins.scss b/site/scss/base/_mixins.scss deleted file mode 100644 index c2889b1..0000000 --- a/site/scss/base/_mixins.scss +++ /dev/null @@ -1,141 +0,0 @@ -// Extendable Classes -%clearfix { - &:before, - &:after { - content: " "; - display: table; - } - &:after { - clear: both; - } -} - -// Mixins -@mixin show() { - visibility: visible; -} - -@mixin hide() { - display: none !important; - visibility: hidden; -} - -@mixin clearfix() { - @extend %clearfix; -} - -@mixin respond-to($type, $m: max-width) { - @if $type == handheld { - @media screen and (max-width: 767px) { - @content; - } - } @else if $type == webkit { - @media screen and (-webkit-min-device-pixel-ratio: 0) { - @content; - } - } @else if $type == nonhandheld { - @media screen and (min-width: 769px) { - @content; - } - } @else { - @media screen and ($m: $type) { - @content; - } - } -} - - -@function grid-calc($span) { - @return percentage(($span / $total-columns)); -} - -%column-base { - @include box-sizing(border-box); - float: left; - padding: 0 $column-gutter/2; -} - -@mixin column-style() { - @extend %column-base; -} - -@mixin container($width, $max, $min, $gutter) { - @include clearfix(); - @include box-sizing(border-box); - width: $width; - max-width: $max; - min-width: $min; - padding: 0 $gutter; - margin-right: auto; - margin-left: auto; -} - -@mixin column-width($span) { - width: grid-calc($span); -} - -@mixin column($span) { - @extend %column-base; - @include column-width($span); -} - -@mixin last-column() { - float: right; -} - -@mixin pre($amount) { - margin-left: grid-calc($amount); -} - -@mixin post($amount) { - margin-right: grid-calc($amount); -} - -@mixin center-column { - float: none; - margin-left: auto; - margin-right: auto; - clear: both; -} - -@mixin show() { - visibility: visible; -} -@mixin hide() { - display: none !important; - visibility: hidden; -} - -.show { - @include show(); -} - -.hide { - @include hide(); -} - -@media screen and (min-width: $tablet-mid) { - .phone-hide {@include show();} - .tablet-hide {@include show();} - .phone-show {@include hide();} - .tablet-show {@include hide();} - .tablet-only {@include hide();} -} - -// tablets -@media screen and (max-width: $tablet-mid - 1) and (min-width: $phone) { - .phone-hide {@include show();} - .tablet-hide {@include hide();} - .phone-show {@include hide();} - .tablet-show {@include show();} - .tablet-only {@include show();} -} - -// mobile phones -@media screen and (max-width: $phone - 1) { - .phone-hide {@include hide();} - .tablet-hide {@include hide();} - .phone-show {@include show();} - .tablet-show {@include show();} - .tablet-only {@include hide();} -} \ No newline at end of file diff --git a/site/scss/base/_type.scss b/site/scss/base/_type.scss deleted file mode 100644 index c695582..0000000 --- a/site/scss/base/_type.scss +++ /dev/null @@ -1,166 +0,0 @@ -$baseline: 1.25rem; - -body { - color: $dark-gray; - font-family: $clear; -} - -h1, h2, h3, h4, h5, h6 { - margin: 0; - padding-top: $baseline; - padding-bottom: $baseline; - font-family: $clear; - font-weight: 300; - line-height: $baseline; -} - -h1 { font-size: 2.75rem; line-height: 2*$baseline;} -h2 { font-size: 2.00rem; line-height: 2*$baseline;} -h3 { font-size: 1.75rem; line-height: 2*$baseline;} -h4 { font-size: 1.50rem; line-height: $baseline;} -h5 { font-size: 1.25rem; line-height: $baseline;} -h6 { font-size: 1.00rem; line-height: $baseline;} - -blockquote { - font-family: $clear; - font-style: italic; - font-weight: 400; - font-size: 1.75rem; - color: $light-gray; -} - -p { - margin: 0; - padding-bottom: $baseline; - font-size: 1.05rem; - line-height: 1.5em; - font-weight: 300; - &.large { - font-size: 1.35rem; - } - &.small { - font-size: .85rem; - } -} - -b, strong { - font-weight: 700; -} - -small { - font-size: .875rem; - color: $gray; -} - -a { - color: $blue; - text-decoration: none; - @include transition(color 200ms linear); - &:hover, &:focus { - color: $dark-blue; - cursor: pointer; - } - &:active, &:hover { - outline: 0; - } -} - -ul, ol { - list-style-position: inside; - margin-top: 0; - padding: 0; - ul, ol { - padding-left: 1.25em; - } -} - -ul { - list-style-type: none; -} - - -ol { - -} - -code, kbd, pre, samp { - font-family: $source; -} - -code { - @include border-radius(2px); - background: $off-white; - padding: .2em; - border: 1px solid darken($off-white, 5%); - white-space: pre; - font-size: .75rem; - line-height: 1.5em; -} - -pre { - padding: 1em; - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; - @include experimental(tab-size, 4); - background: $off-white; - border: 1px solid $lighter-gray; - max-width: 100%; - code { - background-color: $off-white; - display: block; - overflow: auto; - word-wrap: normal; - border: none; - } -} - -hr { - display: none; - margin-top: 2rem; - border: none; - border-top: 2rem solid $blue; -} - -.center-text { - text-align: center; -} - -img::selection { - background: transparent; -} - -img::moz-selection { - background: transparent; -} - -table { - width: 100%; - background-color: $white; - border-collapse: collapse; - border-spacing: 0; - border: 1px solid mix($lighter-gray, $light-gray); - text-align: left; - > thead { - background-color: mix($off-white, $lighter-gray); - border-bottom: 1px solid mix($lighter-gray, $light-gray); - } - th, td { - border-left: 1px solid mix($lighter-gray, $light-gray); - border-right: 1px solid mix($lighter-gray, $light-gray); - padding: 12px; - } - tr { - border-bottom: 1px solid mix($lighter-gray, $light-gray); - text-align: left; - &:last-child { - border-bottom: none; - } - &:nth-child(even){ - background-color: $off-white; - td { - background-color: $off-white; - } - } - } -} \ No newline at end of file diff --git a/site/scss/home.scss b/site/scss/home.scss deleted file mode 100644 index dcbbb5d..0000000 --- a/site/scss/home.scss +++ /dev/null @@ -1,74 +0,0 @@ -@import "compass"; -@import "config"; - -.homepage-navigation { - position: relative; - z-index: 2; - font-weight: 200; - margin-top: 1rem; - a { - color: $off-white; - &:hover { - color: $white; - } - } -} - -pre { - padding: 0; - border: none; -} - -code { - background-color: $white; - border-color: $lighter-gray; -} - -.banner { - position: relative; - overflow: hidden; - color: $white; - background: url(../img/dots.svg) $dark-blue; - z-index: 20; - .banner-copy { - position: relative; - margin: 5rem 0 9rem 0; - z-index: 2; - font-weight: 200; - } - .banner-graphic { - position: absolute; - top: -260px; - bottom: 0; - left: 50%; - z-index: 1; - width: 2400px; - margin-left: -1200px; - z-index: 1; - } - .dimple-axis { - display: none; - } - .dimple-gridline{ - display: none; - } - .dimple-line { - opacity: 0.8; - fill: none; - stroke: $darker-blue; - stroke-width: 2; - } - .dimple-marker-back { - fill: $darker-blue; - } - .dimple-marker { - display: none; - fill: $darker-blue; - } -} - -.charts-list { - a { - color: $gray; - } -} \ No newline at end of file diff --git a/site/scss/style.scss b/site/scss/style.scss deleted file mode 100644 index b0b3bf1..0000000 --- a/site/scss/style.scss +++ /dev/null @@ -1,196 +0,0 @@ -@import "compass"; - -@import "config"; -@import "base/reset"; -@import "base/mixins"; -@import "base/grid"; -@import "base/type"; -@import "base/code"; -@import "base/tabs"; -@import "base/buttons"; - -[ng-cloak] { display: none;} - -.fullscreen { - padding: 8rem 0; - .darker-blue { - background-color: $darker-blue; - } -} - -.darker-blue { - color: $gray; - background-color: $darker-blue; - a { - color: lighten($blue, 10%); - &:hover { - color: lighten($blue, 20%); - } - } -} - -.off-white { - color: $dark-gray; - background-color: $off-white; -} - -.primary-navigation { - font-weight: 300; - position: fixed; - top: 0; - left: 0; - right: 0; - background-color: $white; - border-bottom: 1px solid $light-gray; - padding: 1rem 0; - z-index: 10; - - @include respond-to($phone-large) { - position: absolute; - } -} - -.angular-dimple-logo { - float: left; - @include respond-to($tablet-mid) { - width: 100%; - text-align: center; - } -} - -.navigation-section { - width: 50%; - text-align: right; - float: right; - @include respond-to($tablet-mid) { - width: 100%; - text-align: center; - } -} - -.numbered { - text-align: center; - width: 2em; - height: 2em; - margin-right: 1em; - display: inline-block; - color: $white; - font-family: $source; - font-size: .75rem; - line-height: 2em; - vertical-align: .25em; - background-color: $blue; - @include border-radius(50%); -} - -.navigation { - position: fixed; - height: 100vh; - width: 14em; - padding: 1em; - background-color: #ededed; -} - -.sidebar { - position: absolute; - overflow: auto; - background-color: $off-white; - z-index: 2; - li { - margin-bottom: 1rem; - padding: .25rem 0; - } - a { - width: 100%; - img { - float: left; - height: 3rem; - width: 3rem; - margin-right: 1rem; - background-color: $white; - border: 2px solid $light-gray; - @include border-radius(50%); - @include box-shadow( 0 0 0 0 $light-gray); - @include transition(all 200ms linear); - } - &:hover { - img { - @include box-shadow( 0 0 0 4px $light-gray); - } - } - } - span { - display: inline-block; - line-height: 3rem; - } - - @include respond-to($tablet-mid){ - padding-top: 1rem; - position: relative; - height: auto; - - li { - display: inline-block; - padding-right: 1rem; - } - } -} -.scroll-to-top { - position: fixed; - @include respond-to($tablet-mid){ - display: none; - } -} - -.chart { - position: absolute; - top: 0; - bottom: 0; - left: 14rem; - right: 0; - height: 100vh; - padding-left: 1rem; -} - -.chart-icon { - @extend %clearfix; - display: inline-block; - margin-bottom: 1rem; - background-color: $white; - height: 6rem; - width: 6rem; - position: relative; - @include border-radius(50%); - cursor: pointer; - @include transition(all 200ms linear); - border: 1px solid $light-gray; - &:hover { - background-color: $off-white; - } - &:before { - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: block; - @include border-radius(50%); - @include box-shadow(0 0 0 6px $light-gray); - @include transition(all 200ms linear); - } - &:hover { - &:before { - @include box-shadow(0 0 0 12px $light-gray); - } - } - img { - width: 100%; - height: auto; - } -} - -.footer { - position: relative; - z-index: 5; -}