diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..28f1ba7 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +.DS_Store \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..b062822 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,48 @@ +/* +* +* cssplot +* Simple, css-only plotting +* https://github.com/asciimoo/cssplot +* demo: http://asciimoo.github.io/cssplot/ +* +*/ +module.exports = function(grunt) { + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + less: { + dist: { + options: { + compress: true + }, + files: { + 'build/cssplot.base.css': 'src/cssplot.base.less', + 'build/cssplot.full.css': 'src/cssplot.full.less', + 'build/cssplot.group.css': 'src/cssplot.group.less', + 'build/cssplot.animations.css': 'src/cssplot.animations.less' + } + } + }, + watch: { + options: { + livereload: true + }, + css: { + files: ['src/*.less'], + tasks: ['newer:less'], + options: { + spawn: false + } + }, + html: { + files: ['*.html'], + options: { + livereload: true + } + } + } + }); + grunt.loadNpmTasks('grunt-contrib-less'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-newer'); + grunt.registerTask('default', ['newer:less','watch']); +}; \ No newline at end of file diff --git a/Makefile b/Makefile deleted file mode 100644 index 36d31a2..0000000 --- a/Makefile +++ /dev/null @@ -1,23 +0,0 @@ - -all: prepare base full group - -prepare: clean - @mkdir build/ - @echo "[!] build/ directory created" - -base: - @lessc src/cssplot.base.less > build/cssplot.base.css - @echo "[!] cssplot.base.css generated" - -full: - @lessc src/cssplot.full.less > build/cssplot.full.css - @echo "[!] cssplot.full.css generated" - -group: - @lessc src/cssplot.group.less > build/cssplot.group.css - @echo "[!] cssplot.group.css generated" - -clean: - @rm -rf build/ - -.PHONY: all prepare base full clean diff --git a/README.md b/README.md index 458a228..cadf935 100644 --- a/README.md +++ b/README.md @@ -85,11 +85,41 @@ Alternatively `cssplot.base.css` can be used alone with the following modificati +### Animated Graphs + +For animated charts, add the `data-cp-transition` attribute to the `plot-container`; the values are: `fade` and `grow` and they're the two types of animation availables. Then, each point in the graph must have the `data-cp-delay` attribute with a value that must be a number higher than zero and represents the delay of the animation (in miliseconds). + +```html +
+ +
+``` + +## Build +Using **GruntJS**. + +Clone this repo and install dependencies: + + $ npm install + +Then run: + + $ grunt + +It will keep *watching* your changes while you save them and if you have [Livereload](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei) extension your browser will refresh each time you save your .less file. + ## Conceptions - [ ] Pie chart - [ ] Stacked bar chart - [ ] Line chart - [ ] Axis/scale support -- [ ] Live demo -- [ ] Better build script +- [X] Live demo +- [X] Better build script +- [X] Animated charts diff --git a/build/cssplot.animations.css b/build/cssplot.animations.css new file mode 100644 index 0000000..76fd32a --- /dev/null +++ b/build/cssplot.animations.css @@ -0,0 +1 @@ +@-webkit-keyframes chart-opacity{from{opacity:0}to{opacity:1}}@keyframes chart-opacity{from{opacity:0}to{opacity:1}}@-webkit-keyframes bar-chart-grow{from{-webkit-transform:scaleY(0)}to{-webkit-transform:scaleY(1)}}@keyframes bar-chart-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}@-webkit-keyframes horizontal-chart-grow{from{-webkit-transform:scaleX(0)}to{-webkit-transform:scaleX(1)}}@keyframes horizontal-chart-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@-webkit-keyframes scatter-chart-grow{from{-webkit-transform:scale(0)}to{-webkit-transform:scale(1)}}@keyframes scatter-chart-grow{from{transform:scale(0)}to{transform:scale(1)}} \ No newline at end of file diff --git a/build/cssplot.base.css b/build/cssplot.base.css index d81cb27..49ebd4c 100644 --- a/build/cssplot.base.css +++ b/build/cssplot.base.css @@ -1,77 +1 @@ -.bar-chart, -.vertical-chart, -.scatter-plot { - position: relative; - min-width: 100px; - min-height: 100px; - padding: 0; - margin: 0; -} -.bar-chart .plot-container { - display: -webkit-flex; - display: flex; - -webkit-flex-direction: row; - flex-direction: row; - -webkit-flex-wrap: nowrap; - flex-wrap: nowrap; - position: absolute; - text-align: center; - top: 0; - left: 0; - bottom: 0; - right: 0; - padding: 0; - margin: 0; - min-height: 100px; -} -.bar-chart .chart-column, -.bar-chart [data-cp-size] { - -webkit-flex-grow: 1; - flex-grow: 1; - -webkit-align-self: flex-end; - align-self: flex-end; -} -.bar-chart .chart-column, -.vertical-chart .chart-row, -.bar-chart [data-cp-size], -.vertical-chart [data-cp-size] { - background: #3498db; - color: #ffffff; - list-style: none; - border: 1px solid #ffffff; - box-sizing: border-box; -} -.vertical-chart { - clear: both; -} -.vertical-chart .plot-container { - flex-direction: row; - padding: 0; - margin: 0; - width: 100%; -} -.vertical-chart .chart-row, -.vertical-chart [data-cp-size] { - min-height: 1px; -} -.scatter-plot .plot-container { - position: absolute; - top: 12px; - left: 0; - right: 12px; - bottom: 0; - margin: 0; - padding: 0; -} -.scatter-plot .chart-dot, -.scatter-plot .chart-dot, -.scatter-plot [data-cp-x], -.scatter-plot [data-cp-y] { - position: absolute; - height: 0; - width: 0; - list-style: none; - overflow: hidden; - border: 6px solid #3498db; - border-radius: 100%; -} +.bar-chart,.horizontal-chart,.scatter-plot{position:relative;min-width:100px;min-height:100px;padding:0;margin:0}.bar-chart .plot-container{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;position:absolute;text-align:center;top:0;left:0;bottom:0;right:0;padding:0;margin:0;min-height:100px}.bar-chart .plot-container[data-cp-transition="fade"] [data-cp-delay]{opacity:0;-webkit-animation-name:chart-opacity;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:chart-opacity;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.bar-chart .plot-container[data-cp-transition="grow"] [data-cp-delay]{-webkit-transform:scaleY(0);-webkit-transform-origin:center bottom;transform:scaleY(0);transform-origin:center bottom;-webkit-animation-name:bar-chart-grow;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:bar-chart-grow;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.bar-chart .chart-column,.bar-chart [data-cp-size]{-webkit-flex-grow:1;flex-grow:1;-webkit-align-self:flex-end;align-self:flex-end}.bar-chart .chart-column,.horizontal-chart .chart-row,.bar-chart [data-cp-size],.horizontal-chart [data-cp-size]{background:#3498db;color:#fff;list-style:none;border:1px solid #fff;box-sizing:border-box}.horizontal-chart{clear:both}.horizontal-chart .plot-container{flex-direction:row;padding:0;margin:0;width:100%}.horizontal-chart .plot-container[data-cp-transition="fade"] [data-cp-delay]{opacity:0;-webkit-animation-name:chart-opacity;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:chart-opacity;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.horizontal-chart .plot-container[data-cp-transition="grow"] [data-cp-delay]{-webkit-transform:scaleX(0);-webkit-transform-origin:left center;transform:scaleX(0);transform-origin:left center;-webkit-animation-name:horizontal-chart-grow;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:horizontal-chart-grow;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.horizontal-chart .chart-row,.horizontal-chart [data-cp-size]{min-height:1px}.scatter-plot .plot-container{position:absolute;top:12px;left:0;right:12px;bottom:0;margin:0;padding:0}.scatter-plot .plot-container[data-cp-transition="fade"] [data-cp-delay]{opacity:0;-webkit-animation-name:chart-opacity;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:chart-opacity;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.scatter-plot .plot-container[data-cp-transition="grow"] [data-cp-delay]{-webkit-transform:scale(0);-webkit-transform-origin:center center;transform:scale(0);transform-origin:center center;-webkit-animation-name:horizontal-chart-grow;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:horizontal-chart-grow;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.scatter-plot .chart-dot,.scatter-plot .chart-dot,.scatter-plot [data-cp-x],.scatter-plot [data-cp-y]{position:absolute;height:0;width:0;list-style:none;overflow:hidden;border:6px solid #3498db;border-radius:100%} \ No newline at end of file diff --git a/build/cssplot.full.css b/build/cssplot.full.css index 97a6856..ab72ba1 100644 --- a/build/cssplot.full.css +++ b/build/cssplot.full.css @@ -1,1289 +1 @@ -.bar-chart, -.vertical-chart, -.scatter-plot { - position: relative; - min-width: 100px; - min-height: 100px; - padding: 0; - margin: 0; -} -.bar-chart .plot-container { - display: -webkit-flex; - display: flex; - -webkit-flex-direction: row; - flex-direction: row; - -webkit-flex-wrap: nowrap; - flex-wrap: nowrap; - position: absolute; - text-align: center; - top: 0; - left: 0; - bottom: 0; - right: 0; - padding: 0; - margin: 0; - min-height: 100px; -} -.bar-chart .chart-column, -.bar-chart [data-cp-size] { - -webkit-flex-grow: 1; - flex-grow: 1; - -webkit-align-self: flex-end; - align-self: flex-end; -} -.bar-chart .chart-column, -.vertical-chart .chart-row, -.bar-chart [data-cp-size], -.vertical-chart [data-cp-size] { - background: #3498db; - color: #ffffff; - list-style: none; - border: 1px solid #ffffff; - box-sizing: border-box; -} -.vertical-chart { - clear: both; -} -.vertical-chart .plot-container { - flex-direction: row; - padding: 0; - margin: 0; - width: 100%; -} -.vertical-chart .chart-row, -.vertical-chart [data-cp-size] { - min-height: 1px; -} -.scatter-plot .plot-container { - position: absolute; - top: 12px; - left: 0; - right: 12px; - bottom: 0; - margin: 0; - padding: 0; -} -.scatter-plot .chart-dot, -.scatter-plot .chart-dot, -.scatter-plot [data-cp-x], -.scatter-plot [data-cp-y] { - position: absolute; - height: 0; - width: 0; - list-style: none; - overflow: hidden; - border: 6px solid #3498db; - border-radius: 100%; -} -.bar-chart .plot-container [data-cp-size="0"] { - height: 0%; -} -.bar-chart .plot-container [data-cp-size="1"] { - height: 1%; -} -.bar-chart .plot-container [data-cp-size="2"] { - height: 2%; -} -.bar-chart .plot-container [data-cp-size="3"] { - height: 3%; -} -.bar-chart .plot-container [data-cp-size="4"] { - height: 4%; -} -.bar-chart .plot-container [data-cp-size="5"] { - height: 5%; -} -.bar-chart .plot-container [data-cp-size="6"] { - height: 6%; -} -.bar-chart .plot-container [data-cp-size="7"] { - height: 7%; -} -.bar-chart .plot-container [data-cp-size="8"] { - height: 8%; -} -.bar-chart .plot-container [data-cp-size="9"] { - height: 9%; -} -.bar-chart .plot-container [data-cp-size="10"] { - height: 10%; -} -.bar-chart .plot-container [data-cp-size="11"] { - height: 11%; -} -.bar-chart .plot-container [data-cp-size="12"] { - height: 12%; -} -.bar-chart .plot-container [data-cp-size="13"] { - height: 13%; -} -.bar-chart .plot-container [data-cp-size="14"] { - height: 14%; -} -.bar-chart .plot-container [data-cp-size="15"] { - height: 15%; -} -.bar-chart .plot-container [data-cp-size="16"] { - height: 16%; -} -.bar-chart .plot-container [data-cp-size="17"] { - height: 17%; -} -.bar-chart .plot-container [data-cp-size="18"] { - height: 18%; -} -.bar-chart .plot-container [data-cp-size="19"] { - height: 19%; -} -.bar-chart .plot-container [data-cp-size="20"] { - height: 20%; -} -.bar-chart .plot-container [data-cp-size="21"] { - height: 21%; -} -.bar-chart .plot-container [data-cp-size="22"] { - height: 22%; -} -.bar-chart .plot-container [data-cp-size="23"] { - height: 23%; -} -.bar-chart .plot-container [data-cp-size="24"] { - height: 24%; -} -.bar-chart .plot-container [data-cp-size="25"] { - height: 25%; -} -.bar-chart .plot-container [data-cp-size="26"] { - height: 26%; -} -.bar-chart .plot-container [data-cp-size="27"] { - height: 27%; -} -.bar-chart .plot-container [data-cp-size="28"] { - height: 28%; -} -.bar-chart .plot-container [data-cp-size="29"] { - height: 29%; -} -.bar-chart .plot-container [data-cp-size="30"] { - height: 30%; -} -.bar-chart .plot-container [data-cp-size="31"] { - height: 31%; -} -.bar-chart .plot-container [data-cp-size="32"] { - height: 32%; -} -.bar-chart .plot-container [data-cp-size="33"] { - height: 33%; -} -.bar-chart .plot-container [data-cp-size="34"] { - height: 34%; -} -.bar-chart .plot-container [data-cp-size="35"] { - height: 35%; -} -.bar-chart .plot-container [data-cp-size="36"] { - height: 36%; -} -.bar-chart .plot-container [data-cp-size="37"] { - height: 37%; -} -.bar-chart .plot-container [data-cp-size="38"] { - height: 38%; -} -.bar-chart .plot-container [data-cp-size="39"] { - height: 39%; -} -.bar-chart .plot-container [data-cp-size="40"] { - height: 40%; -} -.bar-chart .plot-container [data-cp-size="41"] { - height: 41%; -} -.bar-chart .plot-container [data-cp-size="42"] { - height: 42%; -} -.bar-chart .plot-container [data-cp-size="43"] { - height: 43%; -} -.bar-chart .plot-container [data-cp-size="44"] { - height: 44%; -} -.bar-chart .plot-container [data-cp-size="45"] { - height: 45%; -} -.bar-chart .plot-container [data-cp-size="46"] { - height: 46%; -} -.bar-chart .plot-container [data-cp-size="47"] { - height: 47%; -} -.bar-chart .plot-container [data-cp-size="48"] { - height: 48%; -} -.bar-chart .plot-container [data-cp-size="49"] { - height: 49%; -} -.bar-chart .plot-container [data-cp-size="50"] { - height: 50%; -} -.bar-chart .plot-container [data-cp-size="51"] { - height: 51%; -} -.bar-chart .plot-container [data-cp-size="52"] { - height: 52%; -} -.bar-chart .plot-container [data-cp-size="53"] { - height: 53%; -} -.bar-chart .plot-container [data-cp-size="54"] { - height: 54%; -} -.bar-chart .plot-container [data-cp-size="55"] { - height: 55%; -} -.bar-chart .plot-container [data-cp-size="56"] { - height: 56%; -} -.bar-chart .plot-container [data-cp-size="57"] { - height: 57%; -} -.bar-chart .plot-container [data-cp-size="58"] { - height: 58%; -} -.bar-chart .plot-container [data-cp-size="59"] { - height: 59%; -} -.bar-chart .plot-container [data-cp-size="60"] { - height: 60%; -} -.bar-chart .plot-container [data-cp-size="61"] { - height: 61%; -} -.bar-chart .plot-container [data-cp-size="62"] { - height: 62%; -} -.bar-chart .plot-container [data-cp-size="63"] { - height: 63%; -} -.bar-chart .plot-container [data-cp-size="64"] { - height: 64%; -} -.bar-chart .plot-container [data-cp-size="65"] { - height: 65%; -} -.bar-chart .plot-container [data-cp-size="66"] { - height: 66%; -} -.bar-chart .plot-container [data-cp-size="67"] { - height: 67%; -} -.bar-chart .plot-container [data-cp-size="68"] { - height: 68%; -} -.bar-chart .plot-container [data-cp-size="69"] { - height: 69%; -} -.bar-chart .plot-container [data-cp-size="70"] { - height: 70%; -} -.bar-chart .plot-container [data-cp-size="71"] { - height: 71%; -} -.bar-chart .plot-container [data-cp-size="72"] { - height: 72%; -} -.bar-chart .plot-container [data-cp-size="73"] { - height: 73%; -} -.bar-chart .plot-container [data-cp-size="74"] { - height: 74%; -} -.bar-chart .plot-container [data-cp-size="75"] { - height: 75%; -} -.bar-chart .plot-container [data-cp-size="76"] { - height: 76%; -} -.bar-chart .plot-container [data-cp-size="77"] { - height: 77%; -} -.bar-chart .plot-container [data-cp-size="78"] { - height: 78%; -} -.bar-chart .plot-container [data-cp-size="79"] { - height: 79%; -} -.bar-chart .plot-container [data-cp-size="80"] { - height: 80%; -} -.bar-chart .plot-container [data-cp-size="81"] { - height: 81%; -} -.bar-chart .plot-container [data-cp-size="82"] { - height: 82%; -} -.bar-chart .plot-container [data-cp-size="83"] { - height: 83%; -} -.bar-chart .plot-container [data-cp-size="84"] { - height: 84%; -} -.bar-chart .plot-container [data-cp-size="85"] { - height: 85%; -} -.bar-chart .plot-container [data-cp-size="86"] { - height: 86%; -} -.bar-chart .plot-container [data-cp-size="87"] { - height: 87%; -} -.bar-chart .plot-container [data-cp-size="88"] { - height: 88%; -} -.bar-chart .plot-container [data-cp-size="89"] { - height: 89%; -} -.bar-chart .plot-container [data-cp-size="90"] { - height: 90%; -} -.bar-chart .plot-container [data-cp-size="91"] { - height: 91%; -} -.bar-chart .plot-container [data-cp-size="92"] { - height: 92%; -} -.bar-chart .plot-container [data-cp-size="93"] { - height: 93%; -} -.bar-chart .plot-container [data-cp-size="94"] { - height: 94%; -} -.bar-chart .plot-container [data-cp-size="95"] { - height: 95%; -} -.bar-chart .plot-container [data-cp-size="96"] { - height: 96%; -} -.bar-chart .plot-container [data-cp-size="97"] { - height: 97%; -} -.bar-chart .plot-container [data-cp-size="98"] { - height: 98%; -} -.bar-chart .plot-container [data-cp-size="99"] { - height: 99%; -} -.bar-chart .plot-container [data-cp-size="100"] { - height: 100%; -} -.vertical-chart .plot-container [data-cp-size="0"] { - width: 0%; -} -.vertical-chart .plot-container [data-cp-size="1"] { - width: 1%; -} -.vertical-chart .plot-container [data-cp-size="2"] { - width: 2%; -} -.vertical-chart .plot-container [data-cp-size="3"] { - width: 3%; -} -.vertical-chart .plot-container [data-cp-size="4"] { - width: 4%; -} -.vertical-chart .plot-container [data-cp-size="5"] { - width: 5%; -} -.vertical-chart .plot-container [data-cp-size="6"] { - width: 6%; -} -.vertical-chart .plot-container [data-cp-size="7"] { - width: 7%; -} -.vertical-chart .plot-container [data-cp-size="8"] { - width: 8%; -} -.vertical-chart .plot-container [data-cp-size="9"] { - width: 9%; -} -.vertical-chart .plot-container [data-cp-size="10"] { - width: 10%; -} -.vertical-chart .plot-container [data-cp-size="11"] { - width: 11%; -} -.vertical-chart .plot-container [data-cp-size="12"] { - width: 12%; -} -.vertical-chart .plot-container [data-cp-size="13"] { - width: 13%; -} -.vertical-chart .plot-container [data-cp-size="14"] { - width: 14%; -} -.vertical-chart .plot-container [data-cp-size="15"] { - width: 15%; -} -.vertical-chart .plot-container [data-cp-size="16"] { - width: 16%; -} -.vertical-chart .plot-container [data-cp-size="17"] { - width: 17%; -} -.vertical-chart .plot-container [data-cp-size="18"] { - width: 18%; -} -.vertical-chart .plot-container [data-cp-size="19"] { - width: 19%; -} -.vertical-chart .plot-container [data-cp-size="20"] { - width: 20%; -} -.vertical-chart .plot-container [data-cp-size="21"] { - width: 21%; -} -.vertical-chart .plot-container [data-cp-size="22"] { - width: 22%; -} -.vertical-chart .plot-container [data-cp-size="23"] { - width: 23%; -} -.vertical-chart .plot-container [data-cp-size="24"] { - width: 24%; -} -.vertical-chart .plot-container [data-cp-size="25"] { - width: 25%; -} -.vertical-chart .plot-container [data-cp-size="26"] { - width: 26%; -} -.vertical-chart .plot-container [data-cp-size="27"] { - width: 27%; -} -.vertical-chart .plot-container [data-cp-size="28"] { - width: 28%; -} -.vertical-chart .plot-container [data-cp-size="29"] { - width: 29%; -} -.vertical-chart .plot-container [data-cp-size="30"] { - width: 30%; -} -.vertical-chart .plot-container [data-cp-size="31"] { - width: 31%; -} -.vertical-chart .plot-container [data-cp-size="32"] { - width: 32%; -} -.vertical-chart .plot-container [data-cp-size="33"] { - width: 33%; -} -.vertical-chart .plot-container [data-cp-size="34"] { - width: 34%; -} -.vertical-chart .plot-container [data-cp-size="35"] { - width: 35%; -} -.vertical-chart .plot-container [data-cp-size="36"] { - width: 36%; -} -.vertical-chart .plot-container [data-cp-size="37"] { - width: 37%; -} -.vertical-chart .plot-container [data-cp-size="38"] { - width: 38%; -} -.vertical-chart .plot-container [data-cp-size="39"] { - width: 39%; -} -.vertical-chart .plot-container [data-cp-size="40"] { - width: 40%; -} -.vertical-chart .plot-container [data-cp-size="41"] { - width: 41%; -} -.vertical-chart .plot-container [data-cp-size="42"] { - width: 42%; -} -.vertical-chart .plot-container [data-cp-size="43"] { - width: 43%; -} -.vertical-chart .plot-container [data-cp-size="44"] { - width: 44%; -} -.vertical-chart .plot-container [data-cp-size="45"] { - width: 45%; -} -.vertical-chart .plot-container [data-cp-size="46"] { - width: 46%; -} -.vertical-chart .plot-container [data-cp-size="47"] { - width: 47%; -} -.vertical-chart .plot-container [data-cp-size="48"] { - width: 48%; -} -.vertical-chart .plot-container [data-cp-size="49"] { - width: 49%; -} -.vertical-chart .plot-container [data-cp-size="50"] { - width: 50%; -} -.vertical-chart .plot-container [data-cp-size="51"] { - width: 51%; -} -.vertical-chart .plot-container [data-cp-size="52"] { - width: 52%; -} -.vertical-chart .plot-container [data-cp-size="53"] { - width: 53%; -} -.vertical-chart .plot-container [data-cp-size="54"] { - width: 54%; -} -.vertical-chart .plot-container [data-cp-size="55"] { - width: 55%; -} -.vertical-chart .plot-container [data-cp-size="56"] { - width: 56%; -} -.vertical-chart .plot-container [data-cp-size="57"] { - width: 57%; -} -.vertical-chart .plot-container [data-cp-size="58"] { - width: 58%; -} -.vertical-chart .plot-container [data-cp-size="59"] { - width: 59%; -} -.vertical-chart .plot-container [data-cp-size="60"] { - width: 60%; -} -.vertical-chart .plot-container [data-cp-size="61"] { - width: 61%; -} -.vertical-chart .plot-container [data-cp-size="62"] { - width: 62%; -} -.vertical-chart .plot-container [data-cp-size="63"] { - width: 63%; -} -.vertical-chart .plot-container [data-cp-size="64"] { - width: 64%; -} -.vertical-chart .plot-container [data-cp-size="65"] { - width: 65%; -} -.vertical-chart .plot-container [data-cp-size="66"] { - width: 66%; -} -.vertical-chart .plot-container [data-cp-size="67"] { - width: 67%; -} -.vertical-chart .plot-container [data-cp-size="68"] { - width: 68%; -} -.vertical-chart .plot-container [data-cp-size="69"] { - width: 69%; -} -.vertical-chart .plot-container [data-cp-size="70"] { - width: 70%; -} -.vertical-chart .plot-container [data-cp-size="71"] { - width: 71%; -} -.vertical-chart .plot-container [data-cp-size="72"] { - width: 72%; -} -.vertical-chart .plot-container [data-cp-size="73"] { - width: 73%; -} -.vertical-chart .plot-container [data-cp-size="74"] { - width: 74%; -} -.vertical-chart .plot-container [data-cp-size="75"] { - width: 75%; -} -.vertical-chart .plot-container [data-cp-size="76"] { - width: 76%; -} -.vertical-chart .plot-container [data-cp-size="77"] { - width: 77%; -} -.vertical-chart .plot-container [data-cp-size="78"] { - width: 78%; -} -.vertical-chart .plot-container [data-cp-size="79"] { - width: 79%; -} -.vertical-chart .plot-container [data-cp-size="80"] { - width: 80%; -} -.vertical-chart .plot-container [data-cp-size="81"] { - width: 81%; -} -.vertical-chart .plot-container [data-cp-size="82"] { - width: 82%; -} -.vertical-chart .plot-container [data-cp-size="83"] { - width: 83%; -} -.vertical-chart .plot-container [data-cp-size="84"] { - width: 84%; -} -.vertical-chart .plot-container [data-cp-size="85"] { - width: 85%; -} -.vertical-chart .plot-container [data-cp-size="86"] { - width: 86%; -} -.vertical-chart .plot-container [data-cp-size="87"] { - width: 87%; -} -.vertical-chart .plot-container [data-cp-size="88"] { - width: 88%; -} -.vertical-chart .plot-container [data-cp-size="89"] { - width: 89%; -} -.vertical-chart .plot-container [data-cp-size="90"] { - width: 90%; -} -.vertical-chart .plot-container [data-cp-size="91"] { - width: 91%; -} -.vertical-chart .plot-container [data-cp-size="92"] { - width: 92%; -} -.vertical-chart .plot-container [data-cp-size="93"] { - width: 93%; -} -.vertical-chart .plot-container [data-cp-size="94"] { - width: 94%; -} -.vertical-chart .plot-container [data-cp-size="95"] { - width: 95%; -} -.vertical-chart .plot-container [data-cp-size="96"] { - width: 96%; -} -.vertical-chart .plot-container [data-cp-size="97"] { - width: 97%; -} -.vertical-chart .plot-container [data-cp-size="98"] { - width: 98%; -} -.vertical-chart .plot-container [data-cp-size="99"] { - width: 99%; -} -.vertical-chart .plot-container [data-cp-size="100"] { - width: 100%; -} -.scatter-plot .plot-container [data-cp-x="0"] { - left: 0%; -} -.scatter-plot .plot-container [data-cp-x="1"] { - left: 1%; -} -.scatter-plot .plot-container [data-cp-x="2"] { - left: 2%; -} -.scatter-plot .plot-container [data-cp-x="3"] { - left: 3%; -} -.scatter-plot .plot-container [data-cp-x="4"] { - left: 4%; -} -.scatter-plot .plot-container [data-cp-x="5"] { - left: 5%; -} -.scatter-plot .plot-container [data-cp-x="6"] { - left: 6%; -} -.scatter-plot .plot-container [data-cp-x="7"] { - left: 7%; -} -.scatter-plot .plot-container [data-cp-x="8"] { - left: 8%; -} -.scatter-plot .plot-container [data-cp-x="9"] { - left: 9%; -} -.scatter-plot .plot-container [data-cp-x="10"] { - left: 10%; -} -.scatter-plot .plot-container [data-cp-x="11"] { - left: 11%; -} -.scatter-plot .plot-container [data-cp-x="12"] { - left: 12%; -} -.scatter-plot .plot-container [data-cp-x="13"] { - left: 13%; -} -.scatter-plot .plot-container [data-cp-x="14"] { - left: 14%; -} -.scatter-plot .plot-container [data-cp-x="15"] { - left: 15%; -} -.scatter-plot .plot-container [data-cp-x="16"] { - left: 16%; -} -.scatter-plot .plot-container [data-cp-x="17"] { - left: 17%; -} -.scatter-plot .plot-container [data-cp-x="18"] { - left: 18%; -} -.scatter-plot .plot-container [data-cp-x="19"] { - left: 19%; -} -.scatter-plot .plot-container [data-cp-x="20"] { - left: 20%; -} -.scatter-plot .plot-container [data-cp-x="21"] { - left: 21%; -} -.scatter-plot .plot-container [data-cp-x="22"] { - left: 22%; -} -.scatter-plot .plot-container [data-cp-x="23"] { - left: 23%; -} -.scatter-plot .plot-container [data-cp-x="24"] { - left: 24%; -} -.scatter-plot .plot-container [data-cp-x="25"] { - left: 25%; -} -.scatter-plot .plot-container [data-cp-x="26"] { - left: 26%; -} -.scatter-plot .plot-container [data-cp-x="27"] { - left: 27%; -} -.scatter-plot .plot-container [data-cp-x="28"] { - left: 28%; -} -.scatter-plot .plot-container [data-cp-x="29"] { - left: 29%; -} -.scatter-plot .plot-container [data-cp-x="30"] { - left: 30%; -} -.scatter-plot .plot-container [data-cp-x="31"] { - left: 31%; -} -.scatter-plot .plot-container [data-cp-x="32"] { - left: 32%; -} -.scatter-plot .plot-container [data-cp-x="33"] { - left: 33%; -} -.scatter-plot .plot-container [data-cp-x="34"] { - left: 34%; -} -.scatter-plot .plot-container [data-cp-x="35"] { - left: 35%; -} -.scatter-plot .plot-container [data-cp-x="36"] { - left: 36%; -} -.scatter-plot .plot-container [data-cp-x="37"] { - left: 37%; -} -.scatter-plot .plot-container [data-cp-x="38"] { - left: 38%; -} -.scatter-plot .plot-container [data-cp-x="39"] { - left: 39%; -} -.scatter-plot .plot-container [data-cp-x="40"] { - left: 40%; -} -.scatter-plot .plot-container [data-cp-x="41"] { - left: 41%; -} -.scatter-plot .plot-container [data-cp-x="42"] { - left: 42%; -} -.scatter-plot .plot-container [data-cp-x="43"] { - left: 43%; -} -.scatter-plot .plot-container [data-cp-x="44"] { - left: 44%; -} -.scatter-plot .plot-container [data-cp-x="45"] { - left: 45%; -} -.scatter-plot .plot-container [data-cp-x="46"] { - left: 46%; -} -.scatter-plot .plot-container [data-cp-x="47"] { - left: 47%; -} -.scatter-plot .plot-container [data-cp-x="48"] { - left: 48%; -} -.scatter-plot .plot-container [data-cp-x="49"] { - left: 49%; -} -.scatter-plot .plot-container [data-cp-x="50"] { - left: 50%; -} -.scatter-plot .plot-container [data-cp-x="51"] { - left: 51%; -} -.scatter-plot .plot-container [data-cp-x="52"] { - left: 52%; -} -.scatter-plot .plot-container [data-cp-x="53"] { - left: 53%; -} -.scatter-plot .plot-container [data-cp-x="54"] { - left: 54%; -} -.scatter-plot .plot-container [data-cp-x="55"] { - left: 55%; -} -.scatter-plot .plot-container [data-cp-x="56"] { - left: 56%; -} -.scatter-plot .plot-container [data-cp-x="57"] { - left: 57%; -} -.scatter-plot .plot-container [data-cp-x="58"] { - left: 58%; -} -.scatter-plot .plot-container [data-cp-x="59"] { - left: 59%; -} -.scatter-plot .plot-container [data-cp-x="60"] { - left: 60%; -} -.scatter-plot .plot-container [data-cp-x="61"] { - left: 61%; -} -.scatter-plot .plot-container [data-cp-x="62"] { - left: 62%; -} -.scatter-plot .plot-container [data-cp-x="63"] { - left: 63%; -} -.scatter-plot .plot-container [data-cp-x="64"] { - left: 64%; -} -.scatter-plot .plot-container [data-cp-x="65"] { - left: 65%; -} -.scatter-plot .plot-container [data-cp-x="66"] { - left: 66%; -} -.scatter-plot .plot-container [data-cp-x="67"] { - left: 67%; -} -.scatter-plot .plot-container [data-cp-x="68"] { - left: 68%; -} -.scatter-plot .plot-container [data-cp-x="69"] { - left: 69%; -} -.scatter-plot .plot-container [data-cp-x="70"] { - left: 70%; -} -.scatter-plot .plot-container [data-cp-x="71"] { - left: 71%; -} -.scatter-plot .plot-container [data-cp-x="72"] { - left: 72%; -} -.scatter-plot .plot-container [data-cp-x="73"] { - left: 73%; -} -.scatter-plot .plot-container [data-cp-x="74"] { - left: 74%; -} -.scatter-plot .plot-container [data-cp-x="75"] { - left: 75%; -} -.scatter-plot .plot-container [data-cp-x="76"] { - left: 76%; -} -.scatter-plot .plot-container [data-cp-x="77"] { - left: 77%; -} -.scatter-plot .plot-container [data-cp-x="78"] { - left: 78%; -} -.scatter-plot .plot-container [data-cp-x="79"] { - left: 79%; -} -.scatter-plot .plot-container [data-cp-x="80"] { - left: 80%; -} -.scatter-plot .plot-container [data-cp-x="81"] { - left: 81%; -} -.scatter-plot .plot-container [data-cp-x="82"] { - left: 82%; -} -.scatter-plot .plot-container [data-cp-x="83"] { - left: 83%; -} -.scatter-plot .plot-container [data-cp-x="84"] { - left: 84%; -} -.scatter-plot .plot-container [data-cp-x="85"] { - left: 85%; -} -.scatter-plot .plot-container [data-cp-x="86"] { - left: 86%; -} -.scatter-plot .plot-container [data-cp-x="87"] { - left: 87%; -} -.scatter-plot .plot-container [data-cp-x="88"] { - left: 88%; -} -.scatter-plot .plot-container [data-cp-x="89"] { - left: 89%; -} -.scatter-plot .plot-container [data-cp-x="90"] { - left: 90%; -} -.scatter-plot .plot-container [data-cp-x="91"] { - left: 91%; -} -.scatter-plot .plot-container [data-cp-x="92"] { - left: 92%; -} -.scatter-plot .plot-container [data-cp-x="93"] { - left: 93%; -} -.scatter-plot .plot-container [data-cp-x="94"] { - left: 94%; -} -.scatter-plot .plot-container [data-cp-x="95"] { - left: 95%; -} -.scatter-plot .plot-container [data-cp-x="96"] { - left: 96%; -} -.scatter-plot .plot-container [data-cp-x="97"] { - left: 97%; -} -.scatter-plot .plot-container [data-cp-x="98"] { - left: 98%; -} -.scatter-plot .plot-container [data-cp-x="99"] { - left: 99%; -} -.scatter-plot .plot-container [data-cp-x="100"] { - left: 100%; -} -.scatter-plot .plot-container [data-cp-y="0"] { - bottom: 0%; -} -.scatter-plot .plot-container [data-cp-y="1"] { - bottom: 1%; -} -.scatter-plot .plot-container [data-cp-y="2"] { - bottom: 2%; -} -.scatter-plot .plot-container [data-cp-y="3"] { - bottom: 3%; -} -.scatter-plot .plot-container [data-cp-y="4"] { - bottom: 4%; -} -.scatter-plot .plot-container [data-cp-y="5"] { - bottom: 5%; -} -.scatter-plot .plot-container [data-cp-y="6"] { - bottom: 6%; -} -.scatter-plot .plot-container [data-cp-y="7"] { - bottom: 7%; -} -.scatter-plot .plot-container [data-cp-y="8"] { - bottom: 8%; -} -.scatter-plot .plot-container [data-cp-y="9"] { - bottom: 9%; -} -.scatter-plot .plot-container [data-cp-y="10"] { - bottom: 10%; -} -.scatter-plot .plot-container [data-cp-y="11"] { - bottom: 11%; -} -.scatter-plot .plot-container [data-cp-y="12"] { - bottom: 12%; -} -.scatter-plot .plot-container [data-cp-y="13"] { - bottom: 13%; -} -.scatter-plot .plot-container [data-cp-y="14"] { - bottom: 14%; -} -.scatter-plot .plot-container [data-cp-y="15"] { - bottom: 15%; -} -.scatter-plot .plot-container [data-cp-y="16"] { - bottom: 16%; -} -.scatter-plot .plot-container [data-cp-y="17"] { - bottom: 17%; -} -.scatter-plot .plot-container [data-cp-y="18"] { - bottom: 18%; -} -.scatter-plot .plot-container [data-cp-y="19"] { - bottom: 19%; -} -.scatter-plot .plot-container [data-cp-y="20"] { - bottom: 20%; -} -.scatter-plot .plot-container [data-cp-y="21"] { - bottom: 21%; -} -.scatter-plot .plot-container [data-cp-y="22"] { - bottom: 22%; -} -.scatter-plot .plot-container [data-cp-y="23"] { - bottom: 23%; -} -.scatter-plot .plot-container [data-cp-y="24"] { - bottom: 24%; -} -.scatter-plot .plot-container [data-cp-y="25"] { - bottom: 25%; -} -.scatter-plot .plot-container [data-cp-y="26"] { - bottom: 26%; -} -.scatter-plot .plot-container [data-cp-y="27"] { - bottom: 27%; -} -.scatter-plot .plot-container [data-cp-y="28"] { - bottom: 28%; -} -.scatter-plot .plot-container [data-cp-y="29"] { - bottom: 29%; -} -.scatter-plot .plot-container [data-cp-y="30"] { - bottom: 30%; -} -.scatter-plot .plot-container [data-cp-y="31"] { - bottom: 31%; -} -.scatter-plot .plot-container [data-cp-y="32"] { - bottom: 32%; -} -.scatter-plot .plot-container [data-cp-y="33"] { - bottom: 33%; -} -.scatter-plot .plot-container [data-cp-y="34"] { - bottom: 34%; -} -.scatter-plot .plot-container [data-cp-y="35"] { - bottom: 35%; -} -.scatter-plot .plot-container [data-cp-y="36"] { - bottom: 36%; -} -.scatter-plot .plot-container [data-cp-y="37"] { - bottom: 37%; -} -.scatter-plot .plot-container [data-cp-y="38"] { - bottom: 38%; -} -.scatter-plot .plot-container [data-cp-y="39"] { - bottom: 39%; -} -.scatter-plot .plot-container [data-cp-y="40"] { - bottom: 40%; -} -.scatter-plot .plot-container [data-cp-y="41"] { - bottom: 41%; -} -.scatter-plot .plot-container [data-cp-y="42"] { - bottom: 42%; -} -.scatter-plot .plot-container [data-cp-y="43"] { - bottom: 43%; -} -.scatter-plot .plot-container [data-cp-y="44"] { - bottom: 44%; -} -.scatter-plot .plot-container [data-cp-y="45"] { - bottom: 45%; -} -.scatter-plot .plot-container [data-cp-y="46"] { - bottom: 46%; -} -.scatter-plot .plot-container [data-cp-y="47"] { - bottom: 47%; -} -.scatter-plot .plot-container [data-cp-y="48"] { - bottom: 48%; -} -.scatter-plot .plot-container [data-cp-y="49"] { - bottom: 49%; -} -.scatter-plot .plot-container [data-cp-y="50"] { - bottom: 50%; -} -.scatter-plot .plot-container [data-cp-y="51"] { - bottom: 51%; -} -.scatter-plot .plot-container [data-cp-y="52"] { - bottom: 52%; -} -.scatter-plot .plot-container [data-cp-y="53"] { - bottom: 53%; -} -.scatter-plot .plot-container [data-cp-y="54"] { - bottom: 54%; -} -.scatter-plot .plot-container [data-cp-y="55"] { - bottom: 55%; -} -.scatter-plot .plot-container [data-cp-y="56"] { - bottom: 56%; -} -.scatter-plot .plot-container [data-cp-y="57"] { - bottom: 57%; -} -.scatter-plot .plot-container [data-cp-y="58"] { - bottom: 58%; -} -.scatter-plot .plot-container [data-cp-y="59"] { - bottom: 59%; -} -.scatter-plot .plot-container [data-cp-y="60"] { - bottom: 60%; -} -.scatter-plot .plot-container [data-cp-y="61"] { - bottom: 61%; -} -.scatter-plot .plot-container [data-cp-y="62"] { - bottom: 62%; -} -.scatter-plot .plot-container [data-cp-y="63"] { - bottom: 63%; -} -.scatter-plot .plot-container [data-cp-y="64"] { - bottom: 64%; -} -.scatter-plot .plot-container [data-cp-y="65"] { - bottom: 65%; -} -.scatter-plot .plot-container [data-cp-y="66"] { - bottom: 66%; -} -.scatter-plot .plot-container [data-cp-y="67"] { - bottom: 67%; -} -.scatter-plot .plot-container [data-cp-y="68"] { - bottom: 68%; -} -.scatter-plot .plot-container [data-cp-y="69"] { - bottom: 69%; -} -.scatter-plot .plot-container [data-cp-y="70"] { - bottom: 70%; -} -.scatter-plot .plot-container [data-cp-y="71"] { - bottom: 71%; -} -.scatter-plot .plot-container [data-cp-y="72"] { - bottom: 72%; -} -.scatter-plot .plot-container [data-cp-y="73"] { - bottom: 73%; -} -.scatter-plot .plot-container [data-cp-y="74"] { - bottom: 74%; -} -.scatter-plot .plot-container [data-cp-y="75"] { - bottom: 75%; -} -.scatter-plot .plot-container [data-cp-y="76"] { - bottom: 76%; -} -.scatter-plot .plot-container [data-cp-y="77"] { - bottom: 77%; -} -.scatter-plot .plot-container [data-cp-y="78"] { - bottom: 78%; -} -.scatter-plot .plot-container [data-cp-y="79"] { - bottom: 79%; -} -.scatter-plot .plot-container [data-cp-y="80"] { - bottom: 80%; -} -.scatter-plot .plot-container [data-cp-y="81"] { - bottom: 81%; -} -.scatter-plot .plot-container [data-cp-y="82"] { - bottom: 82%; -} -.scatter-plot .plot-container [data-cp-y="83"] { - bottom: 83%; -} -.scatter-plot .plot-container [data-cp-y="84"] { - bottom: 84%; -} -.scatter-plot .plot-container [data-cp-y="85"] { - bottom: 85%; -} -.scatter-plot .plot-container [data-cp-y="86"] { - bottom: 86%; -} -.scatter-plot .plot-container [data-cp-y="87"] { - bottom: 87%; -} -.scatter-plot .plot-container [data-cp-y="88"] { - bottom: 88%; -} -.scatter-plot .plot-container [data-cp-y="89"] { - bottom: 89%; -} -.scatter-plot .plot-container [data-cp-y="90"] { - bottom: 90%; -} -.scatter-plot .plot-container [data-cp-y="91"] { - bottom: 91%; -} -.scatter-plot .plot-container [data-cp-y="92"] { - bottom: 92%; -} -.scatter-plot .plot-container [data-cp-y="93"] { - bottom: 93%; -} -.scatter-plot .plot-container [data-cp-y="94"] { - bottom: 94%; -} -.scatter-plot .plot-container [data-cp-y="95"] { - bottom: 95%; -} -.scatter-plot .plot-container [data-cp-y="96"] { - bottom: 96%; -} -.scatter-plot .plot-container [data-cp-y="97"] { - bottom: 97%; -} -.scatter-plot .plot-container [data-cp-y="98"] { - bottom: 98%; -} -.scatter-plot .plot-container [data-cp-y="99"] { - bottom: 99%; -} -.scatter-plot .plot-container [data-cp-y="100"] { - bottom: 100%; -} +.bar-chart,.horizontal-chart,.scatter-plot{position:relative;min-width:100px;min-height:100px;padding:0;margin:0}.bar-chart .plot-container{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;position:absolute;text-align:center;top:0;left:0;bottom:0;right:0;padding:0;margin:0;min-height:100px}.bar-chart .plot-container[data-cp-transition="fade"] [data-cp-delay]{opacity:0;-webkit-animation-name:chart-opacity;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:chart-opacity;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.bar-chart .plot-container[data-cp-transition="grow"] [data-cp-delay]{-webkit-transform:scaleY(0);-webkit-transform-origin:center bottom;transform:scaleY(0);transform-origin:center bottom;-webkit-animation-name:bar-chart-grow;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:bar-chart-grow;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.bar-chart .chart-column,.bar-chart [data-cp-size]{-webkit-flex-grow:1;flex-grow:1;-webkit-align-self:flex-end;align-self:flex-end}.bar-chart .chart-column,.horizontal-chart .chart-row,.bar-chart [data-cp-size],.horizontal-chart [data-cp-size]{background:#3498db;color:#fff;list-style:none;border:1px solid #fff;box-sizing:border-box}.horizontal-chart{clear:both}.horizontal-chart .plot-container{flex-direction:row;padding:0;margin:0;width:100%}.horizontal-chart .plot-container[data-cp-transition="fade"] [data-cp-delay]{opacity:0;-webkit-animation-name:chart-opacity;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:chart-opacity;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.horizontal-chart .plot-container[data-cp-transition="grow"] [data-cp-delay]{-webkit-transform:scaleX(0);-webkit-transform-origin:left center;transform:scaleX(0);transform-origin:left center;-webkit-animation-name:horizontal-chart-grow;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:horizontal-chart-grow;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.horizontal-chart .chart-row,.horizontal-chart [data-cp-size]{min-height:1px}.scatter-plot .plot-container{position:absolute;top:12px;left:0;right:12px;bottom:0;margin:0;padding:0}.scatter-plot .plot-container[data-cp-transition="fade"] [data-cp-delay]{opacity:0;-webkit-animation-name:chart-opacity;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:chart-opacity;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.scatter-plot .plot-container[data-cp-transition="grow"] [data-cp-delay]{-webkit-transform:scale(0);-webkit-transform-origin:center center;transform:scale(0);transform-origin:center center;-webkit-animation-name:horizontal-chart-grow;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:horizontal-chart-grow;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.scatter-plot .chart-dot,.scatter-plot .chart-dot,.scatter-plot [data-cp-x],.scatter-plot [data-cp-y]{position:absolute;height:0;width:0;list-style:none;overflow:hidden;border:6px solid #3498db;border-radius:100%}.bar-chart .plot-container [data-cp-size="0"]{height:0%}.bar-chart .plot-container [data-cp-size="1"]{height:1%}.bar-chart .plot-container [data-cp-size="2"]{height:2%}.bar-chart .plot-container [data-cp-size="3"]{height:3%}.bar-chart .plot-container [data-cp-size="4"]{height:4%}.bar-chart .plot-container [data-cp-size="5"]{height:5%}.bar-chart .plot-container [data-cp-size="6"]{height:6%}.bar-chart .plot-container [data-cp-size="7"]{height:7%}.bar-chart .plot-container [data-cp-size="8"]{height:8%}.bar-chart .plot-container [data-cp-size="9"]{height:9%}.bar-chart .plot-container [data-cp-size="10"]{height:10%}.bar-chart .plot-container [data-cp-size="11"]{height:11%}.bar-chart .plot-container [data-cp-size="12"]{height:12%}.bar-chart .plot-container [data-cp-size="13"]{height:13%}.bar-chart .plot-container [data-cp-size="14"]{height:14%}.bar-chart .plot-container [data-cp-size="15"]{height:15%}.bar-chart .plot-container [data-cp-size="16"]{height:16%}.bar-chart .plot-container [data-cp-size="17"]{height:17%}.bar-chart .plot-container [data-cp-size="18"]{height:18%}.bar-chart .plot-container [data-cp-size="19"]{height:19%}.bar-chart .plot-container [data-cp-size="20"]{height:20%}.bar-chart .plot-container [data-cp-size="21"]{height:21%}.bar-chart .plot-container [data-cp-size="22"]{height:22%}.bar-chart .plot-container [data-cp-size="23"]{height:23%}.bar-chart .plot-container [data-cp-size="24"]{height:24%}.bar-chart .plot-container [data-cp-size="25"]{height:25%}.bar-chart .plot-container [data-cp-size="26"]{height:26%}.bar-chart .plot-container [data-cp-size="27"]{height:27%}.bar-chart .plot-container [data-cp-size="28"]{height:28%}.bar-chart .plot-container [data-cp-size="29"]{height:29%}.bar-chart .plot-container [data-cp-size="30"]{height:30%}.bar-chart .plot-container [data-cp-size="31"]{height:31%}.bar-chart .plot-container [data-cp-size="32"]{height:32%}.bar-chart .plot-container [data-cp-size="33"]{height:33%}.bar-chart .plot-container [data-cp-size="34"]{height:34%}.bar-chart .plot-container [data-cp-size="35"]{height:35%}.bar-chart .plot-container [data-cp-size="36"]{height:36%}.bar-chart .plot-container [data-cp-size="37"]{height:37%}.bar-chart .plot-container [data-cp-size="38"]{height:38%}.bar-chart .plot-container [data-cp-size="39"]{height:39%}.bar-chart .plot-container [data-cp-size="40"]{height:40%}.bar-chart .plot-container [data-cp-size="41"]{height:41%}.bar-chart .plot-container [data-cp-size="42"]{height:42%}.bar-chart .plot-container [data-cp-size="43"]{height:43%}.bar-chart .plot-container [data-cp-size="44"]{height:44%}.bar-chart .plot-container [data-cp-size="45"]{height:45%}.bar-chart .plot-container [data-cp-size="46"]{height:46%}.bar-chart .plot-container [data-cp-size="47"]{height:47%}.bar-chart .plot-container [data-cp-size="48"]{height:48%}.bar-chart .plot-container [data-cp-size="49"]{height:49%}.bar-chart .plot-container [data-cp-size="50"]{height:50%}.bar-chart .plot-container [data-cp-size="51"]{height:51%}.bar-chart .plot-container [data-cp-size="52"]{height:52%}.bar-chart .plot-container [data-cp-size="53"]{height:53%}.bar-chart .plot-container [data-cp-size="54"]{height:54%}.bar-chart .plot-container [data-cp-size="55"]{height:55%}.bar-chart .plot-container [data-cp-size="56"]{height:56%}.bar-chart .plot-container [data-cp-size="57"]{height:57%}.bar-chart .plot-container [data-cp-size="58"]{height:58%}.bar-chart .plot-container [data-cp-size="59"]{height:59%}.bar-chart .plot-container [data-cp-size="60"]{height:60%}.bar-chart .plot-container [data-cp-size="61"]{height:61%}.bar-chart .plot-container [data-cp-size="62"]{height:62%}.bar-chart .plot-container [data-cp-size="63"]{height:63%}.bar-chart .plot-container [data-cp-size="64"]{height:64%}.bar-chart .plot-container [data-cp-size="65"]{height:65%}.bar-chart .plot-container [data-cp-size="66"]{height:66%}.bar-chart .plot-container [data-cp-size="67"]{height:67%}.bar-chart .plot-container [data-cp-size="68"]{height:68%}.bar-chart .plot-container [data-cp-size="69"]{height:69%}.bar-chart .plot-container [data-cp-size="70"]{height:70%}.bar-chart .plot-container [data-cp-size="71"]{height:71%}.bar-chart .plot-container [data-cp-size="72"]{height:72%}.bar-chart .plot-container [data-cp-size="73"]{height:73%}.bar-chart .plot-container [data-cp-size="74"]{height:74%}.bar-chart .plot-container [data-cp-size="75"]{height:75%}.bar-chart .plot-container [data-cp-size="76"]{height:76%}.bar-chart .plot-container [data-cp-size="77"]{height:77%}.bar-chart .plot-container [data-cp-size="78"]{height:78%}.bar-chart .plot-container [data-cp-size="79"]{height:79%}.bar-chart .plot-container [data-cp-size="80"]{height:80%}.bar-chart .plot-container [data-cp-size="81"]{height:81%}.bar-chart .plot-container [data-cp-size="82"]{height:82%}.bar-chart .plot-container [data-cp-size="83"]{height:83%}.bar-chart .plot-container [data-cp-size="84"]{height:84%}.bar-chart .plot-container [data-cp-size="85"]{height:85%}.bar-chart .plot-container [data-cp-size="86"]{height:86%}.bar-chart .plot-container [data-cp-size="87"]{height:87%}.bar-chart .plot-container [data-cp-size="88"]{height:88%}.bar-chart .plot-container [data-cp-size="89"]{height:89%}.bar-chart .plot-container [data-cp-size="90"]{height:90%}.bar-chart .plot-container [data-cp-size="91"]{height:91%}.bar-chart .plot-container [data-cp-size="92"]{height:92%}.bar-chart .plot-container [data-cp-size="93"]{height:93%}.bar-chart .plot-container [data-cp-size="94"]{height:94%}.bar-chart .plot-container [data-cp-size="95"]{height:95%}.bar-chart .plot-container [data-cp-size="96"]{height:96%}.bar-chart .plot-container [data-cp-size="97"]{height:97%}.bar-chart .plot-container [data-cp-size="98"]{height:98%}.bar-chart .plot-container [data-cp-size="99"]{height:99%}.bar-chart .plot-container [data-cp-size="100"]{height:100%}.bar-chart .plot-container [data-cp-delay="50"]{-webkit-animation-delay:5s;animation-delay:5s}.bar-chart .plot-container [data-cp-delay="49"]{-webkit-animation-delay:4.9s;animation-delay:4.9s}.bar-chart .plot-container [data-cp-delay="48"]{-webkit-animation-delay:4.8s;animation-delay:4.8s}.bar-chart .plot-container [data-cp-delay="47"]{-webkit-animation-delay:4.7s;animation-delay:4.7s}.bar-chart .plot-container [data-cp-delay="46"]{-webkit-animation-delay:4.6s;animation-delay:4.6s}.bar-chart .plot-container [data-cp-delay="45"]{-webkit-animation-delay:4.5s;animation-delay:4.5s}.bar-chart .plot-container [data-cp-delay="44"]{-webkit-animation-delay:4.4s;animation-delay:4.4s}.bar-chart .plot-container [data-cp-delay="43"]{-webkit-animation-delay:4.3s;animation-delay:4.3s}.bar-chart .plot-container [data-cp-delay="42"]{-webkit-animation-delay:4.2s;animation-delay:4.2s}.bar-chart .plot-container [data-cp-delay="41"]{-webkit-animation-delay:4.1s;animation-delay:4.1s}.bar-chart .plot-container [data-cp-delay="40"]{-webkit-animation-delay:4s;animation-delay:4s}.bar-chart .plot-container [data-cp-delay="39"]{-webkit-animation-delay:3.9s;animation-delay:3.9s}.bar-chart .plot-container [data-cp-delay="38"]{-webkit-animation-delay:3.8s;animation-delay:3.8s}.bar-chart .plot-container [data-cp-delay="37"]{-webkit-animation-delay:3.7s;animation-delay:3.7s}.bar-chart .plot-container [data-cp-delay="36"]{-webkit-animation-delay:3.6s;animation-delay:3.6s}.bar-chart .plot-container [data-cp-delay="35"]{-webkit-animation-delay:3.5s;animation-delay:3.5s}.bar-chart .plot-container [data-cp-delay="34"]{-webkit-animation-delay:3.4s;animation-delay:3.4s}.bar-chart .plot-container [data-cp-delay="33"]{-webkit-animation-delay:3.3s;animation-delay:3.3s}.bar-chart .plot-container [data-cp-delay="32"]{-webkit-animation-delay:3.2s;animation-delay:3.2s}.bar-chart .plot-container [data-cp-delay="31"]{-webkit-animation-delay:3.1s;animation-delay:3.1s}.bar-chart .plot-container [data-cp-delay="30"]{-webkit-animation-delay:3s;animation-delay:3s}.bar-chart .plot-container [data-cp-delay="29"]{-webkit-animation-delay:2.9s;animation-delay:2.9s}.bar-chart .plot-container [data-cp-delay="28"]{-webkit-animation-delay:2.8s;animation-delay:2.8s}.bar-chart .plot-container [data-cp-delay="27"]{-webkit-animation-delay:2.7s;animation-delay:2.7s}.bar-chart .plot-container [data-cp-delay="26"]{-webkit-animation-delay:2.6s;animation-delay:2.6s}.bar-chart .plot-container [data-cp-delay="25"]{-webkit-animation-delay:2.5s;animation-delay:2.5s}.bar-chart .plot-container [data-cp-delay="24"]{-webkit-animation-delay:2.4s;animation-delay:2.4s}.bar-chart .plot-container [data-cp-delay="23"]{-webkit-animation-delay:2.3s;animation-delay:2.3s}.bar-chart .plot-container [data-cp-delay="22"]{-webkit-animation-delay:2.2s;animation-delay:2.2s}.bar-chart .plot-container [data-cp-delay="21"]{-webkit-animation-delay:2.1s;animation-delay:2.1s}.bar-chart .plot-container [data-cp-delay="20"]{-webkit-animation-delay:2s;animation-delay:2s}.bar-chart .plot-container [data-cp-delay="19"]{-webkit-animation-delay:1.9s;animation-delay:1.9s}.bar-chart .plot-container [data-cp-delay="18"]{-webkit-animation-delay:1.8s;animation-delay:1.8s}.bar-chart .plot-container [data-cp-delay="17"]{-webkit-animation-delay:1.7s;animation-delay:1.7s}.bar-chart .plot-container [data-cp-delay="16"]{-webkit-animation-delay:1.6s;animation-delay:1.6s}.bar-chart .plot-container [data-cp-delay="15"]{-webkit-animation-delay:1.5s;animation-delay:1.5s}.bar-chart .plot-container [data-cp-delay="14"]{-webkit-animation-delay:1.4s;animation-delay:1.4s}.bar-chart .plot-container [data-cp-delay="13"]{-webkit-animation-delay:1.3s;animation-delay:1.3s}.bar-chart .plot-container [data-cp-delay="12"]{-webkit-animation-delay:1.2s;animation-delay:1.2s}.bar-chart .plot-container [data-cp-delay="11"]{-webkit-animation-delay:1.1s;animation-delay:1.1s}.bar-chart .plot-container [data-cp-delay="10"]{-webkit-animation-delay:1s;animation-delay:1s}.bar-chart .plot-container [data-cp-delay="9"]{-webkit-animation-delay:.9s;animation-delay:.9s}.bar-chart .plot-container [data-cp-delay="8"]{-webkit-animation-delay:.8s;animation-delay:.8s}.bar-chart .plot-container [data-cp-delay="7"]{-webkit-animation-delay:.7s;animation-delay:.7s}.bar-chart .plot-container [data-cp-delay="6"]{-webkit-animation-delay:.6s;animation-delay:.6s}.bar-chart .plot-container [data-cp-delay="5"]{-webkit-animation-delay:.5s;animation-delay:.5s}.bar-chart .plot-container [data-cp-delay="4"]{-webkit-animation-delay:.4s;animation-delay:.4s}.bar-chart .plot-container [data-cp-delay="3"]{-webkit-animation-delay:.3s;animation-delay:.3s}.bar-chart .plot-container [data-cp-delay="2"]{-webkit-animation-delay:.2s;animation-delay:.2s}.bar-chart .plot-container [data-cp-delay="1"]{-webkit-animation-delay:.1s;animation-delay:.1s}.horizontal-chart .plot-container [data-cp-size="0"]{width:0%}.horizontal-chart .plot-container [data-cp-size="1"]{width:1%}.horizontal-chart .plot-container [data-cp-size="2"]{width:2%}.horizontal-chart .plot-container [data-cp-size="3"]{width:3%}.horizontal-chart .plot-container [data-cp-size="4"]{width:4%}.horizontal-chart .plot-container [data-cp-size="5"]{width:5%}.horizontal-chart .plot-container [data-cp-size="6"]{width:6%}.horizontal-chart .plot-container [data-cp-size="7"]{width:7%}.horizontal-chart .plot-container [data-cp-size="8"]{width:8%}.horizontal-chart .plot-container [data-cp-size="9"]{width:9%}.horizontal-chart .plot-container [data-cp-size="10"]{width:10%}.horizontal-chart .plot-container [data-cp-size="11"]{width:11%}.horizontal-chart .plot-container [data-cp-size="12"]{width:12%}.horizontal-chart .plot-container [data-cp-size="13"]{width:13%}.horizontal-chart .plot-container [data-cp-size="14"]{width:14%}.horizontal-chart .plot-container [data-cp-size="15"]{width:15%}.horizontal-chart .plot-container [data-cp-size="16"]{width:16%}.horizontal-chart .plot-container [data-cp-size="17"]{width:17%}.horizontal-chart .plot-container [data-cp-size="18"]{width:18%}.horizontal-chart .plot-container [data-cp-size="19"]{width:19%}.horizontal-chart .plot-container [data-cp-size="20"]{width:20%}.horizontal-chart .plot-container [data-cp-size="21"]{width:21%}.horizontal-chart .plot-container [data-cp-size="22"]{width:22%}.horizontal-chart .plot-container [data-cp-size="23"]{width:23%}.horizontal-chart .plot-container [data-cp-size="24"]{width:24%}.horizontal-chart .plot-container [data-cp-size="25"]{width:25%}.horizontal-chart .plot-container [data-cp-size="26"]{width:26%}.horizontal-chart .plot-container [data-cp-size="27"]{width:27%}.horizontal-chart .plot-container [data-cp-size="28"]{width:28%}.horizontal-chart .plot-container [data-cp-size="29"]{width:29%}.horizontal-chart .plot-container [data-cp-size="30"]{width:30%}.horizontal-chart .plot-container [data-cp-size="31"]{width:31%}.horizontal-chart .plot-container [data-cp-size="32"]{width:32%}.horizontal-chart .plot-container [data-cp-size="33"]{width:33%}.horizontal-chart .plot-container [data-cp-size="34"]{width:34%}.horizontal-chart .plot-container [data-cp-size="35"]{width:35%}.horizontal-chart .plot-container [data-cp-size="36"]{width:36%}.horizontal-chart .plot-container [data-cp-size="37"]{width:37%}.horizontal-chart .plot-container [data-cp-size="38"]{width:38%}.horizontal-chart .plot-container [data-cp-size="39"]{width:39%}.horizontal-chart .plot-container [data-cp-size="40"]{width:40%}.horizontal-chart .plot-container [data-cp-size="41"]{width:41%}.horizontal-chart .plot-container [data-cp-size="42"]{width:42%}.horizontal-chart .plot-container [data-cp-size="43"]{width:43%}.horizontal-chart .plot-container [data-cp-size="44"]{width:44%}.horizontal-chart .plot-container [data-cp-size="45"]{width:45%}.horizontal-chart .plot-container [data-cp-size="46"]{width:46%}.horizontal-chart .plot-container [data-cp-size="47"]{width:47%}.horizontal-chart .plot-container [data-cp-size="48"]{width:48%}.horizontal-chart .plot-container [data-cp-size="49"]{width:49%}.horizontal-chart .plot-container [data-cp-size="50"]{width:50%}.horizontal-chart .plot-container [data-cp-size="51"]{width:51%}.horizontal-chart .plot-container [data-cp-size="52"]{width:52%}.horizontal-chart .plot-container [data-cp-size="53"]{width:53%}.horizontal-chart .plot-container [data-cp-size="54"]{width:54%}.horizontal-chart .plot-container [data-cp-size="55"]{width:55%}.horizontal-chart .plot-container [data-cp-size="56"]{width:56%}.horizontal-chart .plot-container [data-cp-size="57"]{width:57%}.horizontal-chart .plot-container [data-cp-size="58"]{width:58%}.horizontal-chart .plot-container [data-cp-size="59"]{width:59%}.horizontal-chart .plot-container [data-cp-size="60"]{width:60%}.horizontal-chart .plot-container [data-cp-size="61"]{width:61%}.horizontal-chart .plot-container [data-cp-size="62"]{width:62%}.horizontal-chart .plot-container [data-cp-size="63"]{width:63%}.horizontal-chart .plot-container [data-cp-size="64"]{width:64%}.horizontal-chart .plot-container [data-cp-size="65"]{width:65%}.horizontal-chart .plot-container [data-cp-size="66"]{width:66%}.horizontal-chart .plot-container [data-cp-size="67"]{width:67%}.horizontal-chart .plot-container [data-cp-size="68"]{width:68%}.horizontal-chart .plot-container [data-cp-size="69"]{width:69%}.horizontal-chart .plot-container [data-cp-size="70"]{width:70%}.horizontal-chart .plot-container [data-cp-size="71"]{width:71%}.horizontal-chart .plot-container [data-cp-size="72"]{width:72%}.horizontal-chart .plot-container [data-cp-size="73"]{width:73%}.horizontal-chart .plot-container [data-cp-size="74"]{width:74%}.horizontal-chart .plot-container [data-cp-size="75"]{width:75%}.horizontal-chart .plot-container [data-cp-size="76"]{width:76%}.horizontal-chart .plot-container [data-cp-size="77"]{width:77%}.horizontal-chart .plot-container [data-cp-size="78"]{width:78%}.horizontal-chart .plot-container [data-cp-size="79"]{width:79%}.horizontal-chart .plot-container [data-cp-size="80"]{width:80%}.horizontal-chart .plot-container [data-cp-size="81"]{width:81%}.horizontal-chart .plot-container [data-cp-size="82"]{width:82%}.horizontal-chart .plot-container [data-cp-size="83"]{width:83%}.horizontal-chart .plot-container [data-cp-size="84"]{width:84%}.horizontal-chart .plot-container [data-cp-size="85"]{width:85%}.horizontal-chart .plot-container [data-cp-size="86"]{width:86%}.horizontal-chart .plot-container [data-cp-size="87"]{width:87%}.horizontal-chart .plot-container [data-cp-size="88"]{width:88%}.horizontal-chart .plot-container [data-cp-size="89"]{width:89%}.horizontal-chart .plot-container [data-cp-size="90"]{width:90%}.horizontal-chart .plot-container [data-cp-size="91"]{width:91%}.horizontal-chart .plot-container [data-cp-size="92"]{width:92%}.horizontal-chart .plot-container [data-cp-size="93"]{width:93%}.horizontal-chart .plot-container [data-cp-size="94"]{width:94%}.horizontal-chart .plot-container [data-cp-size="95"]{width:95%}.horizontal-chart .plot-container [data-cp-size="96"]{width:96%}.horizontal-chart .plot-container [data-cp-size="97"]{width:97%}.horizontal-chart .plot-container [data-cp-size="98"]{width:98%}.horizontal-chart .plot-container [data-cp-size="99"]{width:99%}.horizontal-chart .plot-container [data-cp-size="100"]{width:100%}.horizontal-chart .plot-container [data-cp-delay="50"]{-webkit-animation-delay:5s;animation-delay:5s}.horizontal-chart .plot-container [data-cp-delay="49"]{-webkit-animation-delay:4.9s;animation-delay:4.9s}.horizontal-chart .plot-container [data-cp-delay="48"]{-webkit-animation-delay:4.8s;animation-delay:4.8s}.horizontal-chart .plot-container [data-cp-delay="47"]{-webkit-animation-delay:4.7s;animation-delay:4.7s}.horizontal-chart .plot-container [data-cp-delay="46"]{-webkit-animation-delay:4.6s;animation-delay:4.6s}.horizontal-chart .plot-container [data-cp-delay="45"]{-webkit-animation-delay:4.5s;animation-delay:4.5s}.horizontal-chart .plot-container [data-cp-delay="44"]{-webkit-animation-delay:4.4s;animation-delay:4.4s}.horizontal-chart .plot-container [data-cp-delay="43"]{-webkit-animation-delay:4.3s;animation-delay:4.3s}.horizontal-chart .plot-container [data-cp-delay="42"]{-webkit-animation-delay:4.2s;animation-delay:4.2s}.horizontal-chart .plot-container [data-cp-delay="41"]{-webkit-animation-delay:4.1s;animation-delay:4.1s}.horizontal-chart .plot-container [data-cp-delay="40"]{-webkit-animation-delay:4s;animation-delay:4s}.horizontal-chart .plot-container [data-cp-delay="39"]{-webkit-animation-delay:3.9s;animation-delay:3.9s}.horizontal-chart .plot-container [data-cp-delay="38"]{-webkit-animation-delay:3.8s;animation-delay:3.8s}.horizontal-chart .plot-container [data-cp-delay="37"]{-webkit-animation-delay:3.7s;animation-delay:3.7s}.horizontal-chart .plot-container [data-cp-delay="36"]{-webkit-animation-delay:3.6s;animation-delay:3.6s}.horizontal-chart .plot-container [data-cp-delay="35"]{-webkit-animation-delay:3.5s;animation-delay:3.5s}.horizontal-chart .plot-container [data-cp-delay="34"]{-webkit-animation-delay:3.4s;animation-delay:3.4s}.horizontal-chart .plot-container [data-cp-delay="33"]{-webkit-animation-delay:3.3s;animation-delay:3.3s}.horizontal-chart .plot-container [data-cp-delay="32"]{-webkit-animation-delay:3.2s;animation-delay:3.2s}.horizontal-chart .plot-container [data-cp-delay="31"]{-webkit-animation-delay:3.1s;animation-delay:3.1s}.horizontal-chart .plot-container [data-cp-delay="30"]{-webkit-animation-delay:3s;animation-delay:3s}.horizontal-chart .plot-container [data-cp-delay="29"]{-webkit-animation-delay:2.9s;animation-delay:2.9s}.horizontal-chart .plot-container [data-cp-delay="28"]{-webkit-animation-delay:2.8s;animation-delay:2.8s}.horizontal-chart .plot-container [data-cp-delay="27"]{-webkit-animation-delay:2.7s;animation-delay:2.7s}.horizontal-chart .plot-container [data-cp-delay="26"]{-webkit-animation-delay:2.6s;animation-delay:2.6s}.horizontal-chart .plot-container [data-cp-delay="25"]{-webkit-animation-delay:2.5s;animation-delay:2.5s}.horizontal-chart .plot-container [data-cp-delay="24"]{-webkit-animation-delay:2.4s;animation-delay:2.4s}.horizontal-chart .plot-container [data-cp-delay="23"]{-webkit-animation-delay:2.3s;animation-delay:2.3s}.horizontal-chart .plot-container [data-cp-delay="22"]{-webkit-animation-delay:2.2s;animation-delay:2.2s}.horizontal-chart .plot-container [data-cp-delay="21"]{-webkit-animation-delay:2.1s;animation-delay:2.1s}.horizontal-chart .plot-container [data-cp-delay="20"]{-webkit-animation-delay:2s;animation-delay:2s}.horizontal-chart .plot-container [data-cp-delay="19"]{-webkit-animation-delay:1.9s;animation-delay:1.9s}.horizontal-chart .plot-container [data-cp-delay="18"]{-webkit-animation-delay:1.8s;animation-delay:1.8s}.horizontal-chart .plot-container [data-cp-delay="17"]{-webkit-animation-delay:1.7s;animation-delay:1.7s}.horizontal-chart .plot-container [data-cp-delay="16"]{-webkit-animation-delay:1.6s;animation-delay:1.6s}.horizontal-chart .plot-container [data-cp-delay="15"]{-webkit-animation-delay:1.5s;animation-delay:1.5s}.horizontal-chart .plot-container [data-cp-delay="14"]{-webkit-animation-delay:1.4s;animation-delay:1.4s}.horizontal-chart .plot-container [data-cp-delay="13"]{-webkit-animation-delay:1.3s;animation-delay:1.3s}.horizontal-chart .plot-container [data-cp-delay="12"]{-webkit-animation-delay:1.2s;animation-delay:1.2s}.horizontal-chart .plot-container [data-cp-delay="11"]{-webkit-animation-delay:1.1s;animation-delay:1.1s}.horizontal-chart .plot-container [data-cp-delay="10"]{-webkit-animation-delay:1s;animation-delay:1s}.horizontal-chart .plot-container [data-cp-delay="9"]{-webkit-animation-delay:.9s;animation-delay:.9s}.horizontal-chart .plot-container [data-cp-delay="8"]{-webkit-animation-delay:.8s;animation-delay:.8s}.horizontal-chart .plot-container [data-cp-delay="7"]{-webkit-animation-delay:.7s;animation-delay:.7s}.horizontal-chart .plot-container [data-cp-delay="6"]{-webkit-animation-delay:.6s;animation-delay:.6s}.horizontal-chart .plot-container [data-cp-delay="5"]{-webkit-animation-delay:.5s;animation-delay:.5s}.horizontal-chart .plot-container [data-cp-delay="4"]{-webkit-animation-delay:.4s;animation-delay:.4s}.horizontal-chart .plot-container [data-cp-delay="3"]{-webkit-animation-delay:.3s;animation-delay:.3s}.horizontal-chart .plot-container [data-cp-delay="2"]{-webkit-animation-delay:.2s;animation-delay:.2s}.horizontal-chart .plot-container [data-cp-delay="1"]{-webkit-animation-delay:.1s;animation-delay:.1s}.scatter-plot .plot-container [data-cp-x="0"]{left:0%}.scatter-plot .plot-container [data-cp-x="1"]{left:1%}.scatter-plot .plot-container [data-cp-x="2"]{left:2%}.scatter-plot .plot-container [data-cp-x="3"]{left:3%}.scatter-plot .plot-container [data-cp-x="4"]{left:4%}.scatter-plot .plot-container [data-cp-x="5"]{left:5%}.scatter-plot .plot-container [data-cp-x="6"]{left:6%}.scatter-plot .plot-container [data-cp-x="7"]{left:7%}.scatter-plot .plot-container [data-cp-x="8"]{left:8%}.scatter-plot .plot-container [data-cp-x="9"]{left:9%}.scatter-plot .plot-container [data-cp-x="10"]{left:10%}.scatter-plot .plot-container [data-cp-x="11"]{left:11%}.scatter-plot .plot-container [data-cp-x="12"]{left:12%}.scatter-plot .plot-container [data-cp-x="13"]{left:13%}.scatter-plot .plot-container [data-cp-x="14"]{left:14%}.scatter-plot .plot-container [data-cp-x="15"]{left:15%}.scatter-plot .plot-container [data-cp-x="16"]{left:16%}.scatter-plot .plot-container [data-cp-x="17"]{left:17%}.scatter-plot .plot-container [data-cp-x="18"]{left:18%}.scatter-plot .plot-container [data-cp-x="19"]{left:19%}.scatter-plot .plot-container [data-cp-x="20"]{left:20%}.scatter-plot .plot-container [data-cp-x="21"]{left:21%}.scatter-plot .plot-container [data-cp-x="22"]{left:22%}.scatter-plot .plot-container [data-cp-x="23"]{left:23%}.scatter-plot .plot-container [data-cp-x="24"]{left:24%}.scatter-plot .plot-container [data-cp-x="25"]{left:25%}.scatter-plot .plot-container [data-cp-x="26"]{left:26%}.scatter-plot .plot-container [data-cp-x="27"]{left:27%}.scatter-plot .plot-container [data-cp-x="28"]{left:28%}.scatter-plot .plot-container [data-cp-x="29"]{left:29%}.scatter-plot .plot-container [data-cp-x="30"]{left:30%}.scatter-plot .plot-container [data-cp-x="31"]{left:31%}.scatter-plot .plot-container [data-cp-x="32"]{left:32%}.scatter-plot .plot-container [data-cp-x="33"]{left:33%}.scatter-plot .plot-container [data-cp-x="34"]{left:34%}.scatter-plot .plot-container [data-cp-x="35"]{left:35%}.scatter-plot .plot-container [data-cp-x="36"]{left:36%}.scatter-plot .plot-container [data-cp-x="37"]{left:37%}.scatter-plot .plot-container [data-cp-x="38"]{left:38%}.scatter-plot .plot-container [data-cp-x="39"]{left:39%}.scatter-plot .plot-container [data-cp-x="40"]{left:40%}.scatter-plot .plot-container [data-cp-x="41"]{left:41%}.scatter-plot .plot-container [data-cp-x="42"]{left:42%}.scatter-plot .plot-container [data-cp-x="43"]{left:43%}.scatter-plot .plot-container [data-cp-x="44"]{left:44%}.scatter-plot .plot-container [data-cp-x="45"]{left:45%}.scatter-plot .plot-container [data-cp-x="46"]{left:46%}.scatter-plot .plot-container [data-cp-x="47"]{left:47%}.scatter-plot .plot-container [data-cp-x="48"]{left:48%}.scatter-plot .plot-container [data-cp-x="49"]{left:49%}.scatter-plot .plot-container [data-cp-x="50"]{left:50%}.scatter-plot .plot-container [data-cp-x="51"]{left:51%}.scatter-plot .plot-container [data-cp-x="52"]{left:52%}.scatter-plot .plot-container [data-cp-x="53"]{left:53%}.scatter-plot .plot-container [data-cp-x="54"]{left:54%}.scatter-plot .plot-container [data-cp-x="55"]{left:55%}.scatter-plot .plot-container [data-cp-x="56"]{left:56%}.scatter-plot .plot-container [data-cp-x="57"]{left:57%}.scatter-plot .plot-container [data-cp-x="58"]{left:58%}.scatter-plot .plot-container [data-cp-x="59"]{left:59%}.scatter-plot .plot-container [data-cp-x="60"]{left:60%}.scatter-plot .plot-container [data-cp-x="61"]{left:61%}.scatter-plot .plot-container [data-cp-x="62"]{left:62%}.scatter-plot .plot-container [data-cp-x="63"]{left:63%}.scatter-plot .plot-container [data-cp-x="64"]{left:64%}.scatter-plot .plot-container [data-cp-x="65"]{left:65%}.scatter-plot .plot-container [data-cp-x="66"]{left:66%}.scatter-plot .plot-container [data-cp-x="67"]{left:67%}.scatter-plot .plot-container [data-cp-x="68"]{left:68%}.scatter-plot .plot-container [data-cp-x="69"]{left:69%}.scatter-plot .plot-container [data-cp-x="70"]{left:70%}.scatter-plot .plot-container [data-cp-x="71"]{left:71%}.scatter-plot .plot-container [data-cp-x="72"]{left:72%}.scatter-plot .plot-container [data-cp-x="73"]{left:73%}.scatter-plot .plot-container [data-cp-x="74"]{left:74%}.scatter-plot .plot-container [data-cp-x="75"]{left:75%}.scatter-plot .plot-container [data-cp-x="76"]{left:76%}.scatter-plot .plot-container [data-cp-x="77"]{left:77%}.scatter-plot .plot-container [data-cp-x="78"]{left:78%}.scatter-plot .plot-container [data-cp-x="79"]{left:79%}.scatter-plot .plot-container [data-cp-x="80"]{left:80%}.scatter-plot .plot-container [data-cp-x="81"]{left:81%}.scatter-plot .plot-container [data-cp-x="82"]{left:82%}.scatter-plot .plot-container [data-cp-x="83"]{left:83%}.scatter-plot .plot-container [data-cp-x="84"]{left:84%}.scatter-plot .plot-container [data-cp-x="85"]{left:85%}.scatter-plot .plot-container [data-cp-x="86"]{left:86%}.scatter-plot .plot-container [data-cp-x="87"]{left:87%}.scatter-plot .plot-container [data-cp-x="88"]{left:88%}.scatter-plot .plot-container [data-cp-x="89"]{left:89%}.scatter-plot .plot-container [data-cp-x="90"]{left:90%}.scatter-plot .plot-container [data-cp-x="91"]{left:91%}.scatter-plot .plot-container [data-cp-x="92"]{left:92%}.scatter-plot .plot-container [data-cp-x="93"]{left:93%}.scatter-plot .plot-container [data-cp-x="94"]{left:94%}.scatter-plot .plot-container [data-cp-x="95"]{left:95%}.scatter-plot .plot-container [data-cp-x="96"]{left:96%}.scatter-plot .plot-container [data-cp-x="97"]{left:97%}.scatter-plot .plot-container [data-cp-x="98"]{left:98%}.scatter-plot .plot-container [data-cp-x="99"]{left:99%}.scatter-plot .plot-container [data-cp-x="100"]{left:100%}.scatter-plot .plot-container [data-cp-y="0"]{bottom:0%}.scatter-plot .plot-container [data-cp-y="1"]{bottom:1%}.scatter-plot .plot-container [data-cp-y="2"]{bottom:2%}.scatter-plot .plot-container [data-cp-y="3"]{bottom:3%}.scatter-plot .plot-container [data-cp-y="4"]{bottom:4%}.scatter-plot .plot-container [data-cp-y="5"]{bottom:5%}.scatter-plot .plot-container [data-cp-y="6"]{bottom:6%}.scatter-plot .plot-container [data-cp-y="7"]{bottom:7%}.scatter-plot .plot-container [data-cp-y="8"]{bottom:8%}.scatter-plot .plot-container [data-cp-y="9"]{bottom:9%}.scatter-plot .plot-container [data-cp-y="10"]{bottom:10%}.scatter-plot .plot-container [data-cp-y="11"]{bottom:11%}.scatter-plot .plot-container [data-cp-y="12"]{bottom:12%}.scatter-plot .plot-container [data-cp-y="13"]{bottom:13%}.scatter-plot .plot-container [data-cp-y="14"]{bottom:14%}.scatter-plot .plot-container [data-cp-y="15"]{bottom:15%}.scatter-plot .plot-container [data-cp-y="16"]{bottom:16%}.scatter-plot .plot-container [data-cp-y="17"]{bottom:17%}.scatter-plot .plot-container [data-cp-y="18"]{bottom:18%}.scatter-plot .plot-container [data-cp-y="19"]{bottom:19%}.scatter-plot .plot-container [data-cp-y="20"]{bottom:20%}.scatter-plot .plot-container [data-cp-y="21"]{bottom:21%}.scatter-plot .plot-container [data-cp-y="22"]{bottom:22%}.scatter-plot .plot-container [data-cp-y="23"]{bottom:23%}.scatter-plot .plot-container [data-cp-y="24"]{bottom:24%}.scatter-plot .plot-container [data-cp-y="25"]{bottom:25%}.scatter-plot .plot-container [data-cp-y="26"]{bottom:26%}.scatter-plot .plot-container [data-cp-y="27"]{bottom:27%}.scatter-plot .plot-container [data-cp-y="28"]{bottom:28%}.scatter-plot .plot-container [data-cp-y="29"]{bottom:29%}.scatter-plot .plot-container [data-cp-y="30"]{bottom:30%}.scatter-plot .plot-container [data-cp-y="31"]{bottom:31%}.scatter-plot .plot-container [data-cp-y="32"]{bottom:32%}.scatter-plot .plot-container [data-cp-y="33"]{bottom:33%}.scatter-plot .plot-container [data-cp-y="34"]{bottom:34%}.scatter-plot .plot-container [data-cp-y="35"]{bottom:35%}.scatter-plot .plot-container [data-cp-y="36"]{bottom:36%}.scatter-plot .plot-container [data-cp-y="37"]{bottom:37%}.scatter-plot .plot-container [data-cp-y="38"]{bottom:38%}.scatter-plot .plot-container [data-cp-y="39"]{bottom:39%}.scatter-plot .plot-container [data-cp-y="40"]{bottom:40%}.scatter-plot .plot-container [data-cp-y="41"]{bottom:41%}.scatter-plot .plot-container [data-cp-y="42"]{bottom:42%}.scatter-plot .plot-container [data-cp-y="43"]{bottom:43%}.scatter-plot .plot-container [data-cp-y="44"]{bottom:44%}.scatter-plot .plot-container [data-cp-y="45"]{bottom:45%}.scatter-plot .plot-container [data-cp-y="46"]{bottom:46%}.scatter-plot .plot-container [data-cp-y="47"]{bottom:47%}.scatter-plot .plot-container [data-cp-y="48"]{bottom:48%}.scatter-plot .plot-container [data-cp-y="49"]{bottom:49%}.scatter-plot .plot-container [data-cp-y="50"]{bottom:50%}.scatter-plot .plot-container [data-cp-y="51"]{bottom:51%}.scatter-plot .plot-container [data-cp-y="52"]{bottom:52%}.scatter-plot .plot-container [data-cp-y="53"]{bottom:53%}.scatter-plot .plot-container [data-cp-y="54"]{bottom:54%}.scatter-plot .plot-container [data-cp-y="55"]{bottom:55%}.scatter-plot .plot-container [data-cp-y="56"]{bottom:56%}.scatter-plot .plot-container [data-cp-y="57"]{bottom:57%}.scatter-plot .plot-container [data-cp-y="58"]{bottom:58%}.scatter-plot .plot-container [data-cp-y="59"]{bottom:59%}.scatter-plot .plot-container [data-cp-y="60"]{bottom:60%}.scatter-plot .plot-container [data-cp-y="61"]{bottom:61%}.scatter-plot .plot-container [data-cp-y="62"]{bottom:62%}.scatter-plot .plot-container [data-cp-y="63"]{bottom:63%}.scatter-plot .plot-container [data-cp-y="64"]{bottom:64%}.scatter-plot .plot-container [data-cp-y="65"]{bottom:65%}.scatter-plot .plot-container [data-cp-y="66"]{bottom:66%}.scatter-plot .plot-container [data-cp-y="67"]{bottom:67%}.scatter-plot .plot-container [data-cp-y="68"]{bottom:68%}.scatter-plot .plot-container [data-cp-y="69"]{bottom:69%}.scatter-plot .plot-container [data-cp-y="70"]{bottom:70%}.scatter-plot .plot-container [data-cp-y="71"]{bottom:71%}.scatter-plot .plot-container [data-cp-y="72"]{bottom:72%}.scatter-plot .plot-container [data-cp-y="73"]{bottom:73%}.scatter-plot .plot-container [data-cp-y="74"]{bottom:74%}.scatter-plot .plot-container [data-cp-y="75"]{bottom:75%}.scatter-plot .plot-container [data-cp-y="76"]{bottom:76%}.scatter-plot .plot-container [data-cp-y="77"]{bottom:77%}.scatter-plot .plot-container [data-cp-y="78"]{bottom:78%}.scatter-plot .plot-container [data-cp-y="79"]{bottom:79%}.scatter-plot .plot-container [data-cp-y="80"]{bottom:80%}.scatter-plot .plot-container [data-cp-y="81"]{bottom:81%}.scatter-plot .plot-container [data-cp-y="82"]{bottom:82%}.scatter-plot .plot-container [data-cp-y="83"]{bottom:83%}.scatter-plot .plot-container [data-cp-y="84"]{bottom:84%}.scatter-plot .plot-container [data-cp-y="85"]{bottom:85%}.scatter-plot .plot-container [data-cp-y="86"]{bottom:86%}.scatter-plot .plot-container [data-cp-y="87"]{bottom:87%}.scatter-plot .plot-container [data-cp-y="88"]{bottom:88%}.scatter-plot .plot-container [data-cp-y="89"]{bottom:89%}.scatter-plot .plot-container [data-cp-y="90"]{bottom:90%}.scatter-plot .plot-container [data-cp-y="91"]{bottom:91%}.scatter-plot .plot-container [data-cp-y="92"]{bottom:92%}.scatter-plot .plot-container [data-cp-y="93"]{bottom:93%}.scatter-plot .plot-container [data-cp-y="94"]{bottom:94%}.scatter-plot .plot-container [data-cp-y="95"]{bottom:95%}.scatter-plot .plot-container [data-cp-y="96"]{bottom:96%}.scatter-plot .plot-container [data-cp-y="97"]{bottom:97%}.scatter-plot .plot-container [data-cp-y="98"]{bottom:98%}.scatter-plot .plot-container [data-cp-y="99"]{bottom:99%}.scatter-plot .plot-container [data-cp-y="100"]{bottom:100%}.scatter-plot .plot-container [data-cp-delay="50"]{-webkit-animation-delay:5s;animation-delay:5s}.scatter-plot .plot-container [data-cp-delay="49"]{-webkit-animation-delay:4.9s;animation-delay:4.9s}.scatter-plot .plot-container [data-cp-delay="48"]{-webkit-animation-delay:4.8s;animation-delay:4.8s}.scatter-plot .plot-container [data-cp-delay="47"]{-webkit-animation-delay:4.7s;animation-delay:4.7s}.scatter-plot .plot-container [data-cp-delay="46"]{-webkit-animation-delay:4.6s;animation-delay:4.6s}.scatter-plot .plot-container [data-cp-delay="45"]{-webkit-animation-delay:4.5s;animation-delay:4.5s}.scatter-plot .plot-container [data-cp-delay="44"]{-webkit-animation-delay:4.4s;animation-delay:4.4s}.scatter-plot .plot-container [data-cp-delay="43"]{-webkit-animation-delay:4.3s;animation-delay:4.3s}.scatter-plot .plot-container [data-cp-delay="42"]{-webkit-animation-delay:4.2s;animation-delay:4.2s}.scatter-plot .plot-container [data-cp-delay="41"]{-webkit-animation-delay:4.1s;animation-delay:4.1s}.scatter-plot .plot-container [data-cp-delay="40"]{-webkit-animation-delay:4s;animation-delay:4s}.scatter-plot .plot-container [data-cp-delay="39"]{-webkit-animation-delay:3.9s;animation-delay:3.9s}.scatter-plot .plot-container [data-cp-delay="38"]{-webkit-animation-delay:3.8s;animation-delay:3.8s}.scatter-plot .plot-container [data-cp-delay="37"]{-webkit-animation-delay:3.7s;animation-delay:3.7s}.scatter-plot .plot-container [data-cp-delay="36"]{-webkit-animation-delay:3.6s;animation-delay:3.6s}.scatter-plot .plot-container [data-cp-delay="35"]{-webkit-animation-delay:3.5s;animation-delay:3.5s}.scatter-plot .plot-container [data-cp-delay="34"]{-webkit-animation-delay:3.4s;animation-delay:3.4s}.scatter-plot .plot-container [data-cp-delay="33"]{-webkit-animation-delay:3.3s;animation-delay:3.3s}.scatter-plot .plot-container [data-cp-delay="32"]{-webkit-animation-delay:3.2s;animation-delay:3.2s}.scatter-plot .plot-container [data-cp-delay="31"]{-webkit-animation-delay:3.1s;animation-delay:3.1s}.scatter-plot .plot-container [data-cp-delay="30"]{-webkit-animation-delay:3s;animation-delay:3s}.scatter-plot .plot-container [data-cp-delay="29"]{-webkit-animation-delay:2.9s;animation-delay:2.9s}.scatter-plot .plot-container [data-cp-delay="28"]{-webkit-animation-delay:2.8s;animation-delay:2.8s}.scatter-plot .plot-container [data-cp-delay="27"]{-webkit-animation-delay:2.7s;animation-delay:2.7s}.scatter-plot .plot-container [data-cp-delay="26"]{-webkit-animation-delay:2.6s;animation-delay:2.6s}.scatter-plot .plot-container [data-cp-delay="25"]{-webkit-animation-delay:2.5s;animation-delay:2.5s}.scatter-plot .plot-container [data-cp-delay="24"]{-webkit-animation-delay:2.4s;animation-delay:2.4s}.scatter-plot .plot-container [data-cp-delay="23"]{-webkit-animation-delay:2.3s;animation-delay:2.3s}.scatter-plot .plot-container [data-cp-delay="22"]{-webkit-animation-delay:2.2s;animation-delay:2.2s}.scatter-plot .plot-container [data-cp-delay="21"]{-webkit-animation-delay:2.1s;animation-delay:2.1s}.scatter-plot .plot-container [data-cp-delay="20"]{-webkit-animation-delay:2s;animation-delay:2s}.scatter-plot .plot-container [data-cp-delay="19"]{-webkit-animation-delay:1.9s;animation-delay:1.9s}.scatter-plot .plot-container [data-cp-delay="18"]{-webkit-animation-delay:1.8s;animation-delay:1.8s}.scatter-plot .plot-container [data-cp-delay="17"]{-webkit-animation-delay:1.7s;animation-delay:1.7s}.scatter-plot .plot-container [data-cp-delay="16"]{-webkit-animation-delay:1.6s;animation-delay:1.6s}.scatter-plot .plot-container [data-cp-delay="15"]{-webkit-animation-delay:1.5s;animation-delay:1.5s}.scatter-plot .plot-container [data-cp-delay="14"]{-webkit-animation-delay:1.4s;animation-delay:1.4s}.scatter-plot .plot-container [data-cp-delay="13"]{-webkit-animation-delay:1.3s;animation-delay:1.3s}.scatter-plot .plot-container [data-cp-delay="12"]{-webkit-animation-delay:1.2s;animation-delay:1.2s}.scatter-plot .plot-container [data-cp-delay="11"]{-webkit-animation-delay:1.1s;animation-delay:1.1s}.scatter-plot .plot-container [data-cp-delay="10"]{-webkit-animation-delay:1s;animation-delay:1s}.scatter-plot .plot-container [data-cp-delay="9"]{-webkit-animation-delay:.9s;animation-delay:.9s}.scatter-plot .plot-container [data-cp-delay="8"]{-webkit-animation-delay:.8s;animation-delay:.8s}.scatter-plot .plot-container [data-cp-delay="7"]{-webkit-animation-delay:.7s;animation-delay:.7s}.scatter-plot .plot-container [data-cp-delay="6"]{-webkit-animation-delay:.6s;animation-delay:.6s}.scatter-plot .plot-container [data-cp-delay="5"]{-webkit-animation-delay:.5s;animation-delay:.5s}.scatter-plot .plot-container [data-cp-delay="4"]{-webkit-animation-delay:.4s;animation-delay:.4s}.scatter-plot .plot-container [data-cp-delay="3"]{-webkit-animation-delay:.3s;animation-delay:.3s}.scatter-plot .plot-container [data-cp-delay="2"]{-webkit-animation-delay:.2s;animation-delay:.2s}.scatter-plot .plot-container [data-cp-delay="1"]{-webkit-animation-delay:.1s;animation-delay:.1s}@-webkit-keyframes chart-opacity{from{opacity:0}to{opacity:1}}@keyframes chart-opacity{from{opacity:0}to{opacity:1}}@-webkit-keyframes bar-chart-grow{from{-webkit-transform:scaleY(0)}to{-webkit-transform:scaleY(1)}}@keyframes bar-chart-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}@-webkit-keyframes horizontal-chart-grow{from{-webkit-transform:scaleX(0)}to{-webkit-transform:scaleX(1)}}@keyframes horizontal-chart-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@-webkit-keyframes scatter-chart-grow{from{-webkit-transform:scale(0)}to{-webkit-transform:scale(1)}}@keyframes scatter-chart-grow{from{transform:scale(0)}to{transform:scale(1)}} \ No newline at end of file diff --git a/build/cssplot.group.css b/build/cssplot.group.css index 2af1e22..cc55803 100644 --- a/build/cssplot.group.css +++ b/build/cssplot.group.css @@ -1,32 +1 @@ -.group-by-gender .male { - background: #3498db; - color: #ffffff; -} -.group-by-gender .female { - background: #ff6699; - color: #ffffff; -} -.group-by-number [data-group="0"] { - background: #3498db; - color: #ffffff; -} -.group-by-number [data-group="1"] { - background: #ff6699; - color: #ffffff; -} -.group-by-number [data-group="2"] { - background: #93b881; - color: #ffffff; -} -.group-by-number [data-group="3"] { - background: #e09e87; - color: #ffffff; -} -.group-by-number [data-group="4"] { - background: #a22041; - color: #ffffff; -} -.group-by-number [data-group="5"] { - background: #95879c; - color: #ffffff; -} +.group-by-gender .male{background:#3498db;color:#fff}.group-by-gender .female{background:#f69;color:#fff}.group-by-number [data-group="0"]{background:#3498db;color:#fff}.group-by-number [data-group="1"]{background:#f69;color:#fff}.group-by-number [data-group="2"]{background:#93b881;color:#fff}.group-by-number [data-group="3"]{background:#e09e87;color:#fff}.group-by-number [data-group="4"]{background:#a22041;color:#fff}.group-by-number [data-group="5"]{background:#95879c;color:#fff} \ No newline at end of file diff --git a/demo.html b/demo.html new file mode 100644 index 0000000..5add183 --- /dev/null +++ b/demo.html @@ -0,0 +1,207 @@ + + + + + + + + cssplot + + + + + + + +
+
+
+

cssplot

+
+
+
+

Bar Chart

+
+
+
    +
  • +
  • 50%
    • +
  • 30%
    • +
  • 90%
    • +
  • 10%
    • +
  • 70%
    • +
  • 30%
    • +
  • 90%
    • +
+
+
+
+
+
    +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
+
+
+
+
+

Horizontal Bar Chart

+
+
+
    +
  • 100%
    • +
  • 30%
    • +
  • 20%
    • +
  • 70%
    • +
  • 90%
    • +
+
+
+
+
+
    +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
+
+
+
+
+

Scatter plot

+
+
+
    +
  • a
    • +
  • b
    • +
  • c
    • +
  • d
    • +
  • e
    • +
  • f
    • +
  • h
    • +
  • i
    • +
+
+
+
+
+
    +
  • h
    • +
  • h
    • +
  • h
    • +
  • h
    • +
  • h
    • +
  • h
    • +
  • h
    • +
  • h
    • +
  • h
    • +
  • h
    • +
  • h
    • +
  • h
    • +
  • h
    • +
  • h
    • +
  • h
    • +
  • h
    • +
  • h
    • +
  • h
    • +
+
+
+
+
+

Animated Chart

+ +
+
+
    +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
+
+
+
+
+ + + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..528be80 --- /dev/null +++ b/package.json @@ -0,0 +1,19 @@ +{ + "name": "cssplot", + "version": "0.1.5", + "homepage": "http://asciimoo.github.io/cssplot/", + "bugs": { + "url": "https://github.com/asciimoo/cssplot/issues" + }, + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/asciimoo/cssplot" + }, + "devDependencies": { + "grunt": "^0.4.5", + "grunt-contrib-less": "^0.12.0", + "grunt-contrib-watch": "^0.6.1", + "grunt-newer": "^0.8.0" + } +} diff --git a/src/cssplot.animations.less b/src/cssplot.animations.less new file mode 100644 index 0000000..49d732b --- /dev/null +++ b/src/cssplot.animations.less @@ -0,0 +1,2 @@ +@import "modules/defaults.less"; +@import "modules/animations.less"; \ No newline at end of file diff --git a/src/cssplot.full.less b/src/cssplot.full.less index 271d98c..acda89a 100644 --- a/src/cssplot.full.less +++ b/src/cssplot.full.less @@ -1,3 +1,4 @@ @import "modules/defaults.less"; @import "modules/base.less"; -@import "modules/loops.less"; \ No newline at end of file +@import "modules/loops.less"; +@import "modules/animations.less"; \ No newline at end of file diff --git a/src/modules/animations.less b/src/modules/animations.less new file mode 100644 index 0000000..4f13377 --- /dev/null +++ b/src/modules/animations.less @@ -0,0 +1,69 @@ +/* general */ +@-webkit-keyframes chart-opacity { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes chart-opacity { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +/* bar-chart */ +@-webkit-keyframes bar-chart-grow { + from { + -webkit-transform: scaleY(0); + } + to { + -webkit-transform: scaleY(1); + } +} +@keyframes bar-chart-grow { + from { + transform: scaleY(0); + } + to { + transform: scaleY(1); + } +} + +/* horizontal-chart */ +@-webkit-keyframes horizontal-chart-grow { + from { + -webkit-transform: scaleX(0); + } + to { + -webkit-transform: scaleX(1); + } +} +@keyframes horizontal-chart-grow { + from { + transform: scaleX(0); + } + to { + transform: scaleX(1); + } +} +/* scatter-chart */ +@-webkit-keyframes scatter-chart-grow { + from { + -webkit-transform: scale(0); + } + to { + -webkit-transform: scale(1); + } +} +@keyframes scatter-chart-grow { + from { + transform: scale(0); + } + to { + transform: scale(1); + } +} diff --git a/src/modules/base.less b/src/modules/base.less index c8d83e6..e6c3060 100644 --- a/src/modules/base.less +++ b/src/modules/base.less @@ -1,4 +1,6 @@ -.bar-chart, .vertical-chart, .scatter-plot { +.bar-chart, +.horizontal-chart, +.scatter-plot { position: relative; min-width: 100px; min-height: 100px; @@ -6,33 +8,61 @@ margin: 0; } -.bar-chart .plot-container { - display: -webkit-flex; - display: flex; - -webkit-flex-direction: row; - flex-direction: row; - -webkit-flex-wrap: nowrap; - flex-wrap: nowrap; - position: absolute; - text-align: center; - top: 0; left: 0; bottom: 0; right: 0; - padding: 0; - margin: 0; - min-height: 100px; -} +.bar-chart { -.bar-chart .chart-column, -.bar-chart [data-cp-size] { - -webkit-flex-grow: 1; - flex-grow: 1; - -webkit-align-self: flex-end; - align-self: flex-end; + .plot-container { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + flex-wrap: nowrap; + position: absolute; + text-align: center; + top: 0; left: 0; bottom: 0; right: 0; + padding: 0; + margin: 0; + min-height: 100px; + + &[data-cp-transition="fade"] [data-cp-delay] { + opacity: 0; + -webkit-animation-name: chart-opacity; + -webkit-animation-duration: 1s; + -webkit-animation-timing-function: ease; + -webkit-animation-fill-mode: forwards; + animation-name: chart-opacity; + animation-duration: 1s; + animation-timing-function: ease; + animation-fill-mode: forwards; + } + &[data-cp-transition="grow"] [data-cp-delay] { + -webkit-transform: scaleY(0); + -webkit-transform-origin: center bottom; + transform: scaleY(0); + transform-origin: center bottom; + -webkit-animation-name: bar-chart-grow; + -webkit-animation-duration: 1s; + -webkit-animation-timing-function: ease; + -webkit-animation-fill-mode: forwards; + animation-name: bar-chart-grow; + animation-duration: 1s; + animation-timing-function: ease; + animation-fill-mode: forwards; + } + } + .chart-column, + [data-cp-size] { + -webkit-flex-grow: 1; + flex-grow: 1; + -webkit-align-self: flex-end; + align-self: flex-end; + } } .bar-chart .chart-column, -.vertical-chart .chart-row, +.horizontal-chart .chart-row, .bar-chart [data-cp-size], -.vertical-chart [data-cp-size] { +.horizontal-chart [data-cp-size] { background: @chart-primary-color; color: @chart-primary-label-color; list-style: none; @@ -40,29 +70,83 @@ box-sizing: border-box; } -.vertical-chart { +.horizontal-chart { clear: both; -} -.vertical-chart .plot-container { - flex-direction: row; - padding: 0; - margin: 0; - width: 100%; -} + .plot-container { + flex-direction: row; + padding: 0; + margin: 0; + width: 100%; -.vertical-chart .chart-row, -.vertical-chart [data-cp-size] { - min-height: 1px; + &[data-cp-transition="fade"] [data-cp-delay] { + opacity: 0; + -webkit-animation-name: chart-opacity; + -webkit-animation-duration: 1s; + -webkit-animation-timing-function: ease; + -webkit-animation-fill-mode: forwards; + animation-name: chart-opacity; + animation-duration: 1s; + animation-timing-function: ease; + animation-fill-mode: forwards; + } + &[data-cp-transition="grow"] [data-cp-delay] { + -webkit-transform: scaleX(0); + -webkit-transform-origin: left center; + transform: scaleX(0); + transform-origin: left center; + -webkit-animation-name: horizontal-chart-grow; + -webkit-animation-duration: 1s; + -webkit-animation-timing-function: ease; + -webkit-animation-fill-mode: forwards; + animation-name: horizontal-chart-grow; + animation-duration: 1s; + animation-timing-function: ease; + animation-fill-mode: forwards; + } + } + .chart-row, + [data-cp-size] { + min-height: 1px; + } } -.scatter-plot .plot-container { - position: absolute; - top: e(%("%dpx", @scatter-plot-dot-size * 2)); - left: 0; - right: e(%("%dpx", @scatter-plot-dot-size * 2)); - bottom: 0; - margin: 0; padding: 0; +.scatter-plot { + + .plot-container { + position: absolute; + top: e(%("%dpx", @scatter-plot-dot-size * 2)); + left: 0; + right: e(%("%dpx", @scatter-plot-dot-size * 2)); + bottom: 0; + margin: 0; padding: 0; + + &[data-cp-transition="fade"] [data-cp-delay] { + opacity: 0; + -webkit-animation-name: chart-opacity; + -webkit-animation-duration: 1s; + -webkit-animation-timing-function: ease; + -webkit-animation-fill-mode: forwards; + animation-name: chart-opacity; + animation-duration: 1s; + animation-timing-function: ease; + animation-fill-mode: forwards; + } + &[data-cp-transition="grow"] [data-cp-delay] { + -webkit-transform: scale(0); + -webkit-transform-origin: center center; + transform: scale(0); + transform-origin: center center; + -webkit-animation-name: horizontal-chart-grow; + -webkit-animation-duration: 1s; + -webkit-animation-timing-function: ease; + -webkit-animation-fill-mode: forwards; + animation-name: horizontal-chart-grow; + animation-duration: 1s; + animation-timing-function: ease; + animation-fill-mode: forwards; + } + } } .scatter-plot .chart-dot, @@ -77,3 +161,22 @@ border: e(%("%dpx", @scatter-plot-dot-size)) solid @chart-primary-color; border-radius: 100%; } + +// Animation base +/* +.bar-chart .plot-container[data-cp-transition="fade"] [data-cp-delay] { + opacity: 0; +} +.bar-chart .plot-container[data-cp-transition="grow"] [data-cp-delay] { + transform: scaleY(0); + transform-origin: center bottom; +} +.bar-chart .plot-container [data-cp-delay] { + -webkit-animation: bar-chart-opacity 1s ease forwards; + -webkit-animation-delay: 0s; +} +.bar-chart .plot-container [data-cp-delay] { + -webkit-animation: bar-chart-grow 1s ease forwards; + -webkit-animation-delay: 0s; +} +*/ \ No newline at end of file diff --git a/src/modules/loops.less b/src/modules/loops.less index 5096f8c..b563402 100644 --- a/src/modules/loops.less +++ b/src/modules/loops.less @@ -1,4 +1,3 @@ - .height_loop(@percent_counter) when (@percent_counter >= 0) { .height_loop((@percent_counter - 1)); [data-cp-size="@{percent_counter}"] { height: ~"@{percent_counter}%"; }; @@ -21,13 +20,46 @@ .bar-chart .plot-container { .height_loop(100); + // animation loop + @max: 50; + .loop(@index) when (@index > 0){ + [data-cp-delay="@{index}"] { + -webkit-animation-delay: @index * .1s; + animation-delay: @index * .1s; + } + .loop(@index - 1); + } + .loop(0){} + .loop(@max); } -.vertical-chart .plot-container { +.horizontal-chart .plot-container { .width_loop(100); + // animation loop + @max: 50; + .loop(@index) when (@index > 0){ + [data-cp-delay="@{index}"] { + -webkit-animation-delay: @index * .1s; + animation-delay: @index * .1s; + } + .loop(@index - 1); + } + .loop(0){} + .loop(@max); } .scatter-plot .plot-container { .x_loop(100); .y_loop(100); + // animation loop + @max: 50; + .loop(@index) when (@index > 0){ + [data-cp-delay="@{index}"] { + -webkit-animation-delay: @index * .1s; + animation-delay: @index * .1s; + } + .loop(@index - 1); + } + .loop(0){} + .loop(@max); }