layerchart 0.0.1 → 0.0.5

package/docs/Link.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  LinkProps */
+/** @typedef {typeof __propDef.events}  LinkEvents */
+/** @typedef {typeof __propDef.slots}  LinkSlots */
+export default class Link extends SvelteComponentTyped<{
+    [x: string]: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type LinkProps = typeof __propDef.props;
+export type LinkEvents = typeof __propDef.events;
+export type LinkSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/docs/Preview.svelte

@@ -0,0 +1,23 @@
+<script >import Prism from 'prismjs';
+import 'prism-svelte';
+export let code = null;
+export let language = 'svelte';
+export let highlight = false;
+$: displayCode = highlight ? Prism.highlight(code, Prism.languages.svelte, 'svelte') : code;
+</script>
+
+<div class="border border-black/20 rounded bg-white">
+	<div class="p-4">
+		<slot />
+	</div>
+
+	{#if displayCode}
+		<pre
+			class="language-{language} rounded"
+			style="margin: 0">
+		<code class="language-{language}">
+			{@html displayCode}
+		</code>
+	</pre>
+	{/if}
+</div>

package/docs/Preview.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import 'prism-svelte';
+declare const __propDef: {
+    props: {
+        code?: any;
+        language?: string;
+        highlight?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type PreviewProps = typeof __propDef.props;
+export declare type PreviewEvents = typeof __propDef.events;
+export declare type PreviewSlots = typeof __propDef.slots;
+export default class Preview extends SvelteComponentTyped<PreviewProps, PreviewEvents, PreviewSlots> {
+}
+export {};

package/index.d.ts

@@ -0,0 +1,3 @@
+export { Svg, Html } from 'layercake';
+export * from './components';
+export * from './utils';

package/index.js

@@ -0,0 +1,3 @@
+export { Svg, Html } from 'layercake';
+export * from './components';
+export * from './utils';

package/package.json

@@ -1,27 +1,85 @@
 {
-	"name": "layerchart",
-	"author": "Sean Lynch <techniq35@gmail.com>",
-	"license": "MIT",
-	"repository": "techniq/layerchart",
-	"version": "0.0.1",
-	"scripts": {
-		"dev": "svelte-kit dev",
-		"build": "svelte-kit build",
-		"preview": "svelte-kit preview",
-		"check": "svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
-		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
-	},
-	"devDependencies": {
-		"@sveltejs/kit": "next",
-		"prettier": "~2.2.1",
-		"prettier-plugin-svelte": "^2.2.0",
-		"svelte": "^3.34.0",
-		"svelte-check": "^2.0.0",
-		"svelte-preprocess": "^4.0.0",
-		"tslib": "^2.0.0",
-		"typescript": "^4.0.0"
-	},
-	"type": "module"
-}
+  "name": "layerchart",
+  "author": "Sean Lynch <techniq35@gmail.com>",
+  "license": "MIT",
+  "repository": "techniq/layerchart",
+  "version": "0.0.5",
+  "devDependencies": {
+    "@sveltejs/adapter-static": "^1.0.0-next.21",
+    "@sveltejs/kit": "^1.0.0-next.201",
+    "@types/d3-array": "^3.0.2",
+    "@types/d3-scale": "^4.0.2",
+    "@types/d3-shape": "^3.0.2",
+    "@types/lodash-es": "^4.17.5",
+    "autoprefixer": "^10.4.0",
+    "mdsvex": "^0.9.8",
+    "prettier": "^2.5.0",
+    "prettier-plugin-svelte": "^2.5.0",
+    "prism-themes": "^1.9.0",
+    "svelte": "^3.44.2",
+    "svelte-check": "^2.2.10",
+    "svelte-preprocess": "^4.9.4",
+    "svelte2tsx": "^0.4.10",
+    "tailwindcss": "^2.2.19",
+    "tailwindcss-elevation": "^1.0.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2",
+    "unist-util-visit": "^4.1.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "@mdi/js": "^6.5.95",
+    "d3-array": "^3.1.1",
+    "d3-interpolate-path": "^2.2.3",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.0.1",
+    "date-fns": "^2.26.0",
+    "layercake": "^5.0.1",
+    "lodash-es": "^4.17.21",
+    "svelte-ux": "^0.0.105"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    "./components/Arc.svelte": "./components/Arc.svelte",
+    "./components/Area.svelte": "./components/Area.svelte",
+    "./components/AreaStack.svelte": "./components/AreaStack.svelte",
+    "./components/AxisX.svelte": "./components/AxisX.svelte",
+    "./components/AxisY.svelte": "./components/AxisY.svelte",
+    "./components/Bars.svelte": "./components/Bars.svelte",
+    "./components/Baseline.svelte": "./components/Baseline.svelte",
+    "./components/Chart.svelte": "./components/Chart.svelte",
+    "./components/Circle.svelte": "./components/Circle.svelte",
+    "./components/ConnectedPoints.svelte": "./components/ConnectedPoints.svelte",
+    "./components/Group.svelte": "./components/Group.svelte",
+    "./components/HighlightLine.svelte": "./components/HighlightLine.svelte",
+    "./components/HighlightRect.svelte": "./components/HighlightRect.svelte",
+    "./components/Labels.svelte": "./components/Labels.svelte",
+    "./components/Line.svelte": "./components/Line.svelte",
+    "./components/LinearGradient.svelte": "./components/LinearGradient.svelte",
+    "./components/Path.svelte": "./components/Path.svelte",
+    "./components/Points.svelte": "./components/Points.svelte",
+    "./components/Rect.svelte": "./components/Rect.svelte",
+    "./components/Text.svelte": "./components/Text.svelte",
+    "./components/Threshold.svelte": "./components/Threshold.svelte",
+    "./components/Tooltip.svelte": "./components/Tooltip.svelte",
+    "./components": "./components/index.js",
+    "./docs/Blockquote.svelte": "./docs/Blockquote.svelte",
+    "./docs/Code.svelte": "./docs/Code.svelte",
+    "./docs/Layout.svelte": "./docs/Layout.svelte",
+    "./docs/Link.svelte": "./docs/Link.svelte",
+    "./docs/Preview.svelte": "./docs/Preview.svelte",
+    ".": "./index.js",
+    "./stores/motionStore": "./stores/motionStore.js",
+    "./utils/event": "./utils/event.js",
+    "./utils/genData": "./utils/genData.js",
+    "./utils": "./utils/index.js",
+    "./utils/math": "./utils/math.js",
+    "./utils/path": "./utils/path.js",
+    "./utils/pivot": "./utils/pivot.js",
+    "./utils/scales": "./utils/scales.js",
+    "./utils/stack": "./utils/stack.js",
+    "./utils/string": "./utils/string.js",
+    "./utils/ticks": "./utils/ticks.js"
+  },
+  "svelte": "./index.js"
+}

package/stores/motionStore.d.ts

@@ -0,0 +1,8 @@
+import { spring, tweened } from 'svelte/motion';
+/**
+ * Convenient wrapper to get motion store based on properties, or fall back to basic writable() store
+ */
+export declare function getMotionStore(value: any, options: {
+    spring?: boolean | Parameters<typeof spring>[1];
+    tweened?: boolean | Parameters<typeof tweened>[1];
+}): import("svelte/motion").Tweened<unknown> | import("svelte/motion").Spring<any> | import("svelte/store").Writable<any>;

package/stores/motionStore.js

@@ -0,0 +1,16 @@
+import { writable } from 'svelte/store';
+import { spring, tweened } from 'svelte/motion';
+/**
+ * Convenient wrapper to get motion store based on properties, or fall back to basic writable() store
+ */
+export function getMotionStore(value, options) {
+    if (options.spring) {
+        return spring(value, options.spring === true ? undefined : options.spring);
+    }
+    else if (options.tweened) {
+        return tweened(value, options.tweened === true ? undefined : options.tweened);
+    }
+    else {
+        return writable(value);
+    }
+}

package/utils/event.d.ts

@@ -0,0 +1,4 @@
+export declare function localPoint(node: Element, event: MouseEvent | TouchEvent): {
+    x: number;
+    y: number;
+};

package/utils/event.js

@@ -0,0 +1,42 @@
+import { isSVGElement, isSVGGraphicsElement, isSVGSVGElement, isTouchEvent } from 'svelte-ux/types/typeGuards';
+// See: https://github.com/airbnb/visx/blob/master/packages/visx-event/src/localPointGeneric.ts
+export function localPoint(node, event) {
+    if (!node || !event)
+        return null;
+    const coords = getPointFromEvent(event);
+    // find top-most SVG
+    const svg = isSVGElement(node) ? node.ownerSVGElement : node;
+    const screenCTM = isSVGGraphicsElement(svg) ? svg.getScreenCTM() : null;
+    if (isSVGSVGElement(svg) && screenCTM) {
+        let point = svg.createSVGPoint();
+        point.x = coords.x;
+        point.y = coords.y;
+        point = point.matrixTransform(screenCTM.inverse());
+        return {
+            x: point.x,
+            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
+    };
+}
+function getPointFromEvent(event) {
+    if (!event)
+        return { x: 0, y: 0 };
+    if (isTouchEvent(event)) {
+        return event.changedTouches.length > 0
+            ? {
+                x: event.changedTouches[0].clientX,
+                y: event.changedTouches[0].clientY
+            }
+            : { x: 0, y: 0 };
+    }
+    return {
+        x: event.clientX,
+        y: event.clientY
+    };
+}

package/utils/genData.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Get random number between min (inclusive) and max (exclusive)
+ *   see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_number_between_0_inclusive_and_1_exclusive
+ */
+export declare function getRandomNumber(min: number, max: number): number;
+/**
+ * Get random integer between min (inclusive) and max (inclusive by default)
+ *   see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values_inclusive
+ */
+export declare function getRandomInteger(min: number, max: number, includeMax?: boolean): number;
+export declare function createDateSeries(options: {
+    count?: number;
+    min: number;
+    max: number;
+    keys: Array<string>;
+    value: 'number' | 'integer';
+}): {
+    date: Date;
+}[];
+export declare const wideData: {
+    year: string;
+    apples: number;
+    bananas: number;
+    cherries: number;
+    dates: number;
+}[];
+export declare const longData: {
+    year: string;
+    basket: number;
+    fruit: string;
+    value: number;
+}[];

package/utils/genData.js

@@ -0,0 +1,59 @@
+import { subDays } from 'date-fns';
+/**
+ * Get random number between min (inclusive) and max (exclusive)
+ *   see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_number_between_0_inclusive_and_1_exclusive
+ */
+export function getRandomNumber(min, max) {
+    return Math.random() * (max - min) + min;
+}
+/**
+ * Get random integer between min (inclusive) and max (inclusive by default)
+ *   see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values_inclusive
+ */
+export function getRandomInteger(min, max, includeMax = true) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + (includeMax ? 1 : 0)) + min);
+}
+export function createDateSeries(options) {
+    const now = new Date();
+    const count = options.count ?? 10;
+    const min = options.min;
+    const max = options.max;
+    const keys = options.keys ?? ['value'];
+    return Array.from({ length: count }).map((_, i) => {
+        return {
+            date: subDays(now, count - i - 1),
+            ...Object.fromEntries(keys.map((key) => {
+                return [
+                    key,
+                    options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max)
+                ];
+            }))
+        };
+    });
+}
+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 }
+];
+export const longData = [
+    { year: '2019', basket: 1, fruit: 'apples', value: 3840 },
+    { year: '2019', basket: 1, fruit: 'bananas', value: 1920 },
+    { year: '2019', basket: 2, fruit: 'cherries', value: 960 },
+    { year: '2019', basket: 2, fruit: 'dates', value: 400 },
+    { year: '2018', basket: 1, fruit: 'apples', value: 1600 },
+    { year: '2018', basket: 1, fruit: 'bananas', value: 1440 },
+    { year: '2018', basket: 2, fruit: 'cherries', value: 960 },
+    { year: '2018', basket: 2, fruit: 'dates', value: 400 },
+    { year: '2017', basket: 1, fruit: 'apples', value: 820 },
+    { year: '2017', basket: 1, fruit: 'bananas', value: 1000 },
+    { year: '2017', basket: 2, fruit: 'cherries', value: 640 },
+    { year: '2017', basket: 2, fruit: 'dates', value: 400 },
+    { 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 }
+];

