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

package/src/components/LineChart/LineChart.tsx

@@ -9,20 +9,21 @@ import {
   VictoryScatter,
   VictoryScatterProps,
   VictoryTooltip,
-  Point,
   VictoryVoronoiContainer,
 } from 'victory';
 
 import {
   I18nContext,
   ThemeContext,
-  useDescendants,
   styled,
+  ThemeInterface,
+  I18nInterface,
 } from 'react-magma-dom';
 
-import magmaTheme from './magma-charts';
+import { magmaTheme } from './magma-charts';
 import { AxisTooltip, GraphTooltip } from './GraphTooltip';
-import { CustomPointComponent } from './CustomPointComponent';
+import { CustomScatterDataComponent } from './CustomPointComponent';
+import { CustomAxisComponent } from './CustomAxisComponent';
 import { LegendButton } from './LegendButton';
 
 export type LineChartAxisStyle = VictoryAxisProps['style'];
@@ -52,14 +53,48 @@ export interface LineChartComponentProps {
 }
 
 export interface LineChartProps<T extends ChartDataOptions> {
+  /**
+   * Props passed to each component that makes up the line chart. See `victory` for accepted props.
+   */
   componentProps?: LineChartComponentProps;
+  /**
+   * Data used to build the chart
+   */
   data?: LineChartData<T>[];
   isMulti?: boolean;
   /**
    * @internal
    */
-  tabRef?: React.MutableRefObject<HTMLButtonElement>;
+  lastFocusedScatterPoint: React.MutableRefObject<SVGPathElement | null>;
+  /**
+   * @internal
+   */
+  pointRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>;
+  /**
+   * @internal
+   */
+  registerPoint: (
+    refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,
+    ref: React.MutableRefObject<Element>
+  ) => void;
+  /**
+   * @internal
+   */
+  tabRef: React.MutableRefObject<HTMLButtonElement | null>;
+  /**
+   * @internal
+   */
+  unregisterPoint: (
+    refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,
+    ref: React.MutableRefObject<Element>
+  ) => void;
+  /**
+   * Value of x key in chart data
+   */
   x?: keyof T;
+  /**
+   * Value of y key in chart data
+   */
   y?: keyof T;
 }
 
@@ -78,13 +113,10 @@ const DataLegendsContainer = styled.div`
 `;
 
 const DataLegendsDescription = styled.p`
-  color: ${props => props.theme.colors.neutral03};
+  color: ${(props: any) => props.theme.colors.neutral03};
+  font-size: ${(props: any) => props.theme.typeScale.size02.fontSize};
 `;
 
-const ContainerLabelComponent = (
-  <VictoryTooltip flyoutComponent={<AxisTooltip />} />
-);
-
 export function LineChart<T>(props: LineChartProps<T>) {
   const {
     componentProps: {
@@ -93,92 +125,77 @@ export function LineChart<T>(props: LineChartProps<T>) {
       scatter = {},
       xAxis: {
         style: {
-          axisLabel: xAxisLabel,
-          tickLabels: xTickLabels,
+          axisLabel: xAxisLabel = undefined,
+          tickLabels: xTickLabels = undefined,
           ...xRest
         } = {},
         ...xAxisOther
-      },
+      } = { style: {} },
       yAxis: {
         style: {
-          axisLabel: yAxisLabel,
-          tickLabels: yTickLabels,
+          axisLabel: yAxisLabel = undefined,
+          tickLabels: yTickLabels = undefined,
           ...yRest
         } = {},
         ...yAxisOther
-      } = {},
+      } = { style: {} },
     } = {},
-    data,
+    data = [],
+    lastFocusedScatterPoint,
+    pointRefArray,
+    registerPoint,
+    unregisterPoint,
     tabRef,
     x,
     y,
   } = props;
 
-  const theme = React.useContext(ThemeContext);
-  const i18n = React.useContext(I18nContext);
+  const theme: ThemeInterface = React.useContext(ThemeContext);
+  const i18n: I18nInterface = React.useContext(I18nContext);
 
   const [hiddenData, setHiddenData] = React.useState<number[]>([]);
   const [width, setWidth] = React.useState<number>(800);
