@gitlab/ui
Version:
GitLab UI Components
67 lines (63 loc) • 1.69 kB
JavaScript
import { GlHeatmap } from '../../../../charts';
import { documentedStoriesOf } from '../../../../documentation/documented_stories';
import { toolbox } from '../../../utils/charts/story_config';
import readme from '../area/area.md';
const components = {
GlHeatmap,
};
function generateData() {
let data = [
[ ],
[ ],
[ ],
[ ],
[ ],
[ ],
[ ],
];
data = data.map((item) => [item[1], item[0], item[2] || '-']);
return data;
}
documentedStoriesOf('charts/heatmap', readme)
.add('default', () => ({
data() {
return {
data: generateData(),
xAxisLabels: ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
yAxisLabels: ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun'],
xAxisName: 'Hour',
yAxisName: 'Day',
};
},
components,
template: `<gl-heatmap
:data-series="data"
:x-axis-labels="xAxisLabels"
:y-axis-labels="yAxisLabels"
:x-axis-name="xAxisName"
:y-axis-name="yAxisName"
/>`,
}))
.add('with toolbox', () => ({
data() {
return {
data: generateData(),
xAxisLabels: ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
yAxisLabels: ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun'],
xAxisName: 'Hour',
yAxisName: 'Day',
option: {
toolbox,
},
};
},
components,
template: `<gl-heatmap
:data-series="data"
:x-axis-labels="xAxisLabels"
:y-axis-labels="yAxisLabels"
:x-axis-name="xAxisName"
:y-axis-name="yAxisName"
:options="option"
/>`,
}));