@react-magma/charts 13.0.0 → 13.0.1

package/src/components/LineChart/Chart.tsx

@@ -0,0 +1,241 @@
+import * as React from 'react';
+
+import { css } from '@emotion/react';
+import {
+  Announce,
+  ButtonVariant,
+  Card,
+  I18nContext,
+  IconButton,
+  Paragraph,
+  Tab,
+  TabPanel,
+  TabPanelsContainer,
+  Tabs,
+  TabsContainer,
+  ThemeContext,
+  Tooltip,
+  TypographyVisualStyle,
+  useDescendants,
+  styled,
+} from 'react-magma-dom';
+import { KeyboardIcon } from 'react-magma-icons';
+
+import { ChartDataTable } from './ChartDataTable';
+import { LineChart, LineChartProps } from './LineChart';
+
+interface BaseChartProps {
+  /**
+   * Description of what the line chart data represents placed above the chart
+   */
+  description?: string;
+  /**
+   * @internal
+   */
+  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>
+  extends BaseChartProps,
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
+    LineChartProps<T> {}
+
+const StyledTitle = styled.span`
+  color: ${props => props.theme.colors.neutral};
+  font-size: ${props => props.theme.typeScale.size04.fontSize};
+  font-weight: 600;
+  font-family: ${props => props.theme.bodyFont};
+  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.neutral300};
+  }
+`;
+
+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 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: {
+    preventDefault?: any;
+    key?: any;
+    shiftKey?: any;
+  }) {
+    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}>
+      <StyledTitle theme={theme}>{title}</StyledTitle>
+      {description && (
+        <StyledParagraph
+          theme={theme}
+          visualStyle={TypographyVisualStyle.bodySmall}
+        >
+          {description}
+        </StyledParagraph>
+      )}
+      <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>
+          <StyledTabPanel theme={theme}>
+            {type === 'line' && (
+              <LineChart<T>
+                {...other}
+                lastFocusedScatterPoint={lastFocusedScatterPoint}
+                pointRefArray={pointRefArray}
+                registerPoint={registerPoint}
+                tabRef={keyboardInstructionsRef}
+                unregisterPoint={unregisterPoint}
+              />
+            )}
+          </StyledTabPanel>
+          <StyledTabPanel theme={theme}>
+            <ChartDataTable
+              data={other.data}
+              xData={{
+                keyValue: other.x,
+                label: other.componentProps?.xAxis?.label,
+                tickFormat: other.componentProps?.xAxis?.tickFormat,
+              }}
+              yData={{
+                keyValue: other.y,
+                tickFormat: other.componentProps?.yAxis?.tickFormat,
+              }}
+            />
+          </StyledTabPanel>
+        </TabPanelsContainer>
+      </StyledTabsContainer>
+    </div>
+  );
+}
+
+export const Chart = React.forwardRef(BaseChart) as <T>(
+  props: ChartProps<T> & { ref?: React.MutableRefObject<HTMLDivElement> }
+) => ReturnType<typeof BaseChart>;

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

