jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

[docs] chart-demo -> project-demo component

Browse Source
This commit is contained in:
Prateeksha Singh 2018-06-06 06:33:17 +05:30
parent 1985d88208
commit 0a020a4709
11 changed files with 62 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/basic/aggr_sliced_diags.md
View File

@ -9,11 +9,11 @@ Perhaps the most well-known representation of data slices are Pie charts:
```js
type: 'pie'
```
<chart-demo data="mixed-2" v-bind:config="{
<project-demo data="mixed-2" v-bind:config="{
type: 'pie',
height: 300
}">
</chart-demo>
</project-demo>
#### Percentage Charts FTW
@ -22,11 +22,11 @@ Pies have received some [criticism]() for data perception; we are much better at
```js
type: 'percentage'
```
<chart-demo data="mixed-2" v-bind:config="{
<project-demo data="mixed-2" v-bind:config="{
type: 'percentage',
height: 180,
}">
</chart-demo>
</project-demo>
#### Limiting the slices
When there are too many data values to show visually, it makes sense to bundle up the least of the values as a cumulated data point, rather than showing tiny slices. This can be done by defining the maximum number of slices to be shown.
@ -34,7 +34,7 @@ When there are too many data values to show visually, it makes sense to bundle u
```js
maxSlices: 7,
```
<chart-demo data="mixed-2" v-bind:config="{
<project-demo data="mixed-2" v-bind:config="{
type: 'pie',
height: 300,
maxSlices: 7,
@ -48,7 +48,7 @@ maxSlices: 7,
activeState: 7
}
]">
</chart-demo>
</project-demo>
#### Configuring percentage bars
Some attributes of a percentage bar can be redefined; like its height and the depth of it's shadow.
@ -59,7 +59,7 @@ barOptions: {
depth: 5 // default: 2
}
```
<chart-demo data="mixed-2" v-bind:config="{
<project-demo data="mixed-2" v-bind:config="{
type: 'percentage',
height: 200,
barOptions: {
@ -83,4 +83,4 @@ barOptions: {
activeState: 15
}
]">
</chart-demo>
</project-demo>

16
docs/basic/annotations.md
View File

@ -18,7 +18,7 @@ data = {
]
}
```
<chart-demo data="ymarkers"
<project-demo data="ymarkers"
v-bind:config="{
type: 'line',
height: 180,
@ -27,7 +27,7 @@ data = {
yAxisMode: 'tick'
},
}">
</chart-demo>
</project-demo>
#### Regions
@ -44,7 +44,7 @@ yRegions: [
],
```
Shown as a greyed-out area between the extremes.
<chart-demo data="yregions"
<project-demo data="yregions"
v-bind:config="{
type: 'line',
height: 180,
@ -53,7 +53,7 @@ Shown as a greyed-out area between the extremes.
yAxisMode: 'tick'
},
}">
</chart-demo>
</project-demo>
## Tooltips
@ -66,7 +66,7 @@ tooltipOptions: {
}
```
<chart-demo data="0"
<project-demo data="0"
v-bind:config="{
type: 'line',
height: 150,
@ -79,7 +79,7 @@ tooltipOptions: {
formatTooltipY: d => d + ' pts',
}
}">
</chart-demo>
</project-demo>
For a non-web or static interface, where tooltips are absent, `valuesOverPoints` is a useful tweak to show value information at a glance.
@ -88,7 +88,7 @@ For a non-web or static interface, where tooltips are absent, `valuesOverPoints`
valuesOverPoints: 1 // default: 0
}
```
<chart-demo data="1" v-bind:config="{
<project-demo data="1" v-bind:config="{
type: 'line',
height: 200,
colors:['violet', 'magenta'],
@ -103,6 +103,6 @@ For a non-web or static interface, where tooltips are absent, `valuesOverPoints`
activeState: 'Bar'
}
]">
</chart-demo>
</project-demo>
Next up we'll look at perhaps one the more exciting parts in axis charts: **Mixed Charts**.

24
docs/basic/basic_chart.md
View File

@ -20,10 +20,10 @@ new frappe.Chart( "#chart", {
colors: ['red']
});
```
<chart-demo
<project-demo
data="0"
v-bind:config="{ type: 'bar', height: 140, colors:['red'] }">
</chart-demo>
</project-demo>
And similarly, a `line` chart is data-wise homomorphic to a bar chart:
@ -31,10 +31,10 @@ And similarly, a `line` chart is data-wise homomorphic to a bar chart:
```js
type:'line'
```
<chart-demo
<project-demo
data="0"
v-bind:config="{ type: 'line', height: 140, colors:['red'] }">
</chart-demo>
</project-demo>
## Adding more datasets
@ -51,7 +51,7 @@ data: {
}
```
Notice that this case demonstrates why the `colors` option is an array. We'll see more about it ahead.
<chart-demo data="1" v-bind:config="{
<project-demo data="1" v-bind:config="{
type: 'line',
height: 200,
colors:['green', 'light-green']
@ -65,7 +65,7 @@ Notice that this case demonstrates why the `colors` option is an array. We'll se
activeState: 'Mixed'
}
]">
</chart-demo>
</project-demo>
## Responsiveness
@ -81,7 +81,7 @@ barOptions: {
```
Try resizing the window to see the effect, with different ratio values.
<chart-demo data="2" v-bind:config="{
<project-demo data="2" v-bind:config="{
type: 'bar',
height: 140,
colors: ['orange'],
@ -97,7 +97,7 @@ Try resizing the window to see the effect, with different ratio values.
activeState: 0.2
}
]">
</chart-demo>
</project-demo>
## More Tweaks
@ -109,7 +109,7 @@ axisOptions: {
xAxisMode: 'tick' // default: 'span'
},
```
<chart-demo
<project-demo
data="2"
v-bind:config="{
type: 'bar',
@ -117,7 +117,7 @@ axisOptions: {
colors:['blue'],
axisOptions: { xAxisMode: 'tick' }
}">
</chart-demo>
</project-demo>
Just like bar width, we can set the <b>dot size</b> on a line graph, with the [`dotSize`]() property in [`lineOptions`]().
@ -127,7 +127,7 @@ lineOptions: {
dotSize: 8 // default: 4
},
```
<chart-demo data="2" v-bind:config="{
<project-demo data="2" v-bind:config="{
type: 'line',
height: 140,
colors:['orange'],
@ -143,7 +143,7 @@ lineOptions: {
activeState: 8
}
]">
</chart-demo>
</project-demo>
These were some of the basic toggles to a chart; there are quite a few line options to go with, particularly to create [regions](). We'll look at those in next section.

