@dexteel/mesf-core 6.2.1 → 6.3.0

package/dist/pages/trendings/components/chart/sections/trending-chart.d.ts

@@ -8,5 +8,5 @@ interface Props {
     chartData: any;
     setChartData: any;
 }
-export declare const TrendingChart: ({ series, chartOptions, setChartOptions, chartData, setCursorData, setChartData, }: Props) => React.JSX.Element;
+export declare const TrendingChart: React.MemoExoticComponent<({ series, chartOptions, setChartOptions, chartData, setCursorData, setChartData, }: Props) => React.JSX.Element>;
 export {};

package/dist/pages/trendings/components/chart/styles/TrendingStyles.d.ts

@@ -1 +1,2 @@
 export declare const useTrendingStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"datetimePicker" | "select" | "labelOptions" | "isPublicCheckbox" | "navigatorButton" | "iconContainer" | "optionContainer" | "optionLabel" | "inputCustom">;
+export declare const useModalStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"checkbox" | "modalBody" | "title" | "chip" | "errorLabel" | "colorPicker">;

package/dist/pages/trendings-v2/TrendingsPageV2.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { View, ViewTag, ViewTagDataSet } from "./components/chart/models/TrendingModelsV2";
+export declare const useSearchViews: ({ autoRefresh, }: {
+    autoRefresh?: boolean;
+}) => import("@tanstack/react-query").UseQueryResult<View[], unknown>;
+export declare const useSearchViewTags: ({ viewId }: {
+    viewId: number | null;
+}) => import("@tanstack/react-query").UseQueryResult<ViewTag[], unknown>;
+export declare const useSearchSeries: ({ start, end, tagIds, autoRefresh, }: {
+    start: number;
+    end: number;
+    tagIds: number[];
+    autoRefresh?: boolean;
+}) => import("@tanstack/react-query").UseQueryResult<ViewTagDataSet[][], Error>;
+export declare const TrendingsPageV2: () => React.JSX.Element;

package/dist/pages/trendings-v2/components/chart/components/ColorPickerV2.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface ColorPickerV2Props {
+    color: string;
+    onColorChange: (newColor: string) => void;
+}
+export declare const ColorPickerV2: React.FC<ColorPickerV2Props>;
+export {};

package/dist/pages/trendings-v2/components/chart/components/DraggableLineControlV2.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { ChartArea } from "../utils/coordinateConversion";
+interface DraggableLineControlV2Props {
+    /** The chart's pixel boundaries */
+    chartArea: ChartArea;
+    /** Initial pixel X position for the cursor */
+    initialLeft: number;
+    /** Callback when drag ends with new pixel position */
+    onDragEnd: (newLeft: number) => void;
+    /** Optional: Callback during dragging for real-time updates */
+    onChange?: (newLeft: number) => void;
+    /** Color of the cursor line (e.g., 'red', 'blue', '#ff0000') */
+    color: string;
+    /** Optional: X position of the other cursor to prevent overlap */
+    otherLineCoord?: number;
+    /** Minimum spacing between cursors in pixels */
+    minSpacing?: number;
+    /** Optional: Timestamp to display at the bottom of the cursor */
+    timestamp?: number;
+}
+/**
+ * External draggable cursor control for the trending chart
+ * Renders a draggable pin handle with a vertical line that can be positioned over the chart
+ */
+declare const DraggableLineControlV2: React.FC<DraggableLineControlV2Props>;
+export default DraggableLineControlV2;

package/dist/pages/trendings-v2/components/chart/components/TagFolderCustomNodeV2.d.ts

@@ -0,0 +1,20 @@
+import { NodeModel, RenderParams } from "@minoru/react-dnd-treeview";
+import React from "react";
+import { TagFromTree } from "../../../../trendings/components/chart/models/TagsTree.model";
+interface CustomNodeProps {
+    node: NodeModel<TagFromTree>;
+    setContextMenuOver: (data: NodeModel<TagFromTree>, e: React.MouseEvent<HTMLElement>) => void;
+    options: RenderParams;
+    openTagFolders: {
+        [TagId: string]: string | number;
+        [TagId: number]: string | number;
+    };
+    handleSelect: (node: NodeModel<TagFromTree>) => void;
+    setOpenTagFolders: React.Dispatch<React.SetStateAction<{
+        [TagId: string]: string | number;
+        [TagId: number]: string | number;
+    }>>;
+    isSelected: boolean;
+}
+export declare const TagFolderCustomNodeV2: React.FC<CustomNodeProps>;
+export {};

