@trackunit/react-chart-components 0.0.2

package/README.md

@@ -0,0 +1,22 @@
+> **⚠️ Beta**
+>
+> This is a beta version and subject to change without notice.
+
+# Trackunit React Chart Components
+The `@trackunit/react-chart-components` package is the home of Trackunits public UI library.
+
+This library is exposed publicly for use in the  the Trackunit [Iris App SDK](https://www.npmjs.com/package/@trackunit/iris-app).  
+
+To browse all avaliable components visit our [Public Storybook](https://developers.trackunit.com/page/ui-components).
+
+For more info and a full guide on Iris App SDK Development, please visit our [Developer Hub](https://developers.trackunit.com/).
+
+## Development
+At this point this library is only developed by Trackunit Employees.  
+For development related information see the [development readme](https://github.com/Trackunit/manager/blob/master/libs/react/components/DEVELOPMENT.md).
+
+## Trackunit
+This package was developed by Trackunit ApS.
+Trackunit is the leading SaaS-based IoT solution for the construction industry, offering an ecosystem of hardware, fleet management software & telematics.
+
+![The Trackunit logo](https://trackunit.com/wp-content/uploads/2022/03/top-logo.svg)

package/index.cjs

@@ -0,0 +1,189 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactComponents = require('@trackunit/react-components');
+var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
+var EChart = require('echarts-for-react');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var EChart__default = /*#__PURE__*/_interopDefaultLegacy(EChart);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+/**
+ * The Chart component is a wrapper component for ECharts.
+ *
+ * Handles events and click functionality.
+ *
+ * For more information see the [eCharts documentation](https://github.com/hustcc/echarts-for-react).
+ *
+ * @param {ChartProps} props - The props for the Chart component
+ * @returns {JSX.Element} Chart component
+ */
+const Chart = ({ options, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
+    var _a, _b;
+    const echartsRef = React__namespace.useRef(null);
+    const eventHandlers = React__namespace.useMemo(() => {
+        const values = {};
+        if (onDataZoom !== undefined) {
+            values.dataZoom = onDataZoom;
+        }
+        if (onBrush !== undefined) {
+            values.brush = onBrush;
+        }
+        if (onBrushSelected !== undefined) {
+            values.brushSelected = onBrushSelected;
+        }
+        if (mouseLeaveChart !== undefined) {
+            values.globalout = mouseLeaveChart;
+        }
+        if (mouseMoveChart !== undefined) {
+            values.mouseMove = (event) => {
+                var _a;
+                mouseMoveChart(event, (_a = echartsRef === null || echartsRef === void 0 ? void 0 : echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance());
+            };
+        }
+        return values;
+    }, [onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart]);
+    React__namespace.useEffect(() => {
+        var _a;
+        const instance = (_a = echartsRef === null || echartsRef === void 0 ? void 0 : echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance();
+        if (instance && onClick) {
+            instance.on("click", onClick);
+        }
+        return () => {
+            if (instance && !instance.isDisposed()) {
+                instance.off("click", onClick);
+            }
+        };
+    }, [onClick, echartsRef]);
+    return (jsxRuntime.jsx(ChartContainer, Object.assign({ style: { height: (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px", width: (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%" }, "data-testid": dataTestId }, { children: showLoading ? (jsxRuntime.jsxs(SpinnerContainer, { children: [jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered" }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) && (jsxRuntime.jsx(reactComponents.Text, Object.assign({ align: "center", subtle: true }, { children: loadingOption.text })))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EChart__default["default"], { ref: echartsRef, option: options, opts: { width: "auto", height: "auto", renderer: renderer }, notMerge: !merge, onEvents: eventHandlers, className: className, style: style, onChartReady: onChartReady }), timezoneLabel] })) })));
+};
+const SpinnerContainer = tailwindStyledComponents.tw.div `
+  tu-chart-spinner-container
+`;
+const ChartContainer = tailwindStyledComponents.tw.div `
+  tu-chart-container
+`;
+
+/**
+ * The LegendItem component is used to show form legends.
+ *
+ * @param {ILegendItem} props - The props for the LegendItem component
+ * @returns {JSX.Element} LegendItem component
+ */
+const LegendItem = ({ className, label, disabled, selected, onClick, color, dataTestId }) => {
+    const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
+    return (jsxRuntime.jsxs(Root, Object.assign({ "data-testid": dataTestId, "$disabled": disabled, className: className, "$selected": selected, onClick: handleOnClick }, { children: [jsxRuntime.jsx(Indicator, { style: { backgroundColor: color }, "$selected": selected }), label && jsxRuntime.jsx("p", { children: label })] })));
+};
+const Root = tailwindStyledComponents.tw.div `
+  inline-flex
+  items-center
+  transition-all
+  ease-in-out
+  duration-200
+  text-neutral-500
+  hover:text-neutral-700
+  text-sm
+  gap-2
+  ${p => (p.$disabled ? tailwindStyledComponents.tws `text-neutral-300` : p.$selected ? tailwindStyledComponents.tws `text-black` : "")}
+  ${p => (p.$selected ? tailwindStyledComponents.tws `font-medium` : null)}
+  ${p => (p.onClick ? tailwindStyledComponents.tws `cursor-pointer` : tailwindStyledComponents.tws `cursor-default`)}
+`;
+const Indicator = tailwindStyledComponents.tw.div `
+  w-3
+  h-3
+  rounded-[50%]
+  ${p => (p.$selected ? tailwindStyledComponents.tws `border border-black border-opacity-50` : null)}
+`;
+
+/**
+ * Create a PieChart with legends based on our current Chart component
+ *
+ * @param {PieChartProps} props - The props for the Chart component
+ * @returns {JSX.Element} Chart component
+ */
+const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId, }) => (jsxRuntime.jsxs(ChartRoot, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsxRuntime.jsx("div", { children: size === "full" && (jsxRuntime.jsx("div", Object.assign({ className: "flex flex-col", "data-testid": "legend" }, { children: data === null || data === void 0 ? void 0 : data.map(item => (jsxRuntime.jsx(LegendItem, { dataTestId: `legend-${item.id}`, label: (item === null || item === void 0 ? void 0 : item.count) !== undefined ? `${item.name} (${item.count})` : item.name, onClick: onClick ? () => onClick(item) : undefined, selected: item.selected, color: item.color }, item.id))) }))) }), jsxRuntime.jsx(Chart, { showLoading: loading, style: size === "full" ? { height: 110, width: 110 } : { height: 60, width: 60 }, onClick: evt => {
+                const clickedEntry = data === null || data === void 0 ? void 0 : data.find(x => x.id === evt.data.id);
+                if (onClick && clickedEntry) {
+                    onClick(clickedEntry);
+                }
+            }, options: {
+                legend: {
+                    show: false,
+                },
+                tooltip: {
+                    show: false,
+                },
+                series: [
+                    {
+                        type: "pie",
+                        radius: ["50%", "75%"],
+                        center: ["50%", "50%"],
+                        minAngle: 10,
+                        selectedOffset: 8,
+                        itemStyle: {
+                            borderColor: "#ffffff",
+                            borderWidth: 2,
+                        },
+                        avoidLabelOverlap: false,
+                        label: {
+                            show: false,
+                            position: "center",
+                            fontSize: "18",
+                            fontWeight: "bold",
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                formatter: "{c}",
+                            },
+                        },
+                        labelLine: {
+                            show: false,
+                        },
+                        data: data === null || data === void 0 ? void 0 : data.map(item => {
+                            var _a;
+                            return ({
+                                id: item.id,
+                                name: item.name,
+                                value: (_a = item === null || item === void 0 ? void 0 : item.count) !== null && _a !== void 0 ? _a : 0,
+                                itemStyle: { color: item.color },
+                            });
+                        }),
+                    },
+                ],
+            } })] })));
+const ChartRoot = tailwindStyledComponents.tw.div `
+  flex
+  flex-direction-col
+  flex-wrap-reverse
+  justify-between
+  items-center
+  h-full
+`;
+
+exports.Chart = Chart;
+exports.LegendItem = LegendItem;
+exports.PieChart = PieChart;

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@trackunit/react-chart-components",
+  "version": "0.0.2",
+  "repository": "https://github.com/Trackunit/manager",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "dependencies": {
+    "@trackunit/react-components": "0.1.61",
+    "@trackunit/ui-design-tokens": "0.0.60",
+    "@trackunit/tailwind-styled-components": "0.0.54",
+    "echarts": "5.4.0",
+    "echarts-for-react": "3.0.2",
+    "react": "18.2.0"
+  },
+  "main": "./index.cjs",
+  "type": "commonjs",
+  "types": "./src/index.d.ts",
+  "peerDependencies": {}
+}

package/src/Chart/Chart.d.ts

@@ -0,0 +1,81 @@
+import { CommonProps } from "@trackunit/react-components";
+import { EChartsType } from "echarts";
+import * as React from "react";
+export interface IOptionsType {
+    [key: string]: any;
+}
+export interface ChartProps extends CommonProps {
+    /**
+     * Option values for EChart.
+     */
+    options: IOptionsType;
+    /**
+     * Whether or not to low the preloader.
+     */
+    showLoading?: boolean;
+    /**
+     * onClick event.
+     */
+    onClick?: (event: any) => void;
+    /**
+     * onDataZoom event.
+     */
+    onDataZoom?: (event: any) => void;
+    /**
+     * onBrush event.
+     */
+    onBrush?: (event: any) => void;
+    /**
+     * Event fired when brush is selected.
+     */
+    onBrushSelected?: (event: any) => void;
+    /**
+     * Event fired when mouse leaves the chart.
+     */
+    mouseLeaveChart?: () => void;
+    /**
+     * Event fired when mouse is moving over the chart.
+     */
+    mouseMoveChart?: (event: any, chart: EChartsType | undefined) => void;
+    /**
+     * CSS styles for the chart.
+     */
+    style?: Record<string, string | number>;
+    /**
+     * To denote of chart is ready or not.
+     */
+    onChartReady?: (chart: any) => void;
+    /**
+     * Whether to merge with previous option.
+     */
+    merge?: boolean;
+    /**
+     * Values for the loading component.
+     */
+    loadingOption?: {
+        text: string;
+    };
+    /**
+     * Time-zone label.
+     */
+    timezoneLabel?: React.ReactNode;
+    /**
+     * Type of rendered used. Either "svg" or "canvas".
+     */
+    renderer?: "svg" | "canvas";
+    /**
+     * Value used to find element by `data-testid` attribute.
+     */
+    dataTestId?: string;
+}
+/**
+ * The Chart component is a wrapper component for ECharts.
+ *
+ * Handles events and click functionality.
+ *
+ * For more information see the [eCharts documentation](https://github.com/hustcc/echarts-for-react).
+ *
+ * @param {ChartProps} props - The props for the Chart component
+ * @returns {JSX.Element} Chart component
+ */
+export declare const Chart: ({ options, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, merge, loadingOption, timezoneLabel, renderer, dataTestId, }: ChartProps) => JSX.Element;

package/src/Chart/Chart.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { ChartProps } from "./Chart";
+import "./Chart.css";
+declare const _default: ComponentMeta<({ options, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, merge, loadingOption, timezoneLabel, renderer, dataTestId, }: ChartProps) => JSX.Element>;
+export default _default;
+export declare const Default: Story<ChartProps>;
+export declare const Usage: () => JSX.Element;
+export declare const Examples: () => JSX.Element;

package/src/Chart/index.d.ts

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

package/src/LegendItem/LegendItem.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export interface ILegendItem {
+    label?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    color: string;
+    className?: string;
+    dataTestId?: string;
+}
+/**
+ * The LegendItem component is used to show form legends.
+ *
+ * @param {ILegendItem} props - The props for the LegendItem component
+ * @returns {JSX.Element} LegendItem component
+ */
+export declare const LegendItem: ({ className, label, disabled, selected, onClick, color, dataTestId }: ILegendItem) => JSX.Element;

package/src/LegendItem/index.d.ts

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

package/src/PieChart/PieChart.d.ts

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+import { CommonProps } from "@trackunit/react-components";
+type Size = "compact" | "full";
+export interface ChartData<T extends object = object> {
+    /**
+     * Unique ID for this entry. Not visible for the user
+     */
+    id: string;
+    /**
+     * The text to show for to the user
+     */
+    name: string;
+    /**
+     * Number of elements with wrapped under this item
+     */
+    count?: number;
+    /**
+     * The color to use in the chart and legends for this item
+     */
+    color: string;
+    /**
+     * If selected, it'll be highlighted
+     */
+    selected?: boolean;
+    /**
+     * Supply the original object that this chart data item was constructed from. It'll be available on callbacks
+     */
+    original?: T;
+}
+export interface PieChartProps<T extends object> extends CommonProps {
+    /**
+     * Array of data points to show
+     */
+    data: ChartData<T>[] | undefined;
+    /**
+     * onClick handler which includes the data object clicked on
+     */
+    onClick?: (data: ChartData<T>) => void;
+    /**
+     * Show chart as loading
+     */
+    loading?: boolean;
+    /**
+     * When compact, the chart is smaller and legends are hidden.
+     */
+    size?: Size;
+}
+/**
+ * Create a PieChart with legends based on our current Chart component
+ *
+ * @param {PieChartProps} props - The props for the Chart component
+ * @returns {JSX.Element} Chart component
+ */
+export declare const PieChart: <T extends object>({ data, size, loading, onClick, className, dataTestId, }: PieChartProps<T>) => JSX.Element;
+export {};

package/src/PieChart/PieChart.stories.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { PieChartProps } from "./PieChart";
+declare const _default: ComponentMeta<(<T extends object>({ data, size, loading, onClick, className, dataTestId, }: PieChartProps<T>) => JSX.Element)>;
+export default _default;
+export declare const Default: Story<PieChartProps<object>>;
+export declare const HiddenCompactVariant: () => JSX.Element;
+export declare const HiddenFullVariant: () => JSX.Element;
+export declare const Usage: () => JSX.Element;
+export declare const Variants: () => JSX.Element;
+export declare const Examples: () => JSX.Element;

package/src/PieChart/index.d.ts

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

package/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Chart";
+export * from "./LegendItem";
+export * from "./PieChart";