@react-magma/charts 13.0.1-rc.0 → 13.0.2-next.0

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',
@@ -50,7 +49,7 @@ export enum CarbonChartType {
 }
 
 export interface CarbonChartProps extends React.HTMLAttributes<HTMLDivElement> {
-  dataSet: Array<object>;
+  dataSet: Array<Object>;
   isInverse?: boolean;
   /**
    * For a complete list of options, see Carbon Charts documentation
@@ -65,6 +64,10 @@ export interface CarbonChartProps extends React.HTMLAttributes<HTMLDivElement> {
    * Type of Chart: area, bar, donut, line, etc.
    */
   type: CarbonChartType;
+  /**
+   * Text for the aria-label attribute for main SVG container, if provided
+   */
+  ariaLabel?: string;
 }
 
 const CarbonChartWrapper = styled.div<{
@@ -221,33 +224,33 @@ const CarbonChartWrapper = styled.div<{
     }
     .cds--cc--scatter circle.dot {
       filter: drop-shadow(
-            1px 0px 0px
-              ${props =>
-                props.isInverse
-                  ? props.theme.colors.primary600
-                  : props.theme.colors.neutral100}
-          )
-          drop-shadow(
-            -1px 0px 0px
-              ${props =>
-                props.isInverse
-                  ? props.theme.colors.primary600
-                  : props.theme.colors.neutral100}
-          )
-          drop-shadow(
-            0px 1px 0px
-              ${props =>
-                props.isInverse
-                  ? props.theme.colors.primary600
-                  : props.theme.colors.neutral100}
-          )
-          drop-shadow(
-            0px -1px 0px
-              ${props =>
-                props.isInverse
-                  ? props.theme.colors.primary600
-                  : props.theme.colors.neutral100}
-          );
+          1px 0px 0px
+            ${props =>
+              props.isInverse
+                ? props.theme.colors.primary600
+                : props.theme.colors.neutral100}
+        )
+        drop-shadow(
+          -1px 0px 0px
+            ${props =>
+              props.isInverse
+                ? props.theme.colors.primary600
+                : props.theme.colors.neutral100}
+        )
+        drop-shadow(
+          0px 1px 0px
+            ${props =>
+              props.isInverse
+                ? props.theme.colors.primary600
+                : props.theme.colors.neutral100}
+        )
+        drop-shadow(
+          0px -1px 0px
+            ${props =>
+              props.isInverse
+                ? props.theme.colors.primary600
+                : props.theme.colors.neutral100}
+        );
     }
     .cds--cc--scatter circle.dot.hovered {
       stroke-width: 0.5em;
@@ -327,22 +330,23 @@ const CarbonChartWrapper = styled.div<{
       transition: 0.1s all linear;
       stroke-width: 1.1em;
     }
-    
+
     .cds--cc--tooltip {
-    ${props => {
-      const chartColors =
-        (props.isInverse
-          ? props.theme.chartColorsInverse
-          : props.theme.chartColors) || [];
+      ${props => {
+        const chartColors =
+          (props.isInverse
+            ? props.theme.chartColorsInverse
+            : props.theme.chartColors) || [];
 
-      return chartColors.reduce((result, color, index) => {
-        const indexNum = index + 1;
+        return chartColors.reduce((result, color, index) => {
+          const indexNum = index + 1;
 
-        result += `.tooltip-${props.groupsLength}-1-${indexNum} { background-color: ${color}; }`;
+          result += `.tooltip-${props.groupsLength}-1-${indexNum} { background-color: ${color}; }`;
 
-        return result;
-      }, '');
-    }}
+          return result;
+        }, '');
+      }}
+    }
 
     .cds--overflow-menu-options__btn:focus {
       outline-color: ${props =>
@@ -361,7 +365,6 @@ const CarbonChartWrapper = styled.div<{
       margin: 0;
       min-width: ${props => props.theme.spaceScale.spacing13};
       overflow: hidden;
-      padding:;
       position: relative;
       right: ${props => props.theme.spaceScale.spacing04};
       text-align: center;
@@ -539,6 +542,7 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
       type,
       dataSet,
       options,
+      ariaLabel,
       ...rest
     } = props;
     const theme = React.useContext(ThemeContext);
@@ -583,7 +587,6 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
             ? allInverseColors[i]
             : allColors[i]);
         }
-
         return {};
       });
 
@@ -608,28 +611,27 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
 
     // Adding aria-label to main SVG container
     React.useEffect(() => {
-      document.querySelectorAll('.graph-frame ').forEach(div => {
-        div.setAttribute('aria-label', 'Interactive chart');
-      });
+      if (ariaLabel) {
+        document.querySelectorAll('.graph-frame ').forEach(div => {
+          div.setAttribute('aria-label', ariaLabel);
+        });
+      }
     });
 
     const groupsLength = Object.keys(buildColors()).length;
 
     return (
-      <React.Fragment>
-        <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>
-      </React.Fragment>
+      <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>
     );
   }
 );

package/src/components/CarbonChart/CarbonChartArea.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';

package/src/components/CarbonChart/CarbonChartAreaStacked.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';

package/src/components/CarbonChart/CarbonChartBar.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';

package/src/components/CarbonChart/CarbonChartBarFloating.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';

package/src/components/CarbonChart/CarbonChartBarGrouped.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';

package/src/components/CarbonChart/CarbonChartBarStacked.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';

package/src/components/CarbonChart/CarbonChartBoxplot.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';

package/src/components/CarbonChart/CarbonChartBubble.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';

package/src/components/CarbonChart/CarbonChartBullet.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';

package/src/components/CarbonChart/CarbonChartCombo.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';

package/src/components/CarbonChart/CarbonChartDonut.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';

package/src/components/CarbonChart/CarbonChartGauge.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';

package/src/components/CarbonChart/CarbonChartHistogram.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';

package/src/components/CarbonChart/CarbonChartLine.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';

package/src/components/CarbonChart/CarbonChartLollipop.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';

package/src/components/CarbonChart/CarbonChartMeter.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';

package/src/components/CarbonChart/CarbonChartPie.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';

package/src/components/CarbonChart/CarbonChartRadar.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';

package/src/components/CarbonChart/CarbonChartScatter.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';

package/src/components/CarbonChart/CarbonChartSparkline.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';

package/src/components/CarbonChart/CarbonChartStep.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';