viainti-chart 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +127 -0
- package/dist/index.cjs +3811 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +27 -0
- package/dist/index.mjs +3808 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +81 -0
package/README.md
ADDED
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
# Viainti Chart
|
|
2
|
+
|
|
3
|
+
Advanced React OHLC charting library with TradingView-style interface, built by Viainti. Features indicators, drawings, responsive design, and canvas rendering optimized for fintech dashboards and trading applications.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install intitrading
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
> The package ships ESM, CommonJS and type definitions. Requires React, React DOM, and Framer Motion as peer dependencies.
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
### React example
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import React from 'react';
|
|
19
|
+
import { TradingViewChart, OHLCData } from 'intitrading';
|
|
20
|
+
|
|
21
|
+
const data: OHLCData[] = [
|
|
22
|
+
{ open: 100, high: 110, low: 95, close: 105, volume: 1200, timestamp: Date.now() - 60000 },
|
|
23
|
+
// ...more candles
|
|
24
|
+
];
|
|
25
|
+
|
|
26
|
+
export default function Demo() {
|
|
27
|
+
return (
|
|
28
|
+
<div style={{ height: '600px' }}>
|
|
29
|
+
<TradingViewChart data={data} symbol="BTC/USDT" />
|
|
30
|
+
</div>
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Next.js (App Router) example
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
'use client';
|
|
39
|
+
|
|
40
|
+
import { TradingViewChart, OHLCData } from 'intitrading';
|
|
41
|
+
|
|
42
|
+
const data: OHLCData[] = [
|
|
43
|
+
{ open: 100, high: 110, low: 95, close: 105, volume: 1200, timestamp: Date.now() },
|
|
44
|
+
];
|
|
45
|
+
|
|
46
|
+
export default function ChartBlock() {
|
|
47
|
+
return (
|
|
48
|
+
<section className="h-[520px]">
|
|
49
|
+
<TradingViewChart data={data} symbol="ETH/USDT" />
|
|
50
|
+
</section>
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Minimal canvas
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
import { Chart, OHLCData } from 'intitrading';
|
|
59
|
+
|
|
60
|
+
const sample: OHLCData[] = [{ open: 10, high: 12, low: 9, close: 11 }];
|
|
61
|
+
|
|
62
|
+
export function Spark() {
|
|
63
|
+
return <Chart data={sample} width={320} height={160} />;
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## API
|
|
68
|
+
|
|
69
|
+
### `<TradingViewChart />`
|
|
70
|
+
- `data: OHLCData[]` – candles with `open`, `high`, `low`, `close`, optional `volume` & `timestamp`.
|
|
71
|
+
- `symbol?: string` – label displayed in the header (default `VIA/USDT`).
|
|
72
|
+
|
|
73
|
+
### `<Chart />`
|
|
74
|
+
- `data: OHLCData[]`
|
|
75
|
+
- `width?: number` (default `800`)
|
|
76
|
+
- `height?: number` (default `400`)
|
|
77
|
+
|
|
78
|
+
### `OHLCData`
|
|
79
|
+
```ts
|
|
80
|
+
interface OHLCData {
|
|
81
|
+
open: number;
|
|
82
|
+
high: number;
|
|
83
|
+
low: number;
|
|
84
|
+
close: number;
|
|
85
|
+
volume?: number;
|
|
86
|
+
timestamp?: number;
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Features
|
|
91
|
+
|
|
92
|
+
- 📱 **Fully Responsive** – Optimized for mobile and desktop with adaptive layouts.
|
|
93
|
+
- 🧭 **Inline timeframe chips** – horizontal pills with real-time clock and dropdown.
|
|
94
|
+
- 🖊️ **Full drawing stack** – cursors, trendlines, channels, Fibonacci, emojis, ruler and more.
|
|
95
|
+
- 📈 **Indicator panel** – SMA, EMA, RSI, MACD toggleable with presets.
|
|
96
|
+
- 📸 **Instant screenshots** – download-ready PNG capture directly from the toolbar.
|
|
97
|
+
- 🌐 **Bilingual UI** – English/Spanish copy baked into every label.
|
|
98
|
+
- ⚙️ **Config popover** – switch languages or color schemes without leaving the canvas.
|
|
99
|
+
- 🎨 **Theme support** – Dark, blue, and light themes with custom options.
|
|
100
|
+
|
|
101
|
+
## Building the library
|
|
102
|
+
|
|
103
|
+
```bash
|
|
104
|
+
npm install
|
|
105
|
+
npm run build
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
`rollup` emits:
|
|
109
|
+
- `dist/index.mjs` (ESM)
|
|
110
|
+
- `dist/index.cjs` (CommonJS)
|
|
111
|
+
- `dist/index.d.ts`
|
|
112
|
+
|
|
113
|
+
These entry points are referenced in `package.json` exports, so they can be published to npm immediately.
|
|
114
|
+
|
|
115
|
+
## Development playground
|
|
116
|
+
|
|
117
|
+
```bash
|
|
118
|
+
npm run dev # launches the Vite example in /example
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## Credits
|
|
122
|
+
|
|
123
|
+
Built by [Viainti](https://www.viainti.com) - Advanced fintech solutions and trading tools.
|
|
124
|
+
|
|
125
|
+
## License
|
|
126
|
+
|
|
127
|
+
ISC
|