+395
-1000
lines changedFilter options
+395
-1000
lines changed Original file line number Diff line number Diff line change
@@ -47,9 +47,7 @@ The following commands will then be available from the repository root:
47 47
> npm run lint -- --fix // automatically fix linting problems
48 48
> npm run docs // generate documentation (`dist/docs`)
49 49
> npm run docs:dev // generate documentation and watch for changes
50 -
> gulp samples // prepare samples for release (`dist/samples`)
51 50
> gulp package // create an archive with dist files and samples
52 -
> gulp netlify // prepare Netlify artifacts (`dist/www`)
53 51 54 52
## License
55 53
@@ -12,21 +12,40 @@ module.exports = {
12 12
['@vuepress/google-analytics', {
13 13
ga: 'UA-99068522-3'
14 14
}],
15 +
['redirect', {
16 +
redirectors: [
17 +
{base: '/samples', alternative: ['delay']},
18 +
{base: '/', alternative: ['guide/']},
19 +
],
20 +
}],
15 21
],
16 22
themeConfig: {
17 23
repo: 'chartjs/chartjs-plugin-deferred',
18 24
logo: '/favicon.png',
19 25
lastUpdated: 'Last Updated',
20 26
editLinks: true,
21 27
docsDir: 'docs',
28 +
chart: {
29 +
imports: [
30 +
['scripts/register.js'],
31 +
['scripts/defaults.js'],
32 +
['scripts/utils.js', 'Utils'],
33 +
]
34 +
},
22 35
nav: [
23 -
{text: 'Guide', link: '/'},
24 -
{text: 'Samples', link: 'https://chartjs-plugin-deferred.netlify.com/samples/'},
25 -
],
26 -
sidebar: [
27 -
'',
28 -
'installation',
29 -
'options',
36 +
{text: 'Guide', link: '/guide/'},
37 +
{text: 'Samples', link: '/samples/'},
30 38
],
39 +
sidebar: {
40 +
'/guide/': [
41 +
'',
42 +
'installation',
43 +
'options',
44 +
],
45 +
'/samples/': [
46 +
'delay.md',
47 +
'offset.md',
48 +
]
49 +
}
31 50
}
32 51
};
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
2 2
title: Introduction
3 3
---
4 4 5 -
5 +
6 6 7 7
[Chart.js](http://www.chartjs.org/) plugin to defer initial chart updates until the user scrolls and the canvas appears inside the viewport, and thus trigger the initial chart animations when the user is likely to see them.
8 8
@@ -12,7 +12,7 @@ title: Introduction
12 12 13 13
* [Installation](installation.md)
14 14
* [Options](options.md)
15 -
* [Samples](https://chartjs-plugin-deferred.netlify.app/samples/)
15 +
* [Samples](../samples)
16 16 17 17
## Example
18 18 File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
1 +
---
2 +
sidebarDepth: 0
3 +
---
4 + 5 +
# Delay
6 + 7 +
This example demonstrates the impact of the [`delay` option](../guide/options.md#delay)
8 +
when scrolling. The first chart uses the default options (no delay) while the second
9 +
chart is delayed for one second.
10 + 11 +
<div class="head">
12 +
<div>Scroll down</div>
13 +
<div class="icon">⇣</div>
14 +
</div>
15 + 16 +
## No delay (default)
17 + 18 +
```js chart-editor
19 +
Utils.srand(0);
20 + 21 +
const options = /* <block:options> */
22 +
{
23 +
plugins: {
24 +
deferred: {
25 +
// defaults
26 +
},
27 +
},
28 +
}/* </block:options> */;
29 + 30 +
module.exports = {
31 +
config: {
32 +
type: 'bar',
33 +
options: options,
34 +
data: Utils.generate(),
35 +
},
36 +
}
37 +
```
38 + 39 +
## Delay (1 second)
40 + 41 +
```js chart-editor
42 +
Utils.srand(0);
43 + 44 +
const options = /* <block:options> */
45 +
{
46 +
plugins: {
47 +
deferred: {
48 +
delay: 1000,
49 +
},
50 +
},
51 +
}/* </block:options> */;
52 + 53 +
module.exports = {
54 +
config: {
55 +
type: 'bar',
56 +
options: options,
57 +
data: Utils.generate(),
58 +
},
59 +
}
60 +
```
61 + 62 +
<div class="foot">
63 +
Reload the page to reset the sample
64 +
</div>
65 + 66 +
<style lang="styl" scoped>
67 +
.chart-editor
68 +
margin 2rem auto 6rem auto
69 + 70 +
.head
71 +
display flex
72 +
align-items center
73 +
justify-content center
74 +
flex-direction column
75 +
font-weight 800
76 +
font-size 1.5rem
77 +
min-height 80vh
78 +
opacity 0.5
79 + 80 +
.icon
81 +
font-size 1.5em
82 +
opacity 0.5
83 + 84 +
.foot
85 +
text-align center
86 +
font-weight 600
87 +
padding 16px 0
88 +
</style>
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
1 +
---
2 +
sidebarDepth: 0
3 +
---
4 + 5 +
# Offset
6 + 7 +
This example demonstrates the impact of the [`yOffset` option](../guide/options.md#delay)
8 +
when scrolling vertically. The first chart uses the default options (no offset) while the
9 +
second chart uses an offset in pixels and the last one a offset in percent.
10 + 11 +
<div class="head">
12 +
<div>Scroll down</div>
13 +
<div class="icon">⇣</div>
14 +
</div>
15 + 16 +
## No offset (default)
17 + 18 +
```js chart-editor
19 +
Utils.srand(0);
20 + 21 +
const options = /* <block:options> */
22 +
{
23 +
plugins: {
24 +
deferred: {
25 +
// defaults
26 +
},
27 +
},
28 +
}/* </block:options> */;
29 + 30 +
module.exports = {
31 +
config: {
32 +
type: 'bar',
33 +
options: options,
34 +
data: Utils.generate(),
35 +
},
36 +
}
37 +
```
38 + 39 +
## Offset (256 pixels)
40 + 41 +
```js chart-editor
42 +
Utils.srand(0);
43 + 44 +
const options = /* <block:options> */
45 +
{
46 +
plugins: {
47 +
deferred: {
48 +
yOffset: 256
49 +
},
50 +
},
51 +
}/* </block:options> */;
52 + 53 +
module.exports = {
54 +
config: {
55 +
type: 'bar',
56 +
options: options,
57 +
data: Utils.generate(),
58 +
},
59 +
}
60 +
```
61 + 62 +
## Offset (50 percent)
63 + 64 +
```js chart-editor
65 +
Utils.srand(0);
66 + 67 +
const options = /* <block:options> */
68 +
{
69 +
plugins: {
70 +
deferred: {
71 +
yOffset: '50%'
72 +
},
73 +
},
74 +
}/* </block:options> */;
75 + 76 +
module.exports = {
77 +
config: {
78 +
type: 'bar',
79 +
options: options,
80 +
data: Utils.generate(),
81 +
},
82 +
}
83 +
```
84 + 85 +
<div class="foot">
86 +
Reload the page to reset the sample
87 +
</div>
88 + 89 +
<style lang="styl" scoped>
90 +
.chart-editor
91 +
margin 2rem auto 6rem auto
92 + 93 +
.head
94 +
display flex
95 +
align-items center
96 +
justify-content center
97 +
flex-direction column
98 +
font-weight 800
99 +
font-size 1.5rem
100 +
min-height 80vh
101 +
opacity 0.5
102 + 103 +
.icon
104 +
font-size 1.5em
105 +
opacity 0.5
106 + 107 +
.foot
108 +
text-align center
109 +
font-weight 600
110 +
padding 16px 0
111 +
</style>
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
1 +
import {defaults, helpers} from 'chart.js';
2 + 3 +
const {merge} = helpers;
4 + 5 +
merge(defaults.global, {
6 +
legend: {
7 +
display: false
8 +
},
9 +
title: {
10 +
display: false
11 +
},
12 +
tooltips: {
13 +
enabled: false
14 +
}
15 +
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
1 +
import {plugins} from 'chart.js';
2 +
import plugin from '../../dist/chartjs-plugin-deferred.js';
3 + 4 +
plugins.register(plugin);
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
1 +
function fallback(/* values ... */) {
2 +
var ilen = arguments.length;
3 +
var i = 0;
4 +
var v;
5 + 6 +
for (; i < ilen; ++i) {
7 +
v = arguments[i];
8 +
if (v !== undefined) {
9 +
return v;
10 +
}
11 +
}
12 +
}
13 + 14 +
export var COLORS = [
15 +
'#FF3784',
16 +
'#36A2EB',
17 +
'#4BC0C0',
18 +
'#F77825',
19 +
'#9966FF',
20 +
'#00A8C6',
21 +
'#379F7A',
22 +
'#CC2738',
23 +
'#8B628A',
24 +
'#8FBE00',
25 +
'#606060',
26 +
];
27 + 28 +
// Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
29 +
var _seed = Date.now();
30 + 31 +
export function srand(seed) {
32 +
_seed = seed;
33 +
}
34 + 35 +
export function rand(min, max) {
36 +
min = min === undefined ? 0 : min;
37 +
max = max === undefined ? 1 : max;
38 +
_seed = (_seed * 9301 + 49297) % 233280;
39 +
return min + (_seed / 233280) * (max - min);
40 +
}
41 + 42 +
export function numbers(config) {
43 +
var cfg = config || {};
44 +
var min = fallback(cfg.min, 0);
45 +
var max = fallback(cfg.max, 1);
46 +
var from = fallback(cfg.from, []);
47 +
var count = fallback(cfg.count, 8);
48 +
var decimals = fallback(cfg.decimals, 8);
49 +
var continuity = fallback(cfg.continuity, 1);
50 +
var dfactor = Math.pow(10, decimals) || 0;
51 +
var data = [];
52 +
var i, value;
53 + 54 +
for (i = 0; i < count; ++i) {
55 +
value = (from[i] || 0) + rand(min, max);
56 +
if (rand() <= continuity) {
57 +
data.push(Math.round(dfactor * value) / dfactor);
58 +
} else {
59 +
data.push(null);
60 +
}
61 +
}
62 + 63 +
return data;
64 +
}
65 + 66 +
export function color(offset) {
67 +
var count = COLORS.length;
68 +
var index = offset === undefined ? ~~rand(0, count) : offset;
69 +
return COLORS[index % count];
70 +
}
71 + 72 +
export function generate() {
73 +
return {
74 +
labels: [0, 1, 2, 3, 4, 5, 6, 7],
75 +
datasets: [{
76 +
backgroundColor: color(0),
77 +
data: numbers({
78 +
count: 8,
79 +
max: 0,
80 +
min: -100
81 +
}),
82 +
}, {
83 +
backgroundColor: color(1),
84 +
data: numbers({
85 +
count: 8,
86 +
max: 100,
87 +
min: 0
88 +
}),
89 +
}],
90 +
};
91 +
}
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4