package/dist/pages/trendings-v2/components/chart/components/TagSearchInput.d.ts

@@ -0,0 +1,10 @@
+import { NodeModel } from "@minoru/react-dnd-treeview";
+import React from "react";
+import { TagFromTree } from "../../../../trendings/components/chart/models/TagsTree.model";
+import { TagSearchResult } from "../hooks/useTagSearch";
+interface TagSearchInputProps {
+    tagNodes: NodeModel<TagFromTree>[];
+    onSearchResultClick: (result: TagSearchResult) => void;
+}
+export declare const TagSearchInput: React.FC<TagSearchInputProps>;
+export {};

package/dist/pages/trendings-v2/components/chart/components/TagsTreeModalV2.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { TagFromTree } from "../../../../trendings/components/chart/models/TagsTree.model";
+interface Props {
+    open: boolean;
+    handleClose: () => void;
+    onTagSelect: (selected: TagFromTree) => void;
+}
+export declare const TagsTreeModalV2: ({ open, handleClose, onTagSelect }: Props) => React.JSX.Element;
+export {};

package/dist/pages/trendings-v2/components/chart/components/modals/LoadViewModalV2.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface Props {
+    open: boolean;
+    handleClose: () => void;
+}
+export declare const LoadViewModalV2: ({ open, handleClose }: Props) => React.JSX.Element;
+export {};

package/dist/pages/trendings-v2/components/chart/components/modals/SaveUpdateDeleteViewModalV2.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { View } from "../../models/TrendingModelsV2";
+interface Props {
+    open: boolean;
+    mode: "create" | "update" | "delete";
+    handleClose: (shouldUpdate: boolean) => void;
+    view?: View | null;
+}
+export declare const SaveUpdateDeleteViewModalV2: ({ open, mode, handleClose, view, }: Props) => React.JSX.Element;
+export {};

package/dist/pages/trendings-v2/components/chart/context/TrendingContextV2.d.ts

@@ -0,0 +1,50 @@
+import React from "react";
+import type { scopeType } from "../../../../trendings/components/chart/models/scopes.model";
+import type { TagMinMax } from "../hooks/useSeriesMinMax";
+import type { ChartConfig, CursorData, View, ViewTagsMap } from "../models/TrendingModelsV2";
+interface TrendingState {
+    viewTags: ViewTagsMap;
+    viewSelected: View | null;
+    views: View[];
+    timeScopeStart: Date;
+    timeScopeEnd: Date;
+    scope: scopeType;
+    shouldRefetchSeries: boolean;
+    cursorData: CursorData | null;
+    chartConfig: ChartConfig;
+    seriesMinMax: TagMinMax;
+    highlightedSeries: string | null;
+    cursor1Time: number;
+    cursor2Time: number;
+    selectedCursor: "cursor1" | "cursor2" | null;
+}
+interface TrendingActions {
+    setViewTags: (viewTags: ViewTagsMap) => void;
+    setViewTagsAndRefetch: (viewTags: ViewTagsMap) => void;
+    setViewSelected: (view: View | null) => void;
+    setViews: (views: View[]) => void;
+    setTotalScope: (scope: {
+        start?: Date;
+        end?: Date;
+        scope?: scopeType;
+        graphPan?: boolean;
+    }) => void;
+    setCursorData: (data: CursorData | null) => void;
+    setChartConfig: (config: Partial<ChartConfig>) => void;
+    triggerSeriesRefetch: () => void;
+    setSeriesMinMax: (minMax: TagMinMax) => void;
+    highlightSeries: (seriesName: string | null) => void;
+    updateCursor1Time: (time: number) => void;
+    updateCursor2Time: (time: number) => void;
+    setSelectedCursor: (cursor: "cursor1" | "cursor2" | null) => void;
+    resetCursors: () => void;
+}
+interface TrendingContextValue {
+    state: TrendingState;
+    actions: TrendingActions;
+}
+export declare const TrendingProviderV2: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useTrendingContextV2: () => TrendingContextValue;
+export {};

package/dist/pages/trendings-v2/components/chart/hooks/useCursorData.d.ts

