layerchart 0.0.1 → 0.0.5

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"]
-}