double-line - add margin & change mock data

EQWorks · Oct 17, 2022 · c5ef84c · c5ef84c
1 parent 9cf8c57
commit c5ef84c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 27 deletions.
diff --git a/src/components/plotly/double-line/index.js b/src/components/plotly/double-line/index.js
@@ -13,7 +13,8 @@ const DoubleLine = ({
   formatData,
   showTicks,
   showAxisTitles,
-  showCurrency,
+  tickSuffix,
+  tickPrefix,
   hoverInfo,
   hoverText,
   ...props
@@ -79,7 +80,8 @@ const DoubleLine = ({
               },
             }),
             showticklabels: showTicks,
-            tickprefix: showCurrency[0] && '$',
+            tickprefix: tickPrefix[0],
+            ticksuffix: tickSuffix[0],
             automargin: true,
             overlaying: 'y2',
           },
@@ -91,12 +93,13 @@ const DoubleLine = ({
               },
             }),
             showticklabels: showTicks,
-            tickprefix: showCurrency[1] && '$',
+            tickprefix: tickPrefix[1],
+            ticksuffix: tickSuffix[1],
             automargin: true,
             side: 'right',
           },
           margin: {
-            pad: 4,
+            pad: 10,
           },
         }}
       />
@@ -110,7 +113,8 @@ DoubleLine.propTypes = {
   formatData: PropTypes.objectOf(PropTypes.func),
   showTicks: PropTypes.bool,
   showAxisTitles: PropTypes.bool,
-  showCurrency: PropTypes.arrayOf(PropTypes.bool),
+  tickSuffix: PropTypes.arrayOf(PropTypes.string),
+  tickPrefix: PropTypes.arrayOf(PropTypes.string),
   hoverInfo: PropTypes.string,
   hoverText: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.string),
@@ -123,7 +127,8 @@ DoubleLine.defaultProps = {
   formatData: {},
   showTicks: true,
   showAxisTitles: true,
-  showCurrency: [false, false],
+  tickSuffix: [],
+  tickPrefix: [],
   hoverInfo: '',
   hoverText: [],
   ...plotlyDefaultProps,

diff --git a/stories/data/plotly/mock-data-double-line.json b/stories/data/plotly/mock-data-double-line.json
@@ -1,52 +1,52 @@
 [
   {
     "city": "Longueuil",
-    "spend": 250,
-    "transactions": 2.2
+    "spend": 4.2,
+    "transactions": 4
   },
   {
     "city": "Niagara Falls",
-    "spend": 113,
-    "transactions": 2.5
+    "spend": 3.9,
+    "transactions": 4.2
   },
   {
     "city": "Montreal",
-    "spend": 141,
-    "transactions": 2
+    "spend": 1.5,
+    "transactions": 3.5
   },
   {
     "city": "Saskatoon",
-    "spend": 152,
-    "transactions": 2.3
+    "spend": 4,
+    "transactions": 4.3
   },
   {
     "city": "Vancouver",
-    "spend": 220,
-    "transactions": 3
+    "spend": 3,
+    "transactions": 4
   },
   {
     "city": "Toronto",
-    "spend": 250,
-    "transactions": 2.8
+    "spend": 4.2,
+    "transactions": 4.5
   },
   {
     "city": "Ottawa",
-    "spend": 113,
-    "transactions": 2.5
+    "spend": 3,
+    "transactions": 3.5
   },
   {
     "city": "Brampton",
-    "spend": 141,
-    "transactions": 2
+    "spend": 2.8,
+    "transactions": 3.8
   },
   {
     "city": "Calgary",
-    "spend": 152,
-    "transactions": 2.3
+    "spend": 3.2,
+    "transactions": 4.2
   },
   {
     "city": "Edmonton",
-    "spend": 300,
-    "transactions": 3
+    "spend": 5,
+    "transactions": 5
   }
 ]
diff --git a/stories/plotly/plotly-double-line.stories.js b/stories/plotly/plotly-double-line.stories.js
@@ -19,4 +19,4 @@ const Template = (args) =>
   </ResponsiveChartWrapper>
 
 export const Default = Template.bind({})
-Default.args = { showCurrency: [true, false] }
+Default.args = { tickSuffix: ['%', '%'] }