Ver código fonte

[docs] add configuration and navigation docs

docs
Prateeksha Singh 7 anos atrás
pai
commit
e8bbd2129f
3 arquivos alterados com 41 adições e 33 exclusões
  1. +10
    -7
      docs/basic/heatmap.md
  2. +16
    -15
      docs/reference/configuration.md
  3. +15
    -11
      docs/update_state/navigation.md

+ 10
- 7
docs/basic/heatmap.md Ver arquivo

@@ -16,6 +16,9 @@ let data = {
end: endDate end: endDate
} }
``` ```
(We are working on making the start date and end date implicit and optional).

The chart is rendered by the type `heatmap`:


```js ```js
let chart = new Chart("#heatmap", { let chart = new Chart("#heatmap", {
@@ -29,6 +32,13 @@ let chart = new Chart("#heatmap", {
}"> }">
</project-demo> </project-demo>


Setting `discreteDomains` to `0` allows for a continous distribution of heat squares (as on GitHub), rather than showing the month-wise separation. A different set of colors can also be specified.

```js
discreteDomains: 0, // default 1
colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
```

<project-demo data="heatmap-data" v-bind:config="{ <project-demo data="heatmap-data" v-bind:config="{
title: 'Monthly Distribution', title: 'Monthly Distribution',
type: 'heatmap', type: 'heatmap',
@@ -57,11 +67,4 @@ let chart = new Chart("#heatmap", {
} }
]"> ]">
</project-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`:

```js

```



+ 16
- 15
docs/reference/configuration.md Ver arquivo

@@ -133,13 +133,13 @@ Set the height of the chart in pixels.
- Values: `span | tick` - Values: `span | tick`
- Default: `span` - Default: `span`


Foo
Display axis points as short ticks or long spanning lines.


#### xIsSeries #### xIsSeries
- Type: `Boolean` - Type: `Boolean`
- Default: `0` - Default: `0`


Foo
The X axis (often the time axis) is usually continuous. That means we can reduce the redundancy of rendering every X label by setting `xIsSeries` to `1` and allowing only a few periodic ones.


--- ---


@@ -147,14 +147,19 @@ Foo
- Type: `Object` - Type: `Object`
- Default: `{}` - Default: `{}`


Customizing options for the format of the label and value displayed on hover tooltips.

#### ####
- Type: `function`
- Default: `{}`

--- ---


### barOptions ### barOptions
- Type: `Object` - Type: `Object`
- Default: `{}` - Default: `{}`


This option controls how width of each `column` is calculated in the chart.
Can be used to set various properties on bar plots.


#### spaceRatio #### spaceRatio
- Type: `Number` - Type: `Number`
@@ -162,17 +167,21 @@ This option controls how width of each `column` is calculated in the chart.
- Max: `2` - Max: `2`
- Default: `0.5` - Default: `0.5`


In order to set the bar width, instead of defining it and the space between the bars independently, we simply define the <b>ratio of the space</b> between bars to the bar width. The chart then adjusts the actual size proportional to the chart container.

#### stacked #### stacked
- Type: `Boolean` - Type: `Boolean`
- Default: `0` - Default: `0`


Renders multiple bar datasets in a stacked configuration, rather than the default adjacent.

--- ---


### lineOptions ### lineOptions
- Type: `Object` - Type: `Object`
- Default: `{}` - Default: `{}`


Foo
Can be used to set various properties on line plots, turn them into Area Charts and so on. Explore in details on the [Trends]() page.


--- ---


@@ -180,20 +189,12 @@ Foo
- Type: `Boolean` - Type: `Boolean`
- Default: `0` - Default: `0`


Foo
Example
Makes the chart interactive with arrow keys and highlights the current active data point.


```javascript
{
dropdownButton: '<span class="fa fa-chevron-down"></span>'
}

```
---


### valuesOverPoints ### valuesOverPoints
- Type: `Boolean` - Type: `Boolean`
- Default: `0` - Default: `0`


Foo

###
To display data values over bars or dots in an axis graph.

+ 15
- 11
docs/update_state/navigation.md Ver arquivo

@@ -1,23 +1,27 @@
# Navigation # Navigation


In order to analyse a data individually, it helps if the chart can activate a given point on the plot. This is where `isNavigable` comes in handy, which makes the chart interactive with arrow keys and highlights the current active data point.

```js
isNavigable: true // default: false
```

Try and traverse this chart with arrow-keys.

<project-demo data="2" v-bind:config="{ <project-demo data="2" v-bind:config="{
type: 'bar', type: 'bar',
height: 140, height: 140,
isNavigable: 1, isNavigable: 1,
colors: ['orange'],
colors: ['light-blue'],
axisOptions: { xAxisMode: 'tick' }, axisOptions: { xAxisMode: 'tick' },
barOptions: { spaceRatio: 0.2 }, barOptions: { spaceRatio: 0.2 },
}"> }">
</project-demo> </project-demo>


Each time a data point is activated, a new `data-select` event is triggered that contains all the label and value information specific to the point This can then be used to reflect in other parts of the webpage.


<project-demo data="2" sideContent="2"
v-bind:config="{
type: 'bar',
height: 140,
isNavigable: 1,
colors: ['grey'],
axisOptions: { xAxisMode: 'tick' },
barOptions: { spaceRatio: 0.2 },
}">
</project-demo>
```js
chart.parent.addEventListener('data-select', (e) => {
update_moon_data(e.index); // e contains index and value of current datapoint
});
```

Carregando…
Cancelar
Salvar