@iotready/nextjs-components-library 1.0.0-preview14 → 1.0.0-preview16

package/components/charts/TrendChart.d.ts

@@ -3,11 +3,12 @@ import 'moment/locale/it';
 import { Theme } from "@emotion/react";
 type Measure = {
     name: string;
+    description: string;
     polltime: number;
     unit: string;
     stepped: boolean;
 };
-declare const TrendChart: ({ deviceId, measures1, measures2, enableDatePicker, handleGetInfluxData, handleExportDataCB, theme }: {
+declare const TrendChart: ({ deviceId, measures1, measures2, enableDatePicker, handleGetInfluxData, handleExportDataCB, theme, initialTimeStart, initialTimeEnd }: {
     deviceId: string;
     measures1?: Array<Measure>;
     measures2?: Array<Measure>;
@@ -15,5 +16,7 @@ declare const TrendChart: ({ deviceId, measures1, measures2, enableDatePicker, h
     handleGetInfluxData: (measure: string, timeStart: number, timeEnd: number, deviceId: string, timeGroup: string, raw: boolean, fill?: boolean) => Promise<any>;
     handleExportDataCB?: (measure: string, timeStart: number, timeEnd: number, deviceId: string) => Promise<any>;
     theme: Theme;
+    initialTimeStart?: number;
+    initialTimeEnd?: number;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TrendChart;

package/components/charts/TrendChart.js

@@ -144,7 +144,7 @@ function getPollTime(intervalInSeconds, pollTime) {
 }
 function getCsvData(data, measures) {
     // Initialize the header with timestamp and measure names
-    const headers = ["timestamp", ...measures.map(measure => measure.name)];
+    const headers = ["timestamp", ...measures.map(measure => measure.description || measure.name)];
     const csvData = [];
     // Add the header to the csvData
     csvData.push(headers);
@@ -186,18 +186,18 @@ function getCsvData(data, measures) {
     return csvData.map(row => row.join(',')).join('\n');
 }
 // eslint-disable-next-line no-unused-vars
-const TrendChart = ({ deviceId, measures1, measures2, enableDatePicker, handleGetInfluxData, handleExportDataCB, theme }) => {
+const TrendChart = ({ deviceId, measures1, measures2, enableDatePicker, handleGetInfluxData, handleExportDataCB, theme, initialTimeStart, initialTimeEnd }) => {
     const [chartJsLoaded, setChartJsLoaded] = useState(false);
     const [dataMeasures, setDataMeasures] = useState(null);
     const [chartPeriod, setChartPeriod] = useState('1D');
     const [chartPeriodConfig, setChartPeriodConfig] = useState(chartConfigByPeriod['1D']);
     const [chartLoading, setChartLoading] = useState(false);
-    const [timeStartPicker, setTimeStartPicker] = useState(moment().subtract(1, 'day').unix());
-    const [timeStart, setTimeStart] = useState(moment().subtract(1, 'day').unix());
-    const [timeEnd, setTimeEnd] = useState(moment().unix());
-    const [datePickerUsed, setDatePickerUsed] = useState(false);
-    const [pickerTimeStart, setPickerTimeStart] = useState(moment().subtract(1, 'day').unix());
-    const [pickerTimeEnd, setPickerTimeEnd] = useState(moment().unix());
+    const [timeStartPicker, setTimeStartPicker] = useState(initialTimeStart || moment().subtract(1, 'day').unix());
+    const [timeStart, setTimeStart] = useState(initialTimeStart || moment().subtract(1, 'day').unix());
+    const [timeEnd, setTimeEnd] = useState(initialTimeEnd || moment().unix());
+    const [datePickerUsed, setDatePickerUsed] = useState(initialTimeStart || initialTimeEnd ? true : false);
+    const [pickerTimeStart, setPickerTimeStart] = useState(initialTimeStart || moment().subtract(1, 'day').unix());
+    const [pickerTimeEnd, setPickerTimeEnd] = useState(initialTimeEnd || moment().unix());
     const [loadingButton, setLoadingButton] = useState(false);
     const csvLinkRef = useRef(null);
     const [csvData, setCsvData] = useState('');
@@ -305,7 +305,7 @@ const TrendChart = ({ deviceId, measures1, measures2, enableDatePicker, handleGe
             const influxData = await handleGetInfluxData(measure.name, timeStart, timeEnd, deviceId, polltime, !measure.polltime && rawQuery, !measure.polltime);
             const points = getChartPoints(influxData);
             return {
-                label: measure.name,
+                label: measure.description || measure.name,
                 data: points,
                 unit: measure.unit,
                 borderWidth: 2,
@@ -484,7 +484,7 @@ const TrendChart = ({ deviceId, measures1, measures2, enableDatePicker, handleGe
                     }, minDateTime: moment(timeStart * 1000), slotProps: {
                         textField: { size: 'small', sx: { width: { sm: 210 } } }
                     } })] }) });
-    return (_jsxs(ThemeProvider, { theme: theme, children: [enableDatePicker && _jsx(Box, { sx: { display: { xs: 'flex', lg: 'none', justifyContent: 'flex-end' }, mb: 2 }, children: datePicker }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, children: [!enableExportData && measures && measures.length === 1 ? _jsx(Typography, { variant: 'body1', sx: { mr: 2 }, children: measures[0].name }) : '', enableExportData && (_jsxs(_Fragment, { children: [_jsxs(LoadingButton, { sx: { minWidth: '40px !important', mr: 1, px: 1 }, loading: loadingButton, type: "submit", variant: "text", color: "primary", onClick: handleExportData, disabled: !dataMeasures || !dataMeasures.length, size: 'small', children: [_jsx(LoginIcon, { fontSize: 'small', style: { transform: "rotate(90deg)" } }), _jsx(Box, { sx: { display: { xs: 'none', xl: 'block' }, ml: { md: 1 } }, children: "Export" })] }), _jsx(CSVLink
+    return (_jsxs(ThemeProvider, { theme: theme, children: [enableDatePicker && _jsx(Box, { sx: { display: { xs: 'flex', lg: 'none', justifyContent: 'flex-end' }, mb: 2 }, children: datePicker }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, children: [!enableExportData && measures && measures.length === 1 ? _jsx(Typography, { variant: 'body1', sx: { mr: 2 }, children: measures[0].description || measures[0].name }) : '', enableExportData && (_jsxs(_Fragment, { children: [_jsxs(LoadingButton, { sx: { minWidth: '40px !important', mr: 1, px: 1 }, loading: loadingButton, type: "submit", variant: "text", color: "primary", onClick: handleExportData, disabled: !dataMeasures || !dataMeasures.length, size: 'small', children: [_jsx(LoginIcon, { fontSize: 'small', style: { transform: "rotate(90deg)" } }), _jsx(Box, { sx: { display: { xs: 'none', xl: 'block' }, ml: { md: 1 } }, children: "Export" })] }), _jsx(CSVLink
                                     //@ts-ignore
                                     , { 
                                         //@ts-ignore

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iotready/nextjs-components-library",
-  "version": "1.0.0-preview14",
+  "version": "1.0.0-preview16",
   "main": "index.js",
   "scripts": {
     "build": "rm -rf dist && tsc --project tsconfig.build.json && cp package.json dist/",

package/server-actions/trackle.d.ts

@@ -1,12 +1,13 @@
 export type TrackleConfig = {
+    orgName: string;
     apiUrl: string;
-    createCustomerUrl: string;
     clientId: string;
     clientSecret: string;
     tokenUrl: string;
     cookieName: string;
     cookieSecure: boolean;
     apiTimeout: number;
+    productID: number;
 };
 export declare function logOut(trackleConfig: TrackleConfig): Promise<void>;
 export declare function createCustomer(trackleConfig: TrackleConfig, uid: string): Promise<{

package/server-actions/trackle.js

@@ -48,7 +48,7 @@ export async function logOut(trackleConfig) {
     cookies().delete(trackleConfig.cookieName);
 }
 export async function createCustomer(trackleConfig, uid) {
-    return await wretch(trackleConfig.createCustomerUrl)
+    return await wretch(`${trackleConfig.apiUrl}/orgs/${trackleConfig.orgName}/customers`)
         .headers({
         Authorization: `Basic ${btoa(`${trackleConfig.clientId}:${trackleConfig.clientSecret}`)}`
     })