svelteplot 0.3.7 → 0.3.8

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 (9) hide show
  1. package/dist/Mark.svelte +1 -1
  2. package/dist/Mark.svelte.d.ts +1 -1
  3. package/dist/marks/Area.svelte +6 -0
  4. package/dist/marks/CustomMark.svelte +46 -27
  5. package/dist/marks/CustomMark.svelte.d.ts +16 -7
  6. package/dist/types/channel.d.ts +1 -0
  7. package/dist/types/data.d.ts +4 -2
  8. package/dist/types/mark.d.ts +1 -1
  9. package/package.json +126 -125
package/dist/Mark.svelte CHANGED
@@ -11,7 +11,7 @@
11
11
  {
12
12
  mark: Mark<GenericMarkOptions>;
13
13
  usedScales: ReturnType<typeof getUsedScales>;
14
- scaledData: ScaledDataRecord[];
14
+ scaledData: ScaledDataRecord<Datum>[];
15
15
  }
16
16
  ]
17
17
  >;
package/dist/Mark.svelte.d.ts CHANGED
@@ -71,7 +71,7 @@ declare class __sveltets_Render<Datum extends DataRecord> {
71
71
  children?: Snippet<[{
72
72
  mark: any;
73
73
  usedScales: ReturnType<typeof getUsedScales>;
74
- scaledData: ScaledDataRecord[];
74
+ scaledData: ScaledDataRecord<Datum>[];
75
75
  }]> | undefined;
76
76
  defaults?: Partial<Record<ScaledChannelName, RawValue>>;
77
77
  };
package/dist/marks/Area.svelte CHANGED
@@ -41,6 +41,7 @@
41
41
  RawValue
42
42
  } from '../types/index.js';
43
43
  import type { StackOptions } from '../transforms/stack.js';
44
+ import { addEventHandlers } from './helpers/events';
44
45
 
45
46
  let markProps: AreaMarkProps = $props();
46
47
 
@@ -135,6 +136,11 @@
135
136
  class={['svelteplot-area', className, styleClass]}
136
137
  clip-path={options.clipPath}
137
138
  d={areaPath(areaData)}
139
+ use:addEventHandlers={{
140
+ getPlotState,
141
+ options,
142
+ datum: datum.datum
143
+ }}
138
144
  {style}
139
145
  >{#if title}<title>{title}</title>{/if}</path>
140
146
  </Anchor>
package/dist/marks/CustomMark.svelte CHANGED
@@ -4,10 +4,18 @@
4
4
  -->
5
5
  <script lang="ts" generics="Datum extends DataRecord">
6
6
  interface CustomMarkProps extends BaseMarkProps<Datum> {
7
- data: Datum[];
7
+ data?: Datum[];
8
8
  x?: ChannelAccessor<Datum>;
9
+ x1?: ChannelAccessor<Datum>;
10
+ x2?: ChannelAccessor<Datum>;
9
11
  y?: ChannelAccessor<Datum>;
10
- children: Snippet<[{ datum: Datum; x: number; y: number }]>;
12
+ y1?: ChannelAccessor<Datum>;
13
+ y2?: ChannelAccessor<Datum>;
14
+ r?: ChannelAccessor<Datum>;
15
+ mark?: Snippet<
16
+ [{ record: ScaledDataRecord<Datum>; index: number; usedScales: UsedScales }]
17
+ >;
18
+ marks?: Snippet<[{ records: ScaledDataRecord<Datum>[]; usedScales: UsedScales }]>;
11
19
  }
12
20
 
13
21
  import { getContext } from 'svelte';
@@ -15,36 +23,47 @@
15
23
  PlotContext,
16
24
  DataRecord,
17
25
  ChannelAccessor,
18
- BaseMarkProps
26
+ BaseMarkProps,
27
+ ScaledDataRecord,
28
+ UsedScales,
29
+ ScaledChannelName
19
30
  } from '../types/index.js';
20
31
  import type { Snippet } from 'svelte';
