Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(axis-labels): automatic reduction of label elements #451

Merged
merged 12 commits into from
Apr 22, 2020
Merged

fix(axis-labels): automatic reduction of label elements #451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a429c1b
Update BarChart.tsx
kleinju1017 Apr 21, 2020
bd0e967
fix/axis interval
kleinju1017 Apr 21, 2020
474d46f
Merge branch 'master' into fix/charts-BarChart
kleinju1017 Apr 22, 2020
fccd9c8
Update BarRechart.stories.tsx
kleinju1017 Apr 22, 2020
7146407
hide dots on line when there are much data
kleinju1017 Apr 22, 2020
b566299
Update ComposedChart.stories.tsx
kleinju1017 Apr 22, 2020
abe642f
Relocate brush tool
kleinju1017 Apr 22, 2020
2cfa321
fix(export chart props interfaces)
kleinju1017 Apr 22, 2020
76f83a7
code clean up
kleinju1017 Apr 22, 2020
8af8d6a
fix in displaying axis labels
kleinju1017 Apr 22, 2020
a16c584
Update ColumnChart.tsx
kleinju1017 Apr 22, 2020
d0b5e06
Merge branch 'master' into fix(axis-labels)
kleinju1017 Apr 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions packages/charts/src/components/BarChart/BarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,7 @@ const formatYAxisTicks = (tick) => {
};

const dimensionDefaults = {
formatter: formatYAxisTicks,
interval: 0
formatter: formatYAxisTicks
};

const measureDefaults = {
Expand All @@ -62,6 +61,10 @@ interface MeasureConfig extends IChartMeasure {
}

interface DimensionConfig extends IChartDimension {
/**
* Interval of dimension axis labels
* @default 0
*/
interval?: number;
}

Expand Down Expand Up @@ -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);
Expand All @@ -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(
Expand Down Expand Up @@ -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}
MarcusNotheis marked this conversation as resolved.
Show resolved Hide resolved
type="number"
tick={XAxisLabel}
axisLine={chartConfig.xAxisVisible ?? true}
Expand All @@ -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}
Expand Down
5 changes: 2 additions & 3 deletions packages/charts/src/components/BarChart/BarRechart.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -20,8 +20,7 @@ export const renderStory = () => {
chartConfig={{}}
dimensions={[
{
accessor: 'name',
interval: 0
accessor: 'name'
}
]}
measures={[
Expand Down
8 changes: 6 additions & 2 deletions packages/charts/src/components/ColumnChart/ColumnChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ interface MeasureConfig extends IChartMeasure {
}

interface DimensionConfig extends IChartDimension {
/**
* Interval of axis label
* @default 0
*/
interval?: number;
}

Expand Down Expand Up @@ -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}
Expand All @@ -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
Expand Down
3 changes: 1 addition & 2 deletions packages/charts/src/components/ColumnChart/ColumnRechart.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@ export const renderStory = () => {
dimensions={[
{
accessor: 'name',
formatter: (d) => `${d} 2019`,
interval: 0
formatter: (d) => `${d} 2019`
}
]}
measures={[
Expand Down
4 changes: 2 additions & 2 deletions packages/charts/src/components/ComposedChart/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/charts/src/components/LineChart/LineChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down