jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

[docs] use Vue component demos in markdown itself

Browse Source
This commit is contained in:
Prateeksha Singh 2018-05-27 19:47:33 +05:30
parent 0e7e91d428
commit 3fe262c621
9 changed files with 3176 additions and 409 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
docs/assets/js/data.js
View File

@ -277,33 +277,3 @@ export const heatmapData = {
start: start,
end: end
};
export const sampleData = {
0: {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [
{ values: [18, 40, 30, 35, 8, 52, 17, -4] }
]
},
1: {
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] }
]
},
2: {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"],
datasets: [
{ values: [300, 250, 720, 560, 370, 610, 690, 410,
370, 480, 620, 260, 170, 510, 630, 710] }
]
},
3: {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
datasets: [
{ values: [300, 250, 720, 560, 370, 610, 690, 410,
370, 480, 620, 260, 170, 510, 630, 710, 560, 370, 610, 260, 170] }
]
}
}

79
docs/basic/basic_chart.md
View File

@ -20,14 +20,22 @@ new frappe.Chart( "#chart", {
colors: ['red']
});
```
<div class="demo" id="bar-basic-1"></div>
<chart-demo
data="0"
v-bind:config="{ type: 'bar', height: 140, colors:['red'] }">
</chart-demo>
And similarly, a `line` chart is data-wise homomorphic to a bar chart:
```js
type:'line'
```
<div class="demo" id="line-basic-1"></div>
<chart-demo
data="0"
v-bind:config="{ type: 'line', height: 140, colors:['red'] }">
</chart-demo>
## Adding more datasets
@ -42,7 +50,22 @@ data: {
]
}
```
<div class="demo" id="multi-dataset-line-bar"></div>
<chart-demo data="1" v-bind:config="{
type: 'line',
height: 200,
colors:['green', 'light-green']
}"
v-bind:options="[
{
name: 'type',
path: ['type'],
type: 'string',
states: { 'Line': 'line', 'Bar': 'bar', },
activeState: 'Mixed'
}
]">
</chart-demo>
## Responsiveness
@ -56,7 +79,25 @@ barOptions: {
},
```
Try resizing the window to see the effect, with different ratio values.
<div class="demo" id="bar-barwidth"></div>
<chart-demo data="2" v-bind:config="{
type: 'bar',
height: 140,
colors: ['orange'],
axisOptions: { xAxisMode: 'tick' },
barOptions: { spaceRatio: 0.2 },
}"
v-bind:options="[
{
name: 'barOptions',
path: ['barOptions', 'spaceRatio'],
type: 'number',
numberOptions: { min: 0.1, max: 1.9, step: 0.1 },
activeState: 0.2
}
]">
</chart-demo>
## More Tweaks
@ -67,7 +108,16 @@ axisOptions: {
xAxisMode: 'tick' // default: 'span'
},
```
<div class="demo" id="bar-axis-tick"></div>
<chart-demo
data="2"
v-bind:config="{
type: 'bar',
height: 140,
colors:['blue'],
axisOptions: { xAxisMode: 'tick' }
}">
</chart-demo>
Just like bar width, we can set the <b>dot size</b> on a line graph, with the [`dotSize`]() property in [`lineOptions`]().
@ -76,6 +126,23 @@ lineOptions: {
dotSize: 8 // default: 4
},
```
<div class="demo" id="line-dotsize"></div>
<chart-demo data="2" v-bind:config="{
type: 'line',
height: 140,
colors:['orange'],
axisOptions: { xAxisMode: 'tick' },
lineOptions: { dotSize: 8 }
}"
v-bind:options="[
{
name: 'lineOptions',
path: ['lineOptions', 'dotSize'],
type: 'number',
numberOptions: { min: 3, max: 10, step: 1 },
activeState: 8
}
]">
</chart-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.

29
docs/data.js Normal file
View File

@ -0,0 +1,29 @@
const sampleData = {
"0": {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [
{ values: [18, 40, 30, 35, 8, 52, 17, -4] }
]
},
"1": {
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] }
]
},
"2": {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"],
datasets: [
{ values: [300, 250, 720, 560, 370, 610, 690, 410,
370, 480, 620, 260, 170, 510, 630, 710] }
]
},
"3": {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
datasets: [
{ values: [300, 250, 720, 560, 370, 610, 690, 410,
370, 480, 620, 260, 170, 510, 630, 710, 560, 370, 610, 260, 170] }
]
}
}

217
docs/demoBuilder.js Normal file
View File

@ -0,0 +1,217 @@
function $(expr, con) {
return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
}
$.create = (tag, o) => {
var element = document.createElement(tag);
for (var i in o) {
var val = o[i];
if (i === "inside") {
$(val).appendChild(element);
}
else if (i === "around") {
var ref = $(val);
ref.parentNode.insertBefore(element, ref);
element.appendChild(ref);
} else if (i === "onClick" ) {
element.addEventListener('click', val);
} else if (i === "onInput" ) {
element.addEventListener('input', function(e) {
val(element.value);
});
} else if (i === "styles") {
if(typeof val === "object") {
Object.keys(val).map(prop => {
element.style[prop] = val[prop];
});
}
} else if (i in element ) {
element[i] = val;
}
else {
element.setAttribute(i, val);
}
}
return element;
};
function toTitleCase(str) {
return str.replace(/\w*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}
class demoBuilder {
constructor(LIB_OBJ) {
this.LIB_OBJ = LIB_OBJ;
}
makeSection(parent, sys) {
return new docSection(this.LIB_OBJ, parent, sys);
}
}
class docSection {
constructor(LIB_OBJ, parent, sys) {
this.LIB_OBJ = LIB_OBJ;
this.parent = parent;
this.sys = sys;
this.blockMap = {};
this.demos = [];
this.make();
}
make() {
// const section = document.querySelector(this.parent);
let s = this.sys;
if(s.title) {
$.create('h6', { inside: this.parent, innerHTML: s.title });
}
if(s.contentBlocks) {
s.contentBlocks.forEach((blockConf, index) => {
this.blockMap[index] = this.getBlock(blockConf);
});
} else {
// TODO:
this.blockMap['test'] = this.getDemo(s);
}
}
getBlock(blockConf) {
let fnName = 'get' + toTitleCase(blockConf.type);
if(this[fnName]) {
return this[fnName](blockConf);
} else {
throw new Error(`Unknown section block type '${blockConf.type}'.`);
}
}
getText(blockConf) {
return $.create('p', {
inside: this.parent,
className: 'new-context',
innerHTML: blockConf.content
});
}
getCode(blockConf) {
let pre = $.create('pre', { inside: this.parent });
let lang = blockConf.lang || 'javascript';
let code = $.create('code', {
inside: pre,
className: `hljs ${lang}`,
innerHTML: blockConf.content
});
}
getCustom(blockConf) {
this.parent.innerHTML += blockConf.html;
}
getDemo(blockConf) {
let bc = blockConf;
let args = bc.config;
let figure, row;
if(!bc.sideContent) {
figure = $.create('figure', { inside: this.parent });
} else {
row = $.create('div', {
inside: this.parent,
className: "row",
innerHTML: `<div class="col-sm-8"></div>
<div class="col-sm-4"></div>`,
});
figure = $.create('figure', { inside: row.querySelector('.col-sm-8') });
row.querySelector('.col-sm-4').innerHTML += bc.sideContent;
}
let libObj = new this.LIB_OBJ(figure, args);
let demoIndex = this.demos.length;
this.demos.push(libObj);
if(bc.postSetup) {
bc.postSetup(this.demos[demoIndex], figure, row);
}
this.getDemoOptions(demoIndex, bc.options, args, figure);
this.getDemoActions(demoIndex, bc.actions, args);
}
getDemoOptions(demoIndex, options=[], args={}, figure) {
options.forEach(o => {
const btnGroup = $.create('div', {
inside: this.parent,
className: `btn-group ${o.name}`
});
const mapKeys = o.mapKeys;
if(o.type === "number") {
let numOpts = o.numberOptions;
const inputGroup = $.create('input', {
inside: btnGroup,
className: `form-control`,
type: "range",
min: numOpts.min,
max: numOpts.max,
step: numOpts.step,
value: o.activeState ? o.activeState : 0,
// (max - min)/2
onInput: (value) => {
args[o.path[0]][o.path[1]] = value;
this.demos[demoIndex] = new this.LIB_OBJ(figure, args);
}
});
} else if(["map", "string"].includes(o.type)) {
args[o.path[0]] = {};
Object.keys(o.states).forEach(key => {
let state = o.states[key];
let activeClass = key === o.activeState ? 'active' : '';
let button = $.create('button', {
inside: btnGroup,
className: `btn btn-sm btn-secondary ${activeClass}`,
innerHTML: key,
onClick: (e) => {
// map
if(o.type === "map") {
mapKeys.forEach((attr, i) => {
args[o.path[0]][attr] = state[i];
})
} else {
// boolean, string, number, object
args[o.path[0]] = state;
}
this.demos[demoIndex] = new this.LIB_OBJ(figure, args);
}
});
if(activeClass) { button.click(); }
});
}
});
}
getDemoActions(demoIndex, actions=[], args={}) {
actions.forEach(o => {
let args = o.args || [];
$.create('button', {
inside: this.parent,
className: `btn btn-action btn-sm btn-secondary`,
innerHTML: o.name,
onClick: () => {this.demos[demoIndex][o.fn](...args);}
});
});
}
}

141
docs/demoRegistry.js
View File

@ -1,141 +0,0 @@
import { sampleData, trendsData } from './assets/js/data';
export const demoRegistry = {
'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",
},
},
},
'bar-barwidth': {
config: {
data: sampleData[3],
type: 'bar',
height: 140,
colors: ['orange'],
axisOptions: {
xAxisMode: "tick"
},
barOptions: {
spaceRatio: 0.2
},
},
options: [
{
name: "barOptions",
path: ["barOptions", "spaceRatio"],
type: "number",
numberOptions: {
min: 0.1,
max: 1.9,
step: 0.1,
},
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", "dotSize"],
type: "number",
numberOptions: {
min: 3,
max: 10,
step: 1
},
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"
}
],
},
// '': {},
};

2740
docs/frappe-charts.min.iife.js Normal file
View File

File diff suppressed because it is too large Load Diff

45
docs/index.html
View File

@ -80,13 +80,48 @@
<div id="app"></div>
<!-- SCRIPTS -->
<!-- Home page script -->
<script src="index.min.js"></script>
<!-- Docs section script -->
<script src="data.js"></script>
<script src="demoBuilder.js"></script>
<script src="frappe-charts.min.iife.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script>
window.$docsify.subMaxLevel = 2;
window.$docsify.search = {
placeholder: 'Search Docs ...',
noData: 'No Results',
depth: 2
let dbd = new demoBuilder(frappe.Chart);
Vue.component('chart-demo', {
template: '<div class="chart-demo"></div>',
props: ['data', 'config', 'options', 'actions'],
mounted: function() {
let config = this.config;
config.data = sampleData[this.data];
var demoConfig = {
config: config,
options: this.options,
actions: this.actions
};
dbd.makeSection(this.$el, demoConfig);
}
});
new Vue({ el: '#app' });
window.$docsify = {
name: 'frappe-charts',
// repo: 'https://github.com/frappe/charts',
loadSidebar: true,
subMaxLevel: 2,
executeScript: true,
search: {
placeholder: 'Search Docs ...',
noData: 'No Results',
depth: 2
}
};
</script>

28
docs/index.js
View File

@ -29,31 +29,3 @@ if(document.querySelectorAll('#line-composite-1').length
dbd.makeSection(sectionEl, sectionConf);
});
}
window.$docsify = {
name: 'frappe-charts',
// repo: 'https://github.com/frappe/charts',
loadSidebar: true,
subMaxLevel: 2,
executeScript: true,
plugins: [
function(hook, vm) {
hook.doneEach(function() {
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");
});
}
]
}
document.querySelector("#docs-link").addEventListener('click', () => {
document.querySelector("#home-page").classList.add("hide");
document.querySelector("main").classList.remove("hide");
});

276
docs/index.min.js vendored
View File

@ -136,6 +136,10 @@ $.create = function (tag, o) {
element.appendChild(ref);
} else if (i === "onClick") {
element.addEventListener('click', val);
} else if (i === "onInput") {
element.addEventListener('input', function (e) {
val(element.value);
});
} else if (i === "styles") {
if ((typeof val === "undefined" ? "undefined" : _typeof(val)) === "object") {
Object.keys(val).map(function (prop) {
@ -397,43 +401,54 @@ var docSection = function () {
});
var mapKeys = o.mapKeys;
if (o.type === "map") {
args[o.path[0]] = {};
}
if (o.type === "number") {
var numOpts = o.numberOptions;
var inputGroup = $.create('input', {
inside: btnGroup
// className: `form-control`,
// innerHTML: `<input type="text" class="form-control" placeholder="Username"
// aria-label="Username" aria-describedby="basic-addon1">`
});
Object.keys(o.states).forEach(function (key) {
var state = o.states[key];
var activeClass = key === o.activeState ? 'active' : '';
var button = $.create('button', {
var inputGroup = $.create('input', {
inside: btnGroup,
className: 'btn btn-sm btn-secondary ' + activeClass,
innerHTML: key,
onClick: function onClick(e) {
// map
if (o.type === "map") {
mapKeys.forEach(function (attr, i) {
args[o.path[0]][attr] = state[i];
});
} else {
// boolean, string, number, object
args[o.path[0]] = state;
}
className: 'form-control',
type: "range",
min: numOpts.min,
max: numOpts.max,
step: numOpts.step,
value: o.activeState ? o.activeState : 0,
// (max - min)/2
onInput: function onInput(value) {
args[o.path[0]][o.path[1]] = value;
_this2.demos[demoIndex] = new _this2.LIB_OBJ(figure, args);
}
});
} else if (["map", "string"].includes(o.type)) {
args[o.path[0]] = {};
if (activeClass) {
button.click();
}
});
Object.keys(o.states).forEach(function (key) {
var state = o.states[key];
var activeClass = key === o.activeState ? 'active' : '';
var button = $.create('button', {
inside: btnGroup,
className: 'btn btn-sm btn-secondary ' + activeClass,
innerHTML: key,
onClick: function onClick(e) {
// map
if (o.type === "map") {
mapKeys.forEach(function (attr, i) {
args[o.path[0]][attr] = state[i];
});
} else {
// boolean, string, number, object
args[o.path[0]] = state;
}
_this2.demos[demoIndex] = new _this2.LIB_OBJ(figure, args);
}
});
if (activeClass) {
button.click();
}
});
}
});
}
}, {
@ -631,6 +646,10 @@ $$1.create = function (tag, o) {
element.appendChild(ref);
} else if (i === "onClick") {
element.addEventListener('click', val);
} else if (i === "onInput") {
element.addEventListener('input', function (e) {
val(element.value);
});
} else if (i === "styles") {
if ((typeof val === "undefined" ? "undefined" : _typeof$2(val)) === "object") {
Object.keys(val).map(function (prop) {
@ -739,7 +758,7 @@ var AXIS_DATASET_CHART_TYPES$1 = ['line', 'bar'];
var AXIS_LEGEND_BAR_SIZE$1 = 100;
var BAR_CHART_SPACE_RATIO$1 = 1;
var MIN_BAR_PERCENT_HEIGHT$1 = 0.01;
var MIN_BAR_PERCENT_HEIGHT$1 = 0.02;
var LINE_CHART_DOT_SIZE$1 = 4;
var DOT_OVERLAY_SIZE_INCR$1 = 4;
@ -5386,161 +5405,6 @@ var heatmapData = {
end: end
};
var sampleData = {
0: {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [{ values: [18, 40, 30, 35, 8, 52, 17, -4] }]
},
1: {
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] }]
},
2: {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"],
datasets: [{ values: [300, 250, 720, 560, 370, 610, 690, 410, 370, 480, 620, 260, 170, 510, 630, 710] }]
},
3: {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
datasets: [{ values: [300, 250, 720, 560, 370, 610, 690, 410, 370, 480, 620, 260, 170, 510, 630, 710, 560, 370, 610, 260, 170] }]
}
};
var demoRegistry = {
'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"
}
}
},
'bar-barwidth': {
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"
}]
},
'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 = {
config: {
title: "Fireball/Bolide Events - Yearly (reported)",
@ -5803,20 +5667,34 @@ window.$docsify = {
// repo: 'https://github.com/frappe/charts',
loadSidebar: true,
subMaxLevel: 2,
executeScript: true,
plugins: [function (hook, vm) {
hook.doneEach(function () {
var demos = document.querySelectorAll('.demo');
executeScript: true
// plugins: [
// function(hook, vm) {
// hook.doneEach(function() {
// let 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]);
}
// 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");
});
}]
// });
// // hook.ready(function() {
// // let scripts = document.querySelectorAll('script');
// // for (var i = 0; i < scripts.length; ++i) {
// // let el = scripts[i];
// // let id = el.getAttribute("id");
// // let demoDiv = $.create('div', {className: `${id}`});
// // insertAfter(demoDiv, el);
// // console.log(demoStore);
// // dbd.makeSection(demoDiv, demoStore[id]);
// // }
// // });
// }
// ]
};
document.querySelector("#docs-link").addEventListener('click', function () {