@fundar/data-chart-telling 0.0.54 → 0.0.56
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -77,8 +77,10 @@
|
|
|
77
77
|
.dct-chart {
|
|
78
78
|
display: flex;
|
|
79
79
|
flex-direction: column;
|
|
80
|
+
box-sizing: border-box;
|
|
80
81
|
max-width: 100%;
|
|
81
82
|
max-height: 100%;
|
|
83
|
+
padding: var(--dct-bleed, 8px);
|
|
82
84
|
overflow: hidden;
|
|
83
85
|
color: var(--dct-fg, currentColor);
|
|
84
86
|
background: var(--dct-bg, transparent);
|
|
@@ -32,7 +32,8 @@ export const DEFAULT_CONFIG = {
|
|
|
32
32
|
spacing: {
|
|
33
33
|
headerPadding: '0.75rem 0 1rem',
|
|
34
34
|
legendPadding: '0.75rem 0',
|
|
35
|
-
captionPadding: '0.5rem 0'
|
|
35
|
+
captionPadding: '0.5rem 0',
|
|
36
|
+
bleed: '8px'
|
|
36
37
|
},
|
|
37
38
|
title: text({ size: '1.5rem', weight: 500, leading: '1.2' }),
|
|
38
39
|
subtitle: text({
|
|
@@ -196,6 +197,7 @@ export function configToCssVars(c) {
|
|
|
196
197
|
'--dct-header-pad': c.spacing.headerPadding,
|
|
197
198
|
'--dct-legend-pad': c.spacing.legendPadding,
|
|
198
199
|
'--dct-caption-pad': c.spacing.captionPadding,
|
|
200
|
+
'--dct-bleed': c.spacing.bleed,
|
|
199
201
|
...t('title', c.title),
|
|
200
202
|
...t('subtitle', c.subtitle),
|
|
201
203
|
...t('caption', c.caption),
|
|
@@ -14,6 +14,7 @@ export declare const THEMES: {
|
|
|
14
14
|
headerPadding?: string | undefined;
|
|
15
15
|
legendPadding?: string | undefined;
|
|
16
16
|
captionPadding?: string | undefined;
|
|
17
|
+
bleed?: string | undefined;
|
|
17
18
|
} | undefined;
|
|
18
19
|
title?: {
|
|
19
20
|
font?: string | undefined;
|
|
@@ -242,6 +243,7 @@ export declare const THEMES: {
|
|
|
242
243
|
headerPadding?: string | undefined;
|
|
243
244
|
legendPadding?: string | undefined;
|
|
244
245
|
captionPadding?: string | undefined;
|
|
246
|
+
bleed?: string | undefined;
|
|
245
247
|
} | undefined;
|
|
246
248
|
title?: {
|
|
247
249
|
font?: string | undefined;
|
|
@@ -470,6 +472,7 @@ export declare const THEMES: {
|
|
|
470
472
|
headerPadding?: string | undefined;
|
|
471
473
|
legendPadding?: string | undefined;
|
|
472
474
|
captionPadding?: string | undefined;
|
|
475
|
+
bleed?: string | undefined;
|
|
473
476
|
} | undefined;
|
|
474
477
|
title?: {
|
|
475
478
|
font?: string | undefined;
|
|
@@ -698,6 +701,7 @@ export declare const THEMES: {
|
|
|
698
701
|
headerPadding?: string | undefined;
|
|
699
702
|
legendPadding?: string | undefined;
|
|
700
703
|
captionPadding?: string | undefined;
|
|
704
|
+
bleed?: string | undefined;
|
|
701
705
|
} | undefined;
|
|
702
706
|
title?: {
|
|
703
707
|
font?: string | undefined;
|
|
@@ -115,7 +115,7 @@
|
|
|
115
115
|
{@const [valueMin, valueMax] = valueExtentFor(marker.isHorizontal)}
|
|
116
116
|
{#if marker.isHorizontal}
|
|
117
117
|
{@const thickness = Math.max(0, bandwidth - insetTop - insetBottom) + 2}
|
|
118
|
-
{@const center = bandStart +
|
|
118
|
+
{@const center = bandStart + insetBottom + (bandwidth - insetTop - insetBottom) / 2}
|
|
119
119
|
<rect
|
|
120
120
|
class="hover-area"
|
|
121
121
|
x={valueMin}
|