Add the bar chart

Issue #61
BadIdeaFactory · Mar 27, 2019 · 56e0888 · 56e0888
1 parent e791fb6
commit 56e0888
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/src/client/components/Sidebar/DetailPane/FlagChart.js b/src/client/components/Sidebar/DetailPane/FlagChart.js
@@ -75,6 +75,17 @@ const RawPercentage = styled.div`
   text-align: center;
 `
 
+const HorizantalBarChart = styled.div`
+  margin-top: 30px;
+  display: flex;
+  height: 50px;
+`
+
+const HorizantalBar = styled.div`
+  background: ${props => props.color};
+  width: ${props => props.width}%;
+`
+
 
 // Component
 class FlagChart extends React.Component {
@@ -135,6 +146,16 @@ class FlagChart extends React.Component {
               </BoxDescription>
             </PercentageBox>
           </PercentageRow>
+          <HorizantalBarChart>
+            <HorizantalBar
+              color="#6EB6EA"
+              width={dPercent}
+            />
+            <HorizantalBar
+              color="#DA696C"
+              width={rPercent}
+            />
+          </HorizantalBarChart>
         </Wrapper>
       </>
     )

diff --git a/src/client/components/Sidebar/ListPane/index.js b/src/client/components/Sidebar/ListPane/index.js
@@ -29,6 +29,7 @@ class ListPane extends React.Component {
           <FlagList>
             { flaggedPhrases.map(flaggedPhrase => (
               <FlagCard
+                key={flaggedPhrase.text}
                 flaggedPhrase={flaggedPhrase}
               />
             ))}