layerchart 0.6.1 → 0.6.4

package/components/ChartClipPath.svelte

@@ -8,6 +8,7 @@ const { width, height, padding } = getContext('LayerCake');
 	y={-$padding.top}
 	width={$width + $padding.left + $padding.right}
 	height={$height + $padding.top + $padding.bottom}
+	on:click
 	{...$$restProps}
 >
 	<slot />

package/components/ChartClipPath.svelte.d.ts

@@ -4,6 +4,8 @@ declare const __propDef: {
         [x: string]: any;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/components/CircleClipPath.svelte

@@ -15,7 +15,7 @@ export let tweened = undefined;
 </ClipPath>
 
 {#if $$slots.default}
-	<g style="clip-path: url(#{id})">
+	<g style="clip-path: url(#{id})" on:click>
 		<slot {id} />
 	</g>
 {/if}

package/components/CircleClipPath.svelte.d.ts

@@ -10,6 +10,8 @@ declare const __propDef: {
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/components/RectClipPath.svelte

@@ -16,7 +16,7 @@ export let tweened = undefined;
 </ClipPath>
 
 {#if $$slots.default}
-	<g style="clip-path: url(#{id})">
+	<g style="clip-path: url(#{id})" on:click>
 		<slot {id} />
 	</g>
 {/if}

package/components/RectClipPath.svelte.d.ts

@@ -11,6 +11,8 @@ declare const __propDef: {
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/components/Text2.svelte

@@ -0,0 +1,134 @@
+<script>import { getStringWidth } from '../utils/string';
+/*
+TODO:
+  - [ ] Handle styled text (use <slot /> to measure?)
+        - [ ] Simplify by using `alignment-baseline` / `dominant-baseline`, rework multiline or drop support, etc
+          - https://svelte.dev/repl/f12d3003313a43ba8a0be53e5786f1c7?version=3.44.3
+            - https://observablehq.com/@neocartocnrs/cheat-sheet-on-texts-in-svg
+
+Reference:
+- https://bl.ocks.org/mbostock/7555321
+- https://github.com/airbnb/visx/blob/master/packages/visx-text/src/Text.tsx
+  - https://airbnb.io/visx/text
+  - https://github.com/airbnb/visx/blob/master/packages/visx-demo/src/pages/text.tsx
+*/
+/** text value */
+export let value = 0;
+/** Maximum width to occupy (approximate as words are not split). */
+export let width = undefined;
+/** x position of the text. */
+export let x = 0;
+/** y position of the text. */
+export let y = 0;
+/** dx offset of the text. */
+export let dx = 0;
+/** dy offset of the text. */
+export let dy = 0;
+/** Desired "line height" of the text, implemented as y offsets. */
+export let lineHeight = '1em';
+/** Cap height of the text. */
+export let capHeight = '0.71em'; // Magic number from d3
+/** Whether to scale the fontSize to accommodate the specified width.  */
+export let scaleToFit = false;
+/** Horizontal text anchor. */
+export let textAnchor = 'start';
+/** Vertical text anchor. */
+export let verticalAnchor = 'end'; // default SVG behavior
+/** Rotational angle of the text. */
+export let rotate = undefined;
+let wordsByLines = [];
+let wordsWithWidth = [];
+let spaceWidth = 0;
+let style = undefined; // TODO: read from DOM?
+$: words = value ? value.toString().split(/(?:(?!\u00A0+)\s+)/) : [];
+$: wordsWithWidth = words.map((word) => ({
+    word,
+    width: getStringWidth(word, style) || 0
+}));
+$: spaceWidth = getStringWidth('\u00A0', style) || 0;
+$: wordsByLines = wordsWithWidth.reduce((result, item) => {
+    const currentLine = result[result.length - 1];
+    if (currentLine &&
+        (width == null || scaleToFit || (currentLine.width || 0) + item.width + spaceWidth < width)) {
+        // Word can be added to an existing line
+        currentLine.words.push(item.word);
+        currentLine.width = currentLine.width || 0;
+        currentLine.width += item.width + spaceWidth;
+    }
+    else {
+        // Add first word to line or word is too long to scaleToFit on existing line
+        const newLine = { words: [item.word], width: item.width };
+        result.push(newLine);
+    }
+    return result;
+}, []);
+$: lines = wordsByLines.length;
+/**
+ * Convert css value to pixel value (ex. 0.71em => 11.36)
+ */
+function getPixelValue(cssValue) {
+    // TODO: Properly measure pixel values using DOM (handle inherited font size, zoom, etc)
+    // console.log(cssValue);
+    const [match, value, units] = cssValue.match(/([\d.]+)(\D+)/);
+    // console.log({ value, units });
+    const number = Number(value);
+    switch (units) {
+        case 'px':
+            return number;
+        case 'em':
+        case 'rem':
+            return number * 16;
+        default:
+            return 0;
+    }
+}
+let startDy = 0;
+$: if (verticalAnchor === 'start') {
+    startDy = getPixelValue(capHeight);
+}
+else if (verticalAnchor === 'middle') {
+    startDy = ((lines - 1) / 2) * -getPixelValue(lineHeight) + getPixelValue(capHeight) / 2;
+}
+else {
+    startDy = (lines - 1) * -getPixelValue(lineHeight);
+}
+let scaleTransform = '';
+$: if (scaleToFit &&
+    lines > 0 &&
+    typeof x == 'number' &&
+    typeof y == 'number' &&
+    typeof width == 'number') {
+    const lineWidth = wordsByLines[0].width || 1;
+    const sx = width / lineWidth;
+    const sy = sx;
+    const originX = x - sx * x;
+    const originY = y - sy * y;
+    scaleTransform = `matrix(${sx}, 0, 0, ${sy}, ${originX}, ${originY})`;
+}
+else {
+    scaleTransform = '';
+}
+$: rotateTransform = rotate ? `rotate(${rotate}, ${x}, ${y})` : '';
+$: transform = `${scaleTransform} ${rotateTransform}`;
+function isValidXOrY(xOrY) {
+    return (
+    // number that is not NaN or Infinity
+    (typeof xOrY === 'number' && Number.isFinite(xOrY)) ||
+        // for percentage
+        typeof xOrY === 'string');
+}
+</script>
+
+<!-- overflow: visible;   allow contents to be shown outside element -->
+<!-- paint-order: stroke; support stroke outlining text  -->
+<svg x={dx} y={dy} style="overflow: visible; paint-order: stroke;">
+	{#if isValidXOrY(x) && isValidXOrY(y)}
+		<text {x} {y} {transform} text-anchor={textAnchor} {...$$restProps}>
+			{#each wordsByLines as line, index}
+				<tspan {x} dy={index === 0 ? startDy : lineHeight}>
+					{line.words.join(' ')}
+				</tspan>
+			{/each}
+		</text>
+	{/if}
+</svg>

package/components/Text2.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: string | number;
+        width?: number;
+        x?: string | number;
+        y?: string | number;
+        dx?: string | number;
+        dy?: string | number;
+        lineHeight?: string;
+        capHeight?: string;
+        scaleToFit?: boolean;
+        textAnchor?: 'start' | 'middle' | 'end' | 'inherit';
+        verticalAnchor?: 'start' | 'middle' | 'end' | 'inherit';
+        rotate?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type Text2Props = typeof __propDef.props;
+export declare type Text2Events = typeof __propDef.events;
+export declare type Text2Slots = typeof __propDef.slots;
+export default class Text2 extends SvelteComponentTyped<Text2Props, Text2Events, Text2Slots> {
+}
+export {};

package/components/Zoom.svelte

@@ -3,6 +3,7 @@ import { motionStore } from '../stores/motionStore';
 const { width, height, padding } = getContext('LayerCake');
 export let spring = undefined;
 export let tweened = undefined;
+export let disablePointer = false;
 let dragging = false;
 const translate = motionStore({ x: 0, y: 0 }, { spring, tweened });
 const scale = motionStore({ x: 1, y: 1 }, { spring, tweened });
@@ -44,6 +45,8 @@ export function zoomTo(newTranslate, newScale) {
     }
 }
 function handleMouseDown(e) {
+    if (disablePointer)
+        return;
     dragging = true;
     svgEl = e.target.ownerSVGElement;
     startPoint = localPoint(svgEl, e);
@@ -68,9 +71,13 @@ function handleMouseMove(e) {
     }, spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
 }
 function handleDoubleClick() {
+    if (disablePointer)
+        return;
     increase();
 }
 function handleWheel(e) {
+    if (disablePointer)
+        return;
     e.preventDefault();
     const scaleBy = -e.deltaY > 0 ? 1.1 : 0.9;
     // TODO: Update to match d3-zoom delta
@@ -107,16 +114,20 @@ $: newTranslate = {
 };
 </script>
 
-<rect
-	x={-$padding.left}
-	y={-$padding.top}
-	width={$width + $padding.left + $padding.right}
-	height={$height + $padding.top + $padding.bottom}
+<g
 	on:mousewheel={handleWheel}
 	on:mousedown={handleMouseDown}
 	on:dblclick={handleDoubleClick}
-	fill="transparent"
-/>
-<g transform="translate({newTranslate.x},{newTranslate.y}) scale({$scale.x},{$scale.y})">
-	<slot scale={$scale} />
+	on:click
+>
+	<rect
+		x={-$padding.left}
+		y={-$padding.top}
+		width={$width + $padding.left + $padding.right}
+		height={$height + $padding.top + $padding.bottom}
+		fill="transparent"
+	/>
+	<g transform="translate({newTranslate.x},{newTranslate.y}) scale({$scale.x},{$scale.y})">
+		<slot scale={$scale} />
+	</g>
 </g>

package/components/Zoom.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         spring?: boolean | Parameters<typeof motionStore>[1]['spring'];
         tweened?: boolean | Parameters<typeof motionStore>[1]['tweened'];
+        disablePointer?: boolean;
         reset?: () => void;
         increase?: () => void;
         decrease?: () => void;
@@ -17,6 +18,8 @@ declare const __propDef: {
         }) => void;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.6.1",
+  "version": "0.6.4",
   "devDependencies": {
     "@rollup/plugin-dsv": "^2.0.3",
     "@sveltejs/adapter-vercel": "^1.0.0-next.58",
@@ -80,6 +80,7 @@
     "./components/RectClipPath.svelte": "./components/RectClipPath.svelte",
     "./components/Sankey.svelte": "./components/Sankey.svelte",
     "./components/Text.svelte": "./components/Text.svelte",
+    "./components/Text2.svelte": "./components/Text2.svelte",
     "./components/Threshold.svelte": "./components/Threshold.svelte",
     "./components/Tooltip.svelte": "./components/Tooltip.svelte",
     "./components/Tree.svelte": "./components/Tree.svelte",

package/utils/index.d.ts

@@ -1 +1,5 @@
+export { graphFromCsv, graphFromHierarchy, graphFromNode } from './graph';
+export { findAncestor } from './hierarchy';
+export { degreesToRadians, radiansToDegrees } from './math';
+export { createStackData, stackOffsetSeparated } from './stack';
 export { getMajorTicks, getMinorTicks } from './ticks';

package/utils/index.js

@@ -1 +1,5 @@
+export { graphFromCsv, graphFromHierarchy, graphFromNode } from './graph';
+export { findAncestor } from './hierarchy';
+export { degreesToRadians, radiansToDegrees } from './math';
+export { createStackData, stackOffsetSeparated } from './stack';
 export { getMajorTicks, getMinorTicks } from './ticks';

package/utils/stack.d.ts

@@ -1,9 +1,11 @@
-import { stackOffsetNone } from 'd3-shape';
+import { stackOffsetNone, stackOrderNone } from 'd3-shape';
+declare type OrderType = typeof stackOrderNone;
 declare type OffsetType = typeof stackOffsetNone;
 export declare function createStackData(data: any[], options: {
     xKey: string;
     groupBy?: string;
     stackBy?: string;
+    order?: OrderType;
     offset?: OffsetType;
 }): any[];
 /**

package/utils/stack.js

@@ -10,7 +10,7 @@ export function createStackData(data, options) {
             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);
+            const stackData = stack().keys(stackKeys).order(options.order).offset(options.offset)(pivotData);
             //console.log({ pivotData, stackData })
             return stackData.flatMap((series) => {
                 //console.log({ series })
@@ -29,7 +29,7 @@ export function createStackData(data, options) {
         // 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 stackData = stack().keys(stackKeys).order(options.order).offset(options.offset)(pivotData);
         const result = stackData.flatMap((series) => {
             return series.flatMap((s) => {
                 return {