@@ -0,0 +1,6 @@
+import type { CursorData, ViewTagDataSet, ViewTagsMap } from "../models/TrendingModelsV2";
+/**
+ * Hook to calculate cursor data (Y1, Y2, Y2-Y1, min/max between cursors)
+ * Uses "last value before cursor" strategy to avoid interpolation issues with sparse data
+ */
+export declare const useCursorData: (cursor1Time: number, cursor2Time: number, series: ViewTagDataSet[][] | undefined, viewTags: ViewTagsMap) => CursorData | null;

package/dist/pages/trendings-v2/components/chart/hooks/useSeriesMinMax.d.ts

@@ -0,0 +1,12 @@
+import type { ViewTagDataSet } from "../models/TrendingModelsV2";
+export interface TagMinMax {
+    [tagId: number]: {
+        min: number;
+        max: number;
+    };
+}
+/**
+ * Hook to calculate overall min/max values from series data
+ * This is optimized for performance by only calculating once per series data change
+ */
+export declare const useSeriesMinMax: (series: ViewTagDataSet[][] | undefined, tagIds: number[]) => TagMinMax;

package/dist/pages/trendings-v2/components/chart/hooks/useTagSearch.d.ts

@@ -0,0 +1,30 @@
+import { NodeModel } from "@minoru/react-dnd-treeview";
+import React from "react";
+import { TagFromTree } from "../../../../trendings/components/chart/models/TagsTree.model";
+export interface TagSearchResult {
+    id: number;
+    name: string;
+    path: string;
+    isDroppable: boolean;
+    hasChildren: boolean;
+    tagTypeCode: string;
+    node: NodeModel<TagFromTree>;
+}
+interface UseTagSearchProps {
+    tagNodes: NodeModel<TagFromTree>[];
+    externalSearchTerm?: string;
+    onSearchTermChange?: (term: string) => void;
+}
+export declare const useTagSearch: ({ tagNodes, externalSearchTerm, onSearchTermChange, }: UseTagSearchProps) => {
+    searchTerm: string;
+    searchResults: TagSearchResult[];
+    showSearchResults: boolean;
+    focusedSearchIndex: number;
+    searchResultsRefs: React.MutableRefObject<(HTMLElement | null)[]>;
+    handleSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => TagSearchResult | undefined;
+    scrollFocusedItemIntoView: (index: number) => void;
+    clearSearch: () => void;
+    triggerSearch: (term: string) => void;
+};
+export {};

package/dist/pages/trendings-v2/components/chart/models/TrendingModelsV2.d.ts

@@ -0,0 +1,104 @@
+export interface ViewTag {
+    TagId: number;
+    TagName: string;
+    Alias: string;
+    Color: string;
+    MinScale: number;
+    MaxScale: number;
+    IsVisible: boolean;
+    IsAutoScale: boolean;
+    Unit: string;
+    TagType: "A" | "D";
+    TagTypeCode?: string;
+}
+export interface View {
+    ViewId: number;
+    ViewName: string;
+    IsPublic: boolean;
+    CreatedBy?: string;
+    CreatedDate?: Date;
+}
+export interface ViewTagsMap {
+    [tagId: number]: {
+        viewTag: ViewTag;
+        order: number;
+    };
+}
+export interface EChartsDataPoint {
+    timestamp: number;
+    value: number | null;
+}
+export interface ViewTagDataSet {
+    timestamp: string | number;
+    value: number | null;
+}
+export interface CursorData {
+    x1: number;
+    x2: number;
+    tagValues: {
+        [tagId: number]: {
+            y1: number;
+            y2: number;
+            y2y1: number;
+            pmin: {
+                x: number;
+                y: number;
+            };
+            pmax: {
+                x: number;
+                y: number;
+            };
+        };
+    };
+}
+export interface ChartConfig {
+    showLegend: boolean;
+    showTooltip: boolean;
+    animation: boolean;
+    theme: "light" | "dark";
+}
+export interface CustomOptions {
+    showGridLines: boolean;
+    showSymbols: boolean;
+    smoothLines: boolean;
+    showLegend: boolean;
+    showTooltip: boolean;
+    combinedView: boolean;
+    showToolbox: boolean;
+    showYAxisNames: boolean;
+}
+export interface TagTableRow {
+    id: number;
+    visible: boolean;
+    type: "A" | "D";
+    alias: string;
+    tagName: string;
+    color: string;
+    minScale: number;
+    maxScale: number;
+    autoScale: boolean;
+    unit: string;
+    y1: number;
+    y2: number;
+    y2y1: number;
+    min: number;
+    max: number;
+    overallMin: number;
+    overallMax: number;
+}
+export interface TagFromTree {
+    Tagkey: number;
+    TagId: number;
+    TagName: string;
+    TagFolderId: number | null;
+    ParentTagFolderId: number | null;
+    TagFolderName: string | null;
+    IsFolder: boolean;
+    Color: string | null;
+    Alias: string | null;
+    MinScale: number | null;
+    MaxScale: number | null;
+    Unit: string | null;
+    TagTypeCode: string;
+    IsActive: boolean;
+}

