layerchart 0.0.1 → 0.0.2

package/utils/pivot.js

@@ -0,0 +1,36 @@
+import { group } from 'd3-array';
+export function getAccessor(key) {
+    if (typeof key === 'function') {
+        return key;
+    }
+    else {
+        return (d) => d[key];
+    }
+}
+/**
+ * Pivot longer (columns to rows)
+ *  - see: https://observablehq.com/d/3ea8d446f5ba96fe
+ *  - see also: https://observablehq.com/d/ac2a320cf2b0adc4 as generator
+ */
+export function pivotLonger(data, columns, name, value) {
+    const keep = data.columns.filter((c) => !columns.includes(c));
+    return data.flatMap((d) => {
+        const base = keep.map((k) => [k, d[k]]);
+        return columns.map((column) => {
+            return Object.fromEntries([...base, [name, column], [value, d[column]]]);
+        });
+    });
+}
+/**
+ * Pivot wider (rows to columns)
+ *  - see: https://github.com/d3/d3-array/issues/142#issuecomment-761861983
+ */
+export function pivotWider(data, column, name, value) {
+    return Array.from(group(data, (d) => d[column]), ([columnVal, items]) => Object.fromEntries([[column, columnVal]].concat(items.map((d) => [d[name], d[value]]))));
+}
+export function first(items) {
+    return items[0];
+}
+export function last(items) {
+    return items[items.length - 1];
+}

package/utils/scales.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Implemenation for missing `scaleBand().invert()`
+ *
+ *  See: https://stackoverflow.com/a/50846323/191902
+ *      https://github.com/d3/d3-scale/pull/64
+ *      https://github.com/vega/vega-scale/blob/master/src/scaleBand.js#L118
+ *      https://observablehq.com/@d3/ordinal-brushing
+ */
+export declare function scaleBandInvert(scale: any): (value: any) => any;
+export declare function isScaleBand(scale: any): boolean;

package/utils/scales.js

@@ -0,0 +1,21 @@
+/**
+ * Implemenation for missing `scaleBand().invert()`
+ *
+ *  See: https://stackoverflow.com/a/50846323/191902
+ *      https://github.com/d3/d3-scale/pull/64
+ *      https://github.com/vega/vega-scale/blob/master/src/scaleBand.js#L118
+ *      https://observablehq.com/@d3/ordinal-brushing
+ */
+export function scaleBandInvert(scale) {
+    const domain = scale.domain();
+    const paddingOuter = scale(domain[0]);
+    const eachBand = scale.step();
+    return function (value) {
+        // TODO: Should this use Math.round to better select? https://stackoverflow.com/questions/38633082/d3-getting-invert-value-of-band-scales/50846323#comment104743795_50846323
+        const index = Math.floor((value - paddingOuter) / eachBand);
+        return domain[Math.max(0, Math.min(index, domain.length - 1))];
+    };
+}
+export function isScaleBand(scale) {
+    return typeof scale.bandwidth === 'function';
+}

package/utils/string.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="lodash" />
+declare function _getStringWidth(str: string, style?: CSSStyleDeclaration): number;
+export declare const getStringWidth: typeof _getStringWidth & import("lodash").MemoizedFunction;
+export {};

package/utils/string.js

@@ -0,0 +1,27 @@
+import { memoize } from 'lodash-es';
+const MEASUREMENT_ELEMENT_ID = '__text_measurement_id';
+function _getStringWidth(str, style) {
+    try {
+        // Calculate length of each word to be used to determine number of words per line
+        let textEl = document.getElementById(MEASUREMENT_ELEMENT_ID);
+        if (!textEl) {
+            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svg.style.width = '0';
+            svg.style.height = '0';
+            svg.style.position = 'absolute';
+            svg.style.top = '-100%';
+            svg.style.left = '-100%';
+            textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+            textEl.setAttribute('id', MEASUREMENT_ELEMENT_ID);
+            svg.appendChild(textEl);
+            document.body.appendChild(svg);
+        }
+        Object.assign(textEl.style, style);
+        textEl.textContent = str;
+        return textEl.getComputedTextLength();
+    }
+    catch (e) {
+        return null;
+    }
+}
+export const getStringWidth = memoize(_getStringWidth, (str, style) => `${str}_${JSON.stringify(style)}`);

