tsichart-core 1.0.5 → 2.0.0-beta.1

package/package.json

@@ -1,124 +1,115 @@
-{
-  "name": "tsichart-core",
-  "version": "1.0.5",
-  "description": "Time Series Interactive Charts - A comprehensive JavaScript library for visualizing time series data with interactive charts including line charts, bar charts, pie charts, heatmaps, scatter plots, and more.",
-  "keywords": [
-    "timeseries",
-    "time-series",
-    "charts",
-    "visualization",
-    "interactive",
-    "data-viz",
-    "d3",
-    "typescript",
-    "analytics",
-    "dashboard",
-    "tsichart",
-    "line-chart",
-    "heatmap"
-  ],
-  "main": "tsiclient.js",
-  "types": "tsiclient.d.ts",
-  "module": "tsiclient.js",
-  "exports": {
-    ".": {
-      "types": "./tsiclient.d.ts",
-      "import": "./tsiclient.js",
-      "require": "./tsiclient.js",
-      "default": "./tsiclient.js"
-    },
-    "./tsiclient.css": "./tsiclient.css",
-    "./tsiclient.min.css": "./tsiclient.min.css",
-    "./*": {
-      "types": "./dist/*.d.ts",
-      "import": "./dist/*.js",
-      "default": "./dist/*.js"
-    }
-  },
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ],
-  "files": [
-    "dist",
-    "tsiclient.js",
-    "tsiclient.d.ts",
-    "tsiclient.css",
-    "tsiclient.min.css",
-    "README.md",
-    "LICENSE"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Aenas11/tsichart-core.git"
-  },
-  "bugs": {
-    "url": "https://github.com/Aenas11/tsichart-core/issues"
-  },
-  "homepage": "https://aenas11.github.io/tsichart-core/",
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "author": "Alex Sysoiev <alexander.sysoev@gmail.com>",
-  "license": "MIT",
-  "engines": {
-    "node": "^22.5.1",
-    "npm": "^10.8.2"
-  },
-  "scripts": {
-    "start": "webpack-dev-server --config webpack.dev.js",
-    "build": "npm run clean && npm run rollup && npm run webpack && npm run post-build",
-    "clean": "shx rm -rf dist && shx rm -rf build_artifacts",
-    "rollup": "rollup --c",
-    "webpack": "webpack --config webpack.prod.js",
-    "webpack_dev": "webpack --config webpack.dev.js",
-    "copy-root-files": "shx cp dist/tsiclient.js . && shx cp dist/tsiclient.d.ts . && shx cp dist/tsiclient.css . && shx cp dist/tsiclient.min.css .",
-    "pack": "shx mkdir -p build_artifacts && npm pack && shx mv *.tgz build_artifacts/",
-    "post-build": "npm run copy-root-files && npm run pack",
-    "umd-analyze": "webpack-bundle-analyzer ./build_artifacts/umd_stats.json"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-terser": "^0.4.4",
-    "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^7.0.2",
-    "file-loader": "^6.2.0",
-    "mini-css-extract-plugin": "^2.9.4",
-    "postcss-url": "^10.1.3",
-    "rollup": "^4.52.4",
-    "rollup-plugin-auto-external": "^2.0.0",
-    "rollup-plugin-delete": "^3.0.1",
-    "rollup-plugin-dts": "^6.2.3",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-typescript2": "^0.36.0",
-    "rollup-plugin-visualizer": "^6.0.4",
-    "sass-loader": "^16.0.5",
-    "shx": "^0.4.0",
-    "style-loader": "^4.0.0",
-    "terser-webpack-plugin": "^5.3.14",
-    "ts-loader": "^9.5.4",
-    "tslib": "^2.8.1",
-    "typescript": "^5.9.3",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.102.1",
-    "webpack-bundle-analyzer": "^4.10.2",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.2",
-    "webpack-merge": "^6.0.1"
-  },
-  "dependencies": {
-    "@types/awesomplete": "^1.1.16",
-    "@types/d3": "^7.4.3",
-    "awesomplete": "^1.1.7",
-    "d3": "^7.9.0",
-    "d3-interpolate-path": "^2.3.0",
-    "d3-voronoi": "^1.1.4",
-    "moment": "^2.30.1",
-    "moment-timezone": "^0.6.0",
-    "sass": "1.93.2",
-    "split.js": "^1.6.5"
-  }
-}
+{
+  "name": "tsichart-core",
+  "version": "2.0.0-beta.1",
+  "description": "Framework-agnostic time series charting library - Core package",
+  "keywords": [
+    "timeseries",
+    "time-series",
+    "charts",
+    "visualization",
+    "interactive",
+    "data-viz",
+    "d3",
+    "typescript",
+    "analytics",
+    "dashboard",
+    "tsichart",
+    "line-chart",
+    "heatmap"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.mjs",
+      "require": "./dist/components/*.js"
+    },
+    "./models/*": {
+      "types": "./dist/models/*.d.ts",
+      "import": "./dist/models/*.mjs",
+      "require": "./dist/models/*.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "import": "./dist/utils/index.mjs",
+      "require": "./dist/utils/index.js"
+    },
+    "./styles": "./dist/styles/index.css",
+    "./styles/*": "./dist/styles/*.css"
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Aenas11/tsichart-core.git",
+    "directory": "packages/core"
+  },
+  "bugs": {
+    "url": "https://github.com/Aenas11/tsichart-core/issues"
+  },
+  "homepage": "https://aenas11.github.io/tsichart-core/",
+  "author": "Alex Sysoiev <alexander.sysoev@gmail.com>",
+  "license": "MIT",
+  "peerDependencies": {
+    "d3": "^7.0.0"
+  },
+  "dependencies": {
+    "@types/awesomplete": "^1.1.16",
+    "@types/d3": "^7.4.3",
+    "awesomplete": "^1.1.7",
+    "d3": "^7.9.0",
+    "d3-interpolate-path": "^2.3.0",
+    "d3-voronoi": "^1.1.4",
+    "moment": "^2.30.1",
+    "moment-timezone": "^0.6.0",
+    "split.js": "^1.6.5"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^24.7.2",
+    "jest": "^29.7.0",
+    "jest-canvas-mock": "^2.5.2",
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss-url": "^10.1.3",
+    "rollup": "^4.52.4",
+    "rollup-plugin-auto-external": "^2.0.0",
+    "rollup-plugin-delete": "^3.0.1",
+    "rollup-plugin-dts": "^6.2.3",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "rollup-plugin-visualizer": "^6.0.4",
+    "sass": "1.93.2",
+    "shx": "^0.4.0",
+    "ts-jest": "^29.4.5",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "rollup -c rollup.config.mjs",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "clean": "shx rm -rf dist coverage"
+  }
+}

