@funnest/charts-viz 0.1.1 → 0.2.0

package/dist/index.d.ts

@@ -4,8 +4,8 @@
  * Pure TypeScript with no DOM access, so the same scales, ticks and SVG path strings
  * drive the web components (@funnest/charts-react) and React Native (react-native-svg).
  */
-export { linearScale, bandScale, clamp, type LinearScale, type BandScale } from './scale';
-export { niceStep, niceDomain, ticks, sampleIndices } from './ticks';
+export { linearScale, logScale, bandScale, clamp, type LinearScale, type LogScale, type ValueScale, type BandScale } from './scale';
+export { niceStep, niceDomain, ticks, logTicks, sampleIndices } from './ticks';
 export { linePath, areaPath, barPath, segments, type XY, type Curve } from './path';
 export { extent, maxLength, stack, stackedExtent, percentages, nearestIndex, seriesChange, type SeriesData, type StackedSeries, type PercentageSegment, } from './data';
 export { DEFAULT_PALETTE, seriesColor } from './palette';

package/dist/index.js

@@ -8,6 +8,15 @@ function linearScale(domain, range) {
   Object.assign(scale, { kind: "linear", domain: [d0, d1], range: [r0, r1] });
   return scale;
 }
+function logScale(domain, range) {
+  const d0 = Math.max(Number.MIN_VALUE, domain[0]);
+  const d1 = Math.max(d0, domain[1]);
+  const inner = linearScale([Math.log10(d0), Math.log10(d1)], range);
+  const scale = ((v) => inner(Math.log10(Math.max(v, d0))));
+  scale.invert = (p) => 10 ** inner.invert(p);
+  Object.assign(scale, { kind: "log", domain: [d0, d1], range: [range[0], range[1]] });
+  return scale;
+}
 function bandScale(count, range, padding = 0.2) {
   const [r0, r1] = range;
   const n = Math.max(1, count);
@@ -61,6 +70,22 @@ function sampleIndices(count, max) {
   for (let i = 0; i < count; i += every) out.push(i);
   return out;
 }
+function logTicks(min, max, count = 5) {
+  if (!(min > 0) || !(max > min)) return ticks(min, max, count);
+  const lo = Math.floor(Math.log10(min));
+  const hi = Math.ceil(Math.log10(max));
+  if (hi - lo <= 1) return ticks(min, max, count);
+  const pick = (mults) => {
+    const out = [];
+    for (let e = lo; e <= hi; e++) for (const m of mults) {
+      const v = round(m * 10 ** e);
+      if (v >= min * (1 - 1e-9) && v <= max * (1 + 1e-9)) out.push(v);
+    }
+    return out;
+  };
+  const dense = pick([1, 2, 5]);
+  return dense.length <= count * 2 ? dense : pick([1]);
+}
 
 // src/path.ts
 var f = (n) => (Math.round(n * 100) / 100).toString();
@@ -118,17 +143,17 @@ function segments(values) {
   });
   return out;
 }
