@react-magma/charts 12.0.0-next.4 → 12.0.0-next.6

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { ChartOptions } from '@carbon/charts-react';
 import { ThemeInterface } from 'react-magma-dom';
-import './styles.min.css';
 export declare enum CarbonChartType {
     area = "area",
     areaStacked = "areaStacked",

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

@@ -0,0 +1 @@
+export declare const carbonChartStyles: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@react-magma/charts",
-  "version": "12.0.0-next.4",
+  "version": "12.0.0-next.6",
   "license": "MIT",
   "exports": {
-    ".": "./src",
-    "./src/components/CarbonChart/": "./styles.min.css"
+    ".": {
+      "import": "./dist/charts.modern.module.js",
+      "require": "./dist/charts.js",
+      "types": "./dist/index.d.ts"
+    }
   },
   "main": "dist/charts.js",
   "umd:main": "dist/charts.umd.js",
@@ -13,12 +16,11 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist",
-    "src",
-    "src/components/CarbonChart/styles.min.css"
+    "src"
   ],
   "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",
+    "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",
     "lint": "eslint ./src",
     "test": "jest",
     "test-watch": "jest --watch"
@@ -37,7 +39,7 @@
     "identity-obj-proxy": "^3.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-magma-dom": "^4.10.0-next.3",
+    "react-magma-dom": "^4.10.0-next.29",
     "react-magma-icons": "^3.2.0"
   },
   "peerDependencies": {

package/src/components/CarbonChart/CarbonChart.tsx

@@ -21,10 +21,12 @@ 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 './styles.min.css';
+
+import { carbonChartStyles } from './embeddedStyles';
 
 export enum CarbonChartType {
   area = 'area',
@@ -207,6 +209,7 @@ const CarbonChartWrapper = styled.div<{
     .cds--cc--grid rect.chart-grid-backdrop {
       fill: transparent;
     }
+    .cds--cc--scatter circle.dot,
     .cds--cc--scatter circle.dot.hovered {
       padding: 10px;
     }
@@ -216,6 +219,36 @@ const CarbonChartWrapper = styled.div<{
       stroke-width: 6px;
       transition: 0.1s all linear;
     }
+    .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}
+          );
+    }
     .cds--cc--scatter circle.dot.hovered {
       stroke-width: 0.5em;
       transition: 0.1s all linear;
@@ -248,14 +281,17 @@ const CarbonChartWrapper = styled.div<{
                 : props.theme.colors.neutral100}
         );
     }
+    .cds--cc--lollipop circle.dot,
     .cds--cc--lollipop circle.dot.filled,
     .cds--cc--lollipop circle.dot.hovered {
       stroke-width: 15px;
     }
+    .cds--cc--scatter-stacked circle.dot,
     .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,
     .cds--cc--lollipop circle.dot.hovered {
       transition: 0.1s all linear;
       filter: drop-shadow(
@@ -579,17 +615,20 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
     const groupsLength = Object.keys(buildColors()).length;
 
     return (
-      <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>
+      <>
+        <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>
+      </>
     );
   }
 );