@trackunit/react-chart-components 1.3.117 → 1.3.118

package/index.cjs.js

@@ -7,6 +7,8 @@ var sharedUtils = require('@trackunit/shared-utils');
 var echarts = require('echarts');
 var react = require('react');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
+var dateAndTimeUtils = require('@trackunit/date-and-time-utils');
+var reactDateAndTimeHooks = require('@trackunit/react-date-and-time-hooks');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -404,9 +406,9 @@ const DonutChart = ({ data, size = "full", loading, onClick, className, dataTest
             ],
         };
     }, [size, currentValue, showOthers, limitedData, limitedDataWithoutOthers, chartColor, hoveringItem?.id]);
-    return (jsxRuntime.jsxs("div", { className: cvaChartRoot({ className, legendPosition }), "data-testid": dataTestId, ref: containerRef, children: [jsxRuntime.jsx("div", { className: cvaChartContainer({ legendPosition }), children: jsxRuntime.jsx(Chart, { className: cvaChart({ legendPosition, size }), dataTestId: "pie-chart", onChartReady: handleChartReady, onClick: handleChartClick, onEvents: handleChartEvents, options: chartOptions, showLoading: loading, style: { width: "100%", height: "100%" } }) }), size === "full" && (jsxRuntime.jsx("div", { className: cvaLegend({ legendPosition }), "data-testid": "legend", children: limitedData.map((item, index) => (jsxRuntime.jsx(LegendItem, { className: "p-1.5 py-0.5", color: item.color ?? chartColor(index), count: item.value, dataTestId: `legend-${item.id}`, disabled: (item.value ?? 0) === 0, label: item.name, onClick: onClick ? () => onClick(item) : undefined, onMouseEnter: () => handleLegendMouseEnter(item), onMouseLeave: handleLegendMouseLeave, selected: item.selected }, item.id))) }))] }));
+    return (jsxRuntime.jsxs("div", { className: cvaChartRoot$1({ className, legendPosition }), "data-testid": dataTestId, ref: containerRef, children: [jsxRuntime.jsx("div", { className: cvaChartContainer({ legendPosition }), children: jsxRuntime.jsx(Chart, { className: cvaChart({ legendPosition, size }), dataTestId: "pie-chart", onChartReady: handleChartReady, onClick: handleChartClick, onEvents: handleChartEvents, options: chartOptions, showLoading: loading, style: { width: "100%", height: "100%" } }) }), size === "full" && (jsxRuntime.jsx("div", { className: cvaLegend({ legendPosition }), "data-testid": "legend", children: limitedData.map((item, index) => (jsxRuntime.jsx(LegendItem, { className: "p-1.5 py-0.5", color: item.color ?? chartColor(index), count: item.value, dataTestId: `legend-${item.id}`, disabled: (item.value ?? 0) === 0, label: item.name, onClick: onClick ? () => onClick(item) : undefined, onMouseEnter: () => handleLegendMouseEnter(item), onMouseLeave: handleLegendMouseLeave, selected: item.selected }, item.id))) }))] }));
 };
