layerchart 0.44.0 → 0.51.0

package/dist/utils/stack.test.d.ts

@@ -0,0 +1,6 @@
+export declare const testData: {
+    year: number;
+    basket: number;
+    fruit: string;
+    value: number;
+}[];

package/dist/utils/stack.test.js

@@ -0,0 +1,136 @@
+import { describe, it, expect } from 'vitest';
+import { groupStackData } from './stack.js';
+import { group } from 'd3-array';
+export const testData = [
+    { 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 },
+];
+const testDataByYear = group(testData, (d) => d.year);
+describe('groupStackData', () => {
+    it('xKey only', () => {
+        const actual = groupStackData(testData, { xKey: 'year' });
+        expect(actual.length).toEqual(4);
+        expect(actual[0]).toEqual({
+            year: 2019,
+            keys: { year: 2019 },
+            value: 7120,
+            values: [0, 7120],
+            data: testDataByYear.get(2019),
+        });
+    });
+    it('xKey with groupBy (unique)', () => {
+        const xKey = 'year';
+        const groupBy = 'fruit';
+        const actual = groupStackData(testData, { xKey, groupBy });
+        // 4 years, 4 fruits each (each a separate bar)
+        expect(actual.length).toEqual(16);
+        expect(actual[0]).toEqual({
+            year: 2019,
+            fruit: 'apples',
+            value: 3840,
+            keys: { year: 2019, fruit: 'apples' },
+            values: [0, 3840],
+            data: testDataByYear.get(2019),
+        });
+        expect(actual[1]).toEqual({
+            year: 2019,
+            fruit: 'bananas',
+            value: 1920,
+            keys: { year: 2019, fruit: 'bananas' },
+            values: [0, 1920],
+            data: testDataByYear.get(2019),
+        });
+    });
+    it('xKey with groupBy (grouped)', () => {
+        const xKey = 'year';
+        const groupBy = 'basket';
+        const actual = groupStackData(testData, { xKey, groupBy });
+        // 4 years, 2 buckets each
+        expect(actual.length).toEqual(8);
+        expect(actual[0]).toEqual({
+            year: 2019,
+            basket: 1,
+            value: 5760,
+            keys: { year: 2019, basket: 1 },
+            values: [0, 5760],
+            data: testDataByYear.get(2019),
+        });
+        expect(actual[1]).toEqual({
+            year: 2019,
+            basket: 2,
+            value: 1360,
+            keys: { year: 2019, basket: 2 },
+            values: [0, 1360],
+            data: testDataByYear.get(2019),
+        });
+        expect(actual[2]).toEqual({
+            year: 2018,
+            basket: 1,
+            value: 3040,
+            keys: { year: 2018, basket: 1 },
+            values: [0, 3040],
+            data: testDataByYear.get(2018),
+        });
+    });
+    it('xKey with stackBy', () => {
+        const xKey = 'year';
+        const stackBy = 'fruit';
+        const actual = groupStackData(testData, { xKey, stackBy });
+        // 4 years, 4 fruits each (each a separate bar)
+        expect(actual.length).toEqual(16);
+        expect(actual[0]).toEqual({
+            year: 2019,
+            fruit: 'apples',
+            value: 3840,
+            keys: { year: 2019, fruit: 'apples' },
+            values: [0, 3840],
+            data: testDataByYear.get(2019),
+        });
+        expect(actual[1]).toEqual({
+            year: 2018,
+            fruit: 'apples',
+            value: 1600,
+            keys: { year: 2018, fruit: 'apples' },
+            values: [0, 1600],
+            data: testDataByYear.get(2018),
+        });
+        expect(actual[2]).toEqual({
+            year: 2017,
+            fruit: 'apples',
+            value: 820,
+            keys: { year: 2017, fruit: 'apples' },
+            values: [0, 820],
+            data: testDataByYear.get(2017),
+        });
+        expect(actual[3]).toEqual({
+            year: 2016,
+            fruit: 'apples',
+            value: 820,
+            keys: { year: 2016, fruit: 'apples' },
+            values: [0, 820],
+            data: testDataByYear.get(2016),
+        });
+        expect(actual[4]).toEqual({
+            year: 2019,
+            fruit: 'bananas',
+            value: 1920,
+            keys: { year: 2019, fruit: 'bananas' },
+            values: [3840, 5760],
+            data: testDataByYear.get(2019),
+        });
+    });
+});

