@react-magma/charts 12.0.0-next.3 → 12.0.0-next.5

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

@@ -1,6 +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",
@@ -27,7 +27,7 @@ export interface CarbonChartProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * For a complete list of options, see Carbon Charts documentation
      */
-    options: Object;
+    options: ChartOptions;
     testId?: string;
     /**
      * @internal

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.3",
+  "version": "12.0.0-next.5",
   "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"
@@ -28,7 +30,7 @@
     "d3": "^7.9.0",
     "d3-cloud": "^1.2.7",
     "d3-sankey": "^0.12.3",
-    "victory": "^35.4.12"
+    "victory": "^37.3.6"
   },
   "devDependencies": {
     "@emotion/react": "^11.13.0",
@@ -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

@@ -19,11 +19,14 @@ import {
   MeterChart,
   ScatterChart,
   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',
@@ -52,7 +55,7 @@ export interface CarbonChartProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * For a complete list of options, see Carbon Charts documentation
    */
-  options: Object;
+  options: ChartOptions;
   testId?: string;
   /**
    * @internal
@@ -559,6 +562,7 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
         scale: buildColors(),
       },
       tooltip: {
+        ...(options?.tooltip || {}),
         truncation: {
           type: 'none',
         },
@@ -577,17 +581,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>
+      </>
     );
   }
 );

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

@@ -67,6 +67,16 @@ VerticalSimpleBarDiscrete.args = {
       },
     },
     height: '400px',
+    tooltip: {
+      valueFormatter: (value /*, label */) =>
+        typeof value === 'number'
+          ? value.toLocaleString(undefined, {
+              minimumFractionDigits: 20,
+              maximumFractionDigits: 20,
+            })
+          : String(value),
+      enabled: false,
+    },
   },
 };