-const cvaChartRoot = cssClassVarianceUtilities.cvaMerge(["flex", "w-full", "h-full", "gap-4"], {
+const cvaChartRoot$1 = cssClassVarianceUtilities.cvaMerge(["flex", "w-full", "h-full", "gap-4"], {
     variants: {
         legendPosition: {
             Right: ["items-center", "justify-items-stretch", "flex-row"],
@@ -449,7 +451,99 @@ const cvaLegend = cssClassVarianceUtilities.cvaMerge(["flex", "overflow-auto"],
     },
 });
 
+/**
+ * Create a BarChart with legends. Based on Chart component
+ *
+ * @param {BarChartProps} props - The props for the Chart component
+ * @returns {ReactElement} Chart component
+ */
+const BarChart = ({ series, loading, onClick, className, dataTestId, units, showDataZoom = false, }) => {
+    const { formatDate } = reactDateAndTimeHooks.useDateAndTime();
+    const { chartColor } = useChartColor();
+    const seriesData = react.useMemo(() => {
+        const seriesAsArray = Array.isArray(series) ? series : series !== undefined ? [series] : [];
+        return seriesAsArray.map((s, i) => ({
+            ...s,
+            color: s.color || chartColor(i),
+            type: "bar",
+            cursor: "arrow",
+            barGap: "0",
+            data: s.data.map(d => ({
+                ...d,
+            })),
+        }));
+    }, [series, chartColor]);
+    const isDateData = (data) => !!data && "date" in data;
+    return (jsxRuntime.jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { className: "flex-0 flex flex-row gap-2 place-self-end pr-8", "data-testid": "legend", children: seriesData.map((item, index) => (jsxRuntime.jsx(LegendItem, { color: item.color || chartColor(index), dataTestId: `legend-${item.name}`, label: item.name }, item.name))) }), jsxRuntime.jsx("div", { className: "flex min-h-[260px] w-full flex-1", children: jsxRuntime.jsx(Chart, { dataTestId: "bar-chart", onClick: onClick
+                        ? (e) => {
+                            onClick(e);
+                        }
+                        : undefined, options: {
+                        tooltip: {
+                            trigger: "item",
+                            confine: true,
+                            valueFormatter: value => `${value} ${units ?? ""}`,
+                        },
+                        grid: {
+                            left: "2%",
+                            right: "2%",
+                            bottom: "10%",
+                            top: "10%",
+                            containLabel: true,
+                        },
+                        xAxis: [
+                            {
+                                type: "category",
+                                axisLabel: {
+                                    formatter: value => {
+                                        if (isDateData(seriesData[0]?.data[0])) {
+                                            const date = formatDate(dateAndTimeUtils.toDateUtil(value), {
+                                                selectFormat: "dateOnly",
+                                                dateFormat: "medium",
+                                            });
+                                            return date.replace(",", ",\n");
+                                        }
+                                        return value;
+                                    },
+                                    fontSize: 10,
+                                    fontFamily: uiDesignTokens.fontFamily,
+                                    rotate: 45,
+                                    overflow: "truncate",
+                                },
+                                data: seriesData[0]?.data
+                                    ?.filter(({ value }) => value)
+                                    .map(data => (isDateData(data) ? data.date : data.key)),
+                            },
+                        ],
+                        dataZoom: showDataZoom
+                            ? [
+                                {
+                                    type: "slider",
+                                    id: "insideX",
+                                    xAxisIndex: 0,
+                                    startValue: 0,
+                                    endValue: (seriesData[0]?.data?.length || 0) > 10 ? 10 : seriesData[0]?.data?.length || 0,
+                                    showDetail: false,
+                                },
+                            ]
+                            : [],
+                        yAxis: [
+                            {
+                                type: "value",
+                                axisLabel: {
+                                    fontSize: 10,
+                                    fontFamily: uiDesignTokens.fontFamily,
+                                },
+                            },
+                        ],
+                        series: seriesData,
+                    }, showLoading: loading, style: { height: "360px", width: "100%" } }) })] }));
+};
+const cvaChartRoot = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "items-center", "h-full"]);
+
+exports.BarChart = BarChart;
 exports.Chart = Chart;
 exports.DonutChart = DonutChart;
+exports.EChart = EChart;
 exports.LegendItem = LegendItem;
 exports.useChartColor = useChartColor;

package/index.esm.js

@@ -4,7 +4,9 @@ import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { objectKeys } from '@trackunit/shared-utils';
 import * as echarts from 'echarts';
 import { useRef, useCallback, useEffect, useMemo, useState } from 'react';
-import { DEFAULT_CHART_COLORS, CHART_STATUS_COLORS, DEFAULT_CHART_OTHER } from '@trackunit/ui-design-tokens';
+import { DEFAULT_CHART_COLORS, CHART_STATUS_COLORS, DEFAULT_CHART_OTHER, fontFamily } from '@trackunit/ui-design-tokens';
+import { toDateUtil } from '@trackunit/date-and-time-utils';
+import { useDateAndTime } from '@trackunit/react-date-and-time-hooks';
 
 function isECElementEvent(value) {
     return (typeof value === "object" &&
@@ -383,9 +385,9 @@ const DonutChart = ({ data, size = "full", loading, onClick, className, dataTest
             ],
         };
     }, [size, currentValue, showOthers, limitedData, limitedDataWithoutOthers, chartColor, hoveringItem?.id]);
