diff --git a/docs/basic/aggr_sliced_diags.md b/docs/basic/aggr_sliced_diags.md index b38c7ca..66298cf 100644 --- a/docs/basic/aggr_sliced_diags.md +++ b/docs/basic/aggr_sliced_diags.md @@ -9,11 +9,11 @@ Perhaps the most well-known representation of data slices are Pie charts: ```js type: 'pie' ``` - - + #### Percentage Charts FTW @@ -22,11 +22,11 @@ Pies have received some [criticism]() for data perception; we are much better at ```js type: 'percentage' ``` - - + #### 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, ``` - - + #### 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 } ``` - - + diff --git a/docs/basic/annotations.md b/docs/basic/annotations.md index 910eb82..92913d0 100644 --- a/docs/basic/annotations.md +++ b/docs/basic/annotations.md @@ -18,7 +18,7 @@ data = { ] } ``` - - + #### Regions @@ -44,7 +44,7 @@ yRegions: [ ], ``` Shown as a greyed-out area between the extremes. - - + ## Tooltips @@ -66,7 +66,7 @@ tooltipOptions: { } ``` - - + 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 } ``` - - + Next up we'll look at perhaps one the more exciting parts in axis charts: **Mixed Charts**. diff --git a/docs/basic/basic_chart.md b/docs/basic/basic_chart.md index 35760fd..392adf2 100644 --- a/docs/basic/basic_chart.md +++ b/docs/basic/basic_chart.md @@ -20,10 +20,10 @@ new frappe.Chart( "#chart", { colors: ['red'] }); ``` - - + 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' ``` - - + ## 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. - - + ## Responsiveness @@ -81,7 +81,7 @@ barOptions: { ``` Try resizing the window to see the effect, with different ratio values. - - + ## More Tweaks @@ -109,7 +109,7 @@ axisOptions: { xAxisMode: 'tick' // default: 'span' }, ``` - - + Just like bar width, we can set the dot size on a line graph, with the [`dotSize`]() property in [`lineOptions`](). @@ -127,7 +127,7 @@ lineOptions: { dotSize: 8 // default: 4 }, ``` - - + 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. diff --git a/docs/basic/heatmap.md b/docs/basic/heatmap.md index 50f286a..8ac90e7 100644 --- a/docs/basic/heatmap.md +++ b/docs/basic/heatmap.md @@ -23,13 +23,13 @@ let chart = new Chart("#heatmap", { data: data, }) ``` - - + - - + (We are working on making the start date and end date implicit and optional). [tip] The chart is rendered by the type `heatmap`: diff --git a/docs/basic/stacked_and_mixed.md b/docs/basic/stacked_and_mixed.md index 2d67471..608d327 100644 --- a/docs/basic/stacked_and_mixed.md +++ b/docs/basic/stacked_and_mixed.md @@ -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. - - + All the `lineOptions` and `barOptions` apply to mix and match datasets as well. - - + Infact, one of the bar options is actually dependent on multiple datasets. @@ -71,7 +71,7 @@ barOptions: { stacked: 1 // default 0, i.e. adjacent } ``` - - + In [Aggregation Charts]() however, instead of being rendered individually, each data point in aggregated accross every dataset. We'll cover those next. diff --git a/docs/basic/trends_regions.md b/docs/basic/trends_regions.md index 9c83291..157c920 100644 --- a/docs/basic/trends_regions.md +++ b/docs/basic/trends_regions.md @@ -6,7 +6,7 @@ lineOptions: { areaFill: 1 // default: 0 }, ``` - - + ## 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. - - + 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 }, ``` - - + Or you could just choose to show only the dots instead. ```js @@ -73,7 +73,7 @@ lineOptions: { hideLine: 1 // default: 0 }, ``` - - + 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 }, ``` - - + ## Combinations Here's a demo using different combinations of the line options. - - + Next up, we'll start to annotate the data in charts. diff --git a/docs/demoBuilder.js b/docs/demoBuilder.js index 781a094..c281b4a 100644 --- a/docs/demoBuilder.js +++ b/docs/demoBuilder.js @@ -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)}` diff --git a/docs/exporting/images.md b/docs/exporting/images.md index 13432ee..0f377e3 100644 --- a/docs/exporting/images.md +++ b/docs/exporting/images.md @@ -6,7 +6,7 @@ Frappe charts are exportable to an SVG format, in which they are natively render chart.export(); ``` - - + diff --git a/docs/index.html b/docs/index.html index b934506..6518b45 100644 --- a/docs/index.html +++ b/docs/index.html @@ -94,8 +94,8 @@ let dbd = new demoBuilder(frappe.Chart); - Vue.component('chart-demo', { - template: '
', + Vue.component('project-demo', { + template: '
', 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); } }); diff --git a/docs/update_state/modify_data.md b/docs/update_state/modify_data.md index 3c72705..7ffc97a 100644 --- a/docs/update_state/modify_data.md +++ b/docs/update_state/modify_data.md @@ -19,7 +19,7 @@ chart.removeDataPoint(); chart.removeDataPoint(index); ``` - - + ### Updating full data @@ -45,7 +45,7 @@ Another way is to simply update the entire data, including annotations, by passi chart.update(data); ``` - - + diff --git a/docs/update_state/navigation.md b/docs/update_state/navigation.md index 6911dec..dc6dec7 100644 --- a/docs/update_state/navigation.md +++ b/docs/update_state/navigation.md @@ -1,6 +1,6 @@ # Navigation - - + - - \ No newline at end of file + \ No newline at end of file