updates in date range picker

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixel-base",
-  "version": "1.9.2",
+  "version": "1.9.3",
   "description": "Common UI components for web.pixelone.app, Based on React Bootstrap",
   "author": "muffrank",
   "license": "MIT",

src/lib/dc-date-range-picker/dcDateRangePicker.stories.tsx

@@ -10,16 +10,16 @@ export default {
 
 const Template: ComponentStory<typeof DcDateRangePicker> = (args) => {
   const [state, setState] = useState<any>({
-    start_date: new Date(),
-    end_date: new Date()
-  })
-
+    start_date: '',
+    end_date: ''
+  }
+  )
   // Set default date range to last 7 days
   useEffect(() => {
     setState({
-      start_date: startOfYear(new Date()),
+      start_date: '',
 
-      end_date: new Date()
+      end_date: ''
     })
   }, [])
 

src/lib/dc-date-range-picker/dcDateRangePicker.tsx

@@ -40,7 +40,7 @@ export const DcDateRangePicker = React.forwardRef<
   DcDateRangePickerProps
 >((props, ref) => {
   const {
-    onChange = () => {},
+    onChange = () => { },
     ranges,
     month,
     onApply,
@@ -63,18 +63,27 @@ export const DcDateRangePicker = React.forwardRef<
     }
   ])
   useEffect(() => {
-    if (ranges) {
+    if (ranges?.start_date !== '' && ranges?.end_date !== '') {
       setRange([
         {
           ...range,
           startDate: new Date(ranges?.start_date),
           endDate: new Date(ranges?.end_date)
         }
       ])
+    } else {
+      setRange([
+        {
+          ...range,
+          startDate: new Date(),
+          endDate: addDays(new Date(), 5)
+        }
+      ])
     }
   }, [ranges])
 
   const showDate = (date, size) => {
+
     const today = startOfDay(new Date())
     const yesterday = startOfDay(addDays(today, -1))
     const last7Days = startOfDay(addDays(today, -6))
@@ -134,6 +143,11 @@ export const DcDateRangePicker = React.forwardRef<
       isSameDay(date[0].endDate, ThisYearEnd)
     ) {
       return <DateLable size={size}>This year</DateLable>
+    } else if (
+      ranges?.start_date === '' &&
+      ranges?.end_date === ''
+    ) {
+      return <DateLable size={size}>No Date Selected</DateLable>
     } else {
       return (
         <React.Fragment>
@@ -273,7 +287,7 @@ const StyledDatePicker = styled.div<{ size }>`
   position: relative;
 `
 
-const StyledPopOver = styled(Popover)<{ size }>`
+const StyledPopOver = styled(Popover) <{ size }>`
   max-width: 910px;
   padding: 10px;
   border: 1px solid #e8e7ec;

src/lib/dc-heatmap/dc-heatmap.stories.tsx

@@ -16,7 +16,6 @@ function generateRandomData(rows = 24, columns = 7, min = 1, max = 250) {
   return data
 }
 
-console.log(generateRandomData())
 
 export const Default = Template.bind({})
 Default.args = {