🐛 Horizontal bar charts without minimum size not calculating height o…

…n initial render
Adyen · Jun 20, 2024 · b9818ca · b9818ca
1 parent f2c98a1
commit b9818ca
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/packages/lib/src/components/core/lume-chart-container/README.md b/packages/lib/src/components/core/lume-chart-container/README.md
@@ -69,12 +69,13 @@ You can set up your chart with `lume-chart-container` like so:
 
 ### Props
 
-| Name                    | Type            | Default | Description                                                 |
-| ----------------------- | --------------- | ------- | ----------------------------------------------------------- |
-| `margins`               | `Margins`       | `{}`    | Space around the chart.                                     |
-| `containerSize`         | `ContainerSize` | `{}`    | The calculated container size.                              |
-| `transparentBackground` | `boolean`       | `false` | Controls if the chart should have a transparent background. |
-| `noMinSize`             | `boolean`       | `false` | Controls if the chart shouldn't have minimum width/height.  |
+| Name                    | Type                         | Default      | Description                                                 |
+| ----------------------- | ---------------------------- | ------------ | ----------------------------------------------------------- |
+| `margins`               | `Margins`                    | `{}`         | Space around the chart.                                     |
+| `containerSize`         | `ContainerSize`              | `{}`         | The calculated container size.                              |
+| `transparentBackground` | `boolean`                    | `false`      | Controls if the chart should have a transparent background. |
+| `noMinSize`             | `boolean`                    | `false`      | Controls if the chart shouldn't have minimum width/height.  |
+| `orientation`           | `'vertical' \| 'horizontal'` | `'vertical'` | The chart's orientation.                                    |
 
 ### Events
 

diff --git a/packages/lib/src/components/core/lume-chart-container/lume-chart-container.vue b/packages/lib/src/components/core/lume-chart-container/lume-chart-container.vue
@@ -39,8 +39,10 @@
 <script setup lang="ts">
 import { computed, PropType, ref, toRefs, watchEffect } from 'vue';
 
+import { orientationValidator } from '@/composables/props';
 import { useResizeObserver } from '@/composables/resize';
-import type { InternalMargins } from '@/types/utils';
+import { ORIENTATIONS } from '@/utils/constants';
+import type { InternalMargins, Orientation } from '@/types/utils';
 import type { ContainerSize } from '@/types/size';
 
 const props = defineProps({
@@ -60,6 +62,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  orientation: {
+    type: String as PropType<Orientation>,
+    default: ORIENTATIONS.VERTICAL,
+    validator: orientationValidator,
+  },
 });
 
 const emit = defineEmits<{
@@ -84,7 +91,9 @@ watchEffect(() => {
   const { width } = resizeState.dimensions;
   const { height } = root.value.getBoundingClientRect();
 
-  if (!width || !height) return;
+  if (!width || (props.orientation === ORIENTATIONS.VERTICAL && !height)) {
+    return;
+  }
 
   const contentWidth = width - margins.value.left - margins.value.right;
   const contentHeight = height - margins.value.top - margins.value.bottom;

diff --git a/packages/lib/src/components/core/lume-chart/lume-chart.vue b/packages/lib/src/components/core/lume-chart/lume-chart.vue
@@ -6,6 +6,7 @@
     :container-size="containerSize"
     :no-min-size="allOptions.noMinSize"
     :transparent-background="allOptions.transparentBackground"
+    :orientation="orientation"
     data-j-lume-chart
     @resize="handleResize"
     @click="emit('chart-click', $event)"