layerchart 0.9.1 → 0.9.3

package/components/Bars.svelte

@@ -31,9 +31,15 @@ export let spring = undefined;
 export let tweened = undefined;
 // See: https://svelte.dev/repl/7000c5ce05b84cd98ccbfb2768b4be3d?version=3.38.3
 export let groupBy = undefined;
+export let groupPaddingInner = 0.2;
+export let groupPaddingOuter = 0;
 // 	$: console.log({ $data, $flatData, groupBy, stackBy })
 $: groupKeys = unique($flatData.map((d) => d[groupBy]));
-$: x1Scale = scaleBand().domain(groupKeys).range([0, $xScale.bandwidth()]).paddingInner(0.2);
+$: x1Scale = scaleBand()
+    .domain(groupKeys)
+    .range([0, $xScale.bandwidth()])
+    .paddingInner(groupPaddingInner)
+    .paddingOuter(groupPaddingOuter);
 $: getDimensions = (item) => {
     // console.log({ item, y: $y(item) });
     const x = $xGet(item) + (groupBy ? x1Scale(item[groupBy]) : 0) - widthOffset / 2;

package/components/Bars.svelte.d.ts

@@ -24,6 +24,8 @@ declare const __propDef: {
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         groupBy?: string;
+        groupPaddingInner?: number;
+        groupPaddingOuter?: number;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Labels.svelte

@@ -10,9 +10,11 @@ import Text from './Text.svelte';
 import { formatNumberAsStyle } from 'svelte-ux/utils/number';
 import { isScaleBand } from '../utils/scales';
 import { greatestAbs, unique } from 'svelte-ux/utils/array';
+import { format as formatValue } from 'svelte-ux/utils/format';
 const { flatData, xGet, yRange, xScale, yScale, x, y, custom } = getContext('LayerCake');
 export let orientation = 'auto';
 export let significantDigits = 3;
+export let format = undefined;
 export let formatStyle = null;
 export let overlap = false;
 $: yBaseline = $custom?.yBaseline ?? 0;
@@ -74,10 +76,19 @@ $: getDimensions = (item) => {
 };
 $: getValue = (item) => {
     const value = $y(item);
-    const labelValue = Array.isArray(value) ? greatestAbs(value) : value;
-    return labelValue != null
-        ? formatNumberAsStyle(labelValue + yBaseline, formatStyle, 0, significantDigits) ?? ''
-        : '';
+    const labelValue = (Array.isArray(value) ? greatestAbs(value) : value) + yBaseline;
+    let formattedValue = labelValue;
+    if (labelValue != null) {
+        if (format) {
+            // Apply more versatile formatting first
+            formattedValue = formatValue(labelValue, format ?? $yScale.tickFormat?.());
+        }
+        else {
+            // Deprecated format
+            formattedValue = formatNumberAsStyle(labelValue, formatStyle, 0, significantDigits);
+        }
+    }
+    return formattedValue ?? '';
 };
 </script>
 

package/components/Labels.svelte.d.ts

@@ -1,10 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
 import { FormatNumberStyle } from 'svelte-ux/utils/number';
+import { FormatType } from 'svelte-ux/utils/format';
 declare const __propDef: {
     props: {
         [x: string]: any;
         orientation?: 'outside' | 'inside' | 'auto';
         significantDigits?: number;
+        format?: FormatType;
         formatStyle?: FormatNumberStyle;
         overlap?: boolean;
         groupBy?: string;

package/components/Legend.svelte

@@ -1,4 +1,5 @@
 <script>import { getContext } from 'svelte';
+export let formatLabel = (label) => label;
 const { rScale } = getContext('LayerCake');
 const domain = $rScale.domain();
 const range = $rScale.range();
@@ -11,7 +12,7 @@ export let items = domain.map((d, i) => ({ label: d, color: range[i] }));
 		{#each items as { label, color }}
 			<div class="flex items-center gap-1">
 				<div class="h-4 w-4 rounded-full" style:background-color={color} />
-				{label}
+				{formatLabel(label)}
 			</div>
 		{/each}
 	</div>

package/components/Legend.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        formatLabel?: (label: string) => string;
         items?: any;
     };
     events: {

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "devDependencies": {
     "@rollup/plugin-dsv": "^2.0.3",
     "@sveltejs/adapter-vercel": "^1.0.0-next.59",
@@ -23,6 +23,7 @@
     "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.7.0",
     "prism-themes": "^1.9.0",
+    "rehype-slug": "^5.0.1",
     "svelte": "^3.48.0",
     "svelte-check": "^2.7.2",
     "svelte-preprocess": "^4.10.7",