fix(Charts - New): automatic reduction of label elements (#451)

SAP · Apr 22, 2020 · 3d3bab2 · 3d3bab2
1 parent 5e490d8
commit 3d3bab2
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 16 deletions.
diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -34,8 +34,7 @@ const formatYAxisTicks = (tick) => {
 };
 
 const dimensionDefaults = {
-  formatter: formatYAxisTicks,
-  interval: 0
+  formatter: formatYAxisTicks
 };
 
 const measureDefaults = {
@@ -62,6 +61,10 @@ interface MeasureConfig extends IChartMeasure {
 }
 
 interface DimensionConfig extends IChartDimension {
+  /**
+   * Interval of dimension axis labels
+   * @default 0
+   */
   interval?: number;
 }
 
@@ -133,7 +136,6 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
 
   const primaryDimension = dimensions[0];
   const primaryMeasure = measures[0];
-
   const chartRef = useConsolidatedRef<any>(ref);
 
   const onItemLegendClick = useLegendItemClick(onLegendClick);
@@ -157,7 +159,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
     [onDataPointClick]
   );
 
-  const isBigDataSet = dataset?.length > 30 ?? false;
+  const isBigDataSet = dataset?.length > 30;
   const primaryDimensionAccessor = primaryDimension?.accessor;
 
   const marginChart = useChartMargin(
@@ -191,7 +193,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
         />
         {(chartConfig.xAxisVisible ?? true) && (
           <XAxis
-            interval={primaryDimension?.interval ?? isBigDataSet ? 'preserveStart' : 0}
+            interval={0}
             type="number"
             tick={XAxisLabel}
             axisLine={chartConfig.xAxisVisible ?? true}
@@ -206,7 +208,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
                 : useAxisLabel(dimension.formatter, true);
             return (
               <YAxis
-                interval={'preserveStartEnd'}
+                interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
                 type="category"
                 key={dimension.accessor}
                 dataKey={dimension.accessor}

diff --git a/packages/charts/src/components/BarChart/BarRechart.stories.tsx b/packages/charts/src/components/BarChart/BarRechart.stories.tsx
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { boolean, text } from '@storybook/addon-knobs';
+import { boolean } from '@storybook/addon-knobs';
 import { BarChart } from '@ui5/webcomponents-react-charts/lib/next/BarChart';
 import React from 'react';
 import { bigDataSet, complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
@@ -20,8 +20,7 @@ export const renderStory = () => {
       chartConfig={{}}
       dimensions={[
         {
-          accessor: 'name',
-          interval: 0
+          accessor: 'name'
         }
       ]}
       measures={[

diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -41,6 +41,10 @@ interface MeasureConfig extends IChartMeasure {
 }
 
 interface DimensionConfig extends IChartDimension {
+  /**
+   * Interval of axis label
+   * @default 0
+   */
   interval?: number;
 }
 
@@ -197,7 +201,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
                 key={dimension.accessor}
                 dataKey={dimension.accessor}
                 xAxisId={index}
-                interval={primaryDimension?.interval ?? isBigDataSet ? 'preserveStart' : 0}
+                interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
                 tick={index === 0 ? XAxisLabel : SecondaryDimensionLabel}
                 tickLine={index < 1}
                 axisLine={index < 1}
@@ -209,7 +213,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
           tickLine={false}
           yAxisId="left"
           tickFormatter={primaryMeasure?.formatter}
-          interval={'preserveStart'}
+          interval={0}
         />
         {chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && (
           <YAxis

diff --git a/packages/charts/src/components/ColumnChart/ColumnRechart.stories.tsx b/packages/charts/src/components/ColumnChart/ColumnRechart.stories.tsx
@@ -20,8 +20,7 @@ export const renderStory = () => {
       dimensions={[
         {
           accessor: 'name',
-          formatter: (d) => `${d} 2019`,
-          interval: 0
+          formatter: (d) => `${d} 2019`
         }
       ]}
       measures={[

diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
@@ -238,7 +238,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
                 key={dimension.accessor}
                 dataKey={dimension.accessor}
                 xAxisId={index}
-                interval={primaryDimension?.interval ?? isBigDataSet ? 'preserveStart' : 0}
+                interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
                 tick={index === 0 ? XAxisLabel : SecondaryDimensionLabel}
                 tickLine={index < 1}
                 axisLine={index < 1}
@@ -251,7 +251,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
           tickLine={false}
           yAxisId="left"
           tickFormatter={primaryMeasure?.formatter}
-          interval={'preserveStart'}
+          interval={0}
         />
         {chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && (
           <YAxis

diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -192,7 +192,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
                 key={dimension.accessor}
                 dataKey={dimension.accessor}
                 xAxisId={index}
-                interval={primaryDimension?.interval ?? isBigDataSet ? 'preserveStart' : 0}
+                interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
                 tick={index === 0 ? XAxisLabel : SecondaryDimensionLabel}
                 tickLine={index < 1}
                 axisLine={index < 1}