layerchart 0.28.0-next.3 → 0.30.1

package/dist/components/Circle.svelte

@@ -1,4 +1,5 @@
 <script>import { tick } from 'svelte';
+import { cls } from 'svelte-ux';
 import { motionStore } from '../stores/motionStore';
 export let cx = 0;
 export let initialCx = cx;
@@ -22,7 +23,7 @@ $: tick().then(() => {
   cx={$tweened_cx}
   cy={$tweened_cy}
   r={$tweened_r}
-  class="fill-surface-content"
+  class={cls($$props.fill === undefined && 'fill-surface-content')}
   {...$$restProps}
   on:click
   on:mousemove

package/dist/components/ClipPath.svelte

@@ -3,6 +3,8 @@
 export let id = uniqueId('clipPath-');
 /** Use existing path or shape (by id) for clipPath */
 export let useId = undefined;
+/** Disable clipping (show all) */
+export let disabled = false;
 </script>
 
 <defs>
@@ -16,7 +18,11 @@ export let useId = undefined;
 </defs>
 
 {#if $$slots.default}
-  <g style:clip-path="url(#{id})" on:click on:mousemove on:mouseleave on:keydown>
-    <slot {id} url="url(#{id})" {useId} />
-  </g>
+  {#if disabled}
+    <slot />
+  {:else}
+    <g style:clip-path="url(#{id})" on:click on:mousemove on:mouseleave on:keydown>
+      <slot {id} url="url(#{id})" {useId} />
+    </g>
+  {/if}
 {/if}

package/dist/components/ClipPath.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         id?: string | undefined;
         useId?: string | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/components/GeoCircle.svelte

@@ -0,0 +1,12 @@
+<script>import { geoCircle } from 'd3-geo';
+import GeoPath from './GeoPath.svelte';
+/** Radius in degrees.  Default: 90 */
+export let radius = 90;
+/** Center point of circle in degree ([longitude, latitude]).  Default [0, 0] */
+export let center = [0, 0];
+/** sets the circle precision to the specified angle in degrees */
+export let precision = 6;
+$: geojson = geoCircle().radius(radius).center(center).precision(precision)();
+</script>
+
+<GeoPath {geojson} {...$$restProps} />

package/dist/components/GeoCircle.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        radius?: number | undefined;
+        center?: [number, number] | undefined;
+        precision?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GeoCircleProps = typeof __propDef.props;
+export type GeoCircleEvents = typeof __propDef.events;
+export type GeoCircleSlots = typeof __propDef.slots;
+export default class GeoCircle extends SvelteComponentTyped<GeoCircleProps, GeoCircleEvents, GeoCircleSlots> {
+}
+export {};

package/dist/components/Line.svelte

@@ -1,4 +1,5 @@
 <script>import { tick } from 'svelte';
+import { cls } from 'svelte-ux';
 import { motionStore } from '../stores/motionStore';
 export let x1;
 export let initialX1 = x1;
@@ -27,7 +28,7 @@ $: tick().then(() => {
   y1={$tweened_y1}
   x2={$tweened_x2}
   y2={$tweened_y2}
-  class="stroke-surface-content"
+  class={cls($$props.stroke === undefined && 'stroke-surface-content')}
   {...$$restProps}
   on:click
   on:mousemove

package/dist/components/Pie.svelte.d.ts

@@ -19,10 +19,10 @@ declare const __propDef: {
            *   value >  0: percent of `outerRadius`
            *   value <  0: offset of `outerRadius`
            *   default: yRange min
-           */ innerRadius?: undefined;
+           */ innerRadius?: number | undefined;
         /**
            * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
-           */ outerRadius?: undefined;
+           */ outerRadius?: number | undefined;
         cornerRadius?: number | undefined;
         padAngle?: number | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];

package/dist/components/Rect.svelte

@@ -1,4 +1,5 @@
 <script>import { tick } from 'svelte';
+import { cls } from 'svelte-ux';
 import { motionStore, resolveOptions, } from '../stores/motionStore';
 export let x = 0;
 export let initialX = x;
@@ -28,7 +29,7 @@ $: tick().then(() => {
   y={$tweened_y}
   width={$tweened_width}
   height={$tweened_height}
-  class="fill-surface-content"
+  class={cls($$props.fill === undefined && 'fill-surface-content')}
   {...$$restProps}
   on:click
   on:mouseover

package/dist/components/Text.svelte

@@ -130,7 +130,7 @@ function isValidXOrY(xOrY) {
       {transform}
       text-anchor={textAnchor}
       {...$$restProps}
-      class={cls('fill-surface-content', $$props.class)}
+      class={cls($$props.fill === undefined && 'fill-surface-content', $$props.class)}
     >
       {#each wordsByLines as line, index}
         <tspan {x} dy={index === 0 ? startDy : lineHeight}>

package/dist/components/index.d.ts

@@ -13,6 +13,7 @@ export { default as CircleClipPath } from './CircleClipPath.svelte';
 export { default as ClipPath } from './ClipPath.svelte';
 export { default as ColorRamp } from './ColorRamp.svelte';
 export { default as Frame } from './Frame.svelte';
+export { default as GeoCircle } from './GeoCircle.svelte';
 export { default as GeoContext, geoContext } from './GeoContext.svelte';
 export { default as GeoPath } from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';

package/dist/components/index.js

@@ -13,6 +13,7 @@ export { default as CircleClipPath } from './CircleClipPath.svelte';
 export { default as ClipPath } from './ClipPath.svelte';
 export { default as ColorRamp } from './ColorRamp.svelte';
 export { default as Frame } from './Frame.svelte';
+export { default as GeoCircle } from './GeoCircle.svelte';
 export { default as GeoContext, geoContext } from './GeoContext.svelte';
 export { default as GeoPath } from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';

package/dist/docs/TilesetField.svelte

@@ -1,4 +1,4 @@
-<script>import { Field, Switch } from 'svelte-ux';
+<script>import { SelectField, Switch } from 'svelte-ux';
 export let doubleScale = devicePixelRatio > 1;
 // TODO: Access via context, or possibly global state
 const ACCESS_TOKEN = 'pk.eyJ1IjoidGVjaG5pcTM1IiwiYSI6ImNsZTR5cDd0ZjAyNm8zdnFvczhzdnFpcXkifQ.-LAr8sl5BZ3y-H0pDyD1qA';
@@ -25,7 +25,7 @@ const arcgisVector = (tileset) => (x, y, z) => {
     return `https://basemaps.arcgis.com/arcgis/rest/services/${tileset}/VectorTileServer/tile/${z}/${y}/${x}.pbf`;
     // https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/12/1572/1108.pbf
 };
-$: serviceOptions = {
+$: services = {
     'mapbox v1': {
         'streets-v11': mapboxv1('streets-v11'),
         'light-v10': mapboxv1('light-v10'),
@@ -66,28 +66,31 @@ $: serviceOptions = {
     // 	 'Community Map', url: arcgisVector('World_Basemap_v2'),
     // }
 };
-$: defaultServiceUrl = serviceOptions['mapbox v1']['streets-v11'];
+$: serviceOptions = Object.entries(services).flatMap(([group, service]) => {
+    return Object.entries(service).map(([label, value]) => {
+        return { label, value: `${group}:${label}`, group, serviceUrl: value };
+    });
+});
+$: defaultServiceUrl = services['mapbox v1']['streets-v11'];
 export let serviceUrl = defaultServiceUrl;
 $: getServiceUrl = (option) => {
     const [selectedService, selectedTileset] = selected.split(':');
-    return serviceOptions[selectedService][selectedTileset];
+    return services[selectedService][selectedTileset];
 };
 let selected = 'mapbox v1:streets-v11';
 $: serviceUrl = getServiceUrl(selected);
 </script>
 
-<Field label="Tileset" let:id>
-  <select bind:value={selected} class="w-full outline-none appearance-none text-sm" {id}>
-    {#each Object.entries(serviceOptions) as [group, options]}
-      <optgroup label={group}>
-        {#each Object.keys(options) as option}
-          <option value="{group}:{option}">{option}</option>
-        {/each}
-      </optgroup>
-    {/each}
-  </select>
-  <div slot="append">
+<SelectField
+  label="Tileset"
+  options={serviceOptions}
+  bind:value={selected}
+  clearable={false}
+  toggleIcon={null}
+  stepper
+>
+  <div slot="append" on:click|stopPropagation>
     <div class="text-[10px] text-surface-content/50 text-center">2x</div>
     <Switch bind:checked={doubleScale} size="md" />
   </div>
-</Field>
+</SelectField>

package/dist/docs/TilesetField.svelte.d.ts

@@ -5,6 +5,8 @@ declare const __propDef: {
         serviceUrl?: ((x: number, y: number, z: number) => string) | undefined;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/utils/geo.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Return the point on Earth's surface that is diametrically opposite to another point
+ * @see: https://en.wikipedia.org/wiki/Antipodes
+ */
+export declare function antipode([longitude, latitude]: [number, number]): [number, number];

package/dist/utils/geo.js

@@ -0,0 +1,7 @@
+/**
+ * Return the point on Earth's surface that is diametrically opposite to another point
+ * @see: https://en.wikipedia.org/wiki/Antipodes
+ */
+export function antipode([longitude, latitude]) {
+    return [longitude + 180, -latitude];
+}

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from './geo';
 export * from './graph';
 export * from './hierarchy';
 export * from './math';

package/dist/utils/index.js

@@ -1,3 +1,4 @@
+export * from './geo';
 export * from './graph';
 export * from './hierarchy';
 export * from './math';

package/package.json

@@ -4,14 +4,14 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.28.0-next.3",
+  "version": "0.30.1",
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@mdi/js": "^7.4.47",
     "@rollup/plugin-dsv": "^3.0.4",
-    "@sveltejs/adapter-auto": "^3.1.0",
-    "@sveltejs/kit": "^2.3.2",
-    "@sveltejs/package": "^2.2.5",
+    "@sveltejs/adapter-auto": "^3.1.1",
+    "@sveltejs/kit": "^2.5.0",
+    "@sveltejs/package": "^2.2.6",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@tailwindcss/typography": "^0.5.10",
     "@types/d3-array": "^3.2.1",
@@ -29,39 +29,39 @@
     "@types/d3-shape": "^3.1.6",
     "@types/d3-time": "^3.0.2",
     "@types/lodash-es": "^4.17.12",
-    "@types/marked": "^6.0.0",
     "@types/prismjs": "^1.26.3",
     "@types/shapefile": "^0.6.4",
     "@types/topojson-client": "^3.1.4",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.17",
     "d3-color": "^3.1.0",
     "execa": "^8.0.1",
-    "marked": "^11.1.1",
+    "marked": "^12.0.0",
     "mdsvex": "^0.11.0",
     "posthog-js": "^1.95.1",
-    "prettier": "^3.2.2",
-    "prettier-plugin-svelte": "^3.1.2",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.1",
     "prism-svelte": "^0.5.0",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
     "rehype-slug": "^6.0.0",
     "shapefile": "^0.6.6",
-    "svelte": "^4.2.8",
-    "svelte-check": "^3.6.3",
+    "solar-calculator": "^0.3.0",
+    "svelte": "^4.2.10",
+    "svelte-check": "^3.6.4",
     "svelte-json-tree": "^2.2.0",
     "svelte-preprocess": "^5.1.3",
-    "svelte2tsx": "^0.7.0",
+    "svelte2tsx": "^0.7.1",
     "tailwindcss": "^3.4.1",
     "topojson-client": "^3.1.0",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
     "unist-util-visit": "^5.0.0",
     "us-atlas": "^3.0.1",
-    "vite": "^5.0.11"
+    "vite": "^5.1.1"
   },
   "type": "module",
   "dependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",
@@ -78,12 +78,12 @@
     "d3-shape": "^3.2.0",
     "d3-tile": "^1.0.0",
     "d3-time": "^3.1.0",
-    "date-fns": "^3.2.0",
+    "date-fns": "^3.3.1",
     "layercake": "^8.0.2",
     "lodash-es": "^4.17.21",
-    "posthog-js": "^1.100.0",
+    "posthog-js": "^1.105.8",
     "shapefile": "^0.6.6",
-    "svelte-ux": "0.58.0-next.13",
+    "svelte-ux": "0.60.2",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {