anoopmb
/
charts
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 18 Wiki Activity
Browse Source

[docs] add intro chart topics

docs
Prateeksha Singh 7 years ago
parent
52d904da7d
commit
c740ad9a85
12 changed files with 355 additions and 305 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +28
    -4
      docs/_sidebar.md
  2. +4
    -1
      docs/assets/css/index.css
  3. +0
    -279
      docs/assets/js/docsConfig.js
  4. +62
    -0
      docs/basic/basic_chart.md
  5. +14
    -0
      docs/basic/multiple_datasets.md
  6. +9
    -0
      docs/basic/trends_regions.md
  7. +105
    -4
      docs/demoRegistry.js
  8. +2
    -2
      docs/getting_started/quick_start.md
  9. +7
    -4
      docs/index.html
  10. +13
    -3
      docs/index.js
  11. +111
    -7
      docs/index.min.js
  12. +0
    -1
      docs/test.md

+ 28
- 4
docs/_sidebar.md View File

@@ -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]()

+ 4
- 1
docs/assets/css/index.css View File

@@ -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,


+ 0
- 279
docs/assets/js/docsConfig.js View File

@@ -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
- 0
docs/basic/basic_chart.md View 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
- 0
docs/basic/multiple_datasets.md View 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
- 0
docs/basic/trends_regions.md View 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>

+ 105
- 4
docs/demoRegistry.js View File

@@ -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"
}
],
},

// '': {},
};

docs/chap1/test1.md → docs/getting_started/quick_start.md View File

@@ -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",

+ 7
- 4
docs/index.html View File

@@ -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>


+ 13
- 3
docs/index.js View File

@@ -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");
});
}
]


+ 111
- 7
docs/index.min.js View File

@@ -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");
});
}]
};


+ 0
- 1
docs/test.md View File

@@ -1 +0,0 @@
* Change

Write Preview
Loading…
Cancel
Save