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

package/dist_es/react/components/charts/line-bar/HGridChart.d.ts

@@ -1,58 +1,58 @@
-import * as am5 from '@amcharts/amcharts5';
-import { ITimeInterval } from '@amcharts/amcharts5/.internal/core/util/Time';
-import { HBool, HDict, HGrid, HNum, HStr, HVal } from 'haystack-core';
-import React from 'react';
-import { BarChartSeriesData, LegendPlacement, LineChartSeriesData, UnitPlacement } from './Chart';
-export declare const rollupDurationToTimeInterval: (value?: HNum) => ITimeInterval;
-export interface HGridChartRange extends HGridChartItemProps {
-    startValue: HVal;
-    endValue: HVal;
-}
-export interface HGridChartMetadata extends HDict {
-    ranges?: HGridChartRange[];
-    hisRollupInterval?: HNum;
-}
-export interface HGridChartItemProps extends HDict {
-    dis?: HStr;
-    color?: HStr;
-    opacity?: HNum;
-}
-export interface HGridChartSeriesProps extends HGridChartItemProps {
-    series?: HStr;
-    variant?: HStr;
-    unit?: HStr;
-    hideAxis?: HBool;
-    axisPlacement?: HStr;
-}
-export interface HGridChartProps {
-    className?: string;
-    data: HGrid;
-    timeRange: [Date, Date];
-    timeInterval?: am5.time.ITimeInterval;
-    unitPlacement?: UnitPlacement;
-    legendPlacement?: LegendPlacement;
-    translateLabel?: (name: string) => string | undefined;
-    /**
-     * Optional DOM id for the chart container, if not specified it will be automatically generated.
-     * It can also be an HTMLElement, in that case the element will be used as a parent.
-     */
-    DOMtargetId?: string | HTMLElement;
-}
-export declare const isLineSeries: (colMetadata?: HGridChartSeriesProps) => boolean;
-export declare const isStackedBarSeries: (colMetadata?: HGridChartSeriesProps) => boolean;
-export declare const isBarSeries: (colMetadata?: HGridChartSeriesProps) => boolean;
-export declare const colNameToDisProvider: (grid: HGrid, translateLabel?: ((name: string) => string | undefined) | undefined) => (colName: string) => string;
-export declare const splitBarAndLineSeriesCols: (grid: HGrid) => {
-    barSeries: Set<string>;
-    stackedBarSeries: Set<string>;
-    lineSeries: Set<string>;
-};
-export declare const getBarSeriesRowData: (row: HDict, metadata: HDict, colName: string, barSeriesData: Map<string, BarChartSeriesData>) => void;
-export declare const addLineSeriesRowData: (row: HDict, metadata: HDict, colName: string, lineSeriesData: Map<string, LineChartSeriesData>) => void;
-export declare const calculateDefaultTimeInterval: (timeRange: [Date, Date]) => am5.time.ITimeInterval;
-/**
- * A component that renders a chart containing multiple series
- * of different kinds, taking all the data and configuration from an HGrid.
- */
-export declare const HGridChart: React.NamedExoticComponent<HGridChartProps>;
-export default HGridChart;
+import * as am5 from '@amcharts/amcharts5';
+import { ITimeInterval } from '@amcharts/amcharts5/.internal/core/util/Time';
+import { HBool, HDict, HGrid, HNum, HStr, HVal } from 'haystack-core';
+import React from 'react';
+import { BarChartSeriesData, LegendPlacement, LineChartSeriesData, UnitPlacement } from './Chart';
+export declare const rollupDurationToTimeInterval: (value?: HNum) => ITimeInterval;
+export interface HGridChartRange extends HGridChartItemProps {
+    startValue: HVal;
+    endValue: HVal;
+}
+export interface HGridChartMetadata extends HDict {
+    ranges?: HGridChartRange[];
+    hisRollupInterval?: HNum;
+}
+export interface HGridChartItemProps extends HDict {
+    dis?: HStr;
+    color?: HStr;
+    opacity?: HNum;
+}
+export interface HGridChartSeriesProps extends HGridChartItemProps {
+    series?: HStr;
+    variant?: HStr;
+    unit?: HStr;
+    hideAxis?: HBool;
+    axisPlacement?: HStr;
+}
+export interface HGridChartProps {
+    className?: string;
+    data: HGrid;
+    timeRange: [Date, Date];
+    timeInterval?: am5.time.ITimeInterval;
+    unitPlacement?: UnitPlacement;
+    legendPlacement?: LegendPlacement;
+    translateLabel?: (name: string) => string | undefined;
+    /**
+     * Optional DOM id for the chart container, if not specified it will be automatically generated.
+     * It can also be an HTMLElement, in that case the element will be used as a parent.
+     */
+    DOMtargetId?: string | HTMLElement;
+}
+export declare const isLineSeries: (colMetadata?: HGridChartSeriesProps) => boolean;
+export declare const isStackedBarSeries: (colMetadata?: HGridChartSeriesProps) => boolean;
+export declare const isBarSeries: (colMetadata?: HGridChartSeriesProps) => boolean;
+export declare const colNameToDisProvider: (grid: HGrid, translateLabel?: ((name: string) => string | undefined) | undefined) => (colName: string) => string;
+export declare const splitBarAndLineSeriesCols: (grid: HGrid) => {
+    barSeries: Set<string>;
+    stackedBarSeries: Set<string>;
+    lineSeries: Set<string>;
+};
+export declare const getBarSeriesRowData: (row: HDict, metadata: HDict, colName: string, barSeriesData: Map<string, BarChartSeriesData>) => void;
+export declare const addLineSeriesRowData: (row: HDict, metadata: HDict, colName: string, lineSeriesData: Map<string, LineChartSeriesData>) => void;
+export declare const calculateDefaultTimeInterval: (timeRange: [Date, Date]) => am5.time.ITimeInterval;
+/**
+ * A component that renders a chart containing multiple series
+ * of different kinds, taking all the data and configuration from an HGrid.
+ */
+export declare const HGridChart: React.NamedExoticComponent<HGridChartProps>;
+export default HGridChart;

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

