diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue b/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue new file mode 100644 index 00000000000..2552236a073 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue @@ -0,0 +1,45 @@ +<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 }" + v-bind="$attrs" + :width="width" + :height="$options.chartContainerHeight" + :data="chartData" + :include-legend-avg-max="false" + :option="areaChartOptions" + > + <slot slot="tooltip-title" name="tooltip-title"></slot> + <slot slot="tooltip-content" name="tooltip-content"></slot> + </gl-area-chart> + </resizable-chart-container> + </div> +</template> |