layerchart 0.9.2 → 0.10.0

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,21 +76,29 @@ $: 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>
 
 <g class="label-group">
 	{#each $flatData as item, index}
 		<Text
-			class="group-rect"
 			textAnchor="middle"
 			verticalAnchor="middle"
 			value={getValue(item)}
-			style="font-size: 0.7em; stroke: white; stroke-width: 2px;"
+			class="group-rect text-xs stroke-white [stroke-width: 2px]"
 			{...getDimensions(item)}
 			{...$$restProps}
 		/>

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,10 +1,9 @@
 <script>import { getContext } from 'svelte';
 export let formatLabel = (label) => label;
-const { rScale } = getContext('LayerCake');
-const domain = $rScale.domain();
-const range = $rScale.range();
+const { rScale, rDomain, rRange } = getContext('LayerCake');
+$: console.log({ $rDomain });
 // zip values together
-export let items = domain.map((d, i) => ({ label: d, color: range[i] }));
+export let items = $rDomain.map((d, i) => ({ label: d, color: $rRange[i] }));
 </script>
 
 <slot {items} scale={$rScale}>

package/components/TooltipItem.svelte

@@ -1,6 +1,6 @@
 <script>import clsx from 'clsx';
 export let label;
-export let value;
+export let value = undefined; // Can be pass as slot
 export let valueAlign = 'left';
 </script>
 

package/components/TooltipItem.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         label: any;
-        value: any;
+        value?: any;
         valueAlign?: 'left' | 'right' | 'center';
     };
     events: {

package/package.json

@@ -3,12 +3,12 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "devDependencies": {
     "@rollup/plugin-dsv": "^2.0.3",
     "@sveltejs/adapter-vercel": "^1.0.0-next.59",
     "@sveltejs/kit": "^1.0.0-next.354",
-    "@tailwindcss/typography": "^0.5.2",
+    "@tailwindcss/typography": "^0.5.7",
     "@types/d3-array": "^3.0.3",
     "@types/d3-delaunay": "^6.0.1",
     "@types/d3-dsv": "^3.0.0",
@@ -18,39 +18,39 @@
     "@types/d3-scale": "^4.0.2",
     "@types/d3-shape": "^3.1.0",
     "@types/lodash-es": "^4.17.6",
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.12",
     "mdsvex": "^0.10.6",
     "prettier": "^2.7.1",
-    "prettier-plugin-svelte": "^2.7.0",
+    "prettier-plugin-svelte": "^2.7.1",
     "prism-themes": "^1.9.0",
     "rehype-slug": "^5.0.1",
-    "svelte": "^3.48.0",
-    "svelte-check": "^2.7.2",
+    "svelte": "^3.50.1",
+    "svelte-check": "^2.9.1",
     "svelte-preprocess": "^4.10.7",
-    "svelte2tsx": "^0.5.10",
-    "tailwindcss": "^3.1.4",
+    "svelte2tsx": "^0.5.19",
+    "tailwindcss": "^3.1.8",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.4",
-    "unist-util-visit": "^4.1.0",
+    "typescript": "^4.8.4",
+    "unist-util-visit": "^4.1.1",
     "vite-plugin-sveld": "^1.0.3"
   },
   "type": "module",
   "dependencies": {
-    "@mdi/js": "^6.7.96",
-    "d3-array": "^3.1.6",
+    "@mdi/js": "^7.0.96",
+    "d3-array": "^3.2.0",
     "d3-delaunay": "^6.0.2",
     "d3-dsv": "^3.0.1",
     "d3-hierarchy": "^3.1.2",
-    "d3-interpolate-path": "^2.2.3",
+    "d3-interpolate-path": "^2.3.0",
     "d3-quadtree": "^3.0.1",
     "d3-sankey": "^0.12.3",
     "d3-scale": "^4.0.2",
     "d3-scale-chromatic": "^3.0.0",
     "d3-shape": "^3.1.0",
-    "date-fns": "^2.28.0",
-    "layercake": "^6.1.0",
+    "date-fns": "^2.29.3",
+    "layercake": "^7.1.0",
     "lodash-es": "^4.17.21",
-    "svelte-ux": "^0.8.8"
+    "svelte-ux": "^0.9.2"
   },
   "exports": {
     "./package.json": "./package.json",