package/dist/pages/trendings-v2/components/chart/repository/TrendingRepositoryV2.d.ts

@@ -0,0 +1 @@
+export { changeTagFolderToTag, deleteAllViewTagsFromView, deleteTagFolder, deleteView, deleteViewTag, getSeriesData, getTagsTree, getViews, getViewTags, saveTagDefaults, upsertTagFolder, upsertView, upsertViewTag, } from "../../../../trendings/components/chart/repository/TrendingRepository";

package/dist/pages/trendings-v2/components/chart/sections/HeaderSectionV2.d.ts

@@ -0,0 +1,10 @@
+import type { EChartsInstance } from "echarts-for-react";
+import React from "react";
+interface HeaderSectionProps {
+    autoRefresh: boolean;
+    setAutoRefresh: (value: boolean) => void;
+    setChartOptions?: (options: any) => void;
+    chartInstance: EChartsInstance | null;
+}
+export declare const HeaderSectionV2: React.FC<HeaderSectionProps>;
+export {};

package/dist/pages/trendings-v2/components/chart/sections/TagsTableV2.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const TagsTableV2: React.FC;

package/dist/pages/trendings-v2/components/chart/sections/TrendingChartV2.d.ts

@@ -0,0 +1,12 @@
+import type { EChartsInstance } from "echarts-for-react";
+import React from "react";
+import type { CustomOptions, ViewTagDataSet } from "../models/TrendingModelsV2";
+interface TrendingChartV2Props {
+    series?: ViewTagDataSet[][];
+    customOptions?: CustomOptions | null;
+    isLoading?: boolean;
+    onChartReady?: (chartInstance: EChartsInstance | null) => void;
+    dataLoadedTrigger?: number;
+}
+export declare const TrendingChartV2: React.FC<TrendingChartV2Props>;
+export {};

package/dist/pages/trendings-v2/components/chart/utils/calculateDateFromPeriod.d.ts

@@ -0,0 +1,21 @@
+import type { scopeType } from "../../../../trendings/components/chart/models/scopes.model";
+/**
+ * Get the duration in milliseconds for a given scope/period
+ */
+export declare const getScopeDuration: (scope: scopeType) => number | null;
+/**
+ * Calculate the end date based on start date and period
+ */
+export declare const calculateEndFromStart: (start: Date, scope: scopeType) => Date | null;
+/**
+ * Calculate the start date based on end date and period
+ */
+export declare const calculateStartFromEnd: (end: Date, scope: scopeType) => Date | null;
+/**
+ * Calculate both start and end dates to maintain the period duration
+ * when one of them changes
+ */
+export declare const calculateCounterpartDate: (changedDate: Date, changedField: "start" | "end", scope: scopeType) => {
+    start: Date;
+    end: Date;
+} | null;

package/dist/pages/trendings-v2/components/chart/utils/calculateScales.d.ts

@@ -0,0 +1,8 @@
+import type { ViewTag } from "../models/TrendingModelsV2";
+/**
+ * Calculate min/max for Y-axis based on tag configuration
+ */
+export declare const calculateYAxisBounds: (tag: ViewTag, dataMin?: number, dataMax?: number) => {
+    min?: number;
+    max?: number;
+};

