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

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

@@ -1,4 +1,5 @@
 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 {
@@ -27,7 +28,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/CarbonChartArea.stories.d.ts

@@ -9,3 +9,4 @@ export declare const AreaMultipleBoundedAreasNaturalCurve: import("@storybook/cs
 export declare const AreaMultipleBoundedAreasNaturalCurveZoomBarEnabled: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
 export declare const AreaSkeleton: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
 export declare const AreaEmptyState: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const AreaTimeSeriesWithCustomColors: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

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

@@ -2,3 +2,4 @@ import { CarbonChartProps } from '.';
 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 HorizontalBoxplot: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const VerticalBoxplot: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

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

@@ -2,3 +2,8 @@ import { CarbonChartProps } from '.';
 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 BubbleLinear: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const BubbleTimeSeries: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const BubbleDiscrete: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const BubbleDualDiscreteAxes: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const BubbleEmptyState: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const BubbleSkeleton: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

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

@@ -2,3 +2,14 @@ import { CarbonChartProps } from '.';
 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 ComboLineAndSimpleBarCustomConfigs: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const ComboLineAndStackedBar: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const ComboLineAndGroupedBarCustomConfigs: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const ComboLineAndFloatingBar: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const ComboHorizontalLineAndGroupedBar: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const HorizontalComboLineAndSimpleBar: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const ComboLineAndArea: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const ComboStackedAreaAndLine: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const ComboLineAndScatterAndBar: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const ComboLineAndAreaTimeSeries: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const ComboChartEmpty: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const ComboChartLoading: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

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

@@ -2,3 +2,4 @@ import { CarbonChartProps } from '.';
 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 GaugeSemicircularDangerStatus: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const GaugeCircularWarningStatus: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

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

@@ -2,3 +2,5 @@ import { CarbonChartProps } from '.';
 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 HistogramLinear: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const HistogramDefinedBinsNumberLinear: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const HistogramDefinedBinsLinear: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

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

@@ -2,3 +2,7 @@ import { CarbonChartProps } from '.';
 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 MeterChartWithStatuses: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const MeterChartNoStatus: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const ProportionalMeterChart: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const ProportionalMeterChartPeakAndStatuses: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const ProportionalMeterChartTruncated: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

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

@@ -2,3 +2,6 @@ import { CarbonChartProps } from '.';
 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 Radar: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const RadarCentered: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const RadarMissingDatapoints: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const RadarDense: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

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

@@ -2,3 +2,8 @@ import { CarbonChartProps } from '.';
 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 ScatterLinearXAndY: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const ScatterTimeSeries: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const ScatterDiscrete: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const ScatterDualAxes: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const ScatterEmptyState: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const ScatterSkeleton: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-magma/charts",
-  "version": "12.0.0-next.2",
+  "version": "12.0.0-next.4",
   "license": "MIT",
   "exports": {
     ".": "./src",
@@ -28,7 +28,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",

package/src/components/CarbonChart/CarbonChart.tsx

@@ -19,6 +19,7 @@ import {
   MeterChart,
   ScatterChart,
   ComboChart,
+  ChartOptions,
 } from '@carbon/charts-react';
 import styled from '@emotion/styled';
 import { transparentize } from 'polished';
@@ -52,7 +53,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
@@ -66,6 +67,7 @@ export interface CarbonChartProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const CarbonChartWrapper = styled.div<{
   isInverse?: boolean;
+  groupsLength: number;
   theme: ThemeInterface;
 }>`
   .cds--data-table thead tr th {
@@ -289,6 +291,22 @@ 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) || [];
+
+      return chartColors.reduce((result, color, index) => {
+        const indexNum = index + 1;
+
+        result += `.tooltip-${props.groupsLength}-1-${indexNum} { background-color: ${color}; }`;
+
+        return result;
+      }, '');
+    }}
 
     .cds--overflow-menu-options__btn:focus {
       outline-color: ${props =>
@@ -480,7 +498,6 @@ interface ColorsObject {
 export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
   (props, ref) => {
     const {
-      children,
       testId,
       isInverse: isInverseProp,
       type,
@@ -520,12 +537,15 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
       const uniqueGroups = allGroups.filter(
         (g, index) => allGroups.indexOf(g) === index
       );
+      const customColors = ((options as any).colors as string[]) || [];
+      const allColors = [...customColors, ...theme.chartColors];
+      const allInverseColors = [...customColors, ...theme.chartColorsInverse];
 
       uniqueGroups.forEach((group, i) => {
-        if (uniqueGroups.length <= theme.chartColors.length) {
+        if (uniqueGroups.length <= allColors.length) {
           return (scaleColorsObj[group || ('null' as any)] = isInverse
-            ? theme.chartColorsInverse[i]
-            : theme.chartColors[i]);
+            ? allInverseColors[i]
+            : allColors[i]);
         }
         return {};
       });
@@ -540,6 +560,7 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
         scale: buildColors(),
       },
       tooltip: {
+        ...(options?.tooltip || {}),
         truncation: {
           type: 'none',
         },
@@ -555,6 +576,8 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
       });
     });
 
+    const groupsLength = Object.keys(buildColors()).length;
+
     return (
       <CarbonChartWrapper
         data-testid={testId}
@@ -562,6 +585,7 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
         isInverse={isInverse}
         theme={theme}
         className="carbon-chart-wrapper"
+        groupsLength={groupsLength < 6 ? groupsLength : 14}
         {...rest}
       >
         <ChartType data={dataSet} options={newOptions} />

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

@@ -629,3 +629,104 @@ AreaEmptyState.args = {
     height: '400px',
   },
 };
+
+export const AreaTimeSeriesWithCustomColors = Template.bind({});
+AreaTimeSeriesWithCustomColors.args = {
+  isInverse: false,
+  type: CarbonChartType.area,
+  dataSet: [
+    {
+      group: 'Dataset 1',
+      date: '2019-01-01T05:00:00.000Z',
+      value: 0,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2019-01-06T05:00:00.000Z',
+      value: 57312,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2019-01-08T05:00:00.000Z',
+      value: 21432,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2019-01-15T05:00:00.000Z',
+      value: 70323,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2019-01-19T05:00:00.000Z',
+      value: 21300,
+    },
+    {
+      group: 'Dataset 2',
+      date: '2019-01-01T05:00:00.000Z',
+      value: 50000,
+    },
+    {
+      group: 'Dataset 2',
+      date: '2019-01-05T05:00:00.000Z',
+      value: 15000,
+    },
+    {
+      group: 'Dataset 2',
+      date: '2019-01-08T05:00:00.000Z',
+      value: 20000,
+    },
+    {
+      group: 'Dataset 2',
+      date: '2019-01-13T05:00:00.000Z',
+      value: 39213,
+    },
+    {
+      group: 'Dataset 2',
+      date: '2019-01-19T05:00:00.000Z',
+      value: 61213,
+    },
+    {
+      group: 'Dataset 3',
+      date: '2019-01-02T05:00:00.000Z',
+      value: 10,
+    },
+    {
+      group: 'Dataset 3',
+      date: '2019-01-06T05:00:00.000Z',
+      value: 37312,
+    },
+    {
+      group: 'Dataset 3',
+      date: '2019-01-08T05:00:00.000Z',
+      value: 51432,
+    },
+    {
+      group: 'Dataset 3',
+      date: '2019-01-13T05:00:00.000Z',
+      value: 40323,
+    },
+    {
+      group: 'Dataset 3',
+      date: '2019-01-19T05:00:00.000Z',
+      value: 31300,
+    },
+  ],
+
+  options: {
+    title: 'Area (time series) with custom colors',
+    axes: {
+      bottom: {
+        title: '2019 Annual Sales Figures',
+        mapsTo: 'date',
+        scaleType: 'time',
+      },
+      left: {
+        mapsTo: 'value',
+        title: 'Conversion rate',
+        scaleType: 'linear',
+      },
+    },
+    height: '400px',
+    colors: ['red', 'green'],
+  },
+};

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,
+    },
   },
 };
 

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

@@ -150,125 +150,123 @@ HorizontalBoxplot.args = {
   },
 };
 
-// Uncomment when adding new charts. Issues: #1054, #1055, #1056
-
-// export const VerticalBoxplot = Template.bind({});
-// VerticalBoxplot.args = {
-//   isInverse: false,
-//   type: CarbonChartType.boxplot,
-//   dataSet: [
-//     {
-//       group: 'Q1',
-//       key: 'Monday',
-//       value: 65000,
-//     },
-//     {
-//       group: 'Q1',
-//       key: 'Tuesday',
-//       value: 29123,
-//     },
-//     {
-//       group: 'Q1',
-//       key: 'Wednesday',
-//       value: 35213,
-//     },
-//     {
-//       group: 'Q1',
-//       key: 'Thursday',
-//       value: 51213,
-//     },
-//     {
-//       group: 'Q1',
-//       key: 'Friday',
-//       value: 16932,
-//     },
-//     {
-//       group: 'Q2',
-//       key: 'Monday',
-//       value: 32432,
-//     },
-//     {
-//       group: 'Q2',
-//       key: 'Tuesday',
-//       value: 14312,
-//     },
-//     {
-//       group: 'Q2',
-//       key: 'Wednesday',
-//       value: 66456,
-//     },
-//     {
-//       group: 'Q2',
-//       key: 'Thursday',
-//       value: 21312,
-//     },
-//     {
-//       group: 'Q2',
-//       key: 'Friday',
-//       value: 37234,
-//     },
-//     {
-//       group: 'Q3',
-//       key: 'Monday',
-//       value: 5312,
-//     },
-//     {
-//       group: 'Q3',
-//       key: 'Tuesday',
-//       value: 23232,
-//     },
-//     {
-//       group: 'Q3',
-//       key: 'Wednesday',
-//       value: 34232,
-//     },
-//     {
-//       group: 'Q3',
-//       key: 'Thursday',
-//       value: 12312,
-//     },
-//     {
-//       group: 'Q3',
-//       key: 'Friday',
-//       value: 44234,
-//     },
-//     {
-//       group: 'Q4',
-//       key: 'Monday',
-//       value: 32423,
-//     },
-//     {
-//       group: 'Q4',
-//       key: 'Tuesday',
-//       value: 21313,
-//     },
-//     {
-//       group: 'Q4',
-//       key: 'Wednesday',
-//       value: 64353,
-//     },
-//     {
-//       group: 'Q4',
-//       key: 'Thursday',
-//       value: 24134,
-//     },
-//     {
-//       group: 'Q4',
-//       key: 'Friday',
-//       value: 45134,
-//     },
-//   ],
-//   options: {
-//     title: 'Vertical box plot',
-//     axes: {
-//       left: {
-//         mapsTo: 'value',
-//       },
-//       bottom: {
-//         scaleType: 'labels',
-//         mapsTo: 'group',
-//       },
-//     },
-//     height: '400px',
-//   },
-// };
+export const VerticalBoxplot = Template.bind({});
+VerticalBoxplot.args = {
+  isInverse: false,
+  type: CarbonChartType.boxplot,
+  dataSet: [
+    {
+      group: 'Q1',
+      key: 'Monday',
+      value: 65000,
+    },
+    {
+      group: 'Q1',
+      key: 'Tuesday',
+      value: 29123,
+    },
+    {
+      group: 'Q1',
+      key: 'Wednesday',
+      value: 35213,
+    },
+    {
+      group: 'Q1',
+      key: 'Thursday',
+      value: 51213,
+    },
+    {
+      group: 'Q1',
+      key: 'Friday',
+      value: 16932,
+    },
+    {
+      group: 'Q2',
+      key: 'Monday',
+      value: 32432,
+    },
+    {
+      group: 'Q2',
+      key: 'Tuesday',
+      value: 14312,
+    },
+    {
+      group: 'Q2',
+      key: 'Wednesday',
+      value: 66456,
+    },
+    {
+      group: 'Q2',
+      key: 'Thursday',
+      value: 21312,
+    },
+    {
+      group: 'Q2',
+      key: 'Friday',
+      value: 37234,
+    },
+    {
+      group: 'Q3',
+      key: 'Monday',
+      value: 5312,
+    },
+    {
+      group: 'Q3',
+      key: 'Tuesday',
+      value: 23232,
+    },
+    {
+      group: 'Q3',
+      key: 'Wednesday',
+      value: 34232,
+    },
+    {
+      group: 'Q3',
+      key: 'Thursday',
+      value: 12312,
+    },
+    {
+      group: 'Q3',
+      key: 'Friday',
+      value: 44234,
+    },
+    {
+      group: 'Q4',
+      key: 'Monday',
+      value: 32423,
+    },
+    {
+      group: 'Q4',
+      key: 'Tuesday',
+      value: 21313,
+    },
+    {
+      group: 'Q4',
+      key: 'Wednesday',
+      value: 64353,
+    },
+    {
+      group: 'Q4',
+      key: 'Thursday',
+      value: 24134,
+    },
+    {
+      group: 'Q4',
+      key: 'Friday',
+      value: 45134,
+    },
+  ],
+  options: {
+    title: 'Vertical box plot',
+    axes: {
+      left: {
+        mapsTo: 'value',
+      },
+      bottom: {
+        scaleType: 'labels',
+        mapsTo: 'group',
+      },
+    },
+    height: '400px',
+  },
+};