tsichart-core 1.0.4 → 2.0.0-beta.1

package/dist/ProcessGraphic-1f-FoGDy.js

@@ -1,154 +0,0 @@
-import { _ as __extends } from './_tslib-DYvz7dIO.js';
-import * as d3 from 'd3';
-import { H as HistoryPlayback } from './HistoryPlayback-DiflRzRf.js';
-import { U as Utils } from './Utils-CdKMmmwx.js';
-
-var ProcessGraphic = /** @class */ (function (_super) {
-    __extends(ProcessGraphic, _super);
-    function ProcessGraphic(renderTarget) {
-        var _this = _super.call(this, renderTarget) || this;
-        _this.currentCancelTrigger = null;
-        return _this;
-    }
-    ProcessGraphic.prototype.render = function (environmentFqdn, getToken, graphicSrc, data, chartOptions) {
-        this.graphicSrc = graphicSrc;
-        this.renderBase(environmentFqdn, getToken, data, chartOptions);
-    };
-    ProcessGraphic.prototype.loadResources = function () {
-        var _this = this;
-        return new Promise(function (resolve, reject) {
-            var image = new Image();
-            image.onload = function () {
-                _this.graphic = image;
-                _this.graphicOriginalWidth = image.width;
-                _this.graphicOriginalHeight = image.height;
-                _this.component.node().appendChild(_this.graphic);
-                resolve(null);
-            };
-            image.onerror = function (errorMessage) {
-                console.log(errorMessage);
-                reject(errorMessage);
-            };
-            image.src = _this.graphicSrc;
-        });
-    };
-    ProcessGraphic.prototype.draw = function () {
-        var graphicContainerWidth = this.renderTarget.clientWidth;
-        var graphicContainerHeight = this.renderTarget.clientHeight - this.playbackSliderHeight;
-        this.componentContainer
-            .style("width", "".concat(graphicContainerWidth, "px"))
-            .style("height", "".concat(graphicContainerHeight, "px"));
-        var resizedImageDim = this.getResizedImageDimensions(graphicContainerWidth, graphicContainerHeight, this.graphicOriginalWidth, this.graphicOriginalHeight);
-        this.component
-            .style("width", "".concat(resizedImageDim.width, "px"))
-            .style("height", "".concat(resizedImageDim.height, "px"));
-        this.drawBase();
-    };
-    ProcessGraphic.prototype.getResizedImageDimensions = function (containerWidth, containerHeight, imageWidth, imageHeight) {
-        if (containerWidth >= imageWidth && containerHeight >= imageHeight) {
-            return {
-                width: imageWidth,
-                height: imageHeight,
-            };
-        }
-        // Calculate the factor we would need to multiply width by to make it fit in the container.
-        // Do the same for height. The smallest of those two corresponds to the largest size reduction
-        // needed. Multiply both width and height by the smallest factor to a) ensure we maintain the
-        // aspect ratio of the image b) ensure the image fits inside the container.
-        var widthFactor = containerWidth / imageWidth;
-        var heightFactor = containerHeight / imageHeight;
-        var resizeFactor = Math.min(widthFactor, heightFactor);
-        return {
-            width: imageWidth * resizeFactor,
-            height: imageHeight * resizeFactor,
-        };
-    };
-    ProcessGraphic.prototype.getDataPoints = function (results) {
-        var _this = this;
-        if (Array.isArray(results)) {
-            var dataPoints = results.map(function (r, i) {
-                var value = _this.parseTsqResponse(r);
-                var color = typeof _this.tsqExpressions[i].color === "function"
-                    ? _this.tsqExpressions[i].color(value)
-                    : _this.tsqExpressions[i].color;
-                return {
-                    value: value,
-                    alias: _this.tsqExpressions[i].alias,
-                    x: _this.tsqExpressions[i].positionX,
-                    y: _this.tsqExpressions[i].positionY,
-                    color: _this.sanitizeAttribute(color),
-                    onClick: _this.tsqExpressions[i].onElementClick,
-                };
-            });
-            this.updateDataMarkers(dataPoints);
-        }
-    };
-    ProcessGraphic.prototype.updateDataMarkers = function (graphicValues) {
-        var _this = this;
-        var textElements = this.component
-            .selectAll("div")
-            .data(graphicValues);
-        var newElements = textElements
-            .enter()
-            .append("div")
-            .classed("tsi-process-graphic-label", true);
-        newElements.append("div").classed("title", true);
-        newElements.append("div").classed("value", true);
-        newElements
-            .merge(textElements)
-            .classed("tsi-dark", false)
-            .classed("tsi-light", false)
-            .classed(Utils.getTheme(this.chartOptions.theme), true)
-            .style("left", function (tsqe) { return "".concat(tsqe.x, "%"); })
-            .style("top", function (tsqe) { return "".concat(tsqe.y, "%"); });
-        // Trigger glow css animation when values update.
-        var highlightCssClass = "tsi-label-highlight";
-        this.component
-            .selectAll(".tsi-process-graphic-label")
-            .data(graphicValues)
-            .classed(highlightCssClass, true)
-            .classed("clickable", function (tsqe) { return tsqe.onClick !== null; })
-            .on("animationend", function () {
-            d3.select(this).classed(highlightCssClass, false);
-        })
-            .on("click", function (event, tsqe) {
-            if (typeof tsqe.onClick === "function") {
-                tsqe.onClick({
-                    timeStamp: _this.playbackControls.currentTimeStamp,
-                    value: tsqe.value,
-                    color: tsqe.color,
-                });
-            }
-        });
-        this.component
-            .selectAll(".title")
-            .data(graphicValues)
-            .text(function (tsqe) { return tsqe.alias || ""; });
-        this.component
-            .selectAll(".value")
-            .data(graphicValues)
-            .text(function (tsqe) {
-            return tsqe.value !== null ? Utils.formatYAxisNumber(tsqe.value) : "--";
-        })
-            .style("color", function (tsqe) { return tsqe.color; });
-    };
-    ProcessGraphic.prototype.parseTsqResponse = function (response) {
-        return response &&
-            response.properties &&
-            response.properties[0] &&
-            response.properties[0].values
-            ? response.properties[0].values[0]
-            : null;
-    };
-    ProcessGraphic.prototype.sanitizeAttribute = function (str) {
-        var sanitized = String(str);
-        var illegalChars = ['"', "'", "?", "<", ">", ";"];
-        illegalChars.forEach(function (c) {
-            sanitized = sanitized.split(c).join("");
-        });
-        return sanitized;
-    };
-    return ProcessGraphic;
-}(HistoryPlayback));
-
-export { ProcessGraphic as P };

