@antv/gpt-vis 0.5.9 → 0.5.11

package/dist/cjs/Area/index.d.ts

@@ -1,3 +1,4 @@
+import type { AreaConfig } from '@ant-design/plots';
 import React from 'react';
 import type { BasePlotProps, Style, Theme } from '../types';
 type AreaDataItem = {
@@ -5,6 +6,6 @@ type AreaDataItem = {
     value: number;
     [key: string]: string | number;
 };
-export type AreaProps = BasePlotProps<AreaDataItem> & Theme & Style;
+export type AreaProps = BasePlotProps<AreaDataItem> & Partial<AreaConfig> & Theme & Style;
 declare const Area: (props: AreaProps) => React.JSX.Element;
 export default Area;

package/dist/cjs/Boxplot/index.d.ts

@@ -1,3 +1,4 @@
+import type { BoxConfig } from '@ant-design/plots';
 import React from 'react';
 import type { BasePlotProps, Style, Theme } from '../types';
 type BoxplotDatum = {
@@ -5,9 +6,6 @@ type BoxplotDatum = {
     value: number;
     group?: string;
 };
-export type BoxplotProps = BasePlotProps<BoxplotDatum> & Theme & Style & {
-    xField?: string;
-    yField?: string;
-};
+export type BoxplotProps = BasePlotProps<BoxplotDatum> & Partial<BoxConfig> & Theme & Style;
 declare const Boxplot: (props: BoxplotProps) => React.JSX.Element;
 export default Boxplot;

package/dist/cjs/Boxplot/index.js

@@ -39,7 +39,7 @@ var import_theme = require("../theme");
 var defaultConfig = (props) => {
   var _a;
   const { data, style = {}, axisYTitle, axisXTitle, xField = "category", yField = "value" } = props;
-  const { backgroundColor, palette } = style;
+  const { backgroundColor, palette, startAtZero = false } = style;
   const hasGroupField = ((_a = (data || [])[0]) == null ? void 0 : _a.group) !== void 0;
   let paletteConfig = { color: void 0 };
   const hasPalette = !!(palette == null ? void 0 : palette[0]);
@@ -70,7 +70,7 @@ var defaultConfig = (props) => {
     scale: {
       x: { paddingInner: 0.6, paddingOuter: 0.3 },
       series: { paddingInner: 0.3, paddingOuter: 0.1 },
-      y: { nice: true },
+      y: { nice: true, zero: startAtZero },
       ...paletteConfig
     },
     style: { stroke: "black" },

package/dist/cjs/Column/index.d.ts

@@ -1,3 +1,4 @@
+import type { ColumnConfig } from '@ant-design/plots';
 import React from 'react';
 import type { BasePlotProps, Style, Theme } from '../types';
 export type ColumnDataItem = {
@@ -5,7 +6,7 @@ export type ColumnDataItem = {
     value: number;
     [key: string]: string | number;
 };
-export type ColumnProps = BasePlotProps<ColumnDataItem> & Theme & Style & {
+export type ColumnProps = BasePlotProps<ColumnDataItem> & Partial<ColumnConfig> & Theme & Style & {
     group?: boolean;
     stack?: boolean;
 };

package/dist/cjs/DualAxes/index.d.ts

@@ -5,6 +5,11 @@ export type DualAxesProps = Partial<DualAxesConfig> & {
     axisXTitle?: string;
     series: DualAxesSeriesItem[];
     legendTypeList?: string[];
+    style?: {
+        palette?: string[];
+        backgroundColor?: string;
+        startAtZero?: boolean;
+    };
 };
 export type DualAxesSeriesItem = {
     type: string;

package/dist/cjs/DualAxes/index.js

@@ -70,9 +70,10 @@ var defaultConfig = (props) => {
   };
 };
 var DualAxes = (props) => {
-  const { categories, series, theme = "default", ...others } = props;
+  const { categories, series, theme = "default", style = {}, ...others } = props;
+  const { startAtZero = false } = style;
   const themeConfig = import_theme.THEME_MAP[theme];
-  const transformData = (0, import_react.useMemo)(() => (0, import_util.transform)(series, categories), [props]);
+  const transformData = (0, import_react.useMemo)(() => (0, import_util.transform)(series, categories, startAtZero), [props]);
   const config = (0, import_hooks.usePlotConfig)("DualAxes", defaultConfig, {
     ...others,
     ...transformData,

package/dist/cjs/DualAxes/util.d.ts

@@ -1,5 +1,5 @@
 import type { DualAxesSeriesItem } from '.';
-export declare function transform(series: DualAxesSeriesItem[], categories: string[]): {
+export declare function transform(series: DualAxesSeriesItem[], categories: string[], startAtZero?: boolean): {
     children: any[];
     data: {
         [key: string]: any;

package/dist/cjs/DualAxes/util.js

@@ -23,7 +23,7 @@ __export(util_exports, {
 });
 module.exports = __toCommonJS(util_exports);
 var import_types = require("../types");
-function transform(series, categories) {
+function transform(series, categories, startAtZero = false) {
   const newChildren = series.sort((a, b) => {
     const ORDER = ["column", "line"];
     return ORDER.indexOf(a.type) - ORDER.indexOf(b.type);
@@ -34,6 +34,7 @@ function transform(series, categories) {
       ...others,
       yField: defaultYField,
       axis: { y: { title: axisYTitle } },
+      scale: { y: { nice: true, zero: startAtZero } },
       // data放在最外层
       data: void 0
     };

package/dist/cjs/Funnel/index.js

@@ -44,8 +44,8 @@ var defaultConfig = (props) => {
     data,
     theme: import_theme.THEME_MAP[theme],
     title,
-    padding: 40,
-    insetRight: 28,
+    paddingLeft: 40,
+    paddingRight: 68,
     children: [
       {
         type: "interval",

package/dist/cjs/Histogram/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { BasePlotProps, Style, Theme } from '../types';
 export type HistogramProps = BasePlotProps<number> & Theme & Style & {
     binNumber: number;
+    binField?: (d: number) => number;
 };
 declare const Histogram: (props: HistogramProps) => React.JSX.Element;
 export default Histogram;

package/dist/cjs/Line/index.d.ts

@@ -1,3 +1,4 @@
+import type { LineConfig } from '@ant-design/plots';
 import React from 'react';
 import type { BasePlotProps, Style, Theme } from '../types';
 export type LineDataItem = {
@@ -5,6 +6,6 @@ export type LineDataItem = {
     value: number;
     [key: string]: string | number;
 };
-export type LineProps = BasePlotProps<LineDataItem> & Theme & Style;
+export type LineProps = BasePlotProps<LineDataItem> & Partial<LineConfig> & Theme & Style;
 declare const Line: (props: LineProps) => React.JSX.Element;
 export default Line;

package/dist/cjs/Line/index.js

@@ -39,7 +39,7 @@ var import_hooks = require("../ConfigProvider/hooks");
 var import_theme = require("../theme");
 var defaultConfig = (props) => {
   const { data, xField = "time", yField = "value", style = {} } = props;
-  const { palette, lineWidth, backgroundColor } = style;
+  const { palette, lineWidth, backgroundColor, startAtZero = false } = style;
   const hasGroupField = (0, import_lodash.get)(data, "[0].group") !== void 0;
   const axisYTitle = (0, import_lodash.get)(props, "axis.y.title");
   const hasPalette = !!(palette == null ? void 0 : palette[0]);
@@ -72,7 +72,8 @@ var defaultConfig = (props) => {
     },
     scale: {
       y: {
-        nice: true
+        nice: true,
+        zero: startAtZero
       },
       ...paletteConfig
     },

package/dist/cjs/Scatter/index.d.ts

@@ -5,6 +5,9 @@ type ScatterDataItem = {
     y: number;
     [key: string]: string | number;
 };
-export type ScatterProps = BasePlotProps<ScatterDataItem> & Theme & Style;
+export type ScatterProps = BasePlotProps<ScatterDataItem> & Theme & Style & {
+    xField?: string;
+    yField?: string;
+};
 declare const Scatter: (props: ScatterProps) => React.JSX.Element;
 export default Scatter;

package/dist/cjs/Violin/index.js

@@ -38,7 +38,7 @@ var import_theme = require("../theme");
 var defaultConfig = (props) => {
   var _a;
   const { data, title, axisYTitle, axisXTitle, theme = "default", style = {} } = props;
-  const { backgroundColor, palette } = style;
+  const { backgroundColor, palette, startAtZero = false } = style;
   const hasGroupField = ((_a = (data || [])[0]) == null ? void 0 : _a.group) !== void 0;
   let encode = {};
   let children = [];
@@ -59,7 +59,8 @@ var defaultConfig = (props) => {
         encode,
         scale: {
           y: {
-            nice: true
+            nice: true,
+            zero: startAtZero
           },
           ...(palette == null ? void 0 : palette[0]) ? {
             color: {
@@ -82,7 +83,8 @@ var defaultConfig = (props) => {
         ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : {},
         scale: {
           y: {
-            nice: true
+            nice: true,
+            zero: startAtZero
           },
           ...(palette == null ? void 0 : palette[0]) ? {
             color: {
@@ -108,7 +110,8 @@ var defaultConfig = (props) => {
         encode,
         scale: {
           y: {
-            nice: true
+            nice: true,
+            zero: startAtZero
           }
         },
         ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : {},
@@ -126,7 +129,8 @@ var defaultConfig = (props) => {
         ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : {},
         scale: {
           y: {
-            nice: true
+            nice: true,
+            zero: startAtZero
           },
           ...(palette == null ? void 0 : palette[0]) ? {
             color: {
@@ -154,7 +158,8 @@ var defaultConfig = (props) => {
     children,
     scale: {
       y: {
-        nice: true
+        nice: true,
+        zero: startAtZero
       }
     },
     ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : {}

package/dist/cjs/Waterfall/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { BasePlotProps, Style, Theme } from '../types';
+type WaterfallDataItem = {
+    category: string;
+    value?: number;
+    isTotal?: boolean;
+    isIntermediateTotal?: boolean;
+    [key: string]: string | number | boolean | undefined;
+};
+type WaterfallStyle = {
+    backgroundColor?: string;
+} & Style;
+export type WaterfallProps = BasePlotProps<WaterfallDataItem> & Theme & {
+    style?: WaterfallStyle;
+    positiveColor?: string;
+    negativeColor?: string;
+    totalColor?: string;
+    axisXTitle?: string;
+    axisYTitle?: string;
+};
+declare const Waterfall: (props: WaterfallProps) => React.JSX.Element;
+export default Waterfall;

package/dist/cjs/Waterfall/index.js

@@ -0,0 +1,194 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Waterfall/index.tsx
+var Waterfall_exports = {};
+__export(Waterfall_exports, {
+  default: () => Waterfall_default
+});
+module.exports = __toCommonJS(Waterfall_exports);
+var import_g2 = require("@antv/g2");
+var import_react = __toESM(require("react"));
+var import_theme = require("../theme");
+var DEFAULT_POSITIVE_COLOR = "#FF4D4F";
+var DEFAULT_NEGATIVE_COLOR = "#2EBB59";
+var DEFAULT_TOTAL_COLOR = "#1783FF";
+function transformWaterfallData(data) {
+  let cumulative = 0;
+  let lastIntermediateTotalEnd = 0;
+  let totalSum = 0;
+  return data.map((item) => {
+    const value = item.value || 0;
+    let start;
+    let end;
+    if (item.isTotal) {
+      start = 0;
+      end = totalSum;
+    } else if (item.isIntermediateTotal) {
+      start = lastIntermediateTotalEnd;
+      end = cumulative;
+      lastIntermediateTotalEnd = end;
+    } else {
+      start = cumulative;
+      end = cumulative + value;
+      cumulative = end;
+      totalSum += value;
+    }
+    return {
+      ...item,
+      __start__: start,
+      __end__: end,
+      __value__: item.isTotal ? totalSum : item.isIntermediateTotal ? end - start : value
+    };
+  });
+}
+function generateLinkData(data) {
+  return data.reduce((result, current, index) => {
+    if (index > 0) {
+      const previous = data[index - 1];
+      result.push({
+        x: [previous.category, current.category],
+        y: current.isTotal || current.isIntermediateTotal ? current.__end__ : current.__start__
+      });
+    }
+    return result;
+  }, []);
+}
+var defaultConfig = (props) => {
+  const {
+    data = [],
+    title,
+    style = {},
+    positiveColor: customPositiveColor,
+    negativeColor: customNegativeColor,
+    totalColor: customTotalColor,
+    axisXTitle,
+    axisYTitle,
+    theme = "default"
+  } = props;
+  const { backgroundColor } = style;
+  const positiveColor = customPositiveColor || DEFAULT_POSITIVE_COLOR;
+  const negativeColor = customNegativeColor || DEFAULT_NEGATIVE_COLOR;
+  const totalColor = customTotalColor || DEFAULT_TOTAL_COLOR;
+  const transformedData = transformWaterfallData(data);
+  const linkData = generateLinkData(transformedData);
+  return {
+    type: "view",
+    theme: import_theme.THEME_MAP[theme],
+    title,
+    data: transformedData,
+    axis: {
+      y: {
+        labelFormatter: "~s",
+        title: axisYTitle || false
+      },
+      x: {
+        title: axisXTitle || false
+      }
+    },
+    children: [
+      {
+        type: "interval",
+        data: transformedData,
+        encode: { x: "category", y: ["__start__", "__end__"], color: "category" },
+        style: {
+          maxWidth: 60,
+          stroke: "#666",
+          radius: 4,
+          fill: (d) => {
+            return d.isTotal || d.isIntermediateTotal ? totalColor : d.__value__ > 0 ? positiveColor : negativeColor;
+          }
+        },
+        labels: [
+          {
+            text: "__value__",
+            position: "inside",
+            fontSize: 10,
+            transform: [{ type: "overflowHide" }],
+            formatter: "~s",
+            fill: "#000",
+            fontWeight: 600,
+            stroke: "#fff"
+          }
+        ],
+        tooltip: (d) => {
+          const tooltipName = axisYTitle || d["category"];
+          return {
+            name: tooltipName,
+            value: d["__value__"]
+          };
+        }
+      },
+      {
+        type: "link",
+        data: linkData,
+        encode: {
+          x: "x",
+          y: "y"
+        },
+        zIndex: -1,
+        style: {
+          stroke: "#ccc",
+          lineDash: [4, 2],
+          lineWidth: 1
+        },
+        tooltip: false
+      }
+    ],
+    scale: {
+      y: {
+        nice: true
+      }
+    },
+    legend: false,
+    ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : {}
+  };
+};
+var Waterfall = (props) => {
+  const containerRef = (0, import_react.useRef)(null);
+  const chartRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (!containerRef.current)
+      return;
+    const chart = new import_g2.Chart({
+      container: containerRef.current,
+      autoFit: true,
+      padding: "auto"
+    });
+    const config = defaultConfig(props);
+    chart.options(config);
+    chart.render();
+    chartRef.current = chart;
+    return () => {
+      chart.destroy();
+      chartRef.current = null;
+    };
+  }, [props]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref: containerRef });
+};
+var Waterfall_default = Waterfall;

package/dist/cjs/export.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ChartType } from './types';
 /********** plot chart **********/
 import { default as Area, type AreaProps } from './Area';
 import { default as Bar, type BarProps } from './Bar';
@@ -16,6 +17,7 @@ import { default as Scatter, type ScatterProps } from './Scatter';
 import { default as Treemap, type TreemapProps } from './Treemap';
 import { default as Venn, type VennProps } from './Venn';
 import { default as Violin, type ViolinProps } from './Violin';
+import { default as Waterfall, type WaterfallProps } from './Waterfall';
 import { default as WordCloud, type WordCloudProps } from './WordCloud';
 /********** graph chart **********/
 import { default as FishboneDiagram, type FishboneDiagramProps } from './FishboneDiagram';
@@ -30,5 +32,43 @@ import { PinMap, type PinMapProps, HeatMap, type HeatMapProps, PathMap, type Pat
 /********** NTV **********/
 import { default as Table, type TableProps } from './Table';
 export { VisText, type VisTextProps } from './Text';
-export { Area, Bar, Boxplot, Column, DualAxes, FishboneDiagram, FlowDiagram, Funnel, HeatMap, Histogram, IndentedTree, Line, Liquid, MindMap, NetworkGraph, OrganizationChart, PathMap, Pie, PinMap, Radar, Sankey, Scatter, Treemap, Venn, Violin, Table, WordCloud, type AreaProps, type BarProps, type BoxplotProps, type ColumnProps, type DualAxesProps, type FishboneDiagramProps, type FlowDiagramProps, type FunnelProps, type HeatMapProps, type HistogramProps, type IndentedTreeProps, type LineProps, type LiquidProps, type MindMapProps, type NetworkGraphProps, type OrganizationChartProps, type PathMapProps, type PieProps, type PinMapProps, type RadarProps, type SankeyProps, type ScatterProps, type TreemapProps, type VennProps, type ViolinProps, type TableProps, type WordCloudProps, };
+export { Area, Bar, Boxplot, Column, DualAxes, FishboneDiagram, FlowDiagram, Funnel, HeatMap, Histogram, IndentedTree, Line, Liquid, MindMap, NetworkGraph, OrganizationChart, PathMap, Pie, PinMap, Radar, Sankey, Scatter, Treemap, Venn, Violin, Waterfall, Table, WordCloud, type AreaProps, type BarProps, type BoxplotProps, type ColumnProps, type DualAxesProps, type FishboneDiagramProps, type FlowDiagramProps, type FunnelProps, type HeatMapProps, type HistogramProps, type IndentedTreeProps, type LineProps, type LiquidProps, type MindMapProps, type NetworkGraphProps, type OrganizationChartProps, type PathMapProps, type PieProps, type PinMapProps, type RadarProps, type SankeyProps, type ScatterProps, type TreemapProps, type VennProps, type ViolinProps, type WaterfallProps, type TableProps, type WordCloudProps, };
+export type VisOptionMap = {
+    [ChartType.Area]: AreaProps;
+    [ChartType.Bar]: BarProps;
+    [ChartType.Boxplot]: BoxplotProps;
+    [ChartType.Column]: ColumnProps;
+    [ChartType.DualAxes]: DualAxesProps;
+    [ChartType.FishboneDiagram]: FishboneDiagramProps;
+    [ChartType.FlowDiagram]: FlowDiagramProps;
+    [ChartType.Funnel]: FunnelProps;
+    [ChartType.HeatMap]: HeatMapProps;
+    [ChartType.Histogram]: HistogramProps;
+    [ChartType.IndentedTree]: IndentedTreeProps;
+    [ChartType.Line]: LineProps;
+    [ChartType.Liquid]: LiquidProps;
+    [ChartType.MindMap]: MindMapProps;
+    [ChartType.NetworkGraph]: NetworkGraphProps;
+    [ChartType.OrganizationChart]: OrganizationChartProps;
+    [ChartType.PathMap]: PathMapProps;
+    [ChartType.Pie]: PieProps;
+    [ChartType.PinMap]: PinMapProps;
+    [ChartType.Radar]: RadarProps;
+    [ChartType.Sankey]: SankeyProps;
+    [ChartType.Scatter]: ScatterProps;
+    [ChartType.Table]: TableProps;
+    [ChartType.Treemap]: TreemapProps;
+    [ChartType.Venn]: VennProps;
+    [ChartType.Violin]: ViolinProps;
+    [ChartType.Waterfall]: WaterfallProps;
+    [ChartType.WordCloud]: WordCloudProps;
+};
+/**
+ * 所有的 Vis 类型的类型定义
+ */
+export type Spec = {
+    [K in keyof VisOptionMap]: {
+        type: K;
+    } & VisOptionMap[K];
+}[keyof VisOptionMap];
 export declare const DEFAULT_CHART_COMPONENTS: Record<string, React.FC<any>>;

package/dist/cjs/export.js

@@ -58,6 +58,7 @@ __export(export_exports, {
   Venn: () => import_Venn.default,
   Violin: () => import_Violin.default,
   VisText: () => import_Text.VisText,
+  Waterfall: () => import_Waterfall.default,
   WordCloud: () => import_WordCloud.default
 });
 module.exports = __toCommonJS(export_exports);
@@ -78,6 +79,7 @@ var import_Scatter = __toESM(require("./Scatter"));
 var import_Treemap = __toESM(require("./Treemap"));
 var import_Venn = __toESM(require("./Venn"));
 var import_Violin = __toESM(require("./Violin"));
+var import_Waterfall = __toESM(require("./Waterfall"));
 var import_WordCloud = __toESM(require("./WordCloud"));
 var import_FishboneDiagram = __toESM(require("./FishboneDiagram"));
 var import_FlowDiagram = __toESM(require("./FlowDiagram"));
@@ -113,6 +115,7 @@ var DEFAULT_CHART_COMPONENTS = {
   [import_types.ChartType.Treemap]: import_Treemap.default,
   [import_types.ChartType.Venn]: import_Venn.default,
   [import_types.ChartType.Violin]: import_Violin.default,
+  [import_types.ChartType.Waterfall]: import_Waterfall.default,
   [import_types.ChartType.Table]: import_Table.default,
   [import_types.ChartType.WordCloud]: import_WordCloud.default,
   [import_types.ChartType.OrganizationChart]: import_OrganizationChart.default
@@ -148,5 +151,6 @@ var DEFAULT_CHART_COMPONENTS = {
   Venn,
   Violin,
   VisText,
+  Waterfall,
   WordCloud
 });

package/dist/cjs/index.d.ts

@@ -2,6 +2,8 @@
 export * from './export';
 /********** export types **********/
 export * from './types';
+/********** export render **********/
+export * from './render';
 /********** export GPTVis **********/
 export { withChartCode, withDefaultChartCode } from './ChartCodeRender';
 export type { CodeBlockComponent, ErrorRender, WithChartCodeOptions } from './ChartCodeRender/type';

package/dist/cjs/index.js

@@ -41,6 +41,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("./export"), module.exports);
 __reExport(src_exports, require("./types"), module.exports);
+__reExport(src_exports, require("./render"), module.exports);
 var import_ChartCodeRender = require("./ChartCodeRender");
 var import_ConfigProvider = __toESM(require("./ConfigProvider"));
 var import_GPTVis = __toESM(require("./GPTVis"));
@@ -56,5 +57,6 @@ var import_version = __toESM(require("./version"));
   withChartCode,
   withDefaultChartCode,
   ...require("./export"),
-  ...require("./types")
+  ...require("./types"),
+  ...require("./render")
 });

package/dist/cjs/render.d.ts

@@ -0,0 +1,2 @@
+import { type Spec } from './export';
+export declare function render(container: string, spec: Spec): void;

package/dist/cjs/render.js

@@ -0,0 +1,67 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/render.tsx
+var render_exports = {};
+__export(render_exports, {
+  render: () => render
+});
+module.exports = __toCommonJS(render_exports);
+var import_react = __toESM(require("react"));
+var import_react_dom = __toESM(require("react-dom"));
+var import_export = require("./export");
+var roots = /* @__PURE__ */ new Map();
+function getRoot(container) {
+  if (roots.has(container)) {
+    return roots.get(container);
+  }
+  const root = import_react_dom.default.createRoot(container);
+  roots.set(container, root);
+  return root;
+}
+function render(container, spec) {
+  const mount = typeof container === "string" ? document.querySelector(container) : container;
+  if (!mount)
+    throw new Error("Target container not found: " + container);
+  const { type, ...chartProps } = spec;
+  const ChartComp = import_export.DEFAULT_CHART_COMPONENTS[type];
+  if (!ChartComp) {
+    throw new Error(`Unknown chart type: ${type}`);
+  }
+  const chartElement = import_react.default.createElement(ChartComp, chartProps);
+  if (import_react_dom.default.createRoot) {
+    const root = getRoot(mount);
+    root.render(chartElement);
+  } else {
+    import_react_dom.default.render(chartElement, mount);
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  render
+});

package/dist/cjs/types/chart.d.ts

@@ -28,6 +28,7 @@ export declare enum ChartType {
     Treemap = "treemap",
     Venn = "venn",
     Violin = "violin",
+    Waterfall = "waterfall",
     Table = "table",
     VisText = "vis-text",
     WordCloud = "word-cloud"
@@ -81,5 +82,6 @@ export interface Style {
         lineWidth?: number;
         backgroundColor?: string;
         palette?: string[];
+        startAtZero?: boolean;
     };
 }

package/dist/cjs/types/chart.js

@@ -48,6 +48,7 @@ var ChartType = /* @__PURE__ */ ((ChartType2) => {
   ChartType2["Treemap"] = "treemap";
   ChartType2["Venn"] = "venn";
   ChartType2["Violin"] = "violin";
+  ChartType2["Waterfall"] = "waterfall";
   ChartType2["Table"] = "table";
   ChartType2["VisText"] = "vis-text";
   ChartType2["WordCloud"] = "word-cloud";