@react-magma/charts 11.0.0-next.2 → 11.0.0

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

@@ -1 +1 @@
-export * from "./CarbonChart";
+export * from './CarbonChart';

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { VictoryAxisProps } from 'victory';
 export declare function toCamelCase(str: string): string;
 export interface DataTableProps {

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 @@
+/// <reference types="react" />
 export declare const GraphTooltip: (props: any) => JSX.Element | null;
 export declare const AxisTooltip: (props: any) => JSX.Element;

package/package.json

@@ -1,38 +1,27 @@
 {
   "name": "@react-magma/charts",
-  "version": "11.0.0-next.2",
-  "publishConfig": {
-    "access": "public"
-  },
+  "version": "11.0.0",
   "license": "MIT",
-  "source": "src/index.ts",
+  "exports": {
+    ".": "./src",
+    "./src/components/CarbonChart/": "./styles.min.css"
+  },
   "main": "dist/charts.js",
-  "module": "dist/charts.modern.module.js",
   "umd:main": "dist/charts.umd.js",
+  "module": "dist/charts.modern.module.js",
+  "source": "src/index.ts",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
     "src",
     "src/components/CarbonChart/styles.min.css"
   ],
-  "engines": {
-    "npm": ">=7.3.0",
-    "node": ">=14.15.0"
-  },
   "scripts": {
     "build": "microbundle build --jsx jsx --jsxImportSource react --globals react/jsx-runtime=jsx",
     "build-watch": "microbundle watch --jsx jsx --jsxImportSource react --globals react/jsx-runtime=jsx",
+    "lint": "eslint ./src",
     "test": "jest",
-    "test-watch": "jest --watch",
-    "lint": "eslint ./src"
-  },
-  "peerDependencies": {
-    "@emotion/react": "^11.13.0",
-    "@emotion/styled": "^11.13.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-magma-dom": "^4.9.0-next.3",
-    "react-magma-icons": "^3.0.0"
+    "test-watch": "jest --watch"
   },
   "dependencies": {
     "@carbon/charts-react": "^1.14.8",
@@ -48,11 +37,22 @@
     "identity-obj-proxy": "^3.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-magma-dom": "^4.9.0-next.3",
-    "react-magma-icons": "^3.0.0"
+    "react-magma-dom": "^4.9.0",
+    "react-magma-icons": "^3.1.0"
   },
-  "exports": {
-    ".": "./src",
-    "./src/components/CarbonChart/": "./styles.min.css"
+  "peerDependencies": {
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-magma-dom": "^4.9.0-next.27",
+    "react-magma-icons": "^3.1.0"
+  },
+  "engines": {
+    "node": ">=14.15.0",
+    "npm": ">=7.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
-}
+}

package/src/components/CarbonChart/CarbonChart.test.js

@@ -1,7 +1,9 @@
 import React from 'react';
-import { CarbonChart, CarbonChartType } from '.';
+
 import { render } from '@testing-library/react';
 
+import { CarbonChart, CarbonChartType } from '.';
+
 global.ResizeObserver = jest.fn().mockImplementation(() => ({
   observe: jest.fn(),
   unobserve: jest.fn(),

package/src/components/CarbonChart/CarbonChart.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
-import { ThemeInterface, ThemeContext, useIsInverse } from 'react-magma-dom';
-import { transparentize } from 'polished';
-import styled from '@emotion/styled';
+
 import {
   AreaChart,
   StackedAreaChart,
@@ -22,6 +20,9 @@ import {
   ScatterChart,
   ComboChart,
 } from '@carbon/charts-react';
+import styled from '@emotion/styled';
+import { transparentize } from 'polished';
+import { ThemeInterface, ThemeContext, useIsInverse } from 'react-magma-dom';
 import './styles.min.css';
 
 export enum CarbonChartType {
@@ -91,8 +92,8 @@ const CarbonChartWrapper = styled.div<{
       props.isInverse
         ? props.theme.colors.neutral100
         : props.theme.colors.neutral700};
-        max-width:142px;
-        white-space: normal;
+    max-width: 142px;
+    white-space: normal;
   }
 
   .cds--modal-container {
@@ -189,8 +190,9 @@ const CarbonChartWrapper = styled.div<{
           ? transparentize(0.5, props.theme.colors.neutral100)
           : ''};
     }
-    .cds--cc--grid rect.chart-grid-backdrop.stroked{
-      stroke: ${props => (props.isInverse ? props.theme.colors.neutral100 : '')}
+    .cds--cc--grid rect.chart-grid-backdrop.stroked {
+      stroke: ${props =>
+        props.isInverse ? props.theme.colors.neutral100 : ''};
     }
     .cds--cc--skeleton .shimmer-effect-lines {
       filter: ${props => (props.isInverse ? 'invert(1)' : '')};
@@ -199,117 +201,137 @@ const CarbonChartWrapper = styled.div<{
     .cds--cc--skeleton rect.chart-skeleton-backdrop,
     .cds--cc--grid rect.chart-grid-backdrop {
     } */
-    
-    .cds--cc--grid rect.chart-grid-backdrop{
-      fill:transparent;
+
+    .cds--cc--grid rect.chart-grid-backdrop {
+      fill: transparent;
     }
     .cds--cc--scatter circle.dot.hovered {
       padding: 10px;
     }
     .cds--cc--scatter-stacked circle.dot.hovered,
     .cds--cc--scatter-stacked circle.dot.unfilled,
-    .cds--cc--scatter circle.dot.unfilled{
+    .cds--cc--scatter circle.dot.unfilled {
       stroke-width: 6px;
       transition: 0.1s all linear;
-     
     }
     .cds--cc--scatter circle.dot.hovered {
       stroke-width: 0.5em;
       transition: 0.1s all linear;
-       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});
+      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}
+        );
     }
-      .cds--cc--lollipop circle.dot.filled,
-      .cds--cc--lollipop circle.dot.hovered {
-        stroke-width: 15px;
-      }
-      .cds--cc--scatter-stacked circle.dot.hovered,
+    .cds--cc--lollipop circle.dot.filled,
+    .cds--cc--lollipop circle.dot.hovered {
+      stroke-width: 15px;
+    }
+    .cds--cc--scatter-stacked circle.dot.hovered,
     .cds--cc--scatter-stacked circle.dot.unfilled,
     .cds--cc--scatter circle.dot.unfilled,
     .cds--cc--lollipop circle.dot.filled,
-      .cds--cc--lollipop circle.dot.hovered{
-        transition: 0.1s all linear;
-        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});
-      }
-      .cds--cc--lollipop .cds--cc--scatter circle.dot.hovered{
-        transition: 0.1s all linear;
-        stroke-width: 1.1em;
-      }
+    .cds--cc--lollipop circle.dot.hovered {
+      transition: 0.1s all linear;
+      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}
+        );
+    }
+    .cds--cc--lollipop .cds--cc--scatter circle.dot.hovered {
+      transition: 0.1s all linear;
+      stroke-width: 1.1em;
+    }
 
-      .cds--overflow-menu-options__btn:focus {
-        outline-color: ${props =>
-          props.isInverse ? props.theme.colors.focusInverse : ''};
-      }
+    .cds--overflow-menu-options__btn:focus {
+      outline-color: ${props =>
+        props.isInverse ? props.theme.colors.focusInverse : ''};
+    }
 
-      .cds--btn {
-        min-height: auto;
-        display: flex;
-        flex: 0 auto;
-        align-items: center;
-        text-align: center;
-        padding: 20px;
-        margin: 0;
-        line-height: ${props => props.theme.typeScale.size03.lineHeight};
-        margin: 0;
-        min-width: ${props => props.theme.spaceScale.spacing13};
-        overflow: hidden;
-        padding: ;
-        position: relative;
-        right: ${props => props.theme.spaceScale.spacing04};
-        text-align: center;
-        height: 40px;
-        font-family: ${props => props.theme.bodyFont};
-        font-size: ${props => props.theme.typeScale.size03.fontSize};
-        border-radius: ${props => props.theme.borderRadius};
-        font-weight: 500;
-      }
+    .cds--btn {
+      min-height: auto;
+      display: flex;
+      flex: 0 auto;
+      align-items: center;
+      text-align: center;
+      padding: 20px;
+      margin: 0;
+      line-height: ${props => props.theme.typeScale.size03.lineHeight};
+      margin: 0;
+      min-width: ${props => props.theme.spaceScale.spacing13};
+      overflow: hidden;
+      padding:;
+      position: relative;
+      right: ${props => props.theme.spaceScale.spacing04};
+      text-align: center;
+      height: 40px;
+      font-family: ${props => props.theme.bodyFont};
+      font-size: ${props => props.theme.typeScale.size03.fontSize};
+      border-radius: ${props => props.theme.borderRadius};
+      font-weight: 500;
+    }
 
-      .cds--btn--primary {
-        background: ${props =>
-          props.isInverse
-            ? props.theme.colors.tertiary500
-            : props.theme.colors.primary};
-        color: ${props =>
-          props.isInverse ? props.theme.colors.neutral900 : ''};
-      }
+    .cds--btn--primary {
+      background: ${props =>
+        props.isInverse
+          ? props.theme.colors.tertiary500
+          : props.theme.colors.primary};
+      color: ${props => (props.isInverse ? props.theme.colors.neutral900 : '')};
+    }
 
-      *:focus {
-        outline: 2px solid
-          ${props =>
-            props.isInverse
-              ? props.theme.colors.focusInverse
-              : props.theme.colors.focus} !important;
+    *:focus {
+      outline: 2px solid
+        ${props =>
+          props.isInverse
+            ? props.theme.colors.focusInverse
+            : props.theme.colors.focus} !important;
       outline-offset: 0;
     }
     .cds--overflow-menu-options__btn:focus,
@@ -417,8 +439,8 @@ const CarbonChartWrapper = styled.div<{
   }
 
   g.center text,
-  .pie-label{
-    fill: ${props => (props.isInverse ? props.theme.colors.neutral100 : '')} ;
+  .pie-label {
+    fill: ${props => (props.isInverse ? props.theme.colors.neutral100 : '')};
   }
 
   // Zoom responsive tweaks
@@ -490,7 +512,7 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
     };
 
     function buildColors() {
-      let scaleColorsObj: ColorsObject = {};
+      const scaleColorsObj: ColorsObject = {};
 
       const allGroups = dataSet.map(item => {
         return 'group' in item ? item['group'] : null;

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

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
 import { Card } from 'react-magma-dom';
 
+import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
+
 export default {
   component: CarbonChart,
   title: 'CarbonChart/Area',

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

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
 import { Card } from 'react-magma-dom';
 
+import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
+
 export default {
   component: CarbonChart,
   title: 'CarbonChart/Area Stacked',

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

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
 import { Card } from 'react-magma-dom';
 
+import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
+
 export default {
   component: CarbonChart,
   title: 'CarbonChart/Bar Simple',

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

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
 import { Card } from 'react-magma-dom';
 
+import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
+
 export default {
   component: CarbonChart,
   title: 'CarbonChart/Bar Floating',

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

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
 import { Card } from 'react-magma-dom';
 
+import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
+
 export default {
   component: CarbonChart,
   title: 'CarbonChart/Bar Grouped',

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

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
 import { Card } from 'react-magma-dom';
 
+import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
+
 export default {
   component: CarbonChart,
   title: 'CarbonChart/Bar Stacked',

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

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
 import { Card } from 'react-magma-dom';
 
+import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
+
 export default {
   component: CarbonChart,
   title: 'CarbonChart/Boxplot',
@@ -148,8 +150,7 @@ HorizontalBoxplot.args = {
   },
 };
 
-
-// Uncomment when adding new charts. Issues: #1054, #1055, #1056 
+// Uncomment when adding new charts. Issues: #1054, #1055, #1056
 
 // export const VerticalBoxplot = Template.bind({});
 // VerticalBoxplot.args = {
@@ -271,4 +272,3 @@ HorizontalBoxplot.args = {
 //     height: '400px',
 //   },
 // };
-

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

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
 import { Card } from 'react-magma-dom';
 
+import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
+
 export default {
   component: CarbonChart,
   title: 'CarbonChart/Bubble',
@@ -123,7 +125,7 @@ BubbleLinear.args = {
   },
 };
 
-// Uncomment when adding new charts. Issues: #1054, #1055, #1056 
+// Uncomment when adding new charts. Issues: #1054, #1055, #1056
 
 // export const BubbleTimeSeries = Template.bind({});
 // BubbleTimeSeries.args = {

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

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
 import { Card } from 'react-magma-dom';
 
+import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
+
 export default {
   component: CarbonChart,
   title: 'CarbonChart/Bullet',

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

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
 import { Card } from 'react-magma-dom';
 
+import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
+
 export default {
   component: CarbonChart,
   title: 'CarbonChart/Combo',

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

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
 import { Card } from 'react-magma-dom';
 
+import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
+
 export default {
   component: CarbonChart,
   title: 'CarbonChart/Donut',

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

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
 import { Card } from 'react-magma-dom';
 
+import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
+
 export default {
   component: CarbonChart,
   title: 'CarbonChart/Gauge',
@@ -52,7 +54,7 @@ GaugeSemicircularDangerStatus.args = {
   },
 };
 
-// Uncomment when adding new charts. Issues: #1054, #1055, #1056 
+// Uncomment when adding new charts. Issues: #1054, #1055, #1056
 
 // export const GaugeCircularWarningStatus = Template.bind({});
 // GaugeCircularWarningStatus.args = {

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

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
 import { Card } from 'react-magma-dom';
 
+import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
+
 export default {
   component: CarbonChart,
   title: 'CarbonChart/Histogram',
@@ -169,7 +171,7 @@ HistogramLinear.args = {
   },
 };
 
-// Uncomment when adding new charts. Issues: #1054, #1055, #1056 
+// Uncomment when adding new charts. Issues: #1054, #1055, #1056
 
 // export const HistogramDefinedBinsNumberLinear = Template.bind({});
 // HistogramDefinedBinsNumberLinear.args = {

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

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
 import { Card } from 'react-magma-dom';
 
+import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
+
 export default {
   component: CarbonChart,
   title: 'CarbonChart/Line',

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

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
 import { Card } from 'react-magma-dom';
 
+import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
+
 export default {
   component: CarbonChart,
   title: 'CarbonChart/Lollipop',

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

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
 import { Card } from 'react-magma-dom';
 
+import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
+
 export default {
   component: CarbonChart,
   title: 'CarbonChart/Meter',
@@ -62,7 +64,7 @@ MeterChartWithStatuses.args = {
   },
 };
 
-// Uncomment when adding new charts. Issues: #1054, #1055, #1056 
+// Uncomment when adding new charts. Issues: #1054, #1055, #1056
 
 // export const MeterChartNoStatus = Template.bind({});
 // MeterChartNoStatus.args = {