@react-magma/charts 12.0.0 → 12.0.1-next.1

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

@@ -1,27 +1,27 @@
-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;
-    /**
-     * @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> {
-}
-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> | undefined;
-}) => ReturnType<typeof BaseChart>;
-export {};
+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;
+    /**
+     * @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> {
+}
+declare function BaseChart<T>(props: ChartProps<T>, ref: React.Ref<HTMLDivElement>): React.JSX.Element;
+export declare const Chart: <T>(props: ChartProps<T> & {
+    ref?: React.MutableRefObject<HTMLDivElement> | undefined;
+}) => ReturnType<typeof BaseChart>;
+export {};

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

@@ -1,17 +1,17 @@
-/// <reference types="react" />
-import { VictoryAxisProps } from 'victory';
-export declare function toCamelCase(str: string): string;
-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 declare const ChartDataTable: (props: DataTableProps) => JSX.Element;
+import * as React from 'react';
+import { VictoryAxisProps } from 'victory';
+export declare function toCamelCase(str: string): string;
+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 declare const ChartDataTable: (props: DataTableProps) => React.JSX.Element;

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

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

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

@@ -1,17 +1,17 @@
-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;
+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) => React.JSX.Element;
+export declare const CustomPointComponent: (props: CustomPointComponentInterface) => React.JSX.Element;

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export interface DataTableProps {
-    data?: any;
-}
-export declare const DataTable: (props: any) => JSX.Element;
+import * as React from 'react';
+export interface DataTableProps {
+    data?: any;
+}
+export declare const DataTable: (props: any) => React.JSX.Element;

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

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

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

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

@@ -1,67 +1,67 @@
-import * as React from 'react';
-import { VictoryAxisProps, VictoryChartProps, VictoryLineProps, VictoryScatterProps } from 'victory';
-export declare type LineChartAxisStyle = VictoryAxisProps['style'];
-export declare type DataGetterPropType = VictoryLineProps['x'];
-export declare type ChartDataOptions = {
-    label: string;
-    x: string | number;
-    y: string | number;
-    [key: string]: any;
-} | {
-    label: string;
-    [key: string]: any;
-} | any;
-export interface LineChartData<T> {
-    name: string;
-    data: T[];
-}
-export interface LineChartComponentProps {
-    chart?: VictoryChartProps;
-    line?: VictoryLineProps;
-    scatter?: VictoryScatterProps;
-    xAxis?: VictoryAxisProps;
-    yAxis?: VictoryAxisProps;
-}
-/**
- * @deprecated Please use CarbonChart instead
- */
-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
-     */
-    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;
+import * as React from 'react';
+import { VictoryAxisProps, VictoryChartProps, VictoryLineProps, VictoryScatterProps } from 'victory';
+export declare type LineChartAxisStyle = VictoryAxisProps['style'];
+export declare type DataGetterPropType = VictoryLineProps['x'];
+export declare type ChartDataOptions = {
+    label: string;
+    x: string | number;
+    y: string | number;
+    [key: string]: any;
+} | {
+    label: string;
+    [key: string]: any;
+} | any;
+export interface LineChartData<T> {
+    name: string;
+    data: T[];
+}
+export interface LineChartComponentProps {
+    chart?: VictoryChartProps;
+    line?: VictoryLineProps;
+    scatter?: VictoryScatterProps;
+    xAxis?: VictoryAxisProps;
+    yAxis?: VictoryAxisProps;
+}
+/**
+ * @deprecated Please use CarbonChart instead
+ */
+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
+     */
+    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>): React.JSX.Element;

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

