tsichart-core 1.0.0

package/dist/ProcessGraphic-CixT-zZl.js

@@ -0,0 +1,154 @@
+import { _ as __extends } from './_tslib-5_9pMg1F.js';
+import * as d3 from 'd3';
+import { H as HistoryPlayback } from './HistoryPlayback-SjeQbAPq.js';
+import { U as Utils } from './Utils-C_j8IgZh.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

@@ -0,0 +1,31 @@
+import { H as HistoryPlayback, G as GraphicInfo } from './HistoryPlayback-BmA-54lT.js';
+import TsqExpression from './TsqExpression.js';
+import 'd3';
+import './Component-Rp30sSAW.js';
+import './Enums-ChUuTtHV.js';
+import './Interfaces-BKRQ685G.js';
+import './PlaybackControls.js';
+import './ChartDataOptions-DBS28b1-.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

@@ -0,0 +1,7 @@
+export { P as default } from './ProcessGraphic-CixT-zZl.js';
+import './_tslib-5_9pMg1F.js';
+import 'd3';
+import './HistoryPlayback-SjeQbAPq.js';
+import './Component-CofgyEw0.js';
+import './Utils-C_j8IgZh.js';
+import 'moment-timezone';

package/dist/README.MD

@@ -0,0 +1,189 @@
+# @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.
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![npm version](https://badge.fury.io/js/%40tsichart%2Fcore.svg)](https://badge.fury.io/js/@tsichart/core) 
+
+## Installation
+
+### NPM
+
+```bash
+npm install @tsichart/core
+```
+
+### Yarn
+
+```bash
+yarn add @tsichart/core
+```
+
+### CDN
+
+You can also load directly from a CDN:
+
+```html
+<script src="https://unpkg.com/@tsichart/core@latest/tsiclient.js"></script>
+<link rel="stylesheet" type="text/css" href="https://unpkg.com/@tsichart/core@latest/tsiclient.css">
+```
+
+## 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
+
+* [Full API Documentation](docs/UX.md)
+* [Live Examples](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/yourusername/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 [Your Name]
+
+## 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
+
+**Version 1.3.0:**
+Starting with version 1.3.0, discrete events and state transitions will be represented just like numeric time series in the LineChart component. This may be a breaking change for users representing non-numeric series in the line chart using the "events" and "states" Chart Options. For usage instructions, consult [this example](https://tsiclientsample.azurewebsites.net/noauth/multipleseriestypes.html) and the associated [documentation](https://github.com/microsoft/tsiclient/blob/master/docs/UX.md#line-chart).
+
+
+## Contributing
+
+This project welcomes contributions and suggestions.  Most contributions require you to agree to a
+Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
+the rights to use your contribution. For details, visit https://cla.microsoft.com.
+
+When you submit a pull request, a CLA-bot will automatically determine whether you need to provide
+a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions
+provided by the bot. You will only need to do this once across all repos using our CLA.
+
+This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
+For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
+contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.