@wavemaker-ai/react-runtime 1.0.0-rc.309

package/components/chart/index.d.ts

@@ -0,0 +1,129 @@
+import React from "react";
+import type { WmChartProps } from "./props";
+export declare const WmChart: React.FC<WmChartProps>;
+/**
+ * The WmChart component renders various chart types including Column, Bar, Line, Area,
+ * Pie, Donut, Bubble, and Cumulative Line charts using D3 + NVD3 via @wavemaker/react-charts.
+ *
+ * @param props - {@link WmChartProps}
+ */
+declare const _default: React.ComponentType<{
+    title?: string;
+    type: import("./props").TChartType;
+    subheading?: string;
+    datavalue?: any;
+    groupby?: string;
+    aggregation?: string;
+    aggregationcolumn?: string;
+    orderby?: string;
+    xaxisdatakey?: string;
+    xaxislabel?: string;
+    xnumberformat?: string;
+    xdigits?: number;
+    xdateformat?: string;
+    xaxislabeldistance?: number;
+    xunits?: string;
+    yaxisdatakey?: string;
+    yaxislabel?: string;
+    ynumberformat?: string;
+    ydigits?: number;
+    yaxislabeldistance?: number;
+    yunits?: string;
+    iconclass?: string;
+    nodatamessage?: string;
+    loadingdatamsg?: string;
+    tooltips?: boolean;
+    showlegend?: string;
+    showlabels?: import("./props").TChartShowValues;
+    showlabelsoutside?: boolean;
+    showvalues?: boolean;
+    staggerlabels?: boolean;
+    reducexticks?: boolean;
+    labeltype?: import("./props").TChartValuesDisplay;
+    barspacing?: string;
+    donutratio?: string;
+    bubblesize?: string;
+    showxdistance?: boolean;
+    showydistance?: boolean;
+    areaviewtype?: string;
+    interpolation?: import("./props").TChartInterpolation;
+    centerlabel?: string;
+    customcolors?: string[] | string;
+    theme?: string;
+    offset?: string;
+    offsettop?: number;
+    offsetbottom?: number;
+    offsetright?: number;
+    offsetleft?: number;
+    showxaxis?: boolean;
+    showyaxis?: boolean;
+    linethickness?: string;
+    highlightpoints?: boolean;
+    formattype?: string;
+    dataset?: any;
+    datasource?: unknown;
+    width?: string;
+    height?: string;
+    shape?: import("./props").TBubbleChartShape;
+    deferload?: boolean;
+    xdomain?: string;
+    ydomain?: string;
+    labelthreshold?: number;
+    legendtype?: import("./props").TChartLegendType;
+    viewtype?: import("./props").TChartViewType;
+    fontsize?: string;
+    fontunit?: string;
+    color?: string;
+    fontfamily?: string;
+    fontweight?: string;
+    fontstyle?: string;
+    textdecoration?: string;
+    show?: boolean;
+    styles?: React.CSSProperties;
+    onSelect?: (event: React.MouseEvent | unknown, widget: import("./props").ChartProps & import("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper").BaseProps, selectedItem: Record<string, unknown>, selectedChartItem: import("./props").SelectedChartItem | unknown[]) => void;
+    onTransform?: (event: React.MouseEvent, widget: import("./props").ChartProps & import("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper").BaseProps) => import("./props").ChartDataset | void;
+    onBeforerender?: (widget: import("./props").ChartProps & import("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper").BaseProps, chartInstance: () => void) => void;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    padding?: string;
+    margin?: string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    id?: string;
+    name?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    "item-id"?: string;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    prefabName?: string;
+}>;
+export default _default;

