layerchart 0.20.1 → 0.21.0

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/stores/motionStore.js

@@ -28,6 +28,6 @@ export function resolveOptions(prop, options) {
             ? options.tweened
             : prop in options.tweened
                 ? options.tweened[prop]
-                : options.tweened
+                : options.tweened,
     };
 }

package/dist/utils/event.js

@@ -16,14 +16,14 @@ export function localPoint(node, event) {
         point = point.matrixTransform(screenCTM.inverse());
         return {
             x: point.x,
-            y: point.y
+            y: point.y,
         };
     }
     // fall back to bounding box
     const rect = node.getBoundingClientRect();
     return {
         x: coords.x - rect.left - node.clientLeft,
-        y: coords.y - rect.top - node.clientTop
+        y: coords.y - rect.top - node.clientTop,
     };
 }
 function getPointFromEvent(event) {
@@ -33,12 +33,12 @@ function getPointFromEvent(event) {
         return event.changedTouches.length > 0
             ? {
                 x: event.changedTouches[0].clientX,
-                y: event.changedTouches[0].clientY
+                y: event.changedTouches[0].clientY,
             }
             : { x: 0, y: 0 };
     }
     return {
         x: event.clientX,
-        y: event.clientY
+        y: event.clientY,
     };
 }

package/dist/utils/genData.js

@@ -27,9 +27,9 @@ export function createSeries(options) {
             ...Object.fromEntries(keys.map((key) => {
                 return [
                     key,
-                    options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max)
+                    options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
                 ];
-            }))
+            })),
         };
     });
 }
@@ -45,9 +45,9 @@ export function createDateSeries(options) {
             ...Object.fromEntries(keys.map((key) => {
                 return [
                     key,
-                    options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max)
+                    options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
                 ];
-            }))
+            })),
         };
     });
 }
@@ -68,9 +68,9 @@ export function createTimeSeries(options) {
             ...Object.fromEntries(keys.map((key) => {
                 return [
                     key,
-                    options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max)
+                    options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max),
                 ];
-            }))
+            })),
         };
     });
     return timeSeries;
@@ -79,7 +79,7 @@ export const wideData = [
     { year: '2019', apples: 3840, bananas: 1920, cherries: 960, dates: 400 },
     { year: '2018', apples: 1600, bananas: 1440, cherries: 960, dates: 400 },
     { year: '2017', apples: 820, bananas: 1000, cherries: 640, dates: 400 },
-    { year: '2016', apples: 820, bananas: 560, cherries: 720, dates: 400 }
+    { year: '2016', apples: 820, bananas: 560, cherries: 720, dates: 400 },
 ];
 export const longData = [
     { year: '2019', basket: 1, fruit: 'apples', value: 3840 },
@@ -97,7 +97,7 @@ export const longData = [
     { year: '2016', basket: 1, fruit: 'apples', value: 820 },
     { year: '2016', basket: 1, fruit: 'bananas', value: 560 },
     { year: '2016', basket: 2, fruit: 'cherries', value: 720 },
-    { year: '2016', basket: 2, fruit: 'dates', value: 400 }
+    { year: '2016', basket: 2, fruit: 'dates', value: 400 },
 ];
 export function getPhyllotaxis({ radius, count, width, height }) {
     // Phyllotaxis: https://www.youtube.com/watch?v=KWoJgHFYWxY
@@ -110,7 +110,7 @@ export function getSpiral({ angle, radius, count, width, height }) {
         const a = degreesToRadians(angle * i);
         return {
             x: width / 2 + r * Math.cos(a),
-            y: height / 2 + r * Math.sin(a)
+            y: height / 2 + r * Math.sin(a),
         };
     });
 }

package/dist/utils/graph.js

@@ -8,7 +8,7 @@ export function graphFromCsv(csv) {
             source,
             target,
             // @ts-ignore
-            value: !value || isNaN((value = +value)) ? 1 : value
+            value: !value || isNaN((value = +value)) ? 1 : value,
             // color: linkColor,
         }
         : null);
