Skip to content

Commit 0d86158

Browse files
gkagka
committed
fix: use @emotion/css in axes ticks
1 parent 9ee6822 commit 0d86158

File tree

5 files changed

+102
-69
lines changed

5 files changed

+102
-69
lines changed

‎src/lib/core/Plot.svelte

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -28,22 +28,6 @@
2828
import mergeDeep from '../helpers/mergeDeep.js';
2929
import { computeScales, projectXY } from '../helpers/scales.js';
3030
import { CHANNEL_SCALE, SCALES } from '../constants.js';
31-
import { scale } from 'svelte/transition';
32-
33-
let {
34-
header,
35-
footer,
36-
overlay,
37-
underlay,
38-
children,
39-
facetAxes,
40-
testid,
41-
facet,
42-
class: className = '',
43-
css,
44-
width: fixedWidth,
45-
...initialOpts
46-
}: Partial<PlotOptions> = $props();
4731
4832
// automatic margins can be applied by the marks, registered
4933
// with their respective unique identifier as keys
@@ -95,6 +79,21 @@
9579
...getContext<Partial<PlotDefaults>>('svelteplot/defaults')
9680
};
9781
82+
let {
83+
header,
84+
footer,
85+
overlay,
86+
underlay,
87+
children,
88+
facetAxes,
89+
testid,
90+
facet,
91+
class: className = '',
92+
css = DEFAULTS.css,
93+
width: fixedWidth,
94+
...initialOpts
95+
}: Partial<PlotOptions> = $props();
96+
9897
let width = $state(DEFAULTS.initialWidth);
9998
10099
setContext('svelteplot/_defaults', DEFAULTS);
@@ -454,7 +453,8 @@
454453
symbol: { type: 'ordinal' },
455454
fx: { type: 'band', axis: 'top' },
456455
fy: { type: 'band', axis: 'right' },
457-
locale: DEFAULTS.locale
456+
locale: DEFAULTS.locale,
457+
css: DEFAULTS.css
458458
};
459459
}
460460

‎src/lib/helpers/getBaseStyles.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const styleProps: Partial<Record<MarkStyleProps, string | null>> = {
1818
fontWeight: 'font-weight',
1919
fontStyle: 'font-style',
2020
textAnchor: 'text-anchor',
21+
fontVariant: 'font-variant',
2122
cursor: 'cursor',
2223
pointerEvents: 'pointer-events'
2324
};

‎src/lib/marks/helpers/BaseAxisX.svelte

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
RawValue,
1212
ScaleType
1313
} from '$lib/types.js';
14-
import { resolveScaledStyles, resolveProp } from '$lib/helpers/resolve.js';
14+
import { resolveProp, resolveStyles } from '$lib/helpers/resolve.js';
1515
import { max } from 'd3-array';
1616
import { randomId, testFilter } from '$lib/helpers/index.js';
1717
@@ -142,7 +142,7 @@
142142
</script>
143143

