layerchart 0.20.2 → 0.21.1

package/dist/components/Bars.svelte

@@ -13,8 +13,6 @@ $: _x = x ? (typeof x === 'string' ? (d) => d[x] : x) : $xContext;
  */
 export let y = $yContext;
 $: _y = y ? (typeof y === 'string' ? (d) => d[y] : y) : $yContext;
-export let color = 'var(--color-accent-500)';
-export let opacity = 1;
 export let stroke = 'black';
 export let strokeWidth = 0;
 export let radius = 0;
@@ -35,28 +33,16 @@ $: getDimensions = createDimensionGetter(getContext('LayerCake'), {
     padding,
     groupPadding: {
         inner: groupPaddingInner,
-        outer: groupPaddingOuter
-    }
+        outer: groupPaddingOuter,
+    },
 });
-function getColor(item, index) {
-    if (typeof color === 'function') {
-        return color({ value: _y(item), item, index });
-    }
-    else if ($config.r) {
-        return $rGet(item);
-    }
-    else {
-        return color;
-    }
-}
 </script>
 
 <g class="Bars">
   {#each $data as item, index (getKey(item, index))}
     <Rect
       data-id={index}
-      fill={getColor(item, index)}
-      fill-opacity={opacity}
+      fill={$config.r ? $rGet(item) : null}
       {stroke}
       stroke-width={strokeWidth}
       rx={radius}

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

@@ -5,12 +5,6 @@ declare const __propDef: {
         [x: string]: any;
         x?: any;
         y?: any;
-        color?: string | ((obj: {
-            value: any;
-            item: any;
-            index: number;
-        }) => string) | undefined;
-        opacity?: number | undefined;
         stroke?: string | undefined;
         strokeWidth?: number | undefined;
         radius?: number | undefined;

package/dist/components/Link.svelte

@@ -14,8 +14,6 @@ export let x = sankey ? (d) => d[0] : (d) => (orientation === 'horizontal' ? d.y
 export let y = sankey ? (d) => d[1] : (d) => (orientation === 'horizontal' ? d.x : d.y);
 export let curve = orientation === 'horizontal' ? curveBumpX : curveBumpY;
 export let tweened = undefined;
-export let color = 'black';
-export let width = undefined;
 $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
 $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
@@ -30,8 +28,6 @@ $: {
 <path
   class="path-link"
   d={$tweened_d}
-  stroke={color}
-  stroke-width={width}
   fill="none"
   on:click
   on:mouseover

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

@@ -12,8 +12,6 @@ declare const __propDef: {
         y?: ((d: any) => any) | undefined;
         curve?: import("d3-shape").CurveFactory | undefined;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
-        color?: string | undefined;
-        width?: undefined;
     };
     events: {
         click: MouseEvent;

package/dist/components/Pie.svelte

@@ -40,7 +40,6 @@ export let outerRadius = undefined;
 export let cornerRadius = 0;
 export let padAngle = 0;
 // export let padRadius = 0;
-export let color = 'black';
 export let spring = undefined;
 export let tweened = undefined;
 /**
@@ -62,17 +61,6 @@ $: pie = d3pie()
     .value($x);
 $: arcs = pie(data ?? $contextData);
 // $: console.log({ arcs, $yRange });
-function getColor(item, index) {
-    if (typeof color === 'function') {
-        return color({ value: $y(item), item, index });
-    }
-    else if ($config.r) {
-        return $rGet(item);
-    }
-    else {
-        return color;
-    }
-}
 </script>
 
 <Group center>
@@ -86,7 +74,7 @@ function getColor(item, index) {
         {outerRadius}
         {cornerRadius}
         {offset}
-        fill={getColor(arc.data, index)}
+        fill={$config.r ? $rGet(arc.data) : null}
         on:mousemove={(e) => tooltip?.show(e, arc.data)}
         on:mouseleave={(e) => tooltip?.hide()}
       />

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

@@ -25,11 +25,6 @@ declare const __propDef: {
            */ outerRadius?: undefined;
         cornerRadius?: number | undefined;
         padAngle?: number | undefined;
-        color?: string | ((obj: {
-            value: any;
-            item: any;
-            index: number;
-        }) => string) | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         /**

package/dist/components/Points.svelte

@@ -7,7 +7,6 @@ const { data, xGet, y, yGet, xScale, yScale, rGet, config } = context;
 export let r = 5;
 export let offsetX = undefined;
 export let offsetY = undefined;
-export let color = 'var(--color-accent-500)';
 function getOffset(value, offset, scale) {
     if (typeof offset === 'function') {
         return offset(value, context);
@@ -22,18 +21,6 @@ function getOffset(value, offset, scale) {
         return 0;
     }
 }
-function getColor(item, index) {
-    if (typeof color === 'function') {
-        return color({ value: $y(item), item, index });
-    }
-    else if ($config.r) {
-        // console.log({ item, value: $rGet(item), scale: $rGet.domain() });
-        return $rGet(item);
-    }
-    else {
-        return color;
-    }
-}
 $: points = $data.flatMap((d) => {
     if (Array.isArray($config.x)) {
         /*
@@ -46,7 +33,7 @@ $: points = $data.flatMap((d) => {
             return {
                 x: x + getOffset(x, offsetX, $xScale),
                 y: $yGet(d) + getOffset($yGet(d), offsetY, $yScale),
-                data: d
+                data: d,
             };
         });
     }
@@ -61,7 +48,7 @@ $: points = $data.flatMap((d) => {
             return {
                 x: $xGet(d) + getOffset($xGet(d), offsetX, $xScale),
                 y: y + getOffset(y, offsetY, $yScale),
-                data: d
+                data: d,
             };
         });
     }
@@ -73,7 +60,7 @@ $: points = $data.flatMap((d) => {
         return {
             x: $xGet(d) + getOffset($xGet(d), offsetX, $xScale),
             y: $yGet(d) + getOffset($yGet(d), offsetY, $yScale),
-            data: d
+            data: d,
         };
     }
 });
@@ -82,7 +69,13 @@ $: points = $data.flatMap((d) => {
 <slot {points}>
   <g class="point-group">
     {#each points as point, index}
-      <Circle cx={point.x} cy={point.y} {r} fill={getColor(point.data, index)} {...$$restProps} />
+      <Circle
+        cx={point.x}
+        cy={point.y}
+        {r}
+        fill={$config.r ? $rGet(point.data) : null}
+        {...$$restProps}
+      />
     {/each}
   </g>
 </slot>

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

@@ -5,11 +5,6 @@ declare const __propDef: {
         r?: number | undefined;
         offsetX?: (number | ((value: number, context: any) => number)) | undefined;
         offsetY?: (number | ((value: number, context: any) => number)) | undefined;
-        color?: string | ((obj: {
-            value: any;
-            item: any;
-            index: number;
-        }) => string) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/TooltipContext.svelte

@@ -5,7 +5,7 @@ const defaultContext = writable({
     left: 0,
     data: null,
     show: () => { },
-    hide: () => { }
+    hide: () => { },
 });
 export function tooltipContext() {
     return getContext(tooltipContextKey) ?? defaultContext;
@@ -27,7 +27,6 @@ import { localPoint } from '../utils/event';
 import { isScaleBand, scaleInvert } from '../utils/scales';
 import { quadtreeRects } from '../utils/quadtree';
 import { createPropertySortFunc, createSortFunc } from 'svelte-ux/utils/sort';
-import { firstValue } from '../utils/rect';
 const dispatch = createEventDispatcher();
 const { flatData, x, xScale, xGet, xRange, y, yScale, yGet, yRange, width, height, padding } = getContext('LayerCake');
 /*
@@ -171,7 +170,7 @@ function showTooltip(event, tooltipData) {
             ...$tooltip,
             left: snapToDataX ? $xGet(tooltipData) + $padding.left : localX,
             top: snapToDataY ? $yGet(tooltipData) + $padding.top : localY,
-            data: tooltipData
+            data: tooltipData,
         };
     }
     else {
@@ -204,7 +203,7 @@ $: if (mode === 'quadtree') {
     quadtree = d3Quadtree()
         .extent([
         [0, 0],
-        [$width, $height]
+        [$width, $height],
     ])
         .x((d) => {
         const value = $xGet(d);
@@ -238,10 +237,10 @@ let rects = [];
 $: if (mode === 'bounds' || mode === 'band') {
     rects = $flatData
         .map((d) => {
-        const xValue = firstValue($xGet(d));
-        const yValue = firstValue($yGet(d));
-        const x = Array.isArray(xValue) ? min(xValue) : xValue;
-        const y = Array.isArray(yValue) ? max(yValue) : yValue;
+        const xValue = $xGet(d);
+        const yValue = $yGet(d);
+        const x = Array.isArray(xValue) ? xValue[0] : xValue;
+        const y = Array.isArray(yValue) ? yValue[0] : yValue;
         const xOffset = isScaleBand($xScale) ? ($xScale.padding() * $xScale.step()) / 2 : 0;
         const yOffset = isScaleBand($yScale) ? ($yScale.padding() * $yScale.step()) / 2 : 0;
         const fullWidth = max($xRange) - min($xRange);
@@ -253,7 +252,7 @@ $: if (mode === 'bounds' || mode === 'band') {
                 y: isScaleBand($yScale) ? y - yOffset : min($yRange),
                 width: isScaleBand($xScale) ? $xScale.step() : fullWidth,
                 height: isScaleBand($yScale) ? $yScale.step() : fullHeight,
-                data: d
+                data: d,
             };
         }
         else if (mode === 'bounds') {
@@ -271,7 +270,7 @@ $: if (mode === 'bounds' || mode === 'band') {
                     : isScaleBand($yScale)
                         ? $yScale.step()
                         : max($yRange) - y,
-                data: d
+                data: d,
             };
         }
     })

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.20.2",
+  "version": "0.21.1",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -85,7 +85,7 @@
     "lodash-es": "^4.17.21",
     "shapefile": "^0.6.6",
     "svelte": "^3.59.1",
-    "svelte-ux": "^0.47.0",
+    "svelte-ux": "^0.47.1",
     "topojson-client": "^3.1.0"
   },
   "main": "./dist/index.js",