From 297e9dd756e102c77c14add2e966ac478d91ff7f Mon Sep 17 00:00:00 2001
From: aayush262 <aayushthakur262006@gmail.com>
Date: Sun, 3 Mar 2024 20:36:24 +0530
Subject: [PATCH] feat(profile page): Better charts view ig

---
 .../ani/dantotsu/profile/StatsFragment.kt     |  11 +-
 .../main/res/layout/fragment_statistics.xml   | 536 ++++++++++++++----
 2 files changed, 421 insertions(+), 126 deletions(-)

diff --git a/app/src/main/java/ani/dantotsu/profile/StatsFragment.kt b/app/src/main/java/ani/dantotsu/profile/StatsFragment.kt
index 12a2e76b..8bd8b671 100644
--- a/app/src/main/java/ani/dantotsu/profile/StatsFragment.kt
+++ b/app/src/main/java/ani/dantotsu/profile/StatsFragment.kt
@@ -93,6 +93,8 @@ class StatsFragment(private val user: Query.UserProfile, private val activity: P
                     loadStats(type == MediaType.ANIME)
                 }
                 loadStats(type == MediaType.ANIME)
+                binding.statisticProgressBar.visibility = View.GONE
+                binding.chartsContainer.visibility = View.VISIBLE
             }
         }
     }
