[docs][major][init] setup docsify
This commit is contained in:
Prateeksha Singh
parent
bb596deb06
commit
420206f749
5
dist/frappe-charts.esm.js
vendored
5
dist/frappe-charts.esm.js
vendored
@ -306,6 +306,10 @@ class SvgTip {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the value of a number upto 2 decimal places.
|
||||
* @param {Number} d Any number
|
||||
*/
|
||||
function floatTwo(d) {
|
||||
return parseFloat(d.toFixed(2));
|
||||
}
|
||||
@ -3685,6 +3689,7 @@ class AxisChart extends BaseChart {
|
||||
// removeDataPoint(index = 0) {}
|
||||
}
|
||||
|
||||
// import MultiAxisChart from './charts/MultiAxisChart';
|
||||
const chartTypes = {
|
||||
bar: AxisChart,
|
||||
line: AxisChart,
|
||||
|
||||
4332
dist/frappe-charts.min.cjs.js
vendored
4332
dist/frappe-charts.min.cjs.js
vendored
File diff suppressed because one or more lines are too long
2
dist/frappe-charts.min.cjs.js.map
vendored
2
dist/frappe-charts.min.cjs.js.map
vendored
File diff suppressed because one or more lines are too long
4324
dist/frappe-charts.min.esm.js
vendored
4324
dist/frappe-charts.min.esm.js
vendored
File diff suppressed because one or more lines are too long
2
dist/frappe-charts.min.esm.js.map
vendored
2
dist/frappe-charts.min.esm.js.map
vendored
File diff suppressed because one or more lines are too long
@ -7,6 +7,7 @@ export class docsBuilder {
|
||||
}
|
||||
|
||||
makeSection(parent, sys) {
|
||||
console.log('parent here?', parent);
|
||||
return new docSection(this.LIB_OBJ, parent, sys);
|
||||
}
|
||||
}
|
||||
@ -25,13 +26,15 @@ 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);
|
||||
});
|
||||
// s.contentBlocks.forEach((blockConf, index) => {
|
||||
// this.blockMap[index] = this.getBlock(blockConf);
|
||||
// });
|
||||
|
||||
this.blockMap['test'] = this.getDemo(s);
|
||||
}
|
||||
|
||||
getBlock(blockConf) {
|
||||
@ -106,6 +109,13 @@ class docSection {
|
||||
args[o.path[0]] = {};
|
||||
}
|
||||
|
||||
const inputGroup = $.create('input', {
|
||||
inside: btnGroup,
|
||||
// className: `form-control`,
|
||||
// innerHTML: `<input type="text" class="form-control" placeholder="Username"
|
||||
// aria-label="Username" aria-describedby="basic-addon1">`
|
||||
});
|
||||
|
||||
Object.keys(o.states).forEach(key => {
|
||||
let state = o.states[key];
|
||||
let activeClass = key === o.activeState ? 'active' : '';
|
||||
|
||||
@ -7,9 +7,9 @@ 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;
|
||||
let sections = [];
|
||||
|
||||
if(window.location.pathname.split("/").pop().includes('index')) {
|
||||
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);
|
||||
|
||||
@ -21,10 +21,12 @@ if(window.location.pathname.split("/").pop().includes('index')) {
|
||||
});
|
||||
|
||||
sections = demoSections;
|
||||
} else {
|
||||
sections = docSections;
|
||||
}
|
||||
|
||||
// else {
|
||||
// sections = docSections;
|
||||
// }
|
||||
|
||||
sections.forEach(sectionConf => {
|
||||
let sectionEl = $.create('section', { className: sectionConf.name || sectionConf.title });
|
||||
insertAfter(sectionEl, currentElement);
|
||||
|
||||
277
docs/assets/js/index.min.js
vendored
277
docs/assets/js/index.min.js
vendored
@ -214,7 +214,6 @@ var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
|
||||
|
||||
|
||||
|
||||
// https://stackoverflow.com/a/11252167/6495043
|
||||
|
||||
|
||||
function clone(date) {
|
||||
@ -273,6 +272,12 @@ 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
|
||||
@ -335,6 +340,8 @@ function toTitleCase(str) {
|
||||
});
|
||||
}
|
||||
|
||||
// Composite Chart
|
||||
// ================================================================================
|
||||
var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850];
|
||||
|
||||
var lineCompositeData = {
|
||||
@ -548,25 +555,6 @@ var heatmapData = {
|
||||
end: end
|
||||
};
|
||||
|
||||
var sampleData = {
|
||||
0: {
|
||||
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
datasets: [{ values: [18, 40, 30, 35, 8, 52, 17, -4] }]
|
||||
},
|
||||
1: {
|
||||
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
datasets: [{ name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] }, { name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }]
|
||||
},
|
||||
2: {
|
||||
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"],
|
||||
datasets: [{ values: [300, 250, 720, 560, 370, 610, 690, 410, 370, 480, 620, 260, 170, 510, 630, 710] }]
|
||||
},
|
||||
3: {
|
||||
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
||||
datasets: [{ values: [300, 250, 720, 560, 370, 610, 690, 410, 370, 480, 620, 260, 170, 510, 630, 710, 560, 370, 610, 260, 170] }]
|
||||
}
|
||||
};
|
||||
|
||||
var lineComposite = {
|
||||
config: {
|
||||
title: "Fireball/Bolide Events - Yearly (reported)",
|
||||
@ -803,209 +791,6 @@ var demoSections = [{
|
||||
}]
|
||||
}];
|
||||
|
||||
var docSections = [{
|
||||
name: "start",
|
||||
contentBlocks: [
|
||||
// Intro
|
||||
{
|
||||
type: "text",
|
||||
content: "A chart is generally a 2D rendition of data. For example,\n\t\t\t\t\tfor a set of values across items, the data could look like:"
|
||||
}, {
|
||||
type: "code",
|
||||
content: " data = {\n labels: [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\n datasets: [\n\t { values: [18, 40, 30, 35, 8, 52, 17, -4] }\n ]\n }"
|
||||
},
|
||||
|
||||
// type: 'bar'
|
||||
{
|
||||
type: "text",
|
||||
content: "Plug that in with a type <b>bar</b>, a color and height:"
|
||||
}, {
|
||||
type: "code",
|
||||
content: " new frappe.Chart( \"#chart\", {\n data: data,\n type: 'bar',\n height: 140,\n colors: ['red']\n });"
|
||||
}, {
|
||||
type: "demo",
|
||||
config: {
|
||||
data: sampleData[0],
|
||||
type: 'bar',
|
||||
height: 140,
|
||||
colors: ['red']
|
||||
}
|
||||
},
|
||||
|
||||
// type: 'line'
|
||||
{
|
||||
type: "text",
|
||||
content: "And similarly, a <b>line</b> chart:"
|
||||
}, {
|
||||
type: "code",
|
||||
content: " ...\n type: 'line',\n ..."
|
||||
}, {
|
||||
type: "demo",
|
||||
config: {
|
||||
data: sampleData[0],
|
||||
type: 'line',
|
||||
height: 140,
|
||||
colors: ['red']
|
||||
}
|
||||
},
|
||||
|
||||
// Axes lines:
|
||||
{
|
||||
type: "text",
|
||||
content: "Axes lines are configurable. By default they are long\n\t\t\t\t\t<b>span</b>ning lines, but can also be short <b>tick</b>s:"
|
||||
}, {
|
||||
type: "code",
|
||||
content: " ...\n axisOptions: {\n xAxisMode: 'tick' // default: 'span'\n },\n ..."
|
||||
}, {
|
||||
type: "demo",
|
||||
config: {
|
||||
data: sampleData[2],
|
||||
type: 'bar',
|
||||
height: 140,
|
||||
colors: ['blue'],
|
||||
axisOptions: {
|
||||
xAxisMode: "tick"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Bar width:
|
||||
{
|
||||
type: "text",
|
||||
content: "The bar <b>width</b> can be set by defining the <b>ratio of the space</b>\n\t\t\t\t\tbetween bars to the bar width."
|
||||
}, {
|
||||
type: "code",
|
||||
content: " ...\n barOptions: {\n spaceRatio: 0.2 // default: 1\n },\n ..."
|
||||
}, {
|
||||
type: "demo",
|
||||
config: {
|
||||
data: sampleData[3],
|
||||
type: 'bar',
|
||||
height: 140,
|
||||
colors: ['orange'],
|
||||
axisOptions: {
|
||||
xAxisMode: "tick"
|
||||
},
|
||||
barOptions: {
|
||||
spaceRatio: 0.2
|
||||
}
|
||||
},
|
||||
options: [{
|
||||
name: "barOptions",
|
||||
path: ["barOptions"],
|
||||
type: "map",
|
||||
mapKeys: ['spaceRatio'],
|
||||
states: {
|
||||
"0.2": [0.2],
|
||||
"0.5": [0.5],
|
||||
"1": [1],
|
||||
"1.5": [1.5]
|
||||
},
|
||||
activeState: "0.2"
|
||||
}]
|
||||
},
|
||||
|
||||
// Dot radius:
|
||||
{
|
||||
type: "text",
|
||||
content: 'So can the <b>dot size</b> on a line graph, with the `dotSize` property in `lineOptions`.'
|
||||
}, {
|
||||
type: "code",
|
||||
content: " ...\n lineOptions: {\n dotRadius: 8 // default: 4\n },\n ..."
|
||||
}, {
|
||||
type: "demo",
|
||||
config: {
|
||||
data: sampleData[2],
|
||||
type: 'line',
|
||||
height: 140,
|
||||
colors: ['orange'],
|
||||
axisOptions: {
|
||||
xAxisMode: "tick"
|
||||
},
|
||||
lineOptions: {
|
||||
dotSize: 8
|
||||
}
|
||||
},
|
||||
options: [{
|
||||
name: "lineOptions",
|
||||
path: ["lineOptions"],
|
||||
type: "map",
|
||||
mapKeys: ['dotSize'],
|
||||
states: {
|
||||
"3": [3],
|
||||
"4": [4],
|
||||
"8": [8],
|
||||
"10": [10]
|
||||
},
|
||||
activeState: "8"
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
title: "Trends and region charts",
|
||||
name: "trends-and-region",
|
||||
contentBlocks: [{
|
||||
type: "text",
|
||||
content: 'lineOptions` have a bunch of other properties too. Region charts are'
|
||||
}, {
|
||||
type: "code",
|
||||
content: " ...\n data: {\n labels: [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\n datasets: [\n { name: \"Dataset 1\", values: [18, 40, 30, 35, 8, 52, 17, -4] },\n { name: \"Dataset 2\", values: [30, 50, -10, 15, 18, 32, 27, 14] }\n ]\n },\n ..."
|
||||
}, {
|
||||
type: "demo",
|
||||
config: {
|
||||
data: trendsData,
|
||||
type: 'line',
|
||||
height: 180,
|
||||
colors: ['violet'],
|
||||
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"
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
title: "Adding more datasets",
|
||||
name: "multi-dataset",
|
||||
contentBlocks: [{
|
||||
type: "text",
|
||||
content: "A chart can have multiple datasets. In an axis chart, every dataset is represented individually."
|
||||
}, {
|
||||
type: "code",
|
||||
content: " ...\n data: {\n labels: [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\n datasets: [\n { name: \"Dataset 1\", values: [18, 40, 30, 35, 8, 52, 17, -4] },\n { name: \"Dataset 2\", values: [30, 50, -10, 15, 18, 32, 27, 14] }\n ]\n },\n ..."
|
||||
}, {
|
||||
type: "demo",
|
||||
config: {
|
||||
data: sampleData[1],
|
||||
type: 'line',
|
||||
height: 200,
|
||||
colors: ['green', 'light-green']
|
||||
},
|
||||
options: [{
|
||||
name: "type",
|
||||
path: ["type"],
|
||||
type: "string",
|
||||
states: {
|
||||
"Line": 'line',
|
||||
"Bar": 'bar'
|
||||
},
|
||||
activeState: "Mixed"
|
||||
}]
|
||||
}]
|
||||
}];
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
||||
@ -1022,6 +807,7 @@ 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);
|
||||
}
|
||||
}]);
|
||||
@ -1045,17 +831,17 @@ 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(function (blockConf, index) {
|
||||
_this.blockMap[index] = _this.getBlock(blockConf);
|
||||
});
|
||||
// s.contentBlocks.forEach((blockConf, index) => {
|
||||
// this.blockMap[index] = this.getBlock(blockConf);
|
||||
// });
|
||||
|
||||
this.blockMap['test'] = this.getDemo(s);
|
||||
}
|
||||
}, {
|
||||
key: 'getBlock',
|
||||
@ -1127,14 +913,14 @@ var docSection = function () {
|
||||
value: function getDemoOptions(demoIndex) {
|
||||
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
||||
|
||||
var _this2 = this;
|
||||
var _this = this;
|
||||
|
||||
var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
||||
var figure = arguments[3];
|
||||
|
||||
options.forEach(function (o) {
|
||||
var btnGroup = $.create('div', {
|
||||
inside: _this2.parent,
|
||||
inside: _this.parent,
|
||||
className: 'btn-group ' + o.name
|
||||
});
|
||||
var mapKeys = o.mapKeys;
|
||||
@ -1143,6 +929,13 @@ var docSection = function () {
|
||||
args[o.path[0]] = {};
|
||||
}
|
||||
|
||||
var inputGroup = $.create('input', {
|
||||
inside: btnGroup
|
||||
// className: `form-control`,
|
||||
// innerHTML: `<input type="text" class="form-control" placeholder="Username"
|
||||
// aria-label="Username" aria-describedby="basic-addon1">`
|
||||
});
|
||||
|
||||
Object.keys(o.states).forEach(function (key) {
|
||||
var state = o.states[key];
|
||||
var activeClass = key === o.activeState ? 'active' : '';
|
||||
@ -1161,7 +954,7 @@ var docSection = function () {
|
||||
// boolean, string, number, object
|
||||
args[o.path[0]] = state;
|
||||
}
|
||||
_this2.demos[demoIndex] = new _this2.LIB_OBJ(figure, args);
|
||||
_this.demos[demoIndex] = new _this.LIB_OBJ(figure, args);
|
||||
}
|
||||
});
|
||||
|
||||
@ -1174,19 +967,19 @@ var docSection = function () {
|
||||
}, {
|
||||
key: 'getDemoActions',
|
||||
value: function getDemoActions(demoIndex) {
|
||||
var _this3 = this;
|
||||
var _this2 = this;
|
||||
|
||||
var actions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
||||
actions.forEach(function (o) {
|
||||
var args = o.args || [];
|
||||
$.create('button', {
|
||||
inside: _this3.parent,
|
||||
inside: _this2.parent,
|
||||
className: 'btn btn-action btn-sm btn-secondary',
|
||||
innerHTML: o.name,
|
||||
onClick: function onClick() {
|
||||
var _demos$demoIndex;
|
||||
|
||||
(_demos$demoIndex = _this3.demos[demoIndex])[o.fn].apply(_demos$demoIndex, _toConsumableArray(args));
|
||||
(_demos$demoIndex = _this2.demos[demoIndex])[o.fn].apply(_demos$demoIndex, _toConsumableArray(args));
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -1199,9 +992,9 @@ var docSection = function () {
|
||||
var Chart = frappe.Chart; // eslint-disable-line no-undef
|
||||
var dbd = new docsBuilder(Chart);
|
||||
var currentElement = document.querySelector('header');
|
||||
var sections = void 0;
|
||||
var sections = [];
|
||||
|
||||
if (window.location.pathname.split("/").pop().includes('index')) {
|
||||
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);
|
||||
|
||||
@ -1211,10 +1004,12 @@ if (window.location.pathname.split("/").pop().includes('index')) {
|
||||
});
|
||||
|
||||
sections = demoSections;
|
||||
} else {
|
||||
sections = docSections;
|
||||
}
|
||||
|
||||
// else {
|
||||
// sections = docSections;
|
||||
// }
|
||||
|
||||
sections.forEach(function (sectionConf) {
|
||||
var sectionEl = $.create('section', { className: sectionConf.name || sectionConf.title });
|
||||
insertAfter(sectionEl, currentElement);
|
||||
|
||||
@ -1,54 +0,0 @@
|
||||
<!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
|
||||
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">
|
||||
|
||||
<script src="assets/js/highlight.pack.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
|
||||
<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>
|
||||
<header>
|
||||
<h1>Documentation</h1>
|
||||
<p class="lead-text">Because it is beautiful.</p>
|
||||
</header>
|
||||
|
||||
<!-- Generated content goes here -->
|
||||
|
||||
<footer class="built-with-frappe text-center">
|
||||
<img style="padding: 5px; width: 40px; background: #fff" class="frappe-bird" src="./assets/img/frappe-bird.png">
|
||||
<p style="margin: 24px 0 80px 0; font-size: 15px">
|
||||
Project maintained by <a href="https://frappe.io" target="_blank">Frappe</a>.
|
||||
Used in <a href="https://erpnext.com" target="_blank">ERPNext</a>.
|
||||
Read the <a href="https://medium.com/@pratu16x7/so-we-decided-to-create-our-own-charts-a95cb5032c97" target="_blank">blog post</a>.
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<!-- <a href="https://github.com/frappe/charts" target="_blank" class="github-corner" aria-label="View source on Github">
|
||||
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#9a9a9a; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
||||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
||||
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
|
||||
</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>
|
||||
</html>
|
||||
0
docs/docsify/.nojekyll
Normal file
0
docs/docsify/.nojekyll
Normal file
138
docs/docsify/README.md
Normal file
138
docs/docsify/README.md
Normal file
@ -0,0 +1,138 @@
|
||||
<div align="center">
|
||||
<img src="https://github.com/frappe/design/blob/master/logos/charts-logo.svg" height="128">
|
||||
<a href="https://frappe.github.io/charts">
|
||||
<h2>Frappe Charts</h2>
|
||||
</a>
|
||||
<p align="center">
|
||||
<p>GitHub-inspired modern, intuitive and responsive charts with zero dependencies</p>
|
||||
<a href="https://frappe.github.io/charts">
|
||||
<b>Explore Demos » </b>
|
||||
</a>
|
||||
<a href="https://codepen.io/pratu16x7/pen/wjKBoq">
|
||||
<b> Edit at CodePen »</b>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section class="demo"></section>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://travis-ci.org/frappe/charts">
|
||||
<img src="https://img.shields.io/travis/frappe/charts.svg?style=flat-square">
|
||||
</a>
|
||||
<a href="http://github.com/frappe/charts/tree/master/dist/js/frappe-charts.min.iife.js">
|
||||
<img src="http://img.badgesize.io/frappe/charts/master/dist/frappe-charts.min.iife.js.svg?compression=gzip">
|
||||
</a>
|
||||
<a href="https://travis-ci.org/frappe/charts">
|
||||
<img src="https://img.shields.io/travis/frappe/charts.svg?style=flat-square">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://frappe.github.io/charts">
|
||||
<img src=".github/example.gif">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
### Contents
|
||||
* [Installation](#installation)
|
||||
* [Usage](#usage)
|
||||
* [Updates](#updates)
|
||||
* [License](#license)
|
||||
|
||||
#### Installation
|
||||
* Install via [`npm`](https://www.npmjs.com/get-npm):
|
||||
|
||||
```console
|
||||
$ npm install frappe-charts
|
||||
```
|
||||
|
||||
and include in your project:
|
||||
```js
|
||||
import { Chart } from "frappe-charts"
|
||||
```
|
||||
|
||||
* ...or include within your HTML
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/frappe-charts@1.1.0/dist/frappe-charts.min.iife.js"></script>
|
||||
<!-- or -->
|
||||
<script src="https://unpkg.com/frappe-charts@1.1.0/dist/frappe-charts.min.iife.js"></script>
|
||||
```
|
||||
|
||||
#### Usage
|
||||
```js
|
||||
const data = {
|
||||
labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
|
||||
"12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
name: "Some Data", type: "bar",
|
||||
values: [25, 40, 30, 35, 8, 52, 17, -4]
|
||||
},
|
||||
{
|
||||
name: "Another Set", type: "line",
|
||||
values: [25, 50, -10, 15, 18, 32, 27, 14]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const chart = new frappe.Chart("#chart", { // or a DOM element,
|
||||
// new Chart() in case of ES6 module with above usage
|
||||
title: "My Awesome Chart",
|
||||
data: data,
|
||||
type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
|
||||
height: 250,
|
||||
colors: ['#7cd6fd', '#743ee2']
|
||||
})
|
||||
```
|
||||
|
||||
If you want to contribute:
|
||||
|
||||
1. Clone this repo.
|
||||
2. `cd` into project directory
|
||||
3. `npm install`
|
||||
4. `npm run dev`
|
||||
|
||||
#### Updates
|
||||
|
||||
##### v1.0.0
|
||||
- Major rewrite out. Some new features include:
|
||||
- Mixed type axis datasets
|
||||
- Stacked bar charts
|
||||
- Value over data points
|
||||
- Y Markers and regions
|
||||
- Dot size, Bar space size, and other options
|
||||
- Legend for axis charts
|
||||
- We would be looking to incorporate existing PRs and issues in the meantime.
|
||||
|
||||
##### Please read [#93](https://github.com/frappe/charts/issues/93) for v0.1.0 updates on rework and development.
|
||||
|
||||
##### v0.0.7
|
||||
- [Custom color values](https://github.com/frappe/charts/pull/71) for charts as hex codes. The API now takes an array of colors for all charts instead of a color for each dataset.
|
||||
- [@iamkdev's](https://github.com/iamkdev) blog on [usage with Angular](https://medium.com/@iamkdev/frappé-charts-with-angular-c9c5dd075d9f).
|
||||
|
||||
##### v0.0.5
|
||||
- More [flexible Y values](https://github.com/frappe/charts/commit/3de049c451194dcd8e61ff91ceeb998ce131c709): independent from exponent, minimum Y axis point for line graphs.
|
||||
- Customisable [Heatmap colors](https://github.com/frappe/charts/pull/53); check out the Halloween demo on the [website](https://frappe.github.io/charts) :D
|
||||
- Tooltip values can be [formatted](https://github.com/frappe/charts/commit/e3d9ed0eae14b65044dca0542cdd4d12af3f2b44).
|
||||
|
||||
##### v0.0.4
|
||||
- Build update: [Shipped](https://github.com/frappe/charts/pull/35) an ES6 module, along with the browser friendly IIFE.
|
||||
|
||||
##### v0.0.2
|
||||
- We have an animated [Pie Chart](https://github.com/frappe/charts/issues/29)! Thanks [@sheweichun](https://github.com/sheweichun).
|
||||
- [@tobiaslins](https://github.com/tobiaslins) contributed tweaks for his quest to make these easy to use with React. Check out his [repo](https://github.com/tobiaslins/frappe-charts-react-example) and updates at [#24](https://github.com/frappe/charts/issues/24) to learn more :)
|
||||
- A new logo.
|
||||
|
||||
##### v0.0.1
|
||||
- The very first version out, with animatable bars and lines, a percentage chart and a heatmap. GitHub-style.
|
||||
|
||||
#### License
|
||||
This repository has been released under the [MIT License](LICENSE)
|
||||
|
||||
------------------
|
||||
Project maintained by [Frappe](https://frappe.io).
|
||||
Used in [ERPNext](https://erpnext.com). Read the [blog post](https://medium.com/@pratu16x7/so-we-decided-to-create-our-own-charts-a95cb5032c97).
|
||||
|
||||
10
docs/docsify/_sidebar.md
Normal file
10
docs/docsify/_sidebar.md
Normal file
@ -0,0 +1,10 @@
|
||||
* Getting started
|
||||
|
||||
* [Quick start](chap1/test1.md)
|
||||
|
||||
* Customization
|
||||
|
||||
* [Configuration](test2.md)
|
||||
|
||||
|
||||
* [Changelog](test.md)
|
||||
7
docs/docsify/assets/css/bootstrap.min.css
vendored
Normal file
7
docs/docsify/assets/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
99
docs/docsify/assets/css/hljs.css
Executable file
99
docs/docsify/assets/css/hljs.css
Executable file
@ -0,0 +1,99 @@
|
||||
/*
|
||||
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
color: #36414c;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: #F8F8F9;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #998;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-subst {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-number,
|
||||
.hljs-literal,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-tag .hljs-attr {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-doctag {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-selector-id {
|
||||
color: #900;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-subst {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hljs-type,
|
||||
.hljs-class .hljs-title {
|
||||
color: #458;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-tag,
|
||||
.hljs-name,
|
||||
.hljs-attribute {
|
||||
color: #000080;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-link {
|
||||
color: #009926;
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
|
||||
.hljs-bullet {
|
||||
color: #990073;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-builtin-name {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-meta {
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
background: #fdd;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
background: #dfd;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
121
docs/docsify/assets/css/index.css
Executable file
121
docs/docsify/assets/css/index.css
Executable file
@ -0,0 +1,121 @@
|
||||
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;
|
||||
}
|
||||
353
docs/docsify/assets/css/reset.css
Executable file
353
docs/docsify/assets/css/reset.css
Executable file
@ -0,0 +1,353 @@
|
||||
/*!
|
||||
*this reset is a copy of bootstrap's reboot.css which is inturn a fork of normalise*
|
||||
* Bootstrap Reboot v4.0.0-beta.3 (https://getbootstrap.com)
|
||||
* Copyright 2011-2017 The Bootstrap Authors
|
||||
* Copyright 2011-2017 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-ms-overflow-style: scrollbar;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
--line-height: 3;
|
||||
line-height: calc(((var(--line-height) * var(--capital-height)) - var(--valign)) * 1px);
|
||||
}
|
||||
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
font-weight: 400;
|
||||
/* line-height: 1.5; */
|
||||
text-align: left;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, Noto, Oxygen-Sans, "Noto Sans", Ubuntu,Cantarell, sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
color: #36414c;
|
||||
font-weight:normal;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-font-feature-settings: "kern" 1;
|
||||
-moz-font-feature-settings: "kern" 1;
|
||||
-o-font-feature-settings: "kern" 1;
|
||||
font-feature-settings: "kern" 1;
|
||||
font-kerning: normal;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
[tabindex="-1"]:focus {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
abbr[title],
|
||||
abbr[data-original-title] {
|
||||
text-decoration: underline;
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #0056b3;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]):focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
-ms-overflow-style: scrollbar;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role="button"],
|
||||
input:not([type="range"]),
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
color: #6c757d;
|
||||
text-align: left;
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
button,
|
||||
html [type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
-webkit-appearance: listbox;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
outline-offset: -2px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
/*# sourceMappingURL=bootstrap-reboot.css.map */
|
||||
47
docs/docsify/chap1/test1.md
Normal file
47
docs/docsify/chap1/test1.md
Normal file
@ -0,0 +1,47 @@
|
||||
#### Installation
|
||||
* Install via [`npm`](https://www.npmjs.com/get-npm):
|
||||
|
||||
```console
|
||||
$ npm install frappe-charts
|
||||
```
|
||||
|
||||
and include in your project:
|
||||
```js
|
||||
import { Chart } from "frappe-charts"
|
||||
```
|
||||
|
||||
* ...or include within your HTML
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/frappe-charts@1.1.0/dist/frappe-charts.min.iife.js"></script>
|
||||
<!-- or -->
|
||||
<script src="https://unpkg.com/frappe-charts@1.1.0/dist/frappe-charts.min.iife.js"></script>
|
||||
```
|
||||
|
||||
#### Usage
|
||||
```js
|
||||
const data = {
|
||||
labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
|
||||
"12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
name: "Some Data", type: "bar",
|
||||
values: [25, 40, 30, 35, 8, 52, 17, -4]
|
||||
},
|
||||
{
|
||||
name: "Another Set", type: "line",
|
||||
values: [25, 50, -10, 15, 18, 32, 27, 14]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const chart = new frappe.Chart("#chart", { // or a DOM element,
|
||||
// new Chart() in case of ES6 module with above usage
|
||||
title: "My Awesome Chart",
|
||||
data: data,
|
||||
type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
|
||||
height: 250,
|
||||
colors: ['#7cd6fd', '#743ee2']
|
||||
})
|
||||
```
|
||||
44
docs/docsify/demoRegistry.js
Normal file
44
docs/docsify/demoRegistry.js
Normal file
@ -0,0 +1,44 @@
|
||||
import { sampleData, trendsData } from '../assets/js/data';
|
||||
|
||||
export const demoRegistry = {
|
||||
demo1: {
|
||||
type: "demo",
|
||||
config: {
|
||||
data: sampleData[0],
|
||||
type: 'bar',
|
||||
height: 140,
|
||||
colors: ['red'],
|
||||
},
|
||||
},
|
||||
|
||||
demo2: {
|
||||
type: "demo",
|
||||
config: {
|
||||
data: sampleData[3],
|
||||
type: 'bar',
|
||||
height: 140,
|
||||
colors: ['orange'],
|
||||
axisOptions: {
|
||||
xAxisMode: "tick"
|
||||
},
|
||||
barOptions: {
|
||||
spaceRatio: 0.2
|
||||
},
|
||||
},
|
||||
options: [
|
||||
{
|
||||
name: "barOptions",
|
||||
path: ["barOptions"],
|
||||
type: "map",
|
||||
mapKeys: ['spaceRatio'],
|
||||
states: {
|
||||
"0.2": [0.2],
|
||||
"0.5": [0.5],
|
||||
"1": [1],
|
||||
"1.5": [1.5]
|
||||
},
|
||||
activeState: "0.2"
|
||||
}
|
||||
]
|
||||
},
|
||||
};
|
||||
24
docs/docsify/index.html
Normal file
24
docs/docsify/index.html
Normal file
@ -0,0 +1,24 @@
|
||||
<!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>
|
||||
20
docs/docsify/indexShadow.js
Normal file
20
docs/docsify/indexShadow.js
Normal file
@ -0,0 +1,20 @@
|
||||
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);
|
||||
});
|
||||
}
|
||||
]
|
||||
}
|
||||
5296
docs/docsify/indexShadow.min.js
vendored
Normal file
5296
docs/docsify/indexShadow.min.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
3
docs/docsify/style.css
Normal file
3
docs/docsify/style.css
Normal file
@ -0,0 +1,3 @@
|
||||
a {
|
||||
color: red;
|
||||
}
|
||||
1
docs/docsify/test.md
Normal file
1
docs/docsify/test.md
Normal file
@ -0,0 +1 @@
|
||||
* Change
|
||||
952
docs/docsify/vuestyle.css
Normal file
952
docs/docsify/vuestyle.css
Normal file
@ -0,0 +1,952 @@
|
||||
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600");
|
||||
* {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-text-size-adjust: none;
|
||||
-webkit-touch-callout: none;
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
body:not(.ready) {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
body:not(.ready) .app-nav,
|
||||
body:not(.ready)>nav,
|
||||
body:not(.ready) [data-cloak] {
|
||||
display: none
|
||||
}
|
||||
|
||||
div#app {
|
||||
font-size: 30px;
|
||||
font-weight: lighter;
|
||||
margin: 40vh auto;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
div#app:empty:before {
|
||||
content: "Loading..."
|
||||
}
|
||||
|
||||
.emoji {
|
||||
height: 1.2rem;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.progress {
|
||||
background-color: var(--theme-color, #42b983);
|
||||
height: 2px;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: width .2s, opacity .4s;
|
||||
width: 0;
|
||||
z-index: 5
|
||||
}
|
||||
|
||||
.search .search-keyword,
|
||||
.search a:hover {
|
||||
color: var(--theme-color, #42b983)
|
||||
}
|
||||
|
||||
.search .search-keyword {
|
||||
font-style: normal;
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: #34495e;
|
||||
font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0;
|
||||
margin: 0;
|
||||
overflow-x: hidden
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
a[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: .6
|
||||
}
|
||||
|
||||
kbd {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
font-size: 12px !important;
|
||||
line-height: 12px;
|
||||
margin-bottom: 3px;
|
||||
padding: 3px 5px;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.task-list-item {
|
||||
list-style-type: none
|
||||
}
|
||||
|
||||
li input[type=checkbox] {
|
||||
margin: 0 .2em .25em -1.6em;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.app-nav {
|
||||
margin: 25px 60px 0 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
.app-nav.no-badge {
|
||||
margin-right: 25px
|
||||
}
|
||||
|
||||
.app-nav p {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.app-nav>a {
|
||||
margin: 0 1rem;
|
||||
padding: 5px 0
|
||||
}
|
||||
|
||||
.app-nav li,
|
||||
.app-nav ul {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.app-nav a {
|
||||
color: inherit;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
transition: color .3s
|
||||
}
|
||||
|
||||
.app-nav a.active,
|
||||
.app-nav a:hover {
|
||||
color: var(--theme-color, #42b983)
|
||||
}
|
||||
|
||||
.app-nav a.active {
|
||||
border-bottom: 2px solid var(--theme-color, #42b983)
|
||||
}
|
||||
|
||||
.app-nav li {
|
||||
display: inline-block;
|
||||
margin: 0 1rem;
|
||||
padding: 5px 0;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.app-nav li ul {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
max-height: calc(100vh - 61px);
|
||||
overflow-y: auto;
|
||||
padding: 10px 0;
|
||||
position: absolute;
|
||||
right: -15px;
|
||||
text-align: left;
|
||||
top: 100%;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.app-nav li ul li {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 1rem;
|
||||
margin: 0;
|
||||
margin: 8px 14px;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.app-nav li ul a {
|
||||
display: block;
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.app-nav li ul a.active {
|
||||
border-bottom: 0
|
||||
}
|
||||
|
||||
.app-nav li:hover ul {
|
||||
display: block
|
||||
}
|
||||
|
||||
.github-corner {
|
||||
border-bottom: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
text-decoration: none;
|
||||
top: 0;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.github-corner:hover .octo-arm {
|
||||
animation: a .56s ease-in-out
|
||||
}
|
||||
|
||||
.github-corner svg {
|
||||
color: #fff;
|
||||
fill: var(--theme-color, #42b983);
|
||||
height: 80px;
|
||||
width: 80px
|
||||
}
|
||||
|
||||
main {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
z-index: 0
|
||||
}
|
||||
|
||||
main.hidden {
|
||||
display: none
|
||||
}
|
||||
|
||||
.anchor {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
transition: all .3s
|
||||
}
|
||||
|
||||
.anchor span {
|
||||
color: #34495e
|
||||
}
|
||||
|
||||
.anchor:hover {
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
border-right: 1px solid rgba(0, 0, 0, .07);
|
||||
overflow-y: auto;
|
||||
padding: 40px 0 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transition: transform .25s ease-out;
|
||||
width: 300px;
|
||||
z-index: 3
|
||||
}
|
||||
|
||||
.sidebar>h1 {
|
||||
margin: 0 auto 1rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.sidebar>h1 a {
|
||||
color: inherit;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.sidebar>h1 .app-nav {
|
||||
display: block;
|
||||
position: static
|
||||
}
|
||||
|
||||
.sidebar .sidebar-nav {
|
||||
line-height: 2em;
|
||||
padding-bottom: 40px
|
||||
}
|
||||
|
||||
.sidebar li.collapse .app-sub-sidebar {
|
||||
display: none
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.sidebar li>p {
|
||||
font-weight: 700;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.sidebar ul,
|
||||
.sidebar ul li {
|
||||
list-style: none
|
||||
}
|
||||
|
||||
.sidebar ul li a {
|
||||
border-bottom: none;
|
||||
display: block
|
||||
}
|
||||
|
||||
.sidebar ul li ul {
|
||||
padding-left: 20px
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar {
|
||||
width: 4px
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-thumb {
|
||||
background: transparent;
|
||||
border-radius: 4px
|
||||
}
|
||||
|
||||
.sidebar:hover::-webkit-scrollbar-thumb {
|
||||
background: hsla(0, 0%, 53%, .4)
|
||||
}
|
||||
|
||||
.sidebar:hover::-webkit-scrollbar-track {
|
||||
background: hsla(0, 0%, 53%, .1)
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
background-color: transparent;
|
||||
background-color: hsla(0, 0%, 100%, .8);
|
||||
border: 0;
|
||||
outline: none;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
transition: opacity .3s;
|
||||
width: 284px;
|
||||
z-index: 4
|
||||
}
|
||||
|
||||
.sidebar-toggle .sidebar-toggle-button:hover {
|
||||
opacity: .4
|
||||
}
|
||||
|
||||
.sidebar-toggle span {
|
||||
background-color: var(--theme-color, #42b983);
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
width: 16px;
|
||||
height: 2px
|
||||
}
|
||||
|
||||
body.sticky .sidebar,
|
||||
body.sticky .sidebar-toggle {
|
||||
position: fixed
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 60px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 300px;
|
||||
transition: left .25s ease
|
||||
}
|
||||
|
||||
.markdown-section {
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
padding: 30px 15px 40px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.markdown-section>* {
|
||||
box-sizing: border-box;
|
||||
font-size: inherit
|
||||
}
|
||||
|
||||
.markdown-section>:first-child {
|
||||
margin-top: 0 !important
|
||||
}
|
||||
|
||||
.markdown-section hr {
|
||||
border: none;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin: 2em 0
|
||||
}
|
||||
|
||||
.markdown-section iframe {
|
||||
border: 1px solid #eee
|
||||
}
|
||||
|
||||
.markdown-section table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.markdown-section th {
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.markdown-section td,
|
||||
.markdown-section th {
|
||||
border: 1px solid #ddd;
|
||||
padding: 6px 13px
|
||||
}
|
||||
|
||||
.markdown-section tr {
|
||||
border-top: 1px solid #ccc
|
||||
}
|
||||
|
||||
.markdown-section p.tip,
|
||||
.markdown-section tr:nth-child(2n) {
|
||||
background-color: #f8f8f8
|
||||
}
|
||||
|
||||
.markdown-section p.tip {
|
||||
border-bottom-right-radius: 2px;
|
||||
border-left: 4px solid #f66;
|
||||
border-top-right-radius: 2px;
|
||||
margin: 2em 0;
|
||||
padding: 12px 24px 12px 30px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.markdown-section p.tip:before {
|
||||
background-color: #f66;
|
||||
border-radius: 100%;
|
||||
color: #fff;
|
||||
content: "!";
|
||||
font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
left: -12px;
|
||||
line-height: 20px;
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
top: 14px
|
||||
}
|
||||
|
||||
.markdown-section p.tip code {
|
||||
background-color: #efefef
|
||||
}
|
||||
|
||||
.markdown-section p.tip em {
|
||||
color: #34495e
|
||||
}
|
||||
|
||||
.markdown-section p.warn {
|
||||
background: rgba(66, 185, 131, .1);
|
||||
border-radius: 2px;
|
||||
padding: 1rem
|
||||
}
|
||||
|
||||
body.close .sidebar {
|
||||
transform: translateX(-300px)
|
||||
}
|
||||
|
||||
body.close .sidebar-toggle {
|
||||
width: auto
|
||||
}
|
||||
|
||||
body.close .content {
|
||||
left: 0
|
||||
}
|
||||
|
||||
@media print {
|
||||
.app-nav,
|
||||
.github-corner,
|
||||
.sidebar,
|
||||
.sidebar-toggle {
|
||||
display: none
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:768px) {
|
||||
.github-corner,
|
||||
.sidebar,
|
||||
.sidebar-toggle {
|
||||
position: fixed
|
||||
}
|
||||
.app-nav {
|
||||
margin-top: 16px
|
||||
}
|
||||
.app-nav li ul {
|
||||
top: 30px
|
||||
}
|
||||
main {
|
||||
height: auto;
|
||||
overflow-x: hidden
|
||||
}
|
||||
.sidebar {
|
||||
left: -300px;
|
||||
transition: transform .25s ease-out
|
||||
}
|
||||
.content {
|
||||
left: 0;
|
||||
max-width: 100vw;
|
||||
position: static;
|
||||
padding-top: 20px;
|
||||
transition: transform .25s ease
|
||||
}
|
||||
.app-nav,
|
||||
.github-corner {
|
||||
transition: transform .25s ease-out
|
||||
}
|
||||
.sidebar-toggle {
|
||||
background-color: transparent;
|
||||
width: auto;
|
||||
padding: 30px 30px 10px 10px
|
||||
}
|
||||
body.close .sidebar {
|
||||
transform: translateX(300px)
|
||||
}
|
||||
body.close .sidebar-toggle {
|
||||
background-color: hsla(0, 0%, 100%, .8);
|
||||
transition: background-color 1s;
|
||||
width: 284px;
|
||||
padding: 10px
|
||||
}
|
||||
body.close .content {
|
||||
transform: translateX(300px)
|
||||
}
|
||||
body.close .app-nav,
|
||||
body.close .github-corner {
|
||||
display: none
|
||||
}
|
||||
.github-corner:hover .octo-arm {
|
||||
animation: none
|
||||
}
|
||||
.github-corner .octo-arm {
|
||||
animation: a .56s ease-in-out
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes a {
|
||||
0%,
|
||||
to {
|
||||
transform: rotate(0)
|
||||
}
|
||||
20%,
|
||||
60% {
|
||||
transform: rotate(-25deg)
|
||||
}
|
||||
40%,
|
||||
80% {
|
||||
transform: rotate(10deg)
|
||||
}
|
||||
}
|
||||
|
||||
section.cover {
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
display: none
|
||||
}
|
||||
|
||||
section.cover.show {
|
||||
display: -ms-flexbox;
|
||||
display: flex
|
||||
}
|
||||
|
||||
section.cover.has-mask .mask {
|
||||
background-color: #fff;
|
||||
opacity: .8;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
section.cover .cover-main {
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
margin: -20px 16px 0;
|
||||
text-align: center;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
section.cover a {
|
||||
color: inherit
|
||||
}
|
||||
|
||||
section.cover a,
|
||||
section.cover a:hover {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
section.cover p {
|
||||
line-height: 1.5rem;
|
||||
margin: 1em 0
|
||||
}
|
||||
|
||||
section.cover h1 {
|
||||
color: inherit;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 300;
|
||||
margin: .625rem 0 2.5rem;
|
||||
position: relative;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
section.cover h1 a {
|
||||
display: block
|
||||
}
|
||||
|
||||
section.cover h1 small {
|
||||
bottom: -.4375rem;
|
||||
font-size: 1rem;
|
||||
position: absolute
|
||||
}
|
||||
|
||||
section.cover blockquote {
|
||||
font-size: 1.5rem;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
section.cover ul {
|
||||
line-height: 1.8;
|
||||
list-style-type: none;
|
||||
margin: 1em auto;
|
||||
max-width: 500px;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
section.cover .cover-main>p:last-child a {
|
||||
border: 1px solid var(--theme-color, #42b983);
|
||||
border-radius: 2rem;
|
||||
box-sizing: border-box;
|
||||
color: var(--theme-color, #42b983);
|
||||
display: inline-block;
|
||||
font-size: 1.05rem;
|
||||
letter-spacing: .1rem;
|
||||
margin: .5rem 1rem;
|
||||
padding: .75em 2rem;
|
||||
text-decoration: none;
|
||||
transition: all .15s ease
|
||||
}
|
||||
|
||||
section.cover .cover-main>p:last-child a:last-child {
|
||||
background-color: var(--theme-color, #42b983);
|
||||
color: #fff
|
||||
}
|
||||
|
||||
section.cover .cover-main>p:last-child a:last-child:hover {
|
||||
color: inherit;
|
||||
opacity: .8
|
||||
}
|
||||
|
||||
section.cover .cover-main>p:last-child a:hover {
|
||||
color: inherit
|
||||
}
|
||||
|
||||
section.cover blockquote>p>a {
|
||||
border-bottom: 2px solid var(--theme-color, #42b983);
|
||||
transition: color .3s
|
||||
}
|
||||
|
||||
section.cover blockquote>p>a:hover {
|
||||
color: var(--theme-color, #42b983)
|
||||
}
|
||||
|
||||
.sidebar,
|
||||
body {
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
color: #364149
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
margin: 6px 0 6px 15px
|
||||
}
|
||||
|
||||
.sidebar ul li a {
|
||||
color: #505d6b;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.sidebar ul li a:hover {
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
.sidebar ul li ul {
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.sidebar ul li.active>a {
|
||||
border-right: 2px solid;
|
||||
color: var(--theme-color, #42b983);
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
.app-sub-sidebar li:before {
|
||||
content: "-";
|
||||
padding-right: 4px;
|
||||
float: left
|
||||
}
|
||||
|
||||
.markdown-section h1,
|
||||
.markdown-section h2,
|
||||
.markdown-section h3,
|
||||
.markdown-section h4,
|
||||
.markdown-section strong {
|
||||
color: #2c3e50;
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
.markdown-section a {
|
||||
color: var(--theme-color, #42b983);
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
.markdown-section h1 {
|
||||
font-size: 2rem;
|
||||
margin: 0 0 1rem
|
||||
}
|
||||
|
||||
.markdown-section h2 {
|
||||
font-size: 1.75rem;
|
||||
margin: 45px 0 .8rem
|
||||
}
|
||||
|
||||
.markdown-section h3 {
|
||||
font-size: 1.5rem;
|
||||
margin: 40px 0 .6rem
|
||||
}
|
||||
|
||||
.markdown-section h4 {
|
||||
font-size: 1.25rem
|
||||
}
|
||||
|
||||
.markdown-section h5 {
|
||||
font-size: 1rem
|
||||
}
|
||||
|
||||
.markdown-section h6 {
|
||||
color: #777;
|
||||
font-size: 1rem
|
||||
}
|
||||
|
||||
.markdown-section figure,
|
||||
.markdown-section p {
|
||||
margin: 1.2em 0
|
||||
}
|
||||
|
||||
.markdown-section ol,
|
||||
.markdown-section p,
|
||||
.markdown-section ul {
|
||||
line-height: 1.6rem;
|
||||
word-spacing: .05rem
|
||||
}
|
||||
|
||||
.markdown-section ol,
|
||||
.markdown-section ul {
|
||||
padding-left: 1.5rem
|
||||
}
|
||||
|
||||
.markdown-section blockquote {
|
||||
border-left: 4px solid var(--theme-color, #42b983);
|
||||
color: #858585;
|
||||
margin: 2em 0;
|
||||
padding-left: 20px
|
||||
}
|
||||
|
||||
.markdown-section blockquote p {
|
||||
font-weight: 600;
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
.markdown-section iframe {
|
||||
margin: 1em 0
|
||||
}
|
||||
|
||||
.markdown-section em {
|
||||
color: #7f8c8d
|
||||
}
|
||||
|
||||
.markdown-section code {
|
||||
border-radius: 2px;
|
||||
color: #e96900;
|
||||
font-size: .8rem;
|
||||
margin: 0 2px;
|
||||
padding: 3px 5px;
|
||||
white-space: pre-wrap
|
||||
}
|
||||
|
||||
.markdown-section code,
|
||||
.markdown-section pre {
|
||||
background-color: #f8f8f8;
|
||||
font-family: Roboto Mono, Monaco, courier, monospace
|
||||
}
|
||||
|
||||
.markdown-section pre {
|
||||
-moz-osx-font-smoothing: initial;
|
||||
-webkit-font-smoothing: initial;
|
||||
line-height: 1.5rem;
|
||||
margin: 1.2em 0;
|
||||
overflow: auto;
|
||||
padding: 0 1.4rem;
|
||||
position: relative;
|
||||
word-wrap: normal
|
||||
}
|
||||
|
||||
.token.cdata,
|
||||
.token.comment,
|
||||
.token.doctype,
|
||||
.token.prolog {
|
||||
color: #8e908c
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
opacity: .7
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #c76b29
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #525252
|
||||
}
|
||||
|
||||
.token.property {
|
||||
color: #c08b30
|
||||
}
|
||||
|
||||
.token.tag {
|
||||
color: #2973b7
|
||||
}
|
||||
|
||||
.token.string {
|
||||
color: var(--theme-color, #42b983)
|
||||
}
|
||||
|
||||
.token.selector {
|
||||
color: #6679cc
|
||||
}
|
||||
|
||||
.token.attr-name {
|
||||
color: #2973b7
|
||||
}
|
||||
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.entity,
|
||||
.token.url {
|
||||
color: #22a2c9
|
||||
}
|
||||
|
||||
.token.attr-value,
|
||||
.token.control,
|
||||
.token.directive,
|
||||
.token.unit {
|
||||
color: var(--theme-color, #42b983)
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #e96900
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.regex,
|
||||
.token.statement {
|
||||
color: #22a2c9
|
||||
}
|
||||
|
||||
.token.placeholder,
|
||||
.token.variable {
|
||||
color: #3d8fd1
|
||||
}
|
||||
|
||||
.token.deleted {
|
||||
text-decoration: line-through
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
border-bottom: 1px dotted #202746;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
.token.bold,
|
||||
.token.important {
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.token.important {
|
||||
color: #c94922
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help
|
||||
}
|
||||
|
||||
.markdown-section pre>code {
|
||||
-moz-osx-font-smoothing: initial;
|
||||
-webkit-font-smoothing: initial;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 2px;
|
||||
color: #525252;
|
||||
display: block;
|
||||
font-family: Roboto Mono, Monaco, courier, monospace;
|
||||
font-size: .8rem;
|
||||
line-height: inherit;
|
||||
margin: 0 2px;
|
||||
max-width: inherit;
|
||||
overflow: inherit;
|
||||
padding: 2.2em 5px;
|
||||
white-space: inherit
|
||||
}
|
||||
|
||||
.markdown-section code:after,
|
||||
.markdown-section code:before {
|
||||
letter-spacing: .05rem
|
||||
}
|
||||
|
||||
code .token {
|
||||
-moz-osx-font-smoothing: initial;
|
||||
-webkit-font-smoothing: initial;
|
||||
min-height: 1.5rem
|
||||
}
|
||||
|
||||
pre:after {
|
||||
color: #ccc;
|
||||
content: attr(data-lang);
|
||||
font-size: .6rem;
|
||||
font-weight: 600;
|
||||
height: 15px;
|
||||
line-height: 15px;
|
||||
padding: 5px 10px 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
top: 0
|
||||
}
|
||||
@ -37,7 +37,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="docs.html" style="margin-right: 1rem;" target="_blank">Documentation</a>
|
||||
<a href="docsify/index.html" style="margin-right: 1rem;" target="_blank">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>
|
||||
|
||||
@ -150,13 +150,24 @@ export default [
|
||||
babel({
|
||||
exclude: 'node_modules/**',
|
||||
}),
|
||||
replace({
|
||||
exclude: 'node_modules/**',
|
||||
ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
|
||||
}),
|
||||
uglify()
|
||||
// TODO:
|
||||
// uglify()
|
||||
],
|
||||
},
|
||||
{
|
||||
input: 'docs/docsify/indexShadow.js',
|
||||
output: [
|
||||
{
|
||||
file: 'docs/docsify/indexShadow.min.js',
|
||||
format: 'iife',
|
||||
}
|
||||
],
|
||||
plugins: [
|
||||
babel({
|
||||
exclude: 'node_modules/**'
|
||||
})
|
||||
]
|
||||
},
|
||||
{
|
||||
input: 'src/js/chart.js',
|
||||
output: [
|
||||
@ -179,15 +190,6 @@ export default [
|
||||
cssnano()
|
||||
]
|
||||
}),
|
||||
eslint({
|
||||
exclude: [
|
||||
'src/css/**',
|
||||
]
|
||||
}),
|
||||
replace({
|
||||
exclude: 'node_modules/**',
|
||||
ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
|
||||
})
|
||||
],
|
||||
}
|
||||
];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user