-    return (jsxs("div", { className: cvaChartRoot({ className, legendPosition }), "data-testid": dataTestId, ref: containerRef, children: [jsx("div", { className: cvaChartContainer({ legendPosition }), children: jsx(Chart, { className: cvaChart({ legendPosition, size }), dataTestId: "pie-chart", onChartReady: handleChartReady, onClick: handleChartClick, onEvents: handleChartEvents, options: chartOptions, showLoading: loading, style: { width: "100%", height: "100%" } }) }), size === "full" && (jsx("div", { className: cvaLegend({ legendPosition }), "data-testid": "legend", children: limitedData.map((item, index) => (jsx(LegendItem, { className: "p-1.5 py-0.5", color: item.color ?? chartColor(index), count: item.value, dataTestId: `legend-${item.id}`, disabled: (item.value ?? 0) === 0, label: item.name, onClick: onClick ? () => onClick(item) : undefined, onMouseEnter: () => handleLegendMouseEnter(item), onMouseLeave: handleLegendMouseLeave, selected: item.selected }, item.id))) }))] }));
+    return (jsxs("div", { className: cvaChartRoot$1({ className, legendPosition }), "data-testid": dataTestId, ref: containerRef, children: [jsx("div", { className: cvaChartContainer({ legendPosition }), children: jsx(Chart, { className: cvaChart({ legendPosition, size }), dataTestId: "pie-chart", onChartReady: handleChartReady, onClick: handleChartClick, onEvents: handleChartEvents, options: chartOptions, showLoading: loading, style: { width: "100%", height: "100%" } }) }), size === "full" && (jsx("div", { className: cvaLegend({ legendPosition }), "data-testid": "legend", children: limitedData.map((item, index) => (jsx(LegendItem, { className: "p-1.5 py-0.5", color: item.color ?? chartColor(index), count: item.value, dataTestId: `legend-${item.id}`, disabled: (item.value ?? 0) === 0, label: item.name, onClick: onClick ? () => onClick(item) : undefined, onMouseEnter: () => handleLegendMouseEnter(item), onMouseLeave: handleLegendMouseLeave, selected: item.selected }, item.id))) }))] }));
 };