package/dist/pages/trendings-v2/components/chart/utils/coordinateConversion.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Utility functions for converting between pixel coordinates and timestamps
+ * in the trending chart view
+ */
+export interface ChartArea {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+export interface TimeRange {
+    start: number;
+    end: number;
+}
+/**
+ * Convert a pixel X coordinate to a timestamp based on the current chart area and visible time range
+ * Uses linear interpolation to map pixel position to time
+ *
+ * @param pixelX - The X coordinate in pixels
+ * @param chartArea - The chart's pixel boundaries
+ * @param timeRange - The visible time range in milliseconds
+ * @returns The corresponding timestamp in milliseconds
+ */
+export declare function pixelToTimestamp(pixelX: number, chartArea: ChartArea, timeRange: TimeRange): number;
+/**
+ * Convert a timestamp to a pixel X coordinate based on the current chart area and visible time range
+ * Uses linear interpolation to map time to pixel position
+ *
+ * @param timestamp - The timestamp in milliseconds
+ * @param chartArea - The chart's pixel boundaries
+ * @param timeRange - The visible time range in milliseconds
+ * @returns The corresponding X coordinate in pixels
+ */
+export declare function timestampToPixel(timestamp: number, chartArea: ChartArea, timeRange: TimeRange): number;
+/**
+ * Initialize cursor positions at relative positions (e.g., 10% and 90%) of the time range
+ *
+ * @param timeRange - The visible time range in milliseconds
+ * @param percent1 - Position of first cursor as percentage (0-1)
+ * @param percent2 - Position of second cursor as percentage (0-1)
+ * @returns Tuple of [cursor1Timestamp, cursor2Timestamp]
+ */
+export declare function initializeCursorTimestamps(timeRange: TimeRange, percent1?: number, percent2?: number): [number, number];

package/dist/pages/trendings-v2/components/chart/utils/formatEChartsData.d.ts

@@ -0,0 +1,9 @@
+import type { EChartsDataPoint, ViewTagDataSet } from "../models/TrendingModelsV2";
+/**
+ * Transforms API data to ECharts format
+ */
+export declare const formatDataForECharts: (seriesData: ViewTagDataSet[]) => EChartsDataPoint[];
+/**
+ * Converts ECharts data format to [timestamp, value] array format
+ */
+export declare const toEChartsArrayFormat: (data: EChartsDataPoint[]) => [number, number | null][];

package/dist/pages/trendings-v2/components/chart/utils/tagSeparation.d.ts

@@ -0,0 +1,13 @@
+import type { ViewTag, ViewTagsMap } from "../models/TrendingModelsV2";
+export interface SeparatedTags {
+    analogTags: ViewTag[];
+    digitalTags: ViewTag[];
+}
+/**
+ * Separates tags into analog and digital based on TagType
+ */
+export declare const separateTagsByType: (viewTagsMap: ViewTagsMap) => SeparatedTags;
+/**
+ * Checks if two analog tags should share the same Y-axis based on their scale ranges
+ */
+export declare const shouldShareAxis: (tag1: ViewTag, tag2: ViewTag) => boolean;

package/dist/pages/trendings-v2/index.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const TrendingsV2Index: () => React.JSX.Element;
+export default TrendingsV2Index;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dexteel/mesf-core",
-  "version": "6.2.1",
+  "version": "6.3.0",
   "author": "Dexteel Team",
   "module": "dist/index.esm.js",
   "typings": "dist/index.d.ts",
@@ -36,7 +36,6 @@
     "@reduxjs/toolkit": "^1.8.1",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-typescript": "^8.3.1",
-    "@tanstack/react-query": "^4.41.0",
     "@types/lodash-es": "^4.17.6",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^12.20.46",
@@ -62,6 +61,7 @@
     "use-complex-state": "^1.1.0"
   },
   "peerDependencies": {
+    "@tanstack/react-query": "^4.41.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@material-ui/icons": "^4.11.2",
@@ -102,6 +102,7 @@
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@microsoft/signalr": "^8.0.7",
     "@minoru/react-dnd-treeview": "3.4.4",
+    "@mui/x-data-grid": "^8.14.1",
     "@mui/x-date-pickers": "^7.9.0",
     "axios": "^1.3.5",
     "chart.js": "^4.4.1",
@@ -109,6 +110,8 @@
     "chartjs-plugin-zoom": "^2.0.1",
     "cross-env": "^7.0.3",
     "date-fns-tz": "^3.1.3",
+    "echarts": "^6.0.0",
+    "echarts-for-react": "^3.0.4",
     "lodash-es": "^4.17.21",
     "markdown-it": "^13.0.2",
     "moment-timezone": "^0.5.45",