layerchart 0.36.3 → 0.36.5

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.
@@ -1,5 +1,5 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
- import { type GeoPermissibleObjects } from 'd3-geo';
2
+ import { type GeoPath, type GeoPermissibleObjects } from 'd3-geo';
3
3
  import type { TooltipContextValue } from './TooltipContext.svelte';
4
4
  import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
5
5
  declare const __propDef: {
@@ -9,9 +9,7 @@ declare const __propDef: {
9
9
  fill?: string | undefined;
10
10
  stroke?: string | undefined;
11
11
  strokeWidth?: number | string | undefined;
12
- render?: ((ctx: CanvasRenderingContext2D, { geoPath: GeoPath }: {
13
- geoPath: any;
14
- }) => any) | undefined;
12
+ render?: ((ctx: CanvasRenderingContext2D, { geoPath: GeoPath }) => any) | undefined;
15
13
  tooltip?: TooltipContextValue | undefined;
16
14
  curve?: CurveFactory | CurveFactoryLineOnly | undefined;
17
15
  };
@@ -14,13 +14,13 @@ const geo = geoContext();
14
14
  $: tile = d3Tile()
15
15
  .size([$width, $height])
16
16
  .scale($geo.scale() * 2 * Math.PI)
17
- .translate($geo([0, 0]))
17
+ .translate($geo([0, 0]) ?? [0, 0]) // TODO: Only works with Mercator
18
18
  .tileSize(tileSize)
19
19
  .zoomDelta(zoomDelta);
20
20
  $: tiles = tile();
21
21
  $: ({
22
22
  translate: [tx, ty],
23
- scale: k
23
+ scale: k,
24
24
  } = tiles);
25
25
  $: renderContext = canvas ? 'canvas' : 'svg';
26
26
  $: ctx = canvas?.ctx;
@@ -11,12 +11,12 @@ declare const __propDef: {
11
11
  initialWidth?: number | undefined;
12
12
  height: number;
13
13
  initialHeight?: number | undefined;
14
- spring?: boolean | import("svelte/motion").SpringOpts | {
15
- [prop: string]: import("svelte/motion").SpringOpts | undefined;
16
- } | undefined;
17
- tweened?: boolean | import("svelte/motion").TweenedOptions<unknown> | {
18
- [prop: string]: import("svelte/motion").TweenedOptions<unknown> | undefined;
19
- } | undefined;
14
+ spring?: boolean | SpringOptions | {
15
+ [prop: string]: SpringOptions;
16
+ };
17
+ tweened?: boolean | TweenedOptions | {
18
+ [prop: string]: TweenedOptions;
19
+ };
20
20
  };
21
21
  events: {
22
22
  click: MouseEvent;
@@ -1,6 +1,6 @@
1
1
  <script>// https://github.com/d3/d3-sankey
2
2
  import { createEventDispatcher, getContext } from 'svelte';
3
- import { sankey as d3Sankey, sankeyLeft, sankeyCenter, sankeyRight, sankeyJustify } from 'd3-sankey';
3
+ import { sankey as d3Sankey, sankeyLeft, sankeyCenter, sankeyRight, sankeyJustify, } from 'd3-sankey';
4
4
  const dispatch = createEventDispatcher();
5
5
  const { data, width, height, padding } = getContext('LayerCake');
6
6
  export let nodes = (d) => d.nodes;
@@ -24,7 +24,7 @@ declare const __propDef: {
24
24
  }, rect?: {
25
25
  width: number;
26
26
  height: number;
27
- } | undefined) => void) | undefined;
27
+ }) => void) | undefined;
28
28
  };
29
29
  events: {
30
30
  click: MouseEvent;
@@ -52,7 +52,7 @@ declare const __propDef: {
52
52
  }, rect?: {
53
53
  width: number;
54
54
  height: number;
55
- } | undefined) => void;
55
+ }) => void;
56
56
  reset: () => void;
57
57
  };
58
58
  };
@@ -6,32 +6,35 @@ const geo = geoContext();
6
6
  let showCenter = false;
7
7
  </script>
8
8
 
