svelteplot 0.10.3-pr-483.3 → 0.10.3-pr-484.0

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.
Files changed (2) hide show
  1. package/dist/marks/Line.svelte +50 -44
  2. package/package.json +1 -1
package/dist/marks/Line.svelte CHANGED
@@ -49,10 +49,10 @@
49
49
  } from '../types/index.js';
50
50
  import Mark from '../Mark.svelte';
51
51
  import MarkerPath from './helpers/MarkerPath.svelte';
52
+ import type { MarkerShape } from './helpers/Marker.svelte';
52
53
  import { resolveProp, resolveStyles } from '../helpers/resolve.js';
53
54
  import { line, type CurveFactory, type Line as D3Line } from 'd3-shape';
54
55
  import { geoPath } from 'd3-geo';
55
- import callWithProps from '../helpers/callWithProps.js';
56
56
  import { maybeCurve } from '../helpers/curves.js';
57
57
  import { pick } from 'es-toolkit';
58
58
  import LineCanvas from './helpers/LineCanvas.svelte';
@@ -72,8 +72,8 @@
72
72
  tension: 0,
73
73
  canvas: false,
74
74
  markerScale: 1,
75
- class: null,
76
- lineClass: null,
75
+ class: undefined,
76
+ lineClass: undefined,
77
77
  ...getPlotDefaults().line
78
78
  };
79
79
 
@@ -98,8 +98,8 @@
98
98
  */
