@gitlab/ui 36.5.0 → 36.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +28 -0
- package/dist/components/base/drawer/drawer.documentation.js +2 -5
- package/dist/components/base/form/form_radio_group/form_radio_group.documentation.js +2 -48
- package/dist/components/base/form/form_radio_group/form_radio_group.js +22 -2
- package/dist/components/base/pagination/pagination.js +1 -1
- package/dist/components/charts/heatmap/heatmap.documentation.js +0 -3
- package/dist/components/charts/series_label/series_label.documentation.js +2 -5
- package/dist/index.css +2 -2
- package/dist/index.css.map +1 -1
- package/dist/utility_classes.css +1 -1
- package/dist/utility_classes.css.map +1 -1
- package/documentation/documented_stories.js +4 -0
- package/package.json +12 -12
- package/scss_to_js/scss_variables.js +1 -0
- package/scss_to_js/scss_variables.json +5 -0
- package/src/components/base/breadcrumb/breadcrumb.stories.js +8 -8
- package/src/components/base/drawer/drawer.documentation.js +0 -2
- package/src/components/base/drawer/drawer.md +0 -6
- package/src/components/base/drawer/drawer.stories.js +66 -34
- package/src/components/base/form/form_radio_group/form_radio_group.documentation.js +0 -48
- package/src/components/base/form/form_radio_group/form_radio_group.md +0 -2
- package/src/components/base/form/form_radio_group/form_radio_group.stories.js +50 -29
- package/src/components/base/form/form_radio_group/form_radio_group.vue +22 -2
- package/src/components/base/paginated_list/__snapshots__/paginated_list.spec.js.snap +10 -10
- package/src/components/base/pagination/pagination.stories.js +5 -1
- package/src/components/base/pagination/pagination.vue +1 -1
- package/src/components/charts/heatmap/heatmap.documentation.js +0 -2
- package/src/components/charts/heatmap/heatmap.stories.js +59 -42
- package/src/components/charts/series_label/series_label.documentation.js +0 -2
- package/src/components/charts/series_label/series_label.md +0 -2
- package/src/components/charts/series_label/series_label.stories.js +62 -59
- package/src/scss/utilities.scss +40 -0
- package/src/scss/utility-mixins/border.scss +21 -0
- package/src/scss/variables.scss +2 -0
- package/dist/components/base/drawer/examples/drawer.basic.example.js +0 -58
- package/dist/components/base/drawer/examples/index.js +0 -13
- package/dist/components/base/form/form_radio_group/examples/form_radio_group.options_array.example.js +0 -59
- package/dist/components/base/form/form_radio_group/examples/form_radio_group.slots.example.js +0 -48
- package/dist/components/base/form/form_radio_group/examples/index.js +0 -17
- package/dist/components/charts/heatmap/examples/heatmap.custom_options.example.js +0 -79
- package/dist/components/charts/heatmap/examples/heatmap.hourly.example.js +0 -70
- package/dist/components/charts/heatmap/examples/heatmap.responsive.example.js +0 -70
- package/dist/components/charts/heatmap/examples/heatmap.totals.example.js +0 -62
- package/dist/components/charts/heatmap/examples/index.js +0 -31
- package/dist/components/charts/series_label/examples/index.js +0 -13
- package/dist/components/charts/series_label/examples/series_label.basic.example.js +0 -38
- package/src/components/base/drawer/examples/drawer.basic.example.vue +0 -29
- package/src/components/base/drawer/examples/index.js +0 -15
- package/src/components/base/form/form_radio_group/examples/form_radio_group.options_array.example.vue +0 -27
- package/src/components/base/form/form_radio_group/examples/form_radio_group.slots.example.vue +0 -21
- package/src/components/base/form/form_radio_group/examples/index.js +0 -20
- package/src/components/charts/heatmap/examples/heatmap.custom_options.example.vue +0 -70
- package/src/components/charts/heatmap/examples/heatmap.hourly.example.vue +0 -62
- package/src/components/charts/heatmap/examples/heatmap.responsive.example.vue +0 -63
- package/src/components/charts/heatmap/examples/heatmap.totals.example.vue +0 -38
- package/src/components/charts/heatmap/examples/index.js +0 -36
- package/src/components/charts/series_label/examples/index.js +0 -15
- package/src/components/charts/series_label/examples/series_label.basic.example.vue +0 -3
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
2
|
-
|
|
3
|
-
var script = {
|
|
4
|
-
data() {
|
|
5
|
-
return {
|
|
6
|
-
series: (() => {
|
|
7
|
-
const hours = 24;
|
|
8
|
-
const days = 7;
|
|
9
|
-
const res = [];
|
|
10
|
-
|
|
11
|
-
for (let x = 0; x < hours; x += 1) {
|
|
12
|
-
for (let y = 0; y < days; y += 1) {
|
|
13
|
-
let val = Math.random() * 10;
|
|
14
|
-
|
|
15
|
-
if (Math.random() > 0.7) {
|
|
16
|
-
val = '-';
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
res.push([x, y, val]);
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
return res;
|
|
24
|
-
})(),
|
|
25
|
-
xAxisLabels: ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
|
|
26
|
-
yAxisLabels: ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun'],
|
|
27
|
-
xAxisName: 'Hour',
|
|
28
|
-
yAxisName: 'Day'
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
/* script */
|
|
35
|
-
const __vue_script__ = script;
|
|
36
|
-
|
|
37
|
-
/* template */
|
|
38
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-heatmap',{attrs:{"data-series":_vm.series,"x-axis-labels":_vm.xAxisLabels,"y-axis-labels":_vm.yAxisLabels,"x-axis-name":_vm.xAxisName,"y-axis-name":_vm.yAxisName}})};
|
|
39
|
-
var __vue_staticRenderFns__ = [];
|
|
40
|
-
|
|
41
|
-
/* style */
|
|
42
|
-
const __vue_inject_styles__ = undefined;
|
|
43
|
-
/* scoped */
|
|
44
|
-
const __vue_scope_id__ = undefined;
|
|
45
|
-
/* module identifier */
|
|
46
|
-
const __vue_module_identifier__ = undefined;
|
|
47
|
-
/* functional template */
|
|
48
|
-
const __vue_is_functional_template__ = false;
|
|
49
|
-
/* style inject */
|
|
50
|
-
|
|
51
|
-
/* style inject SSR */
|
|
52
|
-
|
|
53
|
-
/* style inject shadow dom */
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
const __vue_component__ = __vue_normalize__(
|
|
58
|
-
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
|
59
|
-
__vue_inject_styles__,
|
|
60
|
-
__vue_script__,
|
|
61
|
-
__vue_scope_id__,
|
|
62
|
-
__vue_is_functional_template__,
|
|
63
|
-
__vue_module_identifier__,
|
|
64
|
-
false,
|
|
65
|
-
undefined,
|
|
66
|
-
undefined,
|
|
67
|
-
undefined
|
|
68
|
-
);
|
|
69
|
-
|
|
70
|
-
export default __vue_component__;
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
2
|
-
|
|
3
|
-
var script = {
|
|
4
|
-
data() {
|
|
5
|
-
return {
|
|
6
|
-
series: (() => {
|
|
7
|
-
const hours = 24;
|
|
8
|
-
const days = 7;
|
|
9
|
-
const res = [];
|
|
10
|
-
|
|
11
|
-
for (let x = 0; x < hours; x += 1) {
|
|
12
|
-
for (let y = 0; y < days; y += 1) {
|
|
13
|
-
let val = Math.random() * 10;
|
|
14
|
-
|
|
15
|
-
if (Math.random() > 0.7) {
|
|
16
|
-
val = '-';
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
res.push([x, y, val]);
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
return res;
|
|
24
|
-
})(),
|
|
25
|
-
xAxisLabels: ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
|
|
26
|
-
yAxisLabels: ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun'],
|
|
27
|
-
xAxisName: 'Hour',
|
|
28
|
-
yAxisName: 'Day'
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
/* script */
|
|
35
|
-
const __vue_script__ = script;
|
|
36
|
-
|
|
37
|
-
/* template */
|
|
38
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-heatmap',{attrs:{"data-series":_vm.series,"x-axis-labels":_vm.xAxisLabels,"y-axis-labels":_vm.yAxisLabels,"x-axis-name":_vm.xAxisName,"y-axis-name":_vm.yAxisName,"responsive":false}})};
|
|
39
|
-
var __vue_staticRenderFns__ = [];
|
|
40
|
-
|
|
41
|
-
/* style */
|
|
42
|
-
const __vue_inject_styles__ = undefined;
|
|
43
|
-
/* scoped */
|
|
44
|
-
const __vue_scope_id__ = undefined;
|
|
45
|
-
/* module identifier */
|
|
46
|
-
const __vue_module_identifier__ = undefined;
|
|
47
|
-
/* functional template */
|
|
48
|
-
const __vue_is_functional_template__ = false;
|
|
49
|
-
/* style inject */
|
|
50
|
-
|
|
51
|
-
/* style inject SSR */
|
|
52
|
-
|
|
53
|
-
/* style inject shadow dom */
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
const __vue_component__ = __vue_normalize__(
|
|
58
|
-
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
|
59
|
-
__vue_inject_styles__,
|
|
60
|
-
__vue_script__,
|
|
61
|
-
__vue_scope_id__,
|
|
62
|
-
__vue_is_functional_template__,
|
|
63
|
-
__vue_module_identifier__,
|
|
64
|
-
false,
|
|
65
|
-
undefined,
|
|
66
|
-
undefined,
|
|
67
|
-
undefined
|
|
68
|
-
);
|
|
69
|
-
|
|
70
|
-
export default __vue_component__;
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
2
|
-
|
|
3
|
-
var script = {
|
|
4
|
-
data() {
|
|
5
|
-
return {
|
|
6
|
-
series: (() => {
|
|
7
|
-
const hours = 12;
|
|
8
|
-
const days = 20;
|
|
9
|
-
const res = [];
|
|
10
|
-
|
|
11
|
-
for (let x = 0; x < hours; x += 1) {
|
|
12
|
-
for (let y = 0; y < days; y += 1) {
|
|
13
|
-
const val = Math.ceil(Math.random() * (y % 12) - 3);
|
|
14
|
-
res.push([x, y, val]);
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
return res;
|
|
19
|
-
})(),
|
|
20
|
-
xAxisLabels: ['7am', '8am', '9am', '10am', '11am', '12pm', '1pm', '2pm', '3pm', '4pm', '5pm', '6pm']
|
|
21
|
-
};
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
/* script */
|
|
27
|
-
const __vue_script__ = script;
|
|
28
|
-
|
|
29
|
-
/* template */
|
|
30
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-heatmap',{attrs:{"title":"Pageviews per hour","data-series":_vm.series,"x-axis-labels":_vm.xAxisLabels}})};
|
|
31
|
-
var __vue_staticRenderFns__ = [];
|
|
32
|
-
|
|
33
|
-
/* style */
|
|
34
|
-
const __vue_inject_styles__ = undefined;
|
|
35
|
-
/* scoped */
|
|
36
|
-
const __vue_scope_id__ = undefined;
|
|
37
|
-
/* module identifier */
|
|
38
|
-
const __vue_module_identifier__ = undefined;
|
|
39
|
-
/* functional template */
|
|
40
|
-
const __vue_is_functional_template__ = false;
|
|
41
|
-
/* style inject */
|
|
42
|
-
|
|
43
|
-
/* style inject SSR */
|
|
44
|
-
|
|
45
|
-
/* style inject shadow dom */
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
const __vue_component__ = __vue_normalize__(
|
|
50
|
-
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
|
51
|
-
__vue_inject_styles__,
|
|
52
|
-
__vue_script__,
|
|
53
|
-
__vue_scope_id__,
|
|
54
|
-
__vue_is_functional_template__,
|
|
55
|
-
__vue_module_identifier__,
|
|
56
|
-
false,
|
|
57
|
-
undefined,
|
|
58
|
-
undefined,
|
|
59
|
-
undefined
|
|
60
|
-
);
|
|
61
|
-
|
|
62
|
-
export default __vue_component__;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import CustomOptionsExample from './heatmap.custom_options.example';
|
|
2
|
-
import HourlyExample from './heatmap.hourly.example';
|
|
3
|
-
import CustomResponsiveExample from './heatmap.responsive.example';
|
|
4
|
-
import TotalsExample from './heatmap.totals.example';
|
|
5
|
-
|
|
6
|
-
var index = [{
|
|
7
|
-
name: 'Calendar',
|
|
8
|
-
items: [{
|
|
9
|
-
id: 'heatmap-hourly',
|
|
10
|
-
name: 'Hourly breakdown',
|
|
11
|
-
description: 'HourlyExample',
|
|
12
|
-
component: HourlyExample
|
|
13
|
-
}, {
|
|
14
|
-
id: 'heatmap-totals',
|
|
15
|
-
name: 'Histograms over time',
|
|
16
|
-
description: 'TotalsExample',
|
|
17
|
-
component: TotalsExample
|
|
18
|
-
}, {
|
|
19
|
-
id: 'heatmap-custom-options',
|
|
20
|
-
name: 'Heatmap with no background',
|
|
21
|
-
description: 'CustomOptionsExample',
|
|
22
|
-
component: CustomOptionsExample
|
|
23
|
-
}, {
|
|
24
|
-
id: 'heatmap-responsive',
|
|
25
|
-
name: 'Heatmap which is non mobile responsive',
|
|
26
|
-
description: 'CustomResponsiveExample',
|
|
27
|
-
component: CustomResponsiveExample
|
|
28
|
-
}]
|
|
29
|
-
}];
|
|
30
|
-
|
|
31
|
-
export default index;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import SeriesLabelBasicExample from './series_label.basic.example';
|
|
2
|
-
|
|
3
|
-
var index = [{
|
|
4
|
-
name: 'Basic',
|
|
5
|
-
items: [{
|
|
6
|
-
id: 'series-label-basic',
|
|
7
|
-
name: 'Basic',
|
|
8
|
-
description: 'Basic Series Label',
|
|
9
|
-
component: SeriesLabelBasicExample
|
|
10
|
-
}]
|
|
11
|
-
}];
|
|
12
|
-
|
|
13
|
-
export default index;
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
2
|
-
|
|
3
|
-
/* script */
|
|
4
|
-
|
|
5
|
-
/* template */
|
|
6
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-chart-series-label',{attrs:{"color":"#1F78D1"}},[_vm._v("Series Name")])};
|
|
7
|
-
var __vue_staticRenderFns__ = [];
|
|
8
|
-
|
|
9
|
-
/* style */
|
|
10
|
-
const __vue_inject_styles__ = undefined;
|
|
11
|
-
/* scoped */
|
|
12
|
-
const __vue_scope_id__ = undefined;
|
|
13
|
-
/* module identifier */
|
|
14
|
-
const __vue_module_identifier__ = undefined;
|
|
15
|
-
/* functional template */
|
|
16
|
-
const __vue_is_functional_template__ = false;
|
|
17
|
-
/* style inject */
|
|
18
|
-
|
|
19
|
-
/* style inject SSR */
|
|
20
|
-
|
|
21
|
-
/* style inject shadow dom */
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
const __vue_component__ = __vue_normalize__(
|
|
26
|
-
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
|
27
|
-
__vue_inject_styles__,
|
|
28
|
-
{},
|
|
29
|
-
__vue_scope_id__,
|
|
30
|
-
__vue_is_functional_template__,
|
|
31
|
-
__vue_module_identifier__,
|
|
32
|
-
false,
|
|
33
|
-
undefined,
|
|
34
|
-
undefined,
|
|
35
|
-
undefined
|
|
36
|
-
);
|
|
37
|
-
|
|
38
|
-
export default __vue_component__;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
export default {
|
|
3
|
-
data() {
|
|
4
|
-
return {
|
|
5
|
-
drawerOpened: false,
|
|
6
|
-
};
|
|
7
|
-
},
|
|
8
|
-
methods: {
|
|
9
|
-
toggle() {
|
|
10
|
-
this.drawerOpened = !this.drawerOpened;
|
|
11
|
-
},
|
|
12
|
-
close() {
|
|
13
|
-
this.drawerOpened = false;
|
|
14
|
-
},
|
|
15
|
-
},
|
|
16
|
-
};
|
|
17
|
-
</script>
|
|
18
|
-
|
|
19
|
-
<template>
|
|
20
|
-
<div>
|
|
21
|
-
<gl-button @click="toggle">Toggle drawer</gl-button>
|
|
22
|
-
<gl-drawer :open="drawerOpened" @close="close">
|
|
23
|
-
<template #header>Your Title</template>
|
|
24
|
-
<div>
|
|
25
|
-
<p>First Body Item</p>
|
|
26
|
-
</div>
|
|
27
|
-
</gl-drawer>
|
|
28
|
-
</div>
|
|
29
|
-
</template>
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
export default {
|
|
3
|
-
data() {
|
|
4
|
-
return {
|
|
5
|
-
selected: 'String option',
|
|
6
|
-
options: [
|
|
7
|
-
'String option',
|
|
8
|
-
{ text: 'Object option', value: 'object' },
|
|
9
|
-
{ html: '<i>HTML</i> option', value: 'html' },
|
|
10
|
-
{ text: 'Disabled option', value: 'disabledOption', disabled: true },
|
|
11
|
-
],
|
|
12
|
-
};
|
|
13
|
-
},
|
|
14
|
-
};
|
|
15
|
-
</script>
|
|
16
|
-
|
|
17
|
-
<template>
|
|
18
|
-
<!--
|
|
19
|
-
options: [
|
|
20
|
-
'String option',
|
|
21
|
-
{ text: 'Object option', value: 'object' },
|
|
22
|
-
{ html: '<i>HTML</i> option', value: 'html' },
|
|
23
|
-
{ text: 'Disabled option', value: 'disabledOption', disabled: true },
|
|
24
|
-
],
|
|
25
|
-
-->
|
|
26
|
-
<gl-form-radio-group v-model="selected" :options="options" />
|
|
27
|
-
</template>
|
package/src/components/base/form/form_radio_group/examples/form_radio_group.slots.example.vue
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
export default {
|
|
3
|
-
data() {
|
|
4
|
-
return {
|
|
5
|
-
selected: 'one',
|
|
6
|
-
};
|
|
7
|
-
},
|
|
8
|
-
};
|
|
9
|
-
</script>
|
|
10
|
-
|
|
11
|
-
<template>
|
|
12
|
-
<gl-form-radio-group v-model="selected">
|
|
13
|
-
<gl-form-radio value="one">One</gl-form-radio>
|
|
14
|
-
<gl-form-radio value="two">
|
|
15
|
-
Two
|
|
16
|
-
<template #help>Help text</template>
|
|
17
|
-
</gl-form-radio>
|
|
18
|
-
<gl-form-radio value="three">Three</gl-form-radio>
|
|
19
|
-
<gl-form-radio value="four" disabled>Disabled option</gl-form-radio>
|
|
20
|
-
</gl-form-radio-group>
|
|
21
|
-
</template>
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import FormRadioGroupOptionsArray from './form_radio_group.options_array.example.vue';
|
|
2
|
-
import FormRadioGroupSlots from './form_radio_group.slots.example.vue';
|
|
3
|
-
|
|
4
|
-
export default [
|
|
5
|
-
{
|
|
6
|
-
name: 'Radio Group',
|
|
7
|
-
items: [
|
|
8
|
-
{
|
|
9
|
-
id: 'form-radio-group-slots',
|
|
10
|
-
name: 'Form Radio Group using Slots',
|
|
11
|
-
component: FormRadioGroupSlots,
|
|
12
|
-
},
|
|
13
|
-
{
|
|
14
|
-
id: 'form-radio-group-options-array',
|
|
15
|
-
name: 'Form Radio Group using Options Array',
|
|
16
|
-
component: FormRadioGroupOptionsArray,
|
|
17
|
-
},
|
|
18
|
-
],
|
|
19
|
-
},
|
|
20
|
-
];
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
export default {
|
|
3
|
-
data() {
|
|
4
|
-
return {
|
|
5
|
-
series: (() => {
|
|
6
|
-
const hours = 24;
|
|
7
|
-
const days = 7;
|
|
8
|
-
const res = [];
|
|
9
|
-
for (let x = 0; x < hours; x += 1) {
|
|
10
|
-
for (let y = 0; y < days; y += 1) {
|
|
11
|
-
let val = Math.random() * 10;
|
|
12
|
-
if (Math.random() > 0.5) {
|
|
13
|
-
val = '-';
|
|
14
|
-
}
|
|
15
|
-
res.push([x, y, val]);
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
return res;
|
|
19
|
-
})(),
|
|
20
|
-
xAxisLabels: [
|
|
21
|
-
'12',
|
|
22
|
-
'1',
|
|
23
|
-
'2',
|
|
24
|
-
'3',
|
|
25
|
-
'4',
|
|
26
|
-
'5',
|
|
27
|
-
'6',
|
|
28
|
-
'7',
|
|
29
|
-
'8',
|
|
30
|
-
'9',
|
|
31
|
-
'10',
|
|
32
|
-
'11',
|
|
33
|
-
'12',
|
|
34
|
-
'1',
|
|
35
|
-
'2',
|
|
36
|
-
'3',
|
|
37
|
-
'4',
|
|
38
|
-
'5',
|
|
39
|
-
'6',
|
|
40
|
-
'7',
|
|
41
|
-
'8',
|
|
42
|
-
'9',
|
|
43
|
-
'10',
|
|
44
|
-
'11',
|
|
45
|
-
],
|
|
46
|
-
yAxisLabels: ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun'],
|
|
47
|
-
};
|
|
48
|
-
},
|
|
49
|
-
};
|
|
50
|
-
</script>
|
|
51
|
-
|
|
52
|
-
<template>
|
|
53
|
-
<gl-heatmap
|
|
54
|
-
:data-series="series"
|
|
55
|
-
:x-axis-labels="xAxisLabels"
|
|
56
|
-
:y-axis-labels="yAxisLabels"
|
|
57
|
-
:options="{
|
|
58
|
-
xAxis: {
|
|
59
|
-
splitArea: {
|
|
60
|
-
show: false,
|
|
61
|
-
},
|
|
62
|
-
},
|
|
63
|
-
yAxis: {
|
|
64
|
-
splitArea: {
|
|
65
|
-
show: false,
|
|
66
|
-
},
|
|
67
|
-
},
|
|
68
|
-
}"
|
|
69
|
-
/>
|
|
70
|
-
</template>
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
export default {
|
|
3
|
-
data() {
|
|
4
|
-
return {
|
|
5
|
-
series: (() => {
|
|
6
|
-
const hours = 24;
|
|
7
|
-
const days = 7;
|
|
8
|
-
const res = [];
|
|
9
|
-
for (let x = 0; x < hours; x += 1) {
|
|
10
|
-
for (let y = 0; y < days; y += 1) {
|
|
11
|
-
let val = Math.random() * 10;
|
|
12
|
-
if (Math.random() > 0.7) {
|
|
13
|
-
val = '-';
|
|
14
|
-
}
|
|
15
|
-
res.push([x, y, val]);
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
return res;
|
|
19
|
-
})(),
|
|
20
|
-
xAxisLabels: [
|
|
21
|
-
'12',
|
|
22
|
-
'1',
|
|
23
|
-
'2',
|
|
24
|
-
'3',
|
|
25
|
-
'4',
|
|
26
|
-
'5',
|
|
27
|
-
'6',
|
|
28
|
-
'7',
|
|
29
|
-
'8',
|
|
30
|
-
'9',
|
|
31
|
-
'10',
|
|
32
|
-
'11',
|
|
33
|
-
'12',
|
|
34
|
-
'1',
|
|
35
|
-
'2',
|
|
36
|
-
'3',
|
|
37
|
-
'4',
|
|
38
|
-
'5',
|
|
39
|
-
'6',
|
|
40
|
-
'7',
|
|
41
|
-
'8',
|
|
42
|
-
'9',
|
|
43
|
-
'10',
|
|
44
|
-
'11',
|
|
45
|
-
],
|
|
46
|
-
yAxisLabels: ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun'],
|
|
47
|
-
xAxisName: 'Hour',
|
|
48
|
-
yAxisName: 'Day',
|
|
49
|
-
};
|
|
50
|
-
},
|
|
51
|
-
};
|
|
52
|
-
</script>
|
|
53
|
-
|
|
54
|
-
<template>
|
|
55
|
-
<gl-heatmap
|
|
56
|
-
:data-series="series"
|
|
57
|
-
:x-axis-labels="xAxisLabels"
|
|
58
|
-
:y-axis-labels="yAxisLabels"
|
|
59
|
-
:x-axis-name="xAxisName"
|
|
60
|
-
:y-axis-name="yAxisName"
|
|
61
|
-
/>
|
|
62
|
-
</template>
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
export default {
|
|
3
|
-
data() {
|
|
4
|
-
return {
|
|
5
|
-
series: (() => {
|
|
6
|
-
const hours = 24;
|
|
7
|
-
const days = 7;
|
|
8
|
-
const res = [];
|
|
9
|
-
for (let x = 0; x < hours; x += 1) {
|
|
10
|
-
for (let y = 0; y < days; y += 1) {
|
|
11
|
-
let val = Math.random() * 10;
|
|
12
|
-
if (Math.random() > 0.7) {
|
|
13
|
-
val = '-';
|
|
14
|
-
}
|
|
15
|
-
res.push([x, y, val]);
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
return res;
|
|
19
|
-
})(),
|
|
20
|
-
xAxisLabels: [
|
|
21
|
-
'12',
|
|
22
|
-
'1',
|
|
23
|
-
'2',
|
|
24
|
-
'3',
|
|
25
|
-
'4',
|
|
26
|
-
'5',
|
|
27
|
-
'6',
|
|
28
|
-
'7',
|
|
29
|
-
'8',
|
|
30
|
-
'9',
|
|
31
|
-
'10',
|
|
32
|
-
'11',
|
|
33
|
-
'12',
|
|
34
|
-
'1',
|
|
35
|
-
'2',
|
|
36
|
-
'3',
|
|
37
|
-
'4',
|
|
38
|
-
'5',
|
|
39
|
-
'6',
|
|
40
|
-
'7',
|
|
41
|
-
'8',
|
|
42
|
-
'9',
|
|
43
|
-
'10',
|
|
44
|
-
'11',
|
|
45
|
-
],
|
|
46
|
-
yAxisLabels: ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun'],
|
|
47
|
-
xAxisName: 'Hour',
|
|
48
|
-
yAxisName: 'Day',
|
|
49
|
-
};
|
|
50
|
-
},
|
|
51
|
-
};
|
|
52
|
-
</script>
|
|
53
|
-
|
|
54
|
-
<template>
|
|
55
|
-
<gl-heatmap
|
|
56
|
-
:data-series="series"
|
|
57
|
-
:x-axis-labels="xAxisLabels"
|
|
58
|
-
:y-axis-labels="yAxisLabels"
|
|
59
|
-
:x-axis-name="xAxisName"
|
|
60
|
-
:y-axis-name="yAxisName"
|
|
61
|
-
:responsive="false"
|
|
62
|
-
/>
|
|
63
|
-
</template>
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
export default {
|
|
3
|
-
data() {
|
|
4
|
-
return {
|
|
5
|
-
series: (() => {
|
|
6
|
-
const hours = 12;
|
|
7
|
-
const days = 20;
|
|
8
|
-
const res = [];
|
|
9
|
-
for (let x = 0; x < hours; x += 1) {
|
|
10
|
-
for (let y = 0; y < days; y += 1) {
|
|
11
|
-
const val = Math.ceil(Math.random() * (y % 12) - 3);
|
|
12
|
-
res.push([x, y, val]);
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
return res;
|
|
16
|
-
})(),
|
|
17
|
-
xAxisLabels: [
|
|
18
|
-
'7am',
|
|
19
|
-
'8am',
|
|
20
|
-
'9am',
|
|
21
|
-
'10am',
|
|
22
|
-
'11am',
|
|
23
|
-
'12pm',
|
|
24
|
-
'1pm',
|
|
25
|
-
'2pm',
|
|
26
|
-
'3pm',
|
|
27
|
-
'4pm',
|
|
28
|
-
'5pm',
|
|
29
|
-
'6pm',
|
|
30
|
-
],
|
|
31
|
-
};
|
|
32
|
-
},
|
|
33
|
-
};
|
|
34
|
-
</script>
|
|
35
|
-
|
|
36
|
-
<template>
|
|
37
|
-
<gl-heatmap title="Pageviews per hour" :data-series="series" :x-axis-labels="xAxisLabels" />
|
|
38
|
-
</template>
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import CustomOptionsExample from './heatmap.custom_options.example.vue';
|
|
2
|
-
import HourlyExample from './heatmap.hourly.example.vue';
|
|
3
|
-
import CustomResponsiveExample from './heatmap.responsive.example.vue';
|
|
4
|
-
import TotalsExample from './heatmap.totals.example.vue';
|
|
5
|
-
|
|
6
|
-
export default [
|
|
7
|
-
{
|
|
8
|
-
name: 'Calendar',
|
|
9
|
-
items: [
|
|
10
|
-
{
|
|
11
|
-
id: 'heatmap-hourly',
|
|
12
|
-
name: 'Hourly breakdown',
|
|
13
|
-
description: 'HourlyExample',
|
|
14
|
-
component: HourlyExample,
|
|
15
|
-
},
|
|
16
|
-
{
|
|
17
|
-
id: 'heatmap-totals',
|
|
18
|
-
name: 'Histograms over time',
|
|
19
|
-
description: 'TotalsExample',
|
|
20
|
-
component: TotalsExample,
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
id: 'heatmap-custom-options',
|
|
24
|
-
name: 'Heatmap with no background',
|
|
25
|
-
description: 'CustomOptionsExample',
|
|
26
|
-
component: CustomOptionsExample,
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
id: 'heatmap-responsive',
|
|
30
|
-
name: 'Heatmap which is non mobile responsive',
|
|
31
|
-
description: 'CustomResponsiveExample',
|
|
32
|
-
component: CustomResponsiveExample,
|
|
33
|
-
},
|
|
34
|
-
],
|
|
35
|
-
},
|
|
36
|
-
];
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import SeriesLabelBasicExample from './series_label.basic.example.vue';
|
|
2
|
-
|
|
3
|
-
export default [
|
|
4
|
-
{
|
|
5
|
-
name: 'Basic',
|
|
6
|
-
items: [
|
|
7
|
-
{
|
|
8
|
-
id: 'series-label-basic',
|
|
9
|
-
name: 'Basic',
|
|
10
|
-
description: 'Basic Series Label',
|
|
11
|
-
component: SeriesLabelBasicExample,
|
|
12
|
-
},
|
|
13
|
-
],
|
|
14
|
-
},
|
|
15
|
-
];
|