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

package/src/components/LineChart/Chart.tsx

@@ -1,21 +1,43 @@
 import * as React from 'react';
+import {
+  I18nContext,
+  styled,
+  ThemeContext,
+  useDescendants,
+} from 'react-magma-dom';
+import { css } from '@emotion/core';
+import { KeyboardIcon } from 'react-magma-icons';
 
 import { LineChart, LineChartProps } from './LineChart';
 import { ChartDataTable } from './ChartDataTable';
 import {
-  Heading,
+  Announce,
+  ButtonVariant,
+  Card,
+  IconButton,
   Paragraph,
   TabsContainer,
   Tabs,
   Tab,
   TabPanelsContainer,
   TabPanel,
+  Tooltip,
+  TypographyVisualStyle,
 } from 'react-magma-dom';
 
 interface BaseChartProps {
+  /**
+   * Description of what the line chart data represents placed above the chart
+   */
   description?: string;
   testId?: string;
+  /**
+   * Title of the line chart
+   */
   title: string;
+  /**
+   * Type of chart - for now just 'line' is accepted
+   */
   type: string;
 }
 export interface ChartProps<T extends any>
@@ -23,33 +45,171 @@ export interface ChartProps<T extends any>
     Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
     LineChartProps<T> {}
 
-function BaseChart<T>(
-  props: ChartProps<T>,
-  ref: React.MutableRefObject<HTMLDivElement>
-) {
+const StyledTitle = styled.span`
+  color: ${props => props.theme.colors.neutral};
+  font-size: ${props => props.theme.typeScale.size04.fontSize};
+  font-weight: 600;
+  line-height: ${props => props.theme.typeScale.size04.lineHeight};
+  margin: 0 0 12px 0;
+`;
+
+const StyledParagraph = styled(Paragraph)`
+  font-size: ${props => props.theme.typeScale.size02.fontSize};
+  margin: 0 0 18px 0;
+`;
+
+const StyledTabsContainer = styled(TabsContainer)`
+  width: 800px;
+  ul {
+    box-shadow: inset 0 -1px 0 ${props => props.theme.colors.neutral06};
+  }
+`;
+
+const StyledTabPanel = styled(TabPanel)`
+  padding: 22px 0;
+`;
+
+const KeyboardInstructionsCard = styled(Card)<{
+  isOpen?: boolean;
+  maxHeight?: string;
+  width?: string;
+}>`
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  display: ${props => (props.isOpen ? 'block' : 'none')};
+  right: ${props => props.theme.spaceScale.spacing02};
+  max-height: ${props =>
+    props.maxHeight ? props.maxHeight : props.theme.dropdown.content.maxHeight};
+  opacity: ${props => (props.isOpen ? '1' : '0')};
+  outline: 0;
+  overflow-y: auto;
+  padding: ${props => props.theme.spaceScale.spacing05}
+    ${props => props.theme.spaceScale.spacing05};
+  position: absolute;
+  transition: opacity 0.3s;
+  white-space: nowrap;
+  z-index: 2;
+
+  ${props =>
+    props.width &&
+    css`
+      white-space: normal;
+      width: ${props.width};
+    `}
+`;
+
+function BaseChart<T>(props: ChartProps<T>, ref: React.Ref<HTMLDivElement>) {
   const { description, title, testId, type, ...other } = props;
-  const firstTabRef = React.useRef<HTMLButtonElement>();
+  const keyboardInstructionsRef = React.useRef<HTMLButtonElement>(null);
+  const lastFocusedScatterPoint = React.useRef<SVGPathElement>(null);
+  const theme = React.useContext(ThemeContext);
+  const i18n = React.useContext(I18nContext);
+
+  const [pointRefArray, registerPoint, unregisterPoint] = useDescendants();
+
+  const [isKeyboardInstructionsOpen, setIsKeyboardInstructionsOpen] =
+    React.useState<boolean>(false);
+
+  function handleKeyboardInstructionsButtonBlur() {
+    setIsKeyboardInstructionsOpen(false);
+  }
+
+  function handleKeyboardInstructionsButtonClick() {
+    setIsKeyboardInstructionsOpen(prevOpen => !prevOpen);
+  }
+
+  function handleKeyboardInstructionsButtonKeydown(event: React.KeyboardEvent) {
+    const { key, shiftKey } = event;
+
+    switch (key) {
+      case 'Escape': {
+        setIsKeyboardInstructionsOpen(false);
+        break;
+      }
+      case 'Tab': {
+        if (
+          !shiftKey &&
+          lastFocusedScatterPoint &&
+          lastFocusedScatterPoint.current &&
+          pointRefArray.current.find(
+            point => point.current === lastFocusedScatterPoint.current
+          )
+        ) {
+          event.preventDefault();
+          lastFocusedScatterPoint.current.focus();
+        }
+        break;
+      }
+    }
+  }
 
   return (
     <div ref={ref}>
-      <Heading level={3}>{title}</Heading>
+      <StyledTitle theme={theme}>{title}</StyledTitle>
       {description && (
-        <Paragraph style={{ maxWidth: '800px' }}>{description}</Paragraph>
+        <StyledParagraph
+          theme={theme}
+          visualStyle={TypographyVisualStyle.bodySmall}
+        >
+          {description}
+        </StyledParagraph>
       )}
-      <TabsContainer>
-        <Tabs aria-label="Line Chart Demo">
-          <Tab ref={firstTabRef}>Chart</Tab>
-          <Tab>Data</Tab>
+      <StyledTabsContainer theme={theme}>
+        <Tabs>
+          <Tab>{i18n.charts.line.chartTabLabel}</Tab>
+          <Tab>{i18n.charts.line.dataTabLabel}</Tab>
+          <div
+            onBlur={handleKeyboardInstructionsButtonBlur}
+            style={{
+              display: 'inline-block',
+              marginLeft: 'auto',
+            }}
+          >
+            <Tooltip
+              content={i18n.charts.line.keyboardInstructionsTooltip}
+              ref={keyboardInstructionsRef}
+            >
+              <IconButton
+                aria-controls="keyboardInstructions"
+                aria-label={i18n.charts.line.keyboardInstructionsTooltip}
+                aria-expanded={Boolean(isKeyboardInstructionsOpen)}
+                icon={<KeyboardIcon />}
+                onClick={handleKeyboardInstructionsButtonClick}
+                onKeyDown={handleKeyboardInstructionsButtonKeydown}
+                variant={ButtonVariant.link}
+              />
+            </Tooltip>
+            <Announce>
+              <KeyboardInstructionsCard
+                id="keyboardInstructions"
+                isOpen={isKeyboardInstructionsOpen}
+                theme={theme}
+                width="350px"
+              >
+                <Paragraph
+                  visualStyle={TypographyVisualStyle.headingXSmall}
+                  style={{ margin: '0 0 16px' }}
+                >
+                  {i18n.charts.line.keyboardInstructionsHeader}
+                </Paragraph>
+                {i18n.charts.line.keyboardInstructions}
+              </KeyboardInstructionsCard>
+            </Announce>
+          </div>
         </Tabs>
         <TabPanelsContainer>
-          <TabPanel>
+          <StyledTabPanel theme={theme}>
             {type === 'line' && (
-              <LineChart<T> {...other} tabRef={firstTabRef} />
+              <LineChart<T>
+                {...other}
+                lastFocusedScatterPoint={lastFocusedScatterPoint}
+                pointRefArray={pointRefArray}
+                registerPoint={registerPoint}
+                tabRef={keyboardInstructionsRef}
+                unregisterPoint={unregisterPoint}
+              />
             )}
-          </TabPanel>
-          <TabPanel>
-            <Heading level={4}>{title}</Heading>
-            {description && <Paragraph>{description}</Paragraph>}
+          </StyledTabPanel>
+          <StyledTabPanel theme={theme}>
             <ChartDataTable
               data={other.data}
               xData={{
@@ -62,9 +222,9 @@ function BaseChart<T>(
                 tickFormat: other.componentProps?.yAxis?.tickFormat,
               }}
             />
-          </TabPanel>
+          </StyledTabPanel>
         </TabPanelsContainer>
-      </TabsContainer>
+      </StyledTabsContainer>
     </div>
   );
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { render } from '@testing-library/react';
 import { basicData, explicitData } from './test/exampleChartData';
 import { ChartDataTable } from './ChartDataTable';

package/src/components/LineChart/ChartDataTable.tsx

@@ -1,13 +1,9 @@
 import * as React from 'react';
 import { VictoryAxisProps } from 'victory';
 
-import {
-  Card,
-  Datagrid,
-  Spinner,
-} from 'react-magma-dom';
+import { Card, Datagrid, Spinner } from 'react-magma-dom';
 
-export function toCamelCase(str) {
+export function toCamelCase(str: string) {
   return str
     .toLowerCase()
     .replace(/[^a-z 0-9]/gi, '')
@@ -33,7 +29,7 @@ export interface DataTableProps {
 
 export const ChartDataTable = (props: DataTableProps) => {
   const {
-    data,
+    data = [],
     xData: {
       keyValue: xKeyValue,
       label: xAxisLabel,
@@ -52,10 +48,10 @@ export const ChartDataTable = (props: DataTableProps) => {
   }, [data]);
 
   function convertData() {
-    const xField = toCamelCase(xKeyValue || xAxisLabel || 'x');
+    const xField = toCamelCase((xKeyValue || xAxisLabel || 'x') as string);
     const xTickValuesArray = data.reduce((valuesArray, { data: dataset }) => {
-      dataset.forEach(datum => {
-        const value = datum.x || datum[xKeyValue];
+      dataset.forEach((datum: any) => {
+        const value = datum.x || (xKeyValue && datum[xKeyValue]);
         !valuesArray.includes(value) && valuesArray.push(value);
       });
 
@@ -65,28 +61,37 @@ export const ChartDataTable = (props: DataTableProps) => {
     let baseTableData = {
       columns:
         xTickValuesArray.length > 0
-          ? [{ field: xField, header: xAxisLabel || xKeyValue || 'X' }]
+          ? [
+              {
+                field: xField,
+                header: xAxisLabel || xKeyValue || 'X',
+                isRowHeader: true,
+              },
+            ]
           : [],
-      rows: xTickValuesArray.reduce((agg, tick, index) => {
-        const tickValue =
-          xTickValues &&
-          typeof tick === 'number' &&
-          xTickValues.length === xTickValuesArray.length
-            ? xTickFormat && typeof xTickFormat === 'function'
-              ? xTickFormat(xTickValues[tick - 1])
-              : xTickValues[tick - 1]
-            : xTickFormat && Array.isArray(xTickFormat)
-            ? xTickFormat[tick - 1]
-            : xTickFormat && typeof xTickFormat === 'function'
-            ? xTickFormat(tick)
-            : tick;
-        agg.push({
-          [xField]: tickValue,
-          id: index,
-        });
+      rows: xTickValuesArray.reduce(
+        (agg: any[], tick: number, index: number) => {
+          const tickValue =
+            xTickValues &&
+            typeof tick === 'number' &&
+            xTickValues.length === xTickValuesArray.length
+              ? xTickFormat && typeof xTickFormat === 'function'
+                ? xTickFormat(xTickValues[tick - 1])
+                : xTickValues[tick - 1]
+              : xTickFormat && Array.isArray(xTickFormat)
+              ? xTickFormat[tick - 1]
+              : xTickFormat && typeof xTickFormat === 'function'
+              ? xTickFormat(tick)
+              : tick;
+          agg.push({
+            [xField]: tickValue,
+            id: index,
+          });
 
-        return agg;
-      }, []),
+          return agg;
+        },
+        []
+      ),
     };
 
     return data.reduce((tableData, datum) => {
@@ -98,8 +103,9 @@ export const ChartDataTable = (props: DataTableProps) => {
         header,
       });
 
-      dataset.forEach((d, i) => {
-        const yValue = d.y || d[yKeyValue];
+      dataset.forEach((d: any, i: number) => {
+        const yValue =
+          d.y || d.y === 0 ? d.y : undefined || (yKeyValue && d[yKeyValue]);
         tableData.rows[i] = {
           ...tableData.rows[i],
           id: baseTableData.rows.length > 0 ? i + 1 : i,

package/src/components/LineChart/CustomAxisComponent.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { LineSegment, LineSegmentProps } from 'victory';
+
+export const CustomAxisComponent: React.FunctionComponent<LineSegmentProps> = ({
+  events,
+  ...props
+}: any) => {
+  return (
+    <g>
+      <LineSegment
+        {...props}
+        events={events}
+        style={{
+          strokeWidth: '50px',
+          stroke: 'transparent',
+        }}
+      />
+      <LineSegment
+        {...props}
+        events={events}
+        style={{
+          strokeWidth: '1px',
+          stroke: 'black',
+          strokeOpacity: '0.2',
+        }}
+      />
+    </g>
+  );
+};

package/src/components/LineChart/CustomPointComponent.tsx

@@ -1,19 +1,92 @@
-import React from 'react';
+import * as React from 'react';
+import { Point, PointProps } from 'victory';
 import { useForceUpdate } from 'react-magma-dom';
 
-export const CustomPointComponent = props => {
-  const { lineIndex, pointRefArray, registerPoint, unregisterPoint, ...other } =
-    props;
+export interface CustomScatterDataComponentInterface extends PointProps {
+  lineIndex: number;
+  pointRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>;
+  registerPoint: (
+    refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,
+    ref: React.MutableRefObject<Element>
+  ) => void;
+  unregisterPoint: (
+    refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,
+    ref: React.MutableRefObject<Element>
+  ) => void;
+}
+
+export interface CustomPointComponentInterface {
+  lineIndex: number;
+  pointIndex: PointProps['index'];
+  pointRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>;
+  registerPoint: (
+    refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,
+    ref: React.MutableRefObject<Element>
+  ) => void;
+  unregisterPoint: (
+    refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,
+    ref: React.MutableRefObject<Element>
+  ) => void;
+}
+
+export const CustomScatterDataComponent = (
+  props: CustomScatterDataComponentInterface
+) => {
+  const {
+    datum,
+    index: pointIndex,
+    lineIndex,
+    pointRefArray,
+    registerPoint,
+    unregisterPoint,
+    ...other
+  } = props;
+  return (
+    <Point
+      {...other}
+      ariaLabel={datum.label}
+      pathComponent={
+        <CustomPointComponent
+          lineIndex={lineIndex}
+          pointIndex={pointIndex}
+          pointRefArray={pointRefArray}
+          registerPoint={registerPoint}
+          unregisterPoint={unregisterPoint}
+        />
+      }
+      role="button"
+      tabIndex={0}
+    />
+  );
+};
+
+export const CustomPointComponent = (props: CustomPointComponentInterface) => {
+  const {
+    lineIndex,
+    pointRefArray,
+    pointIndex,
+    registerPoint,
+    unregisterPoint,
+    ...other
+  } = props;
   const forceUpdate = useForceUpdate();
-  const ref = React.useRef<SVGPathElement>();
+  const ref = React.useRef<SVGPathElement | null>(null);
 
   React.useEffect(() => {
-    registerPoint(pointRefArray, ref);
+    registerPoint(pointRefArray, ref as React.MutableRefObject<Element>);
 
     forceUpdate();
 
-    return () => unregisterPoint(pointRefArray, ref);
+    return () =>
+      unregisterPoint(pointRefArray, ref as React.MutableRefObject<Element>);
   }, []);
 
-  return <path ref={ref} data-line-index={lineIndex} {...other} />;
+  return (
+    <path
+      ref={ref}
+      data-line-index={lineIndex}
+      data-point-index={pointIndex}
+      {...other}
+    />
+  );
 };

package/src/components/LineChart/DataTable.tsx

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 import {
   Card,
   Table,
@@ -35,7 +37,7 @@ export const DataTable = props => {
               <TableHeaderCell
                 scope={TableHeaderCellScope.row}
                 style={{
-                  borderRight: '2px solid #dfdfdf',
+                  borderRight: '1px solid #dfdfdf',
                   borderBottom: 0,
                 }}
               >

package/src/components/LineChart/GraphTooltip.tsx

@@ -1,66 +1,98 @@
-import React from 'react';
+import * as React from 'react';
 import {
   StyledTooltip,
   ThemeContext,
   TooltipArrow,
   TooltipPosition,
+  ThemeInterface,
+  styled,
 } from 'react-magma-dom';
-import styled from '@emotion/styled';
+
+const StyledGraphTooltip = styled(StyledTooltip)`
+  background: ${(props: any) => props.theme.colors.neutral08};
+  border: 1px solid ${(props: any) => props.theme.colors.neutral06};
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
+  box-sizing: border-box;
+  color: ${(props: any) => props.theme.colors.neutral};
+  font-size: ${(props: any) => props.theme.typeScale.size02.fontSize};
+  font-weight: normal;
+  line-height: ${(props: any) => props.theme.typeScale.size02.lineHeight};
+  margin: 0;
+  padding: 8px;
+  width: fit-content;
+  div {
+    margin-bottom: 8px;
+    display: flex;
+    align-items: flex-start;
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+`;
 
 const TooltipColorSwatch = styled.span`
-  border: ${props => (props.color ? 'none' : '3px solid black')};
+  background: ${(props: any) => props.color};
+  border: ${(props: any) => (props.color ? 'none' : '3px solid black')};
   border-radius: 4px;
-  display: inline-block;
-  height: 14px;
+  height: 20px;
+  width: 20px;
   margin-right: 8px;
-  width: 14px;
-  background: ${props => props.color};
 `;
 
-export const GraphTooltip = props => {
-  const { datum, index, x, y } = props;
+export const GraphTooltip = (props: any) => {
+  const { datum, index, showTooltip, x, y } = props;
 
-  const theme = React.useContext(ThemeContext);
+  const theme: ThemeInterface = React.useContext(ThemeContext);
+  const linePointIndex = `${index}-${datum.index}`;
 
-  return (
+  return showTooltip === linePointIndex ? (
     <g style={{ pointerEvents: 'none' }}>
-      <foreignObject x={x} y={y} width="200" height="100">
-        <StyledTooltip
+      <foreignObject x={x} y={y} width="275" height="100%">
+        <StyledGraphTooltip
           position={TooltipPosition.top}
           role="tooltip"
           theme={theme}
         >
-          <TooltipColorSwatch color={theme.charts.line.colors[index]} />
-          <span>{datum.label}</span>
+          <div>
+            <TooltipColorSwatch color={theme.iterableColors[index]} />
+            <span>{datum.label}</span>
+          </div>
           <TooltipArrow theme={theme} />
-        </StyledTooltip>
+        </StyledGraphTooltip>
       </foreignObject>
     </g>
-  );
+  ) : null;
 };
 
-export const AxisTooltip = props => {
-  const { x, y, activePoints } = props;
+export const AxisTooltip = (props: any) => {
+  const { x, y, activePoints, hiddenData, dataLength } = props;
+
+  const pointsIndexes = Array.from(
+    Array(dataLength - 0),
+    (_, i) => i + 0
+  ).filter(i => !hiddenData.includes(i));
 
-  const theme = React.useContext(ThemeContext);
+  const theme: ThemeInterface = React.useContext(ThemeContext);
 
   return (
     <g style={{ pointerEvents: 'none' }}>
-      <foreignObject x={x} y={y} width="200" height="100">
-        <StyledTooltip
+      <foreignObject x={x} y={y} width="275" height="100%">
+        <StyledGraphTooltip
           data-testid="axis-tooltip"
           position={TooltipPosition.top}
           role="tooltip"
           theme={theme}
         >
-          {activePoints.map((point, i) => (
-            <div key={i} style={{ display: 'inline-block' }}>
-              <TooltipColorSwatch color={theme.charts.line.colors[i]} />
+          {activePoints.map((point: any, i: number) => (
+            <div key={i}>
+              <TooltipColorSwatch
+                color={theme.iterableColors[pointsIndexes[i]]}
+              />
               <span>{point.label}</span>
             </div>
           ))}
           <TooltipArrow theme={theme} />
-        </StyledTooltip>
+        </StyledGraphTooltip>
       </foreignObject>
     </g>
   );