From 0b890909dfc744b20dfb75cdce7bd87c2931d01b Mon Sep 17 00:00:00 2001 From: Yassine Date: Sat, 15 Oct 2022 16:05:39 +0100 Subject: [PATCH 1/2] fix: barchart disappearance bars issue --- .../recipes/bar/BarChart.spec.tsx.snap | 24 +++++++++---------- .../src/recipes/bar/BarChart.stories.tsx | 9 +++---- .../ez-react/src/recipes/bar/BarChart.tsx | 4 ++++ .../src/recipes/bar/BarChart.stories.tsx | 12 +--------- packages/ez-vue/src/recipes/bar/BarChart.tsx | 5 +++- 5 files changed, 26 insertions(+), 28 deletions(-) diff --git a/packages/ez-dev/jest/snapshots/recipes/bar/BarChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/bar/BarChart.spec.tsx.snap index 1e1cb3f..c9afd56 100644 --- a/packages/ez-dev/jest/snapshots/recipes/bar/BarChart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/recipes/bar/BarChart.spec.tsx.snap @@ -21,7 +21,7 @@ exports[`BarChart renders a bar chart 1`] = ` data-testid="ez-bar" fill="red" height="100.00000000000001" - width="0" + width="250" x="0" y="275" > @@ -41,7 +41,7 @@ exports[`BarChart renders a bar chart 1`] = ` data-testid="ez-bar" fill="green" height="100.00000000000001" - width="250" + width="375" x="0" y="25" > @@ -75,7 +75,7 @@ exports[`BarChart renders a bar chart 1`] = ` transform="translate(0, 0) rotate(0 0 0)" y="9" > - 50 + 0 - 55 + 10 - 60 + 20 - 65 + 30 - 70 + 40 - 75 + 50 - 80 + 60 - 85 + 70 - 90 + 80 - 95 + 90 = (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 Resizable = TemplateWithParentDimensions.bind({}); + const initialArguments = { colors, grid: { directions: [] }, xAxis: { domainKey: 'value', title: 'Count', - nice: 2, }, yAxis: { domainKey: 'name', @@ -66,5 +68,4 @@ Default.args = { dimensions, }; -export const Resizable = TemplateWithParentDimensions.bind({}); Resizable.args = initialArguments; diff --git a/packages/ez-react/src/recipes/bar/BarChart.tsx b/packages/ez-react/src/recipes/bar/BarChart.tsx index 65ff00b..f70311f 100644 --- a/packages/ez-react/src/recipes/bar/BarChart.tsx +++ b/packages/ez-react/src/recipes/bar/BarChart.tsx @@ -10,6 +10,7 @@ import { Position, RawData, } from 'eazychart-core/src/types'; +import { getDomainByKeys } from 'eazychart-core/src/utils'; import { Axis } from '@/components/scales/Axis'; import { Chart } from '@/components/Chart'; import { Bars } from '@/components/Bars'; @@ -75,6 +76,8 @@ export const BarChart: FC = ({ colors ); + const [, domainMaxValue] = getDomainByKeys([xAxis.domainKey], activeData); + return ( = ({ domainKey: xAxis.domainKey, nice: xAxis.nice || 0, reverse: isRTL, + domain: [0, domainMaxValue], }, }} yScaleConfig={{ diff --git a/packages/ez-vue/src/recipes/bar/BarChart.stories.tsx b/packages/ez-vue/src/recipes/bar/BarChart.stories.tsx index 65a2248..4ff649b 100644 --- a/packages/ez-vue/src/recipes/bar/BarChart.stories.tsx +++ b/packages/ez-vue/src/recipes/bar/BarChart.stories.tsx @@ -5,7 +5,6 @@ import { ResizableChartWrapper, } from '@/lib/storybook-utils'; import { - animationOptions, colors, dimensions, rawData, @@ -50,7 +49,6 @@ const TemplateWithParentDimensions: Story = (_args, { argTypes }) => ({ // 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({}); export const Resizable = TemplateWithParentDimensions.bind({}); const initialArguments = { @@ -59,23 +57,15 @@ const initialArguments = { xAxis: { domainKey: 'value', title: 'Count', - nice: 2, }, yAxis: { domainKey: 'name', title: 'Letter', }, - padding: { - left: 150, - bottom: 100, - right: 150, - top: 100, - }, - animationOptions, - isRTL: false, data: rawData, }; +export const Default = DefaultTemplate.bind({}); Default.args = { ...initialArguments, dimensions, diff --git a/packages/ez-vue/src/recipes/bar/BarChart.tsx b/packages/ez-vue/src/recipes/bar/BarChart.tsx index ea5ef7f..65007e4 100644 --- a/packages/ez-vue/src/recipes/bar/BarChart.tsx +++ b/packages/ez-vue/src/recipes/bar/BarChart.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 BarChart extends mixins(ToggleDatumMixin) { Tooltip: $scopedSlots.Tooltip, }; + const [, domainMaxValue] = getDomainByKeys([xAxis.domainKey], activeData); + return ( Date: Sat, 15 Oct 2022 17:39:06 +0100 Subject: [PATCH 2/2] fix: variables namming change --- packages/ez-react/src/recipes/bar/BarChart.tsx | 7 +++++-- packages/ez-vue/src/recipes/bar/BarChart.tsx | 4 ++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/ez-react/src/recipes/bar/BarChart.tsx b/packages/ez-react/src/recipes/bar/BarChart.tsx index f70311f..456e31c 100644 --- a/packages/ez-react/src/recipes/bar/BarChart.tsx +++ b/packages/ez-react/src/recipes/bar/BarChart.tsx @@ -76,7 +76,10 @@ export const BarChart: FC = ({ colors ); - const [, domainMaxValue] = getDomainByKeys([xAxis.domainKey], activeData); + const [, xAxisDomainMaxValue] = getDomainByKeys( + [xAxis.domainKey], + activeData + ); return ( = ({ domainKey: xAxis.domainKey, nice: xAxis.nice || 0, reverse: isRTL, - domain: [0, domainMaxValue], + domain: [0, xAxisDomainMaxValue], }, }} yScaleConfig={{ diff --git a/packages/ez-vue/src/recipes/bar/BarChart.tsx b/packages/ez-vue/src/recipes/bar/BarChart.tsx index 65007e4..fa84657 100644 --- a/packages/ez-vue/src/recipes/bar/BarChart.tsx +++ b/packages/ez-vue/src/recipes/bar/BarChart.tsx @@ -155,7 +155,7 @@ export default class BarChart extends mixins(ToggleDatumMixin) { Tooltip: $scopedSlots.Tooltip, }; - const [, domainMaxValue] = getDomainByKeys([xAxis.domainKey], activeData); + const [, xAxisDomainMaxValue] = getDomainByKeys([xAxis.domainKey], activeData); return (