Merge pull request #350 from protofire/bugfix/improvements

Fixed some bugs and improvements
protofire · Feb 4, 2020 · 1fd3597 · 1fd3597
2 parents 9947a43 + e1646e8
commit 1fd3597
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 7 deletions.
diff --git a/src/components/PollDetails/Charts/PollPerOptionChart.tsx b/src/components/PollDetails/Charts/PollPerOptionChart.tsx
@@ -65,7 +65,13 @@ const PollPerOptionChart = props => {
 
   return (
     <ChartWrapper info={info} links={links} hideFilters {...wrapperProps}>
-      <Chart {...modalProps} legend={renderLegend} setOpacity={getOpacities} handleLegend={selectLine}>
+      <Chart
+        {...modalProps}
+        barGap={options.length <= 2 ? -100 : -20}
+        legend={renderLegend}
+        setOpacity={getOpacities}
+        handleLegend={selectLine}
+      >
         <YAxis />
         {options.map((entry, index) => (
           <Bar

diff --git a/src/components/PollDetails/helpers.tsx b/src/components/PollDetails/helpers.tsx
@@ -124,7 +124,7 @@ const getPollPeriods = poll => {
     let to = endOfHour(period)
 
     return {
-      label: format(from, 'dd MMM Ho'),
+      label: format(from, 'dd MMM H:mm'),
       from,
       to,
       endDate: getUnixTime(to),

diff --git a/src/components/VoteDetails/Charts/ApprovalsByAddressChart.tsx b/src/components/VoteDetails/Charts/ApprovalsByAddressChart.tsx
@@ -2,8 +2,7 @@ import React from 'react'
 import { Bar, YAxis } from 'recharts'
 import { Chart, ChartWrapper } from '../../common'
 
-const info =
-  'Gives users an idea of how well represented different ‘sizes’ of MKR holder were in this vote. Note that this metric is not sybil safe. '
+const info = `Gives users an idea of how well represented different ‘sizes’ of MKR holder were in this vote.<strong> Note that this metric is not sybil safe.</strong> `
 const links = [
   {
     title: 'MakerDAO Governance Graph',
@@ -14,7 +13,7 @@ const links = [
 const ApprovalsByAddressChart = props => {
   const { wrapperProps, modalProps } = props
   return (
-    <ChartWrapper info={info} links={links} {...wrapperProps} hideFilters>
+    <ChartWrapper info={info} markdown links={links} {...wrapperProps} hideFilters>
       <Chart {...modalProps}>
         <YAxis />
         <Bar

diff --git a/src/components/common/Chart/index.tsx b/src/components/common/Chart/index.tsx
@@ -44,6 +44,7 @@ const ChartComponent = React.memo(function Chart(props: any) {
     showXaxis,
     legend,
     scale,
+    barGap,
     handleLegend,
     getOpacity,
   } = props
@@ -77,7 +78,7 @@ const ChartComponent = React.memo(function Chart(props: any) {
   return (
     <>
       <ChartContainer {...modalStyles}>
-        <ComposedChart barGap={-20} width={width} height={height} data={data}>
+        <ComposedChart barGap={barGap || -20} width={width} height={height} data={data}>
           <CartesianGrid strokeDasharray="3 3" />
           <XAxis
             dataKey={xLabel || 'label'}

diff --git a/src/components/common/ChartWrapper/index.tsx b/src/components/common/ChartWrapper/index.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import ReactMarkdown from 'react-markdown'
 import { CardTitle, ExpandIcon, ChartSelect, Modal, InfoIcon, CloseIcon, DescriptionBox } from '../../common'
 import { filters, getIconContainer } from '../../../utils'
 import { IconContainer } from '../../common/styled'
@@ -37,6 +38,7 @@ type Props = {
   hideFilters: boolean
   hideIcon: boolean
   isModalOpen: boolean
+  markdown?: boolean
   onChange: (e: any) => void
   styles: any
   value: string
@@ -48,6 +50,7 @@ type Props = {
 function ChartWrapper(props: Props) {
   const {
     value,
+    markdown,
     onChange,
     handleModal,
     children,
@@ -82,7 +85,7 @@ function ChartWrapper(props: Props) {
         <div>
           <CardTitle content={`${content} ${versus ? 'vs' : ''} ${versus || ''} Info`} />
           <DescriptionBox>
-            {info}
+            {!markdown ? info : <ReactMarkdown escapeHtml={false} source={info} />}
             <LinksContainer>
               {links &&
                 links.map(link => (