package/utils/ticks.d.ts

@@ -0,0 +1,3 @@
+export declare function getMajorTicks(start: Date, end: Date): import("d3-time").TimeInterval;
+export declare function formatMajorTick(date: Date, rangeStart: Date, rangeEnd: Date): string;
+export declare function getMinorTicks(start: Date, end: Date): import("d3-time").TimeInterval;

package/utils/ticks.js

@@ -0,0 +1,157 @@
+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';
+import { fail } from 'svelte-ux/types';
+// TODO: Use PeriodType along with Duration to format (and possibly select intervals)
+const majorTicks = [
+    {
+        predicate: (duration) => duration == null,
+        interval: timeYear.every(1),
+        format: (date) => date.toString()
+    },
+    {
+        predicate: (duration) => duration.years > 1,
+        interval: timeYear.every(1),
+        format: (date) => formatDate(date, PeriodType.CalendarYear, 'short')
+    },
+    {
+        predicate: (duration) => duration.years,
+        interval: timeMonth.every(1),
+        format: (date) => formatDate(date, PeriodType.Month, 'short')
+    },
+    {
+        predicate: (duration) => duration.days > 30,
+        interval: timeMonth.every(1),
+        format: (date) => formatDate(date, PeriodType.Month, 'short')
+    },
+    {
+        predicate: (duration) => duration.days,
+        interval: timeDay.every(1),
+        format: (date) => formatDate(date, PeriodType.Day, 'short')
+    },
+    {
+        predicate: (duration) => duration.hours,
+        interval: timeHour.every(1),
+        format: (date) => format(date, 'h:mm a')
+    },
+    {
+        predicate: (duration) => duration.minutes > 10,
+        interval: timeMinute.every(10),
+        format: (date) => format(date, 'h:mm a')
+    },
+    {
+        predicate: (duration) => duration.minutes,
+        interval: timeMinute.every(1),
+        format: (date) => format(date, 'h:mm a')
+    },
+    {
+        predicate: (duration) => duration.seconds > 10,
+        interval: timeSecond.every(10),
+        format: (date) => format(date, 'h:mm:ss')
+    },
+    {
+        predicate: (duration) => duration.seconds,
+        interval: timeSecond.every(1),
+        format: (date) => format(date, 'h:mm:ss')
+    },
+    {
+        predicate: (duration) => true,
+        interval: timeMillisecond.every(100),
+        format: (date) => format(date, 'h:mm:ss.SSS')
+    }
+];
+const minorTicks = [
+    {
+        predicate: (duration) => duration == null,
+        interval: timeYear.every(1),
+        format: (date) => date.toString()
+    },
+    {
+        predicate: (duration) => duration.years,
+        interval: timeMonth.every(1),
+        format: (date) => formatDate(date, PeriodType.Month, 'short')
+    },
+    {
+        predicate: (duration) => duration.days > 90,
+        interval: timeMonth.every(1),
+        format: (date) => formatDate(date, PeriodType.Month, 'short')
+    },
+    {
+        predicate: (duration) => duration.days > 30,
+        interval: timeWeek.every(1),
+        format: (date) => formatDate(date, PeriodType.WeekSun, 'short')
+    },
+    {
+        predicate: (duration) => duration.days > 7,
+        interval: timeDay.every(1),
+        format: (date) => formatDate(date, PeriodType.Day, 'short')
+    },
+    {
+        predicate: (duration) => duration.days > 3,
+        interval: timeHour.every(8),
+        format: (date) => format(date, 'h:mm a')
+    },
+    {
+        predicate: (duration) => duration.days,
+        interval: timeHour.every(1),
+        format: (date) => format(date, 'h:mm a')
+    },
+    {
+        predicate: (duration) => duration.hours,
+        interval: timeMinute.every(15),
+        format: (date) => format(date, 'h:mm a')
+    },
+    {
+        predicate: (duration) => duration.minutes > 10,
+        interval: timeMinute.every(10),
+        format: (date) => format(date, 'h:mm a')
+    },
+    {
+        predicate: (duration) => duration.minutes > 2,
+        interval: timeMinute.every(1),
+        format: (date) => format(date, 'h:mm a')
+    },
+    {
+        predicate: (duration) => duration.minutes,
+        interval: timeSecond.every(10),
+        format: (date) => format(date, 'h:mm:ss')
+    },
+    {
+        predicate: (duration) => duration.seconds,
+        interval: timeSecond.every(1),
+        format: (date) => format(date, 'h:mm:ss')
+    },
+    {
+        predicate: (duration) => true,
+        interval: timeMillisecond.every(10),
+        format: (date) => format(date, 'h:mm:ss.SSS')
+    }
+];
+export function getMajorTicks(start, end) {
+    const duration = getDuration(start, end);
+    for (var t of majorTicks) {
+        if (t.predicate(duration)) {
+            return t.interval;
+        }
+    }
+    fail(`Unable to locate major ticks for duration: ${duration}`);
+}
+export function formatMajorTick(date, rangeStart, rangeEnd) {
+    const duration = getDuration(rangeStart, rangeEnd);
+    for (var t of majorTicks) {
+        if (t.predicate(duration)) {
+            return t.format(date);
+        }
+    }
+    fail(`Unable to format major ticks for duration: ${duration}`);
+}
+export function getMinorTicks(start, end) {
+    const duration = getDuration(start, end);
+    for (var t of minorTicks) {
+        if (t.predicate(duration)) {
+            return t.interval;
+        }
+    }
+    fail(`Unable to locate minor ticks for duration: ${duration}`);
+}

