svelteplot 0.8.0 → 0.8.1
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/helpers/wordwrap.d.ts +6 -5
- package/dist/helpers/wordwrap.js +7 -6
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/marks/helpers/BaseAxisX.svelte +6 -7
- package/package.json +146 -145
|
@@ -5,10 +5,11 @@
|
|
|
5
5
|
* - Uses a rough character width table to approximate line widths.
|
|
6
6
|
* - Wraps once the maximum visual width is exceeded, but only after a minimum.
|
|
7
7
|
*/
|
|
8
|
-
export default function wordwrap(line: string,
|
|
9
|
-
maxCharactersPerLine?: number;
|
|
10
|
-
maxLineWidth?: number;
|
|
11
|
-
}, { minCharactersPerLine, minLineWidth }: {
|
|
8
|
+
export default function wordwrap(line: string, options?: {
|
|
12
9
|
minCharactersPerLine?: number;
|
|
13
10
|
minLineWidth?: number;
|
|
14
|
-
|
|
11
|
+
maxCharactersPerLine?: number;
|
|
12
|
+
maxLineWidth?: number;
|
|
13
|
+
fontSize?: number;
|
|
14
|
+
monospace?: boolean;
|
|
15
|
+
}): string[];
|
package/dist/helpers/wordwrap.js
CHANGED
|
@@ -67,7 +67,8 @@ const CHAR_W = {
|
|
|
67
67
|
* - Uses a rough character width table to approximate line widths.
|
|
68
68
|
* - Wraps once the maximum visual width is exceeded, but only after a minimum.
|
|
69
69
|
*/
|
|
70
|
-
export default function wordwrap(line,
|
|
70
|
+
export default function wordwrap(line, options = {}) {
|
|
71
|
+
let { minCharactersPerLine, minLineWidth, maxCharactersPerLine, maxLineWidth, fontSize, monospace } = { fontSize: 12, maxCharactersPerLine: 10, ...options };
|
|
71
72
|
// Tokenized words (with hyphen-splitting applied) including trailing spaces/hyphens.
|
|
72
73
|
const tokens = [];
|
|
73
74
|
// First split by spaces, then further split by hyphens so we can
|
|
@@ -86,20 +87,20 @@ export default function wordwrap(line, { maxCharactersPerLine, maxLineWidth }, {
|
|
|
86
87
|
tokens.push(word + trailingWhitespace);
|
|
87
88
|
}
|
|
88
89
|
});
|
|
89
|
-
const maxChars = maxCharactersPerLine || 40;
|
|
90
90
|
if (!maxLineWidth) {
|
|
91
91
|
// Fallback for max characters per line if not provided / falsy.
|
|
92
92
|
// Convert character counts into approximate visual widths.
|
|
93
|
-
maxLineWidth =
|
|
93
|
+
maxLineWidth = maxCharactersPerLine * CHAR_W.a;
|
|
94
94
|
}
|
|
95
95
|
if (!minLineWidth) {
|
|
96
96
|
// Estimate a good minimum line length:
|
|
97
97
|
// - start from either a provided value or
|
|
98
|
-
// - clamp a scaled median word length between 3 and half of
|
|
98
|
+
// - clamp a scaled median word length between 3 and half of maxCharactersPerLine.
|
|
99
99
|
const sortedWordLengths = tokens.map((t) => t.length).sort((a, b) => a - b);
|
|
100
100
|
const medianIndex = Math.round(tokens.length / 2);
|
|
101
|
-
const medianWordLength = sortedWordLengths[medianIndex] ??
|
|
102
|
-
const minChars = minCharactersPerLine ||
|
|
101
|
+
const medianWordLength = sortedWordLengths[medianIndex] ?? maxCharactersPerLine;
|
|
102
|
+
const minChars = minCharactersPerLine ||
|
|
103
|
+
Math.max(3, Math.min(maxCharactersPerLine * 0.5, 0.75 * medianWordLength));
|
|
103
104
|
minLineWidth = minChars * CHAR_W.a;
|
|
104
105
|
}
|
|
105
106
|
const lines = [];
|
package/dist/index.d.ts
CHANGED
|
@@ -3,4 +3,5 @@ export { default as PlotCore } from './core/Plot.svelte';
|
|
|
3
3
|
export * from './marks/index.js';
|
|
4
4
|
export * from './transforms/index.js';
|
|
5
5
|
export { formatMonth } from './helpers/formats.js';
|
|
6
|
+
export { default as wordwrap } from './helpers/wordwrap.js';
|
|
6
7
|
export * from './hooks/plotDefaults.js';
|
package/dist/index.js
CHANGED
|
@@ -69,13 +69,12 @@
|
|
|
69
69
|
return Array.isArray(tick)
|
|
70
70
|
? tick
|
|
71
71
|
: typeof tick === 'string' && isBandScale && options.wordwrap !== false
|
|
72
|
-
? wordwrap(
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
)
|
|
72
|
+
? wordwrap(tick, {
|
|
73
|
+
maxLineWidth: bandWidth * 0.9,
|
|
74
|
+
minCharactersPerLine: 4,
|
|
75
|
+
fontSize: +resolveProp(tickFontSize, {}, 11),
|
|
76
|
+
monospace: false
|
|
77
|
+
})
|
|
79
78
|
: [tick];
|
|
80
79
|
}
|
|
81
80
|
|
package/package.json
CHANGED
|
@@ -1,151 +1,152 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
},
|
|
9
|
-
"exports": {
|
|
10
|
-
".": {
|
|
11
|
-
"types": "./dist/index.d.ts",
|
|
12
|
-
"svelte": "./dist/index.js"
|
|
2
|
+
"name": "svelteplot",
|
|
3
|
+
"version": "0.8.1",
|
|
4
|
+
"license": "ISC",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "Gregor Aisch",
|
|
7
|
+
"email": "gka@users.noreply.github.com"
|
|
13
8
|
},
|
|
14
|
-
"
|
|
15
|
-
|
|
9
|
+
"scripts": {
|
|
10
|
+
"dev": "vite dev",
|
|
11
|
+
"build": "vite build",
|
|
12
|
+
"preview": "vite preview",
|
|
13
|
+
"test": "npm run test:unit",
|
|
14
|
+
"test:visual": "node scripts/visual-regression.js",
|
|
15
|
+
"vr:report": "node scripts/vr-report.js",
|
|
16
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
17
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
18
|
+
"lint": "prettier --check src && eslint src",
|
|
19
|
+
"format": "prettier --write .",
|
|
20
|
+
"test:unit": "vitest",
|
|
21
|
+
"prepack": "npx svelte-package",
|
|
22
|
+
"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",
|
|
23
|
+
"docs": "npm run build && cd build && rsync --recursive . vis4.net:svelteplot/alpha0/",
|
|
24
|
+
"screenshots": "node screenshot-examples.js",
|
|
25
|
+
"check-js-extensions": "node scripts/check-js-extensions.js src"
|
|
16
26
|
},
|
|
17
|
-
"
|
|
18
|
-
|
|
27
|
+
"exports": {
|
|
28
|
+
".": {
|
|
29
|
+
"types": "./dist/index.d.ts",
|
|
30
|
+
"svelte": "./dist/index.js"
|
|
31
|
+
},
|
|
32
|
+
"./*.js": {
|
|
33
|
+
"import": "./dist/*.js"
|
|
34
|
+
},
|
|
35
|
+
"./*.svelte": {
|
|
36
|
+
"import": "./dist/*.svelte"
|
|
37
|
+
},
|
|
38
|
+
"./core/*.svelte": {
|
|
39
|
+
"import": "./dist/core/*.svelte"
|
|
40
|
+
},
|
|
41
|
+
"./marks/*.svelte": {
|
|
42
|
+
"import": "./dist/marks/*.svelte"
|
|
43
|
+
},
|
|
44
|
+
"./transforms": {
|
|
45
|
+
"import": "./dist/transforms/index.js"
|
|
46
|
+
}
|
|
19
47
|
},
|
|
20
|
-
"
|
|
21
|
-
|
|
48
|
+
"main": "./dist/index.js",
|
|
49
|
+
"files": [
|
|
50
|
+
"dist",
|
|
51
|
+
"!dist/**/*.test.*",
|
|
52
|
+
"!dist/**/*.spec.*"
|
|
53
|
+
],
|
|
54
|
+
"devDependencies": {
|
|
55
|
+
"@aitodotai/json-stringify-pretty-compact": "^1.3.0",
|
|
56
|
+
"@emotion/css": "^11.13.5",
|
|
57
|
+
"@shikijs/twoslash": "^3.18.0",
|
|
58
|
+
"@sveltejs/adapter-auto": "^7.0.0",
|
|
59
|
+
"@sveltejs/adapter-static": "^3.0.10",
|
|
60
|
+
"@sveltejs/enhanced-img": "^0.9.2",
|
|
61
|
+
"@sveltejs/eslint-config": "^8.3.4",
|
|
62
|
+
"@sveltejs/kit": "^2.49.1",
|
|
63
|
+
"@sveltejs/package": "^2.5.7",
|
|
64
|
+
"@sveltejs/vite-plugin-svelte": "6.2.1",
|
|
65
|
+
"@sveltepress/twoslash": "^1.3.2",
|
|
66
|
+
"@sveltepress/vite": "^1.3.2",
|
|
67
|
+
"@testing-library/svelte": "^5.2.9",
|
|
68
|
+
"@testing-library/user-event": "^14.6.1",
|
|
69
|
+
"@types/d3-array": "^3.2.2",
|
|
70
|
+
"@types/d3-color": "^3.1.3",
|
|
71
|
+
"@types/d3-dsv": "^3.0.7",
|
|
72
|
+
"@types/d3-geo": "^3.1.0",
|
|
73
|
+
"@types/d3-interpolate": "^3.0.4",
|
|
74
|
+
"@types/d3-path": "^3.1.1",
|
|
75
|
+
"@types/d3-quadtree": "^3.0.6",
|
|
76
|
+
"@types/d3-random": "^3.0.3",
|
|
77
|
+
"@types/d3-scale": "^4.0.9",
|
|
78
|
+
"@types/d3-scale-chromatic": "^3.1.0",
|
|
79
|
+
"@types/d3-shape": "^3.1.7",
|
|
80
|
+
"@types/geojson": "^7946.0.16",
|
|
81
|
+
"@types/topojson": "^3.2.6",
|
|
82
|
+
"@types/topojson-client": "^3.1.5",
|
|
83
|
+
"@typescript-eslint/eslint-plugin": "^8.48.1",
|
|
84
|
+
"@typescript-eslint/parser": "^8.48.1",
|
|
85
|
+
"@unocss/extractor-svelte": "^66.5.10",
|
|
86
|
+
"@vite-pwa/sveltekit": "^1.1.0",
|
|
87
|
+
"csstype": "^3.2.3",
|
|
88
|
+
"d3-dsv": "^3.0.1",
|
|
89
|
+
"d3-fetch": "^3.0.1",
|
|
90
|
+
"d3-force": "^3.0.0",
|
|
91
|
+
"eslint": "^9.39.1",
|
|
92
|
+
"eslint-config-prettier": "^10.1.8",
|
|
93
|
+
"eslint-plugin-regexp": "^2.10.0",
|
|
94
|
+
"eslint-plugin-svelte": "3.13.0",
|
|
95
|
+
"jqmath": "^0.4.9",
|
|
96
|
+
"jsdom": "^27.2.0",
|
|
97
|
+
"log-update": "^7.0.2",
|
|
98
|
+
"lru-cache": "^11.2.4",
|
|
99
|
+
"mdast-util-from-markdown": "^2.0.2",
|
|
100
|
+
"mdast-util-gfm": "^3.1.0",
|
|
101
|
+
"prettier": "^3.7.3",
|
|
102
|
+
"prettier-plugin-svelte": "^3.4.0",
|
|
103
|
+
"puppeteer": "^24.31.0",
|
|
104
|
+
"remark-code-extra": "^1.0.1",
|
|
105
|
+
"remark-code-frontmatter": "^1.0.0",
|
|
106
|
+
"remark-math": "^6.0.0",
|
|
107
|
+
"resize-observer-polyfill": "^1.5.1",
|
|
108
|
+
"sass": "^1.94.2",
|
|
109
|
+
"shiki": "^3.18.0",
|
|
110
|
+
"svelte-check": "^4.3.4",
|
|
111
|
+
"svelte-eslint-parser": "1.4.0",
|
|
112
|
+
"svelte-highlight": "^7.9.0",
|
|
113
|
+
"pixelmatch": "^5.3.0",
|
|
114
|
+
"pngjs": "^7.0.0",
|
|
115
|
+
"svg-path-parser": "^1.1.0",
|
|
116
|
+
"temml": "^0.12.1",
|
|
117
|
+
"topojson-client": "^3.1.0",
|
|
118
|
+
"ts-essentials": "^10.1.1",
|
|
119
|
+
"tslib": "^2.8.1",
|
|
120
|
+
"typedoc": "^0.28.15",
|
|
121
|
+
"typedoc-plugin-markdown": "^4.9.0",
|
|
122
|
+
"typescript": "^5.9.3",
|
|
123
|
+
"uid": "^2.0.2",
|
|
124
|
+
"unist-util-visit": "^5.0.0",
|
|
125
|
+
"unocss": "^66.5.10",
|
|
126
|
+
"vite": "^7.2.6",
|
|
127
|
+
"vitest": "^4.0.15",
|
|
128
|
+
"vitest-matchmedia-mock": "^2.0.3",
|
|
129
|
+
"yoctocolors": "^2.1.2"
|
|
22
130
|
},
|
|
23
|
-
"
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
131
|
+
"types": "./dist/index.d.ts",
|
|
132
|
+
"type": "module",
|
|
133
|
+
"dependencies": {
|
|
134
|
+
"d3-array": "^3.2.4",
|
|
135
|
+
"d3-color": "^3.1.0",
|
|
136
|
+
"d3-format": "^3.1.0",
|
|
137
|
+
"d3-geo": "^3.1.1",
|
|
138
|
+
"d3-interpolate": "^3.0.1",
|
|
139
|
+
"d3-path": "^3.1.0",
|
|
140
|
+
"d3-quadtree": "^3.0.1",
|
|
141
|
+
"d3-random": "^3.0.1",
|
|
142
|
+
"d3-scale": "^4.0.2",
|
|
143
|
+
"d3-scale-chromatic": "^3.1.0",
|
|
144
|
+
"d3-shape": "^3.2.0",
|
|
145
|
+
"d3-time": "^3.1.0",
|
|
146
|
+
"es-toolkit": "^1.42.0",
|
|
147
|
+
"fast-equals": "^5.3.3",
|
|
148
|
+
"interval-tree-1d": "^1.0.4",
|
|
149
|
+
"merge-deep": "^3.0.3",
|
|
150
|
+
"svelte": "5"
|
|
28
151
|
}
|
|
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
|
-
"@shikijs/twoslash": "^3.18.0",
|
|
40
|
-
"@sveltejs/adapter-auto": "^7.0.0",
|
|
41
|
-
"@sveltejs/adapter-static": "^3.0.10",
|
|
42
|
-
"@sveltejs/enhanced-img": "^0.9.2",
|
|
43
|
-
"@sveltejs/eslint-config": "^8.3.4",
|
|
44
|
-
"@sveltejs/kit": "^2.49.1",
|
|
45
|
-
"@sveltejs/package": "^2.5.7",
|
|
46
|
-
"@sveltejs/vite-plugin-svelte": "6.2.1",
|
|
47
|
-
"@sveltepress/twoslash": "^1.3.2",
|
|
48
|
-
"@sveltepress/vite": "^1.3.2",
|
|
49
|
-
"@testing-library/svelte": "^5.2.9",
|
|
50
|
-
"@testing-library/user-event": "^14.6.1",
|
|
51
|
-
"@types/d3-array": "^3.2.2",
|
|
52
|
-
"@types/d3-color": "^3.1.3",
|
|
53
|
-
"@types/d3-dsv": "^3.0.7",
|
|
54
|
-
"@types/d3-geo": "^3.1.0",
|
|
55
|
-
"@types/d3-interpolate": "^3.0.4",
|
|
56
|
-
"@types/d3-path": "^3.1.1",
|
|
57
|
-
"@types/d3-quadtree": "^3.0.6",
|
|
58
|
-
"@types/d3-random": "^3.0.3",
|
|
59
|
-
"@types/d3-scale": "^4.0.9",
|
|
60
|
-
"@types/d3-scale-chromatic": "^3.1.0",
|
|
61
|
-
"@types/d3-shape": "^3.1.7",
|
|
62
|
-
"@types/geojson": "^7946.0.16",
|
|
63
|
-
"@types/topojson": "^3.2.6",
|
|
64
|
-
"@types/topojson-client": "^3.1.5",
|
|
65
|
-
"@typescript-eslint/eslint-plugin": "^8.48.1",
|
|
66
|
-
"@typescript-eslint/parser": "^8.48.1",
|
|
67
|
-
"@unocss/extractor-svelte": "^66.5.10",
|
|
68
|
-
"@vite-pwa/sveltekit": "^1.1.0",
|
|
69
|
-
"csstype": "^3.2.3",
|
|
70
|
-
"d3-dsv": "^3.0.1",
|
|
71
|
-
"d3-fetch": "^3.0.1",
|
|
72
|
-
"d3-force": "^3.0.0",
|
|
73
|
-
"eslint": "^9.39.1",
|
|
74
|
-
"eslint-config-prettier": "^10.1.8",
|
|
75
|
-
"eslint-plugin-regexp": "^2.10.0",
|
|
76
|
-
"eslint-plugin-svelte": "3.13.0",
|
|
77
|
-
"jqmath": "^0.4.9",
|
|
78
|
-
"jsdom": "^27.2.0",
|
|
79
|
-
"log-update": "^7.0.2",
|
|
80
|
-
"lru-cache": "^11.2.4",
|
|
81
|
-
"mdast-util-from-markdown": "^2.0.2",
|
|
82
|
-
"mdast-util-gfm": "^3.1.0",
|
|
83
|
-
"prettier": "^3.7.3",
|
|
84
|
-
"prettier-plugin-svelte": "^3.4.0",
|
|
85
|
-
"puppeteer": "^24.31.0",
|
|
86
|
-
"remark-code-extra": "^1.0.1",
|
|
87
|
-
"remark-code-frontmatter": "^1.0.0",
|
|
88
|
-
"remark-math": "^6.0.0",
|
|
89
|
-
"resize-observer-polyfill": "^1.5.1",
|
|
90
|
-
"sass": "^1.94.2",
|
|
91
|
-
"shiki": "^3.18.0",
|
|
92
|
-
"svelte-check": "^4.3.4",
|
|
93
|
-
"svelte-eslint-parser": "1.4.0",
|
|
94
|
-
"svelte-highlight": "^7.9.0",
|
|
95
|
-
"pixelmatch": "^5.3.0",
|
|
96
|
-
"pngjs": "^7.0.0",
|
|
97
|
-
"svg-path-parser": "^1.1.0",
|
|
98
|
-
"temml": "^0.12.1",
|
|
99
|
-
"topojson-client": "^3.1.0",
|
|
100
|
-
"ts-essentials": "^10.1.1",
|
|
101
|
-
"tslib": "^2.8.1",
|
|
102
|
-
"typedoc": "^0.28.15",
|
|
103
|
-
"typedoc-plugin-markdown": "^4.9.0",
|
|
104
|
-
"typescript": "^5.9.3",
|
|
105
|
-
"uid": "^2.0.2",
|
|
106
|
-
"unist-util-visit": "^5.0.0",
|
|
107
|
-
"unocss": "^66.5.10",
|
|
108
|
-
"vite": "^7.2.6",
|
|
109
|
-
"vitest": "^4.0.15",
|
|
110
|
-
"vitest-matchmedia-mock": "^2.0.3",
|
|
111
|
-
"yoctocolors": "^2.1.2"
|
|
112
|
-
},
|
|
113
|
-
"types": "./dist/index.d.ts",
|
|
114
|
-
"type": "module",
|
|
115
|
-
"dependencies": {
|
|
116
|
-
"d3-array": "^3.2.4",
|
|
117
|
-
"d3-color": "^3.1.0",
|
|
118
|
-
"d3-format": "^3.1.0",
|
|
119
|
-
"d3-geo": "^3.1.1",
|
|
120
|
-
"d3-interpolate": "^3.0.1",
|
|
121
|
-
"d3-path": "^3.1.0",
|
|
122
|
-
"d3-quadtree": "^3.0.1",
|
|
123
|
-
"d3-random": "^3.0.1",
|
|
124
|
-
"d3-scale": "^4.0.2",
|
|
125
|
-
"d3-scale-chromatic": "^3.1.0",
|
|
126
|
-
"d3-shape": "^3.2.0",
|
|
127
|
-
"d3-time": "^3.1.0",
|
|
128
|
-
"es-toolkit": "^1.42.0",
|
|
129
|
-
"fast-equals": "^5.3.3",
|
|
130
|
-
"interval-tree-1d": "^1.0.4",
|
|
131
|
-
"merge-deep": "^3.0.3",
|
|
132
|
-
"svelte": "5"
|
|
133
|
-
},
|
|
134
|
-
"scripts": {
|
|
135
|
-
"dev": "vite dev",
|
|
136
|
-
"build": "vite build",
|
|
137
|
-
"preview": "vite preview",
|
|
138
|
-
"test": "npm run test:unit",
|
|
139
|
-
"test:visual": "node scripts/visual-regression.js",
|
|
140
|
-
"vr:report": "node scripts/vr-report.js",
|
|
141
|
-
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
142
|
-
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
143
|
-
"lint": "prettier --check src && eslint src",
|
|
144
|
-
"format": "prettier --write .",
|
|
145
|
-
"test:unit": "vitest",
|
|
146
|
-
"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",
|
|
147
|
-
"docs": "npm run build && cd build && rsync --recursive . vis4.net:svelteplot/alpha0/",
|
|
148
|
-
"screenshots": "node screenshot-examples.js",
|
|
149
|
-
"check-js-extensions": "node scripts/check-js-extensions.js src"
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
+
}
|