From 6f1bb0dca1977fa93343f6334c56bf15913e59a4 Mon Sep 17 00:00:00 2001 From: deathsh0ot Date: Sat, 22 Oct 2022 19:30:00 +0100 Subject: [PATCH 1/4] fix: fixed collision between Y axis title and axis ticks text --- packages/ez-core/src/utils/axis.ts | 38 +++++++++---------- .../ez-react/src/components/scales/Axis.tsx | 21 ++++++++-- .../ez-react/src/recipes/area/AreaChart.tsx | 2 +- .../ez-react/src/recipes/line/LineChart.tsx | 2 +- .../src/recipes/line/LineErrorMarginChart.tsx | 2 +- .../src/recipes/line/MultiLineChart.tsx | 2 +- .../src/recipes/scatter/BubbleChart.tsx | 2 +- .../src/recipes/scatter/ScatterChart.tsx | 2 +- .../ez-vue/src/components/scales/Axis.tsx | 11 +++++- 9 files changed, 52 insertions(+), 30 deletions(-) diff --git a/packages/ez-core/src/utils/axis.ts b/packages/ez-core/src/utils/axis.ts index 5a6f5ba..5677e71 100644 --- a/packages/ez-core/src/utils/axis.ts +++ b/packages/ez-core/src/utils/axis.ts @@ -38,10 +38,12 @@ export const getAxisTitleProps = ( position: Position, dimensions: Dimensions, padding: ChartPadding, - titleAlign: Anchor + titleAlign: Anchor, + maxTickWidth: Number ) => { + // sets the Y axis title position if (position === Position.LEFT || position === Position.RIGHT) { - const x = 0; + const x = maxTickWidth > 60 ? -60 : -maxTickWidth / 2; const dy = (position === Position.RIGHT ? padding.right : -padding.left) / 2; let y = dimensions.height / 2; @@ -55,7 +57,9 @@ export const getAxisTitleProps = ( transform: `translate(${x},${y}) rotate(-90)`, dy, }; - } else { + } + // sets the X axis title position + else { let x = dimensions.width / 2; const y = 0; const dy = @@ -109,15 +113,10 @@ export const getGridLines = ( ) => { const isHorizontal = direction === Direction.HORIZONTAL; const position = isHorizontal ? Position.BOTTOM : Position.LEFT; - return getAxis( - position, - scale, - dimensions, - { - tickCount, - tickSize: isHorizontal ? dimensions.height : dimensions.width - } - ); + return getAxis(position, scale, dimensions, { + tickCount, + tickSize: isHorizontal ? dimensions.height : dimensions.width, + }); }; export const getAxisTickByCoordinate = ( @@ -136,13 +135,13 @@ const measureAxisLabels = (labels: SVGGraphicsElement[]) => { }; } - const boundingBoxes = labels.map((l) => { + const boundingBoxes = labels.map(l => { return typeof l.getBBox === 'function' ? l.getBBox() : { width: 0, height: 0 }; }); - const maxHeight = Math.max(...boundingBoxes.map((b) => b.height)); - const maxWidth = Math.max(...boundingBoxes.map((b) => b.width)); + const maxHeight = Math.max(...boundingBoxes.map(b => b.height)); + const maxWidth = Math.max(...boundingBoxes.map(b => b.width)); return { maxHeight, maxWidth, @@ -169,8 +168,7 @@ const calculateAxisTickRotation = ( ) => { const { maxHeight, maxWidth, labelCount } = measureAxisLabels(labels); const measuredSize = labelCount * maxWidth; - const sign = - position === Position.TOP || position === Position.LEFT ? -1 : 1; + const sign = position === Position.TOP || position === Position.LEFT ? -1 : 1; // The more the overlap, the more we rotate let rotate: number; @@ -201,20 +199,20 @@ export const getAxisLabelAttributes = ( rotation: number | 'auto', reverse: boolean ) => { - const { rotate, maxHeight, anchor } = calculateAxisTickRotation( + const { rotate, maxHeight, maxWidth, anchor } = calculateAxisTickRotation( scale, elements, position, rotation, reverse ); - const sign = - position === Position.TOP || position === Position.LEFT ? -1 : 1; + const sign = position === Position.TOP || position === Position.LEFT ? -1 : 1; const offset = sign * Math.floor(maxHeight / 2); const offsetTransform = isVerticalPosition(position) ? `translate(${offset}, 0)` : `translate(0, ${offset})`; return { + maxWidth, textAnchor: anchor, transform: `${offsetTransform} rotate(${rotate} 0 0)`, }; diff --git a/packages/ez-react/src/components/scales/Axis.tsx b/packages/ez-react/src/components/scales/Axis.tsx index 3479a8b..b4e4de0 100644 --- a/packages/ez-react/src/components/scales/Axis.tsx +++ b/packages/ez-react/src/components/scales/Axis.tsx @@ -91,8 +91,17 @@ export const Axis: FC = ({ }, [currentAxis]); const titleProps = useMemo(() => { - return getAxisTitleProps(position, dimensions, padding, titleAlign); - }, [position, dimensions, padding, titleAlign]); + // using the tick text max width to help set the distance between the Y axis title and the ticks + const { maxWidth } = axisLabelTransform; + return getAxisTitleProps( + position, + dimensions, + padding, + titleAlign, + maxWidth + ); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [currentAxis, position, dimensions, padding, titleAlign]); return ( = ({ y2={getTick(tick.line.y2 || 0)} className="ez-axis-tick-line" /> + + {tick.text.text.replace(/(\.\d{1}).*$/, (_a, c) => c)} + = ({ className="ez-axis-tick-text" ref={(el) => (labelsRef.current[index] = el)} > - {tick.text.text.replace(/(\.\d{1}).*$/, (_a, c) => c)} + {tick.text.text + .replace(/(\.\d{1}).*$/, (_a, c) => c) + .substring(0, 7)} + {tick.text.text.length > 7 ? '...' : ''} ); diff --git a/packages/ez-react/src/recipes/area/AreaChart.tsx b/packages/ez-react/src/recipes/area/AreaChart.tsx index f0b7416..1e26e36 100644 --- a/packages/ez-react/src/recipes/area/AreaChart.tsx +++ b/packages/ez-react/src/recipes/area/AreaChart.tsx @@ -58,7 +58,7 @@ export const AreaChart: FC = ({ delay: 0, }, padding = { - left: 100, + left: 150, bottom: 100, right: 100, top: 100, diff --git a/packages/ez-react/src/recipes/line/LineChart.tsx b/packages/ez-react/src/recipes/line/LineChart.tsx index b111887..8ca68a0 100644 --- a/packages/ez-react/src/recipes/line/LineChart.tsx +++ b/packages/ez-react/src/recipes/line/LineChart.tsx @@ -53,7 +53,7 @@ export const LineChart: FC = ({ delay: 0, }, padding = { - left: 100, + left: 150, bottom: 100, right: 100, top: 100, diff --git a/packages/ez-react/src/recipes/line/LineErrorMarginChart.tsx b/packages/ez-react/src/recipes/line/LineErrorMarginChart.tsx index c940b71..173ad6d 100644 --- a/packages/ez-react/src/recipes/line/LineErrorMarginChart.tsx +++ b/packages/ez-react/src/recipes/line/LineErrorMarginChart.tsx @@ -68,7 +68,7 @@ export const LineErrorMarginChart: FC = ({ delay: 0, }, padding = { - left: 100, + left: 150, bottom: 100, right: 100, top: 100, diff --git a/packages/ez-react/src/recipes/line/MultiLineChart.tsx b/packages/ez-react/src/recipes/line/MultiLineChart.tsx index a59aa33..37341e9 100644 --- a/packages/ez-react/src/recipes/line/MultiLineChart.tsx +++ b/packages/ez-react/src/recipes/line/MultiLineChart.tsx @@ -61,7 +61,7 @@ export const MultiLineChart: FC = ({ delay: 0, }, padding = { - left: 100, + left: 150, bottom: 100, right: 100, top: 100, diff --git a/packages/ez-react/src/recipes/scatter/BubbleChart.tsx b/packages/ez-react/src/recipes/scatter/BubbleChart.tsx index e0d589f..193da76 100644 --- a/packages/ez-react/src/recipes/scatter/BubbleChart.tsx +++ b/packages/ez-react/src/recipes/scatter/BubbleChart.tsx @@ -48,7 +48,7 @@ export const BubbleChart: FC = ({ delay: 0, }, padding = { - left: 100, + left: 150, bottom: 100, right: 100, top: 100, diff --git a/packages/ez-react/src/recipes/scatter/ScatterChart.tsx b/packages/ez-react/src/recipes/scatter/ScatterChart.tsx index 5188e09..764e351 100644 --- a/packages/ez-react/src/recipes/scatter/ScatterChart.tsx +++ b/packages/ez-react/src/recipes/scatter/ScatterChart.tsx @@ -45,7 +45,7 @@ export const ScatterChart: FC = ({ delay: 0, }, padding = { - left: 100, + left: 150, bottom: 100, right: 100, top: 100, diff --git a/packages/ez-vue/src/components/scales/Axis.tsx b/packages/ez-vue/src/components/scales/Axis.tsx index 6b0f90e..913bdb6 100644 --- a/packages/ez-vue/src/components/scales/Axis.tsx +++ b/packages/ez-vue/src/components/scales/Axis.tsx @@ -83,6 +83,7 @@ export default class Axis extends Vue { private axisLabelTransform = { textAnchor: Anchor.MIDDLE, transform: 'translate(0, 0) rotate(0 0 0)', + maxWidth: 0, }; updateCurrentAxis() { @@ -167,11 +168,13 @@ export default class Axis extends Vue { } get titleProps() { + const { maxWidth } = this.axisLabelTransform; return getAxisTitleProps( this.position, this.chart.dimensions, this.chart.padding, this.titleAlign, + maxWidth, ); } @@ -205,6 +208,9 @@ export default class Axis extends Vue { x2={getTick(tick.line.x2)} y2={getTick(tick.line.y2)} /> + + {tick.text.text.replace(/(\.\d{1}).*$/, (_a, c) => c)} + - {tick.text.text.toString().replace(/(\.\d{1}).*$/, (_a, c) => c)} + {tick.text.text + .replace(/(\.\d{1}).*$/, (_a, c) => c) + .substring(0, 7)} + {tick.text.text.length > 7 ? '...' : ''} ))} From ee8d4ed6c6fa24a2a909bc57fcef6ca7d31454f5 Mon Sep 17 00:00:00 2001 From: deathsh0ot Date: Sat, 22 Oct 2022 20:50:40 +0100 Subject: [PATCH 2/4] fix: updated the snapshots after fixing chart padding in vue which was breaking the unit test --- .../components/scales/Axis.spec.tsx.snap | 15 +++ .../recipes/area/AreaChart.spec.tsx.snap | 83 +++++++++++++--- .../recipes/bar/BarChart.spec.tsx.snap | 42 ++++++++ .../recipes/column/ColumnChart.spec.tsx.snap | 42 ++++++++ .../column/LineColumnChart.spec.tsx.snap | 75 ++++++++++++++ .../recipes/line/LineChart.spec.tsx.snap | 81 ++++++++++++--- .../line/LineErrorMarginChart.spec.tsx.snap | 98 +++++++++++++++--- .../recipes/line/MultiLineChart.spec.tsx.snap | 99 ++++++++++++++++--- .../recipes/scatter/BubbleChart.spec.tsx.snap | 94 +++++++++++++++--- .../scatter/ScatterChart.spec.tsx.snap | 94 +++++++++++++++--- .../ez-vue/src/recipes/area/AreaChart.tsx | 5 +- .../ez-vue/src/recipes/line/LineChart.tsx | 2 +- .../src/recipes/line/LineErrorMarginChart.tsx | 2 +- .../src/recipes/line/MultiLineChart.tsx | 14 +-- .../src/recipes/scatter/BubbleChart.tsx | 2 +- .../src/recipes/scatter/ScatterChart.tsx | 2 +- 16 files changed, 656 insertions(+), 94 deletions(-) diff --git a/packages/ez-dev/jest/snapshots/components/scales/Axis.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/scales/Axis.spec.tsx.snap index 20767cf..dddd325 100644 --- a/packages/ez-dev/jest/snapshots/components/scales/Axis.spec.tsx.snap +++ b/packages/ez-dev/jest/snapshots/components/scales/Axis.spec.tsx.snap @@ -21,6 +21,9 @@ exports[`Axis renders axis with four ticks 1`] = ` y2="6" > + + 10 + + + 15 + + + 20 + + + 25 + + + 30 + - + + + 0 + + + 2 + + + 4 + + + 6 + + + 8 + + + 10 + + + 12 + + + 14 + + + 10 + + + 12 + + + 14 + + + 16 + + + 18 + + + 20 + + + 22 + + + 24 + + + 26 + + + 28 + + + 30 + + + 50 + + + 55 + + + 60 + + + 65 + + + 70 + + + 75 + + + 80 + + + 85 + + + 90 + + + 95 + + + 100 + + + Alpha + + + Beta + + + Gamma + + + Alpha + + + Beta + + + Gamma + + + 50 + + + 55 + + + 60 + + + 65 + + + 70 + + + 75 + + + 80 + + + 85 + + + 90 + + + 95 + + + 100 + + + Alpha + + + Beta + + + Gamma + + + 50 + + + 55 + + + 60 + + + 65 + + + 70 + + + 75 + + + 80 + + + 85 + + + 90 + + + 95 + + + 100 + + + 10 + + + 12 + + + 14 + + + 16 + + + 18 + + + 20 + + + 22 + + + 24 + + + 26 + + + 28 + + + 30 + - + + + 0 + + + 2 + + + 4 + + + 6 + + + 8 + + + 10 + + + 12 + + + 14 + + + 10 + + + 12 + + + 14 + + + 16 + + + 18 + + + 20 + + + 22 + + + 24 + + + 26 + + + 28 + + + 30 + - + + + 0 + + + 2 + + + 4 + + + 6 + + + 8 + + + 10 + + + 12 + + + 14 + + + 8 + + + 10 + + + 12 + + + 14 + + + 16 + + + 18 + + + 20 + + + 22 + + + 24 + + + 26 + + + 28 + + + 30 + + + 32 + + + 34 + + + 36 + + + 38 + - + + + 0 + + + 2 + + + 4 + + + 6 + + + 8 + + + 10 + + + 12 + + + 14 + + + 20 + + + 40 + + + 60 + + + 80 + + + 100 + + + 120 + + + 140 + + + 160 + + + 180 + + + 200 + + + 220 + + + 240 + + + 260 + + + 280 + + + 300 + - + @@ -28,7 +28,7 @@ exports[`BubbleChart renders a bubble chart 1`] = ` + + 50 + + + 55 + + + 60 + + + 65 + + + 70 + + + 75 + + + 80 + + + 85 + + + 90 + + + 95 + + + 100 + + + 10 + + + 12 + + + 14 + + + 16 + + + 18 + + + 20 + + + 22 + + + 24 + + + 26 + + + 28 + + + 30 + - + + + 50 + + + 55 + + + 60 + + + 65 + + + 70 + + + 75 + + + 80 + + + 85 + + + 90 + + + 95 + + + 100 + + + 10 + + + 12 + + + 14 + + + 16 + + + 18 + + + 20 + + + 22 + + + 24 + + + 26 + + + 28 + + + 30 + , default() { return { - left: 100, + left: 150, bottom: 100, right: 100, top: 100, @@ -243,7 +243,8 @@ export default class AreaChart extends Vue { diff --git a/packages/ez-vue/src/recipes/line/LineChart.tsx b/packages/ez-vue/src/recipes/line/LineChart.tsx index 6559c2a..1c7f99a 100644 --- a/packages/ez-vue/src/recipes/line/LineChart.tsx +++ b/packages/ez-vue/src/recipes/line/LineChart.tsx @@ -87,7 +87,7 @@ export default class LineChart extends Vue { type: Object as PropType, default() { return { - left: 100, + left: 150, bottom: 100, right: 100, top: 100, diff --git a/packages/ez-vue/src/recipes/line/LineErrorMarginChart.tsx b/packages/ez-vue/src/recipes/line/LineErrorMarginChart.tsx index c4f5635..ab3e1d2 100644 --- a/packages/ez-vue/src/recipes/line/LineErrorMarginChart.tsx +++ b/packages/ez-vue/src/recipes/line/LineErrorMarginChart.tsx @@ -107,7 +107,7 @@ export default class LineErrorMarginChart extends Vue { type: Object as PropType, default() { return { - left: 100, + left: 150, bottom: 100, right: 100, top: 100, diff --git a/packages/ez-vue/src/recipes/line/MultiLineChart.tsx b/packages/ez-vue/src/recipes/line/MultiLineChart.tsx index f68adb2..2302b7d 100644 --- a/packages/ez-vue/src/recipes/line/MultiLineChart.tsx +++ b/packages/ez-vue/src/recipes/line/MultiLineChart.tsx @@ -98,7 +98,7 @@ export default class MultiLineChart extends mixins(ToggleDomainKeyMixin) { type: Object as PropType, default() { return { - left: 100, + left: 150, bottom: 100, right: 100, top: 100, @@ -211,12 +211,12 @@ export default class MultiLineChart extends mixins(ToggleDomainKeyMixin) { {activeDomainKeys.map((yDomainKey) => ( - + ))} , default() { return { - left: 100, + left: 150, bottom: 100, right: 100, top: 100, diff --git a/packages/ez-vue/src/recipes/scatter/ScatterChart.tsx b/packages/ez-vue/src/recipes/scatter/ScatterChart.tsx index e7c7a08..55b9e39 100644 --- a/packages/ez-vue/src/recipes/scatter/ScatterChart.tsx +++ b/packages/ez-vue/src/recipes/scatter/ScatterChart.tsx @@ -73,7 +73,7 @@ export default class ScatterChart extends Vue { type: Object as PropType, default() { return { - left: 100, + left: 150, bottom: 100, right: 100, top: 100, From 88d248d65c8ca820e91b3a7459443e07f37ad206 Mon Sep 17 00:00:00 2001 From: deathsh0ot Date: Mon, 24 Oct 2022 15:10:34 +0100 Subject: [PATCH 3/4] fix: collision resolved when using RTL as well --- packages/ez-core/src/utils/axis.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/ez-core/src/utils/axis.ts b/packages/ez-core/src/utils/axis.ts index 5677e71..3dbbf28 100644 --- a/packages/ez-core/src/utils/axis.ts +++ b/packages/ez-core/src/utils/axis.ts @@ -43,7 +43,15 @@ export const getAxisTitleProps = ( ) => { // sets the Y axis title position if (position === Position.LEFT || position === Position.RIGHT) { - const x = maxTickWidth > 60 ? -60 : -maxTickWidth / 2; + const x = + position === Position.RIGHT + ? maxTickWidth > 60 + ? 60 + : +maxTickWidth / 2 + : maxTickWidth > 60 + ? -60 + : -maxTickWidth / 2; + const dy = (position === Position.RIGHT ? padding.right : -padding.left) / 2; let y = dimensions.height / 2; @@ -206,6 +214,7 @@ export const getAxisLabelAttributes = ( rotation, reverse ); + console.log({ reverse }); const sign = position === Position.TOP || position === Position.LEFT ? -1 : 1; const offset = sign * Math.floor(maxHeight / 2); const offsetTransform = isVerticalPosition(position) From d3a0792f5f461a5f4d1c1f834f9f013da287f192 Mon Sep 17 00:00:00 2001 From: deathsh0ot Date: Mon, 24 Oct 2022 15:31:11 +0100 Subject: [PATCH 4/4] fix: removed console logs --- packages/ez-core/src/utils/axis.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/ez-core/src/utils/axis.ts b/packages/ez-core/src/utils/axis.ts index 3dbbf28..4c5696a 100644 --- a/packages/ez-core/src/utils/axis.ts +++ b/packages/ez-core/src/utils/axis.ts @@ -214,7 +214,6 @@ export const getAxisLabelAttributes = ( rotation, reverse ); - console.log({ reverse }); const sign = position === Position.TOP || position === Position.LEFT ? -1 : 1; const offset = sign * Math.floor(maxHeight / 2); const offsetTransform = isVerticalPosition(position)