diff --git a/docs/assets/css/bootstrap.min.css b/docs/assets/css/bootstrap.min.css old mode 100755 new mode 100644 diff --git a/docs/assets/css/default.css b/docs/assets/css/default.css deleted file mode 100755 index f1bfade..0000000 --- a/docs/assets/css/default.css +++ /dev/null @@ -1,99 +0,0 @@ -/* - -Original highlight.js style (c) Ivan Sagalaev - -*/ - -.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; -} diff --git a/docs/assets/css/frappe_theme.css b/docs/assets/css/frappe_theme.css deleted file mode 100755 index 5624f32..0000000 --- a/docs/assets/css/frappe_theme.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/docs/assets/css/hljs.css b/docs/assets/css/hljs.css new file mode 100755 index 0000000..94c1aa7 --- /dev/null +++ b/docs/assets/css/hljs.css @@ -0,0 +1,99 @@ +/* + github.com style (c) Vasily Polovnyov +*/ + +.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; +} diff --git a/docs/assets/css/index.css b/docs/assets/css/index.css index 6a8ea21..5e27e1a 100755 --- a/docs/assets/css/index.css +++ b/docs/assets/css/index.css @@ -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; } diff --git a/docs/assets/css/normalize.css b/docs/assets/css/normalize.css deleted file mode 100755 index 30366a6..0000000 --- a/docs/assets/css/normalize.css +++ /dev/null @@ -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; -} diff --git a/docs/assets/css/reset.css b/docs/assets/css/reset.css new file mode 100755 index 0000000..aa7cd92 --- /dev/null +++ b/docs/assets/css/reset.css @@ -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 */ diff --git a/docs/assets/js/data.js b/docs/assets/js/data.js index 43580d0..f679316 100644 --- a/docs/assets/js/data.js +++ b/docs/assets/js/data.js @@ -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 -}; diff --git a/docs/assets/js/demoConfig.js b/docs/assets/js/demoConfig.js new file mode 100644 index 0000000..f696dc6 --- /dev/null +++ b/docs/assets/js/demoConfig.js @@ -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', + } + } + } +} \ No newline at end of file diff --git a/docs/assets/js/index.js b/docs/assets/js/index.js index 502e709..c1ac20e 100755 --- a/docs/assets/js/index.js +++ b/docs/assets/js/index.js @@ -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, diff --git a/docs/assets/js/index.min.js b/docs/assets/js/index.min.js index 6973d37..aaeac4a 100644 --- a/docs/assets/js/index.min.js +++ b/docs/assets/js/index.min.js @@ -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 diff --git a/docs/docs.html b/docs/docs.html new file mode 100644 index 0000000..e69de29 diff --git a/docs/index.html b/docs/index.html index 4d4ec75..3154ae6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -7,12 +7,11 @@ - - + - - + + @@ -23,32 +22,19 @@ -
-
-
-

Frappe Charts

-

GitHub-inspired simple and modern SVG charts for the web

-

with zero dependencies.

-
+
+

Frappe Charts

+

GitHub-inspired simple and modern SVG charts for the web
with zero dependencies.

+
+

Click or use arrow keys to navigate data points

+
+
-
-
-

Click or use arrow keys to navigate data points

-
-
-
-
-
- -
-
- -
-
-
Create a chart
- 
  <!--HTML-->
+    

+      
Create a chart

+      
  <!--HTML-->
   <div id="chart"></div>

-              
  // 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();
 

-              
-              
 
-              

-              

-                
-                
-                
-              

-              

-                
-              

-              
-
+
+
+ + + +
+
+ +
+ + +
+
Update Values
+
+ +
+ + + + +
+
+ +
+
Plot Trends
+ + +
+ + + + +
+
+ +
+
+ +
+
Listen to state change
+
+
+
+
+
+
+
- -
-
-
- Update Values -
-
-
- - - - -
-
+
+
Europa
+

Semi-major-axis: 671034 km

+

Mass: 4800000 x 10^16 kg

+

Diameter: 3121.6 km

- -
-
-
- Plot Trends -
- -
- - - - -
-
- -
- -
-
- -
-
-
- Listen to state change -
-
-
-
-
-
-
-
- -
-
-
Europa
-

Semi-major-axis: 671034 km

-

Mass: 4800000 x 10^16 kg

-

Diameter: 3121.6 km

-
-
-
-
- 
  ...
-    isNavigable: 1, // Navigate across data points; default 0
+
+
+ 
  ...
+  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
   });
-
-
+
-
-
-
- And a Month-wise Heatmap -
-
-
- - -
-
- - - -
-
- -
- 
  let heatmap = new frappe.Chart("#heatmap", {
+    

+      

+        And a Month-wise Heatmap
+      

+      

+      

+        
+        
+      

+      

+        
+        
+        
+      

+      

+        
+      

+      
  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']
   });

-
-
+ -
-

- See the Pen Frappe Charts Demo - by Prateeksha Singh (@pratu16x7) on - CodePen. -

- -
+
+
Demo
+

+ See the Pen Frappe Charts Demo + by Prateeksha Singh (@pratu16x7) on + CodePen. +

+ +
-
-
-
Available options:
- 

-  ...
-  {
-    data: {
-      labels: [],
-      datasets: [],
-      yRegions: [],
-      yMarkers: []
+    

+      
Available options

+      

+    ...
+    {
+      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
+

+    

 
-    // 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();
-
-
-
-
- -
-
-
Install
-

Install via npm

- 
  npm install frappe-charts
-

And include it in your project

- 
  import { Chart } from "frappe-charts"
-

... or include it directly in your HTML

- 
  <script src="https://unpkg.com/frappe-charts@1.1.0"></script>
-

Use as:

- 
  new Chart();          // ES6 module
+    

+      
Install

+      
Install via npm

+      
  npm install frappe-charts

+      
And include it in your project

+      
  import { Chart } from "frappe-charts"

+      
... or include it directly in your HTML

+      
  <script src="https://unpkg.com/frappe-charts@1.1.0"></script>

+      
Use as:

+      
  new Chart();          // ES6 module
                         // or
   new frappe.Chart();   // Browser

+    

 
-
-
+
+ + +

+ + View on GitHub +

+

+ Star +

+

License: MIT

+
- -
-
- -
- -

View on GitHub

-

- Star -

-

License: MIT

-
-
-
- -
-
- -
- -
+
+