package/.prettierrc

@@ -1,6 +0,0 @@
-{
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100
-}

package/src/app.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%svelte.head%
-	</head>
-	<body>
-		<div id="svelte">%svelte.body%</div>
-	</body>
-</html>

package/src/global.d.ts

@@ -1 +0,0 @@
-/// <reference types="@sveltejs/kit" />

package/src/routes/index.svelte

@@ -1,2 +0,0 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

package/svelte.config.js

@@ -1,15 +0,0 @@
-import preprocess from 'svelte-preprocess';
-
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-	// Consult https://github.com/sveltejs/svelte-preprocess
-	// for more information about preprocessors
-	preprocess: preprocess(),
-
-	kit: {
-		// hydrate the <div id="svelte"> element in src/app.html
-		target: '#svelte'
-	}
-};
-
-export default config;

package/tsconfig.json

@@ -1,31 +0,0 @@
-{
-	"compilerOptions": {
-		"moduleResolution": "node",
-		"module": "es2020",
-		"lib": ["es2020", "DOM"],
-		"target": "es2019",
-		/**
-			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
-			to enforce using \`import type\` instead of \`import\` for Types.
-			*/
-		"importsNotUsedAsValues": "error",
-		"isolatedModules": true,
-		"resolveJsonModule": true,
-		/**
-			To have warnings/errors of the Svelte compiler at the correct position,
-			enable source maps by default.
-			*/
-		"sourceMap": true,
-		"esModuleInterop": true,
-		"skipLibCheck": true,
-		"forceConsistentCasingInFileNames": true,
-		"baseUrl": ".",
-		"allowJs": true,
-		"checkJs": true,
-		"paths": {
-			"$lib": ["src/lib"],
-			"$lib/*": ["src/lib/*"]
-		}
-	},
-	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
-}