8
docs/basic/heatmap.md
View File

@ -23,13 +23,13 @@ let chart = new Chart("#heatmap", {
data: data,
})
```
<chart-demo data="heatmap-data" v-bind:config="{
<project-demo data="heatmap-data" v-bind:config="{
title: 'Monthly Distribution',
type: 'heatmap',
}">
</chart-demo>
</project-demo>
<chart-demo data="heatmap-data" v-bind:config="{
<project-demo data="heatmap-data" v-bind:config="{
title: 'Monthly Distribution',
type: 'heatmap',
height: 200,
@ -56,7 +56,7 @@ let chart = new Chart("#heatmap", {
}
}
]">
</chart-demo>
</project-demo>
(We are working on making the start date and end date implicit and optional). [tip]
The chart is rendered by the type `heatmap`:

12
docs/basic/stacked_and_mixed.md
View File

@ -22,16 +22,16 @@ data: {
type: 'axis-mixed'
```
This allows for creation of mixed axis chart. It is recommended to list the bar datasets before the line ones to avoid overlapping.
<chart-demo data="mixed-1" v-bind:config="{
<project-demo data="mixed-1" v-bind:config="{
type: 'axis-mixed',
height: 200,
colors:['light-green', 'green']
}">
</chart-demo>
</project-demo>
All the `lineOptions` and `barOptions` apply to mix and match datasets as well.
<chart-demo data="mixed-2" v-bind:config="{
<project-demo data="mixed-2" v-bind:config="{
type: 'axis-mixed',
height: 240,
colors:['light-green', 'green', 'blue'],
@ -58,7 +58,7 @@ All the `lineOptions` and `barOptions` apply to mix and match datasets as well.
activeState: 4
}
]">
</chart-demo>
</project-demo>
Infact, one of the bar options is actually dependent on multiple datasets.
@ -71,7 +71,7 @@ barOptions: {
stacked: 1 // default 0, i.e. adjacent
}
```
<chart-demo data="bar-composite-data" v-bind:config="{
<project-demo data="bar-composite-data" v-bind:config="{
type: 'bar',
height: 240,
colors:['blue', 'green', 'light-green'],
@ -89,7 +89,7 @@ barOptions: {
activeState: 1
}
]">
</chart-demo>
</project-demo>
In [Aggregation Charts]() however, instead of being rendered individually, each data point in aggregated accross every dataset. We'll cover those next.

24
docs/basic/trends_regions.md
View File

@ -6,7 +6,7 @@ lineOptions: {
areaFill: 1 // default: 0
},
```
<chart-demo data="1"
<project-demo data="1"
v-bind:config="{
type: 'line',
height: 240,
@ -15,7 +15,7 @@ lineOptions: {
areaFill: 1
},
}">
</chart-demo>
</project-demo>
## Plotting Trends
Line charts are great to show trends. One of the reasons they are interesting is because the data involved usually involves a large number of data points. For so many points, we'd really like to keep the plot as less detailed as we can, while also using the already present color to advantage. Let's see how we can change some properties of a default line chart can reduce clutter.
@ -34,7 +34,7 @@ axisOptions: {
},
```
This results only some of the X ticks having a label.
<chart-demo data="trends-data"
<project-demo data="trends-data"
v-bind:config="{
type: 'line',
height: 180,
@ -44,7 +44,7 @@ This results only some of the X ticks having a label.
xIsSeries: 1
}
}">
</chart-demo>
</project-demo>
The line plot in the above plot could still be simplified. For example, to maintain uniformity, we could opt out of showing the dots at all, with `hideDots`.
```js
@ -52,7 +52,7 @@ lineOptions: {
hideDots: 1 // default: 0
},
```
<chart-demo data="trends-data"
<project-demo data="trends-data"
v-bind:config="{
type: 'line',
height: 180,
@ -65,7 +65,7 @@ lineOptions: {
hideDots: 1
},
}">
</chart-demo>
</project-demo>
Or you could just choose to show only the dots instead.
```js
@ -73,7 +73,7 @@ lineOptions: {
hideLine: 1 // default: 0
},
```
<chart-demo data="trends-data"
<project-demo data="trends-data"
v-bind:config="{
type: 'line',
height: 180,
@ -86,7 +86,7 @@ lineOptions: {
hideLine: 1
},
}">
</chart-demo>
</project-demo>
Needless to say, turning both of them on would be too amusing to be of any use :)
A subtle way to show gradation of values is to render a change in color with the magnitude of the values. The property that does this is called `heatline`.
@ -95,7 +95,7 @@ lineOptions: {
heatline: 1 // default: 0
},
```
<chart-demo data="trends-data"
<project-demo data="trends-data"
v-bind:config="{
type: 'line',
height: 180,
@ -109,12 +109,12 @@ lineOptions: {
heatline: 1
},
}">
</chart-demo>
</project-demo>
## Combinations
Here's a demo using different combinations of the line options.
<chart-demo data="trends-data"
<project-demo data="trends-data"
v-bind:config="{
type: 'line',
height: 200,
@ -139,7 +139,7 @@ Here's a demo using different combinations of the line options.
activeState: 'Area'
}
]">
</chart-demo>
</project-demo>
Next up, we'll start to annotate the data in charts.

