@react-magma/charts 0.0.0-9de073 → 0.0.0-next.0

package/src/components/LineChart/LegendButton.tsx

@@ -1,32 +1,11 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
+import { ThemeContext, Checkbox } from 'react-magma-dom';
 
 export interface DataTableProps {
-  children?: any;
+  name?: string;
   color?: string;
 }
 
-const StyledButton = styled.button`
-  align-items: center;
-  background: none;
-  border: 0;
-  box-shadow: 0 0 0;
-  cursor: pointer;
-  display: inline-flex;
-  margin-right: 24px;
-  padding: 0;
-`;
-
-const ColorSwatch = styled.span`
-  border: ${props => (props.color ? 'none' : '3px solid black')};
-  border-radius: 4px;
-  display: inline-block;
-  height: 28px;
-  margin-right: 8px;
-  width: 28px;
-  background: ${props => props.color};
-`;
-
 export const LegendButton = React.forwardRef<HTMLButtonElement, any>(
   (props, ref) => {
     const {
@@ -35,6 +14,7 @@ export const LegendButton = React.forwardRef<HTMLButtonElement, any>(
       dataIndex,
       isHidden,
       onClick,
+      name,
       focusCurrentLine,
       resetLineFocus,
       ...other
@@ -58,19 +38,39 @@ export const LegendButton = React.forwardRef<HTMLButtonElement, any>(
       }
     }
 
+    const theme = React.useContext(ThemeContext);
+
     return (
-      <StyledButton
-        onBlur={resetLineFocus}
-        onClick={handleClick}
-        onFocus={handleOnMouseEnterOrFocus}
+      <div
+        style={{ display: 'inline-flex' }}
         onMouseEnter={handleOnMouseEnterOrFocus}
         onMouseLeave={resetLineFocus}
-        ref={ref}
-        {...other}
       >
-        <ColorSwatch color={!isHidden ? color : null} />
-        {children}
-      </StyledButton>
+        <Checkbox
+          checked={!isHidden}
+          color={color}
+          containerStyle={{
+            alignItems: 'center',
+            border: '0',
+            boxShadow: '0 0 0',
+            color: theme.colors.neutral,
+            display: 'inline-flex',
+            margin: '0 36px 20px 0',
+            padding: '0',
+          }}
+          inputStyle={{
+            border: color ? `none` : `2px solid ${theme.colors.neutral02}`,
+            borderRadius: '4px',
+          }}
+          labelText={name}
+          onBlur={resetLineFocus}
+          onClick={handleClick}
+          onFocus={handleOnMouseEnterOrFocus}
+          ref={ref}
+          theme={theme}
+          {...other}
+        />
+      </div>
     );
   }
 );

package/src/components/LineChart/LineChart.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Chart, ChartProps } from './index';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import {
@@ -21,7 +21,7 @@ const data = [
   {
     name: 'Team 2',
     data: [
-      { x: 1, y: 27, label: 'Team 2, January, $39k' },
+      { x: 1, y: 27, label: 'Team 2, January, $27k' },
       { x: 2, y: 33, label: 'Team 2, February, $33k' },
       { x: 3, y: 39, label: 'Team 2, March, $39k' },
       { x: 4, y: 28, label: 'Team 2, April, $28k' },
@@ -31,11 +31,11 @@ const data = [
   {
     name: 'Team 3',
     data: [
-      { x: 1, y: 32, label: 'Team 3, January, $39k' },
-      { x: 2, y: 41, label: 'Team 3, February, $39k' },
-      { x: 3, y: 45, label: 'Team 3, March, $39k' },
-      { x: 4, y: 56, label: 'Team 3, April, $39k' },
-      { x: 5, y: 48, label: 'Team 3, May, $39k' },
+      { x: 1, y: 32, label: 'Team 3, January, $32k' },
+      { x: 2, y: 41, label: 'Team 3, February, $41k' },
+      { x: 3, y: 45, label: 'Team 3, March, $45k' },
+      { x: 4, y: 56, label: 'Team 3, April, $56k' },
+      { x: 5, y: 48, label: 'Team 3, May, $48k' },
     ],
   },
   {
@@ -92,7 +92,7 @@ const explicitData = [
   {
     name: 'Team 1',
     data: [
-      { month: 1, sales: 39, label: 'Team 1, January, $41k' },
+      { month: 1, sales: 39, label: 'Team 1, January, $39k' },
       { month: 2, sales: 28, label: 'Team 1, February, $28k' },
       { month: 3, sales: 35, label: 'Team 1, March, $35k' },
       { month: 4, sales: 44, label: 'Team 1, April, $44k' },
@@ -109,7 +109,7 @@ const explicitData = [
   {
     name: 'Team 2',
     data: [
-      { month: 1, sales: 27, label: 'Team 2, January, $29k' },
+      { month: 1, sales: 27, label: 'Team 2, January, $27k' },
       { month: 2, sales: 33, label: 'Team 2, February, $33k' },
       { month: 3, sales: 39, label: 'Team 2, March, $39k' },
       { month: 4, sales: 28, label: 'Team 2, April, $28k' },

package/src/components/LineChart/LineChart.test.js

@@ -1,8 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { basicData, explicitData } from './test/exampleChartData';
 import { Chart } from '.';
+import { defaultI18n } from 'react-magma-dom';
 
 const componentProps = {
   xAxis: {
@@ -97,11 +98,11 @@ describe('Line Chart', () => {
     userEvent.hover(getByText('Team 2'));
 
     expect(
-      container.querySelectorAll('svg')[2].childNodes[2].querySelector('path')
-    ).toHaveStyle('opacity: .1');
-    expect(
-      container.querySelectorAll('svg')[2].childNodes[3].querySelector('path')
+      container.querySelectorAll('svg')[3].childNodes[2].querySelector('path')
     ).toHaveStyle('opacity: 1');
+    expect(
+      container.querySelectorAll('svg')[3].childNodes[3].querySelector('path')
+    ).toHaveStyle('opacity: .1');
   });
 
   it('should unrender line if legend button is clicked', () => {
@@ -114,11 +115,11 @@ describe('Line Chart', () => {
       />
     );
 
-    expect(container.querySelectorAll('svg')[2].childNodes.length).toEqual(10);
+    expect(container.querySelectorAll('svg')[3].childNodes.length).toEqual(10);
 
     userEvent.click(getByText('Team 2'));
 
-    expect(container.querySelectorAll('svg')[2].childNodes.length).toEqual(8);
+    expect(container.querySelectorAll('svg')[3].childNodes.length).toEqual(8);
   });
 
   describe('keyboard behavior', () => {
@@ -134,12 +135,13 @@ describe('Line Chart', () => {
 
       userEvent.click(getByText(/chart/i, { selector: 'button' }));
       userEvent.tab();
+      userEvent.tab();
 
       expect(getByLabelText(basicData[0].data[0].label)).toHaveFocus();
 
       userEvent.tab();
 
-      expect(getByText(/team 1/i)).toHaveFocus();
+      expect(getByLabelText(/team 1/i, { selector: 'input' })).toHaveFocus();
     });
 
     it('should only shift tab in to the graph and out, not between lines or scatter points', () => {
@@ -160,7 +162,95 @@ describe('Line Chart', () => {
 
       userEvent.tab({ shift: true });
 
-      expect(getByText(/chart/i, { selector: 'button' })).toHaveFocus();
+      expect(
+        getByLabelText(defaultI18n.charts.line.keyboardInstructionsTooltip)
+      ).toHaveFocus();
+    });
+
+    it('should focus last focused scatter point when tabbing or shift tabbing back in to the chart', () => {
+      const data = [
+        {
+          name: 'Team 1',
+          data: [
+            { x: 1, y: 3.9, label: 'Team 1, January, $39k' },
+            { x: 2, y: 2.8, label: 'Team 1, February, $28k' },
+          ],
+        },
+        {
+          name: 'Team 2',
+          data: [
+            { x: 1, y: 2.7, label: 'Team 2, January, $39k' },
+            { x: 2, y: 3.3, label: 'Team 2, February, $33k' },
+          ],
+        },
+      ];
+      const { getByText, getByLabelText } = render(
+        <Chart
+          componentProps={componentProps}
+          type="line"
+          data={data}
+          title="Basic"
+        />
+      );
+
+      userEvent.click(getByText(/chart/i, { selector: 'button' }));
+      userEvent.tab();
+      userEvent.tab();
+
+      expect(getByLabelText(basicData[0].data[0].label)).toHaveFocus();
+
+      userEvent.keyboard('{arrowright}');
+
+      expect(getByLabelText(data[0].data[1].label)).toHaveFocus();
+
+      userEvent.tab();
+      userEvent.tab({ shift: true });
+
+      expect(getByLabelText(data[0].data[1].label)).toHaveFocus();
+
+      userEvent.tab({ shift: true });
+      userEvent.tab();
+
+      expect(getByLabelText(data[0].data[1].label)).toHaveFocus();
+    });
+
+    it('should focus last scatter point in the graph when shift tabbing back in to the chart and the last focused scatter point is no longer on the graph', () => {
+      const data = [
+        {
+          name: 'Team 1',
+          data: [
+            { x: 1, y: 3.9, label: 'Team 1, January, $39k' },
+            { x: 2, y: 2.8, label: 'Team 1, February, $28k' },
+          ],
+        },
+        {
+          name: 'Team 2',
+          data: [
+            { x: 1, y: 2.7, label: 'Team 2, January, $39k' },
+            { x: 2, y: 3.3, label: 'Team 2, February, $33k' },
+          ],
+        },
+      ];
+      const { getByText, getByLabelText } = render(
+        <Chart
+          componentProps={componentProps}
+          type="line"
+          data={data}
+          title="Basic"
+        />
+      );
+
+      userEvent.click(getByText(/chart/i, { selector: 'button' }));
+      userEvent.tab();
+      userEvent.tab();
+
+      expect(getByLabelText(basicData[0].data[0].label)).toHaveFocus();
+
+      userEvent.tab();
+      userEvent.keyboard('{enter}');
+      userEvent.tab({ shift: true });
+
+      expect(getByLabelText(data[1].data[1].label)).toHaveFocus();
     });
 
     it('should use right arrow keys to go through scatter points', () => {
@@ -191,6 +281,7 @@ describe('Line Chart', () => {
 
       userEvent.click(getByText(/chart/i, { selector: 'button' }));
       userEvent.tab();
+      userEvent.tab();
 
       expect(getByLabelText(data[0].data[0].label)).toHaveFocus();
 
@@ -272,6 +363,7 @@ describe('Line Chart', () => {
 
       userEvent.click(getByText(/chart/i, { selector: 'button' }));
       userEvent.tab();
+      userEvent.tab();
 
       expect(getByLabelText(data[0].data[0].label)).toHaveFocus();
 
@@ -329,6 +421,7 @@ describe('Line Chart', () => {
 
       userEvent.click(getByText(/chart/i, { selector: 'button' }));
       userEvent.tab();
+      userEvent.tab();
 
       expect(getByLabelText(basicData[0].data[0].label)).toHaveFocus();
 
@@ -355,7 +448,7 @@ describe('Line Chart', () => {
 
       userEvent.keyboard('{arrowup}');
 
-      expect(getByLabelText(basicData[2].data[0].label)).toHaveFocus();
+      expect(getByLabelText(basicData[2].data[4].label)).toHaveFocus();
     });
 
     it('should wrap to the last line when clicking the up arrow key while focused on the first line', () => {
@@ -370,6 +463,7 @@ describe('Line Chart', () => {
 
       userEvent.click(getByText(/chart/i, { selector: 'button' }));
       userEvent.tab();
+      userEvent.tab();
 
       expect(getByLabelText(basicData[0].data[0].label)).toHaveFocus();
 
@@ -396,7 +490,7 @@ describe('Line Chart', () => {
 
       userEvent.keyboard('{arrowdown}');
 
-      expect(getByLabelText(basicData[0].data[0].label)).toHaveFocus();
+      expect(getByLabelText(basicData[0].data[4].label)).toHaveFocus();
     });
   });
 });