99
99
  function groupIndex(data: ScaledDataRecord[], groupByKey: ChannelAccessor<Datum> | null) {
100
100
  if (!groupByKey) return [data];
101
- let group = [];
102
- const groups = [group];
101
+ let group: ScaledDataRecord[] = [];
102
+ const groups: ScaledDataRecord[][] = [group];
103
103
  let lastGroupValue;
104
104
  for (const d of data) {
105
105
  const groupValue = resolveProp(groupByKey, d.datum);
@@ -121,33 +121,30 @@
121
121
 
122
122
  const linePath: D3Line<ScaledDataRecord> = $derived(
123
123
  plot.scales.projection && curve === 'auto'
124
- ? sphereLine(plot.scales.projection)
125
- : callWithProps(line, [], {
126
- curve: maybeCurve(curve === 'auto' ? 'linear' : curve, tension),
127
- x: (d) => d.x,
128
- y: (d) => d.y,
129
- defined: (d) => isValid(d.x) && isValid(d.y)
130
- })
124
+ ? (sphereLine(plot.scales.projection) as unknown as D3Line<ScaledDataRecord>)
125
+ : line<ScaledDataRecord>()
126
+ .curve(maybeCurve(curve === 'auto' ? 'linear' : curve, tension ?? 0))
127
+ .x((d) => d.x as number)
128
+ .y((d) => d.y as number)
129
+ .defined((d) => isValid(d.x) && isValid(d.y))
131
130
  );
132
131
 
133
- function sphereLine(projection) {
132
+ function sphereLine(projection: any) {
134
133
  const path = geoPath(projection);
135
- const fn = (lineData: ScaledDataRecord[]) => {
136
- let line = [];
137
- const lines = [line];
134
+ return (lineData: ScaledDataRecord[]) => {
135
+ let line: [number, number][] = [];
136
+ const lines: [number, number][][] = [line];
138
137
  for (const { x, y } of lineData) {
139
138
  // if x or y is undefined, start a new line segment
140
139
  if (!isValid(x) || !isValid(y)) {
141
140
  line = [];
142
141
  lines.push(line);
143
142
  } else {
144
- line.push([x, y]);
143
+ line.push([x as number, y as number]);
145
144
  }
146
145
  }
147
146
  return path({ type: 'MultiLineString', coordinates: lines });
148
147
  };
149
- fn.context = path.context;
150
- return fn;
151
148
  }
152
149
  </script>
153
150
 
@@ -166,7 +163,7 @@
166
163
  {#each groupedLineData as lineData, i (i)}
167
164
  {@const pathString = linePath(lineData)}
168
165
  {#if pathString}
169
- <GroupMultiple class={resolveProp(lineClass, lineData[0])}>
166
+ <GroupMultiple class={resolveProp(lineClass, lineData[0].datum)}>
170
167
  {#if options.outlineStroke}
171
168
  {@const [outlineStyle, outlineStyleClass] = resolveStyles(
172
169
  plot,
@@ -178,11 +175,11 @@
178
175
  strokeOpacity: options.outlineStrokeOpacity ?? 1,
179
176
  strokeWidth:
180
177
  options.outlineStrokeWidth ||
181
- resolveProp(
178
+ ((resolveProp(
182
179
  options.strokeWidth,
183
180
  lineData[0].datum,
184
181
  1.4
185
- ) + 2
182
+ ) as number) ?? 1.4) + 2
186
183
  },
187
184
  'stroke',
188
185
  usedScales
@@ -208,13 +205,8 @@
208
205
  plot,
209
206
  lineData[0],
210
207
  {
211
- textAnchor: 'middle',
212
- ...pick(args, [
213
- 'fontSize',
214
- 'fontWeight',
215
- 'fontStyle',
216
- 'textAnchor'
217
- ]),
208
+ textAnchor: args.textAnchor || 'middle',
209
+ ...pick(args, ['fontSize', 'fontWeight', 'fontStyle']),
218
210
  strokeWidth: args.textStrokeWidth
219
211
  ? args.textStrokeWidth
220
212
  : args.textStroke
@@ -229,26 +221,40 @@
229
221
  )}
230
222
  <MarkerPath
231
223
  {mark}
224
+ transform=""
232
225
  scales={plot.scales}
233
- markerStart={args.markerStart}
234
- markerMid={args.markerMid}
235
- markerEnd={args.markerEnd}
236
- marker={args.marker}
237
- markerScale={args.markerScale}
238
- strokeWidth={args.strokeWidth}
239
- datum={lineData[0].datum}
226
+ markerStart={options.markerStart as
227
+ | boolean
228
+ | MarkerShape
229
+ | undefined}
230
+ markerMid={options.markerMid as
231
+ | boolean
232
+ | MarkerShape
233
+ | undefined}
234
+ markerEnd={options.markerEnd as
235
+ | boolean
236
+ | MarkerShape
237
+ | undefined}
238
+ marker={options.marker as boolean | MarkerShape | undefined}
239
+ markerScale={options.markerScale}
240
+ strokeWidth={options.strokeWidth}
241
+ datum={lineData[0].datum as Datum}
240
242
  d={pathString}
241
- dInv={text ? linePath(lineData.toReversed()) : null}
243
+ dInv={text
244
+ ? (linePath(lineData.toReversed()) ?? undefined)
245
+ : undefined}
242
246
  color={lineData[0].stroke || 'currentColor'}
243
- {style}
244
- class={styleClass}
245
- text={text ? resolveProp(text, lineData[0].datum) : null}
246
- startOffset={resolveProp(
247
- args.textStartOffset,
247
+ style={style ?? ''}
248
+ class={styleClass ?? undefined}
249
+ text={text
250
+ ? ((resolveProp(text, lineData[0].datum) as string) ?? '')
251
+ : ''}
252
+ startOffset={(resolveProp(
253
+ options.textStartOffset,
248
254
  lineData[0].datum,
249
255
  '50%'
250
- )}
251
- {textStyle}
256
+ ) as string) ?? '50%'}
257
+ textStyle={textStyle ?? ''}
252
258
  {textStyleClass} />
253
259
  </GroupMultiple>
254
260
  {/if}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "svelteplot",
3
- "version": "0.10.3-pr-483.3",
3
+ "version": "0.10.3-pr-484.0",
4
4
  "description": "A Svelte-native data visualization framework based on the layered grammar of graphics principles.",
5
5
  "keywords": [
6
6
  "svelte",