@iotready/nextjs-components-library 1.0.0-preview13 → 1.0.0-preview15

package/components/charts/TrendChart.d.ts

@@ -7,7 +7,7 @@ type Measure = {
     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 +15,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

@@ -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('');
@@ -314,7 +314,6 @@ const TrendChart = ({ deviceId, measures1, measures2, enableDatePicker, handleGe
                 pointHoverBackgroundColor: 'rgba(52, 125, 236, 0.5)',
                 change: !measure.polltime,
                 stepped: measure.stepped,
-                fill: false,
                 yAxisID: measure.source === 'measures1' ? 'y1' : 'y2'
             };
         });

package/package.json

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

package/server-actions/influx.js

@@ -88,7 +88,13 @@ export async function getInfluxDataV1(influxConfig, field, timeStart, timeEnd, d
             .unix(timeStart)
             .toISOString()}' AND time <= '${moment
             .unix(timeEnd)
-            .toISOString()}' GROUP BY time(${timeGroup}) fill(null)`;
+            .toISOString()}' GROUP BY time(${timeGroup})`;
+        if (fill) {
+            query += ` fill(none)`;
+        }
+        else {
+            query += ` fill(null)`;
+        }
     }
     if (fill) {
         // Query to get the last data point before timeStart
@@ -131,21 +137,23 @@ export async function getInfluxDataV1(influxConfig, field, timeStart, timeEnd, d
         series.name = field; // Force the series name to be the field name
     });
     // 1000000 REMOVED AND ADDED TO MOVE THE POINT AWAY IN THE CHART
-    if (raw && preStartValue !== null && preStartValue !== undefined) {
-        // Insert the pre-start value at the beginning of the dataset
-        data.results[0].series[0].values.unshift([
-            timeStart - 1000000,
-            preStartValue
-        ]);
+    if (fill) {
+        if (preStartValue !== null && preStartValue !== undefined) {
+            // Insert the pre-start value at the beginning of the dataset
+            data.results[0].series[0].values.unshift([
+                timeStart - 1000000,
+                preStartValue
+            ]);
+        }
+        // Set the last point as the timeEnd and last value of the dataset
+        const lastSeries = data.results[0].series[0];
+        const lastValue = lastSeries?.values &&
+            lastSeries.values.length > 0 &&
+            lastSeries.values.slice(-1)[0].length > 1
+            ? lastSeries.values.slice(-1)[0][1]
+            : null;
+        data.results[0].series[0].values.push([timeEnd + 1000000, lastValue]);
     }
-    // Set the last point as the timeEnd and last value of the dataset
-    const lastSeries = data.results[0].series[0];
-    const lastValue = lastSeries?.values &&
-        lastSeries.values.length > 0 &&
-        lastSeries.values.slice(-1)[0].length > 1
-        ? lastSeries.values.slice(-1)[0][1]
-        : null;
-    data.results[0].series[0].values.push([timeEnd + 1000000, lastValue]);
     return data;
 }
 export async function exportDataV1(influxConfig, field, timeStart, timeEnd, deviceID) {