32
+ import { sort } from '../index.js';
21
33
 
22
- const { getPlotState } = getContext<PlotContext>('svelteplot');
23
- let plot = $derived(getPlotState());
34
+ import Mark from '../Mark.svelte';
24
35
 
25
- import { resolveChannel } from '../helpers/resolve.js';
26
- import { projectXY } from '../helpers/scales.js';
27
- import { isValid } from '../helpers/index.js';
28
- import GroupMultiple from './helpers/GroupMultiple.svelte';
36
+ let { data = [{} as Datum], mark, marks, ...options }: CustomMarkProps = $props();
29
37
 
30
- let {
31
- data = [{} as Datum],
32
- x,
33
- y,
34
- children,
35
- class: className = null
36
- }: CustomMarkProps = $props();
38
+ const args = $derived(sort({ data, ...options })) as CustomMarkProps;
39
+
40
+ const channels: ScaledChannelName[] = [
41
+ 'x',
42
+ 'x1',
43
+ 'x2',
44
+ 'y',
45
+ 'y1',
46
+ 'y2',
47
+ 'r',
48
+ 'fill',
49
+ 'stroke',
50
+ 'opacity',
51
+ 'fillOpacity',
52
+ 'strokeOpacity'
53
+ ];
37
54
  </script>
38
55
 