package/README.MD

@@ -1,171 +0,0 @@
-# @tsichart/core - Time Series Interactive Charts
-
-A powerful, flexible JavaScript library for visualizing time series data with **interactive** charts. Built with TypeScript and D3.js, this library provides a rich set of chart components including line charts, bar charts, pie charts, heatmaps, scatter plots, and more.
-
-## Features
-
-✨ **Rich Component Library** - 20+ pre-built, customizable chart components  
-📊 **Interactive Visualizations** - Tooltips, zooming, panning, and dynamic data updates  
-🎨 **Themeable** - Built-in light and dark themes with customization options  
-📱 **Responsive** - Charts adapt to different screen sizes  
-🎯 **TypeScript Support** - Full type definitions included  
-🌳 **Tree-shakeable** - Import only the components you need  
-📦 **Zero Configuration** - Works out of the box with sensible defaults  
-
-**Note:** This library is a community-maintained fork of the original Microsoft Time Series Insights Client, rebranded as **Time Series Interactive Charts** and updated for generic time series visualization use cases.
-
-[![npm version](https://badge.fury.io/js/tsichart-core.svg)](https://www.npmjs.com/package/tsichart-core)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
-[![GitHub](https://img.shields.io/badge/GitHub-Repository-blue?logo=github)](https://github.com/Aenas11/tsichart-core)
-[![Live Examples](https://img.shields.io/badge/Examples-Live%20Demo-green)](https://aenas11.github.io/tsichart-core/) 
-
-## Installation
-
-### NPM
-
-```bash
-npm install tsichart-core
-```
-
-### Yarn
-
-```bash
-yarn add tsichart-core
-```
-
-## Quick Start
-
-### Import All Components
-
-```js
-import TsiClient from "tsichart-core";
-import "tsichart-core/tsiclient.css";
-
-// Create a line chart
-let tsiClient = new TsiClient();
-let lineChart = new tsiClient.ux.LineChart(document.getElementById('chart'));
-
-// Prepare your data
-const data = [{
-  "Series1": {
-    "": {
-      "2023-01-01T00:00:00Z": { avg: 10 },
-      "2023-01-01T01:00:00Z": { avg: 15 },
-      "2023-01-01T02:00:00Z": { avg: 13 }
-    }
-  }
-}];
-
-// Render the chart
-lineChart.render(data, { theme: 'light', legend: 'compact' });
-```
-
-### Import Individual Components (Recommended for Tree-shaking)
-
-```js
-import LineChart from 'tsichart-core/LineChart';
-import 'tsichart-core/tsiclient.css';
-
-// Create and render chart
-let lineChart = new LineChart(document.getElementById('chart'));
-lineChart.render(data, { theme: 'light' });
-```
-
-## Available Components
-
-**tsiclient** provides the following visualization components:
-
-- **LineChart** - Render time series data as lines
-- **BarChart** - Display time series data as bars with timestamp slider
-- **PieChart** - Show time series data as pie charts with timestamp slider  
-- **Heatmap** - Visualize time series data as a heatmap
-- **ScatterPlot** - Plot time series data points as a scatter plot
-- **AvailabilityChart** - Display data availability over time
-- **Grid** - Render time series data in a tabular format
-- **Hierarchy** - Display hierarchical data structures
-- **EventsTable** - Show events in a table format
-- **DateTimePicker** - UI component for selecting date/time ranges
-- **TimezonePicker** - UI component for timezone selection
-- **Slider** - Time slider component
-- **ModelSearch** - Search component for time series models
-- **HierarchyNavigation** - Navigate hierarchical time series data
-- **ProcessGraphic** - Display process graphics with data overlays
-- **ColorPicker** - Color selection component
-- And more...
-
-For detailed usage examples and API documentation, see the [UX Components documentation](docs/UX.md).
-
-## Data Format
-
-All components work with a consistent JSON data structure. Here's the basic format:
-
-```js
-const data = [{
-  "SeriesName": {
-    "SplitByValue": {  // Use empty string "" if no split
-      "2023-01-01T00:00:00Z": {
-        avg: 10,    // Your metric values
-        min: 8,
-        max: 12
-      },
-      "2023-01-01T01:00:00Z": {
-        avg: 15,
-        min: 13,
-        max: 17
-      }
-    }
-  }
-}];
-```
-
-**You are responsible for:**
-- Fetching time series data from your data source (API, database, etc.)
-- Transforming your data into the expected format
-- Handling any authentication/authorization
-
-See the [UX Components documentation](docs/UX.md) for detailed format specifications for each chart type.
-
-## Resources
-
-* **[Live Examples](https://aenas11.github.io/tsichart-core/)** - Interactive examples hosted on GitHub Pages
-* [Full API Documentation](docs/UX.md)
-* [Example Source Code](pages/examples/) - Check the `pages/examples/` directory for working examples
-
-
-## Contributing
-
-Contributions are welcome! This is a community-maintained project. Please feel free to:
-
-- Report bugs and request features via [GitHub Issues](https://github.com/Aenas11/tsichart-core/issues)
-- Submit pull requests
-- Improve documentation
-- Share examples of your usage
-
-## License
-
-MIT License - see [LICENSE](LICENSE) file for details.
-
-Original work Copyright (c) Microsoft Corporation  
-Modified work Copyright (c) 2024 [Alexander Sysoiev]
-
-## Acknowledgments
-
-This library is based on the original Microsoft Time Series Insights (TSI) JavaScript SDK, which has been deprecated. We've rebranded it as **Time Series Interactive Charts** and modernized it for generic time series visualization use cases.
-
-**TSI** now stands for **Time Series Interactive** - reflecting the library's focus on interactive data visualization rather than a specific cloud service.
-
-## Migration from Original TSIClient
-
-If you're migrating from the original Microsoft `tsiclient` package:
-
-1. **Package name change**: Update your imports from `tsiclient` to `tsichart-core`
-2. **No breaking changes to component APIs**: The chart components work the same way
-3. **Remove server calls**: You'll need to handle data fetching yourself (Azure TSI service was retired)
-4. **Update documentation references**: Use the new documentation instead of Azure TSI docs
-- The `tsiClient.server` object and all related methods have been removed  
-- Focus is now exclusively on client-side visualization components
-
-
-## Contributing
-
-This project welcomes contributions and suggestions.

package/dist/AggregateExpression.d.ts

@@ -1,13 +0,0 @@
-import { C as ChartDataOptions } from './ChartDataOptions-D0BJuRZy.js';
-import './Interfaces-R_1l9lIT.js';
-
-declare class AggregateExpression extends ChartDataOptions {
-    measureObject: any;
-    splitByObject: any;
-    predicate: Object;
-    visibleSplitByCap: number;
-    constructor(predicateObject: any, measureObject: any, measureTypes: Array<string>, searchSpan: any, splitByObject: any, colorOrOptionsObject: any, alias?: string, contextMenu?: Array<any>);
-    toTsx(roundFromTo?: boolean): {};
-}
-
-export { AggregateExpression as default };

package/dist/AggregateExpression.js

@@ -1,70 +0,0 @@
-import { _ as __extends, a as __assign } from './_tslib-BYFmvNeL.js';
-import { U as Utils } from './Utils-DDGqSryb.js';
-import { C as ChartDataOptions } from './ChartDataOptions-CNTSB636.js';
-import 'd3';
-import 'moment-timezone';
-
-var MAXCARD = 150000;
-var AggregateExpression = /** @class */ (function (_super) {
-    __extends(AggregateExpression, _super);
-    function AggregateExpression(predicateObject, measureObject, measureTypes, searchSpan, splitByObject, colorOrOptionsObject, alias, contextMenu) {
-        if (splitByObject === void 0) { splitByObject = null; }
-        var _this = _super.call(this, (typeof (colorOrOptionsObject) === 'object' && !!colorOrOptionsObject) ? __assign(__assign({}, colorOrOptionsObject), { searchSpan: searchSpan, measureTypes: measureTypes }) : { color: colorOrOptionsObject, searchSpan: searchSpan, measureTypes: measureTypes, alias: alias, contextMenu: contextMenu }) || this;
-        _this.visibleSplitByCap = 10;
-        _this.predicate = predicateObject;
-        _this.splitByObject = splitByObject;
-        _this.measureObject = ((measureTypes.length == 1 && measureTypes[0] == 'count') || measureObject.property == 'Events Count') ? { count: {} } : { input: measureObject };
-        return _this;
-    }
-    AggregateExpression.prototype.toTsx = function (roundFromTo) {
-        var _this = this;
-        if (roundFromTo === void 0) { roundFromTo = false; }
-        var tsx = {};
-        var shiftMillis = Utils.parseShift(this.timeShift, this.startAt, this.searchSpan);
-        var fromMillis = this.searchSpan.from.valueOf() + shiftMillis;
-        var toMillis = this.searchSpan.to.valueOf() + shiftMillis;
-        var bucketSizeInMillis = Utils.parseTimeInput(this.searchSpan.bucketSize);
-        var roundedFromMillis = Math.floor((fromMillis + 62135596800000) / (bucketSizeInMillis)) * (bucketSizeInMillis) - 62135596800000;
-        var roundedToMillis = Math.ceil((toMillis + 62135596800000) / (bucketSizeInMillis)) * (bucketSizeInMillis) - 62135596800000;
-        if (roundFromTo) {
-            fromMillis = roundedFromMillis;
-            toMillis = roundedToMillis;
-        }
-        tsx['searchSpan'] = { from: (new Date(fromMillis)).toISOString(), to: (new Date(toMillis)).toISOString() };
-        // create aggregates
-        var measures = (this.measureObject.hasOwnProperty('count')) ? [{ count: {} }]
-            : this.measureTypes.reduce(function (p, c) {
-                var measureObject = {};
-                if (c == 'count')
-                    measureObject = { count: {} };
-                else
-                    measureObject[c] = _this['measureObject'];
-                p.push(measureObject);
-                return p;
-            }, []);
-        var aggregateObject = {};
-        var dimensionObject = { dateHistogram: { input: { builtInProperty: "$ts" }, breaks: { size: this.searchSpan.bucketSize } } };
-        if (this.splitByObject != null) {
-            var bucketsCeil = Math.ceil((roundedToMillis - roundedFromMillis) / bucketSizeInMillis);
-            aggregateObject['dimension'] = { uniqueValues: { input: this.splitByObject, take: Math.floor(MAXCARD / bucketsCeil) } };
-            aggregateObject['aggregate'] = { dimension: dimensionObject, measures: measures };
-        }
-        else {
-            aggregateObject['dimension'] = dimensionObject;
-            aggregateObject['measures'] = measures;
-        }
-        var aggregates = [aggregateObject];
-        tsx['aggregates'] = aggregates;
-        // create predicate
-        var predicate;
-        if (!this.measureObject.hasOwnProperty('count'))
-            predicate = { and: [this.predicate, { not: { eq: { left: this.measureObject.input, right: { 'double': null } } } }] };
-        else
-            predicate = this.predicate;
-        tsx['predicate'] = predicate;
-        return tsx;
-    };
-    return AggregateExpression;
-}(ChartDataOptions));
-
-export { AggregateExpression as default };