diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-19 04:45:44 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-19 04:45:44 +0300 |
commit | 85dc423f7090da0a52c73eb66faf22ddb20efff9 (patch) | |
tree | 9160f299afd8c80c038f08e1545be119f5e3f1e1 /app/assets/javascripts/vue_shared/components/resizable_chart | |
parent | 15c2c8c66dbe422588e5411eee7e68f1fa440bb8 (diff) |
Add latest changes from gitlab-org/gitlab@13-4-stable-ee
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/resizable_chart')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/resizable_chart/constants.js | 6 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/resizable_chart/skeleton_loader.vue | 64 |
2 files changed, 36 insertions, 34 deletions
diff --git a/app/assets/javascripts/vue_shared/components/resizable_chart/constants.js b/app/assets/javascripts/vue_shared/components/resizable_chart/constants.js index edc5ffb7b77..68d86777995 100644 --- a/app/assets/javascripts/vue_shared/components/resizable_chart/constants.js +++ b/app/assets/javascripts/vue_shared/components/resizable_chart/constants.js @@ -1,6 +1,6 @@ export const DEFAULT_RX = 0.4; -export const DEFAULT_BAR_WIDTH = 6; -export const DEFAULT_LABEL_WIDTH = 4; -export const DEFAULT_LABEL_HEIGHT = 5; +export const DEFAULT_BAR_WIDTH = 4; +export const DEFAULT_LABEL_WIDTH = 3; +export const DEFAULT_LABEL_HEIGHT = 3; export const BAR_HEIGHTS = [5, 7, 9, 14, 21, 35, 50, 80]; export const GRID_YS = [30, 60, 90]; diff --git a/app/assets/javascripts/vue_shared/components/resizable_chart/skeleton_loader.vue b/app/assets/javascripts/vue_shared/components/resizable_chart/skeleton_loader.vue index 306fa61780f..a9f35a73db0 100644 --- a/app/assets/javascripts/vue_shared/components/resizable_chart/skeleton_loader.vue +++ b/app/assets/javascripts/vue_shared/components/resizable_chart/skeleton_loader.vue @@ -61,35 +61,37 @@ export default { }; </script> <template> - <gl-skeleton-loader :unique-key="uniqueKey"> - <rect - v-for="(y, index) in $options.GRID_YS" - :key="`grid-${index}`" - data-testid="skeleton-chart-grid" - x="0" - :y="`${y}%`" - width="100%" - height="1px" - /> - <rect - v-for="(height, index) in $options.BAR_HEIGHTS" - :key="`bar-${index}`" - data-testid="skeleton-chart-bar" - :x="`${getBarXPosition(index)}%`" - :y="`${90 - height}%`" - :width="`${barWidth}%`" - :height="`${height}%`" - :rx="`${rx}%`" - /> - <rect - v-for="(height, index) in $options.BAR_HEIGHTS" - :key="`label-${index}`" - data-testid="skeleton-chart-label" - :x="`${labelCentering + getBarXPosition(index)}%`" - :y="`${100 - labelHeight}%`" - :width="`${labelWidth}%`" - :height="`${labelHeight}%`" - :rx="`${rx}%`" - /> - </gl-skeleton-loader> + <div class="gl-px-8"> + <gl-skeleton-loader :unique-key="uniqueKey" class="gl-p-8"> + <rect + v-for="(y, index) in $options.GRID_YS" + :key="`grid-${index}`" + data-testid="skeleton-chart-grid" + x="0" + :y="`${y}%`" + width="100%" + height="1px" + /> + <rect + v-for="(height, index) in $options.BAR_HEIGHTS" + :key="`bar-${index}`" + data-testid="skeleton-chart-bar" + :x="`${getBarXPosition(index)}%`" + :y="`${90 - height}%`" + :width="`${barWidth}%`" + :height="`${height}%`" + :rx="`${rx}%`" + /> + <rect + v-for="(height, index) in $options.BAR_HEIGHTS" + :key="`label-${index}`" + data-testid="skeleton-chart-label" + :x="`${labelCentering + getBarXPosition(index)}%`" + :y="`${100 - labelHeight}%`" + :width="`${labelWidth}%`" + :height="`${labelHeight}%`" + :rx="`${rx}%`" + /> + </gl-skeleton-loader> + </div> </template> |