@@ -1,23 +1,113 @@
-import { ChartProps } from './index';
-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: 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: 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: 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: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, ChartProps<VotingParticipationInterface>>;
+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: {
+    args: {
+        data: {
+            name: string;
+            data: {
+                x: number;
+                y: number;
+                label: string;
+            }[];
+        }[];
+        description: string;
+        title: string;
+        type: string;
+        componentProps: {
+            xAxis: {
+                label: string;
+                tickFormat: string[];
+            };
+            yAxis: {
+                domain: number[];
+                label: string;
+                tickFormat: (t: any) => string;
+                tickValues: number[];
+            };
+        };
+    };
+};
+export declare const ExplicitData: {
+    args: {
+        componentProps: {
+            xAxis: {
+                tickFormat: string[];
+                label: string;
+            };
+            yAxis: {
+                domain: number[];
+                label: string;
+                tickFormat: (t: any) => string;
+                tickValues: number[];
+            };
+        };
+        data: {
+            name: string;
+            data: {
+                month: number;
+                sales: number;
+                label: string;
+            }[];
+        }[];
+        x: string;
+        y: string;
+        description: string;
+        title: string;
+        type: string;
+    };
+};
+export declare const HistoryOfTexas: {
+    args: {
+        description: string;
+        title: string;
+        componentProps: {
+            xAxis: {
+                label: string;
+                tickValues: number[];
+            };
+            yAxis: {
+                label: string;
+                tickFormat: (t: any) => any;
+                tickValues: number[];
+            };
+        };
+        data: any;
+        x: string;
+        y: string;
+        type: string;
+    };
+};
+export declare const SpendingRevenue: {
+    args: {
+        data: any;
+        title: string;
+        type: string;
+        componentProps: {
+            xAxis: {
+                label: string;
+            };
+            yAxis: {
+                label: string;
+                tickValues: number[];
+            };
+        };
+    };
+};
+export declare const VotingParticipation: {
+    args: {
+        data: any;
+        title: string;
+        type: string;
+        componentProps: {
+            xAxis: {
+                label: string;
+            };
+            yAxis: {
+                domain: number[];
+                label: string;
+            };
+        };
+        x: string;
+        y: string;
+    };
+};

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

@@ -1 +1 @@
-export * from './Chart';
+export * from './Chart';

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

@@ -1 +1 @@
-export declare const magmaTheme: any;
+export declare const magmaTheme: any;

package/dist/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-magma/charts",
-  "version": "12.0.0",
+  "version": "12.0.1-next.1",
   "license": "MIT",
   "exports": {
     ".": {
@@ -19,8 +19,8 @@
     "src"
   ],
   "scripts": {
-    "build": "microbundle build --jsx jsx --jsxImportSource react --globals react/jsx-runtime=jsx,@emotion/react=EmotionReact,@emotion/styled=EmotionStyled,@carbon/charts-react=CarbonChartsReact",
-    "build-watch": "microbundle watch --jsx jsx --jsxImportSource react --globals react/jsx-runtime=jsx,@emotion/react=EmotionReact,@emotion/styled=EmotionStyled,@carbon/charts-react=CarbonChartsReact",
+    "build": "rollup -c rollup.config.js --bundleConfigAsCjs",
+    "build-watch": "rollup -c rollup.config.js --watch --bundleConfigAsCjs",
     "lint": "eslint ./src",
     "test": "jest",
     "test-watch": "jest --watch"
@@ -35,19 +35,24 @@
   "devDependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
+    "@rollup/plugin-commonjs": "^28.0.8",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.1.4",
     "dom-to-image-more": "3.1.4",
     "identity-obj-proxy": "^3.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-magma-dom": "^4.10.0",
-    "react-magma-icons": "^3.2.0"
+    "react-magma-dom": "^4.10.1-next.0",
+    "react-magma-icons": "^3.2.0",
+    "rollup": "^4.52.4",
+    "rollup-plugin-postcss": "^4.0.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-magma-dom": "^4.10.0-next.3",
+    "react-magma-dom": "^4.10.1-next.0",
     "react-magma-icons": "^3.2.0"
   },
   "engines": {

package/src/components/CarbonChart/CarbonChart.tsx

@@ -21,12 +21,11 @@ import {
   ComboChart,
   ChartOptions,
 } from '@carbon/charts-react';
-import { Global } from '@emotion/react';
 import styled from '@emotion/styled';
 import { transparentize } from 'polished';
 import { ThemeInterface, ThemeContext, useIsInverse } from 'react-magma-dom';
 
-import { carbonChartStyles } from './embeddedStyles';
+import './carbon-charts.css';
 
 export enum CarbonChartType {
   area = 'area',
@@ -615,20 +614,17 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
     const groupsLength = Object.keys(buildColors()).length;
 
     return (
-      <>
-        <Global styles={carbonChartStyles} />
-        <CarbonChartWrapper
-          data-testid={testId}
-          ref={ref}
-          isInverse={isInverse}
-          theme={theme}
-          className="carbon-chart-wrapper"
-          groupsLength={groupsLength < 6 ? groupsLength : 14}
-          {...rest}
-        >
-          <ChartType data={dataSet} options={newOptions} />
-        </CarbonChartWrapper>
-      </>
+      <CarbonChartWrapper
+        data-testid={testId}
+        ref={ref}
+        isInverse={isInverse}
+        theme={theme}
+        className="carbon-chart-wrapper"
+        groupsLength={groupsLength < 6 ? groupsLength : 14}
+        {...rest}
+      >
+        <ChartType data={dataSet} options={newOptions} />
+      </CarbonChartWrapper>
     );
   }
 );