diff options
author | Adriel Santiago <asantiago@gitlab.com> | 2019-04-06 00:59:57 +0300 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2019-04-06 00:59:57 +0300 |
commit | 8cf0af88e664b6e3da7d95180c48241591782419 (patch) | |
tree | fb311e574b24fa9f739b6cfe376b21b968f0eee4 /app | |
parent | 3ba9e4e44b9a0b12e6078d8e550ac18d20614e93 (diff) |
Wrap long chart tooltip series label names
Resolves an issue where long series label names overflow
the popover chart tooltip container
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/monitoring/components/charts/area.vue | 36 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 5 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/monitor.scss | 5 |
3 files changed, 35 insertions, 11 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/area.vue b/app/assets/javascripts/monitoring/components/charts/area.vue index eb2ab3e135e..afe8d87a8d6 100644 --- a/app/assets/javascripts/monitoring/components/charts/area.vue +++ b/app/assets/javascripts/monitoring/components/charts/area.vue @@ -1,5 +1,5 @@ <script> -import { GlAreaChart } from '@gitlab/ui/dist/charts'; +import { GlAreaChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts'; import dateFormat from 'dateformat'; import { debounceByAnimationFrame } from '~/lib/utils/common_utils'; import { getSvgIconPathContent } from '~/lib/utils/icon_utils'; @@ -12,6 +12,7 @@ let debouncedResize; export default { components: { GlAreaChart, + GlChartSeriesLabel, Icon, }, inheritAttrs: false, @@ -137,6 +138,9 @@ export default { return timestamp < acc || acc === null ? timestamp : acc; }, null); }, + isMultiSeries() { + return this.tooltip.content.length > 1; + }, recentDeployments() { return this.deploymentData.reduce((acc, deployment) => { if (deployment.created_at >= this.earliestDatapoint) { @@ -197,7 +201,7 @@ export default { ); this.tooltip.sha = deploy.sha.substring(0, 8); } else { - const { seriesName } = seriesData; + const { seriesName, color } = seriesData; // seriesData.value contains the chart's [x, y] value pair // seriesData.value[1] is threfore the chart y value const value = seriesData.value[1].toFixed(3); @@ -205,6 +209,7 @@ export default { this.tooltip.content.push({ name: seriesName, value, + color, }); } }); @@ -246,24 +251,33 @@ export default { :height="height" @updated="onChartUpdated" > - <template slot="tooltipTitle"> - <div v-if="tooltip.isDeployment"> + <template v-if="tooltip.isDeployment"> + <template slot="tooltipTitle"> {{ __('Deployed') }} - </div> - {{ tooltip.title }} - </template> - <template slot="tooltipContent"> - <div v-if="tooltip.isDeployment" class="d-flex align-items-center"> + </template> + <div slot="tooltipContent" class="d-flex align-items-center"> <icon name="commit" class="mr-2" /> {{ tooltip.sha }} </div> - <template v-else> + </template> + <template v-else> + <template slot="tooltipTitle"> + <div class="text-nowrap"> + {{ tooltip.title }} + </div> + </template> + <template slot="tooltipContent"> <div v-for="(content, key) in tooltip.content" :key="key" class="d-flex justify-content-between" > - {{ content.name }} {{ content.value }} + <gl-chart-series-label :color="isMultiSeries ? content.color : ''"> + {{ content.name }} + </gl-chart-series-label> + <div class="prepend-left-32"> + {{ content.value }} + </div> </div> </template> </template> diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 072d4147a8b..da1f196afdb 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -662,6 +662,11 @@ $feature-toggle-text-color: #fff; $feature-toggle-color-enabled: #4a8bee; /* + * Monitor Charts + */ +$chart-tooltip-max-width: 512px; + +/* Stat Graph */ $stat-graph-common-bg: #f3f3f3; diff --git a/app/assets/stylesheets/pages/monitor.scss b/app/assets/stylesheets/pages/monitor.scss new file mode 100644 index 00000000000..25ff5abd774 --- /dev/null +++ b/app/assets/stylesheets/pages/monitor.scss @@ -0,0 +1,5 @@ +.chart-tooltip > .popover { + min-width: 0; + width: max-content; + max-width: $chart-tooltip-max-width; +} |