From 134daa85b9c2c0f34cc778a97a814a5d0aa9bd7b Mon Sep 17 00:00:00 2001 From: Jonas Date: Fri, 27 Sep 2024 11:32:15 +0200 Subject: [PATCH 1/2] refactor(axis): use css-classes instead of style * adds css-classes to ticks to make them more accessible from outside Signed-off-by: Max Jonas --- packages/core/scss/components/_axis.scss | 8 ++++++++ packages/core/src/components/axes/axis.ts | 10 +++++----- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/core/scss/components/_axis.scss b/packages/core/scss/components/_axis.scss index 8dd00aa256..112b0a793d 100644 --- a/packages/core/scss/components/_axis.scss +++ b/packages/core/scss/components/_axis.scss @@ -32,6 +32,14 @@ g.tick text { fill: theme.$text-secondary; font-family: var(--#{globals.$prefix}-charts-font-family-condensed); + + &.primary-tick-label { + font-weight: bold; + } + + &.tick-label { + font-weight: normal; + } } g.tick line { diff --git a/packages/core/src/components/axes/axis.ts b/packages/core/src/components/axes/axis.ts index 23f0d113b5..e0413ec61d 100644 --- a/packages/core/src/components/axes/axis.ts +++ b/packages/core/src/components/axes/axis.ts @@ -406,11 +406,11 @@ export class Axis extends Component { .data(axis.tickValues(), scale) .order() .select('text') - ticks.style('font-weight', (tick: number, i: number) => { - return isTickPrimary(tick, i, axis.tickValues(), timeInterval, showDayName) - ? 'bold' - : 'normal' - }) + ticks.attr('class', (tick: number, i: number) => + isTickPrimary(tick, i, axis.tickValues(), timeInterval, showDayName) + ? 'primary-tick-label' + : 'tick-label' + ) } else { if (!animate || !axisRefExists) { axisRef = axisRef.call(axis) From 99e7ea0283c0cef5ee1e83494ae97a176b71933d Mon Sep 17 00:00:00 2001 From: Jonas Date: Mon, 30 Sep 2024 06:40:39 +0200 Subject: [PATCH 2/2] refactor(axis): rename css class --- packages/core/scss/components/_axis.scss | 2 +- packages/core/src/components/axes/axis.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/scss/components/_axis.scss b/packages/core/scss/components/_axis.scss index 112b0a793d..5114c25184 100644 --- a/packages/core/scss/components/_axis.scss +++ b/packages/core/scss/components/_axis.scss @@ -33,7 +33,7 @@ fill: theme.$text-secondary; font-family: var(--#{globals.$prefix}-charts-font-family-condensed); - &.primary-tick-label { + &.tick-label--primary { font-weight: bold; } diff --git a/packages/core/src/components/axes/axis.ts b/packages/core/src/components/axes/axis.ts index e0413ec61d..868cd090d4 100644 --- a/packages/core/src/components/axes/axis.ts +++ b/packages/core/src/components/axes/axis.ts @@ -408,7 +408,7 @@ export class Axis extends Component { .select('text') ticks.attr('class', (tick: number, i: number) => isTickPrimary(tick, i, axis.tickValues(), timeInterval, showDayName) - ? 'primary-tick-label' + ? 'tick-label--primary' : 'tick-label' ) } else {