layerchart 0.51.0 → 0.51.2
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.
- package/dist/components/charts/AreaChart.svelte +39 -18
- package/dist/components/charts/AreaChart.svelte.d.ts +3 -1
- package/dist/components/charts/BarChart.svelte +27 -17
- package/dist/components/charts/BarChart.svelte.d.ts +1 -1
- package/dist/components/charts/LineChart.svelte +27 -17
- package/dist/components/charts/LineChart.svelte.d.ts +1 -1
- package/dist/components/charts/ScatterChart.svelte +27 -17
- package/dist/components/charts/ScatterChart.svelte.d.ts +1 -1
- package/package.json +1 -1
|
@@ -8,6 +8,7 @@ import Axis from '../Axis.svelte';
|
|
|
8
8
|
import Chart from '../Chart.svelte';
|
|
9
9
|
import Highlight from '../Highlight.svelte';
|
|
10
10
|
import Labels from '../Labels.svelte';
|
|
11
|
+
import Line from '../Line.svelte';
|
|
11
12
|
import Points from '../Points.svelte';
|
|
12
13
|
import Svg from '../layout/Svg.svelte';
|
|
13
14
|
import * as Tooltip from '../tooltip/index.js';
|
|
@@ -54,7 +55,12 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
|
|
|
54
55
|
yBaseline={0}
|
|
55
56
|
yNice
|
|
56
57
|
{radial}
|
|
57
|
-
padding={radial || axis === false
|
|
58
|
+
padding={radial || axis === false
|
|
59
|
+
? undefined
|
|
60
|
+
: {
|
|
61
|
+
left: axis === true || axis === 'y' ? 16 : 0,
|
|
62
|
+
bottom: axis === true || axis === 'x' ? 16 : 0,
|
|
63
|
+
}}
|
|
58
64
|
tooltip={{ mode: 'bisect-x' }}
|
|
59
65
|
{...$$restProps}
|
|
60
66
|
let:x
|
|
@@ -71,22 +77,27 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
|
|
|
71
77
|
<Svg center={radial}>
|
|
72
78
|
<slot name="axis" {...slotProps}>
|
|
73
79
|
{#if axis}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
80
|
+
{#if axis !== 'x'}
|
|
81
|
+
<Axis
|
|
82
|
+
placement={radial ? 'radius' : 'left'}
|
|
83
|
+
grid
|
|
84
|
+
rule
|
|
85
|
+
format={(value) => format(value, undefined, { variant: 'short' })}
|
|
86
|
+
{...typeof axis === 'object' ? axis : null}
|
|
87
|
+
{...props.yAxis}
|
|
88
|
+
/>
|
|
89
|
+
{/if}
|
|
90
|
+
|
|
91
|
+
{#if axis !== 'y'}
|
|
92
|
+
<Axis
|
|
93
|
+
placement={radial ? 'angle' : 'bottom'}
|
|
94
|
+
grid={radial}
|
|
95
|
+
rule
|
|
96
|
+
format={(value) => format(value, undefined, { variant: 'short' })}
|
|
97
|
+
{...typeof axis === 'object' ? axis : null}
|
|
98
|
+
{...props.xAxis}
|
|
99
|
+
/>
|
|
100
|
+
{/if}
|
|
90
101
|
{/if}
|
|
91
102
|
</slot>
|
|
92
103
|
|
|
@@ -94,6 +105,12 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
|
|
|
94
105
|
|
|
95
106
|
<slot name="marks" {...slotProps}>
|
|
96
107
|
{#each series as s, i}
|
|
108
|
+
{@const lineProps = {
|
|
109
|
+
...props.line,
|
|
110
|
+
...(typeof props.area?.line === 'object' ? props.area.line : null),
|
|
111
|
+
...(typeof s.props?.line === 'object' ? s.props.line : null),
|
|
112
|
+
}}
|
|
113
|
+
|
|
97
114
|
<Area
|
|
98
115
|
data={s.data}
|
|
99
116
|
y0={stackSeries
|
|
@@ -106,11 +123,15 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
|
|
|
106
123
|
: Array.isArray(s.value)
|
|
107
124
|
? s.value[1]
|
|
108
125
|
: (s.value ?? s.key)}
|
|
109
|
-
line={{ class: 'stroke-2', stroke: s.color }}
|
|
110
126
|
fill={s.color}
|
|
111
127
|
fill-opacity={0.3}
|
|
112
128
|
{...props.area}
|
|
113
129
|
{...s.props}
|
|
130
|
+
line={{
|
|
131
|
+
class: !('stroke-width' in lineProps) ? 'stroke-2' : '',
|
|
132
|
+
stroke: s.color,
|
|
133
|
+
...lineProps,
|
|
134
|
+
}}
|
|
114
135
|
/>
|
|
115
136
|
{/each}
|
|
116
137
|
</slot>
|
|
@@ -4,6 +4,7 @@ import Area from '../Area.svelte';
|
|
|
4
4
|
import Axis from '../Axis.svelte';
|
|
5
5
|
import Highlight from '../Highlight.svelte';
|
|
6
6
|
import Labels from '../Labels.svelte';
|
|
7
|
+
import Line from '../Line.svelte';
|
|
7
8
|
import Points from '../Points.svelte';
|
|
8
9
|
import { type Accessor } from '../../utils/common.js';
|
|
9
10
|
declare class __sveltets_Render<TData> {
|
|
@@ -193,7 +194,7 @@ declare class __sveltets_Render<TData> {
|
|
|
193
194
|
offset?: number | undefined;
|
|
194
195
|
format?: import("@layerstack/utils").FormatType | undefined;
|
|
195
196
|
};
|
|
196
|
-
axis?: boolean | {
|
|
197
|
+
axis?: boolean | "x" | "y" | {
|
|
197
198
|
placement: "top" | "bottom" | "left" | "right" | "angle" | "radius";
|
|
198
199
|
label?: string;
|
|
199
200
|
labelPlacement?: "start" | "middle" | "end";
|
|
@@ -234,6 +235,7 @@ declare class __sveltets_Render<TData> {
|
|
|
234
235
|
xAxis?: Partial<ComponentProps<Axis>>;
|
|
235
236
|
yAxis?: Partial<ComponentProps<Axis>>;
|
|
236
237
|
area?: Partial<ComponentProps<Area>>;
|
|
238
|
+
line?: Partial<ComponentProps<Line>>;
|
|
237
239
|
points?: Partial<ComponentProps<Points>>;
|
|
238
240
|
highlight?: Partial<ComponentProps<Highlight>>;
|
|
239
241
|
labels?: Partial<ComponentProps<Labels>>;
|
|
@@ -96,7 +96,12 @@ $: if (stackSeries) {
|
|
|
96
96
|
{y1Scale}
|
|
97
97
|
{y1Domain}
|
|
98
98
|
{y1Range}
|
|
99
|
-
padding={axis === false
|
|
99
|
+
padding={axis === false
|
|
100
|
+
? undefined
|
|
101
|
+
: {
|
|
102
|
+
left: axis === true || axis === 'y' ? 16 : 0,
|
|
103
|
+
bottom: axis === true || axis === 'x' ? 16 : 0,
|
|
104
|
+
}}
|
|
100
105
|
tooltip={{ mode: 'band' }}
|
|
101
106
|
{...$$restProps}
|
|
102
107
|
let:x
|
|
@@ -113,22 +118,27 @@ $: if (stackSeries) {
|
|
|
113
118
|
<Svg>
|
|
114
119
|
<slot name="axis" {...slotProps}>
|
|
115
120
|
{#if axis}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
121
|
+
{#if axis !== 'x'}
|
|
122
|
+
<Axis
|
|
123
|
+
placement="left"
|
|
124
|
+
grid={isVertical}
|
|
125
|
+
rule
|
|
126
|
+
format={(value) => format(value, undefined, { variant: 'short' })}
|
|
127
|
+
{...typeof axis === 'object' ? axis : null}
|
|
128
|
+
{...props.yAxis}
|
|
129
|
+
/>
|
|
130
|
+
{/if}
|
|
131
|
+
|
|
132
|
+
{#if axis !== 'y'}
|
|
133
|
+
<Axis
|
|
134
|
+
placement="bottom"
|
|
135
|
+
grid={!isVertical}
|
|
136
|
+
rule
|
|
137
|
+
format={(value) => format(value, undefined, { variant: 'short' })}
|
|
138
|
+
{...typeof axis === 'object' ? axis : null}
|
|
139
|
+
{...props.xAxis}
|
|
140
|
+
/>
|
|
141
|
+
{/if}
|
|
132
142
|
{/if}
|
|
133
143
|
</slot>
|
|
134
144
|
|
|
@@ -193,7 +193,7 @@ declare class __sveltets_Render<TData> {
|
|
|
193
193
|
offset?: number | undefined;
|
|
194
194
|
format?: import("@layerstack/utils").FormatType | undefined;
|
|
195
195
|
};
|
|
196
|
-
axis?: boolean | {
|
|
196
|
+
axis?: boolean | "x" | "y" | {
|
|
197
197
|
placement: "top" | "bottom" | "left" | "right" | "angle" | "radius";
|
|
198
198
|
label?: string;
|
|
199
199
|
labelPlacement?: "start" | "middle" | "end";
|
|
@@ -36,7 +36,12 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
|
|
|
36
36
|
yBaseline={0}
|
|
37
37
|
yNice
|
|
38
38
|
{radial}
|
|
39
|
-
padding={radial || axis === false
|
|
39
|
+
padding={radial || axis === false
|
|
40
|
+
? undefined
|
|
41
|
+
: {
|
|
42
|
+
left: axis === true || axis === 'y' ? 16 : 0,
|
|
43
|
+
bottom: axis === true || axis === 'x' ? 16 : 0,
|
|
44
|
+
}}
|
|
40
45
|
tooltip={{ mode: 'bisect-x' }}
|
|
41
46
|
{...$$restProps}
|
|
42
47
|
let:x
|
|
@@ -53,22 +58,27 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
|
|
|
53
58
|
<Svg center={radial}>
|
|
54
59
|
<slot name="axis" {...slotProps}>
|
|
55
60
|
{#if axis}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
61
|
+
{#if axis !== 'x'}
|
|
62
|
+
<Axis
|
|
63
|
+
placement={radial ? 'radius' : 'left'}
|
|
64
|
+
grid
|
|
65
|
+
rule
|
|
66
|
+
format={(value) => format(value, undefined, { variant: 'short' })}
|
|
67
|
+
{...typeof axis === 'object' ? axis : null}
|
|
68
|
+
{...props.yAxis}
|
|
69
|
+
/>
|
|
70
|
+
{/if}
|
|
71
|
+
|
|
72
|
+
{#if axis !== 'y'}
|
|
73
|
+
<Axis
|
|
74
|
+
placement={radial ? 'angle' : 'bottom'}
|
|
75
|
+
grid={radial}
|
|
76
|
+
rule
|
|
77
|
+
format={(value) => format(value, undefined, { variant: 'short' })}
|
|
78
|
+
{...typeof axis === 'object' ? axis : null}
|
|
79
|
+
{...props.xAxis}
|
|
80
|
+
/>
|
|
81
|
+
{/if}
|
|
72
82
|
{/if}
|
|
73
83
|
</slot>
|
|
74
84
|
|
|
@@ -193,7 +193,7 @@ declare class __sveltets_Render<TData> {
|
|
|
193
193
|
offset?: number | undefined;
|
|
194
194
|
format?: import("@layerstack/utils").FormatType | undefined;
|
|
195
195
|
};
|
|
196
|
-
axis?: boolean | {
|
|
196
|
+
axis?: boolean | "x" | "y" | {
|
|
197
197
|
placement: "top" | "bottom" | "left" | "right" | "angle" | "radius";
|
|
198
198
|
label?: string;
|
|
199
199
|
labelPlacement?: "start" | "middle" | "end";
|
|
@@ -29,7 +29,12 @@ let chartData = series
|
|
|
29
29
|
{xScale}
|
|
30
30
|
{y}
|
|
31
31
|
yNice
|
|
32
|
-
padding={axis === false
|
|
32
|
+
padding={axis === false
|
|
33
|
+
? undefined
|
|
34
|
+
: {
|
|
35
|
+
left: axis === true || axis === 'y' ? 16 : 0,
|
|
36
|
+
bottom: axis === true || axis === 'x' ? 16 : 0,
|
|
37
|
+
}}
|
|
33
38
|
tooltip={{ mode: 'voronoi' }}
|
|
34
39
|
{...$$restProps}
|
|
35
40
|
let:x
|
|
@@ -52,22 +57,27 @@ let chartData = series
|
|
|
52
57
|
<Svg>
|
|
53
58
|
<slot name="axis" {...slotProps}>
|
|
54
59
|
{#if axis}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
60
|
+
{#if axis !== 'x'}
|
|
61
|
+
<Axis
|
|
62
|
+
placement="left"
|
|
63
|
+
grid
|
|
64
|
+
rule
|
|
65
|
+
format={(value) => format(value, undefined, { variant: 'short' })}
|
|
66
|
+
{...typeof axis === 'object' ? axis : null}
|
|
67
|
+
{...props.yAxis}
|
|
68
|
+
/>
|
|
69
|
+
{/if}
|
|
70
|
+
|
|
71
|
+
{#if axis !== 'y'}
|
|
72
|
+
<Axis
|
|
73
|
+
placement="bottom"
|
|
74
|
+
grid
|
|
75
|
+
rule
|
|
76
|
+
format={(value) => format(value, undefined, { variant: 'short' })}
|
|
77
|
+
{...typeof axis === 'object' ? axis : null}
|
|
78
|
+
{...props.xAxis}
|
|
79
|
+
/>
|
|
80
|
+
{/if}
|
|
71
81
|
{/if}
|
|
72
82
|
</slot>
|
|
73
83
|
|
|
@@ -190,7 +190,7 @@ declare class __sveltets_Render<TData> {
|
|
|
190
190
|
offset?: number | undefined;
|
|
191
191
|
format?: import("@layerstack/utils").FormatType | undefined;
|
|
192
192
|
};
|
|
193
|
-
axis?: boolean | {
|
|
193
|
+
axis?: boolean | "x" | "y" | {
|
|
194
194
|
placement: "top" | "bottom" | "left" | "right" | "angle" | "radius";
|
|
195
195
|
label?: string;
|
|
196
196
|
labelPlacement?: "start" | "middle" | "end";
|