-function barPath(x, width, baseY, valueY, radius = 0) {
+function barPath(x, width, baseY, valueY, radius = 0, roundBase = false) {
   const top = Math.min(baseY, valueY);
-  const h = Math.abs(valueY - baseY);
-  const r = Math.max(0, Math.min(radius, width / 2, h));
+  const bottom = Math.max(baseY, valueY);
+  const h = bottom - top;
   const x1 = x + width;
-  if (r === 0) return `M${f(x)},${f(top)}H${f(x1)}V${f(top + h)}H${f(x)}Z`;
-  if (valueY <= baseY) {
-    return `M${f(x)},${f(baseY)}V${f(top + r)}Q${f(x)},${f(top)} ${f(x + r)},${f(top)}H${f(x1 - r)}Q${f(x1)},${f(top)} ${f(x1)},${f(top + r)}V${f(baseY)}Z`;
-  }
-  const bottom = top + h;
-  return `M${f(x)},${f(baseY)}V${f(bottom - r)}Q${f(x)},${f(bottom)} ${f(x + r)},${f(bottom)}H${f(x1 - r)}Q${f(x1)},${f(bottom)} ${f(x1)},${f(bottom - r)}V${f(baseY)}Z`;
+  const r = Math.max(0, Math.min(radius, width / 2, roundBase ? h / 2 : h));
+  if (r === 0) return `M${f(x)},${f(top)}H${f(x1)}V${f(bottom)}H${f(x)}Z`;
+  const up = valueY <= baseY;
+  const rTop = up || roundBase ? r : 0;
+  const rBottom = !up || roundBase ? r : 0;
+  return `M${f(x)},${f(top + rTop)}` + (rTop ? `Q${f(x)},${f(top)} ${f(x + rTop)},${f(top)}` : "") + `H${f(x1 - rTop)}` + (rTop ? `Q${f(x1)},${f(top)} ${f(x1)},${f(top + rTop)}` : "") + `V${f(bottom - rBottom)}` + (rBottom ? `Q${f(x1)},${f(bottom)} ${f(x1 - rBottom)},${f(bottom)}` : "") + `H${f(x + rBottom)}` + (rBottom ? `Q${f(x)},${f(bottom)} ${f(x)},${f(bottom - rBottom)}` : "") + "Z";
 }
 function monotoneSegments(p) {
   const n = p.length;
@@ -260,6 +285,8 @@ export {
   extent,
   linePath,
   linearScale,
+  logScale,
+  logTicks,
   maxLength,
   nearestIndex,
   niceDomain,

package/dist/path.d.ts

@@ -20,7 +20,7 @@ export declare function segments<T>(values: readonly (T | null | undefined)[]):
     values: T[];
 }[];
 /**
- * Bar from `baseY` to `valueY` (pixels), `radius` rounding only the end away from the
- * baseline — so negative bars round at the bottom.
+ * Bar from `baseY` to `valueY` (pixels). `radius` rounds the end away from the baseline
+ * (negative bars round at the bottom); `roundBase` rounds the baseline end too.
  */
-export declare function barPath(x: number, width: number, baseY: number, valueY: number, radius?: number): string;
+export declare function barPath(x: number, width: number, baseY: number, valueY: number, radius?: number, roundBase?: boolean): string;

package/dist/scale.d.ts

@@ -7,6 +7,20 @@ export interface LinearScale {
     invert(pixel: number): number;
 }
 export declare function linearScale(domain: readonly [number, number], range: readonly [number, number]): LinearScale;
+/**
+ * A log10 scale for values spanning orders of magnitude (long-term price charts).
+ * Domain values must be positive; non-positive inputs clamp to the domain minimum.
+ */
+export interface LogScale {
+    readonly kind: 'log';
+    readonly domain: readonly [number, number];
+    readonly range: readonly [number, number];
+    (value: number): number;
+    invert(pixel: number): number;
+}
+export declare function logScale(domain: readonly [number, number], range: readonly [number, number]): LogScale;
+/** Either value scale; both map a value to a pixel and back. */
+export type ValueScale = LinearScale | LogScale;
 /** A categorical scale: `count` equal bands across the range, each with inner padding. */
 export interface BandScale {
     readonly kind: 'band';

package/dist/ticks.d.ts

@@ -9,3 +9,8 @@ export declare function ticks(min: number, max: number, count?: number): number[
  * always keeping the first one.
  */
 export declare function sampleIndices(count: number, max: number): number[];
+/**
+ * Ticks for a log scale: 1, 2, 5 × 10ⁿ inside [min, max] (min > 0). Falls back to powers
+ * of ten alone when that would be too many, and to linear ticks for a narrow range.
+ */
+export declare function logTicks(min: number, max: number, count?: number): number[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts-viz",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Platform-neutral chart math (scales, ticks, paths, scrubbing) shared by Funnest Charts web and React Native components",
   "keywords": [
     "chart",