From 6c0219a38b3f5f8753b208c42af76a5690916646 Mon Sep 17 00:00:00 2001
From: Yassine <d.yassine@hexastack.com>
Date: Sat, 15 Oct 2022 17:31:10 +0100
Subject: [PATCH 1/2] fix: columnchart disappearance columns issue


From 8d6437d594200b541dfafc7c0651d297d8b3dec8 Mon Sep 17 00:00:00 2001
From: Yassine <d.yassine@hexastack.com>
Date: Sat, 15 Oct 2022 17:32:10 +0100
Subject: [PATCH 2/2] fix: columnchart disappearance columns issue

---
 .../recipes/column/ColumnChart.spec.tsx.snap  | 28 +++++++++----------
 .../recipes/column/ColumnChart.stories.tsx    |  7 ++---
 .../src/recipes/column/ColumnChart.tsx        |  7 ++++-
 .../recipes/column/ColumnChart.stories.tsx    |  9 +-----
 .../ez-vue/src/recipes/column/ColumnChart.tsx |  5 +++-
 5 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/packages/ez-dev/jest/snapshots/recipes/column/ColumnChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/column/ColumnChart.spec.tsx.snap
index 25d8631..0bff0ce 100644
--- a/packages/ez-dev/jest/snapshots/recipes/column/ColumnChart.spec.tsx.snap
+++ b/packages/ez-dev/jest/snapshots/recipes/column/ColumnChart.spec.tsx.snap
@@ -20,10 +20,10 @@ exports[`ColumnChart renders a column chart 1`] = `
                     class="ez-bar"
                     data-testid="ez-bar"
                     fill="red"
-                    height="0"
+                    height="200"
                     width="125"
                     x="31.25"
-                    y="400"
+                    y="200"
                   >
                   </rect>
                   <rect
@@ -40,10 +40,10 @@ exports[`ColumnChart renders a column chart 1`] = `
                     class="ez-bar"
                     data-testid="ez-bar"
                     fill="green"
-                    height="200"
+                    height="300"
                     width="125"
                     x="343.75"
-                    y="200"
+                    y="100"
                   >
                   </rect>
                 </g>
@@ -146,7 +146,7 @@ exports[`ColumnChart renders a column chart 1`] = `
                     transform="translate(0, 0) rotate(-90 0 0)"
                     x="-9"
                   >
-                    50
+                    0
                   </text>
                 </g>
                 <g
@@ -166,7 +166,7 @@ exports[`ColumnChart renders a column chart 1`] = `
                     transform="translate(0, 0) rotate(-90 0 0)"
                     x="-9"
                   >
-                    55
+                    10
                   </text>
                 </g>
                 <g
@@ -186,7 +186,7 @@ exports[`ColumnChart renders a column chart 1`] = `
                     transform="translate(0, 0) rotate(-90 0 0)"
                     x="-9"
                   >
-                    60
+                    20
                   </text>
                 </g>
                 <g
@@ -206,7 +206,7 @@ exports[`ColumnChart renders a column chart 1`] = `
                     transform="translate(0, 0) rotate(-90 0 0)"
                     x="-9"
                   >
-                    65
+                    30
                   </text>
                 </g>
                 <g
@@ -226,7 +226,7 @@ exports[`ColumnChart renders a column chart 1`] = `
                     transform="translate(0, 0) rotate(-90 0 0)"
                     x="-9"
                   >
-                    70
+                    40
                   </text>
                 </g>
                 <g
@@ -246,7 +246,7 @@ exports[`ColumnChart renders a column chart 1`] = `
                     transform="translate(0, 0) rotate(-90 0 0)"
                     x="-9"
                   >
-                    75
+                    50
                   </text>
                 </g>
                 <g
@@ -266,7 +266,7 @@ exports[`ColumnChart renders a column chart 1`] = `
                     transform="translate(0, 0) rotate(-90 0 0)"
                     x="-9"
                   >
-                    80
+                    60
                   </text>
                 </g>
                 <g
@@ -286,7 +286,7 @@ exports[`ColumnChart renders a column chart 1`] = `
                     transform="translate(0, 0) rotate(-90 0 0)"
                     x="-9"
                   >
-                    85
+                    70
                   </text>
                 </g>
                 <g
@@ -306,7 +306,7 @@ exports[`ColumnChart renders a column chart 1`] = `
                     transform="translate(0, 0) rotate(-90 0 0)"
                     x="-9"
                   >
-                    90
+                    80
                   </text>
                 </g>
                 <g
@@ -326,7 +326,7 @@ exports[`ColumnChart renders a column chart 1`] = `
                     transform="translate(0, 0) rotate(-90 0 0)"
                     x="-9"
                   >
-                    95
+                    90
                   </text>
                 </g>
                 <g
