[docs] add intro chart topics
This commit is contained in:
Prateeksha Singh
parent
52d904da7d
commit
c740ad9a85
@ -1,10 +1,34 @@
|
||||
* Getting started
|
||||
* [Quick start](getting_started/quick_start.md)
|
||||
|
||||
* [Quick start](chap1/test1.md)
|
||||
* Axis charts
|
||||
* [A basic chart](basic/basic_chart.md)
|
||||
* [Adding more datasets](basic/multiple_datasets.md)
|
||||
* [Trends and Region Charts](basic/trends_regions.md)
|
||||
|
||||
* Customization
|
||||
* Aggregation Charts
|
||||
* []()
|
||||
* []()
|
||||
|
||||
* [Configuration](test2.md)
|
||||
* Update data
|
||||
* [Single Points]()
|
||||
* [Entire Data]()
|
||||
|
||||
* Events
|
||||
* [Navigation]()
|
||||
* [Event hooks]()
|
||||
|
||||
* [Changelog](test.md)
|
||||
* Heatmap
|
||||
* []()
|
||||
* []()
|
||||
|
||||
* Exporting
|
||||
* []()
|
||||
|
||||
* API
|
||||
* [Configuration]()
|
||||
* [Methods]()
|
||||
|
||||
* [ChangeLog]()
|
||||
* [Wrappers]()
|
||||
* [Contributing]()
|
||||
|
||||
@ -3,7 +3,6 @@ body {
|
||||
/* max-width: 720px;
|
||||
margin: auto; */
|
||||
|
||||
font-family: "proxima-nova", sans-serif;
|
||||
font-size: 15px;
|
||||
color: #6c7680;
|
||||
text-rendering: optimizeLegibility !important;
|
||||
@ -12,6 +11,10 @@ body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
#home-page {
|
||||
font-family: "proxima-nova", sans-serif;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
|
||||
@ -1,279 +0,0 @@
|
||||
import { sampleData, trendsData } from './data';
|
||||
|
||||
export const docSections = [
|
||||
{
|
||||
name: "start",
|
||||
contentBlocks: [
|
||||
// Intro
|
||||
{
|
||||
type: "text",
|
||||
content: `A chart is generally a 2D rendition of data. For example,
|
||||
for a set of values across items, the data could look like:`
|
||||
},
|
||||
{
|
||||
type: "code",
|
||||
content: ` data = {
|
||||
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
datasets: [
|
||||
{ values: [18, 40, 30, 35, 8, 52, 17, -4] }
|
||||
]
|
||||
}`
|
||||
},
|
||||
|
||||
// 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", {
|
||||
data: data,
|
||||
type: 'bar',
|
||||
height: 140,
|
||||
colors: ['red']
|
||||
});`
|
||||
},
|
||||
{
|
||||
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: ` ...
|
||||
type: 'line',
|
||||
...`
|
||||
},
|
||||
{
|
||||
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
|
||||
<b>span</b>ning lines, but can also be short <b>tick</b>s:`
|
||||
},
|
||||
{
|
||||
type: "code",
|
||||
content: ` ...
|
||||
axisOptions: {
|
||||
xAxisMode: 'tick' // default: 'span'
|
||||
},
|
||||
...`
|
||||
},
|
||||
{
|
||||
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>
|
||||
between bars to the bar width.`
|
||||
},
|
||||
{
|
||||
type: "code",
|
||||
content: ` ...
|
||||
barOptions: {
|
||||
spaceRatio: 0.2 // default: 1
|
||||
},
|
||||
...`
|
||||
},
|
||||
{
|
||||
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: ` ...
|
||||
lineOptions: {
|
||||
dotRadius: 8 // default: 4
|
||||
},
|
||||
...`
|
||||
},
|
||||
{
|
||||
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: ` ...
|
||||
data: {
|
||||
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] }
|
||||
]
|
||||
},
|
||||
...`
|
||||
},
|
||||
{
|
||||
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: ` ...
|
||||
data: {
|
||||
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] }
|
||||
]
|
||||
},
|
||||
...`
|
||||
},
|
||||
{
|
||||
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"
|
||||
}
|
||||
],
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
62
docs/basic/basic_chart.md
Normal file
62
docs/basic/basic_chart.md
Normal file
@ -0,0 +1,62 @@
|
||||
## What is it
|
||||
|
||||
A chart is generally a 2D rendition of data. For example, for a set of values across items, the data could look like:
|
||||
```js
|
||||
|
||||
data = {
|
||||
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
datasets: [
|
||||
{ values: [18, 40, 30, 35, 8, 52, 17, -4] }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Plug that in with a type `bar`, a color and height,
|
||||
|
||||
```js
|
||||
new frappe.Chart( "#chart", {
|
||||
data: data,
|
||||
type: 'bar',
|
||||
height: 140,
|
||||
colors: ['red']
|
||||
});
|
||||
```
|
||||
<div class="demo" id="bar-basic-1"></div>
|
||||
|
||||
And similarly, a `line` chart:
|
||||
|
||||
```js
|
||||
type:'line'
|
||||
```
|
||||
<div class="demo" id="line-basic-1"></div>
|
||||
|
||||
## Tweaks
|
||||
|
||||
Axes lines are configurable. By default they are long `span`ning lines, but can also be short `tick`s:`
|
||||
|
||||
```js
|
||||
axisOptions: {
|
||||
xAxisMode: 'tick' // default: 'span'
|
||||
},
|
||||
```
|
||||
<div class="demo" id="bar-axis-tick"></div>
|
||||
|
||||
The bar <b>width</b> can be set by defining the <b>ratio of the space</b> between bars to the bar width.
|
||||
|
||||
```js
|
||||
barOptions: {
|
||||
spaceRatio: 0.2 // default: 1
|
||||
},
|
||||
```
|
||||
<div class="demo" id="bar-barwidth"></div>
|
||||
|
||||
So can the <b>dot size</b> on a line graph, with the `dotSize` property in `lineOptions`.
|
||||
|
||||
```js
|
||||
lineOptions: {
|
||||
dotSize: 8 // default: 4
|
||||
},
|
||||
```
|
||||
<div class="demo" id="line-dotsize"></div>
|
||||
|
||||
Next up, we'll discover how multiple datasets can behave in different charts.
|
||||
14
docs/basic/multiple_datasets.md
Normal file
14
docs/basic/multiple_datasets.md
Normal file
@ -0,0 +1,14 @@
|
||||
## Multiple datasets
|
||||
|
||||
A chart can have multiple datasets. In an axis chart, every dataset is represented individually.
|
||||
|
||||
```js
|
||||
data: {
|
||||
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] }
|
||||
]
|
||||
},
|
||||
```
|
||||
<div class="demo" id="multi-dataset-line-bar"></div>
|
||||
9
docs/basic/trends_regions.md
Normal file
9
docs/basic/trends_regions.md
Normal file
@ -0,0 +1,9 @@
|
||||
`lineOptions` have a bunch of other properties too. Region charts are ...
|
||||
|
||||
```js
|
||||
lineOptions: {
|
||||
dotSize: 8 // default: 4
|
||||
},
|
||||
```
|
||||
|
||||
<div class="demo" id="line-trends-region-toggle"></div>
|
||||
@ -1,18 +1,37 @@
|
||||
import { sampleData, trendsData } from './assets/js/data';
|
||||
|
||||
export const demoRegistry = {
|
||||
demo1: {
|
||||
type: "demo",
|
||||
'bar-basic-1': {
|
||||
config: {
|
||||
data: sampleData[0],
|
||||
type: 'bar',
|
||||
height: 140,
|
||||
colors: ['red'],
|
||||
}
|
||||
},
|
||||
|
||||
'line-basic-1': {
|
||||
config: {
|
||||
data: sampleData[0],
|
||||
type: 'line',
|
||||
height: 140,
|
||||
colors: ['red'],
|
||||
}
|
||||
},
|
||||
|
||||
'bar-axis-tick': {
|
||||
config: {
|
||||
data: sampleData[2],
|
||||
type: 'bar',
|
||||
height: 140,
|
||||
colors: ['blue'],
|
||||
axisOptions: {
|
||||
xAxisMode: "tick",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
demo2: {
|
||||
type: "demo",
|
||||
'bar-barwidth': {
|
||||
config: {
|
||||
data: sampleData[3],
|
||||
type: 'bar',
|
||||
@ -41,4 +60,86 @@ export const demoRegistry = {
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
'line-dotsize': {
|
||||
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"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
'line-trends-region-toggle': {
|
||||
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"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
'multi-dataset-line-bar': {
|
||||
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"
|
||||
}
|
||||
],
|
||||
},
|
||||
|
||||
// '': {},
|
||||
};
|
||||
@ -1,4 +1,4 @@
|
||||
#### Installation
|
||||
## Installation
|
||||
* Install via [`npm`](https://www.npmjs.com/get-npm):
|
||||
|
||||
```console
|
||||
@ -18,7 +18,7 @@
|
||||
<script src="https://unpkg.com/frappe-charts@1.1.0/dist/frappe-charts.min.iife.js"></script>
|
||||
```
|
||||
|
||||
#### Usage
|
||||
## Usage
|
||||
```js
|
||||
const data = {
|
||||
labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
|
||||
@ -9,14 +9,15 @@
|
||||
|
||||
<meta name="keywords" content="open source javascript js charts library svg zero-dependency
|
||||
interactive data visualization beautiful drag resize">
|
||||
<meta name="description" content="A simple, responsive, modern charts library for the web.">
|
||||
<meta name="description" content="A simple, responsive, modern charts library for the web.">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="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="vuestyle.css" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
|
||||
|
||||
<script src="assets/js/highlight.pack.js"></script>
|
||||
@ -29,7 +30,7 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="home-page">
|
||||
<div id="home-page" class="hide">
|
||||
|
||||
<header>
|
||||
<h1>Frappe Charts</h1>
|
||||
@ -80,9 +81,11 @@
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<script src="index.min.js"></script>
|
||||
<script>
|
||||
window.$docsify.subMaxLevel = 2;
|
||||
</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>
|
||||
|
||||
@ -9,7 +9,9 @@ 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) {
|
||||
if(document.querySelectorAll('#line-composite-1').length
|
||||
&& !document.querySelector('#home-page').classList.contains("hide")) {
|
||||
|
||||
let lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
|
||||
let barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
|
||||
|
||||
@ -32,12 +34,20 @@ window.$docsify = {
|
||||
name: 'frappe-charts',
|
||||
// repo: 'https://github.com/frappe/charts',
|
||||
loadSidebar: true,
|
||||
subMaxLevel: 2,
|
||||
executeScript: true,
|
||||
plugins: [
|
||||
function(hook, vm) {
|
||||
hook.doneEach(function() {
|
||||
dbd.makeSection(document.querySelector('.demo'), demoRegistry.demo2);
|
||||
document.querySelector("main").classList.add("hide");
|
||||
let demos = document.querySelectorAll('.demo')
|
||||
|
||||
for (var i = 0; i < demos.length; ++i) {
|
||||
let el = demos[i];
|
||||
let id = el.getAttribute("id");
|
||||
dbd.makeSection(el, demoRegistry[id]);
|
||||
}
|
||||
|
||||
// document.querySelector("main").classList.add("hide");
|
||||
});
|
||||
}
|
||||
]
|
||||
|
||||
118
docs/index.min.js
vendored
118
docs/index.min.js
vendored
@ -5406,8 +5406,7 @@ var sampleData = {
|
||||
};
|
||||
|
||||
var demoRegistry = {
|
||||
demo1: {
|
||||
type: "demo",
|
||||
'bar-basic-1': {
|
||||
config: {
|
||||
data: sampleData[0],
|
||||
type: 'bar',
|
||||
@ -5416,8 +5415,28 @@ var demoRegistry = {
|
||||
}
|
||||
},
|
||||
|
||||
demo2: {
|
||||
type: "demo",
|
||||
'line-basic-1': {
|
||||
config: {
|
||||
data: sampleData[0],
|
||||
type: 'line',
|
||||
height: 140,
|
||||
colors: ['red']
|
||||
}
|
||||
},
|
||||
|
||||
'bar-axis-tick': {
|
||||
config: {
|
||||
data: sampleData[2],
|
||||
type: 'bar',
|
||||
height: 140,
|
||||
colors: ['blue'],
|
||||
axisOptions: {
|
||||
xAxisMode: "tick"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
'bar-barwidth': {
|
||||
config: {
|
||||
data: sampleData[3],
|
||||
type: 'bar',
|
||||
@ -5443,7 +5462,83 @@ var demoRegistry = {
|
||||
},
|
||||
activeState: "0.2"
|
||||
}]
|
||||
},
|
||||
|
||||
'line-dotsize': {
|
||||
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"
|
||||
}]
|
||||
},
|
||||
|
||||
'line-trends-region-toggle': {
|
||||
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"
|
||||
}]
|
||||
},
|
||||
|
||||
'multi-dataset-line-bar': {
|
||||
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 lineComposite = {
|
||||
@ -5685,7 +5780,8 @@ var demoSections = [{
|
||||
var dbd = new docsBuilder(Chart);
|
||||
var currentElement = document.querySelector('header');
|
||||
|
||||
if (document.querySelectorAll('#line-composite-1').length) {
|
||||
if (document.querySelectorAll('#line-composite-1').length && !document.querySelector('#home-page').classList.contains("hide")) {
|
||||
|
||||
var lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
|
||||
var barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
|
||||
|
||||
@ -5706,11 +5802,19 @@ window.$docsify = {
|
||||
name: 'frappe-charts',
|
||||
// repo: 'https://github.com/frappe/charts',
|
||||
loadSidebar: true,
|
||||
subMaxLevel: 2,
|
||||
executeScript: true,
|
||||
plugins: [function (hook, vm) {
|
||||
hook.doneEach(function () {
|
||||
dbd.makeSection(document.querySelector('.demo'), demoRegistry.demo2);
|
||||
document.querySelector("main").classList.add("hide");
|
||||
var demos = document.querySelectorAll('.demo');
|
||||
|
||||
for (var i = 0; i < demos.length; ++i) {
|
||||
var el = demos[i];
|
||||
var id = el.getAttribute("id");
|
||||
dbd.makeSection(el, demoRegistry[id]);
|
||||
}
|
||||
|
||||
// document.querySelector("main").classList.add("hide");
|
||||
});
|
||||
}]
|
||||
};
|
||||
|
||||
@ -1 +0,0 @@
|
||||
* Change
|
||||
Loading…
x
Reference in New Issue
Block a user