@indiminds/charts 1.0.1

package/dist/renderers/primitives/grouped-bars.d.ts

@@ -0,0 +1,43 @@
+import { type DrawContext } from "./context";
+/** How a bar is painted. The striped and hollow styles let a caller mark a
+ *  bar as having gone up or down without adding a second series. */
+export type BarFillMode = "solid" | "hatched" | "outline";
+export interface BarSeries {
+    color: string;
+    /** One entry per category, aligned to the chart's category list. */
+    values: readonly (number | null)[];
+    /** Per-category override, aligned to `values`. Missing = "solid". */
+    fillModes?: readonly BarFillMode[];
+    /** Per-category color override, aligned to `values` — for a single series
+     *  whose bars are classified individually. Missing entries use `color`. */
+    colors?: readonly (string | null | undefined)[];
+}
+/** A bar that moved between two values — solid up to the smaller one, then
+ *  striped (it grew) or hollow (it shrank) the rest of the way. */
+export interface DeltaBarSeries {
+    color: string;
+    from: readonly (number | null)[];
+    to: readonly (number | null)[];
+}
+interface BarGroupOptions {
+    baseline?: number;
+    /** Fraction of the category slot the whole group occupies. */
+    groupWidthRatio?: number;
+    /** Fraction of each bar's own width left as a gap to its neighbor. */
+    barGapRatio?: number;
+    /** Highlights one category's bars on hover, by brightening them rather than
+     *  dimming everything else. */
+    focusIndex?: number | null;
+    /** 0-1 growing-in animation. 1, the default, draws bars at full height. */
+    growProgress?: number;
+    /** Bars per category, when a caller draws several batches that should sit
+     *  side by side. Defaults to `series.length`. */
+    slotCount?: number;
+    /** Where this batch starts within that row of bars. Default 0. */
+    slotOffset?: number;
+}
+export declare function drawGroupedBars(c: DrawContext, series: readonly BarSeries[], options?: BarGroupOptions): void;
+/** Bars showing a before and after value: solid up to the smaller of the two,
+ *  then striped if it grew or hollow if it shrank. */
+export declare function drawDeltaBars(c: DrawContext, series: readonly DeltaBarSeries[], options?: BarGroupOptions): void;
+export {};

package/dist/renderers/primitives/index.d.ts

@@ -0,0 +1,5 @@
+export { applyStyle, lastValueBefore, withPaneClip, type DrawContext, type PlotStyle, } from "./context";
+export { drawBand, drawHistogram, drawLine, momentumColor, type HistogramColorMode, type MomentumColors, } from "./marks";
+export { drawLabelPill, drawPaneDivider, drawPaneGrid, drawReferenceLines, drawZones, niceStep, roundRect, type PillStyle, type ReferenceLine, type Zone, } from "./decorations";
+export { drawAxisPills, type AxisPill } from "./axis-pills";
+export { drawGroupedBars, drawDeltaBars, type BarFillMode, type BarSeries, type DeltaBarSeries, } from "./grouped-bars";

package/dist/renderers/primitives/marks.d.ts

