@react-magma/charts 12.0.1 → 13.0.0

package/src/components/LineChart/Chart.tsx

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

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

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

@@ -1,30 +0,0 @@
-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,93 +0,0 @@
-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}
-    />
-  );
-};