layerchart 0.30.0 → 0.30.2

package/dist/components/Area.svelte

@@ -1,5 +1,5 @@
 <script>import { getContext } from 'svelte';
-import { area as d3Area } from 'd3-shape';
+import { area as d3Area, areaRadial } from 'd3-shape';
 import { max } from 'd3-array';
 import { interpolatePath } from 'd3-interpolate-path';
 import { cls } from 'svelte-ux';
@@ -10,6 +10,8 @@ const { data: contextData, xGet, yGet, yRange } = getContext('LayerCake');
 export let data = undefined;
 /** Pass `<path d={...} />` explicitly instead of calculating from data / context */
 export let pathData = undefined;
+/** Use radial instead of cartesian area generator, mapping `x` to `angle` and `y0`/`y1 to `innerRadius`/`outerRadius.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
+export let radial = false;
 /** Override x accessor */
 export let x = undefined; // TODO: Update Type
 /** Override y0 accessor.  Defaults to max($yRange) */
@@ -26,10 +28,15 @@ export let line = false;
 $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
 $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
-    const path = d3Area()
-        .x(x ?? $xGet)
-        .y0(y0 ?? max($yRange))
-        .y1(y1 ?? $yGet);
+    const path = radial
+        ? areaRadial()
+            .angle(x ?? $xGet)
+            .innerRadius(y0 ?? max($yRange))
+            .outerRadius(y1 ?? $yGet)
+        : d3Area()
+            .x(x ?? $xGet)
+            .y0(y0 ?? max($yRange))
+            .y1(y1 ?? $yGet);
     if (curve)
         path.curve(curve);
     if (defined)

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

@@ -7,6 +7,7 @@ declare const __propDef: {
         [x: string]: any;
         data?: any;
         pathData?: string | undefined | null;
+        radial?: boolean | undefined;
         x?: any;
         y0?: any;
         y1?: any;
@@ -18,6 +19,7 @@ declare const __propDef: {
             [x: string]: any;
             data?: any;
             pathData?: string | null | undefined;
+            radial?: boolean | undefined;
             x?: any;
             y?: any;
             tweened?: boolean | import("svelte/motion").TweenedOptions<unknown> | undefined;

package/dist/components/Axis.svelte

@@ -1,6 +1,7 @@
 <script>import { getContext } from 'svelte';
 import { format as formatValue, cls } from 'svelte-ux';
 import { extent } from 'd3-array';
+import { pointRadial } from 'd3-shape';
 import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales';
 const { xScale, yScale, xRange, yRange, width } = getContext('LayerCake');
@@ -16,8 +17,15 @@ export let ticks = placement === 'left' || placement === 'right' ? 4 : undefined
 export let tickSize = 4;
 export let format = undefined;
 export let labelProps = undefined;
-$: orientation = ['top', 'bottom'].includes(placement) ? 'horizontal' : 'vertical';
-$: scale = orientation === 'horizontal' ? $xScale : $yScale;
+$: orientation =
+    placement === 'angle'
+        ? 'angle'
+        : placement === 'radius'
+            ? 'radius'
+            : ['top', 'bottom'].includes(placement)
+                ? 'horizontal'
+                : 'vertical';
+$: scale = ['horizontal', 'angle'].includes(orientation) ? $xScale : $yScale;
 $: [xRangeMin, xRangeMax] = extent($xRange);
 $: [yRangeMin, yRangeMax] = extent($yRange);
 $: tickVals = Array.isArray(ticks)
@@ -47,9 +55,19 @@ function getCoords(tick) {
                 x: xRangeMax,
                 y: $yScale(tick) + (isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0),
             };
+        case 'angle':
+            return {
+                x: $xScale(tick),
+                y: yRangeMax,
+            };
+        case 'radius':
+            return {
+                x: xRangeMin,
+                y: $yScale(tick),
+            };
     }
 }
