layerchart 0.22.0 → 0.22.2

package/dist/components/Chart.svelte

@@ -2,7 +2,7 @@
 // export { Svg, Html };
 // TODO: Workaround for sveld error: `Cannot read properties of null (reading 'type')` in `ComponentParser`
 // See: https://github.com/carbon-design-system/sveld/issues/104
-import { LayerCake, Svg as _Svg, Html as _Html, Canvas as _Canvas, WebGL as _WebGL } from 'layercake';
+import { LayerCake, Svg as _Svg, Html as _Html, Canvas as _Canvas, WebGL as _WebGL, } from 'layercake';
 export const Svg = _Svg;
 export const Html = _Html;
 export const Canvas = _Canvas;
@@ -80,6 +80,8 @@ export let geo = undefined;
   let:element
   let:xScale
   let:yScale
+  let:zScale
+  let:rScale
 >
   <GeoContext {...geo} let:projection>
     {#if tooltip}
@@ -95,6 +97,8 @@ export let geo = undefined;
           {tooltip}
           {xScale}
           {yScale}
+          {zScale}
+          {rScale}
         />
       </TooltipContext>
     {:else}
@@ -108,6 +112,8 @@ export let geo = undefined;
         {projection}
         {xScale}
         {yScale}
+        {zScale}
+        {rScale}
       />
     {/if}
   </GeoContext>

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

@@ -33,6 +33,8 @@ declare const __propDef: {
             projection: import("d3-geo").GeoProjection | import("d3-geo").GeoIdentityTransform;
             xScale: any;
             yScale: any;
+            zScale: any;
+            rScale: any;
         };
     };
 };

package/dist/components/Highlight.svelte

@@ -163,9 +163,9 @@ $: if ($tooltip.data) {
       <Rect
         spring
         {..._area}
-        fill="rgba(0,0,0,.1)"
-        on:click
         {...typeof area === 'object' ? area : null}
+        class={cls(!area.fill && 'fill-black/5', typeof area === 'object' ? area.class : null)}
+        on:click
       />
     </slot>
   {/if}
@@ -179,8 +179,11 @@ $: if ($tooltip.data) {
           y1={line.y1}
           x2={line.x2}
           y2={line.y2}
-          class="stroke-black/50 stroke-2 [stroke-dasharray:2,2] pointer-events-none"
           {...typeof lines === 'object' ? lines : null}
+          class={cls(
+            'stroke-black/20 stroke-2 [stroke-dasharray:2,2] pointer-events-none',
+            typeof lines === 'object' ? lines.class : null
+          )}
         />
       {/each}
     </slot>
@@ -197,11 +200,12 @@ $: if ($tooltip.data) {
           cy={point.y}
           r={4}
           {fill}
+          {...typeof points === 'object' ? points : null}
           class={cls(
             'stroke-[6] stroke-white [paint-order:stroke] drop-shadow',
-            !fill && 'fill-accent-500'
+            !fill && 'fill-accent-500',
+            typeof points === 'object' ? points.class : null
           )}
-          {...typeof points === 'object' ? points : null}
         />
       {/each}
     </slot>

package/dist/components/Line.svelte

@@ -3,7 +3,7 @@ import { motionStore } from '../stores/motionStore';
 export let x1;
 export let initialX1 = x1;
 export let y1;
-export let initialY1 = x1;
+export let initialY1 = y1;
 export let x2;
 export let initialX2 = x2;
 export let y2;

package/dist/utils/path.d.ts

@@ -3,3 +3,10 @@
  * see: https://svelte.dev/examples#easing
  */
 export declare function getEasingPath(easing: (t: number) => number, count?: number): string;
+/** Create circle using path data.  Useful for labels.  See also d3-shape's arc */
+export declare function circlePath(dimensions: {
+    cx: number;
+    cy: number;
+    r: number;
+    sweep?: 'inside' | 'outside';
+}): string;

package/dist/utils/path.js

@@ -12,3 +12,13 @@ export function getEasingPath(easing, count = 1000) {
     }
     return pathData;
 }
+/** Create circle using path data.  Useful for labels.  See also d3-shape's arc */
+export function circlePath(dimensions) {
+    // sweep: 0 (inside), 1 (outside)
+    const { cx, cy, r, sweep = 'outside' } = dimensions;
+    return `
+    M ${cx - r} ${cy}
+    a ${r},${r} 0 1,${sweep} ${r * 2},0
+    a ${r},${r} 0 1,${sweep} -${r * 2},0
+  `;
+}

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.22.0",
+  "version": "0.22.2",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -21,8 +21,8 @@
   },
   "devDependencies": {
     "@rollup/plugin-dsv": "^3.0.2",
-    "@sveltejs/adapter-vercel": "^3.0.2",
-    "@sveltejs/kit": "^1.22.3",
+    "@sveltejs/adapter-vercel": "^3.0.3",
+    "@sveltejs/kit": "^1.22.4",
     "@sveltejs/package": "^2.2.0",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@tailwindcss/typography": "^0.5.9",
@@ -46,7 +46,7 @@
     "execa": "^7.2.0",
     "marked": "^5.1.2",
     "mdsvex": "^0.11.0",
-    "prettier": "^3.0.0",
+    "prettier": "^3.0.1",
     "prettier-plugin-svelte": "^3.0.3",
     "prism-themes": "^1.9.0",
     "rehype-slug": "^5.1.0",
@@ -58,7 +58,7 @@
     "typescript": "^5.1.6",
     "unist-util-visit": "^5.0.0",
     "us-atlas": "^3.0.1",
-    "vite": "^4.4.7",
+    "vite": "^4.4.9",
     "vite-plugin-sveld": "^1.1.0"
   },
   "type": "module",
@@ -85,7 +85,7 @@
     "lodash-es": "^4.17.21",
     "shapefile": "^0.6.6",
     "svelte": "^3.59.1",
-    "svelte-ux": "^0.47.3",
+    "svelte-ux": "^0.47.4",
     "topojson-client": "^3.1.0"
   },
   "main": "./dist/index.js",