package/dist/ProcessGraphic.d.ts

@@ -1,31 +0,0 @@
-import { H as HistoryPlayback, G as GraphicInfo } from './HistoryPlayback-DIhAsAOi.js';
-import TsqExpression from './TsqExpression.js';
-import 'd3';
-import './Component-CdI_Pyko.js';
-import './Enums-CEhu18PC.js';
-import './Interfaces-CdAVFIA6.js';
-import './PlaybackControls.js';
-import './ChartDataOptions-DBu_M5gU.js';
-
-declare class ProcessGraphic extends HistoryPlayback {
-    private graphicSrc;
-    constructor(renderTarget: Element);
-    render(environmentFqdn: string, getToken: () => Promise<string>, graphicSrc: string, data: Array<TsqExpression>, chartOptions: any): void;
-    protected loadResources(): Promise<GraphicInfo>;
-    protected draw(): void;
-    private getResizedImageDimensions;
-    protected getDataPoints(results: Array<IProcessGraphicLabelInfo>): void;
-    protected updateDataMarkers(graphicValues: Array<IProcessGraphicLabelInfo>): void;
-    protected parseTsqResponse(response: any): any;
-    protected sanitizeAttribute(str: any): string;
-}
-interface IProcessGraphicLabelInfo {
-    value: number;
-    alias: string;
-    x: number;
-    y: number;
-    color: string;
-    onClick: Function;
-}
-
-export { ProcessGraphic as default };

package/dist/ProcessGraphic.js

@@ -1,7 +0,0 @@
-export { P as default } from './ProcessGraphic-1f-FoGDy.js';
-import './_tslib-DYvz7dIO.js';
-import 'd3';
-import './HistoryPlayback-DiflRzRf.js';
-import './Component-C9fQU2ia.js';
-import './Utils-CdKMmmwx.js';
-import 'moment-timezone';

package/dist/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.