Prateeksha Singh
GitHub
commit
d474d583ec
0
docs/assets/css/bootstrap.min.css
vendored
Executable file → Normal file
0
docs/assets/css/bootstrap.min.css
vendored
Executable file → Normal file
@ -1,99 +0,0 @@
|
|||||||
/*
|
|
||||||
|
|
||||||
Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
.hljs {
|
|
||||||
display: block;
|
|
||||||
overflow-x: auto;
|
|
||||||
padding: 0.5em;
|
|
||||||
background: #F0F0F0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Base color: saturation 0; */
|
|
||||||
|
|
||||||
.hljs,
|
|
||||||
.hljs-subst {
|
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-comment {
|
|
||||||
color: #888888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-keyword,
|
|
||||||
.hljs-attribute,
|
|
||||||
.hljs-selector-tag,
|
|
||||||
.hljs-meta-keyword,
|
|
||||||
.hljs-doctag,
|
|
||||||
.hljs-name {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* User color: hue: 0 */
|
|
||||||
|
|
||||||
.hljs-type,
|
|
||||||
.hljs-string,
|
|
||||||
.hljs-number,
|
|
||||||
.hljs-selector-id,
|
|
||||||
.hljs-selector-class,
|
|
||||||
.hljs-quote,
|
|
||||||
.hljs-template-tag,
|
|
||||||
.hljs-deletion {
|
|
||||||
color: #880000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-title,
|
|
||||||
.hljs-section {
|
|
||||||
color: #880000;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-regexp,
|
|
||||||
.hljs-symbol,
|
|
||||||
.hljs-variable,
|
|
||||||
.hljs-template-variable,
|
|
||||||
.hljs-link,
|
|
||||||
.hljs-selector-attr,
|
|
||||||
.hljs-selector-pseudo {
|
|
||||||
color: #BC6060;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Language color: hue: 90; */
|
|
||||||
|
|
||||||
.hljs-literal {
|
|
||||||
color: #78A960;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-built_in,
|
|
||||||
.hljs-bullet,
|
|
||||||
.hljs-code,
|
|
||||||
.hljs-addition {
|
|
||||||
color: #397300;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Meta color: hue: 200 */
|
|
||||||
|
|
||||||
.hljs-meta {
|
|
||||||
color: #1f7199;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-meta-string {
|
|
||||||
color: #4d99bf;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Misc effects */
|
|
||||||
|
|
||||||
.hljs-emphasis {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-strong {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
@ -1,693 +0,0 @@
|
|||||||
/*-------------------------------------
|
|
||||||
|
|
||||||
Custom CSS
|
|
||||||
|
|
||||||
---------------------------------------*/
|
|
||||||
body {
|
|
||||||
font-family: "proxima-nova", sans-serif;
|
|
||||||
font-size: 15px;
|
|
||||||
color: #6c7680;
|
|
||||||
text-rendering: optimizeLegibility !important;
|
|
||||||
line-height: 1.5em;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
p.lead {
|
|
||||||
font-family: "proxima-nova", sans-serif;
|
|
||||||
}
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6,
|
|
||||||
.lead,
|
|
||||||
.page-sidebar,
|
|
||||||
.breadcrumb,
|
|
||||||
.label,
|
|
||||||
.h6,
|
|
||||||
.sans,
|
|
||||||
blockquote {
|
|
||||||
font-family: "proxima-nova", sans-serif;
|
|
||||||
color: #36414C;
|
|
||||||
}
|
|
||||||
button,
|
|
||||||
.button,
|
|
||||||
.btn {
|
|
||||||
font-family: "proxima-nova", sans-serif;
|
|
||||||
}
|
|
||||||
.page-header-block,
|
|
||||||
.page-header-actions {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.btn-primary {
|
|
||||||
background-color: #7575ff;
|
|
||||||
border-color: #7575ff;
|
|
||||||
}
|
|
||||||
.btn-primary :hover {
|
|
||||||
background-color: #5b5be5;
|
|
||||||
}
|
|
||||||
article button,
|
|
||||||
article .button,
|
|
||||||
article .btn,
|
|
||||||
blockquote {
|
|
||||||
font-size: 0.93em;
|
|
||||||
}
|
|
||||||
article ul > li,
|
|
||||||
article ol > li {
|
|
||||||
margin: 10px 0px;
|
|
||||||
}
|
|
||||||
figcaption {
|
|
||||||
font-size: 0.8em;
|
|
||||||
color: #B8C2CC;
|
|
||||||
padding: 10px 0px;
|
|
||||||
line-height: 1.3em;
|
|
||||||
}
|
|
||||||
.text-extra-muted {
|
|
||||||
color: #B8C2CC !important;
|
|
||||||
}
|
|
||||||
.page-sidebar,
|
|
||||||
.breadcrumb {
|
|
||||||
line-height: 1.5em;
|
|
||||||
}
|
|
||||||
.breadcrumb {
|
|
||||||
background-color: transparent;
|
|
||||||
padding: 10px 0px;
|
|
||||||
}
|
|
||||||
.breadcrumb a,
|
|
||||||
.breadcrumb a:hover,
|
|
||||||
.breadcrumb a:focus,
|
|
||||||
.breadcrumb a:visited {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
.container,
|
|
||||||
.navbar,
|
|
||||||
footer {
|
|
||||||
max-width: 900px;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.narrow {
|
|
||||||
max-width: 75%;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
p.description,
|
|
||||||
p.description a {
|
|
||||||
color: #B8C2CC;
|
|
||||||
font-size: 1.06em;
|
|
||||||
margin: 12px 0 0;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
p.description a:focus,
|
|
||||||
p.description a:active,
|
|
||||||
p.description a:hover {
|
|
||||||
color: #36414C;
|
|
||||||
}
|
|
||||||
.hero-content p.description,
|
|
||||||
.page-hero p.description,
|
|
||||||
.hero-content p.description a,
|
|
||||||
.page-hero p.description a {
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
.hero-content .x-large.button,
|
|
||||||
.page-hero .x-large.button {
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: #5E64FF;
|
|
||||||
}
|
|
||||||
a,
|
|
||||||
a:focus,
|
|
||||||
a:hover {
|
|
||||||
transition: color 0.3s, border 0.3s, background-color 0.3s;
|
|
||||||
}
|
|
||||||
a.grey {
|
|
||||||
color: #36414C;
|
|
||||||
}
|
|
||||||
a.close,
|
|
||||||
a.btn {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.navbar a,
|
|
||||||
.sidebar-navbar-items a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
border-color: inherit;
|
|
||||||
}
|
|
||||||
.page-padding,
|
|
||||||
.page-content {
|
|
||||||
padding-top: 30px;
|
|
||||||
padding-bottom: 30px;
|
|
||||||
}
|
|
||||||
.page-title {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
.page-sub-title {
|
|
||||||
color: #8D99A6;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 0px;
|
|
||||||
margin-bottom: 45px;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
.btn-white {
|
|
||||||
background-color: #fff;
|
|
||||||
color: #36414C;
|
|
||||||
border-color: #d1d8dd;
|
|
||||||
}
|
|
||||||
.btn-white:hover {
|
|
||||||
background-color: #fafbfc;
|
|
||||||
}
|
|
||||||
.screenshot {
|
|
||||||
border: 2px solid #d1d8dd;
|
|
||||||
box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.15);
|
|
||||||
margin: 15px 0px;
|
|
||||||
}
|
|
||||||
blockquote {
|
|
||||||
border-left: 5px solid #F0F4F7;
|
|
||||||
background-color: #fafbfc;
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
blockquote p {
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
.page-hero {
|
|
||||||
padding: 130px 0px 100px;
|
|
||||||
margin-top: -60px;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 2.13em;
|
|
||||||
}
|
|
||||||
.navbar {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.button {
|
|
||||||
display: inline-block;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 7px 12px 9px;
|
|
||||||
line-height: 1;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.button:hover,
|
|
||||||
.button:active,
|
|
||||||
.button:focus {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.large.button {
|
|
||||||
font-size: 1.33em;
|
|
||||||
padding: 12px 24px 10px;
|
|
||||||
border-bottom: 3px solid rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
.x-large.button {
|
|
||||||
font-size: 1.6em;
|
|
||||||
padding: 16px 40px;
|
|
||||||
border-bottom: 3px solid rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
.small.button {
|
|
||||||
padding-top: 11px;
|
|
||||||
}
|
|
||||||
.blue.button {
|
|
||||||
color: #fff;
|
|
||||||
background: #7575ff;
|
|
||||||
border: 0px;
|
|
||||||
border-bottom: 3px solid rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
.blue.button:hover {
|
|
||||||
background: #5b5be5;
|
|
||||||
}
|
|
||||||
.white.button {
|
|
||||||
color: #6C7680;
|
|
||||||
border: 1px solid #d1d8dd;
|
|
||||||
}
|
|
||||||
.white.button:hover {
|
|
||||||
background: #fafbfc;
|
|
||||||
}
|
|
||||||
.navbar {
|
|
||||||
padding: 10px 0px;
|
|
||||||
border-bottom: 1px solid #d1d8dd;
|
|
||||||
}
|
|
||||||
.navbar-brand,
|
|
||||||
.navbar-brand:hover,
|
|
||||||
.navbar-brand:visited,
|
|
||||||
.navbar-brand:focus {
|
|
||||||
font-size: 1.2em;
|
|
||||||
text-decoration: none;
|
|
||||||
color: #36414C;
|
|
||||||
}
|
|
||||||
.hero {
|
|
||||||
padding: 70px 0;
|
|
||||||
font-size: 1.6em;
|
|
||||||
font-weight: 300;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.hero-content {
|
|
||||||
font-weight: 300;
|
|
||||||
margin-top: 12px;
|
|
||||||
}
|
|
||||||
.hero-content h1 {
|
|
||||||
padding-top: 24px;
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
.hero-content p {
|
|
||||||
width: 80%;
|
|
||||||
margin: 0 auto 24px;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
.hero-content p.description {
|
|
||||||
margin-top: 16px;
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
.group,
|
|
||||||
.border-bottom {
|
|
||||||
border-bottom: 1px solid #d1d8dd;
|
|
||||||
}
|
|
||||||
.row.section,
|
|
||||||
section {
|
|
||||||
padding: 70px 0 70px;
|
|
||||||
}
|
|
||||||
.row.section p,
|
|
||||||
section p {
|
|
||||||
color: #6c7680;
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
padding: 24px 40px 0;
|
|
||||||
}
|
|
||||||
.small-content {
|
|
||||||
text-align: center;
|
|
||||||
padding: 0 32px;
|
|
||||||
}
|
|
||||||
.small-content img {
|
|
||||||
width: 130px;
|
|
||||||
height: 130px;
|
|
||||||
}
|
|
||||||
.small-content h1 {
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
.tiny-content {
|
|
||||||
margin-bottom: 40px;
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
.tiny-content h1 {
|
|
||||||
color: #36414c;
|
|
||||||
}
|
|
||||||
.tiny-content p {
|
|
||||||
margin: 6px 0 0;
|
|
||||||
color: #858d95;
|
|
||||||
}
|
|
||||||
.tiny-content h1 {
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
footer {
|
|
||||||
color: #8D99A6;
|
|
||||||
padding: 3px 0;
|
|
||||||
border-top: 1px solid #d1d8dd;
|
|
||||||
}
|
|
||||||
footer h1 {
|
|
||||||
color: #36414C;
|
|
||||||
font-size: 1.42em;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
footer p {
|
|
||||||
margin: 0;
|
|
||||||
padding: 2px 0 10px;
|
|
||||||
color: #6c7680;
|
|
||||||
}
|
|
||||||
footer ul,
|
|
||||||
footer ul li {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
footer li a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: #6c7680;
|
|
||||||
}
|
|
||||||
footer li a:hover,
|
|
||||||
footer li a:active,
|
|
||||||
footer li a:focus {
|
|
||||||
color: #36414C;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.footer-list {
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 50px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.footer-list ul {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.footer-list li {
|
|
||||||
margin: 0px 15px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.footer-link {
|
|
||||||
color: #B8C2CC;
|
|
||||||
}
|
|
||||||
.footer-link:hover,
|
|
||||||
.footer-link:focus {
|
|
||||||
color: #8D99A6;
|
|
||||||
}
|
|
||||||
.copyright {
|
|
||||||
font-size: 0.8em;
|
|
||||||
text-align: center;
|
|
||||||
padding-bottom: 50px;
|
|
||||||
}
|
|
||||||
.copyright p {
|
|
||||||
padding-bottom: 0px;
|
|
||||||
color: #B8C2CC;
|
|
||||||
}
|
|
||||||
.center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
/*-------------------------------------
|
|
||||||
|
|
||||||
ERPNext
|
|
||||||
|
|
||||||
---------------------------------------*/
|
|
||||||
.erp-next-logo {
|
|
||||||
margin: 8px 0;
|
|
||||||
height: 14px;
|
|
||||||
width: 76px;
|
|
||||||
}
|
|
||||||
.erp-hero {
|
|
||||||
width: 500px;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
.tabs {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.tabs ul,
|
|
||||||
.tabs li {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.tabs ul {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.tabs li {
|
|
||||||
width: 64px;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 16px;
|
|
||||||
}
|
|
||||||
.tabs li input {
|
|
||||||
background: transparent;
|
|
||||||
border: 0;
|
|
||||||
color: #8d99a6;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
transition: 0.5s;
|
|
||||||
border-bottom: 2px solid transparent;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tabs li input:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
.tabs li input:hover {
|
|
||||||
color: #36414c;
|
|
||||||
}
|
|
||||||
.tabs li input.active {
|
|
||||||
color: #36414c;
|
|
||||||
border-bottom: 2px solid #7575ff;
|
|
||||||
}
|
|
||||||
.feature {
|
|
||||||
text-align: center;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.feature p,
|
|
||||||
.feature h1 {
|
|
||||||
width: 65%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.feature h1 {
|
|
||||||
padding: 40px 0 16px;
|
|
||||||
}
|
|
||||||
.feature p {
|
|
||||||
font-size: 1.13em;
|
|
||||||
padding-bottom: 24px;
|
|
||||||
}
|
|
||||||
/*-------------------------------------
|
|
||||||
|
|
||||||
Frappé for Developers
|
|
||||||
|
|
||||||
---------------------------------------*/
|
|
||||||
.developers-hero {
|
|
||||||
width: 313px;
|
|
||||||
}
|
|
||||||
.developers-logo {
|
|
||||||
height: 19px;
|
|
||||||
}
|
|
||||||
.erp-framework {
|
|
||||||
width: 80%;
|
|
||||||
margin: 30px auto;
|
|
||||||
}
|
|
||||||
.get-involved {
|
|
||||||
color: #36414c;
|
|
||||||
font-size: 1.2em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.get-involved p {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.get-involved img {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
margin: -3px 10px 0 -5px;
|
|
||||||
}
|
|
||||||
.get-involved .button {
|
|
||||||
margin: 0 4px;
|
|
||||||
}
|
|
||||||
/*-------------------------------------
|
|
||||||
|
|
||||||
Frappé
|
|
||||||
|
|
||||||
---------------------------------------*/
|
|
||||||
.frappe-hero {
|
|
||||||
width: 385px;
|
|
||||||
}
|
|
||||||
.frappe-logo {
|
|
||||||
height: 19px;
|
|
||||||
}
|
|
||||||
.open-source {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.open-source img {
|
|
||||||
width: 325px;
|
|
||||||
}
|
|
||||||
.team-picture {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.team-picture h1 {
|
|
||||||
margin: 0 0 40px;
|
|
||||||
}
|
|
||||||
.team-description {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.team-description a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.input-label {
|
|
||||||
margin: 16px 0 3px;
|
|
||||||
color: #8d99a6;
|
|
||||||
font-size: 0.93em;
|
|
||||||
}
|
|
||||||
#message {
|
|
||||||
height: 150px;
|
|
||||||
}
|
|
||||||
#send {
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
.office-map {
|
|
||||||
width: 394px;
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
.contact .content {
|
|
||||||
margin-top: -40px;
|
|
||||||
}
|
|
||||||
.page-breadcrumbs {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
.half-width {
|
|
||||||
max-width: 50%;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
.width-75 {
|
|
||||||
max-width: 75%;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
.media-object {
|
|
||||||
max-width: 120px;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
.browser-image {
|
|
||||||
border: 1px solid #d1d8dd;
|
|
||||||
}
|
|
||||||
.fake-browser-frame {
|
|
||||||
position: relative;
|
|
||||||
margin: 40px auto;
|
|
||||||
max-width: 600px;
|
|
||||||
}
|
|
||||||
.fake-browser-frame::before {
|
|
||||||
content: "";
|
|
||||||
height: 24px;
|
|
||||||
position: absolute;
|
|
||||||
top: -24px;
|
|
||||||
left: 0px;
|
|
||||||
right: 0px;
|
|
||||||
border: 1px solid #d1d8dd;
|
|
||||||
border-bottom: none;
|
|
||||||
border-top-left-radius: 4px;
|
|
||||||
border-top-right-radius: 4px;
|
|
||||||
}
|
|
||||||
.fake-browser-frame::after {
|
|
||||||
content: '\f052 \f052 \f052';
|
|
||||||
position: absolute;
|
|
||||||
color: #d1d8dd;
|
|
||||||
top: -17px;
|
|
||||||
left: 8px;
|
|
||||||
/* octicon */
|
|
||||||
font: normal normal 12px octicons;
|
|
||||||
line-height: 1;
|
|
||||||
display: inline-block;
|
|
||||||
text-decoration: none;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
.fake-iphone-frame {
|
|
||||||
position: relative;
|
|
||||||
padding: 40px 8px;
|
|
||||||
border: 1px solid #d1d8dd;
|
|
||||||
border-radius: 15px;
|
|
||||||
}
|
|
||||||
.fake-ipad-frame {
|
|
||||||
position: relative;
|
|
||||||
padding: 8px 40px;
|
|
||||||
border: 1px solid #d1d8dd;
|
|
||||||
border-radius: 15px;
|
|
||||||
}
|
|
||||||
.cover {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.underline {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
.underline:hover,
|
|
||||||
.underline:focus,
|
|
||||||
.underline:active {
|
|
||||||
color: #36414C;
|
|
||||||
}
|
|
||||||
.spacer {
|
|
||||||
margin-top: 40px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
article h3 {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
article hr + h3 {
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
.negative-margin {
|
|
||||||
margin-left: -15px;
|
|
||||||
margin-right: -15px;
|
|
||||||
padding-left: 15px;
|
|
||||||
padding-right: 15px;
|
|
||||||
}
|
|
||||||
.navbar-icon {
|
|
||||||
width: 24px;
|
|
||||||
margin-right: 7px;
|
|
||||||
margin-top: -3px;
|
|
||||||
}
|
|
||||||
.large-description {
|
|
||||||
line-height: 1.5;
|
|
||||||
font-size: 1.5em;
|
|
||||||
font-weight: 200;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
.navbar {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.hero {
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
.large-description {
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
.hero-content h1 {
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
.hero-content p {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.small-content {
|
|
||||||
padding-top: 70px;
|
|
||||||
}
|
|
||||||
.small-content:first-child {
|
|
||||||
padding-top: 0px;
|
|
||||||
}
|
|
||||||
.page-content {
|
|
||||||
padding-top: 0px;
|
|
||||||
}
|
|
||||||
.footer-list {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
.footer-list li {
|
|
||||||
margin: 15px 0px;
|
|
||||||
display: block;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.copyright {
|
|
||||||
text-align: left;
|
|
||||||
padding-bottom: 55px;
|
|
||||||
}
|
|
||||||
.half-width {
|
|
||||||
max-width: 90%;
|
|
||||||
}
|
|
||||||
.width-75 {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.fake-iphone-frame {
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
|
||||||
.erp-hero {
|
|
||||||
margin-bottom: 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.website-list .result {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
.page-container {
|
|
||||||
max-width: 970px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jumbotron {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
99
docs/assets/css/hljs.css
Executable file
99
docs/assets/css/hljs.css
Executable file
@ -0,0 +1,99 @@
|
|||||||
|
/*
|
||||||
|
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
||||||
|
*/
|
||||||
|
|
||||||
|
.hljs {
|
||||||
|
display: block;
|
||||||
|
color: #36414c;
|
||||||
|
overflow-x: auto;
|
||||||
|
padding: 0.5em;
|
||||||
|
background: #F8F8F9;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment,
|
||||||
|
.hljs-quote {
|
||||||
|
color: #998;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-keyword,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-subst {
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-number,
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-variable,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-tag .hljs-attr {
|
||||||
|
color: #008080;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-string,
|
||||||
|
.hljs-doctag {
|
||||||
|
color: #d14;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-title,
|
||||||
|
.hljs-section,
|
||||||
|
.hljs-selector-id {
|
||||||
|
color: #900;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-subst {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-type,
|
||||||
|
.hljs-class .hljs-title {
|
||||||
|
color: #458;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-tag,
|
||||||
|
.hljs-name,
|
||||||
|
.hljs-attribute {
|
||||||
|
color: #000080;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-regexp,
|
||||||
|
.hljs-link {
|
||||||
|
color: #009926;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-symbol,
|
||||||
|
|
||||||
|
.hljs-bullet {
|
||||||
|
color: #990073;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-built_in,
|
||||||
|
.hljs-builtin-name {
|
||||||
|
color: #0086b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-meta {
|
||||||
|
color: #999;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-deletion {
|
||||||
|
background: #fdd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-addition {
|
||||||
|
background: #dfd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-emphasis {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
@ -1,70 +1,97 @@
|
|||||||
.page-header {
|
body {
|
||||||
width: 100%;
|
/* container styles */
|
||||||
|
max-width: 720px;
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
|
font-family: "proxima-nova", sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #6c7680;
|
||||||
|
text-rendering: optimizeLegibility !important;
|
||||||
|
line-height: 1.5em;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
.lead,
|
||||||
|
.page-sidebar,
|
||||||
|
.breadcrumb,
|
||||||
|
.label,
|
||||||
|
.h6,
|
||||||
|
.sans,
|
||||||
|
blockquote {
|
||||||
|
font-family: "proxima-nova", sans-serif;
|
||||||
|
color: #36414C;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
margin: 4rem 0; /* SAME 1 */
|
||||||
|
font-size: 1.6em;
|
||||||
|
font-weight: 300;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
|
||||||
padding: 2em 0;
|
|
||||||
}
|
}
|
||||||
.jumbotron {
|
header .lead-text {
|
||||||
padding: 2rem 2rem;
|
line-height: 3rem;
|
||||||
|
margin: 2rem 0;
|
||||||
}
|
}
|
||||||
.project-name {
|
.demo-tip {
|
||||||
padding-top: 1.8em;
|
margin-top: 1rem; /* SAME 2 */
|
||||||
font-size: 2.5em;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
.project-tagline {
|
section {
|
||||||
font-size: 1em;
|
margin: 4em 0; /* SAME 1 */
|
||||||
opacity: 0.7;
|
|
||||||
padding: 2em;
|
|
||||||
}
|
}
|
||||||
.btn-transparent {
|
h1 {
|
||||||
margin: 0 0.5em;
|
font-size: 3.5rem;
|
||||||
color: #fff;
|
margin-bottom: 1.5rem;
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
||||||
}
|
}
|
||||||
.btn-transparent:hover {
|
h1, h6 {
|
||||||
color: #fff;
|
font-weight: 700;
|
||||||
background: rgba(255, 255, 255, 0.3);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content {
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content .row {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-explain {
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre.highlight {
|
|
||||||
background: #f7f7f7;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
}
|
}
|
||||||
.dashboard-section h1 {
|
.blue.button {
|
||||||
margin-left: -2px;
|
color: #fff;
|
||||||
|
background: #7575ff;
|
||||||
|
border: 0px;
|
||||||
|
border-bottom: 3px solid rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
.blue.button:hover {
|
||||||
|
background: #5b5be5;
|
||||||
|
}
|
||||||
|
.large.button {
|
||||||
|
font-size: 1.33em;
|
||||||
|
padding: 12px 24px 10px;
|
||||||
|
border-bottom: 3px solid rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: #5E64FF;
|
||||||
|
}
|
||||||
|
a, a:focus, a:hover {
|
||||||
|
transition: color 0.3s, border 0.3s, background-color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero .gantt-container {
|
|
||||||
text-align: left;
|
/* BaseCSS */
|
||||||
|
.margin-top {
|
||||||
|
margin-top: 1rem; /* SAME 2 */
|
||||||
}
|
}
|
||||||
.hero {
|
.mv1 {
|
||||||
/*font-size: 1.4rem;*/
|
margin: 2em 0 1em 0;
|
||||||
}
|
}
|
||||||
.data-container {
|
.border {
|
||||||
padding: 20px;
|
border: 1px solid #ddd;
|
||||||
padding-bottom: 0px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Moon images */
|
||||||
.image-container {
|
.image-container {
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
}
|
}
|
||||||
@ -72,19 +99,12 @@ pre.highlight {
|
|||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.data p {
|
.content-data p {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
.margin-vertical-px {
|
|
||||||
margin: 15px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.margin-vertical-rem {
|
|
||||||
margin: 2em 0 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border {
|
.text-center {
|
||||||
border: 1px solid #ddd;
|
text-align: center;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|||||||
424
docs/assets/css/normalize.css
vendored
424
docs/assets/css/normalize.css
vendored
@ -1,424 +0,0 @@
|
|||||||
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Set default font family to sans-serif.
|
|
||||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
|
||||||
* user zoom.
|
|
||||||
*/
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-family: sans-serif; /* 1 */
|
|
||||||
-ms-text-size-adjust: 100%; /* 2 */
|
|
||||||
-webkit-text-size-adjust: 100%; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove default margin.
|
|
||||||
*/
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* HTML5 display definitions
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct `block` display not defined for any HTML5 element in IE 8/9.
|
|
||||||
* Correct `block` display not defined for `details` or `summary` in IE 10/11
|
|
||||||
* and Firefox.
|
|
||||||
* Correct `block` display not defined for `main` in IE 11.
|
|
||||||
*/
|
|
||||||
|
|
||||||
article,
|
|
||||||
aside,
|
|
||||||
details,
|
|
||||||
figcaption,
|
|
||||||
figure,
|
|
||||||
footer,
|
|
||||||
header,
|
|
||||||
hgroup,
|
|
||||||
main,
|
|
||||||
menu,
|
|
||||||
nav,
|
|
||||||
section,
|
|
||||||
summary {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct `inline-block` display not defined in IE 8/9.
|
|
||||||
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
|
||||||
*/
|
|
||||||
|
|
||||||
audio,
|
|
||||||
canvas,
|
|
||||||
progress,
|
|
||||||
video {
|
|
||||||
display: inline-block; /* 1 */
|
|
||||||
vertical-align: baseline; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Prevent modern browsers from displaying `audio` without controls.
|
|
||||||
* Remove excess height in iOS 5 devices.
|
|
||||||
*/
|
|
||||||
|
|
||||||
audio:not([controls]) {
|
|
||||||
display: none;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address `[hidden]` styling not present in IE 8/9/10.
|
|
||||||
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[hidden],
|
|
||||||
template {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Links
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the gray background color from active links in IE 10.
|
|
||||||
*/
|
|
||||||
|
|
||||||
a {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Improve readability when focused and also mouse hovered in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
a:active,
|
|
||||||
a:hover {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Text-level semantics
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
|
||||||
*/
|
|
||||||
|
|
||||||
abbr[title] {
|
|
||||||
border-bottom: 1px dotted;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
|
||||||
*/
|
|
||||||
|
|
||||||
b,
|
|
||||||
strong {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address styling not present in Safari and Chrome.
|
|
||||||
*/
|
|
||||||
|
|
||||||
dfn {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address variable `h1` font-size and margin within `section` and `article`
|
|
||||||
* contexts in Firefox 4+, Safari, and Chrome.
|
|
||||||
*/
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2em;
|
|
||||||
margin: 0.67em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address styling not present in IE 8/9.
|
|
||||||
*/
|
|
||||||
|
|
||||||
mark {
|
|
||||||
background: #ff0;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address inconsistent and variable font size in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
small {
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
sub,
|
|
||||||
sup {
|
|
||||||
font-size: 75%;
|
|
||||||
line-height: 0;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup {
|
|
||||||
top: -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub {
|
|
||||||
bottom: -0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Embedded content
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove border when inside `a` element in IE 8/9/10.
|
|
||||||
*/
|
|
||||||
|
|
||||||
img {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct overflow not hidden in IE 9/10/11.
|
|
||||||
*/
|
|
||||||
|
|
||||||
svg:not(:root) {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grouping content
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address margin not present in IE 8/9 and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
figure {
|
|
||||||
margin: 1em 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address differences between Firefox and other browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
hr {
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Contain overflow in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
pre {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address odd `em`-unit font size rendering in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
code,
|
|
||||||
kbd,
|
|
||||||
pre,
|
|
||||||
samp {
|
|
||||||
font-family: monospace, monospace;
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Forms
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Known limitation: by default, Chrome and Safari on OS X allow very limited
|
|
||||||
* styling of `select`, unless a `border` property is set.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct color not being inherited.
|
|
||||||
* Known issue: affects color of disabled elements.
|
|
||||||
* 2. Correct font properties not being inherited.
|
|
||||||
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
optgroup,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
color: inherit; /* 1 */
|
|
||||||
font: inherit; /* 2 */
|
|
||||||
margin: 0; /* 3 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address `overflow` set to `hidden` in IE 8/9/10/11.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button {
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
|
||||||
* All other form control elements do not inherit `text-transform` values.
|
|
||||||
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
|
||||||
* Correct `select` style inheritance in Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
select {
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
|
||||||
* and `video` controls.
|
|
||||||
* 2. Correct inability to style clickable `input` types in iOS.
|
|
||||||
* 3. Improve usability and consistency of cursor style between image-type
|
|
||||||
* `input` and others.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
html input[type="button"], /* 1 */
|
|
||||||
input[type="reset"],
|
|
||||||
input[type="submit"] {
|
|
||||||
-webkit-appearance: button; /* 2 */
|
|
||||||
cursor: pointer; /* 3 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Re-set default cursor for disabled elements.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button[disabled],
|
|
||||||
html input[disabled] {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove inner padding and border in Firefox 4+.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button::-moz-focus-inner,
|
|
||||||
input::-moz-focus-inner {
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
|
||||||
* the UA stylesheet.
|
|
||||||
*/
|
|
||||||
|
|
||||||
input {
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* It's recommended that you don't attempt to style these elements.
|
|
||||||
* Firefox's implementation doesn't respect box-sizing, padding, or width.
|
|
||||||
*
|
|
||||||
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
|
||||||
* 2. Remove excess padding in IE 8/9/10.
|
|
||||||
*/
|
|
||||||
|
|
||||||
input[type="checkbox"],
|
|
||||||
input[type="radio"] {
|
|
||||||
box-sizing: border-box; /* 1 */
|
|
||||||
padding: 0; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
|
||||||
* `font-size` values of the `input`, it causes the cursor style of the
|
|
||||||
* decrement button to change from `default` to `text`.
|
|
||||||
*/
|
|
||||||
|
|
||||||
input[type="number"]::-webkit-inner-spin-button,
|
|
||||||
input[type="number"]::-webkit-outer-spin-button {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
|
||||||
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
|
|
||||||
* (include `-moz` to future-proof).
|
|
||||||
*/
|
|
||||||
|
|
||||||
input[type="search"] {
|
|
||||||
-webkit-appearance: textfield; /* 1 */ /* 2 */
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
|
||||||
* Safari (but not Chrome) clips the cancel button when the search input has
|
|
||||||
* padding (and `textfield` appearance).
|
|
||||||
*/
|
|
||||||
|
|
||||||
input[type="search"]::-webkit-search-cancel-button,
|
|
||||||
input[type="search"]::-webkit-search-decoration {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Define consistent border, margin, and padding.
|
|
||||||
*/
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
border: 1px solid #c0c0c0;
|
|
||||||
margin: 0 2px;
|
|
||||||
padding: 0.35em 0.625em 0.75em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct `color` not being inherited in IE 8/9/10/11.
|
|
||||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
|
||||||
*/
|
|
||||||
|
|
||||||
legend {
|
|
||||||
border: 0; /* 1 */
|
|
||||||
padding: 0; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove default vertical scrollbar in IE 8/9/10/11.
|
|
||||||
*/
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Don't inherit the `font-weight` (applied by a rule above).
|
|
||||||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
|
||||||
*/
|
|
||||||
|
|
||||||
optgroup {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tables
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove most spacing between table cells.
|
|
||||||
*/
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
353
docs/assets/css/reset.css
Executable file
353
docs/assets/css/reset.css
Executable file
@ -0,0 +1,353 @@
|
|||||||
|
/*!
|
||||||
|
*this reset is a copy of bootstrap's reboot.css which is inturn a fork of normalise*
|
||||||
|
* Bootstrap Reboot v4.0.0-beta.3 (https://getbootstrap.com)
|
||||||
|
* Copyright 2011-2017 The Bootstrap Authors
|
||||||
|
* Copyright 2011-2017 Twitter, Inc.
|
||||||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||||
|
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||||
|
*/
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: sans-serif;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
-ms-overflow-style: scrollbar;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
--line-height: 3;
|
||||||
|
line-height: calc(((var(--line-height) * var(--capital-height)) - var(--valign)) * 1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@-ms-viewport {
|
||||||
|
width: device-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 400;
|
||||||
|
/* line-height: 1.5; */
|
||||||
|
text-align: left;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, Noto, Oxygen-Sans, "Noto Sans", Ubuntu,Cantarell, sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
|
color: #36414c;
|
||||||
|
font-weight:normal;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-webkit-font-feature-settings: "kern" 1;
|
||||||
|
-moz-font-feature-settings: "kern" 1;
|
||||||
|
-o-font-feature-settings: "kern" 1;
|
||||||
|
font-feature-settings: "kern" 1;
|
||||||
|
font-kerning: normal;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
[tabindex="-1"]:focus {
|
||||||
|
outline: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box;
|
||||||
|
height: 0;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr[title],
|
||||||
|
abbr[data-original-title] {
|
||||||
|
text-decoration: underline;
|
||||||
|
-webkit-text-decoration: underline dotted;
|
||||||
|
text-decoration: underline dotted;
|
||||||
|
cursor: help;
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
address {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
dl {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol ol,
|
||||||
|
ul ul,
|
||||||
|
ol ul,
|
||||||
|
ul ol {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
dfn {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
position: relative;
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #007bff;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: transparent;
|
||||||
|
-webkit-text-decoration-skip: objects;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #0056b3;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:not([href]):not([tabindex]) {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:not([href]):not([tabindex]):focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, monospace;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
overflow: auto;
|
||||||
|
-ms-overflow-style: scrollbar;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
vertical-align: middle;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
area,
|
||||||
|
button,
|
||||||
|
[role="button"],
|
||||||
|
input:not([type="range"]),
|
||||||
|
label,
|
||||||
|
select,
|
||||||
|
summary,
|
||||||
|
textarea {
|
||||||
|
-ms-touch-action: manipulation;
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
caption {
|
||||||
|
padding-top: 0.75rem;
|
||||||
|
padding-bottom: 0.75rem;
|
||||||
|
color: #6c757d;
|
||||||
|
text-align: left;
|
||||||
|
caption-side: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
text-align: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:focus {
|
||||||
|
outline: 1px dotted;
|
||||||
|
outline: 5px auto -webkit-focus-ring-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
select,
|
||||||
|
optgroup,
|
||||||
|
textarea {
|
||||||
|
margin: 0;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
select {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
html [type="button"],
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
[type="button"]::-moz-focus-inner,
|
||||||
|
[type="reset"]::-moz-focus-inner,
|
||||||
|
[type="submit"]::-moz-focus-inner {
|
||||||
|
padding: 0;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="radio"],
|
||||||
|
input[type="checkbox"] {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="date"],
|
||||||
|
input[type="time"],
|
||||||
|
input[type="datetime-local"],
|
||||||
|
input[type="month"] {
|
||||||
|
-webkit-appearance: listbox;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
min-width: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: inherit;
|
||||||
|
color: inherit;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="search"] {
|
||||||
|
outline-offset: -2px;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="search"]::-webkit-search-cancel-button,
|
||||||
|
[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
font: inherit;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
output {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
/*# sourceMappingURL=bootstrap-reboot.css.map */
|
||||||
@ -1,5 +1,4 @@
|
|||||||
import { SEC_IN_DAY, MONTH_NAMES_SHORT, clone, timestampToMidnight, timestampSec, addDays } from '../../../src/js/utils/date-utils';
|
import { MONTH_NAMES_SHORT } from '../../../src/js/utils/date-utils';
|
||||||
import { getRandomBias } from '../../../src/js/utils/helpers';
|
|
||||||
|
|
||||||
// Composite Chart
|
// Composite Chart
|
||||||
// ================================================================================
|
// ================================================================================
|
||||||
@ -178,28 +177,3 @@ export const moonData = {
|
|||||||
|
|
||||||
// ================================================================================
|
// ================================================================================
|
||||||
|
|
||||||
let today = new Date();
|
|
||||||
let start = clone(today);
|
|
||||||
addDays(start, 4);
|
|
||||||
let end = clone(start);
|
|
||||||
start.setFullYear( start.getFullYear() - 2 );
|
|
||||||
end.setFullYear( end.getFullYear() - 1 );
|
|
||||||
|
|
||||||
export let dataPoints = {};
|
|
||||||
|
|
||||||
let startTs = timestampSec(start);
|
|
||||||
let endTs = timestampSec(end);
|
|
||||||
|
|
||||||
startTs = timestampToMidnight(startTs);
|
|
||||||
endTs = timestampToMidnight(endTs, true);
|
|
||||||
|
|
||||||
while (startTs < endTs) {
|
|
||||||
dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
|
|
||||||
startTs += SEC_IN_DAY;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const heatmapData = {
|
|
||||||
dataPoints: dataPoints,
|
|
||||||
start: start,
|
|
||||||
end: end
|
|
||||||
};
|
|
||||||
|
|||||||
54
docs/assets/js/demoConfig.js
Normal file
54
docs/assets/js/demoConfig.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import { lineCompositeData, barCompositeData } from './data';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
lineComposite: {
|
||||||
|
elementID: "#chart-composite-1",
|
||||||
|
options: {
|
||||||
|
title: "Fireball/Bolide Events - Yearly (reported)",
|
||||||
|
data: lineCompositeData,
|
||||||
|
type: "line",
|
||||||
|
height: 190,
|
||||||
|
colors: ["green"],
|
||||||
|
isNavigable: 1,
|
||||||
|
valuesOverPoints: 1,
|
||||||
|
|
||||||
|
lineOptions: {
|
||||||
|
dotSize: 8
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
barComposite: {
|
||||||
|
elementID: "#chart-composite-2",
|
||||||
|
options: {
|
||||||
|
data: barCompositeData,
|
||||||
|
type: "bar",
|
||||||
|
height: 210,
|
||||||
|
colors: ["violet", "light-blue", "#46a9f9"],
|
||||||
|
valuesOverPoints: 1,
|
||||||
|
axisOptions: {
|
||||||
|
xAxisMode: "tick"
|
||||||
|
},
|
||||||
|
barOptions: {
|
||||||
|
stacked: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
demoMain: {
|
||||||
|
elementID: "",
|
||||||
|
options: {
|
||||||
|
title: "My Awesome Chart",
|
||||||
|
data: "typeData",
|
||||||
|
type: "axis-mixed",
|
||||||
|
height: 300,
|
||||||
|
colors: ["purple", "magenta", "light-blue"],
|
||||||
|
maxSlices: 10,
|
||||||
|
|
||||||
|
tooltipOptions: {
|
||||||
|
formatTooltipX: d => (d + '').toUpperCase(),
|
||||||
|
formatTooltipY: d => d + ' pts',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,45 +1,19 @@
|
|||||||
import { shuffle, getRandomBias } from '../../../src/js/utils/helpers';
|
import { shuffle, getRandomBias } from '../../../src/js/utils/helpers';
|
||||||
import { HEATMAP_COLORS_YELLOW, HEATMAP_COLORS_BLUE } from '../../../src/js/utils/constants';
|
import { HEATMAP_COLORS_YELLOW, HEATMAP_COLORS_BLUE } from '../../../src/js/utils/constants';
|
||||||
|
import { SEC_IN_DAY, clone, timestampToMidnight, timestampSec, addDays } from '../../../src/js/utils/date-utils';
|
||||||
import { fireballOver25, fireball_2_5, fireball_5_25, lineCompositeData,
|
import { fireballOver25, fireball_2_5, fireball_5_25, lineCompositeData,
|
||||||
barCompositeData, typeData, trendsData, moonData, heatmapData } from './data';
|
barCompositeData, typeData, trendsData, moonData } from './data';
|
||||||
|
import demoConfig from './demoConfig';
|
||||||
|
// import { lineComposite, barComposite } from './demoConfig';
|
||||||
// ================================================================================
|
// ================================================================================
|
||||||
|
|
||||||
let c1 = document.querySelector("#chart-composite-1");
|
|
||||||
let c2 = document.querySelector("#chart-composite-2");
|
|
||||||
|
|
||||||
let Chart = frappe.Chart; // eslint-disable-line no-undef
|
let Chart = frappe.Chart; // eslint-disable-line no-undef
|
||||||
|
|
||||||
let lineCompositeChart = new Chart (c1, {
|
let lc = demoConfig.lineComposite;
|
||||||
title: "Fireball/Bolide Events - Yearly (reported)",
|
let lineCompositeChart = new Chart (lc.elementID, lc.options);
|
||||||
data: lineCompositeData,
|
|
||||||
type: 'line',
|
|
||||||
height: 190,
|
|
||||||
colors: ['green'],
|
|
||||||
isNavigable: 1,
|
|
||||||
valuesOverPoints: 1,
|
|
||||||
|
|
||||||
lineOptions: {
|
let bc = demoConfig.barComposite;
|
||||||
dotSize: 8
|
let barCompositeChart = new Chart (bc.elementID, bc.options);
|
||||||
},
|
|
||||||
// yAxisMode: 'tick'
|
|
||||||
// regionFill: 1
|
|
||||||
});
|
|
||||||
|
|
||||||
let barCompositeChart = new Chart (c2, {
|
|
||||||
data: barCompositeData,
|
|
||||||
type: 'bar',
|
|
||||||
height: 210,
|
|
||||||
colors: ['violet', 'light-blue', '#46a9f9'],
|
|
||||||
valuesOverPoints: 1,
|
|
||||||
axisOptions: {
|
|
||||||
xAxisMode: 'tick'
|
|
||||||
},
|
|
||||||
barOptions: {
|
|
||||||
stacked: 1
|
|
||||||
},
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
lineCompositeChart.parent.addEventListener('data-select', (e) => {
|
lineCompositeChart.parent.addEventListener('data-select', (e) => {
|
||||||
let i = e.index;
|
let i = e.index;
|
||||||
@ -288,6 +262,32 @@ eventsChart.parent.addEventListener('data-select', (e) => {
|
|||||||
// Heatmap
|
// Heatmap
|
||||||
// ================================================================================
|
// ================================================================================
|
||||||
|
|
||||||
|
let today = new Date();
|
||||||
|
let start = clone(today);
|
||||||
|
addDays(start, 4);
|
||||||
|
let end = clone(start);
|
||||||
|
start.setFullYear( start.getFullYear() - 2 );
|
||||||
|
end.setFullYear( end.getFullYear() - 1 );
|
||||||
|
|
||||||
|
let dataPoints = {};
|
||||||
|
|
||||||
|
let startTs = timestampSec(start);
|
||||||
|
let endTs = timestampSec(end);
|
||||||
|
|
||||||
|
startTs = timestampToMidnight(startTs);
|
||||||
|
endTs = timestampToMidnight(endTs, true);
|
||||||
|
|
||||||
|
while (startTs < endTs) {
|
||||||
|
dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
|
||||||
|
startTs += SEC_IN_DAY;
|
||||||
|
}
|
||||||
|
|
||||||
|
const heatmapData = {
|
||||||
|
dataPoints: dataPoints,
|
||||||
|
start: start,
|
||||||
|
end: end
|
||||||
|
};
|
||||||
|
|
||||||
let heatmapArgs = {
|
let heatmapArgs = {
|
||||||
title: "Monthly Distribution",
|
title: "Monthly Distribution",
|
||||||
data: heatmapData,
|
data: heatmapData,
|
||||||
|
|||||||
145
docs/assets/js/index.min.js
vendored
145
docs/assets/js/index.min.js
vendored
@ -46,12 +46,6 @@ var HEATMAP_COLORS_YELLOW = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001
|
|||||||
|
|
||||||
// Universal constants
|
// Universal constants
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the value of a number upto 2 decimal places.
|
|
||||||
* @param {Number} d Any number
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns whether or not two given arrays are equal.
|
* Returns whether or not two given arrays are equal.
|
||||||
* @param {Array} arr1 First array
|
* @param {Array} arr1 First array
|
||||||
@ -120,6 +114,7 @@ var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// https://stackoverflow.com/a/11252167/6495043
|
||||||
|
|
||||||
|
|
||||||
function clone(date) {
|
function clone(date) {
|
||||||
@ -160,8 +155,6 @@ function addDays(date, numberOfDays) {
|
|||||||
date.setDate(date.getDate() + numberOfDays);
|
date.setDate(date.getDate() + numberOfDays);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Composite Chart
|
|
||||||
// ================================================================================
|
|
||||||
var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850];
|
var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850];
|
||||||
|
|
||||||
var lineCompositeData = {
|
var lineCompositeData = {
|
||||||
@ -274,69 +267,70 @@ var moonData = {
|
|||||||
|
|
||||||
// ================================================================================
|
// ================================================================================
|
||||||
|
|
||||||
var today = new Date();
|
var demoConfig = {
|
||||||
var start = clone(today);
|
lineComposite: {
|
||||||
addDays(start, 4);
|
elementID: "#chart-composite-1",
|
||||||
var end = clone(start);
|
options: {
|
||||||
start.setFullYear(start.getFullYear() - 2);
|
title: "Fireball/Bolide Events - Yearly (reported)",
|
||||||
end.setFullYear(end.getFullYear() - 1);
|
data: lineCompositeData,
|
||||||
|
type: "line",
|
||||||
|
height: 190,
|
||||||
|
colors: ["green"],
|
||||||
|
isNavigable: 1,
|
||||||
|
valuesOverPoints: 1,
|
||||||
|
|
||||||
var dataPoints = {};
|
lineOptions: {
|
||||||
|
dotSize: 8
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
var startTs = timestampSec(start);
|
barComposite: {
|
||||||
var endTs = timestampSec(end);
|
elementID: "#chart-composite-2",
|
||||||
|
options: {
|
||||||
|
data: barCompositeData,
|
||||||
|
type: "bar",
|
||||||
|
height: 210,
|
||||||
|
colors: ["violet", "light-blue", "#46a9f9"],
|
||||||
|
valuesOverPoints: 1,
|
||||||
|
axisOptions: {
|
||||||
|
xAxisMode: "tick"
|
||||||
|
},
|
||||||
|
barOptions: {
|
||||||
|
stacked: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
startTs = timestampToMidnight(startTs);
|
demoMain: {
|
||||||
endTs = timestampToMidnight(endTs, true);
|
elementID: "",
|
||||||
|
options: {
|
||||||
|
title: "My Awesome Chart",
|
||||||
|
data: "typeData",
|
||||||
|
type: "axis-mixed",
|
||||||
|
height: 300,
|
||||||
|
colors: ["purple", "magenta", "light-blue"],
|
||||||
|
maxSlices: 10,
|
||||||
|
|
||||||
while (startTs < endTs) {
|
tooltipOptions: {
|
||||||
dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
|
formatTooltipX: function formatTooltipX(d) {
|
||||||
startTs += SEC_IN_DAY;
|
return (d + '').toUpperCase();
|
||||||
}
|
},
|
||||||
|
formatTooltipY: function formatTooltipY(d) {
|
||||||
var heatmapData = {
|
return d + ' pts';
|
||||||
dataPoints: dataPoints,
|
}
|
||||||
start: start,
|
}
|
||||||
end: end
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// ================================================================================
|
|
||||||
|
|
||||||
var c1 = document.querySelector("#chart-composite-1");
|
|
||||||
var c2 = document.querySelector("#chart-composite-2");
|
|
||||||
|
|
||||||
var Chart = frappe.Chart; // eslint-disable-line no-undef
|
var Chart = frappe.Chart; // eslint-disable-line no-undef
|
||||||
|
|
||||||
var lineCompositeChart = new Chart(c1, {
|
var lc = demoConfig.lineComposite;
|
||||||
title: "Fireball/Bolide Events - Yearly (reported)",
|
var lineCompositeChart = new Chart(lc.elementID, lc.options);
|
||||||
data: lineCompositeData,
|
|
||||||
type: 'line',
|
|
||||||
height: 190,
|
|
||||||
colors: ['green'],
|
|
||||||
isNavigable: 1,
|
|
||||||
valuesOverPoints: 1,
|
|
||||||
|
|
||||||
lineOptions: {
|
var bc = demoConfig.barComposite;
|
||||||
dotSize: 8
|
var barCompositeChart = new Chart(bc.elementID, bc.options);
|
||||||
}
|
|
||||||
// yAxisMode: 'tick'
|
|
||||||
// regionFill: 1
|
|
||||||
});
|
|
||||||
|
|
||||||
var barCompositeChart = new Chart(c2, {
|
|
||||||
data: barCompositeData,
|
|
||||||
type: 'bar',
|
|
||||||
height: 210,
|
|
||||||
colors: ['violet', 'light-blue', '#46a9f9'],
|
|
||||||
valuesOverPoints: 1,
|
|
||||||
axisOptions: {
|
|
||||||
xAxisMode: 'tick'
|
|
||||||
},
|
|
||||||
barOptions: {
|
|
||||||
stacked: 1
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
lineCompositeChart.parent.addEventListener('data-select', function (e) {
|
lineCompositeChart.parent.addEventListener('data-select', function (e) {
|
||||||
var i = e.index;
|
var i = e.index;
|
||||||
@ -575,6 +569,32 @@ eventsChart.parent.addEventListener('data-select', function (e) {
|
|||||||
// Heatmap
|
// Heatmap
|
||||||
// ================================================================================
|
// ================================================================================
|
||||||
|
|
||||||
|
var today = new Date();
|
||||||
|
var start = clone(today);
|
||||||
|
addDays(start, 4);
|
||||||
|
var end = clone(start);
|
||||||
|
start.setFullYear(start.getFullYear() - 2);
|
||||||
|
end.setFullYear(end.getFullYear() - 1);
|
||||||
|
|
||||||
|
var dataPoints = {};
|
||||||
|
|
||||||
|
var startTs = timestampSec(start);
|
||||||
|
var endTs = timestampSec(end);
|
||||||
|
|
||||||
|
startTs = timestampToMidnight(startTs);
|
||||||
|
endTs = timestampToMidnight(endTs, true);
|
||||||
|
|
||||||
|
while (startTs < endTs) {
|
||||||
|
dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
|
||||||
|
startTs += SEC_IN_DAY;
|
||||||
|
}
|
||||||
|
|
||||||
|
var heatmapData = {
|
||||||
|
dataPoints: dataPoints,
|
||||||
|
start: start,
|
||||||
|
end: end
|
||||||
|
};
|
||||||
|
|
||||||
var heatmapArgs = {
|
var heatmapArgs = {
|
||||||
title: "Monthly Distribution",
|
title: "Monthly Distribution",
|
||||||
data: heatmapData,
|
data: heatmapData,
|
||||||
@ -650,4 +670,3 @@ document.querySelector('.export-heatmap').addEventListener('click', function ()
|
|||||||
});
|
});
|
||||||
|
|
||||||
}());
|
}());
|
||||||
//# sourceMappingURL=index.min.js.map
|
|
||||||
|
|||||||
0
docs/docs.html
Normal file
0
docs/docs.html
Normal file
459
docs/index.html
459
docs/index.html
@ -7,12 +7,11 @@
|
|||||||
<meta name="keywords" content="open source javascript js charts library svg zero-dependency interactive data visualization beautiful drag resize">
|
<meta name="keywords" content="open source javascript js charts library svg zero-dependency interactive data visualization beautiful drag resize">
|
||||||
<meta name="description" content="A simple, responsive, modern charts library for the web.">
|
<meta name="description" content="A simple, responsive, modern charts library for the web.">
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="assets/css/normalize.css" media="screen">
|
<link rel="stylesheet" type="text/css" href="assets/css/reset.css" media="screen">
|
||||||
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
|
|
||||||
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" media="screen">
|
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" media="screen">
|
||||||
<link rel="stylesheet" type="text/css" href="assets/css/frappe_theme.css" media="screen">
|
|
||||||
<link rel="stylesheet" type="text/css" href="assets/css/index.css" media="screen">
|
<link rel="stylesheet" type="text/css" href="assets/css/index.css" media="screen">
|
||||||
<link rel="stylesheet" type="text/css" href="assets/css/default.css" media="screen">
|
<link rel="stylesheet" type="text/css" href="assets/css/hljs.css" media="screen">
|
||||||
|
|
||||||
<script src="assets/js/highlight.pack.js"></script>
|
<script src="assets/js/highlight.pack.js"></script>
|
||||||
<script>hljs.initHighlightingOnLoad();</script>
|
<script>hljs.initHighlightingOnLoad();</script>
|
||||||
|
|
||||||
@ -23,32 +22,19 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<header>
|
||||||
<div class="row hero" style="padding-top: 30px; padding-bottom: 0px;">
|
<h1>Frappe Charts</h1>
|
||||||
<div class="jumbotron" style="background: transparent;">
|
<p class="lead-text">GitHub-inspired simple and modern SVG charts for the web<br>with zero dependencies.</p>
|
||||||
<h1>Frappe Charts</h1>
|
<div id="chart-composite-1" class="border"></div>
|
||||||
<p class="mt-2">GitHub-inspired simple and modern SVG charts for the web</p>
|
<p class="demo-tip">Click or use arrow keys to navigate data points</p>
|
||||||
<p class="mt-2">with zero dependencies.</p>
|
<div id="chart-composite-2" class="border"></div>
|
||||||
</div>
|
</header>
|
||||||
|
|
||||||
<div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
|
<section>
|
||||||
<div id="chart-composite-1" class="border"><svg height=225></svg></div>
|
<h6>Create a chart</h6>
|
||||||
<p class="mt-1">Click or use arrow keys to navigate data points</p>
|
<pre><code class="hljs html"> <!--HTML-->
|
||||||
</div>
|
|
||||||
<div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
|
|
||||||
<div id="chart-composite-2" class="border"><svg height=225></svg></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group later">
|
|
||||||
<div class="row section">
|
|
||||||
|
|
||||||
<div class="col-sm-10 push-sm-1">
|
|
||||||
<div class="dashboard-section">
|
|
||||||
<h6 class="margin-vertical-rem">Create a chart</h6>
|
|
||||||
<pre><code class="hljs html"> <!--HTML-->
|
|
||||||
<div id="chart"></div></code></pre>
|
<div id="chart"></div></code></pre>
|
||||||
<pre><code class="hljs javascript"> // Javascript
|
<pre><code class="hljs javascript"> // Javascript
|
||||||
let chart = new frappe.Chart( "#chart", { // or DOM element
|
let chart = new frappe.Chart( "#chart", { // or DOM element
|
||||||
data: {
|
data: {
|
||||||
labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
|
labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
|
||||||
@ -88,130 +74,91 @@
|
|||||||
|
|
||||||
chart.export();
|
chart.export();
|
||||||
</code></pre>
|
</code></pre>
|
||||||
<!-- <div id="chart-types" class="border" style="margin-bottom: 15px"></div> -->
|
|
||||||
<!-- <div >
|
|
||||||
<div class="btn-group x-axis-buttons margin-vertical-px" role="group">
|
|
||||||
<button type="button" class="btn btn-sm btn-secondary active" data-type='span'>X span</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-secondary" data-type='tick'>X tick</button>
|
|
||||||
</div>
|
|
||||||
<div class="btn-group y-axis-buttons margin-vertical-px" role="group">
|
|
||||||
<button type="button" class="btn btn-sm btn-secondary active" data-type='span'>Y span</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-secondary" data-type='tick'>Y tick</button>
|
|
||||||
</div>
|
|
||||||
<div class="input-group input-group-sm">
|
|
||||||
<span class="input-group-addon">.00</span>
|
|
||||||
<input type="text" class="form-control" aria-label="Amount (rounded to the nearest dollar)">
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<div id="chart-aggr" class="border"></div>
|
<div id="chart-aggr" class="border"></div>
|
||||||
<div class="btn-group aggr-type-buttons margin-vertical-px mx-auto" role="group">
|
<div class="btn-group aggr-type-buttons margin-top mx-auto" role="group">
|
||||||
<button type="button" class="btn btn-sm btn-secondary active" data-type='axis-mixed'>Mixed</button>
|
<button type="button" class="btn btn-sm btn-secondary active" data-type='axis-mixed'>Mixed</button>
|
||||||
<button type="button" class="btn btn-sm btn-secondary" data-type='pie'>Pie Chart</button>
|
<button type="button" class="btn btn-sm btn-secondary" data-type='pie'>Pie Chart</button>
|
||||||
<button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button>
|
<button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-group export-buttons margin-vertical-px mx-auto" role="group">
|
<div class="btn-group export-buttons margin-top mx-auto" role="group">
|
||||||
<button type="button" class="btn btn-sm btn-secondary export-aggr">Export ...</button>
|
<button type="button" class="btn btn-sm btn-secondary export-aggr">Export ...</button>
|
||||||
</div>
|
</div>
|
||||||
<!-- <p class="text-muted">
|
</section>
|
||||||
<a target="_blank" href="http://www.storytellingwithdata.com/blog/2011/07/death-to-pie-charts">Why Percentage?</a>
|
|
||||||
</p> -->
|
<section>
|
||||||
</div>
|
<h6>Update Values</h6>
|
||||||
|
<div id="chart-update" class="border"></div>
|
||||||
|
|
||||||
|
<div class="chart-update-buttons mt-1 mx-auto" role="group">
|
||||||
|
<button type="button" class="btn btn-sm btn-secondary" data-update="random">Random Data</button>
|
||||||
|
<button type="button" class="btn btn-sm btn-secondary" data-update="add">Add Value</button>
|
||||||
|
<button type="button" class="btn btn-sm btn-secondary" data-update="remove">Remove Value</button>
|
||||||
|
<button type="button" class="btn btn-sm btn-secondary export-update">Export ...</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h6>Plot Trends</h6>
|
||||||
|
<div id="chart-trends" class="border"></div>
|
||||||
|
|
||||||
|
<div class="btn-group chart-plot-buttons mt-1 mx-auto" role="group">
|
||||||
|
<button type="button" class="btn btn-sm btn-secondary" data-type="hideDots">Line</button>
|
||||||
|
<button type="button" class="btn btn-sm btn-secondary" data-type="hideLine">Dots</button>
|
||||||
|
<button type="button" class="btn btn-sm btn-secondary active" data-type="heatline">HeatLine</button>
|
||||||
|
<button type="button" class="btn btn-sm btn-secondary" data-type="regionFill">Region</button>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group export-buttons mt-1 mx-auto" role="group">
|
||||||
|
<button type="button" class="btn btn-sm btn-secondary export-trends">Export ...</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h6>Listen to state change</h6>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<div id="chart-events" class="border"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 chart-events-data">
|
||||||
|
<div class="image-container border">
|
||||||
|
<img class="moon-image" src="./assets/img/europa.jpg">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="content-data margin-top">
|
||||||
<div class="col-sm-10 push-sm-1">
|
<h6 class="moon-name">Europa</h6>
|
||||||
<div class="dashboard-section">
|
<p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p>
|
||||||
<h6 class="margin-vertical-rem">
|
<p>Mass: <span class="mass">4800000</span> x 10^16 kg</p>
|
||||||
Update Values
|
<p>Diameter: <span class="diameter">3121.6</span> km</p>
|
||||||
</h6>
|
|
||||||
<div id="chart-update" class="border"></div>
|
|
||||||
<div class="chart-update-buttons mt-1 mx-auto" role="group">
|
|
||||||
<button type="button" class="btn btn-sm btn-secondary" data-update="random">Random Data</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-secondary" data-update="add">Add Value</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-secondary" data-update="remove">Remove Value</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-secondary export-update">Export ...</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="col-sm-10 push-sm-1">
|
</div>
|
||||||
<div class="dashboard-section">
|
<pre><code class="hljs javascript margin-top"> ...
|
||||||
<h6 class="margin-vertical-rem">
|
isNavigable: 1, // Navigate across data points; default 0
|
||||||
Plot Trends
|
|
||||||
</h6>
|
|
||||||
<div id="chart-trends" class="border"></div>
|
|
||||||
<div class="btn-group chart-plot-buttons mt-1 mx-auto" role="group">
|
|
||||||
<button type="button" class="btn btn-sm btn-secondary" data-type="hideDots">Line</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-secondary" data-type="hideLine">Dots</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-secondary active" data-type="heatline">HeatLine</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-secondary" data-type="regionFill">Region</button>
|
|
||||||
</div>
|
|
||||||
<div class="btn-group export-buttons mt-1 mx-auto" role="group">
|
|
||||||
<button type="button" class="btn btn-sm btn-secondary export-trends">Export ...</button>
|
|
||||||
</div>
|
|
||||||
<!-- <pre><code class="hljs javascript margin-vertical-px"> ...
|
|
||||||
lineOptions: 'line', // Line Chart specific properties:
|
|
||||||
|
|
||||||
hideDots: 1, // Hide data points on the line; default 0
|
|
||||||
heatline: 1, // Show a value-wise line gradient; default 0
|
|
||||||
regionFill: 1, // Fill the area under the graph; default 0
|
|
||||||
...</code></pre> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-sm-10 push-sm-1">
|
|
||||||
<div class="dashboard-section">
|
|
||||||
<h6 class="margin-vertical-rem">
|
|
||||||
Listen to state change
|
|
||||||
</h6>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-8">
|
|
||||||
<div id="chart-events" class="border"></div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-4">
|
|
||||||
<div class="chart-events-data" class="border data-container">
|
|
||||||
<div class="image-container border">
|
|
||||||
<img class="moon-image" src="./assets/img/europa.jpg">
|
|
||||||
</div>
|
|
||||||
<div class="data margin-vertical-px">
|
|
||||||
<h6 class="moon-name">Europa</h6>
|
|
||||||
<p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p>
|
|
||||||
<p>Mass: <span class="mass">4800000</span> x 10^16 kg</p>
|
|
||||||
<p>Diameter: <span class="diameter">3121.6</span> km</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<pre><code class="hljs javascript margin-vertical-px"> ...
|
|
||||||
isNavigable: 1, // Navigate across data points; default 0
|
|
||||||
...
|
...
|
||||||
|
|
||||||
chart.parent.addEventListener('data-select', (e) => {
|
chart.parent.addEventListener('data-select', (e) => {
|
||||||
update_moon_data(e.index); // e contains index and value of current datapoint
|
update_moon_data(e.index); // e contains index and value of current datapoint
|
||||||
});</code></pre>
|
});</code></pre>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-sm-10 push-sm-1">
|
<section>
|
||||||
<div class="dashboard-section">
|
<h6>
|
||||||
<h6 class="margin-vertical-rem">
|
And a Month-wise Heatmap
|
||||||
And a Month-wise Heatmap
|
</h6>
|
||||||
</h6>
|
<div id="chart-heatmap" class="border"
|
||||||
<div id="chart-heatmap" class="border"
|
style="overflow: scroll;"></div>
|
||||||
style="overflow: scroll;"></div>
|
<div class="heatmap-mode-buttons btn-group mt-1 mx-auto" role="group">
|
||||||
<div class="heatmap-mode-buttons btn-group mt-1 mx-auto" role="group">
|
<button type="button" class="btn btn-sm btn-secondary active" data-mode="discrete">Discrete</button>
|
||||||
<button type="button" class="btn btn-sm btn-secondary active" data-mode="discrete">Discrete</button>
|
<button type="button" class="btn btn-sm btn-secondary" data-mode="continuous">Continuous</button>
|
||||||
<button type="button" class="btn btn-sm btn-secondary" data-mode="continuous">Continuous</button>
|
</div>
|
||||||
</div>
|
<div class="heatmap-color-buttons btn-group mt-1 mx-auto" role="group">
|
||||||
<div class="heatmap-color-buttons btn-group mt-1 mx-auto" role="group">
|
<button type="button" class="btn btn-sm btn-secondary" data-color="default">Green (Default)</button>
|
||||||
<button type="button" class="btn btn-sm btn-secondary" data-color="default">Green (Default)</button>
|
<button type="button" class="btn btn-sm btn-secondary active" data-color="blue">Blue</button>
|
||||||
<button type="button" class="btn btn-sm btn-secondary active" data-color="blue">Blue</button>
|
<button type="button" class="btn btn-sm btn-secondary" data-color="halloween">GitHub's Halloween</button>
|
||||||
<button type="button" class="btn btn-sm btn-secondary" data-color="halloween">GitHub's Halloween</button>
|
</div>
|
||||||
</div>
|
<div class="btn-group export-buttons mt-1 mx-auto" role="group">
|
||||||
<div class="btn-group export-buttons mt-1 mx-auto" role="group">
|
<button type="button" class="btn btn-sm btn-secondary export-heatmap">Export ...</button>
|
||||||
<button type="button" class="btn btn-sm btn-secondary export-heatmap">Export ...</button>
|
</div>
|
||||||
</div>
|
<pre><code class="hljs javascript margin-top"> let heatmap = new frappe.Chart("#heatmap", {
|
||||||
<pre><code class="hljs javascript margin-vertical-px"> let heatmap = new frappe.Chart("#heatmap", {
|
|
||||||
type: 'heatmap',
|
type: 'heatmap',
|
||||||
title: "Monthly Distribution",
|
title: "Monthly Distribution",
|
||||||
data: {
|
data: {
|
||||||
@ -223,138 +170,126 @@
|
|||||||
countLabel: 'Level',
|
countLabel: 'Level',
|
||||||
discreteDomains: 0 // default: 1
|
discreteDomains: 0 // default: 1
|
||||||
colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
|
colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
|
||||||
// Set of five incremental colors,
|
// Set of five incremental colors,
|
||||||
// preferably with a low-saturation color for zero data;
|
// preferably with a low-saturation color for zero data;
|
||||||
// def: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
|
// def: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
|
||||||
});</code></pre>
|
});</code></pre>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-sm-10 push-sm-1">
|
<section>
|
||||||
<p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"
|
<h6>Demo</h6>
|
||||||
data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">
|
<p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"
|
||||||
See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>
|
data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">
|
||||||
by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on
|
See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>
|
||||||
<a href="https://codepen.io">CodePen</a>.
|
by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on
|
||||||
</p>
|
<a href="https://codepen.io">CodePen</a>.
|
||||||
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
|
</p>
|
||||||
</div>
|
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="col-sm-10 push-sm-1">
|
<section>
|
||||||
<div class="dashboard-section">
|
<h6>Available options</h6>
|
||||||
<h6 class="margin-vertical-rem">Available options:</h6>
|
<pre><code class="hljs javascript">
|
||||||
<pre><code class="hljs javascript">
|
...
|
||||||
...
|
{
|
||||||
{
|
data: {
|
||||||
data: {
|
labels: [],
|
||||||
labels: [],
|
datasets: [],
|
||||||
datasets: [],
|
yRegions: [],
|
||||||
yRegions: [],
|
yMarkers: []
|
||||||
yMarkers: []
|
}
|
||||||
|
title: '',
|
||||||
|
colors: [],
|
||||||
|
height: 200,
|
||||||
|
|
||||||
|
tooltipOptions: {
|
||||||
|
formatTooltipX: d => (d + '').toUpperCase(),
|
||||||
|
formatTooltipY: d => d + ' pts',
|
||||||
|
}
|
||||||
|
|
||||||
|
// Axis charts
|
||||||
|
isNavigable: 1, // default: 0
|
||||||
|
valuesOverPoints: 1, // default: 0
|
||||||
|
barOptions: {
|
||||||
|
spaceRatio: 1 // default: 0.5
|
||||||
|
stacked: 1 // default: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
lineOptions: {
|
||||||
|
dotSize: 6, // default: 4
|
||||||
|
hideLine: 0, // default: 0
|
||||||
|
hideDots: 1, // default: 0
|
||||||
|
heatline: 1, // default: 0
|
||||||
|
regionFill: 1 // default: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
axisOptions: {
|
||||||
|
yAxisMode: 'span', // Axis lines, default
|
||||||
|
xAxisMode: 'tick', // No axis lines, only short ticks
|
||||||
|
xIsSeries: 1 // Allow skipping x values for space
|
||||||
|
// default: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
// Pie/Percentage charts
|
||||||
|
maxLegendPoints: 6, // default: 20
|
||||||
|
maxSlices: 10, // default: 20
|
||||||
|
|
||||||
|
// Percentage chart
|
||||||
|
barOptions: {
|
||||||
|
height: 15 // default: 20
|
||||||
|
depth: 5 // default: 2
|
||||||
|
}
|
||||||
|
|
||||||
|
// Heatmap
|
||||||
|
discreteDomains: 1, // default: 1
|
||||||
}
|
}
|
||||||
title: '',
|
...
|
||||||
colors: [],
|
|
||||||
height: 200,
|
|
||||||
|
|
||||||
tooltipOptions: {
|
// Updating values
|
||||||
formatTooltipX: d => (d + '').toUpperCase(),
|
chart.update(data);
|
||||||
formatTooltipY: d => d + ' pts',
|
|
||||||
}
|
|
||||||
|
|
||||||
// Axis charts
|
// Axis charts:
|
||||||
isNavigable: 1, // default: 0
|
chart.addDataPoint(label, valueFromEachDataset, index)
|
||||||
valuesOverPoints: 1, // default: 0
|
chart.removeDataPoint(index)
|
||||||
barOptions: {
|
chart.updateDataset(datasetValues, index)
|
||||||
spaceRatio: 1 // default: 0.5
|
|
||||||
stacked: 1 // default: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
lineOptions: {
|
// Exporting
|
||||||
dotSize: 6, // default: 4
|
chart.export();
|
||||||
hideLine: 0, // default: 0
|
|
||||||
hideDots: 1, // default: 0
|
|
||||||
heatline: 1, // default: 0
|
|
||||||
regionFill: 1 // default: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
axisOptions: {
|
// Unbind window-resize events
|
||||||
yAxisMode: 'span', // Axis lines, default
|
chart.unbindWindowEvents();
|
||||||
xAxisMode: 'tick', // No axis lines, only short ticks
|
|
||||||
xIsSeries: 1 // Allow skipping x values for space
|
|
||||||
// default: 0
|
|
||||||
},
|
|
||||||
|
|
||||||
// Pie/Percentage charts
|
</code></pre>
|
||||||
maxLegendPoints: 6, // default: 20
|
</section>
|
||||||
maxSlices: 10, // default: 20
|
|
||||||
|
|
||||||
// Percentage chart
|
<section>
|
||||||
barOptions: {
|
<h6>Install</h6>
|
||||||
height: 15 // default: 20
|
<p>Install via npm</p>
|
||||||
depth: 5 // default: 2
|
<pre><code class="hljs console"> npm install frappe-charts</code></pre>
|
||||||
}
|
<p>And include it in your project</p>
|
||||||
|
<pre><code class="hljs javascript"> import { Chart } from "frappe-charts"</code></pre>
|
||||||
// Heatmap
|
<p>... or include it directly in your HTML</p>
|
||||||
discreteDomains: 1, // default: 1
|
<pre><code class="hljs html"> <script src="https://unpkg.com/frappe-charts@1.1.0"></script></code></pre>
|
||||||
}
|
<p>Use as:</p>
|
||||||
...
|
<pre><code class="hljs javascript"> new Chart(); // ES6 module
|
||||||
|
|
||||||
// Updating values
|
|
||||||
chart.update(data);
|
|
||||||
|
|
||||||
// Axis charts:
|
|
||||||
chart.addDataPoint(label, valueFromEachDataset, index)
|
|
||||||
chart.removeDataPoint(index)
|
|
||||||
chart.updateDataset(datasetValues, index)
|
|
||||||
|
|
||||||
// Exporting
|
|
||||||
chart.export();
|
|
||||||
|
|
||||||
// Unbind window-resize events
|
|
||||||
chart.unbindWindowEvents();
|
|
||||||
|
|
||||||
</code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-sm-10 push-sm-1">
|
|
||||||
<div class="dashboard-section">
|
|
||||||
<h6 class="margin-vertical-rem">Install</h6>
|
|
||||||
<p class="step-explain">Install via npm</p>
|
|
||||||
<pre><code class="hljs console"> npm install frappe-charts</code></pre>
|
|
||||||
<p class="step-explain">And include it in your project</p>
|
|
||||||
<pre><code class="hljs javascript"> import { Chart } from "frappe-charts"</code></pre>
|
|
||||||
<p class="step-explain">... or include it directly in your HTML</p>
|
|
||||||
<pre><code class="hljs html"> <script src="https://unpkg.com/frappe-charts@1.1.0"></script></code></pre>
|
|
||||||
<p class="step-explain">Use as:</p>
|
|
||||||
<pre><code class="hljs javascript"> new Chart(); // ES6 module
|
|
||||||
// or
|
// or
|
||||||
new frappe.Chart(); // Browser</code></pre>
|
new frappe.Chart(); // Browser</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
</div>
|
<section class="text-center">
|
||||||
</div>
|
<!-- Closing -->
|
||||||
|
<a href="https://github.com/frappe/charts/archive/master.zip"><button class="large blue button btn">Download</button></a>
|
||||||
|
<p style="margin-top: 3rem;margin-bottom: 1.5rem;">
|
||||||
|
<!-- <a href="docs.html" style="margin-right: 1rem;" target="_blank">Documentation</a> -->
|
||||||
|
<a href="https://github.com/frappe/charts" target="_blank">View on GitHub</a>
|
||||||
|
</p>
|
||||||
|
<p style="margin-top: 1rem;">
|
||||||
|
<a class="github-button" href="https://github.com/frappe/charts" data-icon="octicon-star" data-show-count="true" aria-label="Star frappe/charts on GitHub">Star</a>
|
||||||
|
</p>
|
||||||
|
<p>License: MIT</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="built-with-frappe text-center">
|
||||||
<div class="col-sm-10 push-sm-1">
|
|
||||||
<div class="dashboard-section">
|
|
||||||
<!-- Closing -->
|
|
||||||
<div class="text-center" style="margin-top: 70px">
|
|
||||||
<a href="https://github.com/frappe/charts/archive/master.zip"><button class="large blue button">Download</button></a>
|
|
||||||
<p style="margin-top: 3rem;margin-bottom: 1.5rem;"><a href="https://github.com/frappe/charts" target="_blank">View on GitHub</a></p>
|
|
||||||
<p style="margin-top: 1rem;">
|
|
||||||
<a class="github-button" href="https://github.com/frappe/charts" data-icon="octicon-star" data-show-count="true" aria-label="Star frappe/charts on GitHub">Star</a>
|
|
||||||
</p>
|
|
||||||
<p>License: MIT</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="built-with-frappe text-center" style="margin-top: -20px">
|
|
||||||
<img style="padding: 5px; width: 40px; background: #fff" class="frappe-bird" src="./assets/img/frappe-bird.png">
|
<img style="padding: 5px; width: 40px; background: #fff" class="frappe-bird" src="./assets/img/frappe-bird.png">
|
||||||
<p style="margin: 24px 0 0px 0; font-size: 15px">
|
<p style="margin: 24px 0 0px 0; font-size: 15px">
|
||||||
Project maintained by <a href="https://frappe.io" target="_blank">Frappe</a>.
|
Project maintained by <a href="https://frappe.io" target="_blank">Frappe</a>.
|
||||||
@ -366,7 +301,7 @@
|
|||||||
<a href="http://www.sidc.be/silso" target="_blank">SILSO</a> and
|
<a href="http://www.sidc.be/silso" target="_blank">SILSO</a> and
|
||||||
<a href="https://api.nasa.gov/index.html" target="_blank">NASA Open APIs</a>
|
<a href="https://api.nasa.gov/index.html" target="_blank">NASA Open APIs</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</footer>
|
||||||
|
|
||||||
<a href="https://github.com/frappe/charts" target="_blank" class="github-corner" aria-label="View source on Github">
|
<a href="https://github.com/frappe/charts" target="_blank" class="github-corner" aria-label="View source on Github">
|
||||||
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#9a9a9a; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
|
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#9a9a9a; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user