package/components/chart/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmChart = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
+var _isArray = _interopRequireDefault(require("lodash-es/isArray"));
+var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
+var _src = require("./src");
+var _props = require("./props");
+var __jsx = _react["default"].createElement;
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var WmChart = exports.WmChart = /*#__PURE__*/_react["default"].memo(function (Props) {
+  var props = _objectSpread(_objectSpread({}, _props.DEFAULT_PROPS), Props);
+  // @ts-ignore
+  return __jsx(_src.WmChart, props);
+}, function (prev, next) {
+  var _iterator = _createForOfIteratorHelper(_props.CHART_RENDER_PROPS),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var key = _step.value;
+      var prevVal = prev[key];
+      var nextVal = next[key];
+      if (key === "dataset") {
+        if (prevVal === nextVal) continue; // Same reference - skip comparison
+        if ((0, _isArray["default"])(prevVal) && (0, _isArray["default"])(nextVal) && prevVal.length !== nextVal.length) return false;
+        if (prevVal !== nextVal) return false;
+      } else if (key === "styles") {
+        // styles is an object - use deep compare (parent passes inline {} each render)
+        if (!(0, _isEqual["default"])(prevVal, nextVal)) return false;
+      } else if (prevVal !== nextVal) {
+        return false;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return true;
+});
+
+/**
+ * The WmChart component renders various chart types including Column, Bar, Line, Area,
+ * Pie, Donut, Bubble, and Cumulative Line charts using D3 + NVD3 via @wavemaker/react-charts.
+ *
+ * @param props - {@link WmChartProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmChart);

package/components/chart/props.d.ts

@@ -0,0 +1,188 @@
+import type React from "react";
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/** Chart type options */
+export type TChartType = "Line" | "Bar" | "Column" | "Pie" | "Donut" | "Bubble" | "Area" | "Cumulative Line";
+/** Legend position options */
+export type TChartLegendPosition = "top" | "bottom" | "right" | "hide";
+/** Legend display type */
+export type TChartLegendType = "classic" | "furious";
+/** Bubble chart shape options */
+export type TBubbleChartShape = "circle" | "cross" | "diamond" | "square" | "triangle-up" | "triangle-down" | "random";
+/** Line interpolation type */
+export type TChartInterpolation = "linear" | "step" | "cardinal";
+/** Bar/Column chart view type */
+export type TChartViewType = "Stacked" | "Grouped";
+/** Show values position for labels */
+export type TChartShowValues = "hide" | "inside" | "outside";
+/** Label display format for pie/donut */
+export type TChartValuesDisplay = "key" | "percent" | "value" | "key-value";
+/** Chart dataset - array of objects or object with labels/values arrays */
+export type ChartDataset = Record<string, unknown>[] | Record<string, unknown>;
+/** Selected chart item passed to onSelect callback */
+export interface SelectedChartItem {
+    key?: string;
+    series?: number;
+    seriesIndex?: number;
+    x?: string | number;
+    y?: number;
+    _dataObj?: Record<string, unknown>;
+    data?: [number, number][];
+    point?: number;
+}
+/** Chart widget props - extends BaseProps (id, name, prefabName come from BaseProps) */
+export interface ChartProps {
+    /** Chart title displayed in panel header */
+    title?: string;
+    /** Chart type */
+    type: TChartType;
+    /** Subheading below title */
+    subheading?: string;
+    /** Data value binding path */
+    datavalue?: string;
+    /** Column(s) to group data by */
+    groupby?: string;
+    /** Aggregation function: none, sum, average, count, min, max */
+    aggregation?: string;
+    /** Column to apply aggregation on */
+    aggregationcolumn?: string;
+    /** Order by expression */
+    orderby?: string;
+    /** X-axis data key (comma-separated for multiple) */
+    xaxisdatakey?: string;
+    /** X-axis label text */
+    xaxislabel?: string;
+    /** X-axis number format */
+    xnumberformat?: string;
+    /** X-axis decimal digits */
+    xdigits?: number;
+    /** X-axis date format */
+    xdateformat?: string;
+    /** Distance of x-axis label from axis */
+    xaxislabeldistance?: number;
+    /** X-axis units suffix */
+    xunits?: string;
+    /** Y-axis data key (comma-separated for multiple series) */
+    yaxisdatakey?: string;
+    /** Y-axis label text */
+    yaxislabel?: string;
+    /** Y-axis number format */
+    ynumberformat?: string;
+    /** Y-axis decimal digits */
+    ydigits?: number;
+    /** Distance of y-axis label from axis */
+    yaxislabeldistance?: number;
+    /** Y-axis units suffix */
+    yunits?: string;
+    /** Icon class for panel header */
+    iconclass?: string;
+    /** Message when no data is available */
+    nodatamessage?: string;
+    /** Message shown during data loading */
+    loadingdatamsg?: string;
+    /** Show tooltips on hover */
+    tooltips?: boolean;
+    /** Legend position: top, bottom, right, hide */
+    showlegend?: string;
+    /** Label position for pie/donut: hide, inside, outside */
+    showlabels?: TChartShowValues;
+    /** Show labels outside (legacy) */
+    showlabelsoutside?: boolean;
+    /** Show values on bars/columns */
+    showvalues?: boolean;
+    /** Stagger x-axis labels to avoid overlap */
+    staggerlabels?: boolean;
+    /** Reduce number of x-axis ticks */
+    reducexticks?: boolean;
+    /** Label format for pie/donut: key, percent, value, key-value */
+    labeltype?: TChartValuesDisplay;
+    /** Bar spacing: 0.3, 0.5, 0.8 or small, medium, large */
+    barspacing?: string;
+    /** Donut inner radius: small, medium, large */
+    donutratio?: string;
+    /** Bubble size data key */
+    bubblesize?: string;
+    /** Show x-axis tick lines */
+    showxdistance?: boolean;
+    /** Show y-axis tick lines */
+    showydistance?: boolean;
+    /** Area chart stack offset type */
+    areaviewtype?: string;
+    /** Line interpolation: linear, step, cardinal */
+    interpolation?: TChartInterpolation;
+    /** Center label for donut chart */
+    centerlabel?: string;
+    /** Custom colors array or comma-separated string */
+    customcolors?: string[] | string;
+    /** Theme name for default colors */
+    theme?: string;
+    /** Chart offset */
+    offset?: string;
+    /** Top offset */
+    offsettop?: number;
+    /** Bottom offset */
+    offsetbottom?: number;
+    /** Right offset */
+    offsetright?: number;
+    /** Left offset */
+    offsetleft?: number;
+    /** Show x-axis */
+    showxaxis?: boolean;
+    /** Show y-axis */
+    showyaxis?: boolean;
+    /** Line thickness for line/area charts */
+    linethickness?: string;
+    /** Highlight data points on line/area charts */
+    highlightpoints?: boolean;
+    /** Format type for numbers */
+    formattype?: string;
+    /** Chart dataset - array of objects */
+    dataset?: ChartDataset;
+    /** Datasource for server-side data */
+    datasource?: unknown;
+    /** Chart width */
+    width?: string;
+    /** Chart height */
+    height?: string;
+    /** Bubble shape: circle, cross, diamond, square, triangle-up, triangle-down, random */
+    shape?: TBubbleChartShape;
+    /** Defer chart loading */
+    deferload?: boolean;
+    /** X-axis domain */
+    xdomain?: string;
+    /** Y-axis domain */
+    ydomain?: string;
+    /** Minimum percent to show pie label */
+    labelthreshold?: number;
+    /** Legend style: classic, furious */
+    legendtype?: TChartLegendType;
+    /** Bar/Column view: Stacked, Grouped */
+    viewtype?: TChartViewType;
+    /** Font size */
+    fontsize?: string;
+    /** Font unit (px, em, etc.) */
+    fontunit?: string;
+    /** Text color */
+    color?: string;
+    /** Font family */
+    fontfamily?: string;
+    /** Font weight */
+    fontweight?: string;
+    /** Font style */
+    fontstyle?: string;
+    /** Text decoration */
+    textdecoration?: string;
+    /** Whether to show the chart */
+    show?: boolean;
+    /** Inline styles */
+    styles?: React.CSSProperties;
+    /** Callback when chart data point is selected */
+    onSelect?: (event: React.MouseEvent | unknown, widget: ChartProps & BaseProps, selectedItem: Record<string, unknown>, selectedChartItem: SelectedChartItem | unknown[]) => void;
+    /** Callback to transform data before rendering */
+    onTransform?: (event: React.MouseEvent, widget: ChartProps & BaseProps) => ChartDataset | void;
+    /** Callback before chart render */
+    onBeforerender?: (widget: ChartProps & BaseProps, chartInstance: () => void) => void;
+}
+/** Combined props for WmChart - includes BaseProps (id, name, prefabName, className, etc.) */
+export type WmChartProps = Prettify<ChartProps & BaseProps>;
+export declare const DEFAULT_PROPS: WmChartProps;
+export declare const CHART_RENDER_PROPS: (keyof WmChartProps)[];

package/components/chart/props.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_PROPS = exports.CHART_RENDER_PROPS = void 0;
+// Internal chart data types
+
+/** Chart type options */
+
+/** Legend position options */
+
+/** Legend display type */
+
+/** Bubble chart shape options */
+
+/** Line interpolation type */
+
+/** Bar/Column chart view type */
+
+/** Show values position for labels */
+
+/** Label display format for pie/donut */
+
+/** Chart dataset - array of objects or object with labels/values arrays */
+
+/** Selected chart item passed to onSelect callback */
+
+/** Chart widget props - extends BaseProps (id, name, prefabName come from BaseProps) */
+
+/** Combined props for WmChart - includes BaseProps (id, name, prefabName, className, etc.) */
+
+var DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+  type: "Column",
+  aggregation: "none",
+  xaxislabeldistance: 12,
+  yaxislabeldistance: 12,
+  labeltype: "percent",
+  barspacing: "medium",
+  donutratio: "medium",
+  viewtype: "Grouped",
+  interpolation: "linear",
+  centerlabel: "",
+  customcolors: [],
+  theme: "Azure",
+  offsettop: 25,
+  offsetbottom: 55,
+  offsetright: 25,
+  offsetleft: 75,
+  showxaxis: true,
+  showyaxis: true,
+  showxdistance: false,
+  showydistance: false,
+  linethickness: "1",
+  highlightpoints: false,
+  formattype: "number",
+  dataset: [],
+  datasource: null,
+  height: "210px",
+  shape: "circle",
+  onSelect: function onSelect() {},
+  onTransform: function onTransform() {},
+  onBeforerender: function onBeforerender() {},
+  xdomain: "Default",
+  ydomain: "Default",
+  labelthreshold: 0.01,
+  legendtype: "furious",
+  nodatamessage: "No Data Available.",
+  loadingdatamsg: "Loading...",
+  tooltips: true,
+  showlegend: "top",
+  showlabelsoutside: true,
+  showvalues: false,
+  staggerlabels: false,
+  reducexticks: true,
+  showlabels: "outside",
+  areaviewtype: "stack",
+  show: true,
+  hidden: false
+};
+var CHART_RENDER_PROPS = exports.CHART_RENDER_PROPS = ["dataset", "datasource", "type", "xaxisdatakey", "yaxisdatakey", "groupby", "orderby", "aggregation", "aggregationcolumn", "customcolors", "theme", "showlegend", "showlabels", "donutratio", "styles", "show", "hidden", "className"];

package/components/chart/src/ChartRenderer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { WidgetContext, WmChartProps } from "./types";
+interface ChartRendererProps {
+    chartId: string;
+    processedData: any[];
+    widgetContext: WidgetContext;
+    chartDataLength: number;
+    binddataset: boolean;
+    onSelect?: WmChartProps["onSelect"];
+    onBeforerender?: WmChartProps["onBeforerender"];
+    props: WmChartProps;
+}
+declare const ChartRenderer: React.FC<ChartRendererProps>;
+export default ChartRenderer;