-  const [focusedLine, setFocusedLine] = React.useState<number>(null);
+  const [focusedLine, setFocusedLine] = React.useState<number | null>(null);
+  const [showTooltip, setShowTooltip] = React.useState<string | null>(null);
   const [showXAxisLabel, setShowXAxisLabel] = React.useState<boolean>(true);
+  const [hoveringOnXAxisLine, setHoveringOnXAxisLine] =
+    React.useState<boolean>(false);
 
-  const containerRef = React.useRef<HTMLDivElement>();
-  const firstLegendButtonRef = React.useRef<HTMLButtonElement>();
-
-  const [pointRefArray, registerPoint, unregisterPoint] = useDescendants();
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const firstLegendButtonRef = React.useRef<HTMLButtonElement>(null);
 
   React.useEffect(() => {
     updateWidth();
+
     window.addEventListener('resize', updateWidth);
+    window.addEventListener('keydown', handleEsc);
 
     return () => {
       window.removeEventListener('resize', updateWidth);
+      window.removeEventListener('keydown', handleEsc);
     };
   }, []);
 
-  const scatterNames: string[] = data.map((_, i) => `scatter-${i}`);
+  React.useEffect(() => {
+    window.addEventListener('mousemove', handleMouseMove);
 
-  const chartEvents = [
-    {
-      target: 'data',
-      childName: scatterNames,
-      eventHandlers: {
-        onMouseEnter: () => {
-          return [
-            {
-              childName: 'xAxisGroupLabel',
-              target: 'labels',
-              mutation: props => {
-                setShowXAxisLabel(false);
-                return props;
-              },
-            },
-          ];
-        },
-        onMouseLeave: () => {
-          return [
-            {
-              childName: 'xAxisGroupLabel',
-              target: 'labels',
-              mutation: props => {
-                setShowXAxisLabel(true);
-                return props;
-              },
-            },
-          ];
-        },
-      },
-    },
-  ];
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [showTooltip]);
+
+  const scatterNames: string[] = data.map((_, i) => `scatter-${i}`);
 
   const xAxisStyles = {
     tickLabels: {
-      fontSize: 14,
+      color: '#3f3f3f',
+      fontSize: 12,
       ...xTickLabels,
     },
     axisLabel: {
-      padding: 32,
-      fontSize: 16,
+      color: '#3f3f3f',
+      padding: 44,
+      fontSize: 14,
       fontWeight: 'bold',
       ...xAxisLabel,
     },
@@ -187,12 +204,13 @@ export function LineChart<T>(props: LineChartProps<T>) {
 
   const yAxisStyles = {
     tickLabels: {
-      fontSize: 14,
+      fontSize: 12,
       ...yTickLabels,
     },
     axisLabel: {
-      padding: 56,
-      fontSize: 16,
+      color: '#3f3f3f',
+      padding: 64,
+      fontSize: 14,
       fontWeight: 'bold',
       ...yAxisLabel,
     },
@@ -200,7 +218,18 @@ export function LineChart<T>(props: LineChartProps<T>) {
   };
 
   function updateWidth() {
-    setWidth(containerRef.current.clientWidth);
+    containerRef.current && setWidth(containerRef.current.clientWidth);
+  }
+
+  function handleEsc(event: KeyboardEvent): any {
+    if (event.key === 'Escape') {
+      setShowTooltip(null);
+      setShowXAxisLabel(false);
+    }
+  }
+
+  function handleMouseMove() {
+    !showTooltip && setShowXAxisLabel(true);
   }
 
   function setLineOpacity(index: number) {
@@ -223,21 +252,30 @@ export function LineChart<T>(props: LineChartProps<T>) {
     setFocusedLine(null);
   }
 
-  const buildLineIndexes = (acc, point) => {
+  const buildLineIndexes = (
+    acc: number[],
+    point: React.MutableRefObject<Element>
+  ) => {
     if (point.current) {
       const currentLineIndex = parseInt(
-        point.current.getAttribute('data-line-index'),
+        point.current.getAttribute('data-line-index') as string,
         10
       );
       !acc.includes(currentLineIndex) &&
-        acc.push(parseInt(point.current.getAttribute('data-line-index'), 10));
+        acc.push(
+          parseInt(point.current.getAttribute('data-line-index') as string, 10)
+        );
     }
     return acc;
   };
 
-  const buildLineIndexData = point => {
+  const buildLineIndexData = (point: React.MutableRefObject<Element>) => {
     const currentLineIndex = parseInt(
-      point.current.getAttribute('data-line-index'),
+      point.current.getAttribute('data-line-index') as string,
+      10
+    );
+    const currentPointIndex = parseInt(
+      point.current.getAttribute('data-point-index') as string,
       10
     );
     const lineIndexes = pointRefArray.current.reduce(buildLineIndexes, []);
@@ -247,24 +285,37 @@ export function LineChart<T>(props: LineChartProps<T>) {
 
     return {
       currentLineIndex,
+      currentPointIndex,
       lineIndexes,
       lowestLineIndex,
       highestLineIndex,
     };
   };
 
-  const findPointToFocus = index => point =>
-    point.current &&
-    parseInt(point.current.getAttribute('data-line-index'), 10) === index;
+  const findPointToFocus =
+    (lineIndex: number, pointIndex: number) =>
+    (point: React.MutableRefObject<Element>) =>
+      point.current &&
+      parseInt(point.current.getAttribute('data-line-index') as string, 10) ===
+        lineIndex &&
+      parseInt(point.current.getAttribute('data-point-index') as string, 10) ===
+        pointIndex;
 
+  // eslint-disable-next-line complexity
   function handleChartContainerKeyDown(event: React.KeyboardEvent) {
     const { key, shiftKey } = event;
     switch (key) {
       case 'Tab': {
         event.preventDefault();
+        lastFocusedScatterPoint.current = (
+          pointRefArray.current.find(
+            point => point.current === document.activeElement
+          ) as React.MutableRefObject<Element>
+        ).current as SVGPathElement;
         shiftKey
-          ? tabRef.current.focus()
-          : firstLegendButtonRef.current.focus();
+          ? tabRef.current && tabRef.current.focus()
+          : firstLegendButtonRef.current &&
+            firstLegendButtonRef.current.focus();
         break;
       }
       case 'ArrowRight': {
@@ -309,6 +360,7 @@ export function LineChart<T>(props: LineChartProps<T>) {
         if (focusedPoint && focusedPoint.current) {
           const {
             currentLineIndex,
+            currentPointIndex,
             lineIndexes,
             lowestLineIndex,
             highestLineIndex,
@@ -317,8 +369,11 @@ export function LineChart<T>(props: LineChartProps<T>) {
           switch (currentLineIndex) {
             case lowestLineIndex: {
               (
-                pointRefArray.current.find(findPointToFocus(highestLineIndex))
-                  .current as HTMLButtonElement
+                (
+                  pointRefArray.current.find(
+                    findPointToFocus(highestLineIndex, currentPointIndex)
+                  ) as React.MutableRefObject<Element>
+                ).current as HTMLButtonElement
               ).focus();
               break;
             }
@@ -326,8 +381,10 @@ export function LineChart<T>(props: LineChartProps<T>) {
               const nextLowestLineIndex =
                 lineIndexes[lineIndexes.indexOf(currentLineIndex) - 1];
               (
-                pointRefArray.current.find(
-                  findPointToFocus(nextLowestLineIndex)
+                (
+                  pointRefArray.current.find(
+                    findPointToFocus(nextLowestLineIndex, currentPointIndex)
+                  ) as React.MutableRefObject<Element>
                 ).current as HTMLButtonElement
               ).focus();
             }
@@ -344,6 +401,7 @@ export function LineChart<T>(props: LineChartProps<T>) {
         if (focusedPoint && focusedPoint.current) {
           const {
             currentLineIndex,
+            currentPointIndex,
             lineIndexes,
             lowestLineIndex,
             highestLineIndex,
@@ -352,8 +410,11 @@ export function LineChart<T>(props: LineChartProps<T>) {
           switch (currentLineIndex) {
             case highestLineIndex: {
               (
-                pointRefArray.current.find(findPointToFocus(lowestLineIndex))
-                  .current as HTMLButtonElement
+                (
+                  pointRefArray.current.find(
+                    findPointToFocus(lowestLineIndex, currentPointIndex)
+                  ) as React.MutableRefObject<Element>
+                ).current as HTMLButtonElement
               ).focus();
               break;
             }
@@ -361,8 +422,10 @@ export function LineChart<T>(props: LineChartProps<T>) {
               const nextHighestLineIndex =
                 lineIndexes[lineIndexes.indexOf(currentLineIndex) + 1];
               (
-                pointRefArray.current.find(
-                  findPointToFocus(nextHighestLineIndex)
+                (
+                  pointRefArray.current.find(
+                    findPointToFocus(nextHighestLineIndex, currentPointIndex)
+                  ) as React.MutableRefObject<Element>
                 ).current as HTMLButtonElement
               ).focus();
             }
@@ -373,17 +436,33 @@ export function LineChart<T>(props: LineChartProps<T>) {
     }
   }
 
+  function handleFirstLegendButtonKeydown(event: React.KeyboardEvent) {
+    const { key, shiftKey } = event;
+    switch (key) {
+      case 'Tab': {
+        if (
+          shiftKey &&
+          lastFocusedScatterPoint &&
+          lastFocusedScatterPoint.current &&
+          pointRefArray.current.find(
+            point => point.current === lastFocusedScatterPoint.current
+          )
+        ) {
+          event.preventDefault();
+          lastFocusedScatterPoint.current.focus();
+        }
+        break;
+      }
+    }
+  }
+
   return (
     <LineChartContainer ref={containerRef}>
-      <VictoryChartContainer
-        ref={containerRef}
-        onKeyDown={handleChartContainerKeyDown}
-      >
+      <VictoryChartContainer onKeyDown={handleChartContainerKeyDown}>
         <VictoryChart
           domainPadding={32}
-          events={chartEvents}
           height={400}
-          padding={{ top: 8, left: 80, right: 0, bottom: 88 }}
+          padding={{ top: 0, left: 80, right: 0, bottom: 62 }}
           theme={magmaTheme}
           width={width}
           containerComponent={
@@ -391,18 +470,28 @@ export function LineChart<T>(props: LineChartProps<T>) {
               name="xAxisGroupLabel"
               voronoiBlacklist={scatterNames}
               voronoiDimension="x"
-              labels={showXAxisLabel ? () => ` ` : undefined}
+              labels={
+                hoveringOnXAxisLine && showXAxisLabel ? () => ` ` : undefined
+              }
               labelComponent={
-                showXAxisLabel ? ContainerLabelComponent : undefined
+                showXAxisLabel ? (
+                  <VictoryTooltip
+                    flyoutComponent={
+                      <AxisTooltip
+                        dataLength={data.length}
+                        hiddenData={hiddenData}
+                      />
+                    }
+                  />
+                ) : undefined
               }
+              role="presentation"
               voronoiPadding={32}
             />
           }
           {...chart}
         >
-          <VictoryAxis {...xAxisOther} style={xAxisStyles} />
           <VictoryAxis {...yAxisOther} dependentAxis style={yAxisStyles} />
-
           {data.map(
             ({ data: dataset }, i) =>
               !hiddenData.includes(i) && (
@@ -410,7 +499,7 @@ export function LineChart<T>(props: LineChartProps<T>) {
                   style={{
                     data: {
                       opacity: setLineOpacity(i),
-                      stroke: theme.charts.line.colors[i],
+                      stroke: theme.iterableColors[i],
                       strokeWidth: '3',
                     },
                     parent: { border: theme.colors.neutral04 },
@@ -424,41 +513,116 @@ export function LineChart<T>(props: LineChartProps<T>) {
                 />
               )
           )}
+          <VictoryAxis
+            {...xAxisOther}
+            style={xAxisStyles}
+            gridComponent={
+              <CustomAxisComponent
+                events={{
+                  onMouseEnter: () => setHoveringOnXAxisLine(true),
+                  onMouseLeave: () => setHoveringOnXAxisLine(false),
+                }}
+              />
+            }
+          />
           {data.map(
             ({ data: dataset }, i) =>
               !hiddenData.includes(i) && (
                 <VictoryScatter
                   name={`scatter-${i}`}
+                  events={[
+                    {
+                      target: 'data',
+                      eventHandlers: {
+                        onBlur: () => {
+                          setShowXAxisLabel(true);
+                          setShowTooltip(null);
+                          return [
+                            {
+                              target: 'labels',
+                              mutation: () => ({ active: undefined }),
+                            },
+                          ];
+                        },
+                        onClick: () => {
+                          return [
+                            {
+                              target: 'labels',
+                              mutation: props => {
+                                setShowTooltip(
+                                  `${props.datum.lineIndex}-${props.datum.index}`
+                                );
+                                return { active: true };
+                              },
+                            },
+                          ];
+                        },
+                        onFocus: () => {
+                          setShowXAxisLabel(false);
+                          return [
+                            {
+                              target: 'labels',
+                              mutation: props => {
+                                setShowTooltip(
+                                  `${props.datum.lineIndex}-${props.datum.index}`
+                                );
+                                return { active: true };
+                              },
+                            },
+                          ];
+                        },
+                        onMouseEnter: () => {
+                          setShowXAxisLabel(false);
+                          return [
+                            {
+                              target: 'labels',
+                              mutation: props => {
+                                setShowTooltip(
+                                  `${props.datum.lineIndex}-${props.datum.index}`
+                                );
+                                return { active: true };
+                              },
+                            },
+                          ];
+                        },
+                        onMouseLeave: () => {
+                          setShowTooltip(null);
+                          setShowXAxisLabel(true);
+                        },
+                      },
+                    },
+                  ]}
                   style={{
                     data: {
                       fill: theme.colors.neutral08,
                       opacity: setLineOpacity(i),
-                      stroke: theme.charts.line.colors[i],
+                      stroke: theme.iterableColors[i],
                       strokeWidth: 2,
                     },
                   }}
-                  size={4}
-                  data={dataset as unknown as any[]}
+                  size={5}
+                  data={
+                    dataset.map((datum, index) => ({
+                      index,
+                      lineIndex: i,
+                      ...datum,
+                    })) as unknown as any[]
+                  }
                   dataComponent={
-                    <Point
-                      ariaLabel={({ datum }) => `${datum.label}`}
-                      pathComponent={
-                        <CustomPointComponent
-                          lineIndex={i}
-                          pointRefArray={pointRefArray}
-                          registerPoint={registerPoint}
-                          unregisterPoint={unregisterPoint}
-                        />
-                      }
-                      role="button"
-                      tabIndex={0}
+                    <CustomScatterDataComponent
+                      lineIndex={i}
+                      pointRefArray={pointRefArray}
+                      registerPoint={registerPoint}
+                      unregisterPoint={unregisterPoint}
                     />
                   }
                   labels={() => ''}
                   labelComponent={
                     <VictoryTooltip
                       text=""
-                      flyoutComponent={<GraphTooltip index={i} />}
+                      flyoutComponent={
+                        <GraphTooltip index={i} showTooltip={showTooltip} />
+                      }
                     />
                   }
                   key={`scatter${i}`}
@@ -482,17 +646,17 @@ export function LineChart<T>(props: LineChartProps<T>) {
           return (
             <LegendButton
               aria-label={legendButtonAriaLabel}
-              color={theme.charts.line.colors[i]}
+              color={theme.iterableColors[i]}
               dataIndex={i}
               isHidden={hiddenData.includes(i)}
               key={i}
+              name={name}
               onClick={handleLegendClick}
+              onKeyDown={i === 0 ? handleFirstLegendButtonKeydown : undefined}
               focusCurrentLine={focusCurrentLine}
               ref={i === 0 ? firstLegendButtonRef : undefined}
               resetLineFocus={resetLineFocus}
-            >
-              {name}
-            </LegendButton>
+            />
           );
         })}
       </DataLegendsContainer>