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

package/README.md

@@ -18,15 +18,14 @@ Run the following command using [npm](https://www.npmjs.com/):
 npm install -S @carbon/charts @carbon/charts-react 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
 ```
 
-**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
 
@@ -37,23 +36,22 @@ Read
 
 [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 Codesandbox** 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,
+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

package/dist/charts/AlluvialChart.d.ts

@@ -0,0 +1,5 @@
+import { AlluvialChart as AlluvialChartCore, type AlluvialChartOptions, type 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, type AreaChartOptions, type 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 type { 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, type BoxplotChartOptions, type 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, type BubbleChartOptions, type 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, type BulletChartOptions, type 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, type ChoroplethChartOptions, type 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, type CirclePackChartOptions, type 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, type ComboChartOptions, type 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, type DonutChartOptions, type 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, type GaugeChartOptions, type 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, type BarChartOptions, type 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, type HeatmapChartOptions, type 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, type HistogramChartOptions, type 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, type LineChartOptions, type 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, type LollipopChartOptions, type 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, type MeterChartOptions, type 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, type PieChartOptions, type 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, type RadarChartOptions, type 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, type ScatterChartOptions, type 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, type BarChartOptions, type 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, type StackedAreaChartOptions, type 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, type StackedBarChartOptions, type 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, type TreeChartOptions, type 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, type TreemapChartOptions, type 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, type WorldCloudChartOptions, type 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 = Omit<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<Omit<MarkerProps, 'd'>>;
+declare const ArrowRightMarker: React.FC<Omit<MarkerProps, 'd'>>;
+declare const CircleMarker: React.FC<Omit<MarkerProps, 'd'>>;
+declare const DiamondMarker: React.FC<Omit<MarkerProps, 'd'>>;
+declare const SquareMarker: React.FC<Omit<MarkerProps, 'd'>>;
+declare const TeeMarker: React.FC<Omit<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/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';