9
- <div class={cls('bg-black/5 rounded m-1 backdrop-blur p-2', $$props.class)}>
10
- <div class="grid gap-2 ml-2 text-xs">
11
- <div><span class="text-surface-content/50">scale:</span> {format($geo.scale(), 'decimal')}</div>
9
+ <div class={cls('bg-surface-300/50 rounded m-1 backdrop-blur p-2 tabular-nums', $$props.class)}>
10
+ <div class="grid gap-2 text-xs">
11
+ <div><span class="opacity-50">scale:</span> {format($geo.scale(), 'decimal')}</div>
12
12
 
13
13
  <div>
14
- <span class="text-surface-content/50">translate:</span>
14
+ <span class="opacity-50">translate:</span>
15
15
  {#each $geo.translate() as coord}
16
- <div class="ml-2">{format(coord, 'decimal')}</div>
16
+ <div class="text-right">{format(coord, 'decimal')}</div>
17
17
  {/each}
18
18
  </div>
19
19
 
20
20
  <div>
21
- <span class="text-surface-content/50">rotate:</span>
21
+ <span class="opacity-50">rotate:</span>
22
22
  {#each $geo.rotate() as angle}
23
- <div class="ml-2">{format(angle, 'decimal')}</div>
23
+ <div class="text-right">{format(angle, 'decimal')}</div>
24
24
  {/each}
25
25
  </div>
26
26
 
27
- <div><span class="text-surface-content/50">center:</span> {$geo.center?.()}</div>
27
+ <div class="grid grid-cols-[auto,1fr]">
28
+ <span class="opacity-50">center:</span>
29
+ <span class="text-right">
30
+ {$geo.center?.()}
31
+ </span>
32
+ </div>
28
33
 
29
34
  <div>
30
- <span class="text-surface-content/50"
31
- >long/lat: <Checkbox bind:checked={showCenter} size="xs" /></span
32
- >
35
+ <span class="opacity-50">long/lat: <Checkbox bind:checked={showCenter} size="xs" /></span>
33
36
  {#each $geo.invert?.([$width / 2, $height / 2]) as coord}
34
- <div class="ml-2">{format(coord, 'decimal')}</div>
37
+ <div class="text-right">{format(coord, 'decimal')}</div>
35
38
  {/each}
36
39
  </div>
37
40
  </div>
@@ -10,50 +10,50 @@ $: mathOptions = [
10
10
  {
11
11
  label: 'sin',
12
12
  group: 'math',
13
- value: (x) => amplitude * Math.sin(x * frequency) + phase
13
+ value: (x) => amplitude * Math.sin(x * frequency) + phase,
14
14
  },
15
15
  {
16
16
  label: 'cos',
17
17
  group: 'math',
18
- value: (x) => amplitude * Math.cos(x * frequency) + phase
18
+ value: (x) => amplitude * Math.cos(x * frequency) + phase,
19
19
  },
20
20
  {
21
21
  label: 'tan',
22
22
  group: 'math',
23
- value: (x) => amplitude * Math.tan(x * frequency) + phase
23
+ value: (x) => amplitude * Math.tan(x * frequency) + phase,
24
24
  },
25
25
  {
26
26
  label: 'sqrt',
27
27
  group: 'math',
28
- value: (x) => amplitude * Math.sqrt(x * frequency) + phase
28
+ value: (x) => amplitude * Math.sqrt(x * frequency) + phase,
29
29
  },
30
30
  {
31
31
  label: 'ceil',
32
32
  group: 'math',
33
- value: (x) => amplitude * Math.ceil(x * frequency) + phase
33
+ value: (x) => amplitude * Math.ceil(x * frequency) + phase,
34
34
  },
35
35
  {
36
36
  label: 'floor',
37
37
  group: 'math',
38
- value: (x) => amplitude * Math.floor(x * frequency) + phase
38
+ value: (x) => amplitude * Math.floor(x * frequency) + phase,
39
39
  },
40
40
  {
41
41
  label: 'round',
42
42
  group: 'math',
43
- value: (x) => amplitude * Math.round(x * frequency) + phase
43
+ value: (x) => amplitude * Math.round(x * frequency) + phase,
44
44
  },
45
45
  { label: 'random', group: 'math', value: (x) => amplitude * Math.random() + phase },
46
46
  {
47
47
  label: 'pow',
48
48
  group: 'math',
49
- value: (x) => amplitude * Math.pow(x, frequency) + phase
50
- }
49
+ value: (x) => amplitude * Math.pow(x, frequency) + phase,
50
+ },
51
51
  ];
52
52
  const easingOptions = Object.entries(easings).map(([key, value]) => {
53
53
  return {
54
54
  label: key,
55
55
  value,
56
- group: 'easing'
56
+ group: 'easing',
57
57
  };
58
58
  });
59
59
  $: options = [...mathOptions, ...easingOptions];
@@ -7,7 +7,7 @@ export let orientation = 'vertical';
7
7
 
8
8
  <div
9
9
  class={cls(
10
- 'bg-surface-content/5 rounded-full m-1 backdrop-blur z-10 flex',
10
+ 'bg-surface-300/50 rounded-full m-1 backdrop-blur z-10 flex',
11
11
  orientation === 'vertical' && 'flex-col',
12
12
  {
13
13
  'top-left': 'absolute top-0 left-0',
@@ -26,28 +26,28 @@ export let orientation = 'vertical';
26
26
  <Button
27
27
  icon={mdiMagnifyPlusOutline}
28
28
  on:click={() => transform.zoomIn()}
29
- class="text-surface-content/50 p-2"
29
+ class="text-surface-content p-2"
30
30
  />
31
31
  </Tooltip>
32
32
  <Tooltip title="Zoom out">
33
33
  <Button
34
34
  icon={mdiMagnifyMinusOutline}
35
35
  on:click={() => transform.zoomOut()}
36
- class="text-surface-content/50 p-2"
36
+ class="text-surface-content p-2"
37
37
  />
38
38
  </Tooltip>
39
39
  <Tooltip title="Center">
40
40
  <Button
41
41
  icon={mdiImageFilterCenterFocus}
42
42
  on:click={() => transform.translateCenter()}
43
- class="text-surface-content/50 p-2"
43
+ class="text-surface-content p-2"
44
44
  />
45
45
  </Tooltip>
46
46
  <Tooltip title="Reset">
47
47
  <Button
48
48
  icon={mdiArrowULeftTop}
49
49
  on:click={() => transform.reset()}
50
- class="text-surface-content/50 p-2"
50
+ class="text-surface-content p-2"
51
51
  />
52
52
  </Tooltip>
53
53
  </div>
package/dist/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- export { Svg, Html } from 'layercake';
1
+ export { Canvas, Html, Svg, WebGL } from 'layercake';
2
2
  export * from './components/index.js';
3
3
  export * from './utils/index.js';
package/dist/index.js CHANGED
@@ -1,3 +1,3 @@
1
- export { Svg, Html } from 'layercake';
1
+ export { Canvas, Html, Svg, WebGL } from 'layercake';
2
2
  export * from './components/index.js';
3
3
  export * from './utils/index.js';
package/package.json CHANGED
@@ -4,22 +4,22 @@
4
4
  "author": "Sean Lynch <techniq35@gmail.com>",
5
5
  "license": "MIT",
6
6
  "repository": "techniq/layerchart",
7
- "version": "0.36.3",
7
+ "version": "0.36.5",
8
8
  "devDependencies": {
9
9
  "@changesets/cli": "^2.27.1",
10
10
  "@mdi/js": "^7.4.47",
11
11
  "@rollup/plugin-dsv": "^3.0.4",
12
- "@sveltejs/adapter-auto": "^3.1.1",
13
- "@sveltejs/kit": "^2.5.3",
14
- "@sveltejs/package": "^2.3.0",
12
+ "@sveltejs/adapter-auto": "^3.2.0",
13
+ "@sveltejs/kit": "^2.5.8",
14
+ "@sveltejs/package": "^2.3.1",
15
15
  "@svitejs/changesets-changelog-github-compact": "^1.1.0",
16
- "@tailwindcss/typography": "^0.5.10",
16
+ "@tailwindcss/typography": "^0.5.13",
17
17
  "@types/d3-array": "^3.2.1",
18
18
  "@types/d3-delaunay": "^6.0.4",
19
19
  "@types/d3-dsv": "^3.0.7",
20
20
  "@types/d3-force": "^3.0.9",
21
21
  "@types/d3-geo": "^3.1.0",
22
- "@types/d3-hierarchy": "^3.1.6",
22
+ "@types/d3-hierarchy": "^3.1.7",
23
23
  "@types/d3-interpolate": "^3.0.4",
24
24
  "@types/d3-interpolate-path": "^2.0.3",
25
25
  "@types/d3-quadtree": "^3.0.6",
@@ -30,40 +30,39 @@
30
30
  "@types/d3-shape": "^3.1.6",
31
31
  "@types/d3-time": "^3.0.2",
32
32
  "@types/lodash-es": "^4.17.12",
33
- "@types/prismjs": "^1.26.3",
33
+ "@types/prismjs": "^1.26.4",
34
34
  "@types/shapefile": "^0.6.4",
35
35
  "@types/topojson-client": "^3.1.4",
36
36
  "@types/topojson-simplify": "^3.0.3",
37
- "autoprefixer": "^10.4.18",
38
- "execa": "^8.0.1",
39
- "marked": "^12.0.1",
37
+ "autoprefixer": "^10.4.19",
38
+ "marked": "^12.0.2",
40
39
  "mdsvex": "^0.11.0",
41
40
  "posthog-js": "^1.95.1",
42
41
  "prettier": "^3.2.5",
43
- "prettier-plugin-svelte": "^3.2.2",
42
+ "prettier-plugin-svelte": "^3.2.3",
44
43
  "prism-svelte": "^0.5.0",
45
44
  "prism-themes": "^1.9.0",
46
45
  "prismjs": "^1.29.0",
47
46
  "rehype-slug": "^6.0.0",
48
47
  "shapefile": "^0.6.6",
49
48
  "solar-calculator": "^0.3.0",
50
- "svelte": "^4.2.12",
51
- "svelte-check": "^3.6.7",
49
+ "svelte": "^4.2.17",
50
+ "svelte-check": "^3.7.1",
52
51
  "svelte-json-tree": "^2.2.0",
53
- "svelte-preprocess": "^5.1.3",
54
- "svelte2tsx": "^0.7.4",
55
- "tailwindcss": "^3.4.1",
52
+ "svelte-preprocess": "^5.1.4",
53
+ "svelte2tsx": "^0.7.8",
54
+ "tailwindcss": "^3.4.3",
56
55
  "topojson-client": "^3.1.0",
57
56
  "topojson-simplify": "^3.0.3",
58
57
  "tslib": "^2.6.2",
59
- "typescript": "^5.4.2",
58
+ "typescript": "^5.4.5",
60
59
  "unist-util-visit": "^5.0.0",
61
60
  "us-atlas": "^3.0.1",
62
- "vite": "^5.1.6"
61
+ "vite": "^5.2.11"
63
62
  },
64
63
  "type": "module",
65
64
  "dependencies": {
66
- "@sveltejs/vite-plugin-svelte": "^3.0.2",
65
+ "@sveltejs/vite-plugin-svelte": "^3.1.0",
67
66
  "d3-array": "^3.2.4",
68
67
  "d3-color": "^3.1.0",
69
68
  "d3-delaunay": "^6.0.4",
@@ -84,11 +83,11 @@
84
83
  "d3-tile": "^1.0.0",
85
84
  "d3-time": "^3.1.0",
86
85
  "date-fns": "^3.6.0",
87
- "layercake": "^8.1.1",
86
+ "layercake": "^8.1.4",
88
87
  "lodash-es": "^4.17.21",
89
- "posthog-js": "^1.116.0",
88
+ "posthog-js": "^1.131.4",
90
89
  "shapefile": "^0.6.6",
91
- "svelte-ux": "^0.62.0",
90
+ "svelte-ux": "^0.63.2",
92
91
  "topojson-client": "^3.1.0"
93
92
  },
94
93
  "peerDependencies": {
@@ -116,7 +115,7 @@
116
115
  "package": "svelte-package",
117
116
  "check": "svelte-check --tsconfig ./tsconfig.json",
118
117
  "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
119
- "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
120
- "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
118
+ "lint": "prettier --check .",
119
+ "format": "prettier --write ."
121
120
  }
122
121
  }