🎨 Chart: Rename `interactive` to `isInteractive`

src/components/DashboardPage/AccountCard.js

@@ -86,7 +86,7 @@ const AccountCard = ({
             color={account.currency.color}
             height={52}
             hideAxis
-            interactive={false}
+            isInteractive={false}
             id={`account-chart-${account.id}`}
             unit={account.unit}
           />

src/components/DevTools.js

@@ -254,26 +254,8 @@ class DevTools extends PureComponent<any, State> {
                         color="#8884d8"
                         height={50}
                         hideAxis
-                        interactive={false}
+                        isInteractive={false}
                       />
-                      {/* <WrapperChart
-                        height={50}
-                        render={({ height, width }) => (
-                          <VictoryArea
-                            data={cpuUsage[k]}
-                            y="value"
-                            style={{
-                              data: {
-                                stroke: '#8884d8',
-                                fill: '#8884d8',
-                              },
-                            }}
-                            height={height}
-                            width={width}
-                            padding={{ top: 10, right: 0, left: 0, bottom: 0 }}
-                          />
-                        )}
-                      /> */}
                     </Box>
                   </Box>
                 ))}

src/components/TopBar/ItemContainer.js

@@ -8,13 +8,13 @@ export default styled(Box).attrs({
   px: 2,
   ml: 0,
   justifyContent: 'center',
-  cursor: p => (p.interactive ? 'pointer' : 'default'),
+  cursor: p => (p.isInteractive ? 'pointer' : 'default'),
 })`
   opacity: 0.7;
   &:hover {
-    opacity: ${p => (p.interactive ? 0.85 : 0.7)};
+    opacity: ${p => (p.isInteractive ? 0.85 : 0.7)};
   }
   &:active {
-    opacity: ${p => (p.interactive ? 1 : 0.7)};
+    opacity: ${p => (p.isInteractive ? 1 : 0.7)};
   }
 `

src/components/TopBar/index.js

