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 {
|
||||
width: 100%;
|
||||
body {
|
||||
/* 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;
|
||||
color: #fff;
|
||||
padding: 2em 0;
|
||||
}
|
||||
.jumbotron {
|
||||
padding: 2rem 2rem;
|
||||
header .lead-text {
|
||||
line-height: 3rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.project-name {
|
||||
padding-top: 1.8em;
|
||||
font-size: 2.5em;
|
||||
.demo-tip {
|
||||
margin-top: 1rem; /* SAME 2 */
|
||||
font-size: 1rem;
|
||||
}
|
||||
.project-tagline {
|
||||
font-size: 1em;
|
||||
opacity: 0.7;
|
||||
padding: 2em;
|
||||
section {
|
||||
margin: 4em 0; /* SAME 1 */
|
||||
}
|
||||
.btn-transparent {
|
||||
margin: 0 0.5em;
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
h1 {
|
||||
font-size: 3.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.btn-transparent:hover {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
h1, h6 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.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 {
|
||||
outline: none !important;
|
||||
}
|
||||
.dashboard-section h1 {
|
||||
margin-left: -2px;
|
||||
.blue.button {
|
||||
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 {
|
||||
/*font-size: 1.4rem;*/
|
||||
.mv1 {
|
||||
margin: 2em 0 1em 0;
|
||||
}
|
||||
.data-container {
|
||||
padding: 20px;
|
||||
padding-bottom: 0px;
|
||||
.border {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
/* Moon images */
|
||||
.image-container {
|
||||
padding: 3px;
|
||||
}
|
||||
@ -72,19 +99,12 @@ pre.highlight {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.data p {
|
||||
.content-data p {
|
||||
margin-bottom: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.margin-vertical-px {
|
||||
margin: 15px 0px;
|
||||
}
|
||||
|
||||
.margin-vertical-rem {
|
||||
margin: 2em 0 1em 0;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
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 { getRandomBias } from '../../../src/js/utils/helpers';
|
||||
import { MONTH_NAMES_SHORT } from '../../../src/js/utils/date-utils';
|
||||
|
||||
// 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 { 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,
|
||||
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 lineCompositeChart = new Chart (c1, {
|
||||
title: "Fireball/Bolide Events - Yearly (reported)",
|
||||
data: lineCompositeData,
|
||||
type: 'line',
|
||||
height: 190,
|
||||
colors: ['green'],
|
||||
isNavigable: 1,
|
||||
valuesOverPoints: 1,
|
||||
let lc = demoConfig.lineComposite;
|
||||
let lineCompositeChart = new Chart (lc.elementID, lc.options);
|
||||
|
||||
lineOptions: {
|
||||
dotSize: 8
|
||||
},
|
||||
// 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
|
||||
},
|
||||
|
||||
});
|
||||
let bc = demoConfig.barComposite;
|
||||
let barCompositeChart = new Chart (bc.elementID, bc.options);
|
||||
|
||||
lineCompositeChart.parent.addEventListener('data-select', (e) => {
|
||||
let i = e.index;
|
||||
@ -288,6 +262,32 @@ eventsChart.parent.addEventListener('data-select', (e) => {
|
||||
// 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 = {
|
||||
title: "Monthly Distribution",
|
||||
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
|
||||
|
||||
/**
|
||||
* Returns the value of a number upto 2 decimal places.
|
||||
* @param {Number} d Any number
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Returns whether or not two given arrays are equal.
|
||||
* @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) {
|
||||
@ -160,8 +155,6 @@ function addDays(date, numberOfDays) {
|
||||
date.setDate(date.getDate() + numberOfDays);
|
||||
}
|
||||
|
||||
// Composite Chart
|
||||
// ================================================================================
|
||||
var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850];
|
||||
|
||||
var lineCompositeData = {
|
||||
@ -274,69 +267,70 @@ var moonData = {
|
||||
|
||||
// ================================================================================
|
||||
|
||||
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 demoConfig = {
|
||||
lineComposite: {
|
||||
elementID: "#chart-composite-1",
|
||||
options: {
|
||||
title: "Fireball/Bolide Events - Yearly (reported)",
|
||||
data: lineCompositeData,
|
||||
type: "line",
|
||||
height: 190,
|
||||
colors: ["green"],
|
||||
isNavigable: 1,
|
||||
valuesOverPoints: 1,
|
||||
|
||||
var dataPoints = {};
|
||||
lineOptions: {
|
||||
dotSize: 8
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
var startTs = timestampSec(start);
|
||||
var endTs = timestampSec(end);
|
||||
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
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
startTs = timestampToMidnight(startTs);
|
||||
endTs = timestampToMidnight(endTs, true);
|
||||
demoMain: {
|
||||
elementID: "",
|
||||
options: {
|
||||
title: "My Awesome Chart",
|
||||
data: "typeData",
|
||||
type: "axis-mixed",
|
||||
height: 300,
|
||||
colors: ["purple", "magenta", "light-blue"],
|
||||
maxSlices: 10,
|
||||
|
||||
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
|
||||
tooltipOptions: {
|
||||
formatTooltipX: function formatTooltipX(d) {
|
||||
return (d + '').toUpperCase();
|
||||
},
|
||||
formatTooltipY: function formatTooltipY(d) {
|
||||
return d + ' pts';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// ================================================================================
|
||||
|
||||
var c1 = document.querySelector("#chart-composite-1");
|
||||
var c2 = document.querySelector("#chart-composite-2");
|
||||
|
||||
var Chart = frappe.Chart; // eslint-disable-line no-undef
|
||||
|
||||
var lineCompositeChart = new Chart(c1, {
|
||||
title: "Fireball/Bolide Events - Yearly (reported)",
|
||||
data: lineCompositeData,
|
||||
type: 'line',
|
||||
height: 190,
|
||||
colors: ['green'],
|
||||
isNavigable: 1,
|
||||
valuesOverPoints: 1,
|
||||
var lc = demoConfig.lineComposite;
|
||||
var lineCompositeChart = new Chart(lc.elementID, lc.options);
|
||||
|
||||
lineOptions: {
|
||||
dotSize: 8
|
||||
}
|
||||
// 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
|
||||
}
|
||||
|
||||
});
|
||||
var bc = demoConfig.barComposite;
|
||||
var barCompositeChart = new Chart(bc.elementID, bc.options);
|
||||
|
||||
lineCompositeChart.parent.addEventListener('data-select', function (e) {
|
||||
var i = e.index;
|
||||
@ -575,6 +569,32 @@ eventsChart.parent.addEventListener('data-select', function (e) {
|
||||
// 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 = {
|
||||
title: "Monthly Distribution",
|
||||
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="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 href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/reset.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/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>hljs.initHighlightingOnLoad();</script>
|
||||
|
||||
@ -23,32 +22,19 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row hero" style="padding-top: 30px; padding-bottom: 0px;">
|
||||
<div class="jumbotron" style="background: transparent;">
|
||||
<h1>Frappe Charts</h1>
|
||||
<p class="mt-2">GitHub-inspired simple and modern SVG charts for the web</p>
|
||||
<p class="mt-2">with zero dependencies.</p>
|
||||
</div>
|
||||
<header>
|
||||
<h1>Frappe Charts</h1>
|
||||
<p class="lead-text">GitHub-inspired simple and modern SVG charts for the web<br>with zero dependencies.</p>
|
||||
<div id="chart-composite-1" class="border"></div>
|
||||
<p class="demo-tip">Click or use arrow keys to navigate data points</p>
|
||||
<div id="chart-composite-2" class="border"></div>
|
||||
</header>
|
||||
|
||||
<div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
|
||||
<div id="chart-composite-1" class="border"><svg height=225></svg></div>
|
||||
<p class="mt-1">Click or use arrow keys to navigate data points</p>
|
||||
</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-->
|
||||
<section>
|
||||
<h6>Create a chart</h6>
|
||||
<pre><code class="hljs html"> <!--HTML-->
|
||||
<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
|
||||
data: {
|
||||
labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
|
||||
@ -88,130 +74,91 @@
|
||||
|
||||
chart.export();
|
||||
</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 class="btn-group aggr-type-buttons margin-vertical-px 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" data-type='pie'>Pie Chart</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button>
|
||||
</div>
|
||||
<div class="btn-group export-buttons margin-vertical-px mx-auto" role="group">
|
||||
<button type="button" class="btn btn-sm btn-secondary export-aggr">Export ...</button>
|
||||
</div>
|
||||
<!-- <p class="text-muted">
|
||||
<a target="_blank" href="http://www.storytellingwithdata.com/blog/2011/07/death-to-pie-charts">Why Percentage?</a>
|
||||
</p> -->
|
||||
</div>
|
||||
<div id="chart-aggr" class="border"></div>
|
||||
<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" data-type='pie'>Pie Chart</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<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 class="col-sm-10 push-sm-1">
|
||||
<div class="dashboard-section">
|
||||
<h6 class="margin-vertical-rem">
|
||||
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>
|
||||
</div>
|
||||
<div class="content-data margin-top">
|
||||
<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 class="col-sm-10 push-sm-1">
|
||||
<div class="dashboard-section">
|
||||
<h6 class="margin-vertical-rem">
|
||||
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
|
||||
</div>
|
||||
</div>
|
||||
<pre><code class="hljs javascript margin-top"> ...
|
||||
isNavigable: 1, // Navigate across data points; default 0
|
||||
...
|
||||
|
||||
chart.parent.addEventListener('data-select', (e) => {
|
||||
update_moon_data(e.index); // e contains index and value of current datapoint
|
||||
});</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="col-sm-10 push-sm-1">
|
||||
<div class="dashboard-section">
|
||||
<h6 class="margin-vertical-rem">
|
||||
And a Month-wise Heatmap
|
||||
</h6>
|
||||
<div id="chart-heatmap" class="border"
|
||||
style="overflow: scroll;"></div>
|
||||
<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" data-mode="continuous">Continuous</button>
|
||||
</div>
|
||||
<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 active" data-color="blue">Blue</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary" data-color="halloween">GitHub's Halloween</button>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<pre><code class="hljs javascript margin-vertical-px"> let heatmap = new frappe.Chart("#heatmap", {
|
||||
<section>
|
||||
<h6>
|
||||
And a Month-wise Heatmap
|
||||
</h6>
|
||||
<div id="chart-heatmap" class="border"
|
||||
style="overflow: scroll;"></div>
|
||||
<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" data-mode="continuous">Continuous</button>
|
||||
</div>
|
||||
<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 active" data-color="blue">Blue</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary" data-color="halloween">GitHub's Halloween</button>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<pre><code class="hljs javascript margin-top"> let heatmap = new frappe.Chart("#heatmap", {
|
||||
type: 'heatmap',
|
||||
title: "Monthly Distribution",
|
||||
data: {
|
||||
@ -223,138 +170,126 @@
|
||||
countLabel: 'Level',
|
||||
discreteDomains: 0 // default: 1
|
||||
colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
|
||||
// Set of five incremental colors,
|
||||
// preferably with a low-saturation color for zero data;
|
||||
// def: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
|
||||
// Set of five incremental colors,
|
||||
// preferably with a low-saturation color for zero data;
|
||||
// def: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
|
||||
});</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="col-sm-10 push-sm-1">
|
||||
<p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"
|
||||
data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">
|
||||
See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>
|
||||
by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on
|
||||
<a href="https://codepen.io">CodePen</a>.
|
||||
</p>
|
||||
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
|
||||
</div>
|
||||
<section>
|
||||
<h6>Demo</h6>
|
||||
<p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"
|
||||
data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">
|
||||
See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>
|
||||
by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on
|
||||
<a href="https://codepen.io">CodePen</a>.
|
||||
</p>
|
||||
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
|
||||
</section>
|
||||
|
||||
<div class="col-sm-10 push-sm-1">
|
||||
<div class="dashboard-section">
|
||||
<h6 class="margin-vertical-rem">Available options:</h6>
|
||||
<pre><code class="hljs javascript">
|
||||
...
|
||||
{
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [],
|
||||
yRegions: [],
|
||||
yMarkers: []
|
||||
<section>
|
||||
<h6>Available options</h6>
|
||||
<pre><code class="hljs javascript">
|
||||
...
|
||||
{
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [],
|
||||
yRegions: [],
|
||||
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: {
|
||||
formatTooltipX: d => (d + '').toUpperCase(),
|
||||
formatTooltipY: d => d + ' pts',
|
||||
}
|
||||
// Updating values
|
||||
chart.update(data);
|
||||
|
||||
// Axis charts
|
||||
isNavigable: 1, // default: 0
|
||||
valuesOverPoints: 1, // default: 0
|
||||
barOptions: {
|
||||
spaceRatio: 1 // default: 0.5
|
||||
stacked: 1 // default: 0
|
||||
}
|
||||
// Axis charts:
|
||||
chart.addDataPoint(label, valueFromEachDataset, index)
|
||||
chart.removeDataPoint(index)
|
||||
chart.updateDataset(datasetValues, index)
|
||||
|
||||
lineOptions: {
|
||||
dotSize: 6, // default: 4
|
||||
hideLine: 0, // default: 0
|
||||
hideDots: 1, // default: 0
|
||||
heatline: 1, // default: 0
|
||||
regionFill: 1 // default: 0
|
||||
}
|
||||
// Exporting
|
||||
chart.export();
|
||||
|
||||
axisOptions: {
|
||||
yAxisMode: 'span', // Axis lines, default
|
||||
xAxisMode: 'tick', // No axis lines, only short ticks
|
||||
xIsSeries: 1 // Allow skipping x values for space
|
||||
// default: 0
|
||||
},
|
||||
// Unbind window-resize events
|
||||
chart.unbindWindowEvents();
|
||||
|
||||
// Pie/Percentage charts
|
||||
maxLegendPoints: 6, // default: 20
|
||||
maxSlices: 10, // default: 20
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
// Percentage chart
|
||||
barOptions: {
|
||||
height: 15 // default: 20
|
||||
depth: 5 // default: 2
|
||||
}
|
||||
|
||||
// Heatmap
|
||||
discreteDomains: 1, // default: 1
|
||||
}
|
||||
...
|
||||
|
||||
// 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
|
||||
<section>
|
||||
<h6>Install</h6>
|
||||
<p>Install via npm</p>
|
||||
<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>
|
||||
<p>... 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>Use as:</p>
|
||||
<pre><code class="hljs javascript"> new Chart(); // ES6 module
|
||||
// or
|
||||
new frappe.Chart(); // Browser</code></pre>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<section class="text-center">
|
||||
<!-- 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>
|
||||
|
||||
|
||||
<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">
|
||||
<footer class="built-with-frappe text-center">
|
||||
<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">
|
||||
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="https://api.nasa.gov/index.html" target="_blank">NASA Open APIs</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<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">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user