@@ -0,0 +1,40 @@
+import { type DrawContext, type PlotStyle } from "./context";
+/** Draws a line, leaving a gap wherever a value is missing. In "directional"
+ *  mode each stretch takes its colour from `colorValues`, and the line breaks
+ *  where that flips rather than joining the two sides together. */
+export declare function drawLine(c: DrawContext, values: readonly (number | null)[], style: PlotStyle, options?: {
+    colorMode?: "fixed" | "directional";
+    momentumColors?: MomentumColors;
+    colorValues?: readonly (number | null)[];
+}): void;
+/** Fills the area between two lines, skipping missing values. In "directional"
+ *  mode the fill is split into separate patches wherever `colorValues` flips. */
+export declare function drawBand(c: DrawContext, upper: readonly (number | null)[], lower: readonly (number | null)[], style: PlotStyle, options?: {
+    colorMode?: "fixed" | "directional";
+    momentumColors?: MomentumColors;
+    colorValues?: readonly (number | null)[];
+}): void;
+/** How a histogram picks its bar colours:
+ *  "fixed"       — one colour throughout.
+ *  "momentum"    — above/below zero picks the colour, rising or falling
+ *                  against the previous bar picks the bright or dull shade.
+ *  "directional" — a second series decides, e.g. volume bars coloured by
+ *                  whether that candle closed up or down. */
+export type HistogramColorMode = "fixed" | "momentum" | "directional";
+export interface MomentumColors {
+    bullStrong: string;
+    bullWeak: string;
+    bearStrong: string;
+    bearWeak: string;
+}
+declare function momentumColor(value: number, prev: number | null | undefined, colors: MomentumColors): string;
+export declare function drawHistogram(c: DrawContext, values: readonly (number | null)[], style: PlotStyle, options?: {
+    baseline?: number;
+    colorMode?: HistogramColorMode;
+    momentumColors?: MomentumColors;
+    /** The companion series "directional" mode reads — only its sign matters. */
+    colorValues?: readonly (number | null)[];
+    /** How much of its slot a bar fills, 0-1. */
+    barWidthRatio?: number;
+}): void;
+export { momentumColor };

package/dist/renderers/value-axis.d.ts

@@ -0,0 +1,18 @@
+import { type PlotFrame } from "../plot-frame";
+import type { PriceExtent } from "../types";
+export interface ValueAxisSpec {
+    extent: PriceExtent;
+    toY: (value: number) => number;
+    format: (value: number) => string;
+    /** Which gutter the tick labels sit in. */
+    side: "left" | "right";
+    /** Whether this axis' ticks also draw the horizontal gridlines. Only one
+     *  axis should: two sets rarely land on the same pixel and just double up. */
+    gridlines: boolean;
+}
+export declare function drawValueAxis(ctx: CanvasRenderingContext2D, frame: PlotFrame, spec: ValueAxisSpec): void;
+/** The line the categories sit on, closing the bottom of the plot. */
+export declare function drawAxisBaseline(ctx: CanvasRenderingContext2D, frame: PlotFrame): void;
+/** Vertical gridlines at the same ticks the category labels land on, so the
+ *  pane reads as a full grid rather than horizontal-only. */
+export declare function drawCategoryGridlines(ctx: CanvasRenderingContext2D, frame: PlotFrame, categoryCount: number, toX: (categoryIndex: number) => number, step: number): void;

package/dist/scale.d.ts

@@ -0,0 +1,36 @@
+import type { PriceExtent } from "./types";
+/** Fits the visible data with some padding. */
+export interface AutoScale {
+    mode: "auto";
+    /** Fraction of the data span added above and below. */
+    cushionRatio: number;
+    /** Minimum padding for nearly flat data. */
+    minCushion?: number;
+}
+/** Fits the data, but never scrolls past `min`/`max` and always keeps
+ *  `alwaysInclude` on screen. */
+export interface FixedScale {
+    mode: "fixed";
+    min: number;
+    max: number;
+    /** Levels that must stay on screen even when the data is far from them. */
+    alwaysInclude?: [number, number];
+    cushionRatio: number;
+    minCushion?: number;
+}
+/** Reuses the price pane's own range — for indicators drawn over the candles. */
+export interface PriceScale {
+    mode: "price";
+}
+export type PaneScale = AutoScale | FixedScale | PriceScale;
+/** Vertical breathing room inside a pane, in px. */
+export declare const PANE_PAD_TOP = 8;
+export declare const PANE_PAD_BOTTOM = 8;
+/** The value range to draw `series` against over the visible index window.
+ *  Null when there's nothing to fit, or when the caller owns the range ("price"). */
+export declare function computePaneExtent(scale: PaneScale, series: readonly (readonly (number | null)[])[], startIndex: number, endIndex: number): PriceExtent | null;
+/** Value -> canvas Y inside a pane. The padding keeps highs and lows off the
+ *  pane's edges; the price pane passes 0 because its range is padded already. */
+export declare function makeToY(extent: PriceExtent, top: number, height: number, padTop?: number, padBottom?: number): (value: number) => number;
+/** Inverse of makeToY — canvas Y back to a value, for the crosshair label. */
+export declare function makeFromY(extent: PriceExtent, top: number, height: number, padTop?: number, padBottom?: number): (y: number) => number;