@@ -1,251 +1,251 @@
-/*
- * Copyright (c) 2025, J2 Innovations. All Rights Reserved
- */
-import * as am5 from '@amcharts/amcharts5';
-import { HDict, HGrid, Kind, valueIsKind, } from 'haystack-core';
-import { day, hour, julianMonth, week, year } from 'haystack-units/dist';
-import React, { memo, useMemo } from 'react';
-import { useTheme } from 'react-jss';
-import { useScreenSize } from '../../../hooks/useScreenSize';
-import { AxisPlacement, Chart, LegendPlacement, UnitPlacement, } from './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 = {}));
-export const rollupDurationToTimeInterval = (value) => {
-    let unit;
-    switch (value?.unit) {
-        case hour:
-            unit = 'hour';
-            break;
-        case day:
-            unit = 'day';
-            break;
-        case week:
-            unit = 'week';
-            break;
-        case julianMonth:
-            unit = 'month';
-            break;
-        case year:
-            unit = 'year';
-            break;
-    }
-    return { count: value?.value ?? 1, timeUnit: unit ?? 'hour' };
-};
-export const isLineSeries = (colMetadata) => colMetadata?.series?.value === SeriesType.line;
-export const isStackedBarSeries = (colMetadata) => colMetadata?.series?.value === SeriesType.stackedBar;
-export const isBarSeries = (colMetadata) => colMetadata?.series?.value === SeriesType.bar;
-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) => AxisPlacement[colMetadata?.axisPlacement?.value];
-export 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;
-};
-export const splitBarAndLineSeriesCols = (grid) => {
-    const barSeries = new Set();
-    const stackedBarSeries = new Set();
-    const lineSeries = new Set();
-    grid.getColumns().forEach((column) => {
-        const colMetadata = column.meta;
-        if (isLineSeries(colMetadata)) {
-            lineSeries.add(column.name);
-        }
-        else if (isBarSeries(colMetadata)) {
-            barSeries.add(column.name);
-        }
-        else if (isStackedBarSeries(colMetadata)) {
-            stackedBarSeries.add(column.name);
-        }
-    });
-    return {
-        barSeries,
-        stackedBarSeries,
-        lineSeries,
-    };
-};
-export 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,
-    });
-};
-export 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,
-    });
-};
-/**
- * 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 (valueIsKind(val, Kind.Number)) {
-        return val.value;
-    }
-    if (valueIsKind(val, Kind.Date)) {
-        return val.date.getTime();
-    }
-    if (valueIsKind(val, Kind.Time)) {
-        return val.date.getTime();
-    }
-    if (valueIsKind(val, Kind.Bool)) {
-        return val.value ? 1 : 0;
-    }
-    if (valueIsKind(val, Kind.DateTime)) {
-        return val.date.getTime();
-    }
-    throw new Error(`getHValValue: ${val.getKind()} not supported`);
-};
-export 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' };
-};
-/**
- * A component that renders a chart containing multiple series
- * of different kinds, taking all the data and configuration from an HGrid.
- */
-export const HGridChart = memo(function HGridChartComponent({ className, data, timeRange, timeInterval = calculateDefaultTimeInterval(timeRange), unitPlacement = UnitPlacement.axis, legendPlacement = LegendPlacement.right, translateLabel = undefined, DOMtargetId, }) {
-    const theme = useTheme();
-    const { barSeriesData, stackedBarSeriesData, lineSeriesData, rangesData } = useMemo(() => {
-        if (data === undefined) {
-            return {
-                barSeriesData: [],
-                stackedBarSeriesData: [],
-                lineSeriesData: [],
-                rangesData: [],
-            };
-        }
-        const gridMetadata = data.meta;
-        const { barSeries, stackedBarSeries, lineSeries } = 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) => {
-                    getBarSeriesRowData(row, data.getColumn(colName)?.meta ?? HDict.make(), colName, stackedBarSeriesData);
-                });
-            }
-            if (barSeries.size > 0) {
-                barSeries.forEach((colName) => {
-                    getBarSeriesRowData(row, data.getColumn(colName)?.meta ?? HDict.make(), colName, barSeriesData);
-                });
-            }
-            if (lineSeries.size > 0) {
-                lineSeries.forEach((lineSeriesColName) => {
-                    addLineSeriesRowData(row, data.getColumn(lineSeriesColName)?.meta ??
-                        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 = useScreenSize();
-    const effectiveLegendPlacement = useMemo(() => {
-        const MIN_WIDTH = 1024;
-        if (screenSize.width >= MIN_WIDTH) {
-            return legendPlacement;
-        }
-        switch (legendPlacement) {
-            case LegendPlacement.left:
-                return LegendPlacement.top;
-            case LegendPlacement.right:
-                return LegendPlacement.bottom;
-        }
-        return legendPlacement;
-    }, [legendPlacement, screenSize.width]);
-    return (React.createElement("div", { className: className },
-        React.createElement(Chart, { DOMtargetId: DOMtargetId, cursor: true, legendPlacement: effectiveLegendPlacement, unitPlacement: unitPlacement, numberFormat: { maximumFractionDigits: 0 }, barSeriesData: barSeriesData, rangesData: rangesData, translateLabel: colNameToDisProvider(data ?? 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,
-            } })));
-});
-export default HGridChart;
+/*
+ * Copyright (c) 2025, J2 Innovations. All Rights Reserved
+ */
+import * as am5 from '@amcharts/amcharts5';
+import { HDict, HGrid, Kind, valueIsKind, } from 'haystack-core';
+import { day, hour, julianMonth, week, year } from 'haystack-units/dist';
+import React, { memo, useMemo } from 'react';
+import { useTheme } from 'react-jss';
+import { useScreenSize } from '../../../hooks/useScreenSize';
+import { AxisPlacement, Chart, LegendPlacement, UnitPlacement, } from './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 = {}));
+export const rollupDurationToTimeInterval = (value) => {
+    let unit;
+    switch (value?.unit) {
+        case hour:
+            unit = 'hour';
+            break;
+        case day:
+            unit = 'day';
+            break;
+        case week:
+            unit = 'week';
+            break;
+        case julianMonth:
+            unit = 'month';
+            break;
+        case year:
+            unit = 'year';
+            break;
+    }
+    return { count: value?.value ?? 1, timeUnit: unit ?? 'hour' };
+};
+export const isLineSeries = (colMetadata) => colMetadata?.series?.value === SeriesType.line;
+export const isStackedBarSeries = (colMetadata) => colMetadata?.series?.value === SeriesType.stackedBar;
+export const isBarSeries = (colMetadata) => colMetadata?.series?.value === SeriesType.bar;
+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) => AxisPlacement[colMetadata?.axisPlacement?.value];
+export 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;
+};
+export const splitBarAndLineSeriesCols = (grid) => {
+    const barSeries = new Set();
+    const stackedBarSeries = new Set();
+    const lineSeries = new Set();
+    grid.getColumns().forEach((column) => {
+        const colMetadata = column.meta;
+        if (isLineSeries(colMetadata)) {
+            lineSeries.add(column.name);
+        }
+        else if (isBarSeries(colMetadata)) {
+            barSeries.add(column.name);
+        }
+        else if (isStackedBarSeries(colMetadata)) {
+            stackedBarSeries.add(column.name);
+        }
+    });
+    return {
+        barSeries,
+        stackedBarSeries,
+        lineSeries,
+    };
+};
+export 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,
+    });
+};
+export 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,
+    });
+};
+/**
+ * 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 (valueIsKind(val, Kind.Number)) {
+        return val.value;
+    }
+    if (valueIsKind(val, Kind.Date)) {
+        return val.date.getTime();
+    }
+    if (valueIsKind(val, Kind.Time)) {
+        return val.date.getTime();
+    }
+    if (valueIsKind(val, Kind.Bool)) {
+        return val.value ? 1 : 0;
+    }
+    if (valueIsKind(val, Kind.DateTime)) {
+        return val.date.getTime();
+    }
+    throw new Error(`getHValValue: ${val.getKind()} not supported`);
+};
+export 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' };
+};
+/**
+ * A component that renders a chart containing multiple series
+ * of different kinds, taking all the data and configuration from an HGrid.
+ */
+export const HGridChart = memo(function HGridChartComponent({ className, data, timeRange, timeInterval = calculateDefaultTimeInterval(timeRange), unitPlacement = UnitPlacement.axis, legendPlacement = LegendPlacement.right, translateLabel = undefined, DOMtargetId, }) {
+    const theme = useTheme();
+    const { barSeriesData, stackedBarSeriesData, lineSeriesData, rangesData } = useMemo(() => {
+        if (data === undefined) {
+            return {
+                barSeriesData: [],
+                stackedBarSeriesData: [],
+                lineSeriesData: [],
+                rangesData: [],
+            };
+        }
+        const gridMetadata = data.meta;
+        const { barSeries, stackedBarSeries, lineSeries } = 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) => {
+                    getBarSeriesRowData(row, data.getColumn(colName)?.meta ?? HDict.make(), colName, stackedBarSeriesData);
+                });
+            }
+            if (barSeries.size > 0) {
+                barSeries.forEach((colName) => {
+                    getBarSeriesRowData(row, data.getColumn(colName)?.meta ?? HDict.make(), colName, barSeriesData);
+                });
+            }
+            if (lineSeries.size > 0) {
+                lineSeries.forEach((lineSeriesColName) => {
+                    addLineSeriesRowData(row, data.getColumn(lineSeriesColName)?.meta ??
+                        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 = useScreenSize();
+    const effectiveLegendPlacement = useMemo(() => {
+        const MIN_WIDTH = 1024;
+        if (screenSize.width >= MIN_WIDTH) {
+            return legendPlacement;
+        }
+        switch (legendPlacement) {
+            case LegendPlacement.left:
+                return LegendPlacement.top;
+            case LegendPlacement.right:
+                return LegendPlacement.bottom;
+        }
+        return legendPlacement;
+    }, [legendPlacement, screenSize.width]);
+    return (React.createElement("div", { className: className },
+        React.createElement(Chart, { DOMtargetId: DOMtargetId, cursor: true, legendPlacement: effectiveLegendPlacement, unitPlacement: unitPlacement, numberFormat: { maximumFractionDigits: 0 }, barSeriesData: barSeriesData, rangesData: rangesData, translateLabel: colNameToDisProvider(data ?? 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,
+            } })));
+});
+export default HGridChart;
 //# sourceMappingURL=HGridChart.js.map

package/dist_es/react/components/charts/line-bar/ZincGridChart.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { HGridChartProps } from './HGridChart';
+export declare type ZincGridChartProps = Omit<HGridChartProps, 'data'> & {
+    data: string;
+};
+/**
+ * This component wraps the HGridChart component and allows using Zinc
+ * data instead of an HGrid. This should help using the component inside,
+ * for example, the Graphic Builder, where finstack returns an HaystackGrid
+ * instead of haystack-core types.
+ */
+export declare const ZincGridChart: React.FC<ZincGridChartProps>;

package/dist_es/react/components/charts/line-bar/ZincGridChart.js

@@ -0,0 +1,17 @@
+import { Kind, valueIsKind, ZincReader } from 'haystack-core';
+import React from 'react';
+import HGridChart from './HGridChart';
+/**
+ * This component wraps the HGridChart component and allows using Zinc
+ * data instead of an HGrid. This should help using the component inside,
+ * for example, the Graphic Builder, where finstack returns an HaystackGrid
+ * instead of haystack-core types.
+ */
+export const ZincGridChart = ({ data, ...props }) => {
+    const parsedData = ZincReader.readValue(data);
+    if (valueIsKind(parsedData, Kind.Grid)) {
+        return React.createElement(HGridChart, { data: parsedData, ...props });
+    }
+    throw new Error('Invalid Zinc data, could not parse a Grid');
+};
+//# sourceMappingURL=ZincGridChart.js.map

package/dist_es/react/components/charts/line-bar/ZincGridChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZincGridChart.js","sourceRoot":"","sources":["../../../../../src/react/components/charts/line-bar/ZincGridChart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACpE,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAA+B,MAAM,cAAc,CAAA;AAM1D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC3D,IAAI,EACJ,GAAG,KAAK,EACR,EAAE,EAAE;IACJ,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;IAC7C,IAAI,WAAW,CAAQ,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE;QAC9C,OAAO,oBAAC,UAAU,IAAC,IAAI,EAAE,UAAU,KAAM,KAAK,GAAI,CAAA;KAClD;IACD,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAA;AAC7D,CAAC,CAAA"}