@carbon/charts-react 1.7.6 → 1.9.0-next.0

package/README.md

@@ -1,10 +1,10 @@
-# Notice
+# Carbon Charts React
 
-### This version relies on **Carbon v11**. If you're using Carbon v10, [see the legacy demo site](https://carbon-charts-0x.netlify.app)
+Carbon Charts React is a thin React wrapper around the vanilla JavScript `@carbon/charts` component library. The charts are based on D3.js, a peer dependency.
 
-## `@carbon/charts-react`
+The required styles should be imported from `@carbon/charts-react/styles.css` and `@carbon/styles/css/styles.css`. Additional documentation is provided in the Storybook demos.
 
-> Carbon Charting React Wrappers
+> Notice: This version relies on **Carbon v11**. If you're using Carbon v10, [see the legacy demo site](https://carbon-charts-0x.netlify.app)
 
 **[Storybook demos](https://carbon-design-system.github.io/carbon-charts/react)**
 
@@ -15,46 +15,40 @@
 Run the following command using [npm](https://www.npmjs.com/):
 
 ```bash
-npm install -S @carbon/charts @carbon/charts-react d3
+npm install -S @carbon/charts-react @carbon/styles d3
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
-instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead:
 
 ```bash
-yarn add @carbon/charts @carbon/charts-react d3
+yarn add @carbon/charts-react @carbon/styles d3
 ```
 
-**Note:** you'd also need to install `carbon-components` if you're not using a
-bundled version of the library.
+**Note:** you'd also need to install `carbon-components` if you're not using a bundled version of
+the library.
 
 ## Step-by-step instructions
 
 Read
 [here](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--react)
 
-## Codesandbox examples
+## StackBlitz examples
 
 [Sample use cases can be seen here](https://carbon-design-system.github.io/carbon-charts/react).
 
-**When opening the link above**, click on the **Edit on Codesandbox** button for
-each demo to see an isolated project showing you how to reproduce the demo.
+**When opening the link above**, click on the **Edit on StackBlitz** button for each demo to see an
+isolated project showing you how to reproduce the demo.
 
 ## Charting data & options
 
-Although we will definitely introduce new models in the future as we start
-shipping new components such as maps, Data and options follow the same model in
-all charts, with minor exceptions and differences in specific components.
+Although we will definitely introduce new models in the future as we start shipping new components such as maps, Data and options follow the same model in all charts, with minor exceptions and differences in specific components.
 
-For instance in the case of a donut chart you're able to pass in an additional
-field called `center` in your options configuring the donut center.
+For instance in the case of a donut chart you're able to pass in an additional field called `center` in your options configuring the donut center.
 
 For instructions on using the **tabular data format**, see
 [here](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-tutorials--tabular-data-format)
 
-There are also additional options available depending on the chart type being
-used,
-[see our demo examples here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data).
+There are also additional options available depending on the chart type being used, [see our demo examples here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data).
 
 Customizable options (specific to chart type) can be found
 [here](https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html)

package/dist/charts/AlluvialChart.d.ts

@@ -0,0 +1,5 @@
+import { AlluvialChart as AlluvialChartCore, AlluvialChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class AlluvialChart extends BaseChart<AlluvialChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: AlluvialChartOptions): AlluvialChartCore;
+}

package/dist/charts/AreaChart.d.ts

@@ -0,0 +1,5 @@
+import { AreaChart as AreaChartCore, AreaChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class AreaChart extends BaseChart<AreaChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: AreaChartOptions): AreaChartCore;
+}

package/dist/charts/BaseChart.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Chart as BaseChartCore, BaseChartOptions, ChartTabularData } from '@carbon/charts';
+interface Props<Options extends BaseChartOptions> {
+    options: Options;
+    data: ChartTabularData;
+}
+export default class BaseChart<Options extends BaseChartOptions = BaseChartOptions> extends React.PureComponent<Props<Options>, unknown> {
+    chart?: BaseChartCore;
+    chartRef: React.RefObject<HTMLDivElement>;
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: Options): BaseChartCore;
+    componentDidUpdate(prevProps: Props<Options>): void;
+    componentWillUnmount(): void;
+    componentDidMount(): void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/charts/BoxplotChart.d.ts

@@ -0,0 +1,5 @@
+import { BoxplotChart as BoxplotChartCore, BoxplotChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class BoxplotChart extends BaseChart<BoxplotChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: BoxplotChartOptions): BoxplotChartCore;
+}

package/dist/charts/BubbleChart.d.ts

@@ -0,0 +1,5 @@
+import { BubbleChart as BubbleChartCore, BubbleChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class BubbleChart extends BaseChart<BubbleChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: BubbleChartOptions): BubbleChartCore;
+}

package/dist/charts/BulletChart.d.ts

@@ -0,0 +1,5 @@
+import { BulletChart as BulletChartCore, BulletChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class BulletChart extends BaseChart<BulletChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: BulletChartOptions): BulletChartCore;
+}

package/dist/charts/ChoroplethChart.d.ts

@@ -0,0 +1,5 @@
+import { ExperimentalChoroplethChart as ChoroplethChartCore, ChoroplethChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class ExperimentalChoroplethChart extends BaseChart<ChoroplethChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: ChoroplethChartOptions): ChoroplethChartCore;
+}

package/dist/charts/CirclePackChart.d.ts

@@ -0,0 +1,5 @@
+import { CirclePackChart as CirclePackChartCore, CirclePackChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class CirclePackChart extends BaseChart<CirclePackChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: CirclePackChartOptions): CirclePackChartCore;
+}

package/dist/charts/ComboChart.d.ts

@@ -0,0 +1,5 @@
+import { ComboChart as ComboChartCore, ComboChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class ComboChart extends BaseChart<ComboChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: ComboChartOptions): ComboChartCore;
+}

package/dist/charts/DonutChart.d.ts

@@ -0,0 +1,5 @@
+import { DonutChart as DonutChartCore, DonutChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class DonutChart extends BaseChart<DonutChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: DonutChartOptions): DonutChartCore;
+}

package/dist/charts/GaugeChart.d.ts

@@ -0,0 +1,5 @@
+import { GaugeChart as GaugeChartCore, GaugeChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class GaugeChart extends BaseChart<GaugeChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: GaugeChartOptions): GaugeChartCore;
+}

package/dist/charts/GroupedBarChart.d.ts

@@ -0,0 +1,5 @@
+import { GroupedBarChart as GroupedBarChartCore, BarChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class GroupedBarChart extends BaseChart<BarChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: BarChartOptions): GroupedBarChartCore;
+}

package/dist/charts/HeatmapChart.d.ts

@@ -0,0 +1,5 @@
+import { HeatmapChart as HeatmapChartCore, HeatmapChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class HeatmapChart extends BaseChart<HeatmapChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: HeatmapChartOptions): HeatmapChartCore;
+}

package/dist/charts/HistogramChart.d.ts

@@ -0,0 +1,5 @@
+import { HistogramChart as HistogramChartCore, HistogramChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class HistogramChart extends BaseChart<HistogramChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: HistogramChartOptions): HistogramChartCore;
+}

package/dist/charts/LineChart.d.ts

@@ -0,0 +1,5 @@
+import { LineChart as LineChartCore, LineChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class LineChart extends BaseChart<LineChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: LineChartOptions): LineChartCore;
+}

package/dist/charts/LollipopChart.d.ts

@@ -0,0 +1,5 @@
+import { LollipopChart as LollipopChartCore, LollipopChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class LollipopChart extends BaseChart<LollipopChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: LollipopChartOptions): LollipopChartCore;
+}

package/dist/charts/MeterChart.d.ts

@@ -0,0 +1,5 @@
+import { MeterChart as MeterChartCore, MeterChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class MeterChart extends BaseChart<MeterChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: MeterChartOptions): MeterChartCore;
+}

package/dist/charts/PieChart.d.ts

@@ -0,0 +1,5 @@
+import { PieChart as PieChartCore, PieChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class PieChart extends BaseChart<PieChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: PieChartOptions): PieChartCore;
+}

package/dist/charts/RadarChart.d.ts

@@ -0,0 +1,5 @@
+import { RadarChart as RadarChartCore, RadarChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class RadarChart extends BaseChart<RadarChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: RadarChartOptions): RadarChartCore;
+}

package/dist/charts/ScatterChart.d.ts

@@ -0,0 +1,5 @@
+import { ScatterChart as ScatterChartCore, ScatterChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class ScatterChart extends BaseChart<ScatterChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: ScatterChartOptions): ScatterChartCore;
+}

package/dist/charts/SimpleBarChart.d.ts

@@ -0,0 +1,5 @@
+import { SimpleBarChart as SimpleBarChartCore, BarChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class SimpleBarChart extends BaseChart<BarChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: BarChartOptions): SimpleBarChartCore;
+}

package/dist/charts/StackedAreaChart.d.ts

@@ -0,0 +1,5 @@
+import { StackedAreaChart as StackedAreaChartCore, StackedAreaChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class StackedAreaChart extends BaseChart<StackedAreaChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: StackedAreaChartOptions): StackedAreaChartCore;
+}

package/dist/charts/StackedBarChart.d.ts

@@ -0,0 +1,5 @@
+import { StackedBarChart as StackedBarChartCore, StackedBarChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class StackedBarChart extends BaseChart<StackedBarChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: StackedBarChartOptions): StackedBarChartCore;
+}

package/dist/charts/TreeChart.d.ts

@@ -0,0 +1,5 @@
+import { TreeChart as TreeChartCore, TreeChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class TreeChart extends BaseChart<TreeChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: TreeChartOptions): TreeChartCore;
+}

package/dist/charts/TreemapChart.d.ts

@@ -0,0 +1,5 @@
+import { TreemapChart as TreemapChartCore, TreemapChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class TreemapChart extends BaseChart<TreemapChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: TreemapChartOptions): TreemapChartCore;
+}

package/dist/charts/WordCloudChart.d.ts

@@ -0,0 +1,5 @@
+import { WordCloudChart as WordCloudChartCore, WorldCloudChartOptions, ChartTabularData } from '@carbon/charts';
+import BaseChart from './BaseChart';
+export default class WordCloudChart extends BaseChart<WorldCloudChartOptions> {
+    createChart(chartRef: HTMLDivElement, data: ChartTabularData, options: WorldCloudChartOptions): WordCloudChartCore;
+}

package/dist/charts/index.d.ts

@@ -0,0 +1,26 @@
+import AlluvialChart from './AlluvialChart';
+import AreaChart from './AreaChart';
+import BoxplotChart from './BoxplotChart';
+import BubbleChart from './BubbleChart';
+import BulletChart from './BulletChart';
+import ExperimentalChoroplethChart from './ChoroplethChart';
+import CirclePackChart from './CirclePackChart';
+import ComboChart from './ComboChart';
+import DonutChart from './DonutChart';
+import GaugeChart from './GaugeChart';
+import GroupedBarChart from './GroupedBarChart';
+import HeatmapChart from './HeatmapChart';
+import HistogramChart from './HistogramChart';
+import LineChart from './LineChart';
+import LollipopChart from './LollipopChart';
+import MeterChart from './MeterChart';
+import PieChart from './PieChart';
+import RadarChart from './RadarChart';
+import ScatterChart from './ScatterChart';
+import SimpleBarChart from './SimpleBarChart';
+import StackedAreaChart from './StackedAreaChart';
+import StackedBarChart from './StackedBarChart';
+import TreeChart from './TreeChart';
+import TreemapChart from './TreemapChart';
+import WordCloudChart from './WordCloudChart';
+export { AlluvialChart, AreaChart, BoxplotChart, BubbleChart, BulletChart, ExperimentalChoroplethChart, CirclePackChart, ComboChart, DonutChart, GaugeChart, GroupedBarChart, HeatmapChart, HistogramChart, LineChart, LollipopChart, MeterChart, PieChart, RadarChart, ScatterChart, SimpleBarChart, StackedAreaChart, StackedBarChart, TreeChart, TreemapChart, WordCloudChart };

package/dist/diagrams/CardNode.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type CssPosition = 'fixed' | 'absolute' | 'relative' | 'static' | 'sticky';
+type CardNodeProps = {
+    tag?: 'div' | 'a' | 'button';
+    href?: string;
+    stacked?: boolean;
+    color?: string;
+    position?: CssPosition;
+    children?: React.ReactNode;
+};
+declare const CardNode: React.FC<CardNodeProps & React.HTMLAttributes<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>>;
+export { CardNode };

package/dist/diagrams/CardNodeColumn.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type CardNodeColumnProps = {
+    children?: React.ReactNode;
+    farsideColumn?: boolean;
+};
+declare const CardNodeColumn: React.FC<CardNodeColumnProps & React.HTMLAttributes<HTMLDivElement>>;
+export { CardNodeColumn };

package/dist/diagrams/CardNodeLabel.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type CardNodeLabelProps = {
+    children?: React.ReactNode;
+};
+declare const CardNodeLabel: React.FC<CardNodeLabelProps & React.HTMLAttributes<HTMLLabelElement>>;
+export { CardNodeLabel };

package/dist/diagrams/CardNodeSubtitle.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type CardNodeSubtitleProps = {
+    children?: React.ReactNode;
+};
+declare const CardNodeSubtitle: React.FC<CardNodeSubtitleProps & React.HTMLAttributes<HTMLDivElement>>;
+export { CardNodeSubtitle };

package/dist/diagrams/CardNodeTitle.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type CardNodeTitleProps = {
+    children?: React.ReactNode;
+};
+declare const CardNodeTitle: React.FC<CardNodeTitleProps & React.HTMLAttributes<HTMLDivElement>>;
+export { CardNodeTitle };

package/dist/diagrams/Edge.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+type Coordinates = {
+    x: number;
+    y: number;
+};
+type EdgeProps = {
+    color?: string;
+    markerStart?: string;
+    markerEnd?: string;
+    source?: Coordinates;
+    target?: Coordinates;
+    path?: string;
+    variant?: string;
+};
+type EdgeSVGProps = Pick<React.SVGProps<SVGGElement>, Exclude<keyof React.SVGProps<SVGGElement>, 'target'>>;
+declare const Edge: React.FC<EdgeProps & EdgeSVGProps>;
+export default Edge;

package/dist/diagrams/Marker.d.ts

@@ -0,0 +1,20 @@
+import React, { SVGProps } from 'react';
+interface MarkerProps extends SVGProps<SVGMarkerElement> {
+    id?: string;
+    d?: string;
+    color?: string;
+    position?: 'start' | 'end';
+    orient?: string | number;
+    height?: number;
+    width?: number;
+    refX?: number;
+    refY?: number;
+}
+declare const Marker: React.FC<MarkerProps>;
+declare const ArrowLeftMarker: React.FC<Pick<MarkerProps, Exclude<keyof MarkerProps, 'd'>>>;
+declare const ArrowRightMarker: React.FC<Pick<MarkerProps, Exclude<keyof MarkerProps, 'd'>>>;
+declare const CircleMarker: React.FC<Pick<MarkerProps, Exclude<keyof MarkerProps, 'd'>>>;
+declare const DiamondMarker: React.FC<Pick<MarkerProps, Exclude<keyof MarkerProps, 'd'>>>;
+declare const SquareMarker: React.FC<Pick<MarkerProps, Exclude<keyof MarkerProps, 'd'>>>;
+declare const TeeMarker: React.FC<Pick<MarkerProps, Exclude<keyof MarkerProps, 'd'>>>;
+export { Marker, ArrowLeftMarker, ArrowRightMarker, CircleMarker, DiamondMarker, SquareMarker, TeeMarker };

package/dist/diagrams/ShapeNode.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+type CssPosition = 'fixed' | 'absolute' | 'relative' | 'static' | 'sticky';
+type ShapeNodeProps = {
+    shape?: 'circle' | 'square' | 'rounded-square';
+    tag?: 'div' | 'button' | 'a';
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    renderIcon: React.ReactNode;
+    href?: string;
+    size?: string | number;
+    position?: CssPosition;
+    bodyPosition?: CssPosition;
+    stacked?: boolean;
+};
+declare const ShapeNode: React.FC<ShapeNodeProps & React.HTMLAttributes<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>>;
+export default ShapeNode;

package/dist/diagrams/index.d.ts

@@ -0,0 +1,9 @@
+import { CardNode } from './CardNode';
+import { CardNodeColumn } from './CardNodeColumn';
+import { CardNodeLabel } from './CardNodeLabel';
+import { CardNodeSubtitle } from './CardNodeSubtitle';
+import { CardNodeTitle } from './CardNodeTitle';
+import Edge from './Edge';
+import { ArrowLeftMarker, ArrowRightMarker, CircleMarker, DiamondMarker, Marker, SquareMarker, TeeMarker } from './Marker';
+import ShapeNode from './ShapeNode';
+export { CardNode, CardNodeColumn, CardNodeSubtitle, CardNodeTitle, CardNodeLabel, Edge, ArrowLeftMarker, ArrowRightMarker, CircleMarker, DiamondMarker, Marker, SquareMarker, TeeMarker, ShapeNode };

package/{diagrams/configs.d.ts → dist/diagrams/utils.d.ts}

@@ -1 +1 @@
-export declare const carbonPrefix = "cds";
+export declare const carbonPrefix = "cds";

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { AreaChart, StackedAreaChart, GroupedBarChart, SimpleBarChart, StackedBarChart, BoxplotChart, BubbleChart, BulletChart, ExperimentalChoroplethChart, DonutChart, GaugeChart, HistogramChart, LineChart, LollipopChart, PieChart, ScatterChart, MeterChart, RadarChart, ComboChart, TreeChart, TreemapChart, CirclePackChart, WordCloudChart, AlluvialChart, HeatmapChart } from './charts';
+export { ArrowLeftMarker, ArrowRightMarker, CardNode, CardNodeColumn, CardNodeSubtitle, CardNodeTitle, CardNodeLabel, CircleMarker, DiamondMarker, Edge, Marker, ShapeNode, SquareMarker, TeeMarker } from './diagrams';