From c586442dd4c1566fc7c89661628b3b6da56a0be8 Mon Sep 17 00:00:00 2001
From: joaosa <joao.dossantos@adyen.com>
Date: Thu, 20 Jun 2024 11:51:30 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Horizontal=20bar=20charts=20with?=
 =?UTF-8?q?out=20minimum=20size=20not=20calculating=20height=20on=20initia?=
 =?UTF-8?q?l=20render?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/core/lume-chart-container/README.md  | 13 +++++++------
 .../lume-chart-container/lume-chart-container.vue   | 13 +++++++++++--
 .../src/components/core/lume-chart/lume-chart.vue   |  1 +
 3 files changed, 19 insertions(+), 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
index d0155339..e40568b4 100644
--- 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
index 3ae23075..0dc030db 100644
--- 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
index 23b61efd..c70203b6 100644
--- 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)"