-const cvaChartRoot = cvaMerge(["flex", "w-full", "h-full", "gap-4"], {
+const cvaChartRoot$1 = cvaMerge(["flex", "w-full", "h-full", "gap-4"], {
     variants: {
         legendPosition: {
             Right: ["items-center", "justify-items-stretch", "flex-row"],
@@ -428,4 +430,94 @@ const cvaLegend = cvaMerge(["flex", "overflow-auto"], {
     },
 });
 
-export { Chart, DonutChart, LegendItem, useChartColor };
+/**
+ * Create a BarChart with legends. Based on Chart component
+ *
+ * @param {BarChartProps} props - The props for the Chart component
+ * @returns {ReactElement} Chart component
+ */
+const BarChart = ({ series, loading, onClick, className, dataTestId, units, showDataZoom = false, }) => {
+    const { formatDate } = useDateAndTime();
+    const { chartColor } = useChartColor();
+    const seriesData = useMemo(() => {
+        const seriesAsArray = Array.isArray(series) ? series : series !== undefined ? [series] : [];
+        return seriesAsArray.map((s, i) => ({
+            ...s,
+            color: s.color || chartColor(i),
+            type: "bar",
+            cursor: "arrow",
+            barGap: "0",
+            data: s.data.map(d => ({
+                ...d,
+            })),
+        }));
+    }, [series, chartColor]);
+    const isDateData = (data) => !!data && "date" in data;
+    return (jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, children: [jsx("div", { className: "flex-0 flex flex-row gap-2 place-self-end pr-8", "data-testid": "legend", children: seriesData.map((item, index) => (jsx(LegendItem, { color: item.color || chartColor(index), dataTestId: `legend-${item.name}`, label: item.name }, item.name))) }), jsx("div", { className: "flex min-h-[260px] w-full flex-1", children: jsx(Chart, { dataTestId: "bar-chart", onClick: onClick
+                        ? (e) => {
+                            onClick(e);
+                        }
+                        : undefined, options: {
+                        tooltip: {
+                            trigger: "item",
+                            confine: true,
+                            valueFormatter: value => `${value} ${units ?? ""}`,
+                        },
+                        grid: {
+                            left: "2%",
+                            right: "2%",
+                            bottom: "10%",
+                            top: "10%",
+                            containLabel: true,
+                        },
+                        xAxis: [
+                            {
+                                type: "category",
+                                axisLabel: {
+                                    formatter: value => {
+                                        if (isDateData(seriesData[0]?.data[0])) {
+                                            const date = formatDate(toDateUtil(value), {
+                                                selectFormat: "dateOnly",
+                                                dateFormat: "medium",
+                                            });
+                                            return date.replace(",", ",\n");
+                                        }
+                                        return value;
+                                    },
+                                    fontSize: 10,
+                                    fontFamily,
+                                    rotate: 45,
+                                    overflow: "truncate",
+                                },
+                                data: seriesData[0]?.data
+                                    ?.filter(({ value }) => value)
+                                    .map(data => (isDateData(data) ? data.date : data.key)),
+                            },
+                        ],
+                        dataZoom: showDataZoom
+                            ? [
+                                {
+                                    type: "slider",
+                                    id: "insideX",
+                                    xAxisIndex: 0,
+                                    startValue: 0,
+                                    endValue: (seriesData[0]?.data?.length || 0) > 10 ? 10 : seriesData[0]?.data?.length || 0,
+                                    showDetail: false,
+                                },
+                            ]
+                            : [],
+                        yAxis: [
+                            {
+                                type: "value",
+                                axisLabel: {
+                                    fontSize: 10,
+                                    fontFamily,
+                                },
+                            },
+                        ],
+                        series: seriesData,
+                    }, showLoading: loading, style: { height: "360px", width: "100%" } }) })] }));
+};
+const cvaChartRoot = cvaMerge(["flex", "flex-col", "items-center", "h-full"]);
+
+export { BarChart, Chart, DonutChart, EChart, LegendItem, useChartColor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-chart-components",
-  "version": "1.3.117",
+  "version": "1.3.118",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/BarChart/BarChart.d.ts

@@ -1,10 +1,7 @@
 import { CommonProps } from "@trackunit/react-components";
+import { ECElementEvent } from "echarts";
 import { ReactElement } from "react";
-export interface ChartData<TProps extends object = object> {
-    /**
-     * Unique ID for this entry. Not visible for the user
-     */
-    date: string;
+export interface BarChartData<TProps extends object = object> {
     /**
      * The value to show for to the user
      */
@@ -18,10 +15,22 @@ export interface ChartData<TProps extends object = object> {
      */
     original?: TProps;
 }
+export interface BarChartGenericData<TProps extends object = object> extends BarChartData<TProps> {
+    /**
+     * The value to display on the x-axis
+     */
+    key: string;
+}
+export interface BarChartDateData<TProps extends object = object> extends BarChartData<TProps> {
+    /**
+     * The date value to display on the x-axis
+     */
+    date: string;
+}
 export interface SeriesData<TProps extends object> {
     name: string;
     color?: string;
-    data: ChartData<TProps>[];
+    data: BarChartGenericData<TProps>[] | BarChartDateData<TProps>[];
 }
 export interface BarChartProps<TProps extends object> extends CommonProps {
     /**
@@ -31,7 +40,7 @@ export interface BarChartProps<TProps extends object> extends CommonProps {
     /**
      * onClick handler which includes the data object clicked on
      */
-    onClick?: (data: ChartData<TProps>) => void;
+    onClick?: (event: ECElementEvent) => void;
     /**
      * Show chart as loading
      */

package/src/index.d.ts

@@ -1,4 +1,6 @@
 export * from "./Chart/Chart";
 export * from "./DonutChart/DonutChart";
+export * from "./BarChart/BarChart";
 export * from "./LegendItem/LegendItem";
 export * from "./utils/useChartColor";
+export * from "./EChart/EChart";

package/src/BarChart/index.d.ts

@@ -1 +0,0 @@
-export * from "./BarChart";