39
- <GroupMultiple class="g-custom-mark {className || ''}" length={className ? 2 : data.length}>
40
- {#each data as datum, i (i)}
41
- {@const x_ = resolveChannel<Datum>('x', datum, { x, y })}
42
- {@const y_ = resolveChannel<Datum>('y', datum, { x, y })}
43
- {#if isValid(x_) && isValid(y_)}
44
- {@const [px, py] = projectXY(plot.scales, x_, y_)}
45
- <g transform="translate({px}, {py})">
46
- {@render children({ datum, x: px, y: py })}
47
- </g>
56
+ <Mark type="custom" required={[]} channels={channels.filter((d) => !!options[d])} {...args}>
57
+ {#snippet children({ scaledData, usedScales })}
58
+ {#if marks}
59
+ {@render marks({ records: scaledData.filter((d) => d.valid), usedScales })}
60
+ {/if}
61
+ {#if mark}
62
+ {#each scaledData as datum, i (i)}
63
+ {#if datum.valid}
64
+ {@render mark({ record: datum, index: i, usedScales })}
65
+ {/if}
66
+ {/each}
48
67
  {/if}
49
- {/each}
50
- </GroupMultiple>
68
+ {/snippet}
69
+ </Mark>
package/dist/marks/CustomMark.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { DataRecord, ChannelAccessor } from '../types/index.js';
1
+ import type { DataRecord, ChannelAccessor, ScaledDataRecord, UsedScales } from '../types/index.js';
2
2
  import type { Snippet } from 'svelte';
3
3
  declare class __sveltets_Render<Datum extends DataRecord> {
4
4
  props(): Partial<{
@@ -61,14 +61,23 @@ declare class __sveltets_Render<Datum extends DataRecord> {
61
61
  class: string | null;
62
62
  cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
63
63
  }> & {
64
- data: Datum[];
64
+ data?: Datum[] | undefined;
65
65
  x?: ChannelAccessor<Datum>;
66
+ x1?: ChannelAccessor<Datum>;
67
+ x2?: ChannelAccessor<Datum>;
66
68
  y?: ChannelAccessor<Datum>;
67
- children: Snippet<[{
68
- datum: Datum;
69
- x: number;
70
- y: number;
71
- }]>;
69
+ y1?: ChannelAccessor<Datum>;
70
+ y2?: ChannelAccessor<Datum>;
71
+ r?: ChannelAccessor<Datum>;
72
+ mark?: Snippet<[{
73
+ record: ScaledDataRecord<Datum>;
74
+ index: number;
75
+ usedScales: UsedScales;
76
+ }]> | undefined;
77
+ marks?: Snippet<[{
78
+ records: ScaledDataRecord<Datum>[];
79
+ usedScales: UsedScales;
80
+ }]> | undefined;
72
81
  };
73
82
  events(): {};
74
83
  slots(): {};
package/dist/types/channel.d.ts CHANGED
@@ -8,4 +8,5 @@ export type ChannelAccessor<T = Record<string | symbol, RawValue>> = ChannelValu
8
8
  };
9
9
  export type ChannelValue<T = Record<string | symbol, RawValue>> = RawValue | keyof T | ((d: T) => RawValue) | null | undefined;
10
10
  export type ScaledChannelName = 'fill' | 'fillOpacity' | 'opacity' | 'r' | 'length' | 'stroke' | 'strokeOpacity' | 'symbol' | 'fx' | 'fy' | 'x' | 'x1' | 'x2' | 'y' | 'y1' | 'y2';
11
+ export type ScaledChannelType<T extends ScaledChannelName> = T extends 'fill' | 'stroke' | 'symbol' ? string : number;
11
12
  export type ChannelName = ScaledChannelName | 'z' | 'sort' | 'filter' | 'interval';
package/dist/types/data.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { ScaledChannelName } from './channel.js';
1
+ import type { ScaledChannelName, ScaledChannelType } from './channel.js';
2
2
  export type RawValue = number | Date | boolean | string | symbol;
3
3
  export type DataRecord<T = Record<string | symbol, RawValue>> = T & {
4
4
  ___orig___?: RawValue | [RawValue, RawValue];
@@ -6,7 +6,9 @@ export type DataRecord<T = Record<string | symbol, RawValue>> = T & {
6
6
  export type ResolvedDataRecord<T = Record<string | symbol, RawValue>> = Partial<Record<ScaledChannelName, any>> & {
7
7
  datum: DataRecord<T>;
8
8
  };
9
- export type ScaledDataRecord<T = Record<string | symbol, RawValue>> = Partial<Record<ScaledChannelName, number | string | boolean | undefined>> & {
9
+ export type ScaledDataRecord<T = Record<string | symbol, RawValue>> = Partial<{
10
+ [K in ScaledChannelName]?: ScaledChannelType<K>;
11
+ }> & {
10
12
  datum: DataRecord<T>;
11
13
  valid: Boolean;
12
14
  };
package/dist/types/mark.d.ts CHANGED
@@ -6,7 +6,7 @@ export type Mark<T> = {
6
6
  data: DataRecord<T>[];
7
7
  options: T;
8
8
  };
9
- export type MarkType = 'area' | 'arrow' | 'barX' | 'barY' | 'cell' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'line' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY';
9
+ export type MarkType = 'area' | 'arrow' | 'barX' | 'barY' | 'cell' | 'custom' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'line' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY';
10
10
  export type MarkStyleProps = 'strokeDasharray' | 'strokeLinejoin' | 'strokeLinecap' | 'opacity' | 'cursor' | 'pointerEvents' | 'blend' | 'fill' | 'fillOpacity' | 'fontWeight' | 'fontVariant' | 'fontSize' | 'fontStyle' | 'stroke' | 'strokeWidth' | 'strokeOpacity' | 'x' | 'y' | 'clipPath' | 'mask' | 'filter' | 'angle' | 'radius' | 'symbol' | 'textAnchor' | 'width';
11
11
  import type { MouseEventHandler } from 'svelte/elements';
12
12
  import type { ChannelAccessor, ConstantAccessor, DataRecord, RawValue } from './index.js';
package/package.json CHANGED
@@ -1,131 +1,132 @@
1
1
  {
2
- "name": "svelteplot",
3
- "version": "0.3.7",
4
- "license": "ISC",
5
- "author": {
6
- "name": "Gregor Aisch",
7
- "email": "gka@users.noreply.github.com"
8
- },
9
- "exports": {
10
- ".": {
11
- "types": "./dist/index.d.ts",
12
- "svelte": "./dist/index.js"
2
+ "name": "svelteplot",
3
+ "version": "0.3.8",
4
+ "license": "ISC",
5
+ "author": {
6
+ "name": "Gregor Aisch",
7
+ "email": "gka@users.noreply.github.com"
13
8
  },
14
- "./*.js": {
15
- "import": "./dist/*.js"
9
+ "scripts": {
10
+ "dev": "vite dev",
11
+ "build": "vite build",
12
+ "preview": "vite preview",
13
+ "test": "npm run test:unit",
14
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
15
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
16
+ "lint": "prettier --check src && eslint src",
17
+ "format": "prettier --write .",
18
+ "test:unit": "vitest",
19
+ "prepack": "npx svelte-package",
20
+ "release-next": "npm version prerelease --preid next && npm publish && git push && git push --tags && sleep 1 && npm dist-tag add svelteplot@$(npm view . version) next",
21
+ "docs": "npm run build && cd build && rsync --recursive . vis4.net:svelteplot/alpha0/",
22
+ "screenshots": "node screenshot-examples.js",
23
+ "check-js-extensions": "node scripts/check-js-extensions.js src"
16
24
  },
17
- "./*.svelte": {
18
- "import": "./dist/*.svelte"
25
+ "exports": {
26
+ ".": {
27
+ "types": "./dist/index.d.ts",
28
+ "svelte": "./dist/index.js"
29
+ },
30
+ "./*.js": {
31
+ "import": "./dist/*.js"
32
+ },
33
+ "./*.svelte": {
34
+ "import": "./dist/*.svelte"
35
+ },
36
+ "./core/*.svelte": {
37
+ "import": "./dist/core/*.svelte"
38
+ },
39
+ "./marks/*.svelte": {
40
+ "import": "./dist/marks/*.svelte"
41
+ },
42
+ "./transforms": {
43
+ "import": "./dist/transforms/index.js"
44
+ }
19
45
  },
20
- "./core/*.svelte": {
21
- "import": "./dist/core/*.svelte"
46
+ "main": "./dist/index.js",
47
+ "files": [
48
+ "dist",
49
+ "!dist/**/*.test.*",
50
+ "!dist/**/*.spec.*"
51
+ ],
52
+ "devDependencies": {
53
+ "@aitodotai/json-stringify-pretty-compact": "^1.3.0",
54
+ "@emotion/css": "^11.13.5",
55
+ "@sveltejs/adapter-auto": "^6.0.1",
56
+ "@sveltejs/adapter-static": "^3.0.8",
57
+ "@sveltejs/eslint-config": "^8.3.4",
58
+ "@sveltejs/kit": "^2.27.1",
59
+ "@sveltejs/package": "^2.4.0",
60
+ "@sveltejs/vite-plugin-svelte": "5.1.1",
61
+ "@sveltepress/theme-default": "^6.0.4",
62
+ "@sveltepress/twoslash": "^1.2.2",
63
+ "@sveltepress/vite": "^1.2.2",
64
+ "@testing-library/svelte": "^5.2.8",
65
+ "@testing-library/user-event": "^14.6.1",
66
+ "@types/d3-array": "^3.2.1",
67
+ "@types/d3-color": "^3.1.3",
68
+ "@types/d3-dsv": "^3.0.7",
69
+ "@types/d3-geo": "^3.1.0",
70
+ "@types/d3-interpolate": "^3.0.4",
71
+ "@types/d3-path": "^3.1.1",
72
+ "@types/d3-quadtree": "^3.0.6",
73
+ "@types/d3-random": "^3.0.3",
74
+ "@types/d3-scale": "^4.0.9",
75
+ "@types/d3-scale-chromatic": "^3.1.0",
76
+ "@types/d3-shape": "^3.1.7",
77
+ "@types/geojson": "^7946.0.16",
78
+ "@types/topojson": "^3.2.6",
79
+ "@types/topojson-client": "^3.1.5",
80
+ "@typescript-eslint/eslint-plugin": "^8.39.0",
81
+ "@typescript-eslint/parser": "^8.39.0",
82
+ "csstype": "^3.1.3",
83
+ "d3-dsv": "^3.0.1",
84
+ "d3-fetch": "^3.0.1",
85
+ "d3-force": "^3.0.0",
86
+ "eslint": "^9.32.0",
87
+ "eslint-config-prettier": "^10.1.8",
88
+ "eslint-plugin-svelte": "3.11.0",
89
+ "jsdom": "^26.1.0",
90
+ "prettier": "^3.6.2",
91
+ "prettier-plugin-svelte": "^3.4.0",
92
+ "puppeteer": "^24.15.0",
93
+ "remark-code-extra": "^1.0.1",
94
+ "remark-code-frontmatter": "^1.0.0",
95
+ "resize-observer-polyfill": "^1.5.1",
96
+ "sass": "^1.90.0",
97
+ "svelte-check": "^4.3.1",
98
+ "svelte-eslint-parser": "1.3.1",
99
+ "svelte-highlight": "^7.8.3",
100
+ "svg-path-parser": "^1.1.0",
101
+ "topojson-client": "^3.1.0",
102
+ "ts-essentials": "^10.1.1",
103
+ "tslib": "^2.8.1",
104
+ "typedoc": "^0.28.9",
105
+ "typedoc-plugin-markdown": "^4.8.0",
106
+ "typescript": "^5.9.2",
107
+ "vite": "^6.3.5",
108
+ "vitest": "^3.2.4",
109
+ "vitest-matchmedia-mock": "^2.0.3"
22
110
  },
23
- "./marks/*.svelte": {
24
- "import": "./dist/marks/*.svelte"
25
- },
26
- "./transforms": {
27
- "import": "./dist/transforms/index.js"
111
+ "types": "./dist/index.d.ts",
112
+ "type": "module",
113
+ "dependencies": {
114
+ "d3-array": "^3.2.4",
115
+ "d3-color": "^3.1.0",
116
+ "d3-format": "^3.1.0",
117
+ "d3-geo": "^3.1.1",
118
+ "d3-interpolate": "^3.0.1",
119
+ "d3-path": "^3.1.0",
120
+ "d3-quadtree": "^3.0.1",
121
+ "d3-random": "^3.0.1",
122
+ "d3-regression": "^1.3.10",
123
+ "d3-scale": "^4.0.2",
124
+ "d3-scale-chromatic": "^3.1.0",
125
+ "d3-shape": "^3.2.0",
126
+ "d3-time": "^3.1.0",
127
+ "es-toolkit": "^1.39.8",
128
+ "fast-equals": "^5.2.2",
129
+ "merge-deep": "^3.0.3",
130
+ "svelte": "5.37.3"
28
131
  }
29
- },
30
- "main": "./dist/index.js",
31
- "files": [
32
- "dist",
33
- "!dist/**/*.test.*",
34
- "!dist/**/*.spec.*"
35
- ],
36
- "devDependencies": {
37
- "@aitodotai/json-stringify-pretty-compact": "^1.3.0",
38
- "@emotion/css": "^11.13.5",
39
- "@sveltejs/adapter-auto": "^6.0.1",
40
- "@sveltejs/adapter-static": "^3.0.8",
41
- "@sveltejs/eslint-config": "^8.2.0",
42
- "@sveltejs/kit": "^2.22.0",
43
- "@sveltejs/package": "^2.3.11",
44
- "@sveltejs/vite-plugin-svelte": "5.1.0",
45
- "@sveltepress/theme-default": "^6.0.4",
46
- "@sveltepress/twoslash": "^1.2.2",
47
- "@sveltepress/vite": "^1.2.2",
48
- "@testing-library/svelte": "^5.2.8",
49
- "@testing-library/user-event": "^14.6.1",
50
- "@types/d3-array": "^3.2.1",
51
- "@types/d3-color": "^3.1.3",
52
- "@types/d3-dsv": "^3.0.7",
53
- "@types/d3-geo": "^3.1.0",
54
- "@types/d3-interpolate": "^3.0.4",
55
- "@types/d3-path": "^3.1.1",
56
- "@types/d3-quadtree": "^3.0.6",
57
- "@types/d3-random": "^3.0.3",
58
- "@types/d3-scale": "^4.0.9",
59
- "@types/d3-scale-chromatic": "^3.1.0",
60
- "@types/d3-shape": "^3.1.7",
61
- "@types/geojson": "^7946.0.16",
62
- "@types/topojson": "^3.2.6",
63
- "@types/topojson-client": "^3.1.5",
64
- "@typescript-eslint/eslint-plugin": "^8.34.1",
65
- "@typescript-eslint/parser": "^8.34.1",
66
- "csstype": "^3.1.3",
67
- "d3-dsv": "^3.0.1",
68
- "d3-fetch": "^3.0.1",
69
- "d3-force": "^3.0.0",
70
- "eslint": "^9.29.0",
71
- "eslint-config-prettier": "^10.1.5",
72
- "eslint-plugin-svelte": "3.9.3",
73
- "jsdom": "^26.1.0",
74
- "prettier": "^3.6.0",
75
- "prettier-plugin-svelte": "^3.4.0",
76
- "puppeteer": "^24.10.2",
77
- "remark-code-extra": "^1.0.1",
78
- "remark-code-frontmatter": "^1.0.0",
79
- "resize-observer-polyfill": "^1.5.1",
80
- "sass": "^1.89.2",
81
- "svelte-check": "^4.2.2",
82
- "svelte-eslint-parser": "1.2.0",
83
- "svelte-highlight": "^7.8.3",
84
- "svg-path-parser": "^1.1.0",
85
- "topojson-client": "^3.1.0",
86
- "ts-essentials": "^10.1.1",
87
- "tslib": "^2.8.1",
88
- "typedoc": "^0.28.5",
89
- "typedoc-plugin-markdown": "^4.7.0",
90
- "typescript": "^5.8.3",
91
- "vite": "^6.3.5",
92
- "vitest": "^3.2.4",
93
- "vitest-matchmedia-mock": "^2.0.3"
94
- },
95
- "types": "./dist/index.d.ts",
96
- "type": "module",
97
- "dependencies": {
98
- "d3-array": "^3.2.4",
99
- "d3-color": "^3.1.0",
100
- "d3-format": "^3.1.0",
101
- "d3-geo": "^3.1.1",
102
- "d3-interpolate": "^3.0.1",
103
- "d3-path": "^3.1.0",
104
- "d3-quadtree": "^3.0.1",
105
- "d3-random": "^3.0.1",
106
- "d3-regression": "^1.3.10",
107
- "d3-scale": "^4.0.2",
108
- "d3-scale-chromatic": "^3.1.0",
109
- "d3-shape": "^3.2.0",
110
- "d3-time": "^3.1.0",
111
- "es-toolkit": "^1.39.4",
112
- "fast-equals": "^5.2.2",
113
- "merge-deep": "^3.0.3",
114
- "svelte": "5.34.7"
115
- },
116
- "scripts": {
117
- "dev": "vite dev",
118
- "build": "vite build",
119
- "preview": "vite preview",
120
- "test": "npm run test:unit",
121
- "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
122
- "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
123
- "lint": "prettier --check src && eslint src",
124
- "format": "prettier --write .",
125
- "test:unit": "vitest",
126
- "release-next": "npm version prerelease --preid next && npm publish && git push && git push --tags && sleep 1 && npm dist-tag add svelteplot@$(npm view . version) next",
127
- "docs": "npm run build && cd build && rsync --recursive . vis4.net:svelteplot/alpha0/",
128
- "screenshots": "node screenshot-examples.js",
129
- "check-js-extensions": "node scripts/check-js-extensions.js src"
130
- }
131
- }
132
+ }