package/utils/index.d.ts

@@ -0,0 +1 @@
+export { getMajorTicks, getMinorTicks } from './ticks';

package/utils/index.js

@@ -0,0 +1 @@
+export { getMajorTicks, getMinorTicks } from './ticks';

package/utils/math.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Convert degrees to radians
+ */
+export declare function degreesToRadians(degrees: number): number;

package/utils/math.js

@@ -0,0 +1,6 @@
+/**
+ * Convert degrees to radians
+ */
+export function degreesToRadians(degrees) {
+    return (degrees * Math.PI) / 180;
+}

package/utils/path.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Convert easing into path data with number of points
+ * see: https://svelte.dev/examples#easing
+ */
+export declare function getEasingPath(easing: (t: number) => number, count?: number): string;

package/utils/path.js

@@ -0,0 +1,14 @@
+/**
+ * Convert easing into path data with number of points
+ * see: https://svelte.dev/examples#easing
+ */
+export function getEasingPath(easing, count = 1000) {
+    let pathData = `M0 ${count}`;
+    for (let i = 1; i <= count; i++) {
+        pathData += `
+			L${(i / count) * count}
+			${count - easing(i / count) * count}
+		`;
+    }
+    return pathData;
+}

package/utils/pivot.d.ts

@@ -0,0 +1,14 @@
+export declare function getAccessor(key: any): any;
+/**
+ * Pivot longer (columns to rows)
+ *  - see: https://observablehq.com/d/3ea8d446f5ba96fe
+ *  - see also: https://observablehq.com/d/ac2a320cf2b0adc4 as generator
+ */
+export declare function pivotLonger(data: any, columns: any, name: any, value: any): any;
+/**
+ * Pivot wider (rows to columns)
+ *  - see: https://github.com/d3/d3-array/issues/142#issuecomment-761861983
+ */
+export declare function pivotWider(data: any, column: any, name: any, value: any): any[];
+export declare function first(items: any): any;
+export declare function last(items: any): any;

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 = Object.keys(data[0]).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/stack.d.ts

