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

package/dist/components/LineChart/Chart.d.ts

@@ -1,15 +1,24 @@
 import * as React from 'react';
 import { LineChartProps } from './LineChart';
 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> extends BaseChartProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>, LineChartProps<T> {
 }
-declare function BaseChart<T>(props: ChartProps<T>, ref: React.MutableRefObject<HTMLDivElement>): JSX.Element;
+declare function BaseChart<T>(props: ChartProps<T>, ref: React.Ref<HTMLDivElement>): JSX.Element;
 export declare const Chart: <T>(props: ChartProps<T> & {
-    ref?: React.MutableRefObject<HTMLDivElement>;
+    ref?: React.MutableRefObject<HTMLDivElement> | undefined;
 }) => ReturnType<typeof BaseChart>;
 export {};

package/dist/components/LineChart/ChartDataTable.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { VictoryAxisProps } from 'victory';
-export declare function toCamelCase(str: any): any;
+export declare function toCamelCase(str: string): string;
 export interface DataTableProps {
     data?: any[];
     xData: {

package/dist/components/LineChart/CustomAxisComponent.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { LineSegmentProps } from 'victory';
+export declare const CustomAxisComponent: React.FunctionComponent<LineSegmentProps>;

package/dist/components/LineChart/CustomPointComponent.d.ts

@@ -1 +1,17 @@
-export declare const CustomPointComponent: (props: any) => JSX.Element;
+import * as React from 'react';
+import { 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 declare const CustomScatterDataComponent: (props: CustomScatterDataComponentInterface) => JSX.Element;
+export declare const CustomPointComponent: (props: CustomPointComponentInterface) => JSX.Element;

package/dist/components/LineChart/DataTable.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface DataTableProps {
     data?: any;
 }

package/dist/components/LineChart/GraphTooltip.d.ts

@@ -1,2 +1,3 @@
-export declare const GraphTooltip: (props: any) => JSX.Element;
+/// <reference types="react" />
+export declare const GraphTooltip: (props: any) => JSX.Element | null;
 export declare const AxisTooltip: (props: any) => JSX.Element;

package/dist/components/LineChart/LegendButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export interface DataTableProps {
-    children?: any;
+    name?: string;
     color?: string;
 }
 export declare const LegendButton: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/LineChart/LineChart.d.ts

@@ -23,14 +23,42 @@ export interface LineChartComponentProps {
     yAxis?: VictoryAxisProps;
 }
 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;
 }
 export declare function LineChart<T>(props: LineChartProps<T>): JSX.Element;

package/dist/components/LineChart/LineChart.stories.d.ts

@@ -1,24 +1,23 @@
 import { ChartProps } from './index';
-import { Story, Meta } from '@storybook/react/types-6-0';
-declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
 export default _default;
-export declare const Default: Story<ChartProps<any>>;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, ChartProps<any>>;
 interface ExplicitDataInterface {
     month: string | number;
     sales: string | number;
     [key: string]: any;
 }
-export declare const ExplicitData: Story<ChartProps<ExplicitDataInterface>>;
+export declare const ExplicitData: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, ChartProps<ExplicitDataInterface>>;
 interface HistoryOfTexasInterface {
     year: number;
     number: number;
     label: string;
 }
-export declare const HistoryOfTexas: Story<ChartProps<HistoryOfTexasInterface>>;
-export declare const SpendingRevenue: Story<ChartProps<any>>;
+export declare const HistoryOfTexas: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, ChartProps<HistoryOfTexasInterface>>;
+export declare const SpendingRevenue: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, ChartProps<any>>;
 interface VotingParticipationInterface {
     year: number;
     percent: number;
     label: string;
 }
-export declare const VotingParticipation: Story<ChartProps<VotingParticipationInterface>>;
+export declare const VotingParticipation: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, ChartProps<VotingParticipationInterface>>;

package/dist/components/LineChart/magma-charts.d.ts

@@ -1,457 +1 @@
-declare namespace _default {
-    export const area: {
-        style: {
-            data: {
-                fill: string;
-            };
-            labels: {
-                fontFamily: string;
-                fontSize: number;
-                letterSpacing: string;
-                padding: number;
-                fill: string;
-                stroke: string;
-                strokeWidth: number;
-            };
-        };
-    } & {
-        width: number;
-        height: number;
-        padding: number;
-    };
-    export const axis: {
-        style: {
-            axis: {
-                fill: string;
-                stroke: string;
-                strokeWidth: number;
-                strokeLinecap: string;
-                strokeLinejoin: string;
-            };
-            axisLabel: {
-                textAnchor: string;
-            } & {
-                fontFamily: string;
-                fontSize: number;
-                letterSpacing: string;
-                padding: number;
-                fill: string;
-                stroke: string;
-                strokeWidth: number;
-            } & {
-                padding: number;
-                stroke: string;
-            };
-            grid: {
-                fill: string;
-                stroke: string;
-                strokeLinecap: string;
-                strokeLinejoin: string;
-                pointerEvents: string;
-            };
-            ticks: {
-                fill: string;
-                size: number;
-                stroke: string;
-                strokeWidth: number;
-                strokeLinecap: string;
-                strokeLinejoin: string;
-            };
-            tickLabels: {
-                fontFamily: string;
-                fontSize: number;
-                letterSpacing: string;
-                padding: number;
-                fill: string;
-                stroke: string;
-                strokeWidth: number;
-            } & {
-                fill: string;
-            };
-        };
-    } & {
-        width: number;
-        height: number;
-        padding: number;
-    };
-    export namespace polarDependentAxis {
-        export namespace style {
-            export namespace ticks {
-                export const fill: string;
-                export const size: number;
-                export const stroke: string;
-            }
-        }
-    }
-    export const bar: {
-        style: {
-            data: {
-                fill: string;
-                padding: number;
-                strokeWidth: number;
-            };
-            labels: {
-                fontFamily: string;
-                fontSize: number;
-                letterSpacing: string;
-                padding: number;
-                fill: string;
-                stroke: string;
-                strokeWidth: number;
-            };
-        };
-    } & {
-        width: number;
-        height: number;
-        padding: number;
-    };
-    export const boxplot: {
-        style: {
-            max: {
-                padding: number;
-                stroke: string;
-                strokeWidth: number;
-            };
-            maxLabels: {
-                fontFamily: string;
-                fontSize: number;
-                letterSpacing: string;
-                padding: number;
-                fill: string;
-                stroke: string;
-                strokeWidth: number;
-            } & {
-                padding: number;
-            };
-            median: {
-                padding: number;
-                stroke: string;
-                strokeWidth: number;
-            };
-            medianLabels: {
-                fontFamily: string;
-                fontSize: number;
-                letterSpacing: string;
-                padding: number;
-                fill: string;
-                stroke: string;
-                strokeWidth: number;
-            } & {
-                padding: number;
-            };
-            min: {
-                padding: number;
-                stroke: string;
-                strokeWidth: number;
-            };
-            minLabels: {
-                fontFamily: string;
-                fontSize: number;
-                letterSpacing: string;
-                padding: number;
-                fill: string;
-                stroke: string;
-                strokeWidth: number;
-            } & {
-                padding: number;
-            };
-            q1: {
-                padding: number;
-                fill: string;
-            };
-            q1Labels: {
-                fontFamily: string;
-                fontSize: number;
-                letterSpacing: string;
-                padding: number;
-                fill: string;
-                stroke: string;
-                strokeWidth: number;
-            } & {
-                padding: number;
-            };
-            q3: {
-                padding: number;
-                fill: string;
-            };
-            q3Labels: {
-                fontFamily: string;
-                fontSize: number;
-                letterSpacing: string;
-                padding: number;
-                fill: string;
-                stroke: string;
-                strokeWidth: number;
-            } & {
-                padding: number;
-            };
-        };
-        boxWidth: number;
-    } & {
-        width: number;
-        height: number;
-        padding: number;
-    };
-    export const candlestick: {
-        style: {
-            data: {
-                stroke: string;
-            };
-            labels: {
-                fontFamily: string;
-                fontSize: number;
-                letterSpacing: string;
-                padding: number;
-                fill: string;
-                stroke: string;
-                strokeWidth: number;
-            } & {
-                padding: number;
-            };
-        };
-        candleColors: {
-            positive: string;
-            negative: string;
-        };
-    } & {
-        width: number;
-        height: number;
-        padding: number;
-    };
-    export { baseProps as chart };
-    export const errorbar: {
-        borderWidth: number;
-        style: {
-            data: {
-                fill: string;
-                opacity: number;
-                stroke: string;
-                strokeWidth: number;
-            };
-            labels: {
-                fontFamily: string;
-                fontSize: number;
-                letterSpacing: string;
-                padding: number;
-                fill: string;
-                stroke: string;
-                strokeWidth: number;
-            };
-        };
-    } & {
-        width: number;
-        height: number;
-        padding: number;
-    };
-    export const group: {
-        colorScale: string[];
-    } & {
-        width: number;
-        height: number;
-        padding: number;
-    };
-    export const histogram: {
-        style: {
-            data: {
-                fill: string;
-                stroke: string;
-                strokeWidth: number;
-            };
-            labels: {
-                fontFamily: string;
-                fontSize: number;
-                letterSpacing: string;
-                padding: number;
-                fill: string;
-                stroke: string;
-                strokeWidth: number;
-            };
-        };
-    } & {
-        width: number;
-        height: number;
-        padding: number;
-    };
-    export namespace legend {
-        export { colors as colorScale };
-        export const gutter: number;
-        export const orientation: string;
-        export const titleOrientation: string;
-        export namespace style_1 {
-            export const data: {
-                type: string;
-            };
-            export { baseLabelStyles as labels };
-            export const title: {
-                fontFamily: string;
-                fontSize: number;
-                letterSpacing: string;
-                padding: number;
-                fill: string;
-                stroke: string;
-                strokeWidth: number;
-            } & {
-                padding: number;
-            };
-        }
-        export { style_1 as style };
-    }
-    export const line: {
-        style: {
-            data: {
-                fill: string;
-                opacity: number;
-                stroke: string;
-                strokeWidth: number;
-            };
-            labels: {
-                fontFamily: string;
-                fontSize: number;
-                letterSpacing: string;
-                padding: number;
-                fill: string;
-                stroke: string;
-                strokeWidth: number;
-            };
-        };
-    } & {
-        width: number;
-        height: number;
-        padding: number;
-    };
-    export const pie: {
-        colorScale: string[];
-        style: {
-            data: {
-                padding: number;
-                stroke: string;
-                strokeWidth: number;
-            };
-            labels: {
-                fontFamily: string;
-                fontSize: number;
-                letterSpacing: string;
-                padding: number;
-                fill: string;
-                stroke: string;
-                strokeWidth: number;
-            } & {
-                padding: number;
-            };
-        };
-    } & {
-        width: number;
-        height: number;
-        padding: number;
-    };
-    export const scatter: {
-        style: {
-            data: {
-                fill: string;
-                opacity: number;
-                stroke: string;
-                strokeWidth: number;
-            };
-            labels: {
-                fontFamily: string;
-                fontSize: number;
-                letterSpacing: string;
-                padding: number;
-                fill: string;
-                stroke: string;
-                strokeWidth: number;
-            };
-        };
-    } & {
-        width: number;
-        height: number;
-        padding: number;
-    };
-    export const stack: {
-        colorScale: string[];
-    } & {
-        width: number;
-        height: number;
-        padding: number;
-    };
-    export namespace tooltip {
-        const style_2: {
-            fontFamily: string;
-            fontSize: number;
-            letterSpacing: string;
-            padding: number;
-            fill: string;
-            stroke: string;
-            strokeWidth: number;
-        } & {
-            padding: number;
-            pointerEvents: string;
-        };
-        export { style_2 as style };
-        export namespace flyoutStyle {
-            export { grey900 as stroke };
-            export const strokeWidth: number;
-            const fill_1: string;
-            export { fill_1 as fill };
-            export const pointerEvents: string;
-        }
-        export const flyoutPadding: number;
-        export const cornerRadius: number;
-        export const pointerLength: number;
-    }
-    export const voronoi: {
-        style: {
-            data: {
-                fill: string;
-                stroke: string;
-                strokeWidth: number;
-            };
-            labels: {
-                fontFamily: string;
-                fontSize: number;
-                letterSpacing: string;
-                padding: number;
-                fill: string;
-                stroke: string;
-                strokeWidth: number;
-            } & {
-                padding: number;
-                pointerEvents: string;
-            };
-            flyout: {
-                stroke: string;
-                strokeWidth: number;
-                fill: string;
-                pointerEvents: string;
-            };
-        };
-    } & {
-        width: number;
-        height: number;
-        padding: number;
-    };
-}
-export default _default;
-declare namespace baseProps {
-    export const width: number;
-    export const height: number;
-    export const padding: number;
-}
-declare const colors: string[];
-declare namespace baseLabelStyles {
-    export { sansSerif as fontFamily };
-    export { fontSize };
-    export { letterSpacing };
-    export { padding };
-    export { blueGrey700 as fill };
-    const stroke_1: string;
-    export { stroke_1 as stroke };
-    const strokeWidth_1: number;
-    export { strokeWidth_1 as strokeWidth };
-}
-declare const grey900: "pink";
-declare const sansSerif: "\"Open Sans\",Helvetica,sans-serif";
-declare const fontSize: 12;
-declare const letterSpacing: "normal";
-declare const padding_1: 8;
-declare const blueGrey700: "#3F3F3F";
+export declare const magmaTheme: any;

package/dist/index.d.ts

@@ -1,2 +1 @@
 export * from './components/LineChart';
-export * from './components/DataViz';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-magma/charts",
-  "version": "0.0.0-9de073",
+  "version": "0.0.0-next.0",
   "publishConfig": {
     "access": "public"
   },
@@ -28,18 +28,20 @@
   "peerDependencies": {
     "@emotion/core": "^10.1.1",
     "@emotion/styled": "^10.0.27",
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0"
+    "react": "^15.0.0 || ^16.0.0 || ^17.0.0",
+    "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0",
+    "react-magma-dom": "^2.5.7-next.1",
+    "react-magma-icons": "^2.3.1"
   },
   "dependencies": {
-    "react-magma-dom": "^2.5.1-next.0",
-    "react-magma-icons": "^2.3.0",
     "victory": "^35.4.12"
   },
   "devDependencies": {
     "@emotion/core": "^10.1.1",
     "@emotion/styled": "^10.0.27",
     "react": "^16.10.0",
-    "react-dom": "^16.10.0"
+    "react-dom": "^16.10.0",
+    "react-magma-dom": "^2.5.7-next.1",
+    "react-magma-icons": "^2.3.1"
   }
 }