@@ -93,7 +93,7 @@ class TopBar extends PureComponent<Props> {
             <Box justifyContent="center">
               <Bar />
             </Box>
-            <ItemContainer interactive onClick={this.navigateToSettings}>
+            <ItemContainer isInteractive onClick={this.navigateToSettings}>
               <IconSettings size={16} />
             </ItemContainer>
             {hasPassword && ( // FIXME this should be a dedicated component. therefore this component don't need to connect()
@@ -101,7 +101,7 @@ class TopBar extends PureComponent<Props> {
                 <Box justifyContent="center">
                   <Bar />
                 </Box>
-                <ItemContainer interactive justifyContent="center" onClick={this.handleLock}>
+                <ItemContainer isInteractive justifyContent="center" onClick={this.handleLock}>
                   <IconLock size={16} />
                 </ItemContainer>
               </Fragment>

src/components/base/Chart/index.js

@@ -18,7 +18,7 @@
  *
  *    <Chart
  *      data={data}
- *      interactive       // Handle mouse events, display tooltip etc.
+ *      isInteractive     // Handle mouse events, display tooltip etc.
  *      color="#5f8ced"   // Main color for line, gradient, etc.
  *      height={300}      // Fix height. Width is responsive to container.
  *    />
@@ -56,7 +56,7 @@ export type Props = {
   color?: string, // eslint-disable-line react/no-unused-prop-types
   hideAxis?: boolean, // eslint-disable-line react/no-unused-prop-types
   dateFormat?: string, // eslint-disable-line react/no-unused-prop-types
-  interactive?: boolean, // eslint-disable-line react/no-unused-prop-types
+  isInteractive?: boolean, // eslint-disable-line react/no-unused-prop-types
   renderTooltip?: Function, // eslint-disable-line react/no-unused-prop-types
 }
 
@@ -67,7 +67,7 @@ class Chart extends PureComponent<Props> {
     height: 400,
     hideAxis: false,
     id: 'chart',
-    interactive: true,
+    isInteractive: true,
     tickXScale: 'month',
     unit: undefined,
   }
@@ -113,7 +113,7 @@ class Chart extends PureComponent<Props> {
 
     this.refreshChart = prevProps => {
       const { _node: node, props } = this
-      const { data: raw, color, height, hideAxis, interactive, renderTooltip } = props
+      const { data: raw, color, height, hideAxis, isInteractive, renderTooltip } = props
 
       ctx.DATA = enrichData(raw)
 
@@ -157,7 +157,7 @@ class Chart extends PureComponent<Props> {
 
       // Mouse handler
       mouseHandler && mouseHandler.remove() // eslint-disable-line no-unused-expressions
-      if (interactive) {
+      if (isInteractive) {
         mouseHandler = handleMouseEvents({
           ctx,
           props,

src/components/base/Chart/refreshDraw.js

@@ -31,7 +31,7 @@ function getRenderTickX(selectedTime) {
 
 export default function refreshDraw({ ctx, props }: { ctx: CTX, props: Props }) {
   const { NODES, WIDTH, HEIGHT, MARGINS, COLORS, INVALIDATED, DATA, x, y } = ctx
-  const { hideAxis, interactive, tickXScale, unit } = props
+  const { hideAxis, isInteractive, tickXScale, unit } = props
 
   const nbTicksX = getTickXCount(tickXScale)
   const renderTickX = getRenderTickX(tickXScale)
@@ -62,7 +62,7 @@ export default function refreshDraw({ ctx, props }: { ctx: CTX, props: Props })
   }
 
   if (INVALIDATED.color) {
-    if (interactive) {
+    if (isInteractive) {
       // Update focus bar colors
       NODES.xBar.attr('stroke', COLORS.focusBar)
       NODES.yBar.attr('stroke', COLORS.focusBar)
@@ -78,7 +78,7 @@ export default function refreshDraw({ ctx, props }: { ctx: CTX, props: Props })
   }
 
   // Hide interactive things
-  if (interactive) {
+  if (isInteractive) {
     NODES.focus.style('opacity', 0)
     NODES.tooltip.style('opacity', 0)
     NODES.xBar.style('opacity', 0)

src/components/base/Chart/refreshNodes.js

@@ -10,7 +10,7 @@ const debug = d('Chart')
 
 export default function refreshNodes({ ctx, node, props }: { ctx: CTX, node: any, props: Props }) {
   const { NODES, COLORS } = ctx
-  const { hideAxis, interactive, id } = props
+  const { hideAxis, isInteractive, id } = props
 
   // Container
 
@@ -26,7 +26,7 @@ export default function refreshNodes({ ctx, node, props }: { ctx: CTX, node: any
 
   // Focus bars
 
-  ensure({ onlyIf: interactive, NODES, key: 'xBar' }, () =>
+  ensure({ onlyIf: isInteractive, NODES, key: 'xBar' }, () =>
     NODES.wrapper
       .append('line')
       .attr('stroke', COLORS.focusBar)
@@ -34,7 +34,7 @@ export default function refreshNodes({ ctx, node, props }: { ctx: CTX, node: any
       .attr('stroke-dasharray', '3, 2'),
   )
 
-  ensure({ onlyIf: interactive, NODES, key: 'yBar' }, () =>
+  ensure({ onlyIf: isInteractive, NODES, key: 'yBar' }, () =>
     NODES.wrapper
       .append('line')
       .attr('stroke', COLORS.focusBar)
@@ -84,7 +84,7 @@ export default function refreshNodes({ ctx, node, props }: { ctx: CTX, node: any
 
   // Tooltip & focus point
 
-  ensure({ onlyIf: interactive, NODES, key: 'tooltip' }, () =>
+  ensure({ onlyIf: isInteractive, NODES, key: 'tooltip' }, () =>
     d3
       .select(node)
       .append('div')
@@ -94,7 +94,7 @@ export default function refreshNodes({ ctx, node, props }: { ctx: CTX, node: any
       .style('pointer-events', 'none'),
   )
 
-  ensure({ onlyIf: interactive, NODES, key: 'focus' }, () =>
+  ensure({ onlyIf: isInteractive, NODES, key: 'focus' }, () =>
     NODES.wrapper
       .append('g')
       .append('circle')

src/components/base/Chart/stories.js

@@ -43,7 +43,7 @@ class Wrapper extends Component<any, State> {
         />
 
         <Chart
-          interactive={boolean('interactive', true)}
+          isInteractive={boolean('isInteractive', true)}
           hideAxis={boolean('hideAxis', false)}
           color={color('color', '#5f8ced')}
           data={data.slice(start, stop)}