-function getDefaultLabelProps() {
+function getDefaultLabelProps(tick) {
     switch (placement) {
         case 'top':
             return {
@@ -77,6 +95,21 @@ function getDefaultLabelProps() {
                 dx: 4,
                 dy: -2, // manually adjusted until Text supports custom styles
             };
+        case 'angle':
+            const xValue = $xScale(tick);
+            return {
+                textAnchor: xValue === 0 || xValue === Math.PI ? 'middle' : xValue > Math.PI ? 'end' : 'start',
+                verticalAnchor: 'middle',
+                dx: 0,
+                dy: -2, // manually adjusted until Text supports custom styles
+            };
+        case 'radius':
+            return {
+                textAnchor: 'middle',
+                verticalAnchor: 'middle',
+                dx: 2,
+                dy: -2, // manually adjusted until Text supports custom styles
+            };
     }
 }
 </script>
@@ -105,10 +138,22 @@ function getDefaultLabelProps() {
         class={cls('rule stroke-surface-content/50', lineProps?.class)}
       />
     {/if}
+
+    <!-- TODO: angle rule? -->
+
+    {#if orientation === 'radius'}
+      <circle
+        r={$yRange[0] || 0}
+        {...lineProps}
+        class={cls('rule stroke-surface-content/20 fill-none', lineProps?.class)}
+      />
+    {/if}
   {/if}
 
   {#each tickVals as tick, i}
     {@const tickCoords = getCoords(tick)}
+    {@const radialTickCoords = pointRadial(tickCoords.x, tickCoords.y)}
+
     <g>
       {#if grid !== false}
         {@const lineProps = typeof grid === 'object' ? grid : null}
@@ -130,6 +175,24 @@ function getDefaultLabelProps() {
             {...lineProps}
             class={cls('grid stroke-surface-content/10', lineProps?.class)}
           />
+        {:else if orientation === 'angle'}
+          {@const [x1, y1] = pointRadial(tickCoords.x, yRangeMin)}
+          {@const [x2, y2] = pointRadial(tickCoords.x, yRangeMax)}
+
+          <line
+            {x1}
+            {y1}
+            {x2}
+            {y2}
+            {...lineProps}
+            class={cls('test grid stroke-surface-content/10', lineProps?.class)}
+          />
+        {:else if orientation === 'radius'}
+          <circle
+            r={tickCoords.y}
+            {...lineProps}
+            class={cls('grid stroke-surface-content/10 fill-none', lineProps?.class)}
+          />
         {/if}
       {/if}
 
@@ -153,10 +216,10 @@ function getDefaultLabelProps() {
       {/if}
 
       <Text
-        x={tickCoords.x}
-        y={tickCoords.y}
-        value={formatValue(tick, format ?? scale.tickFormat?.())}
-        {...getDefaultLabelProps()}
+        x={orientation === 'angle' ? radialTickCoords[0] : tickCoords.x}
+        y={orientation === 'angle' ? radialTickCoords[1] : tickCoords.y}
+        value={formatValue(tick, format ?? scale.tickFormat?.() ?? ((v) => v))}
+        {...getDefaultLabelProps(tick)}
         {...labelProps}
         class={cls(
           'label text-[10px] stroke-surface-100 [stroke-width:2px] font-light',

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

@@ -4,7 +4,7 @@ import type { SVGAttributes } from 'svelte/elements';
 import Text from './Text.svelte';
 declare const __propDef: {
     props: {
-        /** Location of axis */ placement: 'top' | 'bottom' | 'left' | 'right';
+        /** Location of axis */ placement: 'top' | 'bottom' | 'left' | 'right' | 'angle' | 'radius';
         /** Draw a rule line.  Use Rule component for greater rendering order control */ rule?: boolean | SVGAttributes<SVGLineElement> | undefined;
         /** Draw a grid lines */ grid?: boolean | SVGAttributes<SVGLineElement> | undefined;
         /** Control the number of ticks*/ ticks?: number | any[] | Function | undefined;

package/dist/components/Chart.svelte

@@ -79,9 +79,13 @@ export let geo = undefined;
   let:width
   let:element
   let:xScale
+  let:xGet
   let:yScale
+  let:yGet
   let:zScale
+  let:zGet
   let:rScale
+  let:rGet
   let:padding
   let:data
   let:flatData
@@ -100,9 +104,13 @@ export let geo = undefined;
           {projection}
           {tooltip}
           {xScale}
+          {xGet}
           {yScale}
+          {yGet}
           {zScale}
+          {zGet}
           {rScale}
+          {rGet}
           {padding}
           {data}
           {flatData}
@@ -118,9 +126,13 @@ export let geo = undefined;
         {element}
         {projection}
         {xScale}
+        {xGet}
         {yScale}
+        {yGet}
         {zScale}
+        {zGet}
         {rScale}
+        {rGet}
         {padding}
         {data}
         {flatData}

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

@@ -32,9 +32,13 @@ declare const __propDef: {
             element: Element;
             projection: import("d3-geo").GeoProjection | import("d3-geo").GeoIdentityTransform;
             xScale: any;
+            xGet: any;
             yScale: any;
+            yGet: any;
             zScale: any;
+            zGet: any;
             rScale: any;
+            rGet: any;
             padding: {
                 top: number;
                 right: number;

package/dist/components/GeoCircle.svelte

@@ -6,7 +6,7 @@ export let radius = 90;
 export let center = [0, 0];
 /** sets the circle precision to the specified angle in degrees */
 export let precision = 6;
-$: geojson = geoCircle().radius(radius).center(center)();
+$: geojson = geoCircle().radius(radius).center(center).precision(precision)();
 </script>
 
 <GeoPath {geojson} {...$$restProps} />

package/dist/components/Points.svelte

@@ -4,11 +4,14 @@ import { notNull } from 'svelte-ux';
 import Circle from './Circle.svelte';
 import Link from './Link.svelte';
 import { isScaleBand } from '../utils/scales';
+import { pointRadial } from 'd3-shape';
 const context = getContext('LayerCake');
 const { data, xGet, y, yGet, xScale, yScale, rGet, config } = context;
 export let r = 5;
 export let offsetX = undefined;
 export let offsetY = undefined;
+/** Use radial instead of cartesian line generator, mapping `x` to `angle` and `y` to `radius`.  Radial points are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
+export let radial = false;
 /** Enable showing links between related points (array x/y accessors) */
 export let links = false;
 function getOffset(value, offset, scale) {
@@ -18,7 +21,7 @@ function getOffset(value, offset, scale) {
     else if (offset != null) {
         return offset;
     }
-    else if (isScaleBand(scale)) {
+    else if (isScaleBand(scale) && !radial) {
         return scale.bandwidth() / 2;
     }
     else {
@@ -123,9 +126,10 @@ $: _links = $data.flatMap((d) => {
 
   <g class="point-group">
     {#each points as point}
+      {@const radialPoint = pointRadial(point.x, point.y)}
       <Circle
-        cx={point.x}
-        cy={point.y}
+        cx={radial ? radialPoint[0] : point.x}
+        cy={radial ? radialPoint[1] : point.y}
         {r}
         fill={$config.r ? $rGet(point.data) : null}
         {...$$restProps}

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

@@ -5,6 +5,7 @@ declare const __propDef: {
         r?: number | undefined;
         offsetX?: number | ((value: number, context: any) => number) | undefined;
         offsetY?: number | ((value: number, context: any) => number) | undefined;
+        radial?: boolean | undefined;
         links?: boolean | Partial<{
             [x: string]: any;
             data?: any;

package/dist/components/Spline.svelte

@@ -3,7 +3,7 @@ import { writable } from 'svelte/store';
 import { tweened as tweenedStore } from 'svelte/motion';
 import { draw as _drawTransition } from 'svelte/transition';
 import { cubicInOut } from 'svelte/easing';
-import { line as d3Line } from 'd3-shape';
+import { line as d3Line, lineRadial } from 'd3-shape';
 // import { interpolateString } from 'd3-interpolate';
 import { interpolatePath } from 'd3-interpolate-path';
 import { cls } from 'svelte-ux';
@@ -14,9 +14,11 @@ const { data: contextData, xGet, yGet } = getContext('LayerCake');
 export let data = undefined;
 /** Pass `<path d={...} />` explicitly instead of calculating from data / context */
 export let pathData = undefined;
-/** Override x accessor */
+/** Use radial instead of cartesian line generator, mapping `x` to `angle` and `y` to `radius`.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
+export let radial = false;
+/** Override `x` accessor from Chart context.  Applies to `angle` when `radial=true` */
 export let x = undefined; // TODO: Update Type
-/** Override y accessor */
+/** Override `y` accessor from Chart context.  Applies to `radius` when `radial=true` */
 export let y = undefined; // TODO: Update Type
 /** Interpolate path data using d3-interpolate-path.  Works best without `draw` enabled */
 export let tweened = undefined;
@@ -37,9 +39,13 @@ let d = '';
 $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
 $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
-    const path = d3Line()
-        .x(x ?? $xGet)
-        .y(y ?? $yGet);
+    const path = radial
+        ? lineRadial()
+            .angle(x ?? $xGet)
+            .radius(y ?? $yGet)
+        : d3Line()
+            .x(x ?? $xGet)
+            .y(y ?? $yGet);
     if (curve)
         path.curve(curve);
     if (defined)

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

@@ -7,6 +7,7 @@ declare const __propDef: {
         [x: string]: any;
         data?: any;
         pathData?: string | undefined | null;
+        radial?: boolean | undefined;
         x?: any;
         y?: any;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];

package/dist/components/Tooltip.svelte

@@ -15,7 +15,7 @@ export let yOffset = typeof x === 'number' || typeof y === 'number' ? 0 : 10;
 export let anchor = 'top-left';
 export let contained = 'container'; // TODO: Support 'window' using getBoundingClientRect()
 export let animate = true;
-export let variant = 'dark';
+export let variant = 'default';
 export let header = undefined;
 export let classes = {};
 const { padding, xGet, yGet, containerWidth, containerHeight } = getContext('LayerCake');
@@ -115,13 +115,13 @@ $: if ($tooltip?.data) {
           ['[&_.value]:text-sm [&_.value]:tabular-nums'],
         ],
         {
-          dark: [
-            'bg-gray-900/90 backdrop-filter backdrop-blur-[2px] text-white',
-            '[&_.label]:text-white/75',
+          default: [
+            'bg-surface-100/90 dark:bg-surface-300/90 backdrop-filter backdrop-blur-[2px] text-surface-content',
+            '[&_.label]:text-surface-content/75',
           ],
-          light: [
-            'bg-white text-gray-800 border border-gray-500',
-            '[&_.label]:text-surface-content/50',
+          invert: [
+            'bg-surface-content/90 backdrop-filter backdrop-blur-[2px] text-surface-100 border border-surface-content',
+            '[&_.label]:text-surface-100/50',
           ],
           none: '',
         }[variant],

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

@@ -9,7 +9,7 @@ declare const __propDef: {
         anchor?: ("center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         contained?: false | "container" | undefined;
         animate?: boolean | undefined;
-        variant?: "none" | "dark" | "light" | undefined;
+        variant?: "default" | "none" | "invert" | undefined;
         header?: ((data: any) => any) | undefined;
         classes?: {
             root?: string | undefined;

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

@@ -7,7 +7,7 @@ declare const __propDef: {
         spring?: boolean | Parameters<typeof motionStore>[1]['spring'];
         tweened?: boolean | Parameters<typeof motionStore>[1]['tweened'];
         disablePointer?: boolean | undefined;
-        scroll?: "none" | "scale" | "translate" | undefined;
+        scroll?: "scale" | "translate" | "none" | undefined;
         clickDistance?: number | undefined;
         initialTranslate?: {
             x: number;

package/dist/utils/math.d.ts

@@ -6,3 +6,24 @@ export declare function degreesToRadians(degrees: number): number;
  * Convert radians to degrees
  */
 export declare function radiansToDegrees(radians: number): number;
+/**
+ * Convert polar to cartesian coordinate system.
+ * see also: https://d3js.org/d3-shape/symbol#pointRadial
+ * @param angle - Angle in radians
+ * @param radius - Radius
+ */
+export declare function polarToCartesian(angle: number, radius: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Convert cartesian to polar coordinate system.  Angle in radians
+ */
+export declare function cartesianToPolar(x: number, y: number): {
+    radius: number;
+    angle: number;
+};
+/** Convert celsius temperature to fahrenheit */
+export declare function celsiusToFahrenheit(temperature: number): number;
+/** Convert fahrenheit temperature to celsius */
+export declare function fahrenheitToCelsius(temperature: number): number;

package/dist/utils/math.js

@@ -10,3 +10,32 @@ export function degreesToRadians(degrees) {
 export function radiansToDegrees(radians) {
     return radians * (180 / Math.PI);
 }
+/**
+ * Convert polar to cartesian coordinate system.
+ * see also: https://d3js.org/d3-shape/symbol#pointRadial
+ * @param angle - Angle in radians
+ * @param radius - Radius
+ */
+export function polarToCartesian(angle, radius) {
+    return {
+        x: radius * Math.cos(angle),
+        y: radius * Math.sin(angle),
+    };
+}
+/**
+ * Convert cartesian to polar coordinate system.  Angle in radians
+ */
+export function cartesianToPolar(x, y) {
+    return {
+        radius: Math.sqrt(x ** 2 + y ** 2),
+        angle: Math.atan(y / x),
+    };
+}
+/** Convert celsius temperature to fahrenheit */
+export function celsiusToFahrenheit(temperature) {
+    return temperature * (9 / 5) + 32;
+}
+/** Convert fahrenheit temperature to celsius */
+export function fahrenheitToCelsius(temperature) {
+    return (temperature - 32) * (5 / 9);
+}

package/package.json

@@ -4,14 +4,14 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.30.0",
+  "version": "0.30.2",
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@mdi/js": "^7.4.47",
     "@rollup/plugin-dsv": "^3.0.4",
-    "@sveltejs/adapter-auto": "^3.1.0",
-    "@sveltejs/kit": "^2.3.2",
-    "@sveltejs/package": "^2.2.5",
+    "@sveltejs/adapter-auto": "^3.1.1",
+    "@sveltejs/kit": "^2.5.0",
+    "@sveltejs/package": "^2.2.6",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@tailwindcss/typography": "^0.5.10",
     "@types/d3-array": "^3.2.1",
@@ -29,40 +29,39 @@
     "@types/d3-shape": "^3.1.6",
     "@types/d3-time": "^3.0.2",
     "@types/lodash-es": "^4.17.12",
-    "@types/marked": "^6.0.0",
     "@types/prismjs": "^1.26.3",
     "@types/shapefile": "^0.6.4",
     "@types/topojson-client": "^3.1.4",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.17",
     "d3-color": "^3.1.0",
     "execa": "^8.0.1",
-    "marked": "^11.1.1",
+    "marked": "^12.0.0",
     "mdsvex": "^0.11.0",
     "posthog-js": "^1.95.1",
-    "prettier": "^3.2.2",
-    "prettier-plugin-svelte": "^3.1.2",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.1",
     "prism-svelte": "^0.5.0",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
     "rehype-slug": "^6.0.0",
     "shapefile": "^0.6.6",
     "solar-calculator": "^0.3.0",
-    "svelte": "^4.2.8",
-    "svelte-check": "^3.6.3",
+    "svelte": "^4.2.10",
+    "svelte-check": "^3.6.4",
     "svelte-json-tree": "^2.2.0",
     "svelte-preprocess": "^5.1.3",
-    "svelte2tsx": "^0.7.0",
+    "svelte2tsx": "^0.7.1",
     "tailwindcss": "^3.4.1",
     "topojson-client": "^3.1.0",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
     "unist-util-visit": "^5.0.0",
     "us-atlas": "^3.0.1",
-    "vite": "^5.0.11"
+    "vite": "^5.1.1"
   },
   "type": "module",
   "dependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",
@@ -79,12 +78,12 @@
     "d3-shape": "^3.2.0",
     "d3-tile": "^1.0.0",
     "d3-time": "^3.1.0",
-    "date-fns": "^3.2.0",
+    "date-fns": "^3.3.1",
     "layercake": "^8.0.2",
     "lodash-es": "^4.17.21",
-    "posthog-js": "^1.100.0",
+    "posthog-js": "^1.105.8",
     "shapefile": "^0.6.6",
-    "svelte-ux": "0.60.0",
+    "svelte-ux": ">=0.60",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {