@truedat/core 7.5.13 → 7.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "7.5.13",
+  "version": "7.6.0",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "module": "src/index.js",
@@ -48,7 +48,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "7.5.13",
+    "@truedat/test": "7.6.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -80,11 +80,10 @@
     "redux-saga": "^1.3.0",
     "redux-saga-routines": "^3.2.3",
     "reselect": "^5.1.1",
-    "semantic-ui-calendar-react": "^0.15.3",
     "semantic-ui-react": "^3.0.0-beta.2",
     "slate": "^0.47.9",
     "slate-react": "^0.22.10",
     "swr": "^2.3.3"
   },
-  "gitHead": "83de799e59c0d13d4d52812070d232d24f0b5f82"
+  "gitHead": "0d9c5ee7b864fe3dc87def2be0f68191c04dee57"
 }

package/src/components/DateFilter.js

@@ -3,7 +3,6 @@ import moment from "moment";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Form, Input, Label, Dropdown } from "semantic-ui-react";
-import { DatesRangeInput } from "semantic-ui-calendar-react";
 
 const typeOptions = ({ formatMessage }) => [
   {
@@ -47,8 +46,6 @@ const dateUnitOptions = ({ formatMessage }) => [
 ];
 
 const validNumber = (value) => RegExp("^\\d+$").test(value);
-const validRange = (value) =>
-  RegExp("^\\d{4}-\\d\\d-\\d\\d *- *\\d{4}-\\d\\d-\\d\\d$").test(value);
 
 export const DateFilter = ({
   label,
@@ -56,20 +53,20 @@ export const DateFilter = ({
   defaultValues,
   size = "small",
   name = "date",
-  dateFormat = "YYYY-MM-DD",
 }) => {
   const intl = useIntl();
   const [type, setType] = useState(defaultValues?.type || "since");
   const [unit, setUnit] = useState(defaultValues?.unit || "d");
   const [value, setValue] = useState(defaultValues?.value || "1");
-  const [range, setRange] = useState(defaultValues?.range || "");
+  const [rangeStart, setRangeStart] = useState(defaultValues?.rangeStart || "");
+  const [rangeEnd, setRangeEnd] = useState(defaultValues?.rangeEnd || "");
 
   useEffect(() => {
-    const valid = type === "range" ? validRange(range) : validNumber(value);
+    const valid = type === "range" || validNumber(value);
     if (valid) {
-      onChange({ name, type, range, unit, value });
+      onChange({ name, type, unit, value, rangeStart, rangeEnd });
     }
-  }, [name, type, unit, value, range]);
+  }, [name, type, unit, value, rangeStart, rangeEnd]);
 
   const currentDate = moment();
   return (
@@ -86,18 +83,18 @@ export const DateFilter = ({
         </Form.Field>
         <Form.Field className={type}>
           {type === "range" ? (
-            <DatesRangeInput
-              animation={null}
-              name="range"
-              placeholder="yyyy-mm-dd - yyyy-mm-dd"
-              iconPosition="left"
-              icon="calendar alternate outline"
-              allowSameEndDate
-              value={range}
-              maxDate={currentDate}
-              onChange={(_e, { value }) => setRange(value)}
-              dateFormat={dateFormat}
-            />
+            <Form.Group>
+              <Form.Input
+                onChange={(_e, { value }) => setRangeStart(value)}
+                value={rangeStart}
+                type="date"
+              />
+              <Form.Input
+                onChange={(_e, { value }) => setRangeEnd(value)}
+                value={rangeEnd}
+                type="date"
+              />
+            </Form.Group>
           ) : (
             <Input
               labelPosition="right"

package/src/components/DateRangeFilter.js

@@ -1,42 +1,26 @@
 import { useEffect, useState } from "react";
-import moment from "moment";
 import PropTypes from "prop-types";
-import { DatesRangeInput } from "semantic-ui-calendar-react";
+import { Form } from "semantic-ui-react";
 
-const validNumber = (value) => RegExp("^\\d+$").test(value);
-const validRange = (value) =>
-  RegExp("^\\d{4}-\\d\\d-\\d\\d *- *\\d{4}-\\d\\d-\\d\\d$").test(value);
-
-export const DateRangeFilter = ({
-  onChange,
-  defaultValues,
-  name = "date",
-  dateFormat = "YYYY-MM-DD",
-}) => {
-  const type = "range";
-  const unit = defaultValues?.unit || "d";
-  const value = defaultValues?.value || "1";
-  const [range, setRange] = useState(defaultValues?.range || "");
+export const DateRangeFilter = ({ onChange, defaultValues, name = "date" }) => {
+  const [rangeStart, setRangeStart] = useState(defaultValues?.rangeStart || "");
+  const [rangeEnd, setRangeEnd] = useState(defaultValues?.rangeEnd || "");
   useEffect(() => {
-    const valid = type === "range" ? validRange(range) : validNumber(value);
-    if (valid) {
-      onChange({ name, type, range, unit, value });
-    }
-  }, [name, type, unit, value, range, onChange]);
-  const currentDate = moment();
+    onChange({ name, type: "range", rangeStart, rangeEnd });
+  }, [name, rangeStart, rangeEnd, onChange]);
   return (
-    <DatesRangeInput
-      animation={null}
-      name="range"
-      placeholder="yyyy-mm-dd - yyyy-mm-dd"
-      iconPosition="left"
-      icon="calendar alternate outline"
-      allowSameEndDate
-      value={range}
-      maxDate={currentDate}
-      onChange={(_e, { value }) => setRange(value)}
-      dateFormat={dateFormat}
-    />
+    <Form.Group inline>
+      <Form.Input
+        onChange={(_e, { value }) => setRangeStart(value)}
+        value={rangeStart}
+        type="date"
+      />
+      <Form.Input
+        onChange={(_e, { value }) => setRangeEnd(value)}
+        value={rangeEnd}
+        type="date"
+      />
+    </Form.Group>
   );
 };
 

package/src/components/Graph.js

@@ -50,8 +50,8 @@ const LayoutFlow = ({ initialNodes, initialEdges, onNodeClick }) => {
       layoutOptions: layoutOptions,
       children: getNodes().map((node) => ({
         ...node,
-        width: node.measured.width,
-        height: node.measured.height,
+        width: node.measured?.width,
+        height: node.measured?.height,
       })),
       edges: getEdges(),
     };

package/src/selectors/__tests__/makeDateFiltersSelector.spec.js

@@ -34,7 +34,8 @@ describe("selectors: makeDateFiltersSelector", () => {
         active: true,
         name,
         type: "range",
-        range: "2020-01-01 - 2020-02-02",
+        rangeStart: "2020-01-01",
+        rangeEnd: "2020-02-02",
       };
       const state = { foo };
       expect(selector(state)).toEqual({

package/src/services/dateFilterFormatter.js

@@ -9,25 +9,26 @@ import {
 } from "lodash/fp";
 
 const relativeDate = ({ unit, value }) => `now-${value}${unit}`;
-const toDateRange = ([from, to]) => ({ gte: from, lt: `${to}||+1d` });
 const sinceDate = ({ name, ...props }) => ({
   [name]: { gte: relativeDate(props) },
 });
 const untilDate = ({ name, ...props }) => ({
   [name]: { lt: relativeDate(props) },
 });
-const dateRange = ({ name, range }) => ({
-  [name]: toDateRange(split(" - ")(range)),
+const dateRange = ({ name, rangeStart, rangeEnd }) => ({
+  [name]: {
+    ...(rangeStart ? { gte: rangeStart } : {}),
+    ...(rangeEnd ? { lt: `${rangeEnd}||+1d` } : {}),
+  },
 });
 
-const grantDateRange = ({ name, range }) => {
+const grantDateRange = ({ name, rangeStart, rangeEnd }) => {
   const [start_date, end_date] = split(",")(name);
-  const [from, to] = split(" - ")(range);
 
-  return from && to
+  return rangeStart || rangeEnd
     ? {
-        [start_date]: { gte: from },
-        [end_date]: { lt: to },
+        ...(rangeStart ? { [start_date]: { gte: rangeStart } } : {}),
+        ...(rangeEnd ? { [end_date]: { lt: rangeEnd } } : {}),
       }
     : constant(empty);
 };