From 70cf3b580cfeda2ad7e33c057fd28842ba5639fd Mon Sep 17 00:00:00 2001 From: Mohamed Marrouchi Date: Tue, 25 Oct 2022 07:29:10 +0100 Subject: [PATCH 01/16] feat: add stacked bar column chart (react) --- packages/ez-core/src/sample-data.ts | 3 + .../snapshots/components/Chart.spec.tsx.snap | 2 +- .../components/addons/Tooltip.spec.tsx.snap | 8 + .../column/StackedColumnChart.spec.tsx.snap | 485 ++++++++++++++++++ packages/ez-dev/storybook/data.ts | 10 + packages/ez-react/src/components/Bars.tsx | 39 +- .../ez-react/src/components/StackedBars.tsx | 87 ++++ .../recipes/column/ColumnChart.stories.tsx | 25 + .../src/recipes/column/StackedColumnChart.tsx | 152 ++++++ .../column/StackedColumnChart.spec.tsx | 34 ++ 10 files changed, 841 insertions(+), 4 deletions(-) create mode 100644 packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap create mode 100644 packages/ez-react/src/components/StackedBars.tsx create mode 100644 packages/ez-react/src/recipes/column/StackedColumnChart.tsx create mode 100644 packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx diff --git a/packages/ez-core/src/sample-data.ts b/packages/ez-core/src/sample-data.ts index 093a627..429b693 100644 --- a/packages/ez-core/src/sample-data.ts +++ b/packages/ez-core/src/sample-data.ts @@ -22,18 +22,21 @@ export const rawData: RawData = [ { id: '1', label: 'Alpha', + value0: 35, value: 50, amount: 10, }, { id: '2', label: 'Beta', + value0: 80, value: 100, amount: 20, }, { id: '3', label: 'Gamma', + value0: 60, value: 75, amount: 30, }, diff --git a/packages/ez-dev/jest/snapshots/components/Chart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/Chart.spec.tsx.snap index 53c324d..73337bd 100644 --- a/packages/ez-dev/jest/snapshots/components/Chart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/Chart.spec.tsx.snap @@ -44,7 +44,7 @@ exports[`Chart should provide the chart data to the children components 1`] = ` >
- [{"id":"1","label":"Alpha","value":50,"amount":10},{"id":"2","label":"Beta","value":100,"amount":20},{"id":"3","label":"Gamma","value":75,"amount":30}] + [{"id":"1","label":"Alpha","value0":35,"value":50,"amount":10},{"id":"2","label":"Beta","value0":80,"value":100,"amount":20},{"id":"3","label":"Gamma","value0":60,"value":75,"amount":30}]
diff --git a/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap index be39a80..cee7802 100644 --- a/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap @@ -19,6 +19,14 @@ exports[`Tooltip renders the tooltip when a shape is hovered 1`] = ` >
+
+
+ value0 : +
+
+ 35 +
+
value : diff --git a/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap new file mode 100644 index 0000000..7af41c0 --- /dev/null +++ b/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap @@ -0,0 +1,485 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`StackedColumnChart renders a stacked column chart 1`] = ` +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + Alpha + + + + + + + Beta + + + + + + + Gamma + + + + + + + + + + + 35 + + + + + + + 40 + + + + + + + 45 + + + + + + + 50 + + + + + + + 55 + + + + + + + 60 + + + + + + + 65 + + + + + + + 70 + + + + + + + 75 + + + + + + + 80 + + + + + + + 85 + + + + + + + 90 + + + + + + + 95 + + + + + + + 100 + + + + + + +
+
+
+
+
+ + value0 + +
+
+
+
+ + value + +
+
+
+
+
+
+
+`; diff --git a/packages/ez-dev/storybook/data.ts b/packages/ez-dev/storybook/data.ts index a51f0f3..80ff9ed 100644 --- a/packages/ez-dev/storybook/data.ts +++ b/packages/ez-dev/storybook/data.ts @@ -9,30 +9,40 @@ export const dimensions = { export const rawData: RawData = [ { value: 9, + value1: 5, + value2: 15, name: 'Alpha', id: '1', v: 2, }, { value: 45, + value1: 20, + value2: 56, name: 'Beta', id: '2', v: 5, }, { value: 29, + value1: 15, + value2: 33, name: 'Gamma', id: '3', v: 10, }, { value: 30, + value1: 18, + value2: 40, name: 'Delta', id: '4', v: 4, }, { value: 50, + value1: 30, + value2: 70, name: 'Epsilon', id: '5', v: 8, diff --git a/packages/ez-react/src/components/Bars.tsx b/packages/ez-react/src/components/Bars.tsx index 72abebf..9f5b58c 100644 --- a/packages/ez-react/src/components/Bars.tsx +++ b/packages/ez-react/src/components/Bars.tsx @@ -1,16 +1,41 @@ import React, { FC, SVGAttributes, useMemo } from 'react'; -import { scaleRectangleData } from 'eazychart-core/src'; +import { ScaleOrdinal, scaleRectangleData } from 'eazychart-core/src'; import { Bar } from '@/components/shapes/Bar'; import { useChart } from '@/lib/use-chart'; import { useCartesianScales } from '@/components/scales/CartesianScale'; import { useColorScale } from './scales/ColorScale'; +import { + RectangleDatum, + ScaleLinearOrBand, + Dimensions, +} from 'eazychart-core/src/types'; export interface BarsProps extends SVGAttributes { xDomainKey: string; yDomainKey: string; + scopedSlots?: { + default: ({ + shapeData, + scales, + dimensions, + }: { + shapeData: RectangleDatum[]; + scales: { + xScale: ScaleLinearOrBand; + yScale: ScaleLinearOrBand; + colorScale: ScaleOrdinal; + }; + dimensions: Dimensions; + }) => JSX.Element[]; + }; } -export const Bars: FC = ({ xDomainKey, yDomainKey, ...rest }) => { +export const Bars: FC = ({ + xDomainKey, + yDomainKey, + scopedSlots, + ...rest +}) => { const { data, dimensions, isRTL } = useChart(); const { xScale, yScale } = useCartesianScales(); const { colorScale } = useColorScale(); @@ -37,7 +62,15 @@ export const Bars: FC = ({ xDomainKey, yDomainKey, ...rest }) => { isRTL, ]); - return ( + return scopedSlots && scopedSlots.default ? ( + + {scopedSlots.default({ + shapeData: scaledData, + scales: { xScale, yScale, colorScale }, + dimensions, + })} + + ) : ( {scaledData.map((rectDatum) => { return ; diff --git a/packages/ez-react/src/components/StackedBars.tsx b/packages/ez-react/src/components/StackedBars.tsx new file mode 100644 index 0000000..e693a84 --- /dev/null +++ b/packages/ez-react/src/components/StackedBars.tsx @@ -0,0 +1,87 @@ +import React, { FC, SVGAttributes, useMemo } from 'react'; +import { scaleRectangleData } from 'eazychart-core/src'; +import { Bar } from '@/components/shapes/Bar'; +import { useChart } from '@/lib/use-chart'; +import { useCartesianScales } from '@/components/scales/CartesianScale'; +import { useColorScale } from './scales/ColorScale'; +import { RectangleDatum } from 'eazychart-core/src/types'; + +export interface StackedBarsProps extends SVGAttributes { + xDomainKey: string; + yDomainKeys: string[]; +} + +export const StackedBars: FC = ({ + xDomainKey, + yDomainKeys, + ...rest +}) => { + const { data, dimensions, isRTL } = useChart(); + const { xScale, yScale } = useCartesianScales(); + const { colorScale } = useColorScale(); + + const scaledData = useMemo(() => { + return yDomainKeys.reduce((acc, yDomainKey, index) => { + if (index === 0) { + // @ts-ignore + acc[yDomainKey] = scaleRectangleData( + data, + xDomainKey, + yDomainKey, + xScale, + yScale, + colorScale, + dimensions, + isRTL + ); + return acc; + } else { + // @ts-ignore + acc[yDomainKey] = scaleRectangleData( + data, + xDomainKey, + yDomainKey, + xScale, + yScale, + colorScale, + dimensions, + isRTL + ).map((datum, id) => { + // @ts-ignore + const height0 = acc[yDomainKeys[index - 1]][id].height; + return datum.height > height0 + ? { ...datum, height: datum.height - height0 } + : datum; + }); + return acc; + } + }, {}); + }, [ + data, + yDomainKeys, + xDomainKey, + xScale, + yScale, + colorScale, + dimensions, + isRTL, + ]); + + return ( + + {yDomainKeys.map((yDomainKey) => { + // @ts-ignore + const shapeData = scaledData[yDomainKey] as RectangleDatum[]; + const color = colorScale.scale(yDomainKey); + return shapeData.map((shapeDatum: RectangleDatum, index: number) => { + return ( + + ); + }); + })} + + ); +}; diff --git a/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx b/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx index 3cc8395..ef435fd 100644 --- a/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx +++ b/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx @@ -7,6 +7,10 @@ import { } from '@/recipes/column/LineColumnChart'; import { baseChartArgTypes, ChartWrapper } from '@/lib/storybook-utils'; import { colors, rawData } from 'eazychart-dev/storybook/data'; +import { + StackedColumnChart, + StackedColumnChartProps, +} from './StackedColumnChart'; const meta: Meta = { id: '4', @@ -36,6 +40,14 @@ const LineColumnTemplate: Story = (args) => { ); }; +const StackedColumnTemplate: Story = (args) => { + return ( + + + + ); +}; + // 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 export const Default = DefaultTemplate.bind({}); @@ -78,3 +90,16 @@ const lineColumnArguments = { }; LineColumn.args = lineColumnArguments; + +export const StackedColumn = StackedColumnTemplate.bind({}); + +const StackedColumnArguments = { + ...defaultArguments, + yAxis: { + domainKeys: ['value1', 'value', 'value2'], + title: 'Temperature', + tickFormat: (d: number) => `${d}°`, + }, +}; + +StackedColumn.args = StackedColumnArguments; diff --git a/packages/ez-react/src/recipes/column/StackedColumnChart.tsx b/packages/ez-react/src/recipes/column/StackedColumnChart.tsx new file mode 100644 index 0000000..6d74e9b --- /dev/null +++ b/packages/ez-react/src/recipes/column/StackedColumnChart.tsx @@ -0,0 +1,152 @@ +import { Legend, LegendProps } from '@/components/addons/legend/Legend'; +import { Tooltip, TooltipProps } from '@/components/addons/tooltip/Tooltip'; +import { Bars } from '@/components/Bars'; +import { Chart } from '@/components/Chart'; +import { Axis } from '@/components/scales/Axis'; +import { CartesianScale } from '@/components/scales/CartesianScale'; +import { ColorScale } from '@/components/scales/ColorScale'; +import { Bar } from '@/components/shapes/Bar'; +import { useToggableDomainKey } from '@/lib/useToggableDomainKey'; +import { ScaleBand, ScaleLinear } from 'eazychart-core/src/scales'; +import { + RawData, + AnimationOptions, + ChartPadding, + AxisConfig, + Position, + Dimensions, + Direction, + AxisConfigMulti, + RectangleDatum, +} from 'eazychart-core/src/types'; +import React, { FC, SVGAttributes } from 'react'; + +export interface StackedColumnChartProps extends SVGAttributes { + data: RawData; + colors?: string[]; + animationOptions?: AnimationOptions; + padding?: ChartPadding; + isRTL?: boolean; + xAxis?: AxisConfig; + yAxis?: AxisConfigMulti; + dimensions?: Partial; + scopedSlots?: { + LegendComponent: React.FC; + TooltipComponent: React.FC; + }; +} + +export const StackedColumnChart: FC = ({ + data, + colors = ['#339999', '#993399', '#333399'], + animationOptions = { + easing: 'easeBack', + duration: 400, + delay: 0, + }, + padding = { + left: 150, + bottom: 100, + right: 150, + top: 100, + }, + xAxis = { + domainKey: 'name', + position: Position.BOTTOM, + }, + yAxis = { + domainKeys: ['value', 'value1'], + position: Position.LEFT, + }, + isRTL = false, + dimensions = {}, + scopedSlots = { + LegendComponent: Legend, + TooltipComponent: Tooltip, + }, +}) => { + const { activeDomainKeys, activeDomain, toggleDomainKey } = + useToggableDomainKey(data, yAxis.domainKeys); + let previousShapeData: RectangleDatum[] = []; + + return ( + + + + {activeDomainKeys.map((activeDomaiKey) => { + return ( + // we need to find a way to sort the the data columns so that it shows bars in the corret manner + { + const color = colorScale.scale(activeDomaiKey); + const newShapeData = shapeData.map((shapeDatum, index) => + previousShapeData[index] + ? { + ...shapeDatum, + height: + shapeDatum.height > + previousShapeData[index].height + ? shapeDatum.height - + previousShapeData[index].height + : shapeDatum.height, + } + : shapeDatum + ); + previousShapeData = [...shapeData]; + return newShapeData.map((shapeDatum) => ( + + )); + }, + }} + /> + ); + })} + + + + + + ); +}; diff --git a/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx b/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx new file mode 100644 index 0000000..3716ced --- /dev/null +++ b/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { dimensions, rawData } from 'eazychart-core/src/sample-data'; +import { act, render, RenderResult, waitFor } from '@testing-library/react'; +import 'tests/mocks/ResizeObserver'; +import { StackedColumnChart } from '@/recipes/column/StackedColumnChart'; + +describe('StackedColumnChart', () => { + it('renders a stacked column chart', async () => { + let wrapper: RenderResult; + act(() => { + wrapper = render( + + ); + }); + + await waitFor(() => { + expect(wrapper.container.innerHTML).toMatchSnapshot(); + }); + }); +}); From 6c211eb09bdc787334cb5422cf1753ec70fbaab3 Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Tue, 25 Oct 2022 11:41:37 +0100 Subject: [PATCH 02/16] fix: apply requested changes --- .../column/StackedColumnChart.spec.tsx.snap | 128 +++++++++--------- packages/ez-dev/storybook/data.ts | 20 +-- packages/ez-react/src/components/Bars.tsx | 22 ++- .../ez-react/src/components/StackedBars.tsx | 101 +++++++------- .../recipes/column/ColumnChart.stories.tsx | 2 +- .../src/recipes/column/StackedColumnChart.tsx | 41 +----- 6 files changed, 148 insertions(+), 166 deletions(-) diff --git a/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap index 7af41c0..cbf785c 100644 --- a/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap @@ -16,68 +16,72 @@ exports[`StackedColumnChart renders a stacked column chart 1`] = ` - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + = ({ isRTL, ]); - return scopedSlots && scopedSlots.default ? ( - - {scopedSlots.default({ - shapeData: scaledData, - scales: { xScale, yScale, colorScale }, - dimensions, - })} - - ) : ( + return ( - {scaledData.map((rectDatum) => { - return ; - })} + {scopedSlots && scopedSlots.default + ? scopedSlots.default({ + shapeData: scaledData, + scales: { xScale, yScale, colorScale }, + dimensions, + }) + : scaledData.map((rectDatum) => { + return ; + })} ); }; diff --git a/packages/ez-react/src/components/StackedBars.tsx b/packages/ez-react/src/components/StackedBars.tsx index e693a84..2b21253 100644 --- a/packages/ez-react/src/components/StackedBars.tsx +++ b/packages/ez-react/src/components/StackedBars.tsx @@ -4,29 +4,30 @@ import { Bar } from '@/components/shapes/Bar'; import { useChart } from '@/lib/use-chart'; import { useCartesianScales } from '@/components/scales/CartesianScale'; import { useColorScale } from './scales/ColorScale'; -import { RectangleDatum } from 'eazychart-core/src/types'; +import { Direction, RectangleDatum } from 'eazychart-core/src/types'; export interface StackedBarsProps extends SVGAttributes { - xDomainKey: string; - yDomainKeys: string[]; + singleDomainKey: string; + multiDomainKeys: string[]; + direction: Direction.HORIZONTAL | Direction.VERTICAL; } export const StackedBars: FC = ({ - xDomainKey, - yDomainKeys, + singleDomainKey, + multiDomainKeys, + direction = Direction.VERTICAL, ...rest }) => { const { data, dimensions, isRTL } = useChart(); const { xScale, yScale } = useCartesianScales(); const { colorScale } = useColorScale(); - const scaledData = useMemo(() => { - return yDomainKeys.reduce((acc, yDomainKey, index) => { - if (index === 0) { - // @ts-ignore + const scaledDataDict = useMemo(() => { + return multiDomainKeys.reduce( + (acc: { [key: string]: RectangleDatum[] }, yDomainKey) => { acc[yDomainKey] = scaleRectangleData( data, - xDomainKey, + singleDomainKey, yDomainKey, xScale, yScale, @@ -35,31 +36,13 @@ export const StackedBars: FC = ({ isRTL ); return acc; - } else { - // @ts-ignore - acc[yDomainKey] = scaleRectangleData( - data, - xDomainKey, - yDomainKey, - xScale, - yScale, - colorScale, - dimensions, - isRTL - ).map((datum, id) => { - // @ts-ignore - const height0 = acc[yDomainKeys[index - 1]][id].height; - return datum.height > height0 - ? { ...datum, height: datum.height - height0 } - : datum; - }); - return acc; - } - }, {}); + }, + {} + ); }, [ data, - yDomainKeys, - xDomainKey, + multiDomainKeys, + singleDomainKey, xScale, yScale, colorScale, @@ -68,19 +51,45 @@ export const StackedBars: FC = ({ ]); return ( - - {yDomainKeys.map((yDomainKey) => { - // @ts-ignore - const shapeData = scaledData[yDomainKey] as RectangleDatum[]; - const color = colorScale.scale(yDomainKey); - return shapeData.map((shapeDatum: RectangleDatum, index: number) => { - return ( - - ); - }); + + {data.map((_datum, idx) => { + return ( + // The Domain keys still needs to be sorted. + // We create a bar for every data row + // Each bar is a stack bar where every element is a domain key. + + {multiDomainKeys.map((yDomainKey, domainIdx) => { + const color = colorScale.scale(yDomainKey); + const shapeDatum = + // The height of the current bar will be computed + // the height will be currentDKHeight - previousDKHeight + // The first domain key will not be affected. + domainIdx !== 0 + ? { + ...scaledDataDict[yDomainKey][idx], + width: + direction === Direction.HORIZONTAL + ? scaledDataDict[yDomainKey][idx].width - + scaledDataDict[multiDomainKeys[domainIdx - 1]][idx] + .width + : scaledDataDict[yDomainKey][idx].width, + height: + direction === Direction.VERTICAL + ? scaledDataDict[yDomainKey][idx].height - + scaledDataDict[multiDomainKeys[domainIdx - 1]][idx] + .height + : scaledDataDict[yDomainKey][idx].height, + } + : scaledDataDict[yDomainKey][idx]; + return ( + + ); + })} + + ); })} ); diff --git a/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx b/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx index ef435fd..047b004 100644 --- a/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx +++ b/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx @@ -96,7 +96,7 @@ export const StackedColumn = StackedColumnTemplate.bind({}); const StackedColumnArguments = { ...defaultArguments, yAxis: { - domainKeys: ['value1', 'value', 'value2'], + domainKeys: ['value', 'value1', 'value2'], title: 'Temperature', tickFormat: (d: number) => `${d}°`, }, diff --git a/packages/ez-react/src/recipes/column/StackedColumnChart.tsx b/packages/ez-react/src/recipes/column/StackedColumnChart.tsx index 6d74e9b..9a2c43d 100644 --- a/packages/ez-react/src/recipes/column/StackedColumnChart.tsx +++ b/packages/ez-react/src/recipes/column/StackedColumnChart.tsx @@ -1,11 +1,10 @@ import { Legend, LegendProps } from '@/components/addons/legend/Legend'; import { Tooltip, TooltipProps } from '@/components/addons/tooltip/Tooltip'; -import { Bars } from '@/components/Bars'; import { Chart } from '@/components/Chart'; import { Axis } from '@/components/scales/Axis'; import { CartesianScale } from '@/components/scales/CartesianScale'; import { ColorScale } from '@/components/scales/ColorScale'; -import { Bar } from '@/components/shapes/Bar'; +import { StackedBars } from '@/components/StackedBars'; import { useToggableDomainKey } from '@/lib/useToggableDomainKey'; import { ScaleBand, ScaleLinear } from 'eazychart-core/src/scales'; import { @@ -17,7 +16,6 @@ import { Dimensions, Direction, AxisConfigMulti, - RectangleDatum, } from 'eazychart-core/src/types'; import React, { FC, SVGAttributes } from 'react'; @@ -67,7 +65,6 @@ export const StackedColumnChart: FC = ({ }) => { const { activeDomainKeys, activeDomain, toggleDomainKey } = useToggableDomainKey(data, yAxis.domainKeys); - let previousShapeData: RectangleDatum[] = []; return ( = ({ }} > - {activeDomainKeys.map((activeDomaiKey) => { - return ( - // we need to find a way to sort the the data columns so that it shows bars in the corret manner - { - const color = colorScale.scale(activeDomaiKey); - const newShapeData = shapeData.map((shapeDatum, index) => - previousShapeData[index] - ? { - ...shapeDatum, - height: - shapeDatum.height > - previousShapeData[index].height - ? shapeDatum.height - - previousShapeData[index].height - : shapeDatum.height, - } - : shapeDatum - ); - previousShapeData = [...shapeData]; - return newShapeData.map((shapeDatum) => ( - - )); - }, - }} - /> - ); - })} + Date: Tue, 25 Oct 2022 13:42:18 +0100 Subject: [PATCH 03/16] fix: apply requested changes --- packages/ez-core/src/sample-data.ts | 12 ++-- .../snapshots/components/Bars.spec.tsx.snap | 8 +-- .../components/Bubbles.spec.tsx.snap | 4 +- .../snapshots/components/Chart.spec.tsx.snap | 2 +- .../components/IrregularArcs.spec.tsx.snap | 6 +- .../snapshots/components/Points.spec.tsx.snap | 4 +- .../components/addons/Tooltip.spec.tsx.snap | 8 +-- .../recipes/bar/BarChart.spec.tsx.snap | 58 ++++++----------- .../recipes/column/ColumnChart.spec.tsx.snap | 60 ++++++------------ .../column/LineColumnChart.spec.tsx.snap | 60 ++++++------------ .../column/StackedColumnChart.spec.tsx.snap | 4 +- .../pie/IrregularPieChart.spec.tsx.snap | 6 +- .../recipes/pie/PieChart.spec.tsx.snap | 6 +- .../recipes/pie/RadialChart.spec.tsx.snap | 4 +- .../recipes/pie/SemiCircleChart.spec.tsx.snap | 6 +- .../recipes/scatter/BubbleChart.spec.tsx.snap | 58 ++++++----------- .../scatter/ScatterChart.spec.tsx.snap | 58 ++++++----------- packages/ez-dev/storybook/data.ts | 19 +++--- .../ez-react/src/components/StackedBars.tsx | 62 ++++++++++--------- .../src/recipes/column/StackedColumnChart.tsx | 4 +- .../column/StackedColumnChart.spec.tsx | 2 +- 21 files changed, 179 insertions(+), 272 deletions(-) diff --git a/packages/ez-core/src/sample-data.ts b/packages/ez-core/src/sample-data.ts index 429b693..23ceb0e 100644 --- a/packages/ez-core/src/sample-data.ts +++ b/packages/ez-core/src/sample-data.ts @@ -22,22 +22,22 @@ export const rawData: RawData = [ { id: '1', label: 'Alpha', - value0: 35, - value: 50, + value: 35, + value1: 50, amount: 10, }, { id: '2', label: 'Beta', - value0: 80, - value: 100, + value: 80, + value1: 100, amount: 20, }, { id: '3', label: 'Gamma', - value0: 60, - value: 75, + value: 60, + value1: 75, amount: 30, }, ]; diff --git a/packages/ez-dev/jest/snapshots/components/Bars.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/Bars.spec.tsx.snap index b8cd7af..f0546ce 100644 --- a/packages/ez-dev/jest/snapshots/components/Bars.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/Bars.spec.tsx.snap @@ -6,10 +6,10 @@ exports[`Bars renders svg rects with the right coordinates / dimensions 1`] = ` class="ez-bar" data-testid="ez-bar" fill="red" - height="100" + height="150" width="266.6666666666667" x="0" - y="500" + y="450" > diff --git a/packages/ez-dev/jest/snapshots/components/Bubbles.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/Bubbles.spec.tsx.snap index 7970176..2b73c6b 100644 --- a/packages/ez-dev/jest/snapshots/components/Bubbles.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/Bubbles.spec.tsx.snap @@ -5,7 +5,7 @@ exports[`Bubbles renders svg bubbles with the right coordinates / path 1`] = `
- [{"id":"1","label":"Alpha","value0":35,"value":50,"amount":10},{"id":"2","label":"Beta","value0":80,"value":100,"amount":20},{"id":"3","label":"Gamma","value0":60,"value":75,"amount":30}] + [{"id":"1","label":"Alpha","value":35,"value1":50,"amount":10},{"id":"2","label":"Beta","value":80,"value1":100,"amount":20},{"id":"3","label":"Gamma","value":60,"value1":75,"amount":30}]
diff --git a/packages/ez-dev/jest/snapshots/components/IrregularArcs.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/IrregularArcs.spec.tsx.snap index 6a48946..d7e9fd4 100644 --- a/packages/ez-dev/jest/snapshots/components/IrregularArcs.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/IrregularArcs.spec.tsx.snap @@ -7,7 +7,7 @@ exports[`IrregularArcs renders svg irregular arcs with the right coordinates / d >
-
+
- value0 : + value :
35
-
+
- value : + value1 :
50 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..1676afe 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 @@ -41,7 +41,7 @@ exports[`BarChart renders a bar chart 1`] = ` data-testid="ez-bar" fill="green" height="100.00000000000001" - width="250" + width="277.77777777777777" x="0" y="25" > @@ -75,32 +75,12 @@ exports[`BarChart renders a bar chart 1`] = ` transform="translate(0, 0) rotate(0 0 0)" y="9" > - 50 - - - - - - - 55 + 35 - 60 + 40 - 65 + 45 - 70 + 50 - 75 + 55 - 80 + 60 - 85 + 65 - 90 + 70 - 95 + 75 - 100 + 80 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..283d2d0 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 @@ -40,10 +40,10 @@ exports[`ColumnChart renders a column chart 1`] = ` class="ez-bar" data-testid="ez-bar" fill="green" - height="200" + height="222.22222222222223" width="125" x="343.75" - y="200" + y="177.77777777777777" > @@ -146,32 +146,12 @@ exports[`ColumnChart renders a column chart 1`] = ` transform="translate(0, 0) rotate(-90 0 0)" x="-9" > - 50 - - - - - - - 55 + 35 - 60 + 40 - 65 + 45 - 70 + 50 - 75 + 55 - 80 + 60 - 85 + 65 - 90 + 70 - 95 + 75 - 100 + 80 diff --git a/packages/ez-dev/jest/snapshots/recipes/column/LineColumnChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/column/LineColumnChart.spec.tsx.snap index 9e73e50..ce24f85 100644 --- a/packages/ez-dev/jest/snapshots/recipes/column/LineColumnChart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/recipes/column/LineColumnChart.spec.tsx.snap @@ -40,10 +40,10 @@ exports[`LineColumnChart renders a line & column chart 1`] = ` class="ez-bar" data-testid="ez-bar" fill="green" - height="200" + height="222.22222222222223" width="125" x="343.75" - y="200" + y="177.77777777777777" > @@ -146,12 +146,12 @@ exports[`LineColumnChart renders a line & column chart 1`] = ` transform="translate(0, 0) rotate(-90 0 0)" x="-9" > - 50 + 35 - 55 + 40 - 60 + 45 - 65 - - - - - - - 70 + 50 - 75 + 55 - 80 + 60 - 85 + 65 - 90 + 70 - 95 + 75 - 100 + 80 diff --git a/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap index cbf785c..81de05a 100644 --- a/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap @@ -461,7 +461,7 @@ exports[`StackedColumnChart renders a stacked column chart 1`] = ` >
- value0 + value
- value + value1
diff --git a/packages/ez-dev/jest/snapshots/recipes/pie/IrregularPieChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/pie/IrregularPieChart.spec.tsx.snap index b401dc4..b2b4d70 100644 --- a/packages/ez-dev/jest/snapshots/recipes/pie/IrregularPieChart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/recipes/pie/IrregularPieChart.spec.tsx.snap @@ -21,7 +21,7 @@ exports[`IrregularPieChart renders a irregular pie chart 1`] = ` > - 50 - - - - - - - 55 + 35 - 60 + 40 - 65 + 45 - 70 + 50 - 75 + 55 - 80 + 60 - 85 + 65 - 90 + 70 - 95 + 75 - 100 + 80 diff --git a/packages/ez-dev/jest/snapshots/recipes/scatter/ScatterChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/scatter/ScatterChart.spec.tsx.snap index c5d51b1..9b1b7d2 100644 --- a/packages/ez-dev/jest/snapshots/recipes/scatter/ScatterChart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/recipes/scatter/ScatterChart.spec.tsx.snap @@ -39,7 +39,7 @@ exports[`ScatterChart renders a scatter chart 1`] = ` - 50 - - - - - - - 55 + 35 - 60 + 40 - 65 + 45 - 70 + 50 - 75 + 55 - 80 + 60 - 85 + 65 - 90 + 70 - 95 + 75 - 100 + 80 diff --git a/packages/ez-dev/storybook/data.ts b/packages/ez-dev/storybook/data.ts index 2bc9f5a..789b21e 100644 --- a/packages/ez-dev/storybook/data.ts +++ b/packages/ez-dev/storybook/data.ts @@ -1,5 +1,8 @@ -import { AnimationOptions, ChartPadding, RawData } from 'eazychart-core/src/types'; - +import { + AnimationOptions, + ChartPadding, + RawData, +} from 'eazychart-core/src/types'; export const dimensions = { width: 800, @@ -8,40 +11,40 @@ export const dimensions = { export const rawData: RawData = [ { + value: 5, value1: 9, - value: 5, - value2: 15, + value2: 15, name: 'Alpha', id: '1', v: 2, }, { + value: 20, value1: 45, - value: 20, value2: 56, name: 'Beta', id: '2', v: 5, }, { + value: 15, value1: 29, - value: 15, value2: 33, name: 'Gamma', id: '3', v: 10, }, { + value: 18, value1: 30, - value: 18, value2: 40, name: 'Delta', id: '4', v: 4, }, { + value: 30, value1: 50, - value: 30, value2: 70, name: 'Epsilon', id: '5', diff --git a/packages/ez-react/src/components/StackedBars.tsx b/packages/ez-react/src/components/StackedBars.tsx index 2b21253..3453d97 100644 --- a/packages/ez-react/src/components/StackedBars.tsx +++ b/packages/ez-react/src/components/StackedBars.tsx @@ -7,14 +7,14 @@ import { useColorScale } from './scales/ColorScale'; import { Direction, RectangleDatum } from 'eazychart-core/src/types'; export interface StackedBarsProps extends SVGAttributes { - singleDomainKey: string; - multiDomainKeys: string[]; + domainKey: string; + stackDomainKeys: string[]; direction: Direction.HORIZONTAL | Direction.VERTICAL; } export const StackedBars: FC = ({ - singleDomainKey, - multiDomainKeys, + domainKey, + stackDomainKeys, direction = Direction.VERTICAL, ...rest }) => { @@ -23,11 +23,11 @@ export const StackedBars: FC = ({ const { colorScale } = useColorScale(); const scaledDataDict = useMemo(() => { - return multiDomainKeys.reduce( + return stackDomainKeys.reduce( (acc: { [key: string]: RectangleDatum[] }, yDomainKey) => { acc[yDomainKey] = scaleRectangleData( data, - singleDomainKey, + domainKey, yDomainKey, xScale, yScale, @@ -41,8 +41,8 @@ export const StackedBars: FC = ({ ); }, [ data, - multiDomainKeys, - singleDomainKey, + stackDomainKeys, + domainKey, xScale, yScale, colorScale, @@ -58,29 +58,33 @@ export const StackedBars: FC = ({ // We create a bar for every data row // Each bar is a stack bar where every element is a domain key. - {multiDomainKeys.map((yDomainKey, domainIdx) => { + {stackDomainKeys.map((yDomainKey, domainIdx) => { const color = colorScale.scale(yDomainKey); - const shapeDatum = - // The height of the current bar will be computed - // the height will be currentDKHeight - previousDKHeight - // The first domain key will not be affected. + const scaledData = scaledDataDict[yDomainKey][idx]; + // The first domain key will not be affected. + const previousRectWidth = + domainIdx !== 0 + ? scaledDataDict[stackDomainKeys[domainIdx - 1]][idx].width + : 0; + const previousRectHeight = domainIdx !== 0 - ? { - ...scaledDataDict[yDomainKey][idx], - width: - direction === Direction.HORIZONTAL - ? scaledDataDict[yDomainKey][idx].width - - scaledDataDict[multiDomainKeys[domainIdx - 1]][idx] - .width - : scaledDataDict[yDomainKey][idx].width, - height: - direction === Direction.VERTICAL - ? scaledDataDict[yDomainKey][idx].height - - scaledDataDict[multiDomainKeys[domainIdx - 1]][idx] - .height - : scaledDataDict[yDomainKey][idx].height, - } - : scaledDataDict[yDomainKey][idx]; + ? scaledDataDict[stackDomainKeys[domainIdx - 1]][idx].height + : 0; + const shapeDatum = + // The height or the width of the current bar will be computed depending to the orientaion + // the height will be currentDKHeight - previousDKHeight (same for the width) + { + ...scaledData, + width: + direction === Direction.HORIZONTAL + ? scaledData.width - previousRectWidth + : scaledData.width, + height: + direction === Direction.VERTICAL + ? scaledData.height - previousRectHeight + : scaledData.height, + }; + return ( = ({ > diff --git a/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx b/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx index 3716ced..76a0bf5 100644 --- a/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx +++ b/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx @@ -16,7 +16,7 @@ describe('StackedColumnChart', () => { domainKey: 'label', }} yAxis={{ - domainKeys: ['value0', 'value'], + domainKeys: ['value', 'value1'], }} animationOptions={{ easing: 'easeBack', From 37df1f48f728cb78d592c949982211fd3ffcaeac Mon Sep 17 00:00:00 2001 From: Mohamed Marrouchi Date: Tue, 25 Oct 2022 07:29:10 +0100 Subject: [PATCH 04/16] feat: add stacked bar column chart (react) --- packages/ez-core/src/sample-data.ts | 3 + .../snapshots/components/Chart.spec.tsx.snap | 2 +- .../components/addons/Tooltip.spec.tsx.snap | 8 + .../column/StackedColumnChart.spec.tsx.snap | 485 ++++++++++++++++++ packages/ez-dev/storybook/data.ts | 10 + packages/ez-react/src/components/Bars.tsx | 39 +- .../ez-react/src/components/StackedBars.tsx | 87 ++++ .../recipes/column/ColumnChart.stories.tsx | 25 + .../src/recipes/column/StackedColumnChart.tsx | 152 ++++++ .../column/StackedColumnChart.spec.tsx | 34 ++ 10 files changed, 841 insertions(+), 4 deletions(-) create mode 100644 packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap create mode 100644 packages/ez-react/src/components/StackedBars.tsx create mode 100644 packages/ez-react/src/recipes/column/StackedColumnChart.tsx create mode 100644 packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx diff --git a/packages/ez-core/src/sample-data.ts b/packages/ez-core/src/sample-data.ts index 093a627..429b693 100644 --- a/packages/ez-core/src/sample-data.ts +++ b/packages/ez-core/src/sample-data.ts @@ -22,18 +22,21 @@ export const rawData: RawData = [ { id: '1', label: 'Alpha', + value0: 35, value: 50, amount: 10, }, { id: '2', label: 'Beta', + value0: 80, value: 100, amount: 20, }, { id: '3', label: 'Gamma', + value0: 60, value: 75, amount: 30, }, diff --git a/packages/ez-dev/jest/snapshots/components/Chart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/Chart.spec.tsx.snap index 53c324d..73337bd 100644 --- a/packages/ez-dev/jest/snapshots/components/Chart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/Chart.spec.tsx.snap @@ -44,7 +44,7 @@ exports[`Chart should provide the chart data to the children components 1`] = ` >
- [{"id":"1","label":"Alpha","value":50,"amount":10},{"id":"2","label":"Beta","value":100,"amount":20},{"id":"3","label":"Gamma","value":75,"amount":30}] + [{"id":"1","label":"Alpha","value0":35,"value":50,"amount":10},{"id":"2","label":"Beta","value0":80,"value":100,"amount":20},{"id":"3","label":"Gamma","value0":60,"value":75,"amount":30}]
diff --git a/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap index be39a80..cee7802 100644 --- a/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap @@ -19,6 +19,14 @@ exports[`Tooltip renders the tooltip when a shape is hovered 1`] = ` >
+
+
+ value0 : +
+
+ 35 +
+
value : diff --git a/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap new file mode 100644 index 0000000..7af41c0 --- /dev/null +++ b/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap @@ -0,0 +1,485 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`StackedColumnChart renders a stacked column chart 1`] = ` +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + Alpha + + + + + + + Beta + + + + + + + Gamma + + + + + + + + + + + 35 + + + + + + + 40 + + + + + + + 45 + + + + + + + 50 + + + + + + + 55 + + + + + + + 60 + + + + + + + 65 + + + + + + + 70 + + + + + + + 75 + + + + + + + 80 + + + + + + + 85 + + + + + + + 90 + + + + + + + 95 + + + + + + + 100 + + + + + + +
+
+
+
+
+ + value0 + +
+
+
+
+ + value + +
+
+
+
+
+
+
+`; diff --git a/packages/ez-dev/storybook/data.ts b/packages/ez-dev/storybook/data.ts index a51f0f3..80ff9ed 100644 --- a/packages/ez-dev/storybook/data.ts +++ b/packages/ez-dev/storybook/data.ts @@ -9,30 +9,40 @@ export const dimensions = { export const rawData: RawData = [ { value: 9, + value1: 5, + value2: 15, name: 'Alpha', id: '1', v: 2, }, { value: 45, + value1: 20, + value2: 56, name: 'Beta', id: '2', v: 5, }, { value: 29, + value1: 15, + value2: 33, name: 'Gamma', id: '3', v: 10, }, { value: 30, + value1: 18, + value2: 40, name: 'Delta', id: '4', v: 4, }, { value: 50, + value1: 30, + value2: 70, name: 'Epsilon', id: '5', v: 8, diff --git a/packages/ez-react/src/components/Bars.tsx b/packages/ez-react/src/components/Bars.tsx index 72abebf..9f5b58c 100644 --- a/packages/ez-react/src/components/Bars.tsx +++ b/packages/ez-react/src/components/Bars.tsx @@ -1,16 +1,41 @@ import React, { FC, SVGAttributes, useMemo } from 'react'; -import { scaleRectangleData } from 'eazychart-core/src'; +import { ScaleOrdinal, scaleRectangleData } from 'eazychart-core/src'; import { Bar } from '@/components/shapes/Bar'; import { useChart } from '@/lib/use-chart'; import { useCartesianScales } from '@/components/scales/CartesianScale'; import { useColorScale } from './scales/ColorScale'; +import { + RectangleDatum, + ScaleLinearOrBand, + Dimensions, +} from 'eazychart-core/src/types'; export interface BarsProps extends SVGAttributes { xDomainKey: string; yDomainKey: string; + scopedSlots?: { + default: ({ + shapeData, + scales, + dimensions, + }: { + shapeData: RectangleDatum[]; + scales: { + xScale: ScaleLinearOrBand; + yScale: ScaleLinearOrBand; + colorScale: ScaleOrdinal; + }; + dimensions: Dimensions; + }) => JSX.Element[]; + }; } -export const Bars: FC = ({ xDomainKey, yDomainKey, ...rest }) => { +export const Bars: FC = ({ + xDomainKey, + yDomainKey, + scopedSlots, + ...rest +}) => { const { data, dimensions, isRTL } = useChart(); const { xScale, yScale } = useCartesianScales(); const { colorScale } = useColorScale(); @@ -37,7 +62,15 @@ export const Bars: FC = ({ xDomainKey, yDomainKey, ...rest }) => { isRTL, ]); - return ( + return scopedSlots && scopedSlots.default ? ( + + {scopedSlots.default({ + shapeData: scaledData, + scales: { xScale, yScale, colorScale }, + dimensions, + })} + + ) : ( {scaledData.map((rectDatum) => { return ; diff --git a/packages/ez-react/src/components/StackedBars.tsx b/packages/ez-react/src/components/StackedBars.tsx new file mode 100644 index 0000000..e693a84 --- /dev/null +++ b/packages/ez-react/src/components/StackedBars.tsx @@ -0,0 +1,87 @@ +import React, { FC, SVGAttributes, useMemo } from 'react'; +import { scaleRectangleData } from 'eazychart-core/src'; +import { Bar } from '@/components/shapes/Bar'; +import { useChart } from '@/lib/use-chart'; +import { useCartesianScales } from '@/components/scales/CartesianScale'; +import { useColorScale } from './scales/ColorScale'; +import { RectangleDatum } from 'eazychart-core/src/types'; + +export interface StackedBarsProps extends SVGAttributes { + xDomainKey: string; + yDomainKeys: string[]; +} + +export const StackedBars: FC = ({ + xDomainKey, + yDomainKeys, + ...rest +}) => { + const { data, dimensions, isRTL } = useChart(); + const { xScale, yScale } = useCartesianScales(); + const { colorScale } = useColorScale(); + + const scaledData = useMemo(() => { + return yDomainKeys.reduce((acc, yDomainKey, index) => { + if (index === 0) { + // @ts-ignore + acc[yDomainKey] = scaleRectangleData( + data, + xDomainKey, + yDomainKey, + xScale, + yScale, + colorScale, + dimensions, + isRTL + ); + return acc; + } else { + // @ts-ignore + acc[yDomainKey] = scaleRectangleData( + data, + xDomainKey, + yDomainKey, + xScale, + yScale, + colorScale, + dimensions, + isRTL + ).map((datum, id) => { + // @ts-ignore + const height0 = acc[yDomainKeys[index - 1]][id].height; + return datum.height > height0 + ? { ...datum, height: datum.height - height0 } + : datum; + }); + return acc; + } + }, {}); + }, [ + data, + yDomainKeys, + xDomainKey, + xScale, + yScale, + colorScale, + dimensions, + isRTL, + ]); + + return ( + + {yDomainKeys.map((yDomainKey) => { + // @ts-ignore + const shapeData = scaledData[yDomainKey] as RectangleDatum[]; + const color = colorScale.scale(yDomainKey); + return shapeData.map((shapeDatum: RectangleDatum, index: number) => { + return ( + + ); + }); + })} + + ); +}; diff --git a/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx b/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx index 3cc8395..ef435fd 100644 --- a/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx +++ b/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx @@ -7,6 +7,10 @@ import { } from '@/recipes/column/LineColumnChart'; import { baseChartArgTypes, ChartWrapper } from '@/lib/storybook-utils'; import { colors, rawData } from 'eazychart-dev/storybook/data'; +import { + StackedColumnChart, + StackedColumnChartProps, +} from './StackedColumnChart'; const meta: Meta = { id: '4', @@ -36,6 +40,14 @@ const LineColumnTemplate: Story = (args) => { ); }; +const StackedColumnTemplate: Story = (args) => { + return ( + + + + ); +}; + // 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 export const Default = DefaultTemplate.bind({}); @@ -78,3 +90,16 @@ const lineColumnArguments = { }; LineColumn.args = lineColumnArguments; + +export const StackedColumn = StackedColumnTemplate.bind({}); + +const StackedColumnArguments = { + ...defaultArguments, + yAxis: { + domainKeys: ['value1', 'value', 'value2'], + title: 'Temperature', + tickFormat: (d: number) => `${d}°`, + }, +}; + +StackedColumn.args = StackedColumnArguments; diff --git a/packages/ez-react/src/recipes/column/StackedColumnChart.tsx b/packages/ez-react/src/recipes/column/StackedColumnChart.tsx new file mode 100644 index 0000000..6d74e9b --- /dev/null +++ b/packages/ez-react/src/recipes/column/StackedColumnChart.tsx @@ -0,0 +1,152 @@ +import { Legend, LegendProps } from '@/components/addons/legend/Legend'; +import { Tooltip, TooltipProps } from '@/components/addons/tooltip/Tooltip'; +import { Bars } from '@/components/Bars'; +import { Chart } from '@/components/Chart'; +import { Axis } from '@/components/scales/Axis'; +import { CartesianScale } from '@/components/scales/CartesianScale'; +import { ColorScale } from '@/components/scales/ColorScale'; +import { Bar } from '@/components/shapes/Bar'; +import { useToggableDomainKey } from '@/lib/useToggableDomainKey'; +import { ScaleBand, ScaleLinear } from 'eazychart-core/src/scales'; +import { + RawData, + AnimationOptions, + ChartPadding, + AxisConfig, + Position, + Dimensions, + Direction, + AxisConfigMulti, + RectangleDatum, +} from 'eazychart-core/src/types'; +import React, { FC, SVGAttributes } from 'react'; + +export interface StackedColumnChartProps extends SVGAttributes { + data: RawData; + colors?: string[]; + animationOptions?: AnimationOptions; + padding?: ChartPadding; + isRTL?: boolean; + xAxis?: AxisConfig; + yAxis?: AxisConfigMulti; + dimensions?: Partial; + scopedSlots?: { + LegendComponent: React.FC; + TooltipComponent: React.FC; + }; +} + +export const StackedColumnChart: FC = ({ + data, + colors = ['#339999', '#993399', '#333399'], + animationOptions = { + easing: 'easeBack', + duration: 400, + delay: 0, + }, + padding = { + left: 150, + bottom: 100, + right: 150, + top: 100, + }, + xAxis = { + domainKey: 'name', + position: Position.BOTTOM, + }, + yAxis = { + domainKeys: ['value', 'value1'], + position: Position.LEFT, + }, + isRTL = false, + dimensions = {}, + scopedSlots = { + LegendComponent: Legend, + TooltipComponent: Tooltip, + }, +}) => { + const { activeDomainKeys, activeDomain, toggleDomainKey } = + useToggableDomainKey(data, yAxis.domainKeys); + let previousShapeData: RectangleDatum[] = []; + + return ( + + + + {activeDomainKeys.map((activeDomaiKey) => { + return ( + // we need to find a way to sort the the data columns so that it shows bars in the corret manner + { + const color = colorScale.scale(activeDomaiKey); + const newShapeData = shapeData.map((shapeDatum, index) => + previousShapeData[index] + ? { + ...shapeDatum, + height: + shapeDatum.height > + previousShapeData[index].height + ? shapeDatum.height - + previousShapeData[index].height + : shapeDatum.height, + } + : shapeDatum + ); + previousShapeData = [...shapeData]; + return newShapeData.map((shapeDatum) => ( + + )); + }, + }} + /> + ); + })} + + + + + + ); +}; diff --git a/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx b/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx new file mode 100644 index 0000000..3716ced --- /dev/null +++ b/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { dimensions, rawData } from 'eazychart-core/src/sample-data'; +import { act, render, RenderResult, waitFor } from '@testing-library/react'; +import 'tests/mocks/ResizeObserver'; +import { StackedColumnChart } from '@/recipes/column/StackedColumnChart'; + +describe('StackedColumnChart', () => { + it('renders a stacked column chart', async () => { + let wrapper: RenderResult; + act(() => { + wrapper = render( + + ); + }); + + await waitFor(() => { + expect(wrapper.container.innerHTML).toMatchSnapshot(); + }); + }); +}); From 453ccb5f2fd085d905ed1154bf395f294c409bf2 Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Tue, 25 Oct 2022 11:41:37 +0100 Subject: [PATCH 05/16] fix: apply requested changes --- .../column/StackedColumnChart.spec.tsx.snap | 128 +++++++++--------- packages/ez-dev/storybook/data.ts | 20 +-- packages/ez-react/src/components/Bars.tsx | 22 ++- .../ez-react/src/components/StackedBars.tsx | 101 +++++++------- .../recipes/column/ColumnChart.stories.tsx | 2 +- .../src/recipes/column/StackedColumnChart.tsx | 41 +----- 6 files changed, 148 insertions(+), 166 deletions(-) diff --git a/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap index 7af41c0..cbf785c 100644 --- a/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap @@ -16,68 +16,72 @@ exports[`StackedColumnChart renders a stacked column chart 1`] = ` - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + = ({ isRTL, ]); - return scopedSlots && scopedSlots.default ? ( - - {scopedSlots.default({ - shapeData: scaledData, - scales: { xScale, yScale, colorScale }, - dimensions, - })} - - ) : ( + return ( - {scaledData.map((rectDatum) => { - return ; - })} + {scopedSlots && scopedSlots.default + ? scopedSlots.default({ + shapeData: scaledData, + scales: { xScale, yScale, colorScale }, + dimensions, + }) + : scaledData.map((rectDatum) => { + return ; + })} ); }; diff --git a/packages/ez-react/src/components/StackedBars.tsx b/packages/ez-react/src/components/StackedBars.tsx index e693a84..2b21253 100644 --- a/packages/ez-react/src/components/StackedBars.tsx +++ b/packages/ez-react/src/components/StackedBars.tsx @@ -4,29 +4,30 @@ import { Bar } from '@/components/shapes/Bar'; import { useChart } from '@/lib/use-chart'; import { useCartesianScales } from '@/components/scales/CartesianScale'; import { useColorScale } from './scales/ColorScale'; -import { RectangleDatum } from 'eazychart-core/src/types'; +import { Direction, RectangleDatum } from 'eazychart-core/src/types'; export interface StackedBarsProps extends SVGAttributes { - xDomainKey: string; - yDomainKeys: string[]; + singleDomainKey: string; + multiDomainKeys: string[]; + direction: Direction.HORIZONTAL | Direction.VERTICAL; } export const StackedBars: FC = ({ - xDomainKey, - yDomainKeys, + singleDomainKey, + multiDomainKeys, + direction = Direction.VERTICAL, ...rest }) => { const { data, dimensions, isRTL } = useChart(); const { xScale, yScale } = useCartesianScales(); const { colorScale } = useColorScale(); - const scaledData = useMemo(() => { - return yDomainKeys.reduce((acc, yDomainKey, index) => { - if (index === 0) { - // @ts-ignore + const scaledDataDict = useMemo(() => { + return multiDomainKeys.reduce( + (acc: { [key: string]: RectangleDatum[] }, yDomainKey) => { acc[yDomainKey] = scaleRectangleData( data, - xDomainKey, + singleDomainKey, yDomainKey, xScale, yScale, @@ -35,31 +36,13 @@ export const StackedBars: FC = ({ isRTL ); return acc; - } else { - // @ts-ignore - acc[yDomainKey] = scaleRectangleData( - data, - xDomainKey, - yDomainKey, - xScale, - yScale, - colorScale, - dimensions, - isRTL - ).map((datum, id) => { - // @ts-ignore - const height0 = acc[yDomainKeys[index - 1]][id].height; - return datum.height > height0 - ? { ...datum, height: datum.height - height0 } - : datum; - }); - return acc; - } - }, {}); + }, + {} + ); }, [ data, - yDomainKeys, - xDomainKey, + multiDomainKeys, + singleDomainKey, xScale, yScale, colorScale, @@ -68,19 +51,45 @@ export const StackedBars: FC = ({ ]); return ( - - {yDomainKeys.map((yDomainKey) => { - // @ts-ignore - const shapeData = scaledData[yDomainKey] as RectangleDatum[]; - const color = colorScale.scale(yDomainKey); - return shapeData.map((shapeDatum: RectangleDatum, index: number) => { - return ( - - ); - }); + + {data.map((_datum, idx) => { + return ( + // The Domain keys still needs to be sorted. + // We create a bar for every data row + // Each bar is a stack bar where every element is a domain key. + + {multiDomainKeys.map((yDomainKey, domainIdx) => { + const color = colorScale.scale(yDomainKey); + const shapeDatum = + // The height of the current bar will be computed + // the height will be currentDKHeight - previousDKHeight + // The first domain key will not be affected. + domainIdx !== 0 + ? { + ...scaledDataDict[yDomainKey][idx], + width: + direction === Direction.HORIZONTAL + ? scaledDataDict[yDomainKey][idx].width - + scaledDataDict[multiDomainKeys[domainIdx - 1]][idx] + .width + : scaledDataDict[yDomainKey][idx].width, + height: + direction === Direction.VERTICAL + ? scaledDataDict[yDomainKey][idx].height - + scaledDataDict[multiDomainKeys[domainIdx - 1]][idx] + .height + : scaledDataDict[yDomainKey][idx].height, + } + : scaledDataDict[yDomainKey][idx]; + return ( + + ); + })} + + ); })} ); diff --git a/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx b/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx index ef435fd..047b004 100644 --- a/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx +++ b/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx @@ -96,7 +96,7 @@ export const StackedColumn = StackedColumnTemplate.bind({}); const StackedColumnArguments = { ...defaultArguments, yAxis: { - domainKeys: ['value1', 'value', 'value2'], + domainKeys: ['value', 'value1', 'value2'], title: 'Temperature', tickFormat: (d: number) => `${d}°`, }, diff --git a/packages/ez-react/src/recipes/column/StackedColumnChart.tsx b/packages/ez-react/src/recipes/column/StackedColumnChart.tsx index 6d74e9b..9a2c43d 100644 --- a/packages/ez-react/src/recipes/column/StackedColumnChart.tsx +++ b/packages/ez-react/src/recipes/column/StackedColumnChart.tsx @@ -1,11 +1,10 @@ import { Legend, LegendProps } from '@/components/addons/legend/Legend'; import { Tooltip, TooltipProps } from '@/components/addons/tooltip/Tooltip'; -import { Bars } from '@/components/Bars'; import { Chart } from '@/components/Chart'; import { Axis } from '@/components/scales/Axis'; import { CartesianScale } from '@/components/scales/CartesianScale'; import { ColorScale } from '@/components/scales/ColorScale'; -import { Bar } from '@/components/shapes/Bar'; +import { StackedBars } from '@/components/StackedBars'; import { useToggableDomainKey } from '@/lib/useToggableDomainKey'; import { ScaleBand, ScaleLinear } from 'eazychart-core/src/scales'; import { @@ -17,7 +16,6 @@ import { Dimensions, Direction, AxisConfigMulti, - RectangleDatum, } from 'eazychart-core/src/types'; import React, { FC, SVGAttributes } from 'react'; @@ -67,7 +65,6 @@ export const StackedColumnChart: FC = ({ }) => { const { activeDomainKeys, activeDomain, toggleDomainKey } = useToggableDomainKey(data, yAxis.domainKeys); - let previousShapeData: RectangleDatum[] = []; return ( = ({ }} > - {activeDomainKeys.map((activeDomaiKey) => { - return ( - // we need to find a way to sort the the data columns so that it shows bars in the corret manner - { - const color = colorScale.scale(activeDomaiKey); - const newShapeData = shapeData.map((shapeDatum, index) => - previousShapeData[index] - ? { - ...shapeDatum, - height: - shapeDatum.height > - previousShapeData[index].height - ? shapeDatum.height - - previousShapeData[index].height - : shapeDatum.height, - } - : shapeDatum - ); - previousShapeData = [...shapeData]; - return newShapeData.map((shapeDatum) => ( - - )); - }, - }} - /> - ); - })} + Date: Tue, 25 Oct 2022 13:42:18 +0100 Subject: [PATCH 06/16] fix: apply requested changes --- packages/ez-core/src/sample-data.ts | 12 ++-- .../snapshots/components/Bars.spec.tsx.snap | 8 +-- .../components/Bubbles.spec.tsx.snap | 4 +- .../snapshots/components/Chart.spec.tsx.snap | 2 +- .../components/IrregularArcs.spec.tsx.snap | 6 +- .../snapshots/components/Points.spec.tsx.snap | 4 +- .../components/addons/Tooltip.spec.tsx.snap | 8 +-- .../recipes/bar/BarChart.spec.tsx.snap | 58 ++++++----------- .../recipes/column/ColumnChart.spec.tsx.snap | 60 ++++++------------ .../column/LineColumnChart.spec.tsx.snap | 60 ++++++------------ .../column/StackedColumnChart.spec.tsx.snap | 4 +- .../pie/IrregularPieChart.spec.tsx.snap | 6 +- .../recipes/pie/PieChart.spec.tsx.snap | 6 +- .../recipes/pie/RadialChart.spec.tsx.snap | 4 +- .../recipes/pie/SemiCircleChart.spec.tsx.snap | 6 +- .../recipes/scatter/BubbleChart.spec.tsx.snap | 58 ++++++----------- .../scatter/ScatterChart.spec.tsx.snap | 58 ++++++----------- packages/ez-dev/storybook/data.ts | 19 +++--- .../ez-react/src/components/StackedBars.tsx | 62 ++++++++++--------- .../src/recipes/column/StackedColumnChart.tsx | 4 +- .../column/StackedColumnChart.spec.tsx | 2 +- 21 files changed, 179 insertions(+), 272 deletions(-) diff --git a/packages/ez-core/src/sample-data.ts b/packages/ez-core/src/sample-data.ts index 429b693..23ceb0e 100644 --- a/packages/ez-core/src/sample-data.ts +++ b/packages/ez-core/src/sample-data.ts @@ -22,22 +22,22 @@ export const rawData: RawData = [ { id: '1', label: 'Alpha', - value0: 35, - value: 50, + value: 35, + value1: 50, amount: 10, }, { id: '2', label: 'Beta', - value0: 80, - value: 100, + value: 80, + value1: 100, amount: 20, }, { id: '3', label: 'Gamma', - value0: 60, - value: 75, + value: 60, + value1: 75, amount: 30, }, ]; diff --git a/packages/ez-dev/jest/snapshots/components/Bars.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/Bars.spec.tsx.snap index b8cd7af..f0546ce 100644 --- a/packages/ez-dev/jest/snapshots/components/Bars.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/Bars.spec.tsx.snap @@ -6,10 +6,10 @@ exports[`Bars renders svg rects with the right coordinates / dimensions 1`] = ` class="ez-bar" data-testid="ez-bar" fill="red" - height="100" + height="150" width="266.6666666666667" x="0" - y="500" + y="450" > diff --git a/packages/ez-dev/jest/snapshots/components/Bubbles.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/Bubbles.spec.tsx.snap index 7970176..2b73c6b 100644 --- a/packages/ez-dev/jest/snapshots/components/Bubbles.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/Bubbles.spec.tsx.snap @@ -5,7 +5,7 @@ exports[`Bubbles renders svg bubbles with the right coordinates / path 1`] = `
- [{"id":"1","label":"Alpha","value0":35,"value":50,"amount":10},{"id":"2","label":"Beta","value0":80,"value":100,"amount":20},{"id":"3","label":"Gamma","value0":60,"value":75,"amount":30}] + [{"id":"1","label":"Alpha","value":35,"value1":50,"amount":10},{"id":"2","label":"Beta","value":80,"value1":100,"amount":20},{"id":"3","label":"Gamma","value":60,"value1":75,"amount":30}]
diff --git a/packages/ez-dev/jest/snapshots/components/IrregularArcs.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/IrregularArcs.spec.tsx.snap index 6a48946..d7e9fd4 100644 --- a/packages/ez-dev/jest/snapshots/components/IrregularArcs.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/IrregularArcs.spec.tsx.snap @@ -7,7 +7,7 @@ exports[`IrregularArcs renders svg irregular arcs with the right coordinates / d >
-
+
- value0 : + value :
35
-
+
- value : + value1 :
50 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..1676afe 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 @@ -41,7 +41,7 @@ exports[`BarChart renders a bar chart 1`] = ` data-testid="ez-bar" fill="green" height="100.00000000000001" - width="250" + width="277.77777777777777" x="0" y="25" > @@ -75,32 +75,12 @@ exports[`BarChart renders a bar chart 1`] = ` transform="translate(0, 0) rotate(0 0 0)" y="9" > - 50 - - - - - - - 55 + 35 - 60 + 40 - 65 + 45 - 70 + 50 - 75 + 55 - 80 + 60 - 85 + 65 - 90 + 70 - 95 + 75 - 100 + 80 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..283d2d0 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 @@ -40,10 +40,10 @@ exports[`ColumnChart renders a column chart 1`] = ` class="ez-bar" data-testid="ez-bar" fill="green" - height="200" + height="222.22222222222223" width="125" x="343.75" - y="200" + y="177.77777777777777" > @@ -146,32 +146,12 @@ exports[`ColumnChart renders a column chart 1`] = ` transform="translate(0, 0) rotate(-90 0 0)" x="-9" > - 50 - - - - - - - 55 + 35 - 60 + 40 - 65 + 45 - 70 + 50 - 75 + 55 - 80 + 60 - 85 + 65 - 90 + 70 - 95 + 75 - 100 + 80 diff --git a/packages/ez-dev/jest/snapshots/recipes/column/LineColumnChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/column/LineColumnChart.spec.tsx.snap index 9e73e50..ce24f85 100644 --- a/packages/ez-dev/jest/snapshots/recipes/column/LineColumnChart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/recipes/column/LineColumnChart.spec.tsx.snap @@ -40,10 +40,10 @@ exports[`LineColumnChart renders a line & column chart 1`] = ` class="ez-bar" data-testid="ez-bar" fill="green" - height="200" + height="222.22222222222223" width="125" x="343.75" - y="200" + y="177.77777777777777" > @@ -146,12 +146,12 @@ exports[`LineColumnChart renders a line & column chart 1`] = ` transform="translate(0, 0) rotate(-90 0 0)" x="-9" > - 50 + 35 - 55 + 40 - 60 + 45 - 65 - - - - - - - 70 + 50 - 75 + 55 - 80 + 60 - 85 + 65 - 90 + 70 - 95 + 75 - 100 + 80 diff --git a/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap index cbf785c..81de05a 100644 --- a/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap @@ -461,7 +461,7 @@ exports[`StackedColumnChart renders a stacked column chart 1`] = ` >
- value0 + value
- value + value1
diff --git a/packages/ez-dev/jest/snapshots/recipes/pie/IrregularPieChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/pie/IrregularPieChart.spec.tsx.snap index b401dc4..b2b4d70 100644 --- a/packages/ez-dev/jest/snapshots/recipes/pie/IrregularPieChart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/recipes/pie/IrregularPieChart.spec.tsx.snap @@ -21,7 +21,7 @@ exports[`IrregularPieChart renders a irregular pie chart 1`] = ` > - 50 - - - - - - - 55 + 35 - 60 + 40 - 65 + 45 - 70 + 50 - 75 + 55 - 80 + 60 - 85 + 65 - 90 + 70 - 95 + 75 - 100 + 80 diff --git a/packages/ez-dev/jest/snapshots/recipes/scatter/ScatterChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/scatter/ScatterChart.spec.tsx.snap index c5d51b1..9b1b7d2 100644 --- a/packages/ez-dev/jest/snapshots/recipes/scatter/ScatterChart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/recipes/scatter/ScatterChart.spec.tsx.snap @@ -39,7 +39,7 @@ exports[`ScatterChart renders a scatter chart 1`] = ` - 50 - - - - - - - 55 + 35 - 60 + 40 - 65 + 45 - 70 + 50 - 75 + 55 - 80 + 60 - 85 + 65 - 90 + 70 - 95 + 75 - 100 + 80 diff --git a/packages/ez-dev/storybook/data.ts b/packages/ez-dev/storybook/data.ts index 2bc9f5a..789b21e 100644 --- a/packages/ez-dev/storybook/data.ts +++ b/packages/ez-dev/storybook/data.ts @@ -1,5 +1,8 @@ -import { AnimationOptions, ChartPadding, RawData } from 'eazychart-core/src/types'; - +import { + AnimationOptions, + ChartPadding, + RawData, +} from 'eazychart-core/src/types'; export const dimensions = { width: 800, @@ -8,40 +11,40 @@ export const dimensions = { export const rawData: RawData = [ { + value: 5, value1: 9, - value: 5, - value2: 15, + value2: 15, name: 'Alpha', id: '1', v: 2, }, { + value: 20, value1: 45, - value: 20, value2: 56, name: 'Beta', id: '2', v: 5, }, { + value: 15, value1: 29, - value: 15, value2: 33, name: 'Gamma', id: '3', v: 10, }, { + value: 18, value1: 30, - value: 18, value2: 40, name: 'Delta', id: '4', v: 4, }, { + value: 30, value1: 50, - value: 30, value2: 70, name: 'Epsilon', id: '5', diff --git a/packages/ez-react/src/components/StackedBars.tsx b/packages/ez-react/src/components/StackedBars.tsx index 2b21253..3453d97 100644 --- a/packages/ez-react/src/components/StackedBars.tsx +++ b/packages/ez-react/src/components/StackedBars.tsx @@ -7,14 +7,14 @@ import { useColorScale } from './scales/ColorScale'; import { Direction, RectangleDatum } from 'eazychart-core/src/types'; export interface StackedBarsProps extends SVGAttributes { - singleDomainKey: string; - multiDomainKeys: string[]; + domainKey: string; + stackDomainKeys: string[]; direction: Direction.HORIZONTAL | Direction.VERTICAL; } export const StackedBars: FC = ({ - singleDomainKey, - multiDomainKeys, + domainKey, + stackDomainKeys, direction = Direction.VERTICAL, ...rest }) => { @@ -23,11 +23,11 @@ export const StackedBars: FC = ({ const { colorScale } = useColorScale(); const scaledDataDict = useMemo(() => { - return multiDomainKeys.reduce( + return stackDomainKeys.reduce( (acc: { [key: string]: RectangleDatum[] }, yDomainKey) => { acc[yDomainKey] = scaleRectangleData( data, - singleDomainKey, + domainKey, yDomainKey, xScale, yScale, @@ -41,8 +41,8 @@ export const StackedBars: FC = ({ ); }, [ data, - multiDomainKeys, - singleDomainKey, + stackDomainKeys, + domainKey, xScale, yScale, colorScale, @@ -58,29 +58,33 @@ export const StackedBars: FC = ({ // We create a bar for every data row // Each bar is a stack bar where every element is a domain key. - {multiDomainKeys.map((yDomainKey, domainIdx) => { + {stackDomainKeys.map((yDomainKey, domainIdx) => { const color = colorScale.scale(yDomainKey); - const shapeDatum = - // The height of the current bar will be computed - // the height will be currentDKHeight - previousDKHeight - // The first domain key will not be affected. + const scaledData = scaledDataDict[yDomainKey][idx]; + // The first domain key will not be affected. + const previousRectWidth = + domainIdx !== 0 + ? scaledDataDict[stackDomainKeys[domainIdx - 1]][idx].width + : 0; + const previousRectHeight = domainIdx !== 0 - ? { - ...scaledDataDict[yDomainKey][idx], - width: - direction === Direction.HORIZONTAL - ? scaledDataDict[yDomainKey][idx].width - - scaledDataDict[multiDomainKeys[domainIdx - 1]][idx] - .width - : scaledDataDict[yDomainKey][idx].width, - height: - direction === Direction.VERTICAL - ? scaledDataDict[yDomainKey][idx].height - - scaledDataDict[multiDomainKeys[domainIdx - 1]][idx] - .height - : scaledDataDict[yDomainKey][idx].height, - } - : scaledDataDict[yDomainKey][idx]; + ? scaledDataDict[stackDomainKeys[domainIdx - 1]][idx].height + : 0; + const shapeDatum = + // The height or the width of the current bar will be computed depending to the orientaion + // the height will be currentDKHeight - previousDKHeight (same for the width) + { + ...scaledData, + width: + direction === Direction.HORIZONTAL + ? scaledData.width - previousRectWidth + : scaledData.width, + height: + direction === Direction.VERTICAL + ? scaledData.height - previousRectHeight + : scaledData.height, + }; + return ( = ({ > diff --git a/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx b/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx index 3716ced..76a0bf5 100644 --- a/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx +++ b/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx @@ -16,7 +16,7 @@ describe('StackedColumnChart', () => { domainKey: 'label', }} yAxis={{ - domainKeys: ['value0', 'value'], + domainKeys: ['value', 'value1'], }} animationOptions={{ easing: 'easeBack', From 782b0431a0625011ef7e37ceaae519aada91490c Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Fri, 28 Oct 2022 14:07:52 +0100 Subject: [PATCH 07/16] fix: area unit test --- packages/ez-dev/jest/snapshots/components/Area.spec.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ez-dev/jest/snapshots/components/Area.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/Area.spec.tsx.snap index 3ba1b28..2ffa394 100644 --- a/packages/ez-dev/jest/snapshots/components/Area.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/Area.spec.tsx.snap @@ -5,7 +5,7 @@ exports[`Area renders svg area with the right coordinates / dimensions 1`] = ` Date: Tue, 25 Oct 2022 07:29:10 +0100 Subject: [PATCH 08/16] feat: add stacked bar column chart (react) --- packages/ez-core/src/sample-data.ts | 3 + .../snapshots/components/Chart.spec.tsx.snap | 2 +- .../components/addons/Tooltip.spec.tsx.snap | 8 + .../column/StackedColumnChart.spec.tsx.snap | 485 ++++++++++++++++++ packages/ez-dev/storybook/data.ts | 10 + packages/ez-react/src/components/Bars.tsx | 39 +- .../ez-react/src/components/StackedBars.tsx | 87 ++++ .../recipes/column/ColumnChart.stories.tsx | 25 + .../src/recipes/column/StackedColumnChart.tsx | 152 ++++++ .../column/StackedColumnChart.spec.tsx | 34 ++ 10 files changed, 841 insertions(+), 4 deletions(-) create mode 100644 packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap create mode 100644 packages/ez-react/src/components/StackedBars.tsx create mode 100644 packages/ez-react/src/recipes/column/StackedColumnChart.tsx create mode 100644 packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx diff --git a/packages/ez-core/src/sample-data.ts b/packages/ez-core/src/sample-data.ts index 093a627..429b693 100644 --- a/packages/ez-core/src/sample-data.ts +++ b/packages/ez-core/src/sample-data.ts @@ -22,18 +22,21 @@ export const rawData: RawData = [ { id: '1', label: 'Alpha', + value0: 35, value: 50, amount: 10, }, { id: '2', label: 'Beta', + value0: 80, value: 100, amount: 20, }, { id: '3', label: 'Gamma', + value0: 60, value: 75, amount: 30, }, diff --git a/packages/ez-dev/jest/snapshots/components/Chart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/Chart.spec.tsx.snap index 53c324d..73337bd 100644 --- a/packages/ez-dev/jest/snapshots/components/Chart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/Chart.spec.tsx.snap @@ -44,7 +44,7 @@ exports[`Chart should provide the chart data to the children components 1`] = ` >
- [{"id":"1","label":"Alpha","value":50,"amount":10},{"id":"2","label":"Beta","value":100,"amount":20},{"id":"3","label":"Gamma","value":75,"amount":30}] + [{"id":"1","label":"Alpha","value0":35,"value":50,"amount":10},{"id":"2","label":"Beta","value0":80,"value":100,"amount":20},{"id":"3","label":"Gamma","value0":60,"value":75,"amount":30}]
diff --git a/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap index be39a80..cee7802 100644 --- a/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap @@ -19,6 +19,14 @@ exports[`Tooltip renders the tooltip when a shape is hovered 1`] = ` >
+
+
+ value0 : +
+
+ 35 +
+
value : diff --git a/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap new file mode 100644 index 0000000..7af41c0 --- /dev/null +++ b/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap @@ -0,0 +1,485 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`StackedColumnChart renders a stacked column chart 1`] = ` +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + Alpha + + + + + + + Beta + + + + + + + Gamma + + + + + + + + + + + 35 + + + + + + + 40 + + + + + + + 45 + + + + + + + 50 + + + + + + + 55 + + + + + + + 60 + + + + + + + 65 + + + + + + + 70 + + + + + + + 75 + + + + + + + 80 + + + + + + + 85 + + + + + + + 90 + + + + + + + 95 + + + + + + + 100 + + + + + + +
+
+
+
+
+ + value0 + +
+
+
+
+ + value + +
+
+
+
+
+
+
+`; diff --git a/packages/ez-dev/storybook/data.ts b/packages/ez-dev/storybook/data.ts index a51f0f3..80ff9ed 100644 --- a/packages/ez-dev/storybook/data.ts +++ b/packages/ez-dev/storybook/data.ts @@ -9,30 +9,40 @@ export const dimensions = { export const rawData: RawData = [ { value: 9, + value1: 5, + value2: 15, name: 'Alpha', id: '1', v: 2, }, { value: 45, + value1: 20, + value2: 56, name: 'Beta', id: '2', v: 5, }, { value: 29, + value1: 15, + value2: 33, name: 'Gamma', id: '3', v: 10, }, { value: 30, + value1: 18, + value2: 40, name: 'Delta', id: '4', v: 4, }, { value: 50, + value1: 30, + value2: 70, name: 'Epsilon', id: '5', v: 8, diff --git a/packages/ez-react/src/components/Bars.tsx b/packages/ez-react/src/components/Bars.tsx index 72abebf..9f5b58c 100644 --- a/packages/ez-react/src/components/Bars.tsx +++ b/packages/ez-react/src/components/Bars.tsx @@ -1,16 +1,41 @@ import React, { FC, SVGAttributes, useMemo } from 'react'; -import { scaleRectangleData } from 'eazychart-core/src'; +import { ScaleOrdinal, scaleRectangleData } from 'eazychart-core/src'; import { Bar } from '@/components/shapes/Bar'; import { useChart } from '@/lib/use-chart'; import { useCartesianScales } from '@/components/scales/CartesianScale'; import { useColorScale } from './scales/ColorScale'; +import { + RectangleDatum, + ScaleLinearOrBand, + Dimensions, +} from 'eazychart-core/src/types'; export interface BarsProps extends SVGAttributes { xDomainKey: string; yDomainKey: string; + scopedSlots?: { + default: ({ + shapeData, + scales, + dimensions, + }: { + shapeData: RectangleDatum[]; + scales: { + xScale: ScaleLinearOrBand; + yScale: ScaleLinearOrBand; + colorScale: ScaleOrdinal; + }; + dimensions: Dimensions; + }) => JSX.Element[]; + }; } -export const Bars: FC = ({ xDomainKey, yDomainKey, ...rest }) => { +export const Bars: FC = ({ + xDomainKey, + yDomainKey, + scopedSlots, + ...rest +}) => { const { data, dimensions, isRTL } = useChart(); const { xScale, yScale } = useCartesianScales(); const { colorScale } = useColorScale(); @@ -37,7 +62,15 @@ export const Bars: FC = ({ xDomainKey, yDomainKey, ...rest }) => { isRTL, ]); - return ( + return scopedSlots && scopedSlots.default ? ( + + {scopedSlots.default({ + shapeData: scaledData, + scales: { xScale, yScale, colorScale }, + dimensions, + })} + + ) : ( {scaledData.map((rectDatum) => { return ; diff --git a/packages/ez-react/src/components/StackedBars.tsx b/packages/ez-react/src/components/StackedBars.tsx new file mode 100644 index 0000000..e693a84 --- /dev/null +++ b/packages/ez-react/src/components/StackedBars.tsx @@ -0,0 +1,87 @@ +import React, { FC, SVGAttributes, useMemo } from 'react'; +import { scaleRectangleData } from 'eazychart-core/src'; +import { Bar } from '@/components/shapes/Bar'; +import { useChart } from '@/lib/use-chart'; +import { useCartesianScales } from '@/components/scales/CartesianScale'; +import { useColorScale } from './scales/ColorScale'; +import { RectangleDatum } from 'eazychart-core/src/types'; + +export interface StackedBarsProps extends SVGAttributes { + xDomainKey: string; + yDomainKeys: string[]; +} + +export const StackedBars: FC = ({ + xDomainKey, + yDomainKeys, + ...rest +}) => { + const { data, dimensions, isRTL } = useChart(); + const { xScale, yScale } = useCartesianScales(); + const { colorScale } = useColorScale(); + + const scaledData = useMemo(() => { + return yDomainKeys.reduce((acc, yDomainKey, index) => { + if (index === 0) { + // @ts-ignore + acc[yDomainKey] = scaleRectangleData( + data, + xDomainKey, + yDomainKey, + xScale, + yScale, + colorScale, + dimensions, + isRTL + ); + return acc; + } else { + // @ts-ignore + acc[yDomainKey] = scaleRectangleData( + data, + xDomainKey, + yDomainKey, + xScale, + yScale, + colorScale, + dimensions, + isRTL + ).map((datum, id) => { + // @ts-ignore + const height0 = acc[yDomainKeys[index - 1]][id].height; + return datum.height > height0 + ? { ...datum, height: datum.height - height0 } + : datum; + }); + return acc; + } + }, {}); + }, [ + data, + yDomainKeys, + xDomainKey, + xScale, + yScale, + colorScale, + dimensions, + isRTL, + ]); + + return ( + + {yDomainKeys.map((yDomainKey) => { + // @ts-ignore + const shapeData = scaledData[yDomainKey] as RectangleDatum[]; + const color = colorScale.scale(yDomainKey); + return shapeData.map((shapeDatum: RectangleDatum, index: number) => { + return ( + + ); + }); + })} + + ); +}; diff --git a/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx b/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx index 3cc8395..ef435fd 100644 --- a/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx +++ b/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx @@ -7,6 +7,10 @@ import { } from '@/recipes/column/LineColumnChart'; import { baseChartArgTypes, ChartWrapper } from '@/lib/storybook-utils'; import { colors, rawData } from 'eazychart-dev/storybook/data'; +import { + StackedColumnChart, + StackedColumnChartProps, +} from './StackedColumnChart'; const meta: Meta = { id: '4', @@ -36,6 +40,14 @@ const LineColumnTemplate: Story = (args) => { ); }; +const StackedColumnTemplate: Story = (args) => { + return ( + + + + ); +}; + // 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 export const Default = DefaultTemplate.bind({}); @@ -78,3 +90,16 @@ const lineColumnArguments = { }; LineColumn.args = lineColumnArguments; + +export const StackedColumn = StackedColumnTemplate.bind({}); + +const StackedColumnArguments = { + ...defaultArguments, + yAxis: { + domainKeys: ['value1', 'value', 'value2'], + title: 'Temperature', + tickFormat: (d: number) => `${d}°`, + }, +}; + +StackedColumn.args = StackedColumnArguments; diff --git a/packages/ez-react/src/recipes/column/StackedColumnChart.tsx b/packages/ez-react/src/recipes/column/StackedColumnChart.tsx new file mode 100644 index 0000000..6d74e9b --- /dev/null +++ b/packages/ez-react/src/recipes/column/StackedColumnChart.tsx @@ -0,0 +1,152 @@ +import { Legend, LegendProps } from '@/components/addons/legend/Legend'; +import { Tooltip, TooltipProps } from '@/components/addons/tooltip/Tooltip'; +import { Bars } from '@/components/Bars'; +import { Chart } from '@/components/Chart'; +import { Axis } from '@/components/scales/Axis'; +import { CartesianScale } from '@/components/scales/CartesianScale'; +import { ColorScale } from '@/components/scales/ColorScale'; +import { Bar } from '@/components/shapes/Bar'; +import { useToggableDomainKey } from '@/lib/useToggableDomainKey'; +import { ScaleBand, ScaleLinear } from 'eazychart-core/src/scales'; +import { + RawData, + AnimationOptions, + ChartPadding, + AxisConfig, + Position, + Dimensions, + Direction, + AxisConfigMulti, + RectangleDatum, +} from 'eazychart-core/src/types'; +import React, { FC, SVGAttributes } from 'react'; + +export interface StackedColumnChartProps extends SVGAttributes { + data: RawData; + colors?: string[]; + animationOptions?: AnimationOptions; + padding?: ChartPadding; + isRTL?: boolean; + xAxis?: AxisConfig; + yAxis?: AxisConfigMulti; + dimensions?: Partial; + scopedSlots?: { + LegendComponent: React.FC; + TooltipComponent: React.FC; + }; +} + +export const StackedColumnChart: FC = ({ + data, + colors = ['#339999', '#993399', '#333399'], + animationOptions = { + easing: 'easeBack', + duration: 400, + delay: 0, + }, + padding = { + left: 150, + bottom: 100, + right: 150, + top: 100, + }, + xAxis = { + domainKey: 'name', + position: Position.BOTTOM, + }, + yAxis = { + domainKeys: ['value', 'value1'], + position: Position.LEFT, + }, + isRTL = false, + dimensions = {}, + scopedSlots = { + LegendComponent: Legend, + TooltipComponent: Tooltip, + }, +}) => { + const { activeDomainKeys, activeDomain, toggleDomainKey } = + useToggableDomainKey(data, yAxis.domainKeys); + let previousShapeData: RectangleDatum[] = []; + + return ( + + + + {activeDomainKeys.map((activeDomaiKey) => { + return ( + // we need to find a way to sort the the data columns so that it shows bars in the corret manner + { + const color = colorScale.scale(activeDomaiKey); + const newShapeData = shapeData.map((shapeDatum, index) => + previousShapeData[index] + ? { + ...shapeDatum, + height: + shapeDatum.height > + previousShapeData[index].height + ? shapeDatum.height - + previousShapeData[index].height + : shapeDatum.height, + } + : shapeDatum + ); + previousShapeData = [...shapeData]; + return newShapeData.map((shapeDatum) => ( + + )); + }, + }} + /> + ); + })} + + + + + + ); +}; diff --git a/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx b/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx new file mode 100644 index 0000000..3716ced --- /dev/null +++ b/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { dimensions, rawData } from 'eazychart-core/src/sample-data'; +import { act, render, RenderResult, waitFor } from '@testing-library/react'; +import 'tests/mocks/ResizeObserver'; +import { StackedColumnChart } from '@/recipes/column/StackedColumnChart'; + +describe('StackedColumnChart', () => { + it('renders a stacked column chart', async () => { + let wrapper: RenderResult; + act(() => { + wrapper = render( + + ); + }); + + await waitFor(() => { + expect(wrapper.container.innerHTML).toMatchSnapshot(); + }); + }); +}); From 6f9516be3988e8cfe2a49c02ed00a74a2dfc5d0d Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Tue, 25 Oct 2022 11:41:37 +0100 Subject: [PATCH 09/16] fix: apply requested changes --- .../column/StackedColumnChart.spec.tsx.snap | 128 +++++++++--------- packages/ez-dev/storybook/data.ts | 20 +-- packages/ez-react/src/components/Bars.tsx | 22 ++- .../ez-react/src/components/StackedBars.tsx | 101 +++++++------- .../recipes/column/ColumnChart.stories.tsx | 2 +- .../src/recipes/column/StackedColumnChart.tsx | 41 +----- 6 files changed, 148 insertions(+), 166 deletions(-) diff --git a/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap index 7af41c0..cbf785c 100644 --- a/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap @@ -16,68 +16,72 @@ exports[`StackedColumnChart renders a stacked column chart 1`] = ` - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + = ({ isRTL, ]); - return scopedSlots && scopedSlots.default ? ( - - {scopedSlots.default({ - shapeData: scaledData, - scales: { xScale, yScale, colorScale }, - dimensions, - })} - - ) : ( + return ( - {scaledData.map((rectDatum) => { - return ; - })} + {scopedSlots && scopedSlots.default + ? scopedSlots.default({ + shapeData: scaledData, + scales: { xScale, yScale, colorScale }, + dimensions, + }) + : scaledData.map((rectDatum) => { + return ; + })} ); }; diff --git a/packages/ez-react/src/components/StackedBars.tsx b/packages/ez-react/src/components/StackedBars.tsx index e693a84..2b21253 100644 --- a/packages/ez-react/src/components/StackedBars.tsx +++ b/packages/ez-react/src/components/StackedBars.tsx @@ -4,29 +4,30 @@ import { Bar } from '@/components/shapes/Bar'; import { useChart } from '@/lib/use-chart'; import { useCartesianScales } from '@/components/scales/CartesianScale'; import { useColorScale } from './scales/ColorScale'; -import { RectangleDatum } from 'eazychart-core/src/types'; +import { Direction, RectangleDatum } from 'eazychart-core/src/types'; export interface StackedBarsProps extends SVGAttributes { - xDomainKey: string; - yDomainKeys: string[]; + singleDomainKey: string; + multiDomainKeys: string[]; + direction: Direction.HORIZONTAL | Direction.VERTICAL; } export const StackedBars: FC = ({ - xDomainKey, - yDomainKeys, + singleDomainKey, + multiDomainKeys, + direction = Direction.VERTICAL, ...rest }) => { const { data, dimensions, isRTL } = useChart(); const { xScale, yScale } = useCartesianScales(); const { colorScale } = useColorScale(); - const scaledData = useMemo(() => { - return yDomainKeys.reduce((acc, yDomainKey, index) => { - if (index === 0) { - // @ts-ignore + const scaledDataDict = useMemo(() => { + return multiDomainKeys.reduce( + (acc: { [key: string]: RectangleDatum[] }, yDomainKey) => { acc[yDomainKey] = scaleRectangleData( data, - xDomainKey, + singleDomainKey, yDomainKey, xScale, yScale, @@ -35,31 +36,13 @@ export const StackedBars: FC = ({ isRTL ); return acc; - } else { - // @ts-ignore - acc[yDomainKey] = scaleRectangleData( - data, - xDomainKey, - yDomainKey, - xScale, - yScale, - colorScale, - dimensions, - isRTL - ).map((datum, id) => { - // @ts-ignore - const height0 = acc[yDomainKeys[index - 1]][id].height; - return datum.height > height0 - ? { ...datum, height: datum.height - height0 } - : datum; - }); - return acc; - } - }, {}); + }, + {} + ); }, [ data, - yDomainKeys, - xDomainKey, + multiDomainKeys, + singleDomainKey, xScale, yScale, colorScale, @@ -68,19 +51,45 @@ export const StackedBars: FC = ({ ]); return ( - - {yDomainKeys.map((yDomainKey) => { - // @ts-ignore - const shapeData = scaledData[yDomainKey] as RectangleDatum[]; - const color = colorScale.scale(yDomainKey); - return shapeData.map((shapeDatum: RectangleDatum, index: number) => { - return ( - - ); - }); + + {data.map((_datum, idx) => { + return ( + // The Domain keys still needs to be sorted. + // We create a bar for every data row + // Each bar is a stack bar where every element is a domain key. + + {multiDomainKeys.map((yDomainKey, domainIdx) => { + const color = colorScale.scale(yDomainKey); + const shapeDatum = + // The height of the current bar will be computed + // the height will be currentDKHeight - previousDKHeight + // The first domain key will not be affected. + domainIdx !== 0 + ? { + ...scaledDataDict[yDomainKey][idx], + width: + direction === Direction.HORIZONTAL + ? scaledDataDict[yDomainKey][idx].width - + scaledDataDict[multiDomainKeys[domainIdx - 1]][idx] + .width + : scaledDataDict[yDomainKey][idx].width, + height: + direction === Direction.VERTICAL + ? scaledDataDict[yDomainKey][idx].height - + scaledDataDict[multiDomainKeys[domainIdx - 1]][idx] + .height + : scaledDataDict[yDomainKey][idx].height, + } + : scaledDataDict[yDomainKey][idx]; + return ( + + ); + })} + + ); })} ); diff --git a/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx b/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx index ef435fd..047b004 100644 --- a/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx +++ b/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx @@ -96,7 +96,7 @@ export const StackedColumn = StackedColumnTemplate.bind({}); const StackedColumnArguments = { ...defaultArguments, yAxis: { - domainKeys: ['value1', 'value', 'value2'], + domainKeys: ['value', 'value1', 'value2'], title: 'Temperature', tickFormat: (d: number) => `${d}°`, }, diff --git a/packages/ez-react/src/recipes/column/StackedColumnChart.tsx b/packages/ez-react/src/recipes/column/StackedColumnChart.tsx index 6d74e9b..9a2c43d 100644 --- a/packages/ez-react/src/recipes/column/StackedColumnChart.tsx +++ b/packages/ez-react/src/recipes/column/StackedColumnChart.tsx @@ -1,11 +1,10 @@ import { Legend, LegendProps } from '@/components/addons/legend/Legend'; import { Tooltip, TooltipProps } from '@/components/addons/tooltip/Tooltip'; -import { Bars } from '@/components/Bars'; import { Chart } from '@/components/Chart'; import { Axis } from '@/components/scales/Axis'; import { CartesianScale } from '@/components/scales/CartesianScale'; import { ColorScale } from '@/components/scales/ColorScale'; -import { Bar } from '@/components/shapes/Bar'; +import { StackedBars } from '@/components/StackedBars'; import { useToggableDomainKey } from '@/lib/useToggableDomainKey'; import { ScaleBand, ScaleLinear } from 'eazychart-core/src/scales'; import { @@ -17,7 +16,6 @@ import { Dimensions, Direction, AxisConfigMulti, - RectangleDatum, } from 'eazychart-core/src/types'; import React, { FC, SVGAttributes } from 'react'; @@ -67,7 +65,6 @@ export const StackedColumnChart: FC = ({ }) => { const { activeDomainKeys, activeDomain, toggleDomainKey } = useToggableDomainKey(data, yAxis.domainKeys); - let previousShapeData: RectangleDatum[] = []; return ( = ({ }} > - {activeDomainKeys.map((activeDomaiKey) => { - return ( - // we need to find a way to sort the the data columns so that it shows bars in the corret manner - { - const color = colorScale.scale(activeDomaiKey); - const newShapeData = shapeData.map((shapeDatum, index) => - previousShapeData[index] - ? { - ...shapeDatum, - height: - shapeDatum.height > - previousShapeData[index].height - ? shapeDatum.height - - previousShapeData[index].height - : shapeDatum.height, - } - : shapeDatum - ); - previousShapeData = [...shapeData]; - return newShapeData.map((shapeDatum) => ( - - )); - }, - }} - /> - ); - })} + Date: Tue, 25 Oct 2022 13:42:18 +0100 Subject: [PATCH 10/16] fix: apply requested changes --- packages/ez-core/src/sample-data.ts | 12 ++-- .../snapshots/components/Bars.spec.tsx.snap | 8 +-- .../components/Bubbles.spec.tsx.snap | 4 +- .../snapshots/components/Chart.spec.tsx.snap | 2 +- .../components/IrregularArcs.spec.tsx.snap | 6 +- .../snapshots/components/Points.spec.tsx.snap | 4 +- .../components/addons/Tooltip.spec.tsx.snap | 8 +-- .../recipes/bar/BarChart.spec.tsx.snap | 58 ++++++----------- .../recipes/column/ColumnChart.spec.tsx.snap | 60 ++++++------------ .../column/LineColumnChart.spec.tsx.snap | 60 ++++++------------ .../column/StackedColumnChart.spec.tsx.snap | 4 +- .../pie/IrregularPieChart.spec.tsx.snap | 6 +- .../recipes/pie/PieChart.spec.tsx.snap | 6 +- .../recipes/pie/RadialChart.spec.tsx.snap | 4 +- .../recipes/pie/SemiCircleChart.spec.tsx.snap | 6 +- .../recipes/scatter/BubbleChart.spec.tsx.snap | 58 ++++++----------- .../scatter/ScatterChart.spec.tsx.snap | 58 ++++++----------- packages/ez-dev/storybook/data.ts | 19 +++--- .../ez-react/src/components/StackedBars.tsx | 62 ++++++++++--------- .../src/recipes/column/StackedColumnChart.tsx | 4 +- .../column/StackedColumnChart.spec.tsx | 2 +- 21 files changed, 179 insertions(+), 272 deletions(-) diff --git a/packages/ez-core/src/sample-data.ts b/packages/ez-core/src/sample-data.ts index 429b693..23ceb0e 100644 --- a/packages/ez-core/src/sample-data.ts +++ b/packages/ez-core/src/sample-data.ts @@ -22,22 +22,22 @@ export const rawData: RawData = [ { id: '1', label: 'Alpha', - value0: 35, - value: 50, + value: 35, + value1: 50, amount: 10, }, { id: '2', label: 'Beta', - value0: 80, - value: 100, + value: 80, + value1: 100, amount: 20, }, { id: '3', label: 'Gamma', - value0: 60, - value: 75, + value: 60, + value1: 75, amount: 30, }, ]; diff --git a/packages/ez-dev/jest/snapshots/components/Bars.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/Bars.spec.tsx.snap index b8cd7af..f0546ce 100644 --- a/packages/ez-dev/jest/snapshots/components/Bars.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/Bars.spec.tsx.snap @@ -6,10 +6,10 @@ exports[`Bars renders svg rects with the right coordinates / dimensions 1`] = ` class="ez-bar" data-testid="ez-bar" fill="red" - height="100" + height="150" width="266.6666666666667" x="0" - y="500" + y="450" > diff --git a/packages/ez-dev/jest/snapshots/components/Bubbles.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/Bubbles.spec.tsx.snap index 7970176..2b73c6b 100644 --- a/packages/ez-dev/jest/snapshots/components/Bubbles.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/Bubbles.spec.tsx.snap @@ -5,7 +5,7 @@ exports[`Bubbles renders svg bubbles with the right coordinates / path 1`] = `
- [{"id":"1","label":"Alpha","value0":35,"value":50,"amount":10},{"id":"2","label":"Beta","value0":80,"value":100,"amount":20},{"id":"3","label":"Gamma","value0":60,"value":75,"amount":30}] + [{"id":"1","label":"Alpha","value":35,"value1":50,"amount":10},{"id":"2","label":"Beta","value":80,"value1":100,"amount":20},{"id":"3","label":"Gamma","value":60,"value1":75,"amount":30}]
diff --git a/packages/ez-dev/jest/snapshots/components/IrregularArcs.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/IrregularArcs.spec.tsx.snap index 6a48946..d7e9fd4 100644 --- a/packages/ez-dev/jest/snapshots/components/IrregularArcs.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/IrregularArcs.spec.tsx.snap @@ -7,7 +7,7 @@ exports[`IrregularArcs renders svg irregular arcs with the right coordinates / d >
-
+
- value0 : + value :
35
-
+
- value : + value1 :
50 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..1676afe 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 @@ -41,7 +41,7 @@ exports[`BarChart renders a bar chart 1`] = ` data-testid="ez-bar" fill="green" height="100.00000000000001" - width="250" + width="277.77777777777777" x="0" y="25" > @@ -75,32 +75,12 @@ exports[`BarChart renders a bar chart 1`] = ` transform="translate(0, 0) rotate(0 0 0)" y="9" > - 50 - - - - - - - 55 + 35 - 60 + 40 - 65 + 45 - 70 + 50 - 75 + 55 - 80 + 60 - 85 + 65 - 90 + 70 - 95 + 75 - 100 + 80 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..283d2d0 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 @@ -40,10 +40,10 @@ exports[`ColumnChart renders a column chart 1`] = ` class="ez-bar" data-testid="ez-bar" fill="green" - height="200" + height="222.22222222222223" width="125" x="343.75" - y="200" + y="177.77777777777777" > @@ -146,32 +146,12 @@ exports[`ColumnChart renders a column chart 1`] = ` transform="translate(0, 0) rotate(-90 0 0)" x="-9" > - 50 - - - - - - - 55 + 35 - 60 + 40 - 65 + 45 - 70 + 50 - 75 + 55 - 80 + 60 - 85 + 65 - 90 + 70 - 95 + 75 - 100 + 80 diff --git a/packages/ez-dev/jest/snapshots/recipes/column/LineColumnChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/column/LineColumnChart.spec.tsx.snap index 9e73e50..ce24f85 100644 --- a/packages/ez-dev/jest/snapshots/recipes/column/LineColumnChart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/recipes/column/LineColumnChart.spec.tsx.snap @@ -40,10 +40,10 @@ exports[`LineColumnChart renders a line & column chart 1`] = ` class="ez-bar" data-testid="ez-bar" fill="green" - height="200" + height="222.22222222222223" width="125" x="343.75" - y="200" + y="177.77777777777777" > @@ -146,12 +146,12 @@ exports[`LineColumnChart renders a line & column chart 1`] = ` transform="translate(0, 0) rotate(-90 0 0)" x="-9" > - 50 + 35 - 55 + 40 - 60 + 45 - 65 - - - - - - - 70 + 50 - 75 + 55 - 80 + 60 - 85 + 65 - 90 + 70 - 95 + 75 - 100 + 80 diff --git a/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap index cbf785c..81de05a 100644 --- a/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap @@ -461,7 +461,7 @@ exports[`StackedColumnChart renders a stacked column chart 1`] = ` >
- value0 + value
- value + value1
diff --git a/packages/ez-dev/jest/snapshots/recipes/pie/IrregularPieChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/pie/IrregularPieChart.spec.tsx.snap index b401dc4..b2b4d70 100644 --- a/packages/ez-dev/jest/snapshots/recipes/pie/IrregularPieChart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/recipes/pie/IrregularPieChart.spec.tsx.snap @@ -21,7 +21,7 @@ exports[`IrregularPieChart renders a irregular pie chart 1`] = ` > - 50 - - - - - - - 55 + 35 - 60 + 40 - 65 + 45 - 70 + 50 - 75 + 55 - 80 + 60 - 85 + 65 - 90 + 70 - 95 + 75 - 100 + 80 diff --git a/packages/ez-dev/jest/snapshots/recipes/scatter/ScatterChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/scatter/ScatterChart.spec.tsx.snap index c5d51b1..9b1b7d2 100644 --- a/packages/ez-dev/jest/snapshots/recipes/scatter/ScatterChart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/recipes/scatter/ScatterChart.spec.tsx.snap @@ -39,7 +39,7 @@ exports[`ScatterChart renders a scatter chart 1`] = ` - 50 - - - - - - - 55 + 35 - 60 + 40 - 65 + 45 - 70 + 50 - 75 + 55 - 80 + 60 - 85 + 65 - 90 + 70 - 95 + 75 - 100 + 80 diff --git a/packages/ez-dev/storybook/data.ts b/packages/ez-dev/storybook/data.ts index 2bc9f5a..789b21e 100644 --- a/packages/ez-dev/storybook/data.ts +++ b/packages/ez-dev/storybook/data.ts @@ -1,5 +1,8 @@ -import { AnimationOptions, ChartPadding, RawData } from 'eazychart-core/src/types'; - +import { + AnimationOptions, + ChartPadding, + RawData, +} from 'eazychart-core/src/types'; export const dimensions = { width: 800, @@ -8,40 +11,40 @@ export const dimensions = { export const rawData: RawData = [ { + value: 5, value1: 9, - value: 5, - value2: 15, + value2: 15, name: 'Alpha', id: '1', v: 2, }, { + value: 20, value1: 45, - value: 20, value2: 56, name: 'Beta', id: '2', v: 5, }, { + value: 15, value1: 29, - value: 15, value2: 33, name: 'Gamma', id: '3', v: 10, }, { + value: 18, value1: 30, - value: 18, value2: 40, name: 'Delta', id: '4', v: 4, }, { + value: 30, value1: 50, - value: 30, value2: 70, name: 'Epsilon', id: '5', diff --git a/packages/ez-react/src/components/StackedBars.tsx b/packages/ez-react/src/components/StackedBars.tsx index 2b21253..3453d97 100644 --- a/packages/ez-react/src/components/StackedBars.tsx +++ b/packages/ez-react/src/components/StackedBars.tsx @@ -7,14 +7,14 @@ import { useColorScale } from './scales/ColorScale'; import { Direction, RectangleDatum } from 'eazychart-core/src/types'; export interface StackedBarsProps extends SVGAttributes { - singleDomainKey: string; - multiDomainKeys: string[]; + domainKey: string; + stackDomainKeys: string[]; direction: Direction.HORIZONTAL | Direction.VERTICAL; } export const StackedBars: FC = ({ - singleDomainKey, - multiDomainKeys, + domainKey, + stackDomainKeys, direction = Direction.VERTICAL, ...rest }) => { @@ -23,11 +23,11 @@ export const StackedBars: FC = ({ const { colorScale } = useColorScale(); const scaledDataDict = useMemo(() => { - return multiDomainKeys.reduce( + return stackDomainKeys.reduce( (acc: { [key: string]: RectangleDatum[] }, yDomainKey) => { acc[yDomainKey] = scaleRectangleData( data, - singleDomainKey, + domainKey, yDomainKey, xScale, yScale, @@ -41,8 +41,8 @@ export const StackedBars: FC = ({ ); }, [ data, - multiDomainKeys, - singleDomainKey, + stackDomainKeys, + domainKey, xScale, yScale, colorScale, @@ -58,29 +58,33 @@ export const StackedBars: FC = ({ // We create a bar for every data row // Each bar is a stack bar where every element is a domain key. - {multiDomainKeys.map((yDomainKey, domainIdx) => { + {stackDomainKeys.map((yDomainKey, domainIdx) => { const color = colorScale.scale(yDomainKey); - const shapeDatum = - // The height of the current bar will be computed - // the height will be currentDKHeight - previousDKHeight - // The first domain key will not be affected. + const scaledData = scaledDataDict[yDomainKey][idx]; + // The first domain key will not be affected. + const previousRectWidth = + domainIdx !== 0 + ? scaledDataDict[stackDomainKeys[domainIdx - 1]][idx].width + : 0; + const previousRectHeight = domainIdx !== 0 - ? { - ...scaledDataDict[yDomainKey][idx], - width: - direction === Direction.HORIZONTAL - ? scaledDataDict[yDomainKey][idx].width - - scaledDataDict[multiDomainKeys[domainIdx - 1]][idx] - .width - : scaledDataDict[yDomainKey][idx].width, - height: - direction === Direction.VERTICAL - ? scaledDataDict[yDomainKey][idx].height - - scaledDataDict[multiDomainKeys[domainIdx - 1]][idx] - .height - : scaledDataDict[yDomainKey][idx].height, - } - : scaledDataDict[yDomainKey][idx]; + ? scaledDataDict[stackDomainKeys[domainIdx - 1]][idx].height + : 0; + const shapeDatum = + // The height or the width of the current bar will be computed depending to the orientaion + // the height will be currentDKHeight - previousDKHeight (same for the width) + { + ...scaledData, + width: + direction === Direction.HORIZONTAL + ? scaledData.width - previousRectWidth + : scaledData.width, + height: + direction === Direction.VERTICAL + ? scaledData.height - previousRectHeight + : scaledData.height, + }; + return ( = ({ > diff --git a/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx b/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx index 3716ced..76a0bf5 100644 --- a/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx +++ b/packages/ez-react/tests/unit/recipes/column/StackedColumnChart.spec.tsx @@ -16,7 +16,7 @@ describe('StackedColumnChart', () => { domainKey: 'label', }} yAxis={{ - domainKeys: ['value0', 'value'], + domainKeys: ['value', 'value1'], }} animationOptions={{ easing: 'easeBack', From 77b0733d2cfda9af80ff20fee9837741d5edd4f8 Mon Sep 17 00:00:00 2001 From: Mohamed Marrouchi Date: Tue, 25 Oct 2022 07:29:10 +0100 Subject: [PATCH 11/16] feat: add stacked bar column chart (react) --- .../snapshots/components/addons/Tooltip.spec.tsx.snap | 8 ++++++++ packages/ez-react/src/components/Bars.tsx | 10 +++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap index 4e55298..ec42a5e 100644 --- a/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap @@ -19,6 +19,14 @@ exports[`Tooltip renders the tooltip when a shape is hovered 1`] = ` >
+
+
+ value0 : +
+
+ 35 +
+
value : diff --git a/packages/ez-react/src/components/Bars.tsx b/packages/ez-react/src/components/Bars.tsx index d248629..e8b9f33 100644 --- a/packages/ez-react/src/components/Bars.tsx +++ b/packages/ez-react/src/components/Bars.tsx @@ -62,7 +62,15 @@ export const Bars: FC = ({ isRTL, ]); - return ( + return scopedSlots && scopedSlots.default ? ( + + {scopedSlots.default({ + shapeData: scaledData, + scales: { xScale, yScale, colorScale }, + dimensions, + })} + + ) : ( {scopedSlots && scopedSlots.default ? scopedSlots.default({ From 034ff0c4083b858e95c332861c0984c4cc557656 Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Tue, 25 Oct 2022 11:41:37 +0100 Subject: [PATCH 12/16] fix: apply requested changes --- packages/ez-react/src/components/Bars.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/ez-react/src/components/Bars.tsx b/packages/ez-react/src/components/Bars.tsx index e8b9f33..d248629 100644 --- a/packages/ez-react/src/components/Bars.tsx +++ b/packages/ez-react/src/components/Bars.tsx @@ -62,15 +62,7 @@ export const Bars: FC = ({ isRTL, ]); - return scopedSlots && scopedSlots.default ? ( - - {scopedSlots.default({ - shapeData: scaledData, - scales: { xScale, yScale, colorScale }, - dimensions, - })} - - ) : ( + return ( {scopedSlots && scopedSlots.default ? scopedSlots.default({ From 1d882999e8fc35174dab76f936ed5a44f7a8310c Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Tue, 25 Oct 2022 13:42:18 +0100 Subject: [PATCH 13/16] fix: apply requested changes --- .../snapshots/components/addons/Tooltip.spec.tsx.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap index ec42a5e..b2e794d 100644 --- a/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap @@ -19,17 +19,17 @@ exports[`Tooltip renders the tooltip when a shape is hovered 1`] = ` >
-
+
- value0 : + value :
35
-
+
- value : + value1 :
35 From 71d916f3ed790aebd8508ae1c743b637f28fe5bc Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Fri, 28 Oct 2022 14:07:52 +0100 Subject: [PATCH 14/16] fix: area unit test --- packages/ez-dev/jest/snapshots/components/Area.spec.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ez-dev/jest/snapshots/components/Area.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/Area.spec.tsx.snap index 3ba1b28..2ffa394 100644 --- a/packages/ez-dev/jest/snapshots/components/Area.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/Area.spec.tsx.snap @@ -5,7 +5,7 @@ exports[`Area renders svg area with the right coordinates / dimensions 1`] = ` Date: Mon, 31 Oct 2022 14:22:14 +0100 Subject: [PATCH 15/16] feat: restore old test snapshots --- packages/ez-core/src/sample-data.ts | 12 ++-- .../snapshots/components/Area.spec.tsx.snap | 4 +- .../snapshots/components/Bars.spec.tsx.snap | 8 +-- .../components/Bubbles.spec.tsx.snap | 4 +- .../snapshots/components/Chart.spec.tsx.snap | 2 +- .../components/IrregularArcs.spec.tsx.snap | 6 +- .../snapshots/components/Points.spec.tsx.snap | 4 +- .../components/addons/Tooltip.spec.tsx.snap | 8 +-- .../recipes/bar/BarChart.spec.tsx.snap | 58 ++++++++++++------ .../recipes/column/ColumnChart.spec.tsx.snap | 60 ++++++++++++------- .../column/LineColumnChart.spec.tsx.snap | 60 ++++++++++++------- .../pie/IrregularPieChart.spec.tsx.snap | 6 +- .../recipes/pie/PieChart.spec.tsx.snap | 6 +- .../recipes/pie/RadialChart.spec.tsx.snap | 4 +- .../recipes/pie/SemiCircleChart.spec.tsx.snap | 6 +- .../recipes/scatter/BubbleChart.spec.tsx.snap | 58 ++++++++++++------ .../scatter/ScatterChart.spec.tsx.snap | 58 ++++++++++++------ 17 files changed, 232 insertions(+), 132 deletions(-) diff --git a/packages/ez-core/src/sample-data.ts b/packages/ez-core/src/sample-data.ts index 23ceb0e..b94d047 100644 --- a/packages/ez-core/src/sample-data.ts +++ b/packages/ez-core/src/sample-data.ts @@ -22,22 +22,22 @@ export const rawData: RawData = [ { id: '1', label: 'Alpha', - value: 35, - value1: 50, + value1: 35, + value: 50, amount: 10, }, { id: '2', label: 'Beta', - value: 80, - value1: 100, + value1: 80, + value: 100, amount: 20, }, { id: '3', label: 'Gamma', - value: 60, - value1: 75, + value1: 60, + value: 75, amount: 30, }, ]; diff --git a/packages/ez-dev/jest/snapshots/components/Area.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/Area.spec.tsx.snap index 2ffa394..3ba1b28 100644 --- a/packages/ez-dev/jest/snapshots/components/Area.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/Area.spec.tsx.snap @@ -5,7 +5,7 @@ exports[`Area renders svg area with the right coordinates / dimensions 1`] = ` diff --git a/packages/ez-dev/jest/snapshots/components/Bubbles.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/Bubbles.spec.tsx.snap index 2b73c6b..7970176 100644 --- a/packages/ez-dev/jest/snapshots/components/Bubbles.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/Bubbles.spec.tsx.snap @@ -5,7 +5,7 @@ exports[`Bubbles renders svg bubbles with the right coordinates / path 1`] = `
- [{"id":"1","label":"Alpha","value":35,"value1":50,"amount":10},{"id":"2","label":"Beta","value":80,"value1":100,"amount":20},{"id":"3","label":"Gamma","value":60,"value1":75,"amount":30}] + [{"id":"1","label":"Alpha","value1":35,"value":50,"amount":10},{"id":"2","label":"Beta","value1":80,"value":100,"amount":20},{"id":"3","label":"Gamma","value1":60,"value":75,"amount":30}]
diff --git a/packages/ez-dev/jest/snapshots/components/IrregularArcs.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/IrregularArcs.spec.tsx.snap index d7e9fd4..6a48946 100644 --- a/packages/ez-dev/jest/snapshots/components/IrregularArcs.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/IrregularArcs.spec.tsx.snap @@ -7,7 +7,7 @@ exports[`IrregularArcs renders svg irregular arcs with the right coordinates / d >
-
+
- value : + value1 :
35
-
+
- value1 : + value :
50 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 1676afe..1e1cb3f 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 @@ -41,7 +41,7 @@ exports[`BarChart renders a bar chart 1`] = ` data-testid="ez-bar" fill="green" height="100.00000000000001" - width="277.77777777777777" + width="250" x="0" y="25" > @@ -75,12 +75,12 @@ exports[`BarChart renders a bar chart 1`] = ` transform="translate(0, 0) rotate(0 0 0)" y="9" > - 35 + 50 - 40 + 55 - 45 + 60 - 50 + 65 - 55 + 70 - 60 + 75 - 65 + 80 - 70 + 85 - 75 + 90 + + + + + + + 95 - 80 + 100 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 283d2d0..25d8631 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 @@ -40,10 +40,10 @@ exports[`ColumnChart renders a column chart 1`] = ` class="ez-bar" data-testid="ez-bar" fill="green" - height="222.22222222222223" + height="200" width="125" x="343.75" - y="177.77777777777777" + y="200" > @@ -146,12 +146,12 @@ exports[`ColumnChart renders a column chart 1`] = ` transform="translate(0, 0) rotate(-90 0 0)" x="-9" > - 35 + 50 - 40 + 55 - 45 + 60 - 50 + 65 - 55 + 70 - 60 + 75 - 65 + 80 - 70 + 85 - 75 + 90 + + + + + + + 95 - 80 + 100 diff --git a/packages/ez-dev/jest/snapshots/recipes/column/LineColumnChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/column/LineColumnChart.spec.tsx.snap index ce24f85..9e73e50 100644 --- a/packages/ez-dev/jest/snapshots/recipes/column/LineColumnChart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/recipes/column/LineColumnChart.spec.tsx.snap @@ -40,10 +40,10 @@ exports[`LineColumnChart renders a line & column chart 1`] = ` class="ez-bar" data-testid="ez-bar" fill="green" - height="222.22222222222223" + height="200" width="125" x="343.75" - y="177.77777777777777" + y="200" > @@ -146,12 +146,12 @@ exports[`LineColumnChart renders a line & column chart 1`] = ` transform="translate(0, 0) rotate(-90 0 0)" x="-9" > - 35 + 50 - 40 + 55 - 45 + 60 - 50 + 65 - 55 + 70 - 60 + 75 - 65 + 80 - 70 + 85 - 75 + 90 + + + + + + + 95 - 80 + 100 diff --git a/packages/ez-dev/jest/snapshots/recipes/pie/IrregularPieChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/pie/IrregularPieChart.spec.tsx.snap index b2b4d70..b401dc4 100644 --- a/packages/ez-dev/jest/snapshots/recipes/pie/IrregularPieChart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/recipes/pie/IrregularPieChart.spec.tsx.snap @@ -21,7 +21,7 @@ exports[`IrregularPieChart renders a irregular pie chart 1`] = ` > - 35 + 50 - 40 + 55 - 45 + 60 - 50 + 65 - 55 + 70 - 60 + 75 - 65 + 80 - 70 + 85 - 75 + 90 + + + + + + + 95 - 80 + 100 diff --git a/packages/ez-dev/jest/snapshots/recipes/scatter/ScatterChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/scatter/ScatterChart.spec.tsx.snap index 9b1b7d2..c5d51b1 100644 --- a/packages/ez-dev/jest/snapshots/recipes/scatter/ScatterChart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/recipes/scatter/ScatterChart.spec.tsx.snap @@ -39,7 +39,7 @@ exports[`ScatterChart renders a scatter chart 1`] = ` - 35 + 50 - 40 + 55 - 45 + 60 - 50 + 65 - 55 + 70 - 60 + 75 - 65 + 80 - 70 + 85 - 75 + 90 + + + + + + + 95 - 80 + 100 From 0e0520776dddf68dd54e49170100c1845b82a26f Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Mon, 31 Oct 2022 15:02:08 +0100 Subject: [PATCH 16/16] fix: unit tests --- packages/ez-core/src/sample-data.ts | 6 +- .../snapshots/components/Chart.spec.tsx.snap | 2 +- .../components/addons/Tooltip.spec.tsx.snap | 12 +-- .../column/StackedColumnChart.spec.tsx.snap | 90 +++++++++++-------- 4 files changed, 65 insertions(+), 45 deletions(-) diff --git a/packages/ez-core/src/sample-data.ts b/packages/ez-core/src/sample-data.ts index b94d047..febde9f 100644 --- a/packages/ez-core/src/sample-data.ts +++ b/packages/ez-core/src/sample-data.ts @@ -22,22 +22,22 @@ export const rawData: RawData = [ { id: '1', label: 'Alpha', - value1: 35, value: 50, + value1: 65, amount: 10, }, { id: '2', label: 'Beta', - value1: 80, value: 100, + value1: 120, amount: 20, }, { id: '3', label: 'Gamma', - value1: 60, value: 75, + value1: 90, amount: 30, }, ]; diff --git a/packages/ez-dev/jest/snapshots/components/Chart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/Chart.spec.tsx.snap index 86e1ec0..df633e6 100644 --- a/packages/ez-dev/jest/snapshots/components/Chart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/Chart.spec.tsx.snap @@ -44,7 +44,7 @@ exports[`Chart should provide the chart data to the children components 1`] = ` >
- [{"id":"1","label":"Alpha","value1":35,"value":50,"amount":10},{"id":"2","label":"Beta","value1":80,"value":100,"amount":20},{"id":"3","label":"Gamma","value1":60,"value":75,"amount":30}] + [{"id":"1","label":"Alpha","value":50,"value1":65,"amount":10},{"id":"2","label":"Beta","value":100,"value1":120,"amount":20},{"id":"3","label":"Gamma","value":75,"value1":90,"amount":30}]
diff --git a/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap index f10a16a..9ef5be7 100644 --- a/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap @@ -19,20 +19,20 @@ exports[`Tooltip renders the tooltip when a shape is hovered 1`] = ` >
-
+
- value1 : + value :
- 35 + 50
-
+
- value : + value1 :
- 50 + 65
diff --git a/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap index 81de05a..a67b105 100644 --- a/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/recipes/column/StackedColumnChart.spec.tsx.snap @@ -31,10 +31,10 @@ exports[`StackedColumnChart renders a stacked column chart 1`] = ` class="ez-bar" data-testid="ez-bar" fill="#993399" - height="92.30769230769232" + height="85.71428571428572" width="125" x="31.25" - y="307.6923076923077" + y="314.2857142857143" > @@ -43,17 +43,17 @@ exports[`StackedColumnChart renders a stacked column chart 1`] = ` class="ez-bar" data-testid="ez-bar" fill="#339999" - height="276.9230769230769" + height="285.7142857142857" width="125" x="187.5" - y="123.07692307692308" + y="114.28571428571428" > @@ -182,12 +182,12 @@ exports[`StackedColumnChart renders a stacked column chart 1`] = ` transform="translate(0, 0) rotate(-90 0 0)" x="-9" > - 35 + 50 - 40 + 55 - 45 + 60 - 50 + 65 - 55 + 70 - 60 + 75 - 65 + 80 - 70 + 85 - 75 + 90 - 80 + 95 - 85 + 100 - 90 + 105 - 95 + 110 + + + + + + + 115 - 100 + 120