[docs][major] setup home and docsify page
This commit is contained in:
Prateeksha Singh
parent
420206f749
commit
52d904da7d
1
dist/frappe-charts.min.iife.js
vendored
1
dist/frappe-charts.min.iife.js
vendored
File diff suppressed because one or more lines are too long
2
dist/frappe-charts.min.iife.js.map
vendored
2
dist/frappe-charts.min.iife.js.map
vendored
File diff suppressed because one or more lines are too long
@ -1,7 +1,7 @@
|
||||
body {
|
||||
/* container styles */
|
||||
max-width: 720px;
|
||||
margin: auto;
|
||||
/* max-width: 720px;
|
||||
margin: auto; */
|
||||
|
||||
font-family: "proxima-nova", sans-serif;
|
||||
font-size: 15px;
|
||||
@ -105,6 +105,9 @@ a, a:focus, a:hover {
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Moon images */
|
||||
|
||||
@ -7,7 +7,6 @@ export class docsBuilder {
|
||||
}
|
||||
|
||||
makeSection(parent, sys) {
|
||||
console.log('parent here?', parent);
|
||||
return new docSection(this.LIB_OBJ, parent, sys);
|
||||
}
|
||||
}
|
||||
@ -26,15 +25,18 @@ class docSection {
|
||||
make() {
|
||||
// const section = document.querySelector(this.parent);
|
||||
let s = this.sys;
|
||||
// if(s.title) {
|
||||
// $.create('h6', { inside: this.parent, innerHTML: s.title });
|
||||
// }
|
||||
if(s.title) {
|
||||
$.create('h6', { inside: this.parent, innerHTML: s.title });
|
||||
}
|
||||
|
||||
// s.contentBlocks.forEach((blockConf, index) => {
|
||||
// this.blockMap[index] = this.getBlock(blockConf);
|
||||
// });
|
||||
|
||||
this.blockMap['test'] = this.getDemo(s);
|
||||
if(s.contentBlocks) {
|
||||
s.contentBlocks.forEach((blockConf, index) => {
|
||||
this.blockMap[index] = this.getBlock(blockConf);
|
||||
});
|
||||
} else {
|
||||
// TODO:
|
||||
this.blockMap['test'] = this.getDemo(s);
|
||||
}
|
||||
}
|
||||
|
||||
getBlock(blockConf) {
|
||||
|
||||
1
docs/assets/js/frappe-charts.min.js
vendored
1
docs/assets/js/frappe-charts.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,35 +0,0 @@
|
||||
import { $, insertAfter } from '../../../src/js/utils/dom';
|
||||
import { fireballOver25, fireball_2_5, fireball_5_25 } from './data';
|
||||
import { lineComposite, barComposite, demoSections} from './demoConfig';
|
||||
import { docSections } from './docsConfig';
|
||||
import { docsBuilder } from './docsBuilder';
|
||||
|
||||
let Chart = frappe.Chart; // eslint-disable-line no-undef
|
||||
let dbd = new docsBuilder(Chart);
|
||||
let currentElement = document.querySelector('header');
|
||||
let sections = [];
|
||||
|
||||
if(document.querySelectorAll('#line-composite-1').length) {
|
||||
let lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
|
||||
let barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
|
||||
|
||||
lineCompositeChart.parent.addEventListener('data-select', (e) => {
|
||||
let i = e.index;
|
||||
barCompositeChart.updateDatasets([
|
||||
fireballOver25[i], fireball_5_25[i], fireball_2_5[i]
|
||||
]);
|
||||
});
|
||||
|
||||
sections = demoSections;
|
||||
}
|
||||
|
||||
// else {
|
||||
// sections = docSections;
|
||||
// }
|
||||
|
||||
sections.forEach(sectionConf => {
|
||||
let sectionEl = $.create('section', { className: sectionConf.name || sectionConf.title });
|
||||
insertAfter(sectionEl, currentElement);
|
||||
currentElement = sectionEl;
|
||||
dbd.makeSection(sectionEl, sectionConf);
|
||||
});
|
||||
1020
docs/assets/js/index.min.js
vendored
1020
docs/assets/js/index.min.js
vendored
File diff suppressed because it is too large
Load Diff
@ -1,4 +1,4 @@
|
||||
import { sampleData, trendsData } from '../assets/js/data';
|
||||
import { sampleData, trendsData } from './assets/js/data';
|
||||
|
||||
export const demoRegistry = {
|
||||
demo1: {
|
||||
7
docs/docsify/assets/css/bootstrap.min.css
vendored
7
docs/docsify/assets/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,99 +0,0 @@
|
||||
/*
|
||||
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,121 +0,0 @@
|
||||
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;
|
||||
}
|
||||
header .lead-text {
|
||||
line-height: 3rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.demo-tip {
|
||||
margin-top: 1rem; /* SAME 2 */
|
||||
font-size: 1rem;
|
||||
}
|
||||
section {
|
||||
margin: 4em 0; /* SAME 1 */
|
||||
}
|
||||
section figure {
|
||||
border: 1px solid #ddd; /* SAME 3 */
|
||||
border-radius: 3px;
|
||||
}
|
||||
.btn, .btn-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.btn-group, .btn-action {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
h1, h6 {
|
||||
font-weight: 700;
|
||||
}
|
||||
p.new-context {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.btn {
|
||||
outline: none !important;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
/* BaseCSS */
|
||||
.mt1 {
|
||||
margin-top: 1rem; /* SAME 2 */
|
||||
}
|
||||
.mv1 {
|
||||
margin: 2em 0 1em 0;
|
||||
}
|
||||
.border {
|
||||
border: 1px solid #ddd; /* SAME 3 */
|
||||
border-radius: 3px;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* Moon images */
|
||||
.image-container {
|
||||
padding: 3px;
|
||||
}
|
||||
.image-container img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.content-data p {
|
||||
margin-bottom: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
@ -1,353 +0,0 @@
|
||||
/*!
|
||||
*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,24 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>frappe-charts - https://frappe.github.io/charts</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="description" content="https://frappe.github.io/charts">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<link rel="stylesheet" type="text/css" href="vuestyle.css" media="screen">
|
||||
|
||||
<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/index.css" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/hljs.css" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
<script src="indexShadow.min.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/external-script.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,20 +0,0 @@
|
||||
import { docsBuilder } from '../assets/js/docsBuilder';
|
||||
import { Chart } from "../../dist/frappe-charts.min.esm";
|
||||
import { demoRegistry } from './demoRegistry';
|
||||
|
||||
window.$docsify = {
|
||||
name: 'frappe-charts',
|
||||
// repo: 'https://github.com/frappe/charts',
|
||||
loadSidebar: true,
|
||||
executeScript: true,
|
||||
plugins: [
|
||||
function(hook, vm) {
|
||||
hook.doneEach(function() {
|
||||
let dbd = new docsBuilder(Chart);
|
||||
|
||||
console.log("inside hook", document.querySelector('.demo'));
|
||||
dbd.makeSection(document.querySelector('.demo'), demoRegistry.demo2);
|
||||
});
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,28 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Frappe Charts</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="keywords" content="open source javascript js charts library svg zero-dependency
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Frappe Charts</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="description" content="https://frappe.github.io/charts">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
|
||||
<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/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/index.css" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/hljs.css" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="vuestyle.css" media="screen">
|
||||
|
||||
<script src="assets/js/highlight.pack.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
<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/index.css" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/hljs.css" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
|
||||
|
||||
<link rel="shortcut icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon">
|
||||
<link rel="icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon">
|
||||
<script src="assets/js/highlight.pack.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</head>
|
||||
<link rel="shortcut icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon">
|
||||
<link rel="icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon">
|
||||
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="home-page">
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Frappe Charts</h1>
|
||||
<p class="lead-text">GitHub-inspired simple and modern SVG charts for the web
|
||||
@ -37,7 +45,7 @@
|
||||
<section class="closing text-center">
|
||||
<a href="https://github.com/frappe/charts/archive/master.zip"><button class="large blue button btn">Download</button></a>
|
||||
<p style="mt1: 3rem; margin-bottom: 1.5rem;">
|
||||
<a href="docsify/index.html" style="margin-right: 1rem;" target="_blank">Documentation</a>
|
||||
<a href="#" id="docs-link" style="margin-right: 1rem;">Documentation</a>
|
||||
<a href="https://github.com/frappe/charts" target="_blank">GitHub</a>
|
||||
</p>
|
||||
<p><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>
|
||||
@ -66,8 +74,17 @@
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
|
||||
<script src="assets/js/frappe-charts.min.js"></script>
|
||||
<script src="assets/js/index.min.js"></script>
|
||||
</body>
|
||||
</div>
|
||||
|
||||
<div id="app"></div>
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<script src="index.min.js"></script>
|
||||
|
||||
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
|
||||
<script src="assets/js/frappe-charts.min.js"></script>
|
||||
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/external-script.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
49
docs/index.js
Normal file
49
docs/index.js
Normal file
@ -0,0 +1,49 @@
|
||||
import { docsBuilder } from './assets/js/docsBuilder';
|
||||
import { Chart } from "../dist/frappe-charts.min.esm";
|
||||
import { demoRegistry } from './demoRegistry';
|
||||
|
||||
import { $, insertAfter } from '../src/js/utils/dom';
|
||||
import { fireballOver25, fireball_2_5, fireball_5_25 } from './assets/js/data';
|
||||
import { lineComposite, barComposite, demoSections} from './assets/js/demoConfig';
|
||||
|
||||
let dbd = new docsBuilder(Chart);
|
||||
let currentElement = document.querySelector('header');
|
||||
|
||||
if(document.querySelectorAll('#line-composite-1').length) {
|
||||
let lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
|
||||
let barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
|
||||
|
||||
lineCompositeChart.parent.addEventListener('data-select', (e) => {
|
||||
let i = e.index;
|
||||
barCompositeChart.updateDatasets([
|
||||
fireballOver25[i], fireball_5_25[i], fireball_2_5[i]
|
||||
]);
|
||||
});
|
||||
|
||||
demoSections.forEach(sectionConf => {
|
||||
let sectionEl = $.create('section', { className: sectionConf.name || sectionConf.title });
|
||||
insertAfter(sectionEl, currentElement);
|
||||
currentElement = sectionEl;
|
||||
dbd.makeSection(sectionEl, sectionConf);
|
||||
});
|
||||
}
|
||||
|
||||
window.$docsify = {
|
||||
name: 'frappe-charts',
|
||||
// repo: 'https://github.com/frappe/charts',
|
||||
loadSidebar: true,
|
||||
executeScript: true,
|
||||
plugins: [
|
||||
function(hook, vm) {
|
||||
hook.doneEach(function() {
|
||||
dbd.makeSection(document.querySelector('.demo'), demoRegistry.demo2);
|
||||
document.querySelector("main").classList.add("hide");
|
||||
});
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
document.querySelector("#docs-link").addEventListener('click', () => {
|
||||
document.querySelector("#home-page").classList.add("hide");
|
||||
document.querySelector("main").classList.remove("hide");
|
||||
});
|
||||
473
docs/docsify/indexShadow.min.js → docs/index.min.js
vendored
473
docs/docsify/indexShadow.min.js → docs/index.min.js
vendored
@ -166,6 +166,13 @@ $.create = function (tag, o) {
|
||||
|
||||
// https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
|
||||
|
||||
|
||||
|
||||
|
||||
function insertAfter(newNode, referenceNode) {
|
||||
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
|
||||
}
|
||||
|
||||
// Fixed 5-color theme,
|
||||
// More colors are difficult to parse visually
|
||||
|
||||
@ -177,8 +184,8 @@ $.create = function (tag, o) {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var HEATMAP_COLORS_BLUE = ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'];
|
||||
var HEATMAP_COLORS_YELLOW = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
|
||||
|
||||
|
||||
|
||||
@ -201,7 +208,20 @@ $.create = function (tag, o) {
|
||||
* Shuffles array in place. ES6 version
|
||||
* @param {Array} array An array containing the items.
|
||||
*/
|
||||
function shuffle(array) {
|
||||
// Awesomeness: https://bost.ocks.org/mike/shuffle/
|
||||
// https://stackoverflow.com/a/2450976/6495043
|
||||
// https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array?noredirect=1&lq=1
|
||||
|
||||
for (var i = array.length - 1; i > 0; i--) {
|
||||
var j = Math.floor(Math.random() * (i + 1));
|
||||
var _ref = [array[j], array[i]];
|
||||
array[i] = _ref[0];
|
||||
array[j] = _ref[1];
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fill an array with extra points
|
||||
@ -222,7 +242,14 @@ $.create = function (tag, o) {
|
||||
|
||||
|
||||
// https://stackoverflow.com/a/29325222
|
||||
|
||||
function getRandomBias(min, max, bias, influence) {
|
||||
var range = max - min;
|
||||
var biasValue = range * bias + min;
|
||||
var rnd = Math.random() * range + min,
|
||||
// random in range
|
||||
mix = Math.random() * influence; // random mixer
|
||||
return rnd * (1 - mix) + biasValue * mix; // mix full range and bias
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -248,7 +275,6 @@ var docsBuilder = function () {
|
||||
_createClass(docsBuilder, [{
|
||||
key: 'makeSection',
|
||||
value: function makeSection(parent, sys) {
|
||||
console.log('parent here?', parent);
|
||||
return new docSection(this.LIB_OBJ, parent, sys);
|
||||
}
|
||||
}]);
|
||||
@ -272,17 +298,22 @@ var docSection = function () {
|
||||
_createClass(docSection, [{
|
||||
key: 'make',
|
||||
value: function make() {
|
||||
var _this = this;
|
||||
|
||||
// const section = document.querySelector(this.parent);
|
||||
var s = this.sys;
|
||||
// if(s.title) {
|
||||
// $.create('h6', { inside: this.parent, innerHTML: s.title });
|
||||
// }
|
||||
if (s.title) {
|
||||
$.create('h6', { inside: this.parent, innerHTML: s.title });
|
||||
}
|
||||
|
||||
// s.contentBlocks.forEach((blockConf, index) => {
|
||||
// this.blockMap[index] = this.getBlock(blockConf);
|
||||
// });
|
||||
|
||||
this.blockMap['test'] = this.getDemo(s);
|
||||
if (s.contentBlocks) {
|
||||
s.contentBlocks.forEach(function (blockConf, index) {
|
||||
_this.blockMap[index] = _this.getBlock(blockConf);
|
||||
});
|
||||
} else {
|
||||
// TODO:
|
||||
this.blockMap['test'] = this.getDemo(s);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'getBlock',
|
||||
@ -354,14 +385,14 @@ var docSection = function () {
|
||||
value: function getDemoOptions(demoIndex) {
|
||||
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
||||
|
||||
var _this = this;
|
||||
var _this2 = this;
|
||||
|
||||
var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
||||
var figure = arguments[3];
|
||||
|
||||
options.forEach(function (o) {
|
||||
var btnGroup = $.create('div', {
|
||||
inside: _this.parent,
|
||||
inside: _this2.parent,
|
||||
className: 'btn-group ' + o.name
|
||||
});
|
||||
var mapKeys = o.mapKeys;
|
||||
@ -395,7 +426,7 @@ var docSection = function () {
|
||||
// boolean, string, number, object
|
||||
args[o.path[0]] = state;
|
||||
}
|
||||
_this.demos[demoIndex] = new _this.LIB_OBJ(figure, args);
|
||||
_this2.demos[demoIndex] = new _this2.LIB_OBJ(figure, args);
|
||||
}
|
||||
});
|
||||
|
||||
@ -408,19 +439,19 @@ var docSection = function () {
|
||||
}, {
|
||||
key: 'getDemoActions',
|
||||
value: function getDemoActions(demoIndex) {
|
||||
var _this2 = this;
|
||||
var _this3 = this;
|
||||
|
||||
var actions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
||||
actions.forEach(function (o) {
|
||||
var args = o.args || [];
|
||||
$.create('button', {
|
||||
inside: _this2.parent,
|
||||
inside: _this3.parent,
|
||||
className: 'btn btn-action btn-sm btn-secondary',
|
||||
innerHTML: o.name,
|
||||
onClick: function onClick() {
|
||||
var _demos$demoIndex;
|
||||
|
||||
(_demos$demoIndex = _this2.demos[demoIndex])[o.fn].apply(_demos$demoIndex, _toConsumableArray(args));
|
||||
(_demos$demoIndex = _this3.demos[demoIndex])[o.fn].apply(_demos$demoIndex, _toConsumableArray(args));
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -5095,7 +5126,7 @@ var NO_OF_MILLIS$1 = 1000;
|
||||
var SEC_IN_DAY$1 = 86400;
|
||||
|
||||
|
||||
|
||||
var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||||
|
||||
|
||||
|
||||
@ -5140,22 +5171,152 @@ function addDays$1(date, numberOfDays) {
|
||||
date.setDate(date.getDate() + numberOfDays);
|
||||
}
|
||||
|
||||
// Composite Chart
|
||||
// ================================================================================
|
||||
var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850];
|
||||
|
||||
var lineCompositeData = {
|
||||
labels: ["2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
|
||||
|
||||
yMarkers: [{
|
||||
label: "Average 100 reports/month",
|
||||
value: 1200,
|
||||
options: { labelPos: 'left' }
|
||||
}],
|
||||
|
||||
datasets: [{
|
||||
"name": "Events",
|
||||
"values": reportCountList
|
||||
}]
|
||||
};
|
||||
|
||||
var fireball_5_25 = [[4, 0, 3, 1, 1, 2, 1, 1, 1, 0, 1, 1], [2, 3, 3, 2, 1, 3, 0, 1, 2, 7, 10, 4], [5, 6, 2, 4, 0, 1, 4, 3, 0, 2, 0, 1], [0, 2, 6, 2, 1, 1, 2, 3, 6, 3, 7, 8], [6, 8, 7, 7, 4, 5, 6, 5, 22, 12, 10, 11], [7, 10, 11, 7, 3, 2, 7, 7, 11, 15, 22, 20], [13, 16, 21, 18, 19, 17, 12, 17, 31, 28, 25, 29], [24, 14, 21, 14, 11, 15, 19, 21, 41, 22, 32, 18], [31, 20, 30, 22, 14, 17, 21, 35, 27, 50, 117, 24], [32, 24, 21, 27, 11, 27, 43, 37, 44, 40, 48, 32], [31, 38, 36, 26, 23, 23, 25, 29, 26, 47, 61, 50]];
|
||||
var fireball_2_5 = [[22, 6, 6, 9, 7, 8, 6, 14, 19, 10, 8, 20], [11, 13, 12, 8, 9, 11, 9, 13, 10, 22, 40, 24], [20, 13, 13, 19, 13, 10, 14, 13, 20, 18, 5, 9], [7, 13, 16, 19, 12, 11, 21, 27, 27, 24, 33, 33], [38, 25, 28, 22, 31, 21, 35, 42, 37, 32, 46, 53], [50, 33, 36, 34, 35, 28, 27, 52, 58, 59, 75, 69], [54, 67, 67, 45, 66, 51, 38, 64, 90, 113, 116, 87], [84, 52, 56, 51, 55, 46, 50, 87, 114, 83, 152, 93], [73, 58, 59, 63, 56, 51, 83, 140, 103, 115, 265, 89], [106, 95, 94, 71, 77, 75, 99, 136, 129, 154, 168, 156], [81, 102, 95, 72, 58, 91, 89, 122, 124, 135, 183, 171]];
|
||||
var fireballOver25 = [
|
||||
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0], [1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 2], [3, 2, 1, 3, 2, 0, 2, 2, 2, 3, 0, 1], [2, 3, 5, 2, 1, 3, 0, 2, 3, 5, 1, 4], [7, 4, 6, 1, 9, 2, 2, 2, 20, 9, 4, 9], [5, 6, 1, 2, 5, 4, 5, 5, 16, 9, 14, 9], [5, 4, 7, 5, 1, 5, 3, 3, 5, 7, 22, 2], [5, 13, 11, 6, 1, 7, 9, 8, 14, 17, 16, 3], [8, 9, 8, 6, 4, 8, 5, 6, 14, 11, 21, 12]];
|
||||
|
||||
var barCompositeData = {
|
||||
labels: MONTH_NAMES_SHORT,
|
||||
datasets: [{
|
||||
name: "Over 25 reports",
|
||||
values: fireballOver25[9]
|
||||
}, {
|
||||
name: "5 to 25 reports",
|
||||
values: fireball_5_25[9]
|
||||
}, {
|
||||
name: "2 to 5 reports",
|
||||
values: fireball_2_5[9]
|
||||
}]
|
||||
};
|
||||
|
||||
// Demo Chart multitype Chart
|
||||
// ================================================================================
|
||||
var typeData = {
|
||||
labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
|
||||
|
||||
yMarkers: [{
|
||||
label: "Marker",
|
||||
value: 43,
|
||||
options: { labelPos: 'left'
|
||||
// type: 'dashed'
|
||||
} }],
|
||||
|
||||
yRegions: [{
|
||||
label: "Region",
|
||||
start: -10,
|
||||
end: 50,
|
||||
options: { labelPos: 'right' }
|
||||
}],
|
||||
|
||||
datasets: [{
|
||||
name: "Some Data",
|
||||
values: [18, 40, 30, 35, 8, 52, 17, -4],
|
||||
axisPosition: 'right',
|
||||
chartType: 'bar'
|
||||
}, {
|
||||
name: "Another Set",
|
||||
values: [30, 50, -10, 15, 18, 32, 27, 14],
|
||||
axisPosition: 'right',
|
||||
chartType: 'bar'
|
||||
}, {
|
||||
name: "Yet Another",
|
||||
values: [15, 20, -3, -15, 58, 12, -17, 37],
|
||||
chartType: 'line'
|
||||
}]
|
||||
};
|
||||
|
||||
var updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
|
||||
|
||||
var baseLength = 10;
|
||||
var fullLength = 30;
|
||||
|
||||
var getRandom = function getRandom() {
|
||||
return Math.floor(getRandomBias(-40, 60, 0.8, 1));
|
||||
};
|
||||
var updateDataAllValues = Array.from({ length: fullLength }, getRandom);
|
||||
|
||||
// We're gonna be shuffling this
|
||||
var updateDataAllIndices = updateDataAllLabels.map(function (d, i) {
|
||||
return i;
|
||||
});
|
||||
|
||||
var getUpdateArray = function getUpdateArray(sourceArray) {
|
||||
var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
|
||||
|
||||
var indices = updateDataAllIndices.slice(0, length);
|
||||
return indices.map(function (index) {
|
||||
return sourceArray[index];
|
||||
});
|
||||
};
|
||||
|
||||
var currentLastIndex = baseLength;
|
||||
|
||||
function getUpdateData() {
|
||||
shuffle(updateDataAllIndices);
|
||||
var value = getRandom();
|
||||
var start = getRandom();
|
||||
var end = getRandom();
|
||||
currentLastIndex = baseLength;
|
||||
|
||||
return {
|
||||
labels: updateDataAllLabels.slice(0, baseLength),
|
||||
datasets: [{
|
||||
values: getUpdateArray(updateDataAllValues)
|
||||
}],
|
||||
yMarkers: [{
|
||||
label: "Altitude",
|
||||
value: value,
|
||||
type: 'dashed'
|
||||
}],
|
||||
yRegions: [{
|
||||
label: "Range",
|
||||
start: start,
|
||||
end: end
|
||||
}]
|
||||
};
|
||||
}
|
||||
|
||||
function getAddUpdateData() {
|
||||
if (currentLastIndex >= fullLength) return;
|
||||
|
||||
// TODO: Fix update on removal
|
||||
currentLastIndex++;
|
||||
var c = currentLastIndex - 1;
|
||||
|
||||
return [updateDataAllLabels[c], [updateDataAllValues[c]]];
|
||||
|
||||
// updateChart.addDataPoint(
|
||||
// updateDataAllLabels[index], [updateDataAllValues[index]]
|
||||
// );
|
||||
}
|
||||
|
||||
var trendsData = {
|
||||
labels: [1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976, 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016],
|
||||
datasets: [{
|
||||
values: [132.9, 150.0, 149.4, 148.0, 94.4, 97.6, 54.1, 49.2, 22.5, 18.4, 39.3, 131.0, 220.1, 218.9, 198.9, 162.4, 91.0, 60.5, 20.6, 14.8, 33.9, 123.0, 211.1, 191.8, 203.3, 133.0, 76.1, 44.9, 25.1, 11.6, 28.9, 88.3, 136.3, 173.9, 170.4, 163.6, 99.3, 65.3, 45.8, 24.7, 12.6, 4.2, 4.8, 24.9, 80.8, 84.5, 94.0, 113.3, 69.8, 39.8]
|
||||
}]
|
||||
};
|
||||
|
||||
var moonData = {
|
||||
names: ["Ganymede", "Callisto", "Io", "Europa"],
|
||||
@ -5206,6 +5367,8 @@ var end = clone$1(start);
|
||||
start.setFullYear(start.getFullYear() - 2);
|
||||
end.setFullYear(end.getFullYear() - 1);
|
||||
|
||||
var dataPoints = {};
|
||||
|
||||
var startTs = timestampSec(start);
|
||||
var endTs = timestampSec(end);
|
||||
|
||||
@ -5213,10 +5376,15 @@ 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$1;
|
||||
}
|
||||
|
||||
|
||||
var heatmapData = {
|
||||
dataPoints: dataPoints,
|
||||
start: start,
|
||||
end: end
|
||||
};
|
||||
|
||||
var sampleData = {
|
||||
0: {
|
||||
@ -5278,6 +5446,262 @@ var demoRegistry = {
|
||||
}
|
||||
};
|
||||
|
||||
var lineComposite = {
|
||||
config: {
|
||||
title: "Fireball/Bolide Events - Yearly (reported)",
|
||||
data: lineCompositeData,
|
||||
type: "line",
|
||||
height: 190,
|
||||
colors: ["green"],
|
||||
isNavigable: 1,
|
||||
valuesOverPoints: 1,
|
||||
|
||||
lineOptions: {
|
||||
dotSize: 8
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var barComposite = {
|
||||
config: {
|
||||
data: barCompositeData,
|
||||
type: "bar",
|
||||
height: 210,
|
||||
colors: ["violet", "light-blue", "#46a9f9"],
|
||||
valuesOverPoints: 1,
|
||||
axisOptions: {
|
||||
xAxisMode: "tick"
|
||||
},
|
||||
barOptions: {
|
||||
stacked: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var demoSections = [{
|
||||
title: "Create a Chart",
|
||||
name: "demo-main",
|
||||
contentBlocks: [{
|
||||
type: "code",
|
||||
lang: "html",
|
||||
content: ' <!--HTML-->\n <figure id="frost-chart"></figure>'
|
||||
}, {
|
||||
type: "code",
|
||||
lang: "javascript",
|
||||
content: ' // Javascript\n let chart = new frappe.Chart( "#frost-chart", { // or DOM element\n data: {\n labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",\n "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],\n\n datasets: [\n {\n name: "Some Data", chartType: \'bar\',\n values: [25, 40, 30, 35, 8, 52, 17, -4]\n },\n {\n name: "Another Set", chartType: \'bar\',\n values: [25, 50, -10, 15, 18, 32, 27, 14]\n },\n {\n name: "Yet Another", chartType: \'line\',\n values: [15, 20, -3, -15, 58, 12, -17, 37]\n }\n ],\n\n yMarkers: [{ label: "Marker", value: 70,\n options: { labelPos: \'left\' }}],\n yRegions: [{ label: "Region", start: -10, end: 50,\n options: { labelPos: \'right\' }}]\n },\n\n title: "My Awesome Chart",\n type: \'axis-mixed\', // or \'bar\', \'line\', \'pie\', \'percentage\'\n height: 300,\n colors: [\'purple\', \'#ffa3ef\', \'light-blue\'],\n\n tooltipOptions: {\n formatTooltipX: d => (d + \'\').toUpperCase(),\n formatTooltipY: d => d + \' pts\',\n }\n });\n\n chart.export();'
|
||||
}, {
|
||||
type: "demo",
|
||||
config: {
|
||||
title: "My Awesome Chart",
|
||||
data: typeData,
|
||||
type: "axis-mixed",
|
||||
height: 300,
|
||||
colors: ["purple", "magenta", "light-blue"],
|
||||
maxSlices: 10,
|
||||
|
||||
tooltipOptions: {
|
||||
formatTooltipX: function formatTooltipX(d) {
|
||||
return (d + '').toUpperCase();
|
||||
},
|
||||
formatTooltipY: function formatTooltipY(d) {
|
||||
return d + ' pts';
|
||||
}
|
||||
}
|
||||
},
|
||||
options: [{
|
||||
name: "type",
|
||||
path: ["type"],
|
||||
type: "string",
|
||||
states: {
|
||||
"Mixed": 'axis-mixed',
|
||||
"Line": 'line',
|
||||
"Bar": 'bar',
|
||||
"Pie Chart": 'pie',
|
||||
"Percentage Chart": 'percentage'
|
||||
},
|
||||
activeState: "Mixed"
|
||||
}],
|
||||
actions: [{ name: "Export ...", fn: "export", args: [] }]
|
||||
}]
|
||||
}, {
|
||||
title: "Update Values",
|
||||
name: "updates-chart",
|
||||
contentBlocks: [{
|
||||
type: "demo",
|
||||
config: {
|
||||
data: getUpdateData(),
|
||||
type: 'line',
|
||||
height: 300,
|
||||
colors: ['#ff6c03'],
|
||||
lineOptions: {
|
||||
regionFill: 1
|
||||
}
|
||||
},
|
||||
actions: [{
|
||||
name: "Random Data",
|
||||
fn: "update",
|
||||
args: [getUpdateData()]
|
||||
}, {
|
||||
name: "Add Value",
|
||||
fn: "addDataPoint",
|
||||
args: getAddUpdateData()
|
||||
}, {
|
||||
name: "Remove Value",
|
||||
fn: "removeDataPoint",
|
||||
args: []
|
||||
}, {
|
||||
name: "Export ...",
|
||||
fn: "export",
|
||||
args: []
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
title: "Plot Trends",
|
||||
name: "trends-plot",
|
||||
contentBlocks: [{
|
||||
type: "demo",
|
||||
config: {
|
||||
title: "Mean Total Sunspot Count - Yearly",
|
||||
data: trendsData,
|
||||
type: 'line',
|
||||
height: 300,
|
||||
colors: ['#238e38'],
|
||||
axisOptions: {
|
||||
xAxisMode: 'tick',
|
||||
yAxisMode: 'span',
|
||||
xIsSeries: 1
|
||||
}
|
||||
},
|
||||
options: [{
|
||||
name: "lineOptions",
|
||||
path: ["lineOptions"],
|
||||
type: "map",
|
||||
mapKeys: ['hideLine', 'hideDots', 'heatline', 'regionFill'],
|
||||
states: {
|
||||
"Line": [0, 1, 0, 0],
|
||||
"Dots": [1, 0, 0, 0],
|
||||
"HeatLine": [0, 1, 1, 0],
|
||||
"Region": [0, 1, 0, 1]
|
||||
},
|
||||
activeState: "HeatLine"
|
||||
}],
|
||||
actions: [{ name: "Export ...", fn: "export", args: [] }]
|
||||
}]
|
||||
}, {
|
||||
title: "Listen to state change",
|
||||
name: "state-change",
|
||||
contentBlocks: [{
|
||||
type: "demo",
|
||||
config: {
|
||||
title: "Jupiter's Moons: Semi-major Axis (1000 km)",
|
||||
data: eventsData,
|
||||
type: 'bar',
|
||||
height: 330,
|
||||
colors: ['grey'],
|
||||
isNavigable: 1
|
||||
},
|
||||
sideContent: '<div class="image-container border">\n <img class="moon-image" src="./assets/img/europa.jpg">\n </div>\n <div class="content-data mt1">\n <h6 class="moon-name">Europa</h6>\n <p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p>\n <p>Mass: <span class="mass">4800000</span> x 10^16 kg</p>\n <p>Diameter: <span class="diameter">3121.6</span> km</p>\n </div>',
|
||||
postSetup: function postSetup(chart, figure, row) {
|
||||
chart.parent.addEventListener('data-select', function (e) {
|
||||
var i = e.index;
|
||||
var name = moonData.names[i];
|
||||
row.querySelector('.moon-name').innerHTML = name;
|
||||
row.querySelector('.semi-major-axis').innerHTML = moonData.distances[i] * 1000;
|
||||
row.querySelector('.mass').innerHTML = moonData.masses[i];
|
||||
row.querySelector('.diameter').innerHTML = moonData.diameters[i];
|
||||
row.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
|
||||
});
|
||||
}
|
||||
}, {
|
||||
type: "code",
|
||||
lang: "javascript",
|
||||
content: ' ...\n isNavigable: 1, // Navigate across data points; default 0\n ...\n\n chart.parent.addEventListener(\'data-select\', (e) => {\n update_moon_data(e.index); // e contains index and value of current datapoint\n });'
|
||||
}]
|
||||
}, {
|
||||
title: "And a Month-wise Heatmap",
|
||||
name: "heatmap",
|
||||
contentBlocks: [{
|
||||
type: "demo",
|
||||
config: {
|
||||
title: "Monthly Distribution",
|
||||
data: heatmapData,
|
||||
type: 'heatmap',
|
||||
discreteDomains: 1,
|
||||
countLabel: 'Level',
|
||||
colors: HEATMAP_COLORS_BLUE,
|
||||
legendScale: [0, 1, 2, 4, 5]
|
||||
},
|
||||
options: [{
|
||||
name: "Discrete domains",
|
||||
path: ["discreteDomains"],
|
||||
type: 'boolean',
|
||||
// boolNames: ["Continuous", "Discrete"],
|
||||
states: { "Discrete": 1, "Continuous": 0 }
|
||||
}, {
|
||||
name: "Colors",
|
||||
path: ["colors"],
|
||||
type: "object",
|
||||
states: {
|
||||
"Green (Default)": [],
|
||||
"Blue": HEATMAP_COLORS_BLUE,
|
||||
"GitHub's Halloween": HEATMAP_COLORS_YELLOW
|
||||
}
|
||||
}],
|
||||
actions: [{ name: "Export ...", fn: "export", args: [] }]
|
||||
}, {
|
||||
type: "code",
|
||||
lang: "javascript",
|
||||
content: ' let heatmap = new frappe.Chart("#heatmap", {\n type: \'heatmap\',\n title: "Monthly Distribution",\n data: {\n dataPoints: {\'1524064033\': 8, /* ... */},\n // object with timestamp-value pairs\n start: startDate\n end: endDate // Date objects\n },\n countLabel: \'Level\',\n discreteDomains: 0 // default: 1\n colors: [\'#ebedf0\', \'#c0ddf9\', \'#73b3f3\', \'#3886e1\', \'#17459e\'],\n // Set of five incremental colors,\n // preferably with a low-saturation color for zero data;\n // def: [\'#ebedf0\', \'#c6e48b\', \'#7bc96f\', \'#239a3b\', \'#196127\']\n });'
|
||||
}]
|
||||
}, {
|
||||
title: "Demo",
|
||||
name: "codepen",
|
||||
contentBlocks: [{
|
||||
type: "custom",
|
||||
html: '<p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"\n data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">\n See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>\n by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on\n <a href="https://codepen.io">CodePen</a>.\n </p>'
|
||||
}]
|
||||
}, {
|
||||
title: "Available Options",
|
||||
name: "options",
|
||||
contentBlocks: [{
|
||||
type: "code",
|
||||
lang: "javascript",
|
||||
content: '\n ...\n {\n data: {\n labels: [],\n datasets: [],\n yRegions: [],\n yMarkers: []\n }\n title: \'\',\n colors: [],\n height: 200,\n\n tooltipOptions: {\n formatTooltipX: d => (d + \'\').toUpperCase(),\n formatTooltipY: d => d + \' pts\',\n }\n\n // Axis charts\n isNavigable: 1, // default: 0\n valuesOverPoints: 1, // default: 0\n barOptions: {\n spaceRatio: 1 // default: 0.5\n stacked: 1 // default: 0\n }\n\n lineOptions: {\n dotSize: 6, // default: 4\n hideLine: 0, // default: 0\n hideDots: 1, // default: 0\n heatline: 1, // default: 0\n regionFill: 1 // default: 0\n }\n\n axisOptions: {\n yAxisMode: \'span\', // Axis lines, default\n xAxisMode: \'tick\', // No axis lines, only short ticks\n xIsSeries: 1 // Allow skipping x values for space\n // default: 0\n },\n\n // Pie/Percentage charts\n maxLegendPoints: 6, // default: 20\n maxSlices: 10, // default: 20\n\n // Percentage chart\n barOptions: {\n height: 15 // default: 20\n depth: 5 // default: 2\n }\n\n // Heatmap\n discreteDomains: 1, // default: 1\n }\n ...\n\n // Updating values\n chart.update(data);\n\n // Axis charts:\n chart.addDataPoint(label, valueFromEachDataset, index)\n chart.removeDataPoint(index)\n chart.updateDataset(datasetValues, index)\n\n // Exporting\n chart.export();\n\n // Unbind window-resize events\n chart.unbindWindowEvents();\n\n '
|
||||
}]
|
||||
}, {
|
||||
title: "Install",
|
||||
name: "installation",
|
||||
contentBlocks: [{ type: "text", content: 'Install via npm' }, { type: "code", lang: "console", content: ' npm install frappe-charts' }, { type: "text", content: 'And include it in your project' }, { type: "code", lang: "javascript", content: ' import { Chart } from "frappe-charts' }, { type: "text", content: 'Use as:' }, {
|
||||
type: "code",
|
||||
lang: "javascript",
|
||||
content: ' new Chart(); // ES6 module\n // or\n new frappe.Chart(); // Browser'
|
||||
}, { type: "text", content: '... or include it directly in your HTML' }, {
|
||||
type: "code",
|
||||
lang: "html",
|
||||
content: ' <script src="https://unpkg.com/frappe-charts@1.1.0"></script>'
|
||||
}]
|
||||
}];
|
||||
|
||||
var dbd = new docsBuilder(Chart);
|
||||
var currentElement = document.querySelector('header');
|
||||
|
||||
if (document.querySelectorAll('#line-composite-1').length) {
|
||||
var lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
|
||||
var barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
|
||||
|
||||
lineCompositeChart.parent.addEventListener('data-select', function (e) {
|
||||
var i = e.index;
|
||||
barCompositeChart.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
|
||||
});
|
||||
|
||||
demoSections.forEach(function (sectionConf) {
|
||||
var sectionEl = $.create('section', { className: sectionConf.name || sectionConf.title });
|
||||
insertAfter(sectionEl, currentElement);
|
||||
currentElement = sectionEl;
|
||||
dbd.makeSection(sectionEl, sectionConf);
|
||||
});
|
||||
}
|
||||
|
||||
window.$docsify = {
|
||||
name: 'frappe-charts',
|
||||
// repo: 'https://github.com/frappe/charts',
|
||||
@ -5285,12 +5709,15 @@ window.$docsify = {
|
||||
executeScript: true,
|
||||
plugins: [function (hook, vm) {
|
||||
hook.doneEach(function () {
|
||||
var dbd = new docsBuilder(Chart);
|
||||
|
||||
console.log("inside hook", document.querySelector('.demo'));
|
||||
dbd.makeSection(document.querySelector('.demo'), demoRegistry.demo2);
|
||||
document.querySelector("main").classList.add("hide");
|
||||
});
|
||||
}]
|
||||
};
|
||||
|
||||
document.querySelector("#docs-link").addEventListener('click', function () {
|
||||
document.querySelector("#home-page").classList.add("hide");
|
||||
document.querySelector("main").classList.remove("hide");
|
||||
});
|
||||
|
||||
}());
|
||||
@ -1,3 +1,3 @@
|
||||
a {
|
||||
/* a {
|
||||
color: red;
|
||||
}
|
||||
} */
|
||||
@ -40,11 +40,8 @@ fs.readFile('src/css/charts.scss', (err, css) => {
|
||||
export default [
|
||||
{
|
||||
input: 'src/js/index.js',
|
||||
sourcemap: true,
|
||||
output: [
|
||||
{
|
||||
file: 'docs/assets/js/frappe-charts.min.js',
|
||||
format: 'iife',
|
||||
},
|
||||
{
|
||||
file: pkg.browser,
|
||||
format: 'iife',
|
||||
@ -80,42 +77,8 @@ export default [
|
||||
uglify()
|
||||
]
|
||||
},
|
||||
{
|
||||
input: 'docs/assets/js/index.js',
|
||||
output: [
|
||||
{
|
||||
file: 'docs/assets/js/index.min.js',
|
||||
format: 'iife',
|
||||
}
|
||||
],
|
||||
name: 'frappe',
|
||||
plugins: [
|
||||
postcssPlugin({
|
||||
preprocessor: (content, id) => new Promise((resolve, reject) => {
|
||||
const result = sass.renderSync({ file: id })
|
||||
resolve({ code: result.css.toString() })
|
||||
}),
|
||||
extensions: [ '.scss' ],
|
||||
plugins: [
|
||||
nested(),
|
||||
cssnext({ warnForDuplicates: false }),
|
||||
cssnano()
|
||||
]
|
||||
}),
|
||||
eslint({
|
||||
exclude: [
|
||||
'src/css/**'
|
||||
]
|
||||
}),
|
||||
babel({
|
||||
exclude: 'node_modules/**'
|
||||
}),
|
||||
replace({
|
||||
exclude: 'node_modules/**',
|
||||
ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
|
||||
})
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
input: 'src/js/chart.js',
|
||||
sourcemap: true,
|
||||
@ -154,11 +117,13 @@ export default [
|
||||
// uglify()
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
input: 'docs/docsify/indexShadow.js',
|
||||
input: 'docs/index.js',
|
||||
output: [
|
||||
{
|
||||
file: 'docs/docsify/indexShadow.min.js',
|
||||
file: 'docs/index.min.js',
|
||||
format: 'iife',
|
||||
}
|
||||
],
|
||||
@ -168,6 +133,8 @@ export default [
|
||||
})
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
input: 'src/js/chart.js',
|
||||
output: [
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user