[IF-623] Add histogram to time range picker (#583)

* Update initial selected time range to current time

* [IF-623] Add histogram display option to time range picker

* [IF-623] add default month to daypicker in time range picker

* Fix submit value for days type time range picker

* Bump version

* Update date range when arrow clicked in time range picker

* [IF-623] Update background color for day picker panel

* [IF-623] Add disabled days option to time range picker

* [IF-623] Fix default value of daily counts

* [IF-623] Split component to fix eslint warning

* [IF-623] Fix version change

* [IF-623] Code refactor

* [IF-623] Update story page for time range picker

* [IF-623] Import components and util functions directly to new components instead of re-export in style or util file

* [IF-623] Export type DailyCount

* [IF-623] Replace hard-coded color with color variable for count bar

* [IF-623] Code refactor

* [IF-623] Update store page for time range picker, submit change if initTime and init selected date and time range not match

* [IF-623] replace html input element, adjust styles

---------

Co-authored-by: Yujin Wang <yujin.wang��@nordcloud.com>

Author: Ninja-Yujin

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nordcloud/gnui",
   "description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products",
-  "version": "8.2.0",
+  "version": "8.3.0",
   "license": "MIT",
   "repository": {
     "type": "git",

src/components/timeRangePicker/TimeRangePicker.stories.mdx

@@ -1,43 +1,111 @@
 import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { previousMonday, addDays } from "date-fns";
 import { Spacer } from "../spacer";
 import { TimeRangePicker } from ".";
 
 <Meta title="Forms/TimeRangePicker" component={TimeRangePicker} />
 
 # TimeRangePicker
 
-> The `TimeRangePicker` component accepts a `onChange` function and an optional `initTimeRange` in type of `Interval`, to privode the function of selecting a time range.
+> The `TimeRangePicker` component accepts a `onChange` function and an optional `initTimeRange` in type of `Interval`, to privode the function of selecting a time range or date(s). Histogram is supported in "Hours" type.
 
 ## TimeRangePicker properties
 
 |    properties | required | type                                          | description                                                                                               |
 | ------------: | :------: | :-------------------------------------------- | :-------------------------------------------------------------------------------------------------------- |
 | initTimeRange |  false   | Interval                                      | Start date and end date should be within the same day, current date will be used otherwise and by default |
+|          type |  false   | <code>Days</code>, <code>Hours</code>         | Type of time selected in component                                                                        |
+|    weekCounts |  false   | DailyCount[]                                  | Item counts in each time range (Type "Hours" only)                                                        |
+| countsLoading |  false   | boolean                                       | Loading state of week counts (Type "Hours" only)                                                          |
+|  disabledDays |  false   | Matcher[]                                     | Dates not allowed to select                                                                               |
 |      onChange |   true   | <code>(newTimeRange: Interval) => void</code> | Function to handle timeRange change                                                                       |
+|  onWeekChange |  false   | <code>(monday: Date) => void</code>           | Function to submit when showing week updates (Type "Hours" only)                                          |
 
 ```typescript
 import { Interval } from "date-fns";
+import { Matcher } from "react-day-picker";
 
 type Interval = {
   start: Date | number;
   end: Date | number;
 };
+
+type DailyCount = {
+  date: Date;
+  counts: [number, number, number, number];
+};
+
+type Matcher = (boolean | (date: Date)) => boolean | Date | Date[] | DateRange | DateBefore | DateAfter | DateInterval | DayOfWeek
+// A value or a function that matches a specific day
 ```
 
+### Type "Days"
+
 <Canvas>
-  <Story name="timerangepicker">
+  <Story name="timerangepicker of days">
     {() => {
-      const handleSelect = (newTimeRange) => {
-        console.log(newTimeRange);
+      const initValue = {
+        start: new Date(),
+        end: new Date(),
       };
+      const [value, setValue] = React.useState(initValue);
+      return (
+        <>
+          <TimeRangePicker
+            type="Days"
+            initTimeRange={initValue}
+            onChange={setValue}
+          />
+          <Spacer height="20rem" />
+          <div id="result-days">Current Value: {JSON.stringify(value)}</div>
+        </>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Type "Hours"
+
+<Canvas>
+  <Story name="timerangepicker of hours ">
+    {() => {
+      const [value, setValue] = React.useState();
+      return (
+        <>
+          <TimeRangePicker onChange={setValue} />
+          <Spacer height="20rem" />
+          <div id="result-hours">Current Value: {JSON.stringify(value)}</div>
+        </>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Type "Hours" with Histogram
+
+<Canvas>
+  <Story name="timerangepicker of hours with histogram">
+    {() => {
+      const [value, setValue] = React.useState();
+      const monday = previousMonday(new Date());
       return (
         <>
-          type: Days
-          <TimeRangePicker type="Days" onChange={handleSelect} />
-          <Spacer height="1rem" />
-          type: Hours
-          <TimeRangePicker onChange={handleSelect} />
-          <Spacer height="2rem" />
+          <TimeRangePicker
+            weekCounts={[
+              { date: monday, counts: [1, 2, 3, 4] },
+              { date: addDays(monday, 1), counts: [0, 2, 3, 4] },
+              { date: addDays(monday, 2), counts: [1, 0, 3, 4] },
+              { date: addDays(monday, 3), counts: [1, 2, 0, 4] },
+              { date: addDays(monday, 4), counts: [1, 2, 3, 0] },
+              { date: addDays(monday, 5), counts: [0, 0, 0, 0] },
+              { date: addDays(monday, 6), counts: [0, 0, 0, 0] },
+            ]}
+            onChange={setValue}
+          />
+          <Spacer height="20rem" />
+          <div id="result-hours-with-histogram">
+            Current Value: {JSON.stringify(value)}
+          </div>
         </>
       );
     }}