feat: cstacked column chart

Hexastack · Oct 19, 2022 · d8a13f3 · d8a13f3
1 parent cfd82a3
commit d8a13f3
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 56 deletions.
diff --git a/packages/ez-dev/storybook/data.ts b/packages/ez-dev/storybook/data.ts
@@ -9,30 +9,35 @@ export const dimensions = {
 export const rawData: RawData = [
   {
     value: 9,
+    value1: 20, 
     name: 'Alpha',
     id: '1',
     v: 2,
   },
   {
     value: 45,
+    value1: 20, 
     name: 'Beta',
     id: '2',
     v: 5,
   },
   {
     value: 29,
+    value1: 20, 
     name: 'Gamma',
     id: '3',
     v: 10,
   },
   {
     value: 30,
+    value1: 20, 
     name: 'Delta',
     id: '4',
     v: 4,
   },
   {
     value: 50,
+    value1: 20, 
     name: 'Epsilon',
     id: '5',
     v: 8,

diff --git a/packages/ez-react/src/components/Bars.tsx b/packages/ez-react/src/components/Bars.tsx
@@ -4,34 +4,13 @@ import { Bar } from '@/components/shapes/Bar';
 import { useChart } from '@/lib/use-chart';
 import { useCartesianScales } from '@/components/scales/CartesianScale';
 import { useColorScale } from './scales/ColorScale';
-import { Dimensions, ScaleLinearOrBand } from 'eazychart-core/src/types';
-import { RectangleDatum } from 'eazychart-core/dist/types';
 
 export interface BarsProps extends SVGAttributes<SVGGElement> {
   xDomainKey: string;
   yDomainKey: string;
-  scopedSlots?: {
-    default: ({
-      shapeData,
-      scales,
-      dimensions,
-    }: {
-      shapeData: RectangleDatum[];
-      scales: {
-        xScale: ScaleLinearOrBand;
-        yScale: ScaleLinearOrBand;
-      };
-      dimensions: Dimensions;
-    }) => React.ReactChild;
-  };
 }
 
-export const Bars: FC<BarsProps> = ({
-  xDomainKey,
-  yDomainKey,
-  scopedSlots,
-  ...rest
-}) => {
+export const Bars: FC<BarsProps> = ({ xDomainKey, yDomainKey, ...rest }) => {
   const { data, dimensions, isRTL } = useChart();
   const { xScale, yScale } = useCartesianScales();
   const { colorScale } = useColorScale();
@@ -58,15 +37,7 @@ export const Bars: FC<BarsProps> = ({
     isRTL,
   ]);
 
-  return scopedSlots && scopedSlots.default ? (
-    <g className="ez-stacked-bars" {...rest}>
-      {scopedSlots.default({
-        shapeData: scaledData,
-        scales: { xScale, yScale },
-        dimensions,
-      })}
-    </g>
-  ) : (
+  return (
     <g className="ez-bars" {...rest}>
       {scaledData.map((rectDatum) => {
         return <Bar key={rectDatum.id} shapeDatum={rectDatum} />;

diff --git a/packages/ez-react/src/components/StackedBars.tsx b/packages/ez-react/src/components/StackedBars.tsx
@@ -4,6 +4,7 @@ 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<SVGGElement> {
   xDomainKey: string;
@@ -20,30 +21,63 @@ export const StackedBars: FC<StackedBarsProps> = ({
   const { colorScale } = useColorScale();
 
   const scaledData = useMemo(() => {
-    return yDomainKeys.reduce((acc, yDomainKey) => {
-      // @ts-ignore
-      acc[yDomainKey] = scaleRectangleData(
-        data,
-        'id',
-        yDomainKey,
-        xScale,
-        yScale,
-        colorScale,
-        dimensions,
-        isRTL
-      );
-      return acc;
+    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;
+      }
     }, {});
-  }, [yDomainKeys, data, xScale, yScale, colorScale, dimensions, isRTL]);
+  }, [
+    data,
+    yDomainKeys,
+    xDomainKey,
+    xScale,
+    yScale,
+    colorScale,
+    dimensions,
+    isRTL,
+  ]);
 
   return (
     <g {...rest}>
-      {data.forEach((_datum, index) => {
-        return yDomainKeys.map((yDomainKey) => {
+      {yDomainKeys.map((yDomainKey) => {
+        // @ts-ignore
+        const shapeData = scaledData[yDomainKey] as RectangleDatum[];
+        const color = colorScale.scale(yDomainKey);
+        return shapeData.map((shapeDatum: RectangleDatum, index: number) => {
           return (
             <Bar
               key={`${yDomainKey}${index}`}
-              shapeDatum={scaledData[yDomainKey as never][index]}
+              shapeDatum={{ ...shapeDatum, color }}
             />
           );
         });

diff --git a/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx b/packages/ez-react/src/recipes/column/ColumnChart.stories.tsx
@@ -6,7 +6,7 @@ import {
   LineColumnChartProps,
 } from '@/recipes/column/LineColumnChart';
 import { baseChartArgTypes, ChartWrapper } from '@/lib/storybook-utils';
-import { colors, evolutionData, rawData } from 'eazychart-dev/storybook/data';
+import { colors, rawData } from 'eazychart-dev/storybook/data';
 import {
   StackedColumnChart,
   StackedColumnChartProps,
@@ -95,10 +95,8 @@ export const StackedColumn = StackedColumnTemplate.bind({});
 
 const StackedColumnArguments = {
   ...defaultArguments,
-  colors: ['#339999', '#993399', '#333399'],
-  data: evolutionData,
   yAxis: {
-    domainKeys: ['yValue', 'yValue1', 'yValue2'],
+    domainKeys: ['value', 'value1'],
     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
@@ -49,15 +49,15 @@ export const StackedColumnChart: FC<StackedColumnChartProps> = ({
     top: 100,
   },
   xAxis = {
-    domainKey: 'xValue',
+    domainKey: 'name',
     position: Position.BOTTOM,
   },
   yAxis = {
-    domainKeys: ['yValue', 'yValue1', 'yValue2'],
+    domainKeys: ['value', 'value1'],
     position: Position.LEFT,
   },
   isRTL = false,
-  dimensions = { height: 800, width: 1200 },
+  dimensions = {},
   scopedSlots = {
     LegendComponent: Legend,
     TooltipComponent: Tooltip,
@@ -79,7 +79,7 @@ export const StackedColumnChart: FC<StackedColumnChartProps> = ({
         xScaleConfig={{
           ScaleClass: ScaleBand,
           definition: {
-            domainKey: 'id',
+            domainKey: xAxis.domainKey,
             direction: Direction.HORIZONTAL,
           },
         }}