package/dist/utils/string.js

@@ -25,3 +25,44 @@ function _getStringWidth(str, style) {
     }
 }
 export const getStringWidth = memoize(_getStringWidth, (str, style) => `${str}_${JSON.stringify(style)}`);
+export function rasterizeText(text, options = {}) {
+    const fontSize = options.fontSize ?? '200px';
+    const fontWeight = options.fontWeight ?? 600;
+    const fontFamily = options.fontFamily ?? 'sans-serif';
+    const textAlign = options.textAlign ?? 'center';
+    const textBaseline = options.textBaseline ?? 'middle';
+    const spacing = options.spacing ?? 20;
+    const width = options.width ?? 960;
+    const height = options.height ?? 500;
+    const x = options.x ?? width / 2;
+    const y = options.y ?? height / 2;
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext('2d');
+    context.font = [fontWeight, fontSize, fontFamily].join(' ');
+    context.textAlign = textAlign;
+    context.textBaseline = textBaseline;
+    const dx = context.measureText(text).width;
+    const dy = +fontSize.replace('px', '');
+    const bBox = [
+        [x - dx / 2, y - dy / 2],
+        [x + dx / 2, y + dy / 2],
+    ];
+    context.fillText(text, x, y);
+    var imageData = context.getImageData(0, 0, width, height);
+    var pixels = [];
+    for (let x = bBox[0][0]; x < bBox[1][0]; x += spacing) {
+        for (let y = bBox[0][1]; y < bBox[1][1]; y += spacing) {
+            const pixel = getPixel(imageData, x, y);
+            if (pixel[3] != 0)
+                pixels.push([x, y]);
+        }
+    }
+    return pixels;
+}
+function getPixel(imageData, x, y) {
+    var i = 4 * (Math.floor(x) + Math.floor(y) * imageData.width);
+    var d = imageData.data;
+    return [d[i], d[i + 1], d[i + 2], d[i + 3]];
+}

package/dist/utils/ticks.js

@@ -1,7 +1,6 @@
 import { timeYear, timeMonth, timeWeek, timeDay, timeHour, timeMinute, timeSecond, timeMillisecond, } from 'd3-time';
 import { format } from 'date-fns';