144144
<g class="axis-x">
145-
{#each positionedTicks as tick, t}
145+
{#each positionedTicks as tick, t (t)}
146146
{#if testFilter(tick.value, options) && !tick.hidden}
147147
{@const textLines = tick.text}
148148
{@const prevTextLines = t && positionedTicks[t - 1].text}
@@ -152,27 +152,41 @@
152152
{@const moveDown =
153153
(tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize * 0.35 : 0)) *
154154
(anchor === 'bottom' ? 1 : -1)}
155+
{@const [textStyle, textClass] = resolveStyles(
156+
plot,
157+
tick,
158+
{
159+
fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
160+
...options,
161+
fontSize: tickFontSize,
162+
stroke: null
163+
},
164+
'fill',
165+
{ x: true }
166+
)}
155167
<g
156168
class="tick {tickClass_ || ''}"
157169
transform="translate({tick.x + tick.dx}, {tickY + tick.dy})"
158170
text-anchor={tickRotate < 0 ? 'end' : tickRotate > 0 ? 'start' : 'middle'}>
159171
{#if tickSize}
172+
{@const [tickLineStyle, tickLineClass] = resolveStyles(
173+
plot,
174+
tick,
175+
options,
176+
'stroke',
177+
{ x: true }
178+
)}
160179
<line
161-
style={resolveScaledStyles(tick, options, {}, plot, 'stroke')}
180+
style={tickLineStyle}
181+
class={tickLineClass}
162182
y2={anchor === 'bottom' ? tickSize : -tickSize} />
163183
{/if}
164184

165185
<text
166186
bind:this={tickTextElements[t]}
167187
transform="translate(0, {moveDown}) rotate({tickRotate})"
168-
style:font-variant={isQuantitative ? 'tabular-nums' : 'normal'}
169-
style={resolveScaledStyles(
170-
tick,
171-
{ ...options, fontSize: tickFontSize, stroke: null },
172-
{},
173-
plot,
174-
'fill'
175-
)}
188+
style={textStyle}
189+
class={textClass}
176190
x={0}
177191
y={0}
178192
dominant-baseline={tickRotate !== 0

‎src/lib/marks/helpers/BaseAxisY.svelte

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
2-
import { getContext, untrack } from 'svelte';
2+
import { getContext, tick, untrack } from 'svelte';
33
import { randomId, testFilter } from '$lib/helpers/index.js';
4-
import { resolveProp, resolveScaledStyles } from '$lib/helpers/resolve.js';
4+
import { resolveProp, resolveStyles } from '$lib/helpers/resolve.js';
55
import { max } from 'd3-array';
66
import type {
77
AutoMarginStores,
@@ -84,6 +84,8 @@
8484
8585
let tickTexts = $state([] as SVGTextElement[]);
8686
87+
const isQuantitative = $derived(scaleType !== 'point' && scaleType !== 'band');
88+
8789
// generate id used for registering margins
8890
const id = randomId();
8991
@@ -141,29 +143,43 @@
141143
</script>
142144

143145
<g class="axis-y">
144-
{#each positionedTicks as tick, t}
146+
{#each positionedTicks as tick, t (t)}
145147
{#if testFilter(tick.value, options) && !tick.hidden}
146148
{@const tickClass_ = resolveProp(tickClass, tick.value)}
149+
{@const [textStyle, textClass] = resolveStyles(
150+
plot,
151+
tick,
152+
{
153+
fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
154+
...options,
155+
fontSize: tickFontSize,
156+
stroke: null
157+
},
158+
'fill',
159+
{ y: true }
160+
)}
147161
<g
148162
class="tick {tickClass_ || ''}"
149163
transform="translate({tick.dx +
150164
marginLeft +
151165
(anchor === 'left' ? 0 : width)},{tick.y + tick.dy})">
152166
{#if tickSize}
167+
{@const [tickLineStyle, tickLineClass] = resolveStyles(
168+
plot,
169+
tick,
170+
options,
171+
'stroke',
172+
{ y: true }
173+
)}
153174
<line
154-
style={resolveScaledStyles(tick.value, options, {}, plot, 'stroke')}
175+
style={tickLineStyle}
176+
class={tickLineClass}
155177
x2={anchor === 'left' ? -tickSize : tickSize} />
156178
{/if}
157179
<text
158180
bind:this={tickTexts[t]}
159-
class={{ 'is-left': anchor === 'left' }}
160-
style={resolveScaledStyles(
161-
tick.value,
162-
{ ...options, fontSize: tickFontSize, stroke: null },
163-
{},
164-
plot,
165-
'fill'
166-
)}
181+
class={[textClass, { 'is-left': anchor === 'left' }]}
182+
style={textStyle}
167183
x={(tickSize + tickPadding) * (anchor === 'left' ? -1 : 1)}
168184
dominant-baseline={LINE_ANCHOR[lineAnchor]}
169185
>{Array.isArray(tick.text) ? tick.text.join(' ') : tick.text}</text>

‎src/lib/types.ts

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -151,31 +151,31 @@ export type ScaleOptions = {
151151
base?: number;
152152
// sorting for band and point scales
153153
sort?:
154-
| ChannelAccessor
155-
| ((a: RawValue, b: RawValue) => number)
156-
| {
157-
channel: string;
158-
order: 'ascending' | 'descending';
159-
};
154+
| ChannelAccessor
155+
| ((a: RawValue, b: RawValue) => number)
156+
| {
157+
channel: string;
158+
order: 'ascending' | 'descending';
159+
};
160160
// symlog scales
161161
constant?: number;
162162
};
163163

164164
export type ColorScaleOptions = ScaleOptions & {
165165
legend: boolean;
166166
type:
167-
| ScaleType
168-
| 'categorical'
169-
| 'sequential'
170-
| 'cyclical'
171-
| 'threshold'
172-
| 'quantile'
173-
| 'quantize'
174-
| 'diverging'
175-
| 'diverging-log'
176-
| 'diverging-pow'
177-
| 'diverging-sqrt'
178-
| 'diverging-symlog';
167+
| ScaleType
168+
| 'categorical'
169+
| 'sequential'
170+
| 'cyclical'
171+
| 'threshold'
172+
| 'quantile'
173+
| 'quantize'
174+
| 'diverging'
175+
| 'diverging-log'
176+
| 'diverging-pow'
177+
| 'diverging-sqrt'
178+
| 'diverging-symlog';
179179
scheme: string;
180180
/**
181181
* fallback color used for null/undefined
@@ -394,9 +394,9 @@ export type PlotOptions = {
394394
*/
395395
locale: string;
396396
/**
397-
*
397+
* pass a @emotion/css function to style plot using dynamic classes
398398
*/
399-
css: (d: string) => string;
399+
css: (d: string) => string | undefined;
400400
};
401401

402402
export type PlotDefaults = {
@@ -438,6 +438,7 @@ export type PlotDefaults = {
438438
*/
439439
numberFormat: Intl.NumberFormatOptions;
440440
markerDotRadius: number;
441+
css: (d: string) => string | undefined;
441442
};
442443

443444
export type GenericMarkOptions = Record<string, any>;
@@ -474,9 +475,9 @@ export type PlotScale = {
474475
uniqueScaleProps: Set<ChannelAccessor>;
475476
skip: Map<ScaledChannelName, Set<symbol>>;
476477
fn: ScaleLinear<RawValue, number> &
477-
ScaleBand<RawValue> &
478-
ScaleOrdinal<string | Date, number> &
479-
ScaleOrdinal<string | Date, string>;
478+
ScaleBand<RawValue> &
479+
ScaleOrdinal<string | Date, number> &
480+
ScaleOrdinal<string | Date, string>;
480481
};
481482

482483
export type CurveName =
@@ -703,11 +704,11 @@ export type BaseMarkProps = Partial<{
703704
export type BorderRadius =
704705
| number
705706
| {
706-
topLeft?: number;
707-
topRight?: number;
708-
bottomRight?: number;
709-
bottomLeft?: number;
710-
};
707+
topLeft?: number;
708+
topRight?: number;
709+
bottomRight?: number;
710+
bottomLeft?: number;
711+
};
711712

712713
export type BaseRectMarkProps = {
713714
inset?: ConstantAccessor<number>;
@@ -795,6 +796,7 @@ export type MarkStyleProps =
795796
| 'fill'
796797
| 'fillOpacity'
797798
| 'fontWeight'
799+
| 'fontVariant'
798800
| 'fontSize'
799801
| 'fontStyle'
800802
| 'stroke'
@@ -894,4 +896,4 @@ export type MapMethod =
894896

895897
export type MapOptions = Partial<Record<ScaledChannelName, MapMethod>>;
896898

897-
export type UsedScales = Record<ScaledChannelName, boolean>;
899+
export type UsedScales = Record<ScaledChannelName, boolean>;

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy