Merge branch 'main' of https://github.com/andy89923/DVVA_Final-Project …

…into main

Report/README.md

@@ -0,0 +1,137 @@
+## MoVis -  Final Project
+
+#### 535517 資料視覺化與視覺分析 Data Visualization and Visual Analytics
+
+##### Group #1: 0716021 張家豪、0816137 王培碩、0816153 陳琮方
+
+
+
+## Dataset
+
+<img src="./src/tmdb.svg" alt="tmdb" style="zoom: 10%;" />
+
+Firstly, we use ```python``` to call **[TMDB](https://www.themoviedb.org/)**'s API to get the movies data. Crawling, parsing, and formating to the specific format.   
+
+Then, we used the script to import the data to **[PlanetScale](https://planetscale.com/)**, which is a serverless MySQL platform. 
+
+
+
+## MoVis System Introduction
+
+### Home
+
+<img src="./src/home.png" alt="home" style="zoom:50%;" />
+
+This is the home page of the **MoVis** system, when client first connect to the website, the system would preload the movie data in default date range, which is ```2015-01-01``` to ```2016-12-31```.
+
+#### Navigation Bar
+
+<img src="./src/home_nav.png" alt="home" style="zoom:50%;" />
+
+
+
+
+
+### Global Navigation Bar
+
+<img src="./src/global_nav.png" alt="home" style="zoom:50%;" />
+
+In the following pages, they all have a navigation bar on the top of the scree, which let the user easily change from one views to another. 
+
+The date picker on the right which is select the movies in the selected date ranges for data visualization used in **Overview** page and **Relation Analysis** page.
+
+
+
+### Movie Overview Insights
+
+<img src="./src/movie_overview.png" alt="home" style="zoom:50%;" />
+
+
+
+### Specific Company Comparison
+
+
+
+
+
+
+
+
+
+### Relations of Diffenent Aspects
+
+<img src="./src/relations.png" alt="relations" style="zoom:50%;" />
+
+<img src="./src/relations_2.png" alt="relations" style="zoom:50%;" />
+
+
+
+
+
+
+
+
+
+## Insights
+
+### Movie Overview Insights
+
+##### The Hot Months of the Movies
+
+*The date range is 2010-04 ~ 2012-04*
+
+<img src="./src/overview_1.png" alt="company_compare_1" style="zoom:50%;" />
+
+*The date range is 2015-01 ~ 2016-12*
+
+<img src="./src/overview_2.png" alt="company_compare_1" style="zoom:50%;" />
+
+The above trends could told us the following things:
+
+- The more movies would not bring more revenue 
+- **June** and **December** are the months with more revenue than the other months despite the number of movies.
+
+
+
+
+
+
+
+### Specific Company Comparison
+
+We all love animations movies, and there are three companies came to our mind when we talked about it, *[Pixar](https://www.pixar.com/), [Dreamworks](https://www.dreamworks.com/), and [Studio Ghibli](https://www.ghibli.jp/).* 
+
+We had seleted these three companies by default, we could directly discover the insights:<img src="./src/company_compare_1.png" alt="company_compare_1" style="zoom:50%;" />
+
+- We could knows that *Studio Ghibli* had lowest budget for almost every movies, however, the revenue didn't always lower than the others.
+
+
+
+### Relations of Diffenent Aspects
+
+
+
+
+
+
+
+## Contributions
+
+|      Name      | Contributions | Note |
+| :------------: | :-----------: | :--: |
+| 0716021 張家豪 |               |      |
+| 0816137 王培碩 |               |      |
+| 0816153 陳琮方 |               |      |
+
+
+
+## Conclusion
+
+There are a lot of insights we did't mention above, you are all welcome to clone this repository to explore the data via MoVis system. 
+
+The environment setup were written in ```README.md``` in corresponding folder. 
+
+Finally, we all hope you enjoy in data explortaion via **MoVis** system.
+
+
+

movis/src/components/ComCombobox.tsx

@@ -7,8 +7,7 @@ import { HiOutlineSearch } from "react-icons/hi";
 import fuzzysort from "fuzzysort";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import type { KeyMap } from "../utils/myClasses";
-import MyListbox from "./MyListbox";
-import { Company } from "@prisma/client";
+import type { Company } from "@prisma/client";
 
 // Change string[] to data[]
 interface IProps {
@@ -18,28 +17,16 @@ interface IProps {
   setSelected: Dispatch<SetStateAction<Company[] | any[]>>;
 }
 
-const myKeyMap = {
-  name: "Name",
-} as KeyMap<string>;
-
 const ComCombobox: React.FC<IProps> = ({ data, selected, setSelected }) => {
   const [query, setQuery] = useState("");
-  const [filterkey, setFilterkey] = useState("name");
-
-  // merge genres into one string for fuzzy sort filtering
-  const moddedData = data.map((d) => {
-    return {
-      ...d,
-    };
-  });
 
   //Fuzzy sort filtering data with key selected by listbox
   const filteredData = fuzzysort
-    .go(query, moddedData, {
+    .go(query, data, {
       threshold: -50,
       // limit: 10,
       all: true,
-      key: filterkey,
+      key: "name",
     })
     .map((d) => d.obj);
 
@@ -54,7 +41,7 @@ const ComCombobox: React.FC<IProps> = ({ data, selected, setSelected }) => {
   });
 
   //Data information shown in combobox's list
-  const DataInfo: React.FC<{ data: typeof moddedData[number] }> = (props) => {
+  const DataInfo: React.FC<{ data: typeof data[number] }> = (props) => {
     return (
       <span
         className={`block truncate ${selected ? "font-bold" : "font-semibold"}`}
@@ -67,7 +54,7 @@ const ComCombobox: React.FC<IProps> = ({ data, selected, setSelected }) => {
   return (
     <div className="flex w-full items-center justify-center align-middle">
       <Combobox value={selected} by="id" onChange={setSelected} multiple>
-        <div className="relative mt-1 w-full">
+        <div className="relative w-full">
           <div className="relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
             <Combobox.Input
               className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
@@ -104,28 +91,15 @@ const ComCombobox: React.FC<IProps> = ({ data, selected, setSelected }) => {
                 <div
                   className="relative h-16 cursor-default select-none bg-teal-700/30 py-2 pl-10 pr-4 text-teal-900 hover:bg-teal-700 hover:text-white"
                   onClick={() => {
-                    if (selected.length === filteredData.length) {
-                      setSelected([]);
-                    } else {
-                      setSelected(filteredData);
-                    }
+                    setSelected([]);
                   }}
                 >
-                  {selected.length === filteredData.length ? (
-                    <span className="block truncate text-base font-semibold hover:font-bold">
-                      Unselect All
-                      <p className="font-light">
-                        {`Unselect all ${filteredData.length} company`}
-                      </p>
-                    </span>
-                  ) : (
-                    <span className="block truncate text-base font-semibold hover:font-bold">
-                      Select All
-                      <p className="font-light">
-                        {`Select all ${filteredData.length} company`}
-                      </p>
-                    </span>
-                  )}
+                  <span className="block truncate text-base font-semibold hover:font-bold">
+                    Unselect All
+                    <p className="font-light">
+                      {`Curently selected ${selected.length} companies`}
+                    </p>
+                  </span>
                 </div>
 
                 {filteredData.length === 0 && query !== "" ? (
@@ -181,14 +155,6 @@ const ComCombobox: React.FC<IProps> = ({ data, selected, setSelected }) => {
           </Transition>
         </div>
       </Combobox>
-      {/* <div className="flex items-center justify-center space-x-1 px-2 align-middle">
-        <p>By: </p>
-        <MyListbox
-          keyMap={myKeyMap}
-          selected={filterkey}
-          setSelected={setFilterkey}
-        />
-      </div> */}
     </div>
   );
 };