1
docs/demoBuilder.js
View File

@ -168,7 +168,6 @@ class docSection {
getDemoOptions(demoIndex, options=[], args={}, figure) {
options.forEach(o => {
console.log("o", o);
const btnGroup = $$.create('div', {
inside: this.parent,
className: `btn-group ${scrub(o.name)}`

4
docs/exporting/images.md
View File

@ -6,7 +6,7 @@ Frappe charts are exportable to an SVG format, in which they are natively render
chart.export();
```
<chart-demo data="get-update-data" v-bind:config="{
<project-demo data="get-update-data" v-bind:config="{
title: 'My Area Chart',
type: 'line',
height: 300,
@ -19,4 +19,4 @@ chart.export();
args: []
}
]">
</chart-demo>
</project-demo>

6
docs/index.html
View File

@ -94,8 +94,8 @@
let dbd = new demoBuilder(frappe.Chart);
Vue.component('chart-demo', {
template: '<div class="chart-demo"></div>',
Vue.component('project-demo', {
template: '<div class="project-demo"></div>',
props: ['data', 'config', 'options', 'actions', 'sideContent'],
mounted: function() {
let config = this.config;
@ -111,8 +111,6 @@
sideContent: this.sideContent,
};
console.log(this.sideContent);
dbd.makeSection(this.$el, demoConfig);
}
});

8
docs/update_state/modify_data.md
View File

@ -19,7 +19,7 @@ chart.removeDataPoint();
chart.removeDataPoint(index);
```
<chart-demo data="get-update-data" v-bind:config="{
<project-demo data="get-update-data" v-bind:config="{
type: 'line',
height: 200
}"
@ -35,7 +35,7 @@ chart.removeDataPoint(index);
args: []
}
]">
</chart-demo>
</project-demo>
### Updating full data
@ -45,7 +45,7 @@ Another way is to simply update the entire data, including annotations, by passi
chart.update(data);
```
<chart-demo data="get-update-data" v-bind:config="{
<project-demo data="get-update-data" v-bind:config="{
type: 'line',
height: 200
}"
@ -56,5 +56,5 @@ chart.update(data);
args: [getUpdateData()]
}
]">
</chart-demo>
</project-demo>

8
docs/update_state/navigation.md
View File

@ -1,6 +1,6 @@
# Navigation
<chart-demo data="2" v-bind:config="{
<project-demo data="2" v-bind:config="{
type: 'bar',
height: 140,
isNavigable: 1,
@ -8,10 +8,10 @@
axisOptions: { xAxisMode: 'tick' },
barOptions: { spaceRatio: 0.2 },
}">
</chart-demo>
</project-demo>
<chart-demo data="2" sideContent="2"
<project-demo data="2" sideContent="2"
v-bind:config="{
type: 'bar',
height: 140,
@ -20,4 +20,4 @@
axisOptions: { xAxisMode: 'tick' },
barOptions: { spaceRatio: 0.2 },
}">
</chart-demo>
</project-demo>