@@ -271,7 +273,6 @@ class StatsFragment(private val user: Query.UserProfile, private val activity: P
         val palette = generateColorPalette(primaryColor, names.size)
         return AAChartModel()
             .chartType(AAChartType.Pie)
-            .title("Format")
             .subtitle(getTypeName())
             .zoomType(AAChartZoomType.XY)
             .dataLabelsEnabled(true)
@@ -302,7 +303,6 @@ class StatsFragment(private val user: Query.UserProfile, private val activity: P
         val palette = generateColorPalette(primaryColor, names.size)
         return AAChartModel()
             .chartType(AAChartType.Funnel)
-            .title("Status")
             .subtitle(getTypeName())
             .zoomType(AAChartZoomType.XY)
             .dataLabelsEnabled(true)
@@ -333,7 +333,6 @@ class StatsFragment(private val user: Query.UserProfile, private val activity: P
         val palette = generateColorPalette(primaryColor, names.size)
         return AAChartModel()
             .chartType(AAChartType.Column)
-            .title("Score")
             .subtitle(getTypeName())
             .zoomType(AAChartZoomType.XY)
             .dataLabelsEnabled(false)
@@ -368,7 +367,6 @@ class StatsFragment(private val user: Query.UserProfile, private val activity: P
         val palette = generateColorPalette(primaryColor, names.size)
         return AAChartModel()
             .chartType(AAChartType.Pyramid)
-            .title("Length")
             .subtitle(getTypeName())
             .zoomType(AAChartZoomType.XY)
             .dataLabelsEnabled(true)
@@ -400,7 +398,6 @@ class StatsFragment(private val user: Query.UserProfile, private val activity: P
         val hexColorsArray: Array<Any> = palette.map { String.format("#%06X", 0xFFFFFF and it) }.toTypedArray()
         return AAChartModel()
             .chartType(AAChartType.Bubble)
-            .title("Release Year")
             .subtitle(getTypeName())
             .zoomType(AAChartZoomType.XY)
             .dataLabelsEnabled(false)
@@ -435,7 +432,6 @@ class StatsFragment(private val user: Query.UserProfile, private val activity: P
         val hexColorsArray: Array<Any> = palette.map { String.format("#%06X", 0xFFFFFF and it) }.toTypedArray()
         return AAChartModel()
             .chartType(AAChartType.Bar)
-            .title("Start Year")
             .subtitle(getTypeName())
             .zoomType(AAChartZoomType.XY)
             .dataLabelsEnabled(false)
@@ -470,7 +466,6 @@ class StatsFragment(private val user: Query.UserProfile, private val activity: P
         val hexColorsArray: Array<Any> = palette.map { String.format("#%06X", 0xFFFFFF and it) }.toTypedArray()
         return Pair(AAChartModel()
             .chartType(AAChartType.Area)
-            .title("Genre")
             .subtitle(getTypeName())
             .zoomType(AAChartZoomType.XY)
             .dataLabelsEnabled(false)
@@ -555,7 +550,7 @@ class StatsFragment(private val user: Query.UserProfile, private val activity: P
 
     private fun setColors(aaOptions: AAOptions) {
         val backgroundColor = TypedValue()
-        activity.theme.resolveAttribute(android.R.attr.windowBackground, backgroundColor, true)
+        activity.theme.resolveAttribute(com.google.android.material.R.attr.colorSurfaceVariant, backgroundColor, true)
         val backgroundStyle = AAStyle().color(
             AAColor.rgbaColor(
                 Color.red(backgroundColor.data),
diff --git a/app/src/main/res/layout/fragment_statistics.xml b/app/src/main/res/layout/fragment_statistics.xml
index cdcba1fd..df0b2254 100644
--- a/app/src/main/res/layout/fragment_statistics.xml
+++ b/app/src/main/res/layout/fragment_statistics.xml
@@ -5,152 +5,452 @@
     android:layout_height="match_parent"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
-    android:orientation="vertical">
-
+    android:orientation="vertical"
+    tools:ignore="HardcodedText,RtlSymmetry">
         <LinearLayout
             android:id="@+id/filterContainer"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:orientation="horizontal"
-            android:padding="16dp">
+            android:padding="16dp"
+            android:baselineAligned="false">
 
-                <com.google.android.material.textfield.TextInputLayout
-                    android:id="@+id/sourceTypeNameContainer"
-                    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
-                    android:layout_width="0dp"
-                    android:layout_height="56dp"
+            <com.google.android.material.textfield.TextInputLayout
+                android:id="@+id/sourceTypeNameContainer"
+                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
+                android:layout_width="0dp"
+                android:layout_height="56dp"
+                android:layout_weight="1"
+                android:hint="Type"
+                app:boxCornerRadiusBottomEnd="8dp"
+                app:boxCornerRadiusBottomStart="8dp"
+                app:boxCornerRadiusTopEnd="8dp"
+                app:boxCornerRadiusTopStart="8dp"
+                app:boxStrokeColor="@color/text_input_layout_stroke_color"
+                app:hintAnimationEnabled="true"
+                android:paddingEnd="8dp">
+
+                    <AutoCompleteTextView
+                        android:id="@+id/sourceType"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:layout_weight="1"
+                        android:ellipsize="end"
+                        android:fontFamily="@font/poppins_bold"
+                        android:freezesText="false"
+                        android:inputType="none"
+                        android:maxLines="1"
+                        android:padding="8dp"
+                        android:text="@string/anime"
+                        android:textAllCaps="true"
+                        android:textColor="?android:attr/textColorSecondary"
+                        android:textSize="14sp"
+                        tools:ignore="LabelFor,TextContrastCheck,DuplicateSpeakableTextCheck" />
+            </com.google.android.material.textfield.TextInputLayout>
+
+            <com.google.android.material.textfield.TextInputLayout
+                android:id="@+id/sourceFilterNameContainer"
+                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
+                android:layout_width="0dp"
+                android:layout_height="56dp"
+                android:layout_weight="1"
+                android:hint="View"
+                app:boxCornerRadiusBottomEnd="8dp"
+                app:boxCornerRadiusBottomStart="8dp"
+                app:boxCornerRadiusTopEnd="8dp"
+                app:boxCornerRadiusTopStart="8dp"
+                app:boxStrokeColor="@color/text_input_layout_stroke_color"
+                app:hintAnimationEnabled="true"
+                android:paddingEnd="8dp">
+
+                <AutoCompleteTextView
+                    android:id="@+id/sourceFilter"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
                     android:layout_weight="1"
-                    android:hint="Type"
-                    app:boxCornerRadiusBottomEnd="8dp"
-                    app:boxCornerRadiusBottomStart="8dp"
-                    app:boxCornerRadiusTopEnd="8dp"
-                    app:boxCornerRadiusTopStart="8dp"
-                    app:boxStrokeColor="@color/text_input_layout_stroke_color"
-                    app:hintAnimationEnabled="true"
-                    android:paddingEnd="8dp">
+                    android:ellipsize="end"
+                    android:fontFamily="@font/poppins_bold"
+                    android:freezesText="false"
+                    android:inputType="none"
+                    android:maxLines="1"
+                    android:padding="8dp"
+                    android:text="COUNT"
+                    android:textAllCaps="true"
+                    android:textColor="?android:attr/textColorSecondary"
+                    android:textSize="14sp"
+                    tools:ignore="LabelFor,TextContrastCheck,DuplicateSpeakableTextCheck" />
+            </com.google.android.material.textfield.TextInputLayout>
 
-                        <AutoCompleteTextView
-                            android:id="@+id/sourceType"
-                            android:layout_width="match_parent"
-                            android:layout_height="wrap_content"
-                            android:layout_weight="1"
-                            android:ellipsize="end"
-                            android:fontFamily="@font/poppins_bold"
-                            android:freezesText="false"
-                            android:inputType="none"
-                            android:maxLines="1"
-                            android:padding="8dp"
-                            android:text="@string/anime"
-                            android:textAllCaps="true"
-                            android:textColor="?android:attr/textColorSecondary"
-                            android:textSize="14sp"
-                            tools:ignore="LabelFor,TextContrastCheck,DuplicateSpeakableTextCheck" />
-                </com.google.android.material.textfield.TextInputLayout>
+    </LinearLayout>
 
-                <com.google.android.material.textfield.TextInputLayout
-                    android:id="@+id/sourceFilterNameContainer"
-                    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
-                    android:layout_width="0dp"
-                    android:layout_height="56dp"
-                    android:layout_weight="1"
-                    android:hint="View"
-                    app:boxCornerRadiusBottomEnd="8dp"
-                    app:boxCornerRadiusBottomStart="8dp"
-                    app:boxCornerRadiusTopEnd="8dp"
-                    app:boxCornerRadiusTopStart="8dp"
-                    app:boxStrokeColor="@color/text_input_layout_stroke_color"
-                    app:hintAnimationEnabled="true"
-                    android:paddingEnd="8dp">
+    <LinearLayout
+        android:id="@+id/statisticProgressBar"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:gravity="center"
+        tools:visibility="gone">
+        <ProgressBar
+            style="?android:attr/progressBarStyle"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content" />
+    </LinearLayout>
 
-                        <AutoCompleteTextView
-                            android:id="@+id/sourceFilter"
-                            android:layout_width="match_parent"
-                            android:layout_height="wrap_content"
-                            android:layout_weight="1"
-                            android:ellipsize="end"
-                            android:fontFamily="@font/poppins_bold"
-                            android:freezesText="false"
-                            android:inputType="none"
-                            android:maxLines="1"
-                            android:padding="8dp"
-                            android:text="COUNT"
-                            android:textAllCaps="true"
-                            android:textColor="?android:attr/textColorSecondary"
-                            android:textSize="14sp"
-                            tools:ignore="LabelFor,TextContrastCheck,DuplicateSpeakableTextCheck" />
-                </com.google.android.material.textfield.TextInputLayout>
+    <LinearLayout
+        android:id="@+id/chartsContainer"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:visibility="gone"
+        tools:visibility="visible"
+        android:orientation="vertical">
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+            <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center"
+                android:fontFamily="@font/poppins_semi_bold"
+                android:text="Format"
+                android:textColor="?attr/colorPrimary"
+                android:textSize="16sp" />
 
+            <com.google.android.material.card.MaterialCardView
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center"
+                android:layout_marginLeft="10dp"
+                android:layout_marginRight="10dp"
+                android:backgroundTint="@color/transparent"
+                app:cardCornerRadius="64dp">
+
+                    <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
+                        android:id="@+id/formatChartView"
+                        android:layout_width="match_parent"
+                        android:background="?android:colorBackground"
+                        android:layout_height="350dp" />
+            </com.google.android.material.card.MaterialCardView>
         </LinearLayout>
 
-        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
-            android:id="@+id/formatChartView"
+        <LinearLayout
             android:layout_width="match_parent"
-            android:background="?android:colorBackground"
-            android:layout_height="350dp" />
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:fontFamily="@font/poppins_semi_bold"
+                    android:text="Score"
+                    android:textColor="?attr/colorPrimary"
+                    android:textSize="16sp" />
 
-        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
-            android:id="@+id/scoreChartView"
-            android:layout_width="match_parent"
-            android:background="?android:colorBackground"
-            android:layout_height="350dp" />
+                <com.google.android.material.card.MaterialCardView
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:layout_marginLeft="10dp"
+                    android:layout_marginRight="10dp"
+                    android:backgroundTint="@color/transparent"
+                    app:cardCornerRadius="64dp">
 
-        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
-            android:id="@+id/statusChartView"
+                        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
+                            android:id="@+id/scoreChartView"
+                            android:layout_width="match_parent"
+                            android:background="?android:colorBackground"
+                            android:layout_height="350dp" />
+                </com.google.android.material.card.MaterialCardView>
+        </LinearLayout>
+        <LinearLayout
             android:layout_width="match_parent"
-            android:background="?android:colorBackground"
-            android:layout_height="350dp" />
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:fontFamily="@font/poppins_semi_bold"
+                    android:text="Status"
+                    android:textColor="?attr/colorPrimary"
+                    android:textSize="16sp" />
 
-        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
-            android:id="@+id/lengthChartView"
-            android:layout_width="match_parent"
-            android:background="?android:colorBackground"
-            android:layout_height="350dp" />
+                <com.google.android.material.card.MaterialCardView
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:layout_marginLeft="10dp"
+                    android:layout_marginRight="10dp"
+                    android:backgroundTint="@color/transparent"
+                    app:cardCornerRadius="64dp">
 
-        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
-            android:id="@+id/releaseYearChartView"
-            android:layout_width="match_parent"
-            android:background="?android:colorBackground"
-            android:layout_height="350dp" />
+                        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
+                            android:id="@+id/statusChartView"
+                            android:layout_width="match_parent"
+                            android:background="?android:colorBackground"
+                            android:layout_height="350dp" />
+                </com.google.android.material.card.MaterialCardView>
 
-        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
-            android:id="@+id/startYearChartView"
+        </LinearLayout>
+        <LinearLayout
             android:layout_width="match_parent"
-            android:background="?android:colorBackground"
-            android:layout_height="350dp" />
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:fontFamily="@font/poppins_semi_bold"
+                    android:text="Length"
+                    android:textColor="?attr/colorPrimary"
+                    android:textSize="16sp" />
 
-        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
-            android:id="@+id/genreChartView"
-            android:layout_width="match_parent"
-            android:background="?android:colorBackground"
-            android:layout_height="350dp" />
+                <com.google.android.material.card.MaterialCardView
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:layout_marginLeft="10dp"
+                    android:layout_marginRight="10dp"
+                    android:backgroundTint="@color/transparent"
+                    app:cardCornerRadius="64dp">
 
-        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
-            android:id="@+id/tagChartView"
+                        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
+                            android:id="@+id/lengthChartView"
+                            android:layout_width="match_parent"
+                            android:background="?android:colorBackground"
+                            android:layout_height="350dp" />
+                </com.google.android.material.card.MaterialCardView>
+        </LinearLayout>
+        <LinearLayout
             android:layout_width="match_parent"
-            android:background="?android:colorBackground"
-            android:layout_height="350dp" />
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:fontFamily="@font/poppins_semi_bold"
+                    android:text="Release Year"
+                    android:textColor="?attr/colorPrimary"
+                    android:textSize="16sp" />
 
-        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
-            android:id="@+id/countryChartView"
-            android:layout_width="match_parent"
-            android:background="?android:colorBackground"
-            android:layout_height="350dp" />
+                <com.google.android.material.card.MaterialCardView
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:layout_marginLeft="10dp"
+                    android:layout_marginRight="10dp"
+                    android:backgroundTint="@color/transparent"
+                    app:cardCornerRadius="64dp">
 
-        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
-            android:id="@+id/voiceActorChartView"
+                        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
+                            android:id="@+id/releaseYearChartView"
+                            android:layout_width="match_parent"
+                            android:background="?android:colorBackground"
+                            android:layout_height="350dp" />
+                </com.google.android.material.card.MaterialCardView>
+        </LinearLayout>
+        <LinearLayout
             android:layout_width="match_parent"
-            android:background="?android:colorBackground"
-            android:layout_height="350dp" />
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:fontFamily="@font/poppins_semi_bold"
+                    android:text="Start Year"
+                    android:textColor="?attr/colorPrimary"
+                    android:textSize="16sp" />
 
-        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
-            android:id="@+id/staffChartView"
-            android:layout_width="match_parent"
-            android:background="?android:colorBackground"
-            android:layout_height="350dp" />
+                <com.google.android.material.card.MaterialCardView
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:layout_marginLeft="10dp"
+                    android:layout_marginRight="10dp"
+                    android:backgroundTint="@color/transparent"
+                    app:cardCornerRadius="64dp">
 
-        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
-            android:id="@+id/studioChartView"
+                        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
+                            android:id="@+id/startYearChartView"
+                            android:layout_width="match_parent"
+                            android:background="?android:colorBackground"
+                            android:layout_height="350dp" />
+                </com.google.android.material.card.MaterialCardView>
+        </LinearLayout>
+        <LinearLayout
             android:layout_width="match_parent"
-            android:background="?android:colorBackground"
-            android:layout_height="350dp" />
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:fontFamily="@font/poppins_semi_bold"
+                    android:text="Genre"
+                    android:textColor="?attr/colorPrimary"
+                    android:textSize="16sp" />
+
+                <com.google.android.material.card.MaterialCardView
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:layout_marginLeft="10dp"
+                    android:layout_marginRight="10dp"
+                    android:backgroundTint="@color/transparent"
+                    app:cardCornerRadius="64dp">
+
+                        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
+                            android:id="@+id/genreChartView"
+                            android:layout_width="match_parent"
+                            android:background="?android:colorBackground"
+                            android:layout_height="350dp" />
+                </com.google.android.material.card.MaterialCardView>
+        </LinearLayout>
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:fontFamily="@font/poppins_semi_bold"
+                    android:text="Tag"
+                    android:textColor="?attr/colorPrimary"
+                    android:textSize="16sp" />
+
+                <com.google.android.material.card.MaterialCardView
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:layout_marginLeft="10dp"
+                    android:layout_marginRight="10dp"
+                    android:backgroundTint="@color/transparent"
+                    app:cardCornerRadius="64dp">
+
+                        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
+                            android:id="@+id/tagChartChartView"
+                            android:layout_width="match_parent"
+                            android:background="?android:colorBackground"
+                            android:layout_height="350dp" />
+                </com.google.android.material.card.MaterialCardView>
+        </LinearLayout>
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:fontFamily="@font/poppins_semi_bold"
+                    android:text="Country of Origin"
+                    android:textColor="?attr/colorPrimary"
+                    android:textSize="16sp" />
+
+                <com.google.android.material.card.MaterialCardView
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:layout_marginLeft="10dp"
+                    android:layout_marginRight="10dp"
+                    android:backgroundTint="@color/transparent"
+                    app:cardCornerRadius="64dp">
+
+                        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
+                            android:id="@+id/countryChartView"
+                            android:layout_width="match_parent"
+                            android:background="?android:colorBackground"
+                            android:layout_height="350dp" />
+                </com.google.android.material.card.MaterialCardView>
+        </LinearLayout>
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:fontFamily="@font/poppins_semi_bold"
+                    android:text="Voice Actor"
+                    android:textColor="?attr/colorPrimary"
+                    android:textSize="16sp" />
+
+                <com.google.android.material.card.MaterialCardView
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:layout_marginLeft="10dp"
+                    android:layout_marginRight="10dp"
+                    android:backgroundTint="@color/transparent"
+                    app:cardCornerRadius="64dp">
+
+                        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
+                            android:id="@+id/voiceActorChartView"
+                            android:layout_width="match_parent"
+                            android:background="?android:colorBackground"
+                            android:layout_height="350dp" />
+                </com.google.android.material.card.MaterialCardView>
+        </LinearLayout>
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:fontFamily="@font/poppins_semi_bold"
+                    android:text="Staff"
+                    android:textColor="?attr/colorPrimary"
+                    android:textSize="16sp" />
+
+                <com.google.android.material.card.MaterialCardView
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:layout_marginLeft="10dp"
+                    android:layout_marginRight="10dp"
+                    android:backgroundTint="@color/transparent"
+                    app:cardCornerRadius="64dp">
+
+                        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
+                            android:id="@+id/staffChartView"
+                            android:layout_width="match_parent"
+                            android:background="?android:colorBackground"
+                            android:layout_height="350dp" />
+                </com.google.android.material.card.MaterialCardView>
+        </LinearLayout>
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:fontFamily="@font/poppins_semi_bold"
+                    android:text="Studio"
+                    android:textColor="?attr/colorPrimary"
+                    android:textSize="16sp" />
+
+                <com.google.android.material.card.MaterialCardView
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:layout_marginLeft="10dp"
+                    android:layout_marginRight="10dp"
+                    android:backgroundTint="@color/transparent"
+                    app:cardCornerRadius="64dp">
+
+                        <com.github.aachartmodel.aainfographics.aachartcreator.AAChartView
+                            android:id="@+id/studioChartView"
+                            android:layout_width="match_parent"
+                            android:background="?android:colorBackground"
+                            android:layout_height="350dp" />
+                </com.google.android.material.card.MaterialCardView>
+            </LinearLayout>
     </LinearLayout>
+</LinearLayout>