@@ -0,0 +1,14 @@
+import { stackOffsetNone } from 'd3-shape';
+declare type OffsetType = typeof stackOffsetNone;
+export declare function createStackData(data: any[], options: {
+    xKey: string;
+    groupBy?: string;
+    stackBy?: string;
+    offset?: OffsetType;
+}): any[];
+/**
+ * Function to offset each layer by the maximum of the previous layer
+ *   - see: https://observablehq.com/@mkfreeman/separated-bar-chart
+ */
+export declare function stackOffsetSeparated(series: any, order: any): void;
+export {};

package/utils/stack.js

@@ -0,0 +1,69 @@
+import { flatGroup, max, sum } from 'd3-array';
+import { stack } from 'd3-shape';
+import { pivotWider } from './pivot';
+export function createStackData(data, options) {
+    if (options.groupBy) {
+        // Group then Stack (if needed)
+        const groupedData = flatGroup(data, (d) => d[options.xKey], (d) => d[options.groupBy]);
+        const result = groupedData.flatMap((d, i) => {
+            const groupKeys = d.slice(0, -1); // all but last item
+            const itemData = d.slice(-1)[0]; // last item
+            const pivotData = pivotWider(itemData, options.xKey, options.stackBy, 'value');
+            const stackKeys = [...new Set(itemData.map((d) => d[options.stackBy]))];
+            const stackData = stack().keys(stackKeys).offset(options.offset)(pivotData);
+            //console.log({ pivotData, stackData })
+            return stackData.flatMap((series) => {
+                //console.log({ series })
+                return series.flatMap((s) => {
+                    return {
+                        ...itemData[0],
+                        keys: options.stackBy ? [...groupKeys, series.key] : groupKeys,
+                        values: options.stackBy ? [s[0], s[1]] : [0, sum(itemData, (d) => d.value)]
+                    };
+                });
+            });
+        });
+        return result;
+    }
+    else if (options.stackBy) {
+        // Stack only
+        const pivotData = pivotWider(data, options.xKey, options.stackBy, 'value');
+        const stackKeys = [...new Set(data.map((d) => d[options.stackBy]))];
+        const stackData = stack().keys(stackKeys).offset(options.offset)(pivotData);
+        const result = stackData.flatMap((series) => {
+            return series.flatMap((s) => {
+                return {
+                    ...s.data,
+                    keys: [s.data[options.xKey], series.key],
+                    values: [s[0], s[1]]
+                };
+            });
+        });
+        return result;
+    }
+    else {
+        // TODO: Do anything if no group or stack? Convert to { ...d, keys: [...}, values: [...] ]}?
+        return data;
+    }
+}
+/**
+ * Function to offset each layer by the maximum of the previous layer
+ *   - see: https://observablehq.com/@mkfreeman/separated-bar-chart
+ */
+// TODO: Try to find way to support separated with createStackData() (which has isolated stacked per group)
+export function stackOffsetSeparated(series, order) {
+    const gap = 200; // TODO: Determine way to pass in as option (curry?)
+    if (!((n = series.length) > 1))
+        return;
+    // Standard series
+    for (var i = 1, s0, s1 = series[order[0]], n, m = s1.length; i < n; ++i) {
+        (s0 = s1), (s1 = series[order[i]]);
+        let base = max(s0, (d) => d[1]) + gap; // here is where you calculate the maximum of the previous layer
+        for (var j = 0; j < m; ++j) {
+            // Set the height based on the data values, shifted up by the previous layer
+            let diff = s1[j][1] - s1[j][0];
+            s1[j][0] = base;
+            s1[j][1] = base + diff;
+        }
+    }
+}

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;