-import { formatDate, PeriodType, getDuration } from 'svelte-ux';
-import { fail } from 'svelte-ux';
+import { formatDate, PeriodType, getDuration, fail } from '@layerstack/utils';
 // TODO: Use PeriodType along with Duration to format (and possibly select intervals)
 const majorTicks = [
     {

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.44.0",
+  "version": "0.51.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.7",
     "@mdi/js": "^7.4.47",
@@ -54,6 +54,7 @@
     "svelte-check": "^3.8.5",
     "svelte-json-tree": "^2.2.0",
     "svelte-preprocess": "^6.0.2",
+    "svelte-ux": "^0.74.4",
     "svelte2tsx": "^0.7.15",
     "tailwindcss": "^3.4.10",
     "topojson-client": "^3.1.0",
@@ -62,10 +63,15 @@
     "typescript": "^5.5.4",
     "unist-util-visit": "^5.0.0",
     "us-atlas": "^3.0.1",
-    "vite": "^5.4.0"
+    "vite": "^5.4.0",
+    "vitest": "^2.0.5"
   },
   "type": "module",
   "dependencies": {
+    "@layerstack/svelte-actions": "^0.0.4",
+    "@layerstack/svelte-stores": "^0.0.4",
+    "@layerstack/tailwind": "^0.0.6",
+    "@layerstack/utils": "^0.0.4",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",
@@ -90,7 +96,6 @@
     "lodash-es": "^4.17.21",
     "posthog-js": "^1.155.4",
     "shapefile": "^0.6.6",
-    "svelte-ux": "^0.74.4",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {
@@ -118,6 +123,7 @@
     "package": "svelte-package",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "test:unit": "TZ=UTC-5 vitest",
     "lint": "prettier --check .",
     "format": "prettier --write ."
   }

package/dist/components/AreaStack.svelte

@@ -1,47 +0,0 @@
-<script>import {} from 'svelte';
-import { chartContext } from './ChartContext.svelte';
-import Area from './Area.svelte';
-import Spline from './Spline.svelte';
-import { chartDataArray } from '../utils/common.js';
-const { data, rGet } = chartContext();
-export let curve = undefined;
-export let defined = undefined;
-export let opacity = 0.3;
-export let line = false;
-export let tweened = undefined;
-// Render in reverse order so bottom stacks are rendered last (and stack above the upper stacks).  Fixes when upper stack has 0 value
-$: lineData = [...chartDataArray($data)].reverse();
-</script>
-
-{#if line}
-  <g class="line-group">
-    {#each lineData as seriesData}
-      <Spline
-        data={seriesData}
-        y={(d) => d[1]}
-        stroke={$rGet(seriesData)}
-        {curve}
-        {defined}
-        {tweened}
-        {...line}
-      />
-    {/each}
-  </g>
-{/if}
-
-<slot data={$data}>
-  <g class="area-group">
-    {#each chartDataArray($data) as seriesData}
-      <Area
-        data={seriesData}
-        y0={(d) => d[0]}
-        y1={(d) => d[1]}
-        fill={$rGet(seriesData)}
-        {curve}
-        {defined}
-        {opacity}
-        {tweened}
-      />
-    {/each}
-  </g>
-</slot>

package/dist/components/AreaStack.svelte.d.ts

@@ -1,28 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import { type ComponentProps } from 'svelte';
-import type { tweened as tweenedStore } from 'svelte/motion';
-import type { CurveFactory } from 'd3-shape';
-import Spline from './Spline.svelte';
-declare const __propDef: {
-    props: {
-        curve?: CurveFactory | undefined;
-        defined?: ComponentProps<Spline>["defined"] | undefined;
-        opacity?: number;
-        line?: boolean | any;
-        tweened?: boolean | Parameters<typeof tweenedStore>[1];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            data: any;
-        };
-    };
-};
-export type AreaStackProps = typeof __propDef.props;
-export type AreaStackEvents = typeof __propDef.events;
-export type AreaStackSlots = typeof __propDef.slots;
-export default class AreaStack extends SvelteComponentTyped<AreaStackProps, AreaStackEvents, AreaStackSlots> {
-}
-export {};

package/dist/components/TooltipItem.svelte

@@ -1,26 +0,0 @@
-<script>import { cls, format as formatUtil } from 'svelte-ux';
-export let label;
-/** Value to be formatted and displayed.  Can also be passed as default slot */
-export let value = undefined;
-export let format = undefined;
-export let valueAlign = 'left';
-export let classes = {};
-</script>
-
-<div class={cls('label', classes.label)}>
-  <slot name="label">{label}:</slot>
-</div>
-
-<div
-  class={cls(
-    'value',
-    {
-      'text-right': valueAlign === 'right',
-      'text-center': valueAlign === 'center',
-    },
-    classes.value,
-    $$props.class
-  )}
->
-  <slot>{format ? formatUtil(value, format) : value}</slot>
-</div>

package/dist/components/TooltipSeparator.svelte

@@ -1,4 +0,0 @@
-<script>import { cls } from 'svelte-ux';
-</script>
-
-<div class={cls('rounded bg-white/50 my-1 col-span-full h-px', $$props.class)} />