@@ -0,0 +1,165 @@
+import * as React from 'react';
+
+import { render } from '@testing-library/react';
+
+import { ChartDataTable } from './ChartDataTable';
+import { basicData, explicitData } from './test/exampleChartData';
+
+describe('Chart Data Table', () => {
+  describe('Basic Data', () => {
+    it('should render chart data with x values values', () => {
+      const label = '2019 Annual Sales Figures';
+      const { getByText, getAllByText } = render(
+        <ChartDataTable
+          data={basicData}
+          xData={{
+            label,
+          }}
+          yData={{
+            tickFormat: t => `$${t}k`,
+          }}
+        />
+      );
+
+      expect(getByText(label)).toBeInTheDocument();
+      expect(getByText(basicData[0].data[0].x)).toBeInTheDocument();
+      expect(getByText(basicData[0].name)).toBeInTheDocument();
+      expect(
+        getAllByText(`$${basicData[0].data[0].y}k`)[0]
+      ).toBeInTheDocument();
+    });
+
+    it('should render chart data with x tick values and an x tick format function', () => {
+      const label = '2019 Annual Sales Figures';
+      const { getByText } = render(
+        <ChartDataTable
+          data={basicData}
+          xData={{
+            label,
+            tickFormat: t => `Month of ${t}`,
+            tickValues: ['Jan', 'Feb', 'March', 'April', 'May'],
+          }}
+          yData={{
+            tickFormat: t => `$${t}k`,
+          }}
+        />
+      );
+
+      expect(getByText('Month of Jan')).toBeInTheDocument();
+    });
+
+    it('should render chart data with an x tick format array', () => {
+      const label = '2019 Annual Sales Figures';
+      const { getByText, getAllByText } = render(
+        <ChartDataTable
+          data={basicData}
+          xData={{
+            label,
+            tickFormat: ['Jan', 'Feb', 'March', 'April', 'May'],
+          }}
+          yData={{
+            tickFormat: t => `$${t}k`,
+          }}
+        />
+      );
+
+      expect(getByText(label)).toBeInTheDocument();
+      expect(getByText('Jan')).toBeInTheDocument();
+      expect(getByText(basicData[0].name)).toBeInTheDocument();
+      expect(
+        getAllByText(`$${basicData[0].data[0].y}k`)[0]
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('Explicit Data', () => {
+    it('should render chart data with x tick values', () => {
+      const label = '2019 Annual Sales Figures';
+      const { getByText, getAllByText } = render(
+        <ChartDataTable
+          data={explicitData}
+          xData={{
+            keyValue: 'month',
+            label,
+            tickValues: ['Jan', 'Feb', 'March', 'April', 'May'],
+          }}
+          yData={{
+            keyValue: 'sales',
+            tickFormat: t => `$${t}k`,
+          }}
+        />
+      );
+
+      expect(getByText(label)).toBeInTheDocument();
+      expect(getByText('Jan')).toBeInTheDocument();
+      expect(getByText(explicitData[0].name)).toBeInTheDocument();
+      expect(
+        getAllByText(`$${explicitData[0].data[0].sales}k`)[0]
+      ).toBeInTheDocument();
+    });
+
+    it('should render column header for x values using the x key value when no label is provided', () => {
+      const { getByText } = render(
+        <ChartDataTable
+          data={explicitData}
+          xData={{
+            keyValue: 'month',
+            tickValues: ['Jan', 'Feb', 'March', 'April', 'May'],
+          }}
+          yData={{
+            keyValue: 'sales',
+            tickFormat: t => `$${t}k`,
+          }}
+        />
+      );
+
+      expect(getByText('month')).toBeInTheDocument();
+    });
+
+    it('should render chart data with x tick values and an x tick format function', () => {
+      const label = '2019 Annual Sales Figures';
+      const { getByText } = render(
+        <ChartDataTable
+          data={explicitData}
+          xData={{
+            label,
+            keyValue: 'month',
+            tickFormat: t => `Month of ${t}`,
+            tickValues: ['Jan', 'Feb', 'March', 'April', 'May'],
+          }}
+          yData={{
+            keyValue: 'sales',
+            tickFormat: t => `$${t}k`,
+          }}
+        />
+      );
+
+      expect(getByText('Month of Jan')).toBeInTheDocument();
+    });
+
+    it('should render chart data with an x tick format array', () => {
+      const label = '2019 Annual Sales Figures';
+      const { getByText, getAllByText } = render(
+        <ChartDataTable
+          data={explicitData}
+          xData={{
+            label,
+            keyValue: 'month',
+            tickFormat: ['Jan', 'Feb', 'March', 'April', 'May'],
+          }}
+          yData={{
+            keyValue: 'sales',
+            tickFormat: t => `$${t}k`,
+          }}
+        />
+      );
+
+      expect(getByText(label)).toBeInTheDocument();
+      expect(getByText('Jan')).toBeInTheDocument();
+      expect(getByText(explicitData[0].name)).toBeInTheDocument();
+      expect(
+        getAllByText(`$${explicitData[0].data[0].sales}k`)[0]
+      ).toBeInTheDocument();
+    });
+  });
+});

package/src/components/LineChart/ChartDataTable.tsx

@@ -0,0 +1,135 @@
+import * as React from 'react';
+
+import { Card, Datagrid, Spinner } from 'react-magma-dom';
+import { VictoryAxisProps } from 'victory';
+
+export function toCamelCase(str: string) {
+  return str
+    .toLowerCase()
+    .replace(/[^a-z 0-9]/gi, '')
+    .replace(/(?:^\w|[A-Z]|\b\w)/g, (ltr, index) =>
+      index === 0 ? ltr.toLowerCase() : ltr.toUpperCase()
+    )
+    .replace(/\s+/g, '');
+}
+
+export interface DataTableProps {
+  data?: any[];
+  xData: {
+    keyValue?: string | number | symbol;
+    label?: VictoryAxisProps['label'];
+    tickFormat?: Partial<VictoryAxisProps['tickFormat']>;
+    tickValues?: VictoryAxisProps['tickValues'];
+  };
+  yData: {
+    keyValue?: string | number | symbol;
+    tickFormat?: Partial<VictoryAxisProps['tickFormat']>;
+  };
+}
+
+export const ChartDataTable = (props: DataTableProps) => {
+  const {
+    data = [],
+    xData: {
+      keyValue: xKeyValue,
+      label: xAxisLabel,
+      tickFormat: xTickFormat,
+      tickValues: xTickValues,
+    },
+    yData: { keyValue: yKeyValue, tickFormat: yTickFormat },
+  } = props;
+  const [dataForTable, setDataForTable] = React.useState({
+    columns: [],
+    rows: [],
+  });
+
+  React.useEffect(() => {
+    setDataForTable(convertData());
+  }, [data]);
+
+  function convertData() {
+    const xField = toCamelCase((xKeyValue || xAxisLabel || 'x') as string);
+    const xTickValuesArray = data.reduce((valuesArray, { data: dataset }) => {
+      dataset.forEach((datum: any) => {
+        const value = datum.x || (xKeyValue && datum[xKeyValue]);
+        !valuesArray.includes(value) && valuesArray.push(value);
+      });
+
+      return valuesArray;
+    }, []);
+
+    const baseTableData = {
+      columns:
+        xTickValuesArray.length > 0
+          ? [
+              {
+                field: xField,
+                header: xAxisLabel || xKeyValue || 'X',
+                isRowHeader: true,
+              },
+            ]
+          : [],
+      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 data.reduce((tableData, datum) => {
+      const { name: header, data: dataset } = datum;
+      const field = toCamelCase(header);
+
+      tableData.columns.push({
+        field,
+        header,
+      });
+
+      dataset.forEach((d: any, i: number) => {
+        const yValue = d.y !== undefined ? d.y : yKeyValue && d[yKeyValue];
+        tableData.rows[i] = {
+          ...tableData.rows[i],
+          id: baseTableData.rows.length > 0 ? i + 1 : i,
+          [field]:
+            yTickFormat && typeof yTickFormat === 'function'
+              ? yTickFormat(yValue)
+              : yValue,
+        };
+      });
+
+      return tableData;
+    }, baseTableData);
+  }
+
+  return (
+    <Card>
+      {dataForTable.rows.length > 0 ? (
+        <Datagrid
+          hasPagination={false}
+          columns={dataForTable.columns}
+          rows={dataForTable.rows}
+        />
+      ) : (
+        <Spinner />
+      )}
+    </Card>
+  );
+};

package/src/components/LineChart/CustomAxisComponent.tsx

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,93 @@
+import * as React from 'react';
+
+import { useForceUpdate } from 'react-magma-dom';
+import { Point, PointProps } from 'victory';
+
+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 | null>(null);
+
+  React.useEffect(() => {
+    registerPoint(pointRefArray, ref as React.MutableRefObject<Element>);
+
+    forceUpdate();
+
+    return () =>
+      unregisterPoint(pointRefArray, ref as React.MutableRefObject<Element>);
+  }, []);
+
+  return (
+    <path
+      ref={ref}
+      data-line-index={lineIndex}
+      data-point-index={pointIndex}
+      {...other}
+    />
+  );
+};