package/dist/types.d.ts

@@ -0,0 +1,53 @@
+import type { CandleData as ChartCandle, Viewport as ChartViewport, PaneLayout, PriceExtent } from "@indiminds/chart-types";
+type CandleData = ChartCandle;
+/** Where one sub-pane sits. `minHeight` only matters while dragging a divider,
+ *  so it lives here rather than in the shared chart-types contract. */
+type PaneRect = PaneLayout & {
+    minHeight: number;
+};
+type ChartLayout = {
+    width: number;
+    height: number;
+    chartWidth: number;
+    chartHeight: number;
+    priceScaleWidth: number;
+    timeScaleHeight: number;
+    /** Sub-panes stacked below the price pane, top to bottom. Empty when every
+     *  indicator draws over the candles instead of in its own pane. */
+    panes: PaneRect[];
+    timeAxisTop: number;
+};
+type Viewport = ChartViewport;
+/** Hovered candle plus its absolute index, or null when the cursor leaves. */
+type CrosshairEvent = {
+    candle: CandleData;
+    index: number;
+} | null;
+/** Pane geometry, published so DOM overlays can position against the canvas. */
+type LayoutSnapshot = {
+    width: number;
+    chartWidth: number;
+    chartHeight: number;
+    panes: PaneRect[];
+};
+/** Mutable on purpose — refreshChartColors() rewrites these when the theme
+ *  changes, and renderers read them fresh on every draw. */
+declare const COLORS: {
+    bullish: string;
+    bearish: string;
+    grid: string;
+    text: string;
+    crosshair: string;
+    priceLine: string;
+    pill: string;
+    pillText: string;
+    divider: string;
+    dividerActive: string;
+    background: string;
+};
+type ColorKey = keyof typeof COLORS;
+/** Re-reads the themed colors off the page. Canvas can't understand var(), so
+ *  we have to copy out the resolved values. */
+declare function refreshChartColors(): void;
+export { COLORS, refreshChartColors };
+export type { CandleData, ChartLayout, PaneRect, Viewport, PriceExtent, CrosshairEvent, LayoutSnapshot, ColorKey, };

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@indiminds/charts",
+  "version": "1.0.1",
+  "type": "module",
+  "description": "Canvas-based charting engine for React/Next.js — candlestick, bar, combo, line and pie charts, zero charting-library dependencies.",
+  "author": "Indiminds <sonu@indiminds.com>",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Indiminds-Trading-Org/Back-Testing-UI.git",
+    "directory": "packages/charting-engine"
+  },
+  "keywords": [
+    "charts",
+    "charting",
+    "canvas",
+    "react",
+    "candlestick",
+    "ohlc",
+    "trading",
+    "bar-chart",
+    "line-chart",
+    "pie-chart",
+    "financial-charts"
+  ],
+  "main": "./dist/candlestick/index.js",
+  "types": "./dist/candlestick/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/candlestick/index.d.ts",
+      "default": "./dist/candlestick/index.js"
+    },
+    "./bar": {
+      "types": "./dist/bar-chart/index.d.ts",
+      "default": "./dist/bar-chart/index.js"
+    },
+    "./combo": {
+      "types": "./dist/combo-chart/index.d.ts",
+      "default": "./dist/combo-chart/index.js"
+    },
+    "./line": {
+      "types": "./dist/line-chart/index.d.ts",
+      "default": "./dist/line-chart/index.js"
+    },
+    "./pie": {
+      "types": "./dist/pie-chart/index.d.ts",
+      "default": "./dist/pie-chart/index.js"
+    }
+  },
+  "dependencies": {
+    "@indiminds/chart-types": "1.0.1"
+  },
+  "devDependencies": {
+    "esbuild": "^0.24.0"
+  },
+  "scripts": {
+    "build": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsc --emitDeclarationOnly && node build.mjs",
+    "typecheck": "tsc --noEmit",
+    "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\""
+  }
+}