Step 4: Using a donut chart to show user ratings

colbyfayock · Aug 21, 2023 · 6558c7d · 6558c7d
1 parent 0190eaf
commit 6558c7d
Showing 1 changed file with 41 additions and 1 deletion.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import { Card, Metric, Text } from "@tremor/react";
+import { Card, Metric, Text, Title, DonutChart } from "@tremor/react";
 
 import './App.css'
 
@@ -11,6 +11,26 @@ function App() {
       <div className="grid grid-cols-2 gap-12">
         <div>
           <h2 className="text-2xl font-bold mb-6">Barbie</h2>
+          <Card className="max-w-lg mb-6">
+            <Title>Sales</Title>
+            <DonutChart
+              className="mt-6 mb-6"
+              data={[
+                {
+                  name: 'false',
+                  userScore: dataBarbie.vote_average,
+                },
+                {
+                  name: 'false',
+                  userScore: 10 - dataBarbie.vote_average,
+                }
+              ]}
+              category="userScore"
+              index="name"
+              colors={["green", "slate"]}
+              label={`${(dataBarbie.vote_average * 10).toFixed()}%`}
+            />
+          </Card>
           <Card className="max-w-xs mx-auto mb-6" decoration="top" decorationColor="indigo">
             <Text>Revenue</Text>
             <Metric>${ dataBarbie.global_revenue }</Metric>
@@ -22,6 +42,26 @@ function App() {
         </div>
         <div>
           <h2 className="text-2xl font-bold mb-6">Oppenheimer</h2>
+          <Card className="max-w-lg mb-6">
+            <Title>Sales</Title>
+            <DonutChart
+              className="mt-6 mb-6"
+              data={[
+                {
+                  name: 'false',
+                  userScore: dataOppenheimer.vote_average,
+                },
+                {
+                  name: 'false',
+                  userScore: 10 - dataOppenheimer.vote_average,
+                }
+              ]}
+              category="userScore"
+              index="name"
+              colors={["green", "slate"]}
+              label={`${(dataOppenheimer.vote_average * 10).toFixed()}%`}
+            />
+          </Card>
           <Card className="max-w-xs mx-auto mb-6" decoration="top" decorationColor="indigo">
             <Text>Revenue</Text>
             <Metric>${ dataOppenheimer.global_revenue }</Metric>