Merge branch 'fix/charts' of https://github.com/SAP/ui5-webcomponents…

…-react into fix/charts
SAP · Apr 27, 2020 · d9055cc · d9055cc
2 parents 754c9f8 + c3c195e
commit d9055cc
Showing 1 changed file with 64 additions and 23 deletions.
diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
@@ -245,34 +245,66 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
         {(chartConfig.xAxisVisible ?? true) &&
           dimensions.map((dimension, index) => {
             const XAxisLabel = useAxisLabel(dimension.formatter);
-            return (
-              <XAxis
-                key={dimension.accessor}
-                dataKey={dimension.accessor}
-                xAxisId={index}
-                interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
-                tick={index === 0 ? XAxisLabel : SecondaryDimensionLabel}
-                tickLine={index < 1}
-                axisLine={index < 1}
-                padding={{ left: paddingCharts / 2, right: paddingCharts / 2 }}
-              />
-            );
+            let AxisComponent;
+            const axisProps = {
+              key: dimension.accessor,
+              dataKey: dimension.accessor,
+              interval: dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0),
+              tick: index === 0 ? XAxisLabel : SecondaryDimensionLabel,
+              tickLine: index < 1,
+              axisLine: index < 1,
+              padding: { left: paddingCharts, right: paddingCharts }
+            };
+
+            if (layout === 'vertical') {
+              axisProps.type = 'category';
+              AxisComponent = YAxis;
+            } else {
+              axisProps.dataKey = dimension.accessor;
+              AxisComponent = XAxis;
+            }
+
+            return <AxisComponent {...axisProps} />;
           })}
-        <YAxis
-          axisLine={chartConfig.yAxisVisible ?? false}
-          tickLine={false}
-          yAxisId="left"
-          tickFormatter={primaryMeasure?.formatter}
-          interval={0}
-        />
-        {chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && (
+        {layout === 'horizontal' && (
+          <YAxis
+            axisLine={chartConfig.yAxisVisible ?? false}
+            tickLine={false}
+            yAxisId="primary"
+            tickFormatter={primaryMeasure?.formatter}
+            interval={0}
+          />
+        )}
+        {layout === 'vertical' && (
+          <XAxis
+            axisLine={chartConfig.yAxisVisible ?? false}
+            tickLine={false}
+            xAxisId="primary"
+            tickFormatter={primaryMeasure?.formatter}
+            interval={0}
+            type="number"
+          />
+        )}
+
+        {chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && layout === 'horizontal' && (
           <YAxis
             dataKey={chartConfig.secondYAxis.dataKey}
             stroke={chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`}
             label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
             orientation="right"
-            yAxisId="right"
+            yAxisId="secondary"
+            interval={0}
+          />
+        )}
+        {chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && layout === 'vertical' && (
+          <XAxis
+            dataKey={chartConfig.secondYAxis.dataKey}
+            stroke={chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`}
+            label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
+            orientation="top"
+            xAxisId="secondary"
             interval={0}
+            type="number"
           />
         )}
         {chartConfig.referenceLine && (
@@ -312,7 +344,9 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               chartElementProps.onClick = onDataPointClickInternal;
               chartElementProps.stackId = element.stackId ?? undefined;
               chartElementProps.labelPosition = element.stackId ? 'insideTop' : 'top';
-              chartElementProps.maxBarSize = 40;
+              if (layout === 'vertical') {
+                labelPosition = element.stackId ? 'insideRight' : 'right';
+              }
               break;
             case 'area':
               chartElementProps.dot = !isBigDataSet;
@@ -327,9 +361,16 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               );
               break;
           }
+
+          if (layout === 'vertical') {
+            chartElementProps.xAxisId =
+              chartConfig?.secondYAxis?.dataKey === element.accessor ? 'secondary' : 'primary';
+          } else {
+            chartElementProps.yAxisId =
+              chartConfig?.secondYAxis?.dataKey === element.accessor ? 'secondary' : 'primary';
+          }
           return (
             <ChartElement
-              yAxisId={chartConfig?.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
               key={element.accessor}
               name={element.label ?? element.accessor}
               label={<CustomDataLabel config={element} chartType={element.type} position={labelPosition} />}