@j2inn/fin5-ui-utils 6.0.4 → 6.0.5-beta.0

package/dist/react/components/charts/line-bar/HGridChart.js

@@ -1,286 +1,286 @@
-"use strict";
-/*
- * Copyright (c) 2025, J2 Innovations. All Rights Reserved
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HGridChart = exports.calculateDefaultTimeInterval = exports.addLineSeriesRowData = exports.getBarSeriesRowData = exports.splitBarAndLineSeriesCols = exports.colNameToDisProvider = exports.isBarSeries = exports.isStackedBarSeries = exports.isLineSeries = exports.rollupDurationToTimeInterval = void 0;
-const am5 = __importStar(require("@amcharts/amcharts5"));
-const haystack_core_1 = require("haystack-core");
-const dist_1 = require("haystack-units/dist");
-const react_1 = __importStar(require("react"));
-const react_jss_1 = require("react-jss");
-const useScreenSize_1 = require("../../../hooks/useScreenSize");
-const Chart_1 = require("./Chart");
-var SeriesType;
-(function (SeriesType) {
-    SeriesType["line"] = "line";
-    SeriesType["bar"] = "bar";
-    SeriesType["stackedBar"] = "stackedBar";
-})(SeriesType || (SeriesType = {}));
-var SeriesVariant;
-(function (SeriesVariant) {
-    SeriesVariant["dashed"] = "dashed";
-})(SeriesVariant || (SeriesVariant = {}));
-const rollupDurationToTimeInterval = (value) => {
-    let unit;
-    switch (value?.unit) {
-        case dist_1.hour:
-            unit = 'hour';
-            break;
-        case dist_1.day:
-            unit = 'day';
-            break;
-        case dist_1.week:
-            unit = 'week';
-            break;
-        case dist_1.julianMonth:
-            unit = 'month';
-            break;
-        case dist_1.year:
-            unit = 'year';
-            break;
-    }
-    return { count: value?.value ?? 1, timeUnit: unit ?? 'hour' };
-};
-exports.rollupDurationToTimeInterval = rollupDurationToTimeInterval;
-const isLineSeries = (colMetadata) => colMetadata?.series?.value === SeriesType.line;
-exports.isLineSeries = isLineSeries;
-const isStackedBarSeries = (colMetadata) => colMetadata?.series?.value === SeriesType.stackedBar;
-exports.isStackedBarSeries = isStackedBarSeries;
-const isBarSeries = (colMetadata) => colMetadata?.series?.value === SeriesType.bar;
-exports.isBarSeries = isBarSeries;
-const isDottedSeriesVariant = (colMetadata) => SeriesVariant.dashed === colMetadata?.variant?.value;
-const getSeriesColor = (colMetadata) => colMetadata?.color ? am5.color(colMetadata.color.value) : undefined;
-const getSeriesDis = (colMetadata) => colMetadata?.dis?.value;
-const getSeriesUnit = (colMetadata) => colMetadata?.unit?.value;
-const getHideAxis = (colMetadata) => colMetadata?.hideAxis?.value;
-const getAxisPlacement = (colMetadata) => Chart_1.AxisPlacement[colMetadata?.axisPlacement?.value];
-const colNameToDisProvider = (grid, translateLabel) => (colName) => {
-    if (translateLabel) {
-        const label = translateLabel(colName);
-        if (label) {
-            return label;
-        }
-    }
-    const colMetadata = grid.getColumn(colName)?.meta;
-    if (colMetadata?.dis) {
-        return colMetadata.dis.value;
-    }
-    return colName;
-};
-exports.colNameToDisProvider = colNameToDisProvider;
-const splitBarAndLineSeriesCols = (grid) => {
-    const barSeries = new Set();
-    const stackedBarSeries = new Set();
-    const lineSeries = new Set();
-    grid.getColumns().forEach((column) => {
-        const colMetadata = column.meta;
-        if ((0, exports.isLineSeries)(colMetadata)) {
-            lineSeries.add(column.name);
-        }
-        else if ((0, exports.isBarSeries)(colMetadata)) {
-            barSeries.add(column.name);
-        }
-        else if ((0, exports.isStackedBarSeries)(colMetadata)) {
-            stackedBarSeries.add(column.name);
-        }
-    });
-    return {
-        barSeries,
-        stackedBarSeries,
-        lineSeries,
-    };
-};
-exports.splitBarAndLineSeriesCols = splitBarAndLineSeriesCols;
-const getBarSeriesRowData = (row, metadata, colName, barSeriesData) => {
-    if (!barSeriesData.has(colName)) {
-        const series = {
-            seriesName: colName,
-            dis: getSeriesDis(metadata),
-            unit: getSeriesUnit(metadata),
-            hideAxis: getHideAxis(metadata),
-            axisPlacement: getAxisPlacement(metadata),
-            data: [],
-        };
-        const seriesColor = getSeriesColor(metadata);
-        if (seriesColor) {
-            series.stroke = seriesColor;
-        }
-        barSeriesData.set(colName, series);
-    }
-    barSeriesData.get(colName)?.data.push({
-        ts: row.get('ts').date.getTime(),
-        value: row.get(colName)?.value,
-    });
-};
-exports.getBarSeriesRowData = getBarSeriesRowData;
-const addLineSeriesRowData = (row, metadata, colName, lineSeriesData) => {
-    if (!lineSeriesData.has(colName)) {
-        const series = {
-            seriesName: colName,
-            dis: getSeriesDis(metadata),
-            unit: getSeriesUnit(metadata),
-            hideAxis: getHideAxis(metadata),
-            axisPlacement: getAxisPlacement(metadata),
-            data: [],
-            strokeSettings: {
-                strokeWidth: 2,
-                strokeDasharray: isDottedSeriesVariant(metadata)
-                    ? [3, 3]
-                    : undefined,
-            },
-        };
-        const seriesColor = getSeriesColor(metadata);
-        if (seriesColor && series.strokeSettings) {
-            series.strokeSettings.stroke = seriesColor;
-        }
-        lineSeriesData.set(colName, series);
-    }
-    lineSeriesData.get(colName)?.data.push({
-        ts: row.get('ts').date.getTime(),
-        value: row.get(colName)?.value,
-    });
-};
-exports.addLineSeriesRowData = addLineSeriesRowData;
-/**
- * Returns the numeric value of an Haystack Value object (if numeric)
- * @param val Haystack value
- * @returns the numeric value:
- * - `HNum` > numeric value
- * - `HDate` > time value in milliseconds since midnight, January 1, 1970 UTC
- * - `HTime` > time value in milliseconds since midnight, January 1, 1970 UTC
- * - `HBool` > 1 if `val` is `true`, `false` otherwise
- * - `HDateTime` > time value in milliseconds since midnight, January 1, 1970 UTC
- */
-const getHValValueNumber = (val) => {
-    if ((0, haystack_core_1.valueIsKind)(val, haystack_core_1.Kind.Number)) {
-        return val.value;
-    }
-    if ((0, haystack_core_1.valueIsKind)(val, haystack_core_1.Kind.Date)) {
-        return val.date.getTime();
-    }
-    if ((0, haystack_core_1.valueIsKind)(val, haystack_core_1.Kind.Time)) {
-        return val.date.getTime();
-    }
-    if ((0, haystack_core_1.valueIsKind)(val, haystack_core_1.Kind.Bool)) {
-        return val.value ? 1 : 0;
-    }
-    if ((0, haystack_core_1.valueIsKind)(val, haystack_core_1.Kind.DateTime)) {
-        return val.date.getTime();
-    }
-    throw new Error(`getHValValue: ${val.getKind()} not supported`);
-};
-const calculateDefaultTimeInterval = (timeRange) => {
-    const diffTime = Math.abs(timeRange[1].getTime() - timeRange[0].getTime());
-    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-    return { count: diffDays ? diffDays : 1, timeUnit: 'hour' };
-};
-exports.calculateDefaultTimeInterval = calculateDefaultTimeInterval;
-/**
- * A component that renders a chart containing multiple series
- * of different kinds, taking all the data and configuration from an HGrid.
- */
-exports.HGridChart = (0, react_1.memo)(function HGridChartComponent({ className, data, timeRange, timeInterval = (0, exports.calculateDefaultTimeInterval)(timeRange), unitPlacement = Chart_1.UnitPlacement.axis, legendPlacement = Chart_1.LegendPlacement.right, translateLabel = undefined, DOMtargetId, }) {
-    const theme = (0, react_jss_1.useTheme)();
-    const { barSeriesData, stackedBarSeriesData, lineSeriesData, rangesData } = (0, react_1.useMemo)(() => {
-        if (data === undefined) {
-            return {
-                barSeriesData: [],
-                stackedBarSeriesData: [],
-                lineSeriesData: [],
-                rangesData: [],
-            };
-        }
-        const gridMetadata = data.meta;
-        const { barSeries, stackedBarSeries, lineSeries } = (0, exports.splitBarAndLineSeriesCols)(data);
-        const barSeriesData = new Map();
-        const stackedBarSeriesData = new Map();
-        const lineSeriesData = new Map();
-        data.getRows().forEach((row) => {
-            if (stackedBarSeries.size > 0) {
-                stackedBarSeries.forEach((colName) => {
-                    (0, exports.getBarSeriesRowData)(row, data.getColumn(colName)?.meta ?? haystack_core_1.HDict.make(), colName, stackedBarSeriesData);
-                });
-            }
-            if (barSeries.size > 0) {
-                barSeries.forEach((colName) => {
-                    (0, exports.getBarSeriesRowData)(row, data.getColumn(colName)?.meta ?? haystack_core_1.HDict.make(), colName, barSeriesData);
-                });
-            }
-            if (lineSeries.size > 0) {
-                lineSeries.forEach((lineSeriesColName) => {
-                    (0, exports.addLineSeriesRowData)(row, data.getColumn(lineSeriesColName)?.meta ??
-                        haystack_core_1.HDict.make(), lineSeriesColName, lineSeriesData);
-                });
-            }
-        });
-        const rangesData = gridMetadata.ranges?.map((rangeData) => {
-            const result = {
-                startValue: getHValValueNumber(rangeData.startValue),
-                endValue: getHValValueNumber(rangeData.endValue),
-                color: getSeriesColor(rangeData),
-                tooltip: rangeData.dis?.value,
-                opacity: rangeData.opacity?.value,
-            };
-            return result;
-        }) ?? [];
-        return {
-            barSeriesData: Array.from(barSeriesData.values()),
-            stackedBarSeriesData: Array.from(stackedBarSeriesData.values()),
-            lineSeriesData: Array.from(lineSeriesData.values()),
-            rangesData,
-        };
-    }, [data]);
-    const screenSize = (0, useScreenSize_1.useScreenSize)();
-    const effectiveLegendPlacement = (0, react_1.useMemo)(() => {
-        const MIN_WIDTH = 1024;
-        if (screenSize.width >= MIN_WIDTH) {
-            return legendPlacement;
-        }
-        switch (legendPlacement) {
-            case Chart_1.LegendPlacement.left:
-                return Chart_1.LegendPlacement.top;
-            case Chart_1.LegendPlacement.right:
-                return Chart_1.LegendPlacement.bottom;
-        }
-        return legendPlacement;
-    }, [legendPlacement, screenSize.width]);
-    return (react_1.default.createElement("div", { className: className },
-        react_1.default.createElement(Chart_1.Chart, { DOMtargetId: DOMtargetId, cursor: true, legendPlacement: effectiveLegendPlacement, unitPlacement: unitPlacement, numberFormat: { maximumFractionDigits: 0 }, barSeriesData: barSeriesData, rangesData: rangesData, translateLabel: (0, exports.colNameToDisProvider)(data ?? haystack_core_1.HGrid.make(), translateLabel), stackedBarSeriesData: stackedBarSeriesData, lineSeriesData: lineSeriesData, gridSettings: {
-                stroke: am5.color(theme.borderColor),
-            }, dateField: 'ts', baseInterval: timeInterval, tooltipSettings: {
-                fontSize: '0.9rem',
-            }, legendLabelsSettings: {
-                fill: am5.color(theme.textColor),
-                fontSize: '0.9rem',
-            }, legendMarkersSettings: {
-                width: 8,
-                height: 8,
-                rounded: true,
-            } })));
-});
-exports.default = exports.HGridChart;
+"use strict";
+/*
+ * Copyright (c) 2025, J2 Innovations. All Rights Reserved
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HGridChart = exports.calculateDefaultTimeInterval = exports.addLineSeriesRowData = exports.getBarSeriesRowData = exports.splitBarAndLineSeriesCols = exports.colNameToDisProvider = exports.isBarSeries = exports.isStackedBarSeries = exports.isLineSeries = exports.rollupDurationToTimeInterval = void 0;
+const am5 = __importStar(require("@amcharts/amcharts5"));
+const haystack_core_1 = require("haystack-core");
+const dist_1 = require("haystack-units/dist");
+const react_1 = __importStar(require("react"));
+const react_jss_1 = require("react-jss");
+const useScreenSize_1 = require("../../../hooks/useScreenSize");
+const Chart_1 = require("./Chart");
+var SeriesType;
+(function (SeriesType) {
+    SeriesType["line"] = "line";
+    SeriesType["bar"] = "bar";
+    SeriesType["stackedBar"] = "stackedBar";
+})(SeriesType || (SeriesType = {}));
+var SeriesVariant;
+(function (SeriesVariant) {
+    SeriesVariant["dashed"] = "dashed";
+})(SeriesVariant || (SeriesVariant = {}));
+const rollupDurationToTimeInterval = (value) => {
+    let unit;
+    switch (value?.unit) {
+        case dist_1.hour:
+            unit = 'hour';
+            break;
+        case dist_1.day:
+            unit = 'day';
+            break;
+        case dist_1.week:
+            unit = 'week';
+            break;
+        case dist_1.julianMonth:
+            unit = 'month';
+            break;
+        case dist_1.year:
+            unit = 'year';
+            break;
+    }
+    return { count: value?.value ?? 1, timeUnit: unit ?? 'hour' };
+};
+exports.rollupDurationToTimeInterval = rollupDurationToTimeInterval;
+const isLineSeries = (colMetadata) => colMetadata?.series?.value === SeriesType.line;
+exports.isLineSeries = isLineSeries;
+const isStackedBarSeries = (colMetadata) => colMetadata?.series?.value === SeriesType.stackedBar;
+exports.isStackedBarSeries = isStackedBarSeries;
+const isBarSeries = (colMetadata) => colMetadata?.series?.value === SeriesType.bar;
+exports.isBarSeries = isBarSeries;
+const isDottedSeriesVariant = (colMetadata) => SeriesVariant.dashed === colMetadata?.variant?.value;
+const getSeriesColor = (colMetadata) => colMetadata?.color ? am5.color(colMetadata.color.value) : undefined;
+const getSeriesDis = (colMetadata) => colMetadata?.dis?.value;
+const getSeriesUnit = (colMetadata) => colMetadata?.unit?.value;
+const getHideAxis = (colMetadata) => colMetadata?.hideAxis?.value;
+const getAxisPlacement = (colMetadata) => Chart_1.AxisPlacement[colMetadata?.axisPlacement?.value];
+const colNameToDisProvider = (grid, translateLabel) => (colName) => {
+    if (translateLabel) {
+        const label = translateLabel(colName);
+        if (label) {
+            return label;
+        }
+    }
+    const colMetadata = grid.getColumn(colName)?.meta;
+    if (colMetadata?.dis) {
+        return colMetadata.dis.value;
+    }
+    return colName;
+};
+exports.colNameToDisProvider = colNameToDisProvider;
+const splitBarAndLineSeriesCols = (grid) => {
+    const barSeries = new Set();
+    const stackedBarSeries = new Set();
+    const lineSeries = new Set();
+    grid.getColumns().forEach((column) => {
+        const colMetadata = column.meta;
+        if ((0, exports.isLineSeries)(colMetadata)) {
+            lineSeries.add(column.name);
+        }
+        else if ((0, exports.isBarSeries)(colMetadata)) {
+            barSeries.add(column.name);
+        }
+        else if ((0, exports.isStackedBarSeries)(colMetadata)) {
+            stackedBarSeries.add(column.name);
+        }
+    });
+    return {
+        barSeries,
+        stackedBarSeries,
+        lineSeries,
+    };
+};
+exports.splitBarAndLineSeriesCols = splitBarAndLineSeriesCols;
+const getBarSeriesRowData = (row, metadata, colName, barSeriesData) => {
+    if (!barSeriesData.has(colName)) {
+        const series = {
+            seriesName: colName,
+            dis: getSeriesDis(metadata),
+            unit: getSeriesUnit(metadata),
+            hideAxis: getHideAxis(metadata),
+            axisPlacement: getAxisPlacement(metadata),
+            data: [],
+        };
+        const seriesColor = getSeriesColor(metadata);
+        if (seriesColor) {
+            series.stroke = seriesColor;
+        }
+        barSeriesData.set(colName, series);
+    }
+    barSeriesData.get(colName)?.data.push({
+        ts: row.get('ts').date.getTime(),
+        value: row.get(colName)?.value,
+    });
+};
+exports.getBarSeriesRowData = getBarSeriesRowData;
+const addLineSeriesRowData = (row, metadata, colName, lineSeriesData) => {
+    if (!lineSeriesData.has(colName)) {
+        const series = {
+            seriesName: colName,
+            dis: getSeriesDis(metadata),
+            unit: getSeriesUnit(metadata),
+            hideAxis: getHideAxis(metadata),
+            axisPlacement: getAxisPlacement(metadata),
+            data: [],
+            strokeSettings: {
+                strokeWidth: 2,
+                strokeDasharray: isDottedSeriesVariant(metadata)
+                    ? [3, 3]
+                    : undefined,
+            },
+        };
+        const seriesColor = getSeriesColor(metadata);
+        if (seriesColor && series.strokeSettings) {
+            series.strokeSettings.stroke = seriesColor;
+        }
+        lineSeriesData.set(colName, series);
+    }
+    lineSeriesData.get(colName)?.data.push({
+        ts: row.get('ts').date.getTime(),
+        value: row.get(colName)?.value,
+    });
+};
+exports.addLineSeriesRowData = addLineSeriesRowData;
+/**
+ * Returns the numeric value of an Haystack Value object (if numeric)
+ * @param val Haystack value
+ * @returns the numeric value:
+ * - `HNum` > numeric value
+ * - `HDate` > time value in milliseconds since midnight, January 1, 1970 UTC
+ * - `HTime` > time value in milliseconds since midnight, January 1, 1970 UTC
+ * - `HBool` > 1 if `val` is `true`, `false` otherwise
+ * - `HDateTime` > time value in milliseconds since midnight, January 1, 1970 UTC
+ */
+const getHValValueNumber = (val) => {
+    if ((0, haystack_core_1.valueIsKind)(val, haystack_core_1.Kind.Number)) {
+        return val.value;
+    }
+    if ((0, haystack_core_1.valueIsKind)(val, haystack_core_1.Kind.Date)) {
+        return val.date.getTime();
+    }
+    if ((0, haystack_core_1.valueIsKind)(val, haystack_core_1.Kind.Time)) {
+        return val.date.getTime();
+    }
+    if ((0, haystack_core_1.valueIsKind)(val, haystack_core_1.Kind.Bool)) {
+        return val.value ? 1 : 0;
+    }
+    if ((0, haystack_core_1.valueIsKind)(val, haystack_core_1.Kind.DateTime)) {
+        return val.date.getTime();
+    }
+    throw new Error(`getHValValue: ${val.getKind()} not supported`);
+};
+const calculateDefaultTimeInterval = (timeRange) => {
+    const diffTime = Math.abs(timeRange[1].getTime() - timeRange[0].getTime());
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    return { count: diffDays ? diffDays : 1, timeUnit: 'hour' };
+};
+exports.calculateDefaultTimeInterval = calculateDefaultTimeInterval;
+/**
+ * A component that renders a chart containing multiple series
+ * of different kinds, taking all the data and configuration from an HGrid.
+ */
+exports.HGridChart = (0, react_1.memo)(function HGridChartComponent({ className, data, timeRange, timeInterval = (0, exports.calculateDefaultTimeInterval)(timeRange), unitPlacement = Chart_1.UnitPlacement.axis, legendPlacement = Chart_1.LegendPlacement.right, translateLabel = undefined, DOMtargetId, }) {
+    const theme = (0, react_jss_1.useTheme)();
+    const { barSeriesData, stackedBarSeriesData, lineSeriesData, rangesData } = (0, react_1.useMemo)(() => {
+        if (data === undefined) {
+            return {
+                barSeriesData: [],
+                stackedBarSeriesData: [],
+                lineSeriesData: [],
+                rangesData: [],
+            };
+        }
+        const gridMetadata = data.meta;
+        const { barSeries, stackedBarSeries, lineSeries } = (0, exports.splitBarAndLineSeriesCols)(data);
+        const barSeriesData = new Map();
+        const stackedBarSeriesData = new Map();
+        const lineSeriesData = new Map();
+        data.getRows().forEach((row) => {
+            if (stackedBarSeries.size > 0) {
+                stackedBarSeries.forEach((colName) => {
+                    (0, exports.getBarSeriesRowData)(row, data.getColumn(colName)?.meta ?? haystack_core_1.HDict.make(), colName, stackedBarSeriesData);
+                });
+            }
+            if (barSeries.size > 0) {
+                barSeries.forEach((colName) => {
+                    (0, exports.getBarSeriesRowData)(row, data.getColumn(colName)?.meta ?? haystack_core_1.HDict.make(), colName, barSeriesData);
+                });
+            }
+            if (lineSeries.size > 0) {
+                lineSeries.forEach((lineSeriesColName) => {
+                    (0, exports.addLineSeriesRowData)(row, data.getColumn(lineSeriesColName)?.meta ??
+                        haystack_core_1.HDict.make(), lineSeriesColName, lineSeriesData);
+                });
+            }
+        });
+        const rangesData = gridMetadata.ranges?.map((rangeData) => {
+            const result = {
+                startValue: getHValValueNumber(rangeData.startValue),
+                endValue: getHValValueNumber(rangeData.endValue),
+                color: getSeriesColor(rangeData),
+                tooltip: rangeData.dis?.value,
+                opacity: rangeData.opacity?.value,
+            };
+            return result;
+        }) ?? [];
+        return {
+            barSeriesData: Array.from(barSeriesData.values()),
+            stackedBarSeriesData: Array.from(stackedBarSeriesData.values()),
+            lineSeriesData: Array.from(lineSeriesData.values()),
+            rangesData,
+        };
+    }, [data]);
+    const screenSize = (0, useScreenSize_1.useScreenSize)();
+    const effectiveLegendPlacement = (0, react_1.useMemo)(() => {
+        const MIN_WIDTH = 1024;
+        if (screenSize.width >= MIN_WIDTH) {
+            return legendPlacement;
+        }
+        switch (legendPlacement) {
+            case Chart_1.LegendPlacement.left:
+                return Chart_1.LegendPlacement.top;
+            case Chart_1.LegendPlacement.right:
+                return Chart_1.LegendPlacement.bottom;
+        }
+        return legendPlacement;
+    }, [legendPlacement, screenSize.width]);
+    return (react_1.default.createElement("div", { className: className },
+        react_1.default.createElement(Chart_1.Chart, { DOMtargetId: DOMtargetId, cursor: true, legendPlacement: effectiveLegendPlacement, unitPlacement: unitPlacement, numberFormat: { maximumFractionDigits: 0 }, barSeriesData: barSeriesData, rangesData: rangesData, translateLabel: (0, exports.colNameToDisProvider)(data ?? haystack_core_1.HGrid.make(), translateLabel), stackedBarSeriesData: stackedBarSeriesData, lineSeriesData: lineSeriesData, gridSettings: {
+                stroke: am5.color(theme.borderColor),
+            }, dateField: 'ts', baseInterval: timeInterval, tooltipSettings: {
+                fontSize: '0.9rem',
+            }, legendLabelsSettings: {
+                fill: am5.color(theme.textColor),
+                fontSize: '0.9rem',
+            }, legendMarkersSettings: {
+                width: 8,
+                height: 8,
+                rounded: true,
+            } })));
+});
+exports.default = exports.HGridChart;
 //# sourceMappingURL=HGridChart.js.map