@fintatech/fintachart 3.1.0

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [3.1.0] - 2026-04-18
+
+### Added
+
+- Initial public release of `@fintatech/fintachart`
+
+[3.1.0]: https://github.com/fintatech/fintachart/releases/tag/v3.1.0

package/LICENSE.md

@@ -0,0 +1,63 @@
+# License
+
+Copyright (c) Fintatech B.V. (https://fintatech.com)
+
+Permission is hereby granted, free of charge, to any person or organization
+(the "Licensee") to use this software and associated documentation files
+(the "Software") in any project, whether commercial or non-commercial,
+subject to the following conditions:
+
+## 1. Restrictions on Modification
+The Software may not be modified, adapted, reverse-engineered, decompiled,
+or otherwise altered in any form.
+
+## 2. Restrictions on Distribution and Sublicensing
+The Software may not be redistributed, sublicensed, resold, or otherwise
+made available to third parties as a standalone product, library, SDK,
+component, or as part of any offering intended for third-party integration
+or development.
+
+Serving the Software to end users as part of the Licensee's own hosted
+application or website (e.g., loading the Software in end users' browsers
+when they access the Licensee's platform) is permitted under a valid
+commercial license and is not considered redistribution under this clause.
+
+## 3. Notice Requirement
+This copyright notice and permission notice shall be included in all
+copies or substantial portions of the Software.
+
+## 4. License Requirement for Deployed Use
+Use of the Software is permitted without a commercial license solely within
+local development environments (e.g., `localhost`, `127.0.0.1`, and loopback
+addresses accessed only by the developer). Any use of the Software in a
+deployed or network-accessible environment, including but not limited to
+production systems, staging environments, internal tools, intranet sites,
+or publicly accessible websites, requires a valid commercial license issued
+by Fintatech B.V.
+
+Commercial licenses are issued for specific domains, properties, or
+entities as defined in the license agreement. A single license does not
+extend to unrelated platforms, subsidiaries, or additional domains beyond
+those explicitly covered by the agreement.
+
+Commercial licenses may be obtained by contacting **sales@fintatech.com**.
+
+## 5. Runtime License Verification
+The Software may include technical measures that automatically verify the
+presence and validity of a commercial license when executed outside of a
+local development environment. By using the Software, the Licensee
+acknowledges and agrees to such verification. Any attempt to disable,
+bypass, circumvent, or interfere with these mechanisms, including any
+modification of license-enforcement logic, is strictly prohibited.
+
+---
+
+## Disclaimer
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT. IN NO EVENT SHALL
+THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING
+FROM, OUT OF, OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,151 @@
+<div align="center">
+  <a href="https://fintatech.com" target="_blank">
+    <img width="200" src="https://raw.githubusercontent.com/fintatech/fintachart/master/.github/logo-200x200.svg" alt="FintaChart logo">
+  </a>
+
+  <h1>FintaChart</h1>
+
+  [![npm version](https://img.shields.io/npm/v/@fintatech/fintachart.svg)](https://www.npmjs.com/package/@fintatech/fintachart)
+</div>
+
+High-performance financial charting component for web applications. Designed for trading platforms, financial dashboards, and any HTML-based project that needs interactive market data visualization.
+
+## Features
+
+- **16+ chart types** — Candlestick, OHLC, Heikin Ashi, Renko, Kagi, Line Break, Point & Figure, Hollow Candle, Range Bar, Candle Volume, Equi Volume, Mountain, Line, Area, and more
+- **100+ technical indicators** — RSI, MACD, Bollinger Bands, Ichimoku, EMA, SMA, Stochastics, and the full range of standard analysis tools
+- **Drawing and analysis tools** — Lines, channels, rectangles, circles, ellipses, polygons, freehand, arrows, text and image annotations
+- **Fibonacci tools** — Retracements, Fan, Extensions, Arcs, Ellipses, Time Zones
+- **Trend analysis** — Andrews' Pitchfork, Raff Regression, Error Channel, Gann Fan, Speed Lines, Quadrant Lines, Tirone Levels
+- **Pattern recognition** — Head & Shoulders, ABCD, XABCD, Elliott Wave, Triangle, Kings Crown
+- **Multiple data sources** — File, REST API, and WebSocket adapters with custom datafeed support
+- **10 built-in themes** — Dark, Light, Gray, Olive, Orange, Purple, Sky, Teal, Beet, Fintatech Dark
+- **Multi-chart layouts** — Multiple synchronized charts with shared toolbar
+- **Trading integration** — Orders, alerts, positions, SL/TP with full event system
+- **Calendar events** — Economic calendar overlay on chart
+- **Localization** — English and Ukrainian, extensible
+- **Touch support** — Mobile and tablet ready
+- **State management** — Save/restore workspace, indicators, shapes, templates
+
+## Installation
+
+```bash
+npm install @fintatech/fintachart
+```
+
+## Quick Start
+
+### HTML
+
+```html
+<!-- 1. Styles -->
+<link rel="stylesheet" href="node_modules/@fintatech/fintachart/css/external/spectrum.min.css">
+<link rel="stylesheet" href="node_modules/@fintatech/fintachart/css/external/toastr.min.css">
+<link rel="stylesheet" href="node_modules/@fintatech/fintachart/css/external/jqNumericField.min.css">
+<link rel="stylesheet" href="node_modules/@fintatech/fintachart/css/FintaChart.min.css">
+
+<!-- 2. Framework dependencies -->
+<script src="node_modules/@fintatech/fintachart/scripts/frameworks/jquery.min.js"></script>
+<script src="node_modules/@fintatech/fintachart/scripts/frameworks/jquery-ui.min.js"></script>
+<script src="node_modules/@fintatech/fintachart/scripts/frameworks/moment.min.js"></script>
+<script src="node_modules/@fintatech/fintachart/scripts/frameworks/Intl.min.js"></script>
+<script src="node_modules/@fintatech/fintachart/scripts/frameworks/i18nextXHRBackend.min.js"></script>
+<script src="node_modules/@fintatech/fintachart/scripts/frameworks/jquery-i18next.min.js"></script>
+
+<!-- 3. Main bundle -->
+<script src="node_modules/@fintatech/fintachart/scripts/FintaChart.min.js"></script>
+
+<!-- 4. Theme -->
+<script src="node_modules/@fintatech/fintachart/scripts/themes/defaultTheme.js"></script>
+
+<div id="chart"></div>
+
+<script>
+  // 5. Resource paths — must be set before creating the chart
+  FintaChart.ResourcePath.localization = 'node_modules/@fintatech/fintachart/localization/';
+  FintaChart.ResourcePath.htmlDialogs  = 'node_modules/@fintatech/fintachart/htmldialogs/';
+  FintaChart.SvgLoader.path            = 'node_modules/@fintatech/fintachart/img/svg-icons/';
+
+  // 6. Create chart
+  var chart = new FintaChart.Chart({
+    container: '#chart',
+    datafeed: myDatafeed,
+    instrument: {
+      symbol: 'EUR/GBP',
+      exchange: 'FOREX',
+      tickSize: 0.00001
+    },
+    timeFrame: { interval: 1, periodicity: FintaChart.Periodicity.HOUR },
+    theme: defaultTheme,
+    showToolbar: true,
+    showScrollbar: true,
+    supportedTimeFrames: ['1 Minutes', '5 Minutes', '15 Minutes', '1 Hour', '4 Hours', '1 Day', '1 Week']
+  });
+</script>
+```
+
+### React + TypeScript
+
+```tsx
+import { useEffect, useRef } from 'react';
+
+interface ChartProps {
+  instrument: FintaChart.IInstrument;
+}
+
+export function Chart({ instrument }: ChartProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const chartRef = useRef<FintaChart.Chart | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    FintaChart.ResourcePath.localization = 'node_modules/@fintatech/fintachart/localization/';
+    FintaChart.ResourcePath.htmlDialogs  = 'node_modules/@fintatech/fintachart/htmldialogs/';
+    FintaChart.SvgLoader.path            = 'node_modules/@fintatech/fintachart/img/svg-icons/';
+
+    chartRef.current = new FintaChart.Chart({
+      container: containerRef.current,
+      datafeed: myDatafeed,
+      instrument,
+      timeFrame: { interval: 1, periodicity: FintaChart.Periodicity.MINUTE },
+      theme: defaultTheme,
+      showToolbar: true,
+      showScrollbar: true,
+      supportedTimeFrames: ['1 Minutes', '5 Minutes', '15 Minutes', '1 Hour', '4 Hours', '1 Day']
+    });
+
+    return () => {
+      chartRef.current?.dispose();
+      chartRef.current = null;
+    };
+  }, [instrument]);
+
+  return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
+}
+```
+
+## Documentation and Examples
+
+Full documentation, API reference, and 14 runnable examples live on GitHub:
+
+- **Docs:** https://github.com/fintatech/fintachart/tree/master/docs
+- **Examples:** https://github.com/fintatech/fintachart/tree/master/examples
+- **Repository:** https://github.com/fintatech/fintachart
+
+## Browser Compatibility
+
+| Browser | Version |
+|---------|---------|
+| Chrome | 29+ |
+| Safari | 9+ |
+| Firefox | 28+ |
+| Opera | 17+ |
+| Edge | 17+ |
+| Android Browser | 5+ |
+
+## License
+
+Copyright (c) Fintatech B.V. All rights reserved.
+
+Free to use in local development environments. A commercial license is required for any deployed or network-accessible use. See [LICENSE.md](https://github.com/fintatech/fintachart/tree/master/LICENSE.md) for full terms, or contact **sales@fintatech.com**.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,38 @@
+# Third-Party Notices
+
+Trading Chart Designer includes the following third-party libraries,
+all distributed under the MIT License:
+
+| Library | Version | License | URL |
+|---------|---------|---------|-----|
+| jQuery | 3.x | MIT | https://jquery.com |
+| jQuery UI | 1.x | MIT | https://jqueryui.com |
+| jQuery UI Touch Punch | 0.2.3 | MIT | https://github.com/furf/jquery-ui-touch-punch |
+| Moment.js | 2.x | MIT | https://momentjs.com |
+| Intl.js | 1.x | MIT | https://github.com/nicubarbaros/Intl.js |
+| Detectizr | 2.x | MIT | https://github.com/nicubarbaros/detectizr |
+| dom-to-image-more | 3.x | MIT | https://github.com/1904labs/dom-to-image-more |
+| i18next XHR Backend | 3.x | MIT | https://github.com/i18next/i18next-xhr-backend |
+| jquery-i18next | 1.x | MIT | https://github.com/i18next/jquery-i18next |
+| Bootstrap 3 Datetimepicker | 4.x | MIT | https://github.com/Eonasdan/bootstrap-datetimepicker |
+
+## MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/basic-objects.html

@@ -0,0 +1,165 @@
+<!DOCTYPE HTML>
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <title>FintaChart Web & Mobile - Demo</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+        <link rel="apple-touch-icon-precomposed" href="img/favicon/favicon.ico">
+        <link rel="shortcut icon" href="img/favicon/favicon.ico">
+
+        <link rel="stylesheet" href="css/external/spectrum.min.css">
+        <link rel="stylesheet" href="css/external/toastr.min.css">
+        <link rel="stylesheet" href="css/external/jqNumericField.min.css">
+        <link rel="stylesheet" href="css/FintaChart.min.css">
+
+        <script src="scripts/frameworks/jquery.min.js"></script>
+        <script src="scripts/frameworks/jquery-ui.min.js"></script>
+        <script src="scripts/frameworks/Intl.min.js"></script>
+        <script src="scripts/frameworks/moment.min.js"></script>
+        <script src="scripts/frameworks/detectizr.min.js"></script>
+        <script src="scripts/frameworks/dom-to-image-more.min.js"></script>
+        <script src="scripts/frameworks/i18nextXHRBackend.min.js"></script>
+        <script src="scripts/frameworks/jquery-i18next.min.js"></script>
+        <script src="scripts/frameworks/jquery.ui.touch-punch.min.js"></script>
+        <script src="scripts/FintaChart.min.js"></script>
+        <script src="scripts/jsdataadapters/fileDataAdapter.js"></script>
+        <script src="scripts/jsdataadapters/restDataAdapter.js"></script>
+        <script src="scripts/jsdataadapters/webSocketDataAdapter.js"></script>
+        <script src="scripts/themes/darkTheme.js"></script>
+        <script src="scripts/themes/beetTheme.js"></script>
+        <script src="scripts/themes/defaultTheme.js"></script>
+        <script src="scripts/themes/grayTheme.js"></script>
+        <script src="scripts/themes/oliveTheme.js"></script>
+        <script src="scripts/themes/orangeTheme.js"></script>
+        <script src="scripts/themes/purpleTheme.js"></script>
+        <script src="scripts/themes/skyTheme.js"></script>
+        <script src="scripts/themes/tealTheme.js"></script>
+        <script src="scripts/themes/fintatechDarkTheme.js"></script>
+        <script src="scripts/miscs/templateFileDataAdapter.js"></script>
+
+        <style>
+            html,
+            body {
+                height: 100%;
+                margin: 0;
+                overflow: hidden;
+            }
+
+            #chartContainer {
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+    </head>
+
+<body id="tcdBody">
+    <div id="chartContainer"></div>
+    <script>
+        FintaChart.ResourcePath.localization = 'localization/';
+        const datafeed = fileDatafeed;
+
+        $(function () {
+            datafeed.init().then(df => {
+                let config = {
+                    chartContainer: '#chartContainer',
+                    width: '100%',
+                    height: '100%',
+                    theme: getTheme(),
+                    datafeed: df,
+                    templateDataProvider: templatesDummyDataProvider,
+                    instrument: {
+                        symbol: "EUR/GBP",
+                        exchange: "FOREX",
+                        company: "",
+                        tickSize: 0.00001
+                    },
+                    supportedTimeFrames: ['1 Minute', '5 Minutes', '15 Minutes', '1 Hour',
+                        '4 Hours'/*, '1 Day', '1 Month', '1 Year'*/
+                    ]
+                };
+                const chart = window.globalChart = $(config.chartContainer).FintaChart(config);
+
+                drawBasicObjects(chart)
+            });
+
+            function getTheme() {
+                const urlParams = new URLSearchParams(window.location.search);
+                const themeName = urlParams.get('theme') || '';
+
+                switch (themeName.toLowerCase()) {
+                    case 'fintatech':
+                        return fintatechDarkTheme;
+                    case 'dark':
+                        return darkTheme;
+                    case 'beet':
+                        return beetTheme;
+                    case 'gray':
+                        return grayTheme;
+                    case 'olive':
+                        return oliveTheme;
+                    case 'orange':
+                        return orangeTheme;
+                    case 'purple':
+                        return purpleTheme;
+                    case 'sky':
+                        return skyTheme;
+                    case 'teal':
+                        return tealTheme;
+                    default:
+                        return defaultTheme;
+                }
+            }
+
+            function drawBasicObjects(chart) {
+                const buyDate = new Date(2018, 8, 20, 5, 44);
+                const buyPrice = 0.8872;
+                const sellDate = new Date(2018, 9, 4, 5, 59);
+                const sellPrice = 0.88470;
+                const shapes = [];
+
+                shapes.push(generateUpArrow(buyDate, buyPrice));
+                shapes.push(generateDownArrow(sellDate, sellPrice));
+                shapes.push(generateLine(buyDate, buyPrice, sellDate, sellPrice));
+
+                chart.primaryPane.addShapes(shapes);
+            }
+
+            function generateLine(startDate, startValue, endDate, endValue) {
+                const lineSegment = new FintaChart.LineSegmentShape();
+                lineSegment.points[0].date = startDate;
+                lineSegment.points[0].value = startValue;
+                lineSegment.appendVisualDataPoint(new FintaChart.DataPoint({
+                    date: endDate,
+                    value: endValue,
+                }));
+                lineSegment.locked = true;
+
+                return lineSegment;
+            }
+
+            function generateUpArrow(date, price) {
+                const arrowUp = new FintaChart.ArrowUpShape();
+                arrowUp.points[0].date = date;
+                arrowUp.points[0].value = price;
+                arrowUp.tooltip.text = `BUY @ ${price}`;
+                arrowUp.locked = true;
+
+                return arrowUp;
+            }
+
+            function generateDownArrow(date, price) {
+                const arrowDown = new FintaChart.ArrowDownShape();
+                arrowDown.points[0].date = date;
+                arrowDown.points[0].value = price;
+                arrowDown.tooltip.text = `SELL @ ${price}`;
+                arrowDown.locked = true;
+
+                return arrowDown;
+            }
+        });
+    </script>
+</body>
+
+</html>