diff --git a/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx b/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx
index 3cc8395..f5e0ae6 100644
--- a/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx
+++ b/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx
@@ -36,8 +36,9 @@ const LineColumnTemplate: Story<LineColumnChartProps> = (args) => {
   );
 };
 
-// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
-// https://storybook.js.org/docs/react/workflows/unit-testing
+// By passing using the Args format for exported stories,
+// you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/vue/workflows/unit-testing
 export const Default = DefaultTemplate.bind({});
 
 const defaultArguments = {
@@ -50,7 +51,6 @@ const defaultArguments = {
   yAxis: {
     domainKey: 'value',
     title: 'Count',
-    nice: 2,
   },
   data: rawData,
 };
@@ -73,7 +73,6 @@ const lineColumnArguments = {
   yLineAxis: {
     domainKey: 'v',
     title: 'Value',
-    nice: 2,
   },
 };
 
diff --git a/packages/ez-react/src/recipes/column/ColumnChart.tsx b/packages/ez-react/src/recipes/column/ColumnChart.tsx
index f82a619..ce8f747 100644
--- a/packages/ez-react/src/recipes/column/ColumnChart.tsx
+++ b/packages/ez-react/src/recipes/column/ColumnChart.tsx
@@ -1,5 +1,5 @@
 import React, { FC, SVGAttributes } from 'react';
-import { ScaleBand, ScaleLinear } from 'eazychart-core/src';
+import { getDomainByKeys, ScaleBand, ScaleLinear } from 'eazychart-core/src';
 import {
   AnimationOptions,
   AxisConfig,
@@ -74,6 +74,10 @@ export const ColumnChart: FC<ColumnChartProps> = ({
     xAxis.domainKey,
     colors
   );
+  const [, yAxisDomainMaxValue] = getDomainByKeys(
+    [yAxis.domainKey],
+    activeData
+  );
 
   return (
     <Chart
@@ -99,6 +103,7 @@ export const ColumnChart: FC<ColumnChartProps> = ({
             direction: Direction.VERTICAL,
             domainKey: yAxis.domainKey,
             nice: yAxis.nice || 0,
+            domain: [0, yAxisDomainMaxValue],
           },
         }}
       >
diff --git a/packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx b/packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx
index 2dd20c2..d659d1d 100644
--- a/packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx
+++ b/packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx
@@ -1,8 +1,6 @@
 import { Meta, Story } from '@storybook/vue';
 import { baseChartArgTypes, ChartWrapper } from '@/lib/storybook-utils';
-import {
-  animationOptions, colors, padding, rawData,
-} from 'eazychart-dev/storybook/data';
+import { colors, rawData } from 'eazychart-dev/storybook/data';
 import ColumnChart from './ColumnChart';
 import LineColumnChart from './LineColumnChart';
 
@@ -53,11 +51,7 @@ const defaultArguments = {
   yAxis: {
     domainKey: 'value',
     title: 'Count',
-    nice: 2,
   },
-  padding,
-  animationOptions,
-  isRTL: false,
   data: rawData,
 };
 
@@ -79,7 +73,6 @@ const lineColumnArguments = {
   yLineAxis: {
     domainKey: 'v',
     title: 'Value',
-    nice: 2,
   },
 };
 
diff --git a/packages/ez-vue/src/recipes/column/ColumnChart.tsx b/packages/ez-vue/src/recipes/column/ColumnChart.tsx
index fa242ec..90e9990 100644
--- a/packages/ez-vue/src/recipes/column/ColumnChart.tsx
+++ b/packages/ez-vue/src/recipes/column/ColumnChart.tsx
@@ -11,7 +11,7 @@ import {
   Dimensions,
 } from 'eazychart-core/src/types';
 import { Prop } from 'vue-property-decorator';
-import { ScaleBand, ScaleLinear } from 'eazychart-core/src';
+import { getDomainByKeys, ScaleBand, ScaleLinear } from 'eazychart-core/src';
 import Chart from '@/components/Chart';
 import Axis from '@/components/scales/Axis';
 import Legend from '@/components/addons/legend/Legend';
@@ -155,6 +155,8 @@ export default class ColumnChart extends mixins(ToggleDatumMixin) {
       Tooltip: $scopedSlots.Tooltip,
     };
 
+    const [, yAxisDomainMaxValue] = getDomainByKeys([yAxis.domainKey], activeData);
+
     return (
       <Chart
         dimensions={dimensions}
@@ -178,6 +180,7 @@ export default class ColumnChart extends mixins(ToggleDatumMixin) {
               direction: Direction.VERTICAL,
               domainKey: yAxis.domainKey,
               nice: yAxis.nice || 0,
+              domain: [0, yAxisDomainMaxValue],
             },
           }}
         >