layerchart 0.20.0 → 0.20.2

package/dist/components/Bars.svelte

@@ -13,7 +13,7 @@ $: _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-blue-500)';
+export let color = 'var(--color-accent-500)';
 export let opacity = 1;
 export let stroke = 'black';
 export let strokeWidth = 0;

package/dist/components/HighlightLine.svelte

@@ -23,7 +23,7 @@ function getColor(item, index = -1) {
         return $rGet(item);
     }
     else {
-        return 'var(--color-blue-500)';
+        return 'var(--color-accent-500)';
     }
 }
 let lines = [];

package/dist/components/Points.svelte

@@ -7,7 +7,7 @@ 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-blue-500)';
+export let color = 'var(--color-accent-500)';
 function getOffset(value, offset, scale) {
     if (typeof offset === 'function') {
         return offset(value, context);

package/dist/docs/Blockquote.svelte

@@ -1,7 +1,11 @@
-<script>"use strict";
+<script>import { mdiInformation } from '@mdi/js';
+import { Icon } from 'svelte-ux';
 // console.log($$props, $$slots);
 </script>
 
-<div class="bg-black/5 border-l-4 border-blue-500 p-4 my-4 rounded">
+<div
+  class="bg-accent-500/10 border-l-[6px] border-l-accent-500 border-accent-500/30 text-accent-900 px-4 py-2 border my-4 rounded flex items-center gap-2 text-sm"
+>
+  <Icon data={mdiInformation} class="text-accent-500" />
   <slot />
 </div>

package/dist/docs/CurveMenuField.svelte

@@ -5,6 +5,7 @@ export let value = undefined;
 const options = Object.keys(d3shapes)
     .filter((key) => key.startsWith('curve'))
     .filter((key) => !key.endsWith('Open') && !key.endsWith('Closed'))
+    .filter((key) => !key.includes('Bundle')) // Not compatibile with area
     .map((key) => {
     return {
         label: key.replace('curve', ''),

package/dist/docs/Link.svelte

@@ -2,6 +2,6 @@
 // console.log($$props, $$slots);
 </script>
 
-<a class="text-blue-500 font-medium" {...$$restProps}>
+<a class="text-accent-500 font-medium" {...$$restProps}>
   <slot />
 </a>

package/dist/docs/ViewSourceButton.svelte

@@ -9,7 +9,7 @@ export let icon;
 
 {#if source}
   <Toggle let:on={open} let:toggle>
-    <Button {icon} on:click={toggle} variant="fill-light" color="blue" size="sm">{label}</Button>
+    <Button {icon} on:click={toggle} variant="fill-light" color="accent" size="sm">{label}</Button>
     <Dialog
       {open}
       on:close={toggle}
@@ -33,13 +33,13 @@ export let icon;
       </div>
 
       <div slot="actions">
-        <Button variant="fill" color="blue">Close</Button>
+        <Button variant="fill" color="accent">Close</Button>
       </div>
     </Dialog>
   </Toggle>
 {:else if href}
   <Tooltip title="Edit this page">
-    <Button {icon} {href} target="_blank" variant="fill-light" color="blue" size="sm">
+    <Button {icon} {href} target="_blank" variant="fill-light" color="accent" size="sm">
       {label}
     </Button>
   </Tooltip>

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.0",
+  "version": "0.20.2",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -21,9 +21,9 @@
   },
   "devDependencies": {
     "@rollup/plugin-dsv": "^3.0.2",
-    "@sveltejs/adapter-vercel": "^3.0.1",
-    "@sveltejs/kit": "^1.22.1",
-    "@sveltejs/package": "^2.1.0",
+    "@sveltejs/adapter-vercel": "^3.0.2",
+    "@sveltejs/kit": "^1.22.3",
+    "@sveltejs/package": "^2.2.0",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@tailwindcss/typography": "^0.5.9",
     "@types/d3-array": "^3.0.5",
@@ -38,27 +38,27 @@
     "@types/d3-sankey": "^0.12.1",
     "@types/d3-scale": "^4.0.3",
     "@types/d3-shape": "^3.1.1",
-    "@types/lodash-es": "^4.17.7",
-    "@types/marked": "^5.0.0",
+    "@types/lodash-es": "^4.17.8",
+    "@types/marked": "^5.0.1",
     "@types/shapefile": "^0.6.1",
     "@types/topojson-client": "^3.1.1",
     "autoprefixer": "^10.4.14",
-    "execa": "^7.1.1",
-    "marked": "^5.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.5",
+    "svelte-check": "^3.4.6",
     "svelte-preprocess": "^5.0.4",
     "svelte2tsx": "^0.6.19",
-    "tailwindcss": "^3.3.2",
-    "tslib": "^2.6.0",
+    "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.2",
+    "vite": "^4.4.7",
     "vite-plugin-sveld": "^1.1.0"
   },
   "type": "module",
@@ -81,11 +81,11 @@
     "d3-shape": "^3.2.0",
     "d3-tile": "^1.0.0",
     "date-fns": "^2.30.0",
-    "layercake": "^7.6.0",
+    "layercake": "^7.6.1",
     "lodash-es": "^4.17.21",
     "shapefile": "^0.6.6",
     "svelte": "^3.59.1",
-    "svelte-ux": "^0.43.11",
+    "svelte-ux": "^0.47.0",
     "topojson-client": "^3.1.0"
   },
   "main": "./dist/index.js",