@@ -20,7 +20,7 @@ export function graphFromCsv(csv) {
 export function graphFromHierarchy(hierarchy) {
     return {
         nodes: hierarchy.descendants(),
-        links: hierarchy.links().map((link) => ({ ...link, value: link.target.value }))
+        links: hierarchy.links().map((link) => ({ ...link, value: link.target.value })),
     };
 }
 /**

package/dist/utils/rect.js

@@ -3,7 +3,7 @@ import { max, min } from 'd3-array';
 import { groupScaleBand, isScaleBand } from './scales';
 // TOOD: Pass in overrides for `x` and `y` accessors
 export function createDimensionGetter(context, options) {
-    const { flatData, xGet, yGet, xRange, yRange, xScale, yScale, x: xAccessor, y: yAccessor } = context;
+    const { flatData, xGet, yGet, xRange, yRange, xScale, yScale, x: xAccessor, y: yAccessor, } = context;
     const groupBy = options?.groupBy;
     const padding = options?.padding ?? 0;
     return derived([flatData, xGet, yGet, xRange, yRange, xScale, yScale, xAccessor, yAccessor], ([$flatData, $xGet, $yGet, $xRange, $yRange, $xScale, $yScale, $xAccessor, $yAccessor]) => {
@@ -47,7 +47,7 @@ export function createDimensionGetter(context, options) {
                     x: $xScale(left),
                     y,
                     width: $xScale(right) - $xScale(left),
-                    height
+                    height,
                 };
             }
             else {
@@ -89,7 +89,7 @@ export function createDimensionGetter(context, options) {
                     x,
                     y: $yScale(top),
                     width,
-                    height: $yScale(bottom) - $yScale(top)
+                    height: $yScale(bottom) - $yScale(top),
                 };
             }
         };

package/dist/utils/scales.js

@@ -72,7 +72,7 @@ export function tweenedScale(scale, tweenedOptions = {}) {
     return {
         subscribe: tweenedScale.subscribe,
         domain: (values) => tweenedDomain.set(values),
-        range: (values) => tweenedRange.set(values)
+        range: (values) => tweenedRange.set(values),
     };
 }
 /**
@@ -94,7 +94,7 @@ export function springScale(scale, springOptions = {}) {
     return {
         subscribe: tweenedScale.subscribe,
         domain: (values) => domainStore.set(values),
-        range: (values) => rangeStore.set(values)
+        range: (values) => rangeStore.set(values),
     };
 }
 /**
@@ -116,6 +116,6 @@ export function motionScale(scale, options) {
     return {
         subscribe: tweenedScale.subscribe,
         domain: (values) => domainStore.set(values),
-        range: (values) => rangeStore.set(values)
+        range: (values) => rangeStore.set(values),
     };
 }

package/dist/utils/stack.js

@@ -18,7 +18,7 @@ export function createStackData(data, options) {
                     return {
                         ...itemData[0],
                         keys: options.stackBy ? [...groupKeys, series.key] : groupKeys,
-                        values: options.stackBy ? [s[0], s[1]] : [0, sum(itemData, (d) => d.value)]
+                        values: options.stackBy ? [s[0], s[1]] : [0, sum(itemData, (d) => d.value)],
                     };
                 });
             });
@@ -35,7 +35,7 @@ export function createStackData(data, options) {
                 return {
                     ...s.data,
                     keys: [s.data[options.xKey], series.key],
-                    values: [s[0], s[1]]
+                    values: [s[0], s[1]],
                 };
             });
         });
@@ -46,7 +46,7 @@ export function createStackData(data, options) {
         return Array.from(rollup(data, (items) => {
             return {
                 keys: [items[0][options.xKey]],
-                values: [0, sum(items, (d) => d.value)]
+                values: [0, sum(items, (d) => d.value)],
             };
         }, (d) => d[options.xKey]).values());
     }

package/dist/utils/ticks.js

@@ -1,4 +1,4 @@
-import { timeYear, timeMonth, timeWeek, timeDay, timeHour, timeMinute, timeSecond, timeMillisecond } from 'd3-time';
+import { timeYear, timeMonth, timeWeek, timeDay, timeHour, timeMinute, timeSecond, timeMillisecond, } from 'd3-time';
 import { format } from 'date-fns';
 import { formatDate, PeriodType } from 'svelte-ux/utils/date';
 import { getDuration } from 'svelte-ux/utils/duration';
@@ -8,125 +8,125 @@ const majorTicks = [
     {
         predicate: (duration) => duration == null,
         interval: timeYear.every(1),
-        format: (date) => date.toString()
+        format: (date) => date.toString(),
     },
     {
         predicate: (duration) => duration.years > 1,
         interval: timeYear.every(1),
-        format: (date) => formatDate(date, PeriodType.CalendarYear, 'short')
+        format: (date) => formatDate(date, PeriodType.CalendarYear, 'short'),
     },
     {
         predicate: (duration) => duration.years,
         interval: timeMonth.every(1),
-        format: (date) => formatDate(date, PeriodType.Month, 'short')
+        format: (date) => formatDate(date, PeriodType.Month, 'short'),
     },
     {
         predicate: (duration) => duration.days > 30,
         interval: timeMonth.every(1),
-        format: (date) => formatDate(date, PeriodType.Month, 'short')
+        format: (date) => formatDate(date, PeriodType.Month, 'short'),
     },
     {
         predicate: (duration) => duration.days,
         interval: timeDay.every(1),
-        format: (date) => formatDate(date, PeriodType.Day, 'short')
+        format: (date) => formatDate(date, PeriodType.Day, 'short'),
     },
     {
         predicate: (duration) => duration.hours,
         interval: timeHour.every(1),
-        format: (date) => format(date, 'h:mm a')
+        format: (date) => format(date, 'h:mm a'),
     },
     {
         predicate: (duration) => duration.minutes > 10,
         interval: timeMinute.every(10),
-        format: (date) => format(date, 'h:mm a')
+        format: (date) => format(date, 'h:mm a'),
     },
     {
         predicate: (duration) => duration.minutes,
         interval: timeMinute.every(1),
-        format: (date) => format(date, 'h:mm a')
+        format: (date) => format(date, 'h:mm a'),
     },
     {
         predicate: (duration) => duration.seconds > 10,
         interval: timeSecond.every(10),
-        format: (date) => format(date, 'h:mm:ss')
+        format: (date) => format(date, 'h:mm:ss'),
     },
     {
         predicate: (duration) => duration.seconds,
         interval: timeSecond.every(1),
-        format: (date) => format(date, 'h:mm:ss')
+        format: (date) => format(date, 'h:mm:ss'),
     },
     {
         predicate: (duration) => true,
         interval: timeMillisecond.every(100),
-        format: (date) => format(date, 'h:mm:ss.SSS')
-    }
+        format: (date) => format(date, 'h:mm:ss.SSS'),
+    },
 ];
 const minorTicks = [
     {
         predicate: (duration) => duration == null,
         interval: timeYear.every(1),
-        format: (date) => date.toString()
+        format: (date) => date.toString(),
     },
     {
         predicate: (duration) => duration.years,
         interval: timeMonth.every(1),
-        format: (date) => formatDate(date, PeriodType.Month, 'short')
+        format: (date) => formatDate(date, PeriodType.Month, 'short'),
     },
     {
         predicate: (duration) => duration.days > 90,
         interval: timeMonth.every(1),
-        format: (date) => formatDate(date, PeriodType.Month, 'short')
+        format: (date) => formatDate(date, PeriodType.Month, 'short'),
     },
     {
         predicate: (duration) => duration.days > 30,
         interval: timeWeek.every(1),
-        format: (date) => formatDate(date, PeriodType.WeekSun, 'short')
+        format: (date) => formatDate(date, PeriodType.WeekSun, 'short'),
     },
     {
         predicate: (duration) => duration.days > 7,
         interval: timeDay.every(1),
-        format: (date) => formatDate(date, PeriodType.Day, 'short')
+        format: (date) => formatDate(date, PeriodType.Day, 'short'),
     },
     {
         predicate: (duration) => duration.days > 3,
         interval: timeHour.every(8),
-        format: (date) => format(date, 'h:mm a')
+        format: (date) => format(date, 'h:mm a'),
     },
     {
         predicate: (duration) => duration.days,
         interval: timeHour.every(1),
-        format: (date) => format(date, 'h:mm a')
+        format: (date) => format(date, 'h:mm a'),
     },
     {
         predicate: (duration) => duration.hours,
         interval: timeMinute.every(15),
-        format: (date) => format(date, 'h:mm a')
+        format: (date) => format(date, 'h:mm a'),
     },
     {
         predicate: (duration) => duration.minutes > 10,
         interval: timeMinute.every(10),
-        format: (date) => format(date, 'h:mm a')
+        format: (date) => format(date, 'h:mm a'),
     },
     {
         predicate: (duration) => duration.minutes > 2,
         interval: timeMinute.every(1),
-        format: (date) => format(date, 'h:mm a')
+        format: (date) => format(date, 'h:mm a'),
     },
     {
         predicate: (duration) => duration.minutes,
         interval: timeSecond.every(10),
-        format: (date) => format(date, 'h:mm:ss')
+        format: (date) => format(date, 'h:mm:ss'),
     },
     {
         predicate: (duration) => duration.seconds,
         interval: timeSecond.every(1),
-        format: (date) => format(date, 'h:mm:ss')
+        format: (date) => format(date, 'h:mm:ss'),
     },
     {
         predicate: (duration) => true,
         interval: timeMillisecond.every(10),
-        format: (date) => format(date, 'h:mm:ss.SSS')
-    }
+        format: (date) => format(date, 'h:mm:ss.SSS'),
+    },
 ];
 export function getMajorTicks(start, end) {
     const duration = getDuration(start, end);

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -43,11 +43,11 @@
     "@types/shapefile": "^0.6.1",
     "@types/topojson-client": "^3.1.1",
     "autoprefixer": "^10.4.14",
-    "execa": "^7.1.1",
+    "execa": "^7.2.0",
     "marked": "^5.1.2",
     "mdsvex": "^0.11.0",
-    "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.1",
+    "prettier": "^3.0.0",
+    "prettier-plugin-svelte": "^3.0.1",
     "prism-themes": "^1.9.0",
     "rehype-slug": "^5.1.0",
     "svelte-check": "^3.4.6",
@@ -56,7 +56,7 @@
     "tailwindcss": "^3.3.3",
     "tslib": "^2.6.1",
     "typescript": "^5.1.6",
-    "unist-util-visit": "^4.1.2",
+    "unist-util-visit": "^5.0.0",
     "us-atlas": "^3.0.1",
     "vite": "^4.4.7",
     "vite-plugin-sveld": "^1.1.0"
@@ -85,7 +85,7 @@
     "lodash-es": "^4.17.21",
     "shapefile": "^0.6.6",
     "svelte": "^3.59.1",
-    "svelte-ux": "^0.46.1",
+    "svelte-ux": "^0.47.1",
     "topojson-client": "^3.1.0"
   },
   "main": "./dist/index.js",