Skip to content

G
gitlab-ce
Commit 9c907069 authored by Ezekiel Kigbo's avatar Ezekiel Kigbo
Browse files
Options

Minor reviewer feedback 

Make shouldDisplayTasksByTypeChart computed prop

Update i18n namespace for translations

Rename from CycleAnalyticsCharts -> CycleAnalytics
and also marks additional text for translation
that was missed

Remove extra div element

Move formattedDate function to shared utils

Minor update gitlab.pot
parent f2ff804f
Hide whitespace changes
Inline Side-by-side
Showing with 67 additions and 72 deletions
ee/app/assets/javascripts/analytics/cycle_analytics/components/base.vue
View file @ 9c907069
......@@ -100,6 +100,9 @@ export default {
shouldDisplayDurationChart() {
return !this.isLoadingDurationChart && !this.isLoading;
},
shouldDisplayTasksByTypeChart() {
return !this.isLoading && !this.isLoadingTasksByTypeChart;
},
dateRange: {
get() {
......@@ -327,17 +330,13 @@ export default {
</template>
<template v-if="featureFlags.hasTasksByTypeChart">
<div class="tasks-by-type-chart">
<gl-loading-icon
v-if="isLoading || isLoadingTasksByTypeChart"
size="md"
class="my-4 py-4"
/>
<div v-else>
<div v-if="shouldDisplayTasksByTypeChart">
<tasks-by-type-chart
:chart-data="tasksByTypeChartData"
:filters="selectedTasksByTypeFilters"
/>
</div>
<gl-loading-icon v-else size="md" class="my-4 py-4" />
</div>
</template>
</div>
......
ee/app/assets/javascripts/analytics/cycle_analytics/components/tasks_by_type_chart.vue
View file @ 9c907069
<script>
import { GlStackedColumnChart } from '@gitlab/ui/dist/charts';
import dateFormat from 'dateformat';
import { s__, sprintf } from '~/locale';
import { dateFormats } from '../../shared/constants';
const formattedDate = d => dateFormat(d, dateFormats.defaultDate);
import { formattedDate } from '../../shared/utils';
export default {
name: 'TasksByTypeChart',
......@@ -27,13 +24,10 @@ export default {
},
selectedFiltersText() {
const { subject, selectedLabelIds } = this.filters;
return sprintf(
s__('CycleAnalyticsCharts|Showing %{subject} and %{selectedLabelsCount} labels'),
{
subject,
selectedLabelsCount: selectedLabelIds.length,
},
);
return sprintf(s__('CycleAnalytics|Showing %{subject} and %{selectedLabelsCount} labels'), {
subject,
selectedLabelsCount: selectedLabelIds.length,
});
},
summaryDescription() {
const {
......@@ -47,10 +41,10 @@ export default {
const str =
selectedProjectCount > 0
? s__(
"CycleAnalyticsCharts|Showing data for group '%{groupName}' and %{selectedProjectCount} projects from %{startDate} to %{endDate}",
"CycleAnalytics|Showing data for group '%{groupName}' and %{selectedProjectCount} projects from %{startDate} to %{endDate}",
)
: s__(
"CycleAnalyticsCharts|Showing data for group '%{groupName}' from %{startDate} to %{endDate}",
"CycleAnalytics|Showing data for group '%{groupName}' from %{startDate} to %{endDate}",
);
return sprintf(str, {
startDate: formattedDate(startDate),
......@@ -66,27 +60,25 @@ export default {
};
</script>
<template>
<div>
<div class="row">
<div class="col-12">
<h3>{{ __('Type of work') }}</h3>
<div v-if="hasData">
<p>{{ summaryDescription }}</p>
<h4>{{ __('Tasks by type') }}</h4>
<p>{{ selectedFiltersText }}</p>
<gl-stacked-column-chart
:option="$options.chartOptions"
:data="chartData.data"
:group-by="chartData.groupBy"
x-axis-type="category"
x-axis-title="Date"
y-axis-title="Number of tasks"
:series-names="chartData.seriesNames"
/>
</div>
<div v-else class="bs-callout bs-callout-info">
<p>{{ __('There is no data available. Please change your selection.') }}</p>
</div>
<div class="row">
<div class="col-12">
<h3>{{ s__('CycleAnalytics|Type of work') }}</h3>
<div v-if="hasData">
<p>{{ summaryDescription }}</p>
<h4>{{ s__('CycleAnalytics|Tasks by type') }}</h4>
<p>{{ selectedFiltersText }}</p>
<gl-stacked-column-chart
:option="$options.chartOptions"
:data="chartData.data"
:group-by="chartData.groupBy"
x-axis-type="category"
:x-axis-title="__('Date')"
:y-axis-title="s__('CycleAnalytics|Number of tasks')"
:series-names="chartData.seriesNames"
/>
</div>
<div v-else class="bs-callout bs-callout-info">
<p>{{ __('There is no data available. Please change your selection.') }}</p>
</div>
</div>
</div>
......
ee/app/assets/javascripts/analytics/shared/utils.js
View file @ 9c907069
......@@ -6,3 +6,5 @@ export const toYmd = date => dateFormat(date, dateFormats.isoDate);
export default {
toYmd,
};
export const formattedDate = d => dateFormat(d, dateFormats.defaultDate);
ee/spec/frontend/analytics/cycle_analytics/components/__snapshots__/tasks_by_type_chart_spec.js.snap
View file @ 9c907069
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`TasksByTypeChart no data available should render the no data available message 1`] = `
"<div>
<div class=\\"row\\">
<div class=\\"col-12\\">
<h3>Type of work</h3>
<div class=\\"bs-callout bs-callout-info\\">
<p>There is no data available. Please change your selection.</p>
</div>
"<div class=\\"row\\">
<div class=\\"col-12\\">
<h3>Type of work</h3>
<div class=\\"bs-callout bs-callout-info\\">
<p>There is no data available. Please change your selection.</p>
</div>
</div>
</div>"
`;
exports[`TasksByTypeChart with data available should render the loading chart 1`] = `
"<div>
<div class=\\"row\\">
<div class=\\"col-12\\">
<h3>Type of work</h3>
<div>
<p>Showing data for group 'Gitlab Org' from Dec 11, 2019 to Jan 10, 2020</p>
<h4>Tasks by type</h4>
<p>Showing Issue and 3 labels</p>
<gl-stacked-column-chart-stub data=\\"0,1,2,5,2,3,2,4,1\\" option=\\"[object Object]\\" presentation=\\"stacked\\" groupby=\\"Group 1,Group 2,Group 3\\" xaxistype=\\"category\\" xaxistitle=\\"Date\\" yaxistitle=\\"Number of tasks\\" seriesnames=\\"Cool label,Normal label\\" legendaveragetext=\\"Avg\\" legendmaxtext=\\"Max\\"></gl-stacked-column-chart-stub>
</div>
"<div class=\\"row\\">
<div class=\\"col-12\\">
<h3>Type of work</h3>
<div>
<p>Showing data for group 'Gitlab Org' from Dec 11, 2019 to Jan 10, 2020</p>
<h4>Tasks by type</h4>
<p>Showing Issue and 3 labels</p>
<gl-stacked-column-chart-stub data=\\"0,1,2,5,2,3,2,4,1\\" option=\\"[object Object]\\" presentation=\\"stacked\\" groupby=\\"Group 1,Group 2,Group 3\\" xaxistype=\\"category\\" xaxistitle=\\"Date\\" yaxistitle=\\"Number of tasks\\" seriesnames=\\"Cool label,Normal label\\" legendaveragetext=\\"Avg\\" legendmaxtext=\\"Max\\"></gl-stacked-column-chart-stub>
</div>
</div>
</div>"
......
locale/gitlab.pot
View file @ 9c907069
......@@ -5538,15 +5538,6 @@ msgstr ""
msgid "Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project."
msgstr ""
msgid "CycleAnalyticsCharts|Showing %{subject} and %{selectedLabelsCount} labels"
msgstr ""
msgid "CycleAnalyticsCharts|Showing data for group '%{groupName}' and %{selectedProjectCount} projects from %{startDate} to %{endDate}"
msgstr ""
msgid "CycleAnalyticsCharts|Showing data for group '%{groupName}' from %{startDate} to %{endDate}"
msgstr ""
msgid "CycleAnalyticsEvent|Issue closed"
msgstr ""
......@@ -5648,12 +5639,30 @@ msgstr ""
msgid "CycleAnalytics|No stages selected"
msgstr ""
msgid "CycleAnalytics|Number of tasks"
msgstr ""
msgid "CycleAnalytics|Showing %{subject} and %{selectedLabelsCount} labels"
msgstr ""
msgid "CycleAnalytics|Showing data for group '%{groupName}' and %{selectedProjectCount} projects from %{startDate} to %{endDate}"
msgstr ""
msgid "CycleAnalytics|Showing data for group '%{groupName}' from %{startDate} to %{endDate}"
msgstr ""
msgid "CycleAnalytics|Stages"
msgstr ""
msgid "CycleAnalytics|Tasks by type"
msgstr ""
msgid "CycleAnalytics|Total days to completion"
msgstr ""
msgid "CycleAnalytics|Type of work"
msgstr ""
msgid "CycleAnalytics|group dropdown filter"
msgstr ""
......@@ -5696,6 +5705,9 @@ msgstr ""
msgid "Data is still calculating..."
msgstr ""
msgid "Date"
msgstr ""
msgid "Date picker"
msgstr ""
......@@ -17950,9 +17962,6 @@ msgstr ""
msgid "Target-Branch"
msgstr ""
msgid "Tasks by type"
msgstr ""
msgid "Team"
msgstr ""
......@@ -19542,9 +19551,6 @@ msgstr ""
msgid "Type"
msgstr ""
msgid "Type of work"
msgstr ""
msgid "Type/State"
msgstr ""
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7