Add default setting to date range picker and add info text

packages/standard-components/manifest.json

@@ -1511,6 +1511,7 @@
     "icon": "Date",
     "styleable": true,
     "hasChildren": false,
+    "info": "Your data provider will be automatically filtered to the given date range.",
     "settings": [
       {
         "type": "dataProvider",
@@ -1521,6 +1522,20 @@
         "type": "field",
         "label": "Date field",
         "key": "field"
+      },
+      {
+        "type": "select",
+        "label": "Default range",
+        "key": "defaultValue",
+        "options": [
+          "Last 1 day",
+          "Last 7 days",
+          "Last 30 days",
+          "Last 3 months",
+          "Last 6 months",
+          "Last 1 year"
+        ],
+        "defaultValue": "Last 30 days"
       }
     ]
   }

packages/standard-components/src/DateRangePicker.svelte

@@ -9,12 +9,11 @@
 
   export let dataProvider
   export let field
+  export let defaultValue
 
   const dataContext = getContext("context")
   const component = getContext("component")
   const { styleable, builderStore, ActionTypes } = getContext("sdk")
-
-  let value = "Last 30 days"
   const options = [
     "Last 1 day",
     "Last 7 days",
@@ -23,6 +22,7 @@
     "Last 6 months",
     "Last 1 year",
   ]
+  let value = options.includes(defaultValue) ? defaultValue : "Last 30 days"
 
   const updateDateRange = option => {
     const query = dataProvider?.state?.query