diff options
Diffstat (limited to 'app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue')
-rw-r--r-- | app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue b/app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue new file mode 100644 index 00000000000..3590e2c4632 --- /dev/null +++ b/app/assets/javascripts/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue @@ -0,0 +1,41 @@ +<script> +import { GlAreaChart } from '@gitlab/ui/dist/charts'; +import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue'; +import { CHART_CONTAINER_HEIGHT } from '../constants'; + +export default { + name: 'CiCdAnalyticsAreaChart', + components: { + GlAreaChart, + ResizableChartContainer, + }, + props: { + chartData: { + type: Array, + required: true, + }, + areaChartOptions: { + type: Object, + required: true, + }, + }, + chartContainerHeight: CHART_CONTAINER_HEIGHT, +}; +</script> +<template> + <div class="gl-mt-3"> + <p> + <slot></slot> + </p> + <resizable-chart-container> + <gl-area-chart + slot-scope="{ width }" + :width="width" + :height="$options.chartContainerHeight" + :data="chartData" + :include-legend-avg-max="false" + :option="areaChartOptions" + /> + </resizable-chart-container> + </div> +</template> |