@wavemaker-ai/react-runtime 1.0.0-rc.647502 → 1.0.0-rc.647565

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

@@ -9,6 +9,19 @@ export declare const themes: Record<string, {
     };
 }>;
 export declare const basicProperties: string[];
+/** Default axis-chart offsets from `DEFAULT_PROPS` — must not apply to pie/donut plots. */
+export declare const AXIS_CHART_DEFAULT_OFFSETS: {
+    readonly offsettop: 25;
+    readonly offsetright: 25;
+    readonly offsetbottom: 55;
+    readonly offsetleft: 75;
+};
+export declare const PIE_CHART_DEFAULT_OFFSETS: {
+    readonly offsettop: 20;
+    readonly offsetright: 0;
+    readonly offsetbottom: 0;
+    readonly offsetleft: 0;
+};
 export declare const barSpacingMap: Record<string, number>;
 export declare const donutRatioMap: Record<string, number>;
 export declare const barSpacingMapInvert: import("lodash").Dictionary<string>;

package/components/chart/src/constants.js

@@ -1,117 +1,320 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.tickformats = exports.themes = exports.styleProps = exports.lineTypeCharts = exports.donutRatioMapInvert = exports.donutRatioMap = exports.dateList = exports.dataTypeJSON = exports.dataTypeArray = exports.chartTypes = exports.chartDataPointXpath = exports.basicProperties = exports.barSpacingMapInvert = exports.barSpacingMap = exports.allShapes = exports.aggregationFnMap = exports.SAMPLE_DATA = exports.PREVIEW_CHART_ID = exports.NONE = void 0;
-var _lodashEs = require("lodash-es");
-var chartTypes = exports.chartTypes = ["Column", "Line", "Area", "Cumulative Line", "Bar", "Pie", "Donut", "Bubble"];
-var allShapes = exports.allShapes = ["circle", "square", "diamond", "cross", "triangle-up", "triangle-down"];
-var dateList = exports.dateList = ["01/01/2001", "01/01/2002", "01/01/2003"];
-var themes = exports.themes = {
+import { invert } from "lodash-es";
+const chartTypes = [
+  "Column",
+  "Line",
+  "Area",
+  "Cumulative Line",
+  "Bar",
+  "Pie",
+  "Donut",
+  "Bubble"
+];
+const allShapes = ["circle", "square", "diamond", "cross", "triangle-up", "triangle-down"];
+const dateList = ["01/01/2001", "01/01/2002", "01/01/2003"];
+const themes = {
   Terrestrial: {
-    colors: ["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"],
-    tooltip: {
-      backgroundColor: "#de7d28",
-      textColor: "#FFFFFF"
-    }
+    colors: [
+      "#1f77b4",
+      "#aec7e8",
+      "#ff7f0e",
+      "#ffbb78",
+      "#2ca02c",
+      "#98df8a",
+      "#d62728",
+      "#ff9896",
+      "#9467bd",
+      "#c5b0d5",
+      "#8c564b",
+      "#c49c94",
+      "#e377c2",
+      "#f7b6d2",
+      "#7f7f7f",
+      "#c7c7c7",
+      "#bcbd22",
+      "#dbdb8d",
+      "#17becf",
+      "#9edae5"
+    ],
+    tooltip: { backgroundColor: "#de7d28", textColor: "#FFFFFF" }
   },
   Annabelle: {
-    colors: ["#393b79", "#5254a3", "#6b6ecf", "#9c9ede", "#637939", "#8ca252", "#b5cf6b", "#cedb9c", "#8c6d31", "#bd9e39", "#e7ba52", "#e7cb94", "#843c39", "#ad494a", "#d6616b", "#e7969c", "#7b4173", "#a55194", "#ce6dbd", "#de9ed6"],
-    tooltip: {
-      backgroundColor: "#2e306f",
-      textColor: "#FFFFFF"
-    }
+    colors: [
+      "#393b79",
+      "#5254a3",
+      "#6b6ecf",
+      "#9c9ede",
+      "#637939",
+      "#8ca252",
+      "#b5cf6b",
+      "#cedb9c",
+      "#8c6d31",
+      "#bd9e39",
+      "#e7ba52",
+      "#e7cb94",
+      "#843c39",
+      "#ad494a",
+      "#d6616b",
+      "#e7969c",
+      "#7b4173",
+      "#a55194",
+      "#ce6dbd",
+      "#de9ed6"
+    ],
+    tooltip: { backgroundColor: "#2e306f", textColor: "#FFFFFF" }
   },
   Azure: {
-    colors: ["#3182bd", "#6baed6", "#9ecae1", "#c6dbef", "#e6550d", "#fd8d3c", "#fdae6b", "#fdd0a2", "#31a354", "#74c476", "#a1d99b", "#c7e9c0", "#756bb1", "#9e9ac8", "#bcbddc", "#dadaeb", "#636363", "#969696", "#bdbdbd", "#d9d9d9"],
-    tooltip: {
-      backgroundColor: "#3182bd",
-      textColor: "#FFFFFF"
-    }
+    colors: [
+      "#3182bd",
+      "#6baed6",
+      "#9ecae1",
+      "#c6dbef",
+      "#e6550d",
+      "#fd8d3c",
+      "#fdae6b",
+      "#fdd0a2",
+      "#31a354",
+      "#74c476",
+      "#a1d99b",
+      "#c7e9c0",
+      "#756bb1",
+      "#9e9ac8",
+      "#bcbddc",
+      "#dadaeb",
+      "#636363",
+      "#969696",
+      "#bdbdbd",
+      "#d9d9d9"
+    ],
+    tooltip: { backgroundColor: "#3182bd", textColor: "#FFFFFF" }
   },
   Retro: {
-    colors: ["#0ca7a1", "#ffa615", "#334957", "#acc5c2", "#988f90", "#8accc9", "#515151", "#f27861", "#36c9fd", "#794668", "#0f709d", "#0d2738", "#44be78", "#4a1839", "#6a393f", "#557d8b", "#6c331c", "#1c1c1c", "#861500", "#09562a"],
-    tooltip: {
-      backgroundColor: "#80513a",
-      textColor: "#FFFFFF"
-    }
+    colors: [
+      "#0ca7a1",
+      "#ffa615",
+      "#334957",
+      "#acc5c2",
+      "#988f90",
+      "#8accc9",
+      "#515151",
+      "#f27861",
+      "#36c9fd",
+      "#794668",
+      "#0f709d",
+      "#0d2738",
+      "#44be78",
+      "#4a1839",
+      "#6a393f",
+      "#557d8b",
+      "#6c331c",
+      "#1c1c1c",
+      "#861500",
+      "#09562a"
+    ],
+    tooltip: { backgroundColor: "#80513a", textColor: "#FFFFFF" }
   },
   Mellow: {
-    colors: ["#f0dcbf", "#88c877", "#aeb918", "#2e2c23", "#ddddd2", "#dfe956", "#4c963b", "#5d3801", "#e1eec3", "#cd8472", "#fcfab3", "#9a4635", "#9295ad", "#2e3f12", "#565677", "#557d8b", "#4f4d02", "#0c0c1b", "#833324", "#24120e"],
-    tooltip: {
-      backgroundColor: "#7c9e73",
-      textColor: "#FFFFFF"
-    }
+    colors: [
+      "#f0dcbf",
+      "#88c877",
+      "#aeb918",
+      "#2e2c23",
+      "#ddddd2",
+      "#dfe956",
+      "#4c963b",
+      "#5d3801",
+      "#e1eec3",
+      "#cd8472",
+      "#fcfab3",
+      "#9a4635",
+      "#9295ad",
+      "#2e3f12",
+      "#565677",
+      "#557d8b",
+      "#4f4d02",
+      "#0c0c1b",
+      "#833324",
+      "#24120e"
+    ],
+    tooltip: { backgroundColor: "#7c9e73", textColor: "#FFFFFF" }
   },
   Orient: {
-    colors: ["#a80000", "#cc6c3c", "#f0e400", "#000084", "#fccc6c", "#009c6c", "#cc309c", "#78cc00", "#fc84e4", "#48e4fc", "#4878d8", "#186c0c", "#606060", "#a8a8a8", "#000000", "#d7d7d7", "#75a06e", "#190d0b", "#888888", "#694b84"],
-    tooltip: {
-      backgroundColor: "#c14242",
-      textColor: "#FFFFFF"
-    }
+    colors: [
+      "#a80000",
+      "#cc6c3c",
+      "#f0e400",
+      "#000084",
+      "#fccc6c",
+      "#009c6c",
+      "#cc309c",
+      "#78cc00",
+      "#fc84e4",
+      "#48e4fc",
+      "#4878d8",
+      "#186c0c",
+      "#606060",
+      "#a8a8a8",
+      "#000000",
+      "#d7d7d7",
+      "#75a06e",
+      "#190d0b",
+      "#888888",
+      "#694b84"
+    ],
+    tooltip: { backgroundColor: "#c14242", textColor: "#FFFFFF" }
   },
   GrayScale: {
-    colors: ["#141414", "#353535", "#5b5b5b", "#848484", "#a8a8a8", "#c3c3c3", "#e0e0e0", "#c8c8c8", "#a5a5a5", "#878787", "#656565", "#4e4e4e", "#303030", "#1c1c1c", "#4f4f4f", "#3b3b3b", "#757575", "#606060", "#868686", "#c1c1c1"],
-    tooltip: {
-      backgroundColor: "#575757",
-      textColor: "#FFFFFF"
-    }
+    colors: [
+      "#141414",
+      "#353535",
+      "#5b5b5b",
+      "#848484",
+      "#a8a8a8",
+      "#c3c3c3",
+      "#e0e0e0",
+      "#c8c8c8",
+      "#a5a5a5",
+      "#878787",
+      "#656565",
+      "#4e4e4e",
+      "#303030",
+      "#1c1c1c",
+      "#4f4f4f",
+      "#3b3b3b",
+      "#757575",
+      "#606060",
+      "#868686",
+      "#c1c1c1"
+    ],
+    tooltip: { backgroundColor: "#575757", textColor: "#FFFFFF" }
   },
   Flyer: {
-    colors: ["#3f454c", "#5a646e", "#848778", "#cededf", "#74c4dd", "#0946ed", "#380bb1", "#000ff0", "#f54a23", "#1db262", "#bca3aa", "#ffa500", "#a86b32", "#63a18c", "#56795e", "#934343", "#b75f5f", "#752d2d", "#4e1111", "#920606"],
-    tooltip: {
-      backgroundColor: "#47637c",
-      textColor: "#FFFFFF"
-    }
+    colors: [
+      "#3f454c",
+      "#5a646e",
+      "#848778",
+      "#cededf",
+      "#74c4dd",
+      "#0946ed",
+      "#380bb1",
+      "#000ff0",
+      "#f54a23",
+      "#1db262",
+      "#bca3aa",
+      "#ffa500",
+      "#a86b32",
+      "#63a18c",
+      "#56795e",
+      "#934343",
+      "#b75f5f",
+      "#752d2d",
+      "#4e1111",
+      "#920606"
+    ],
+    tooltip: { backgroundColor: "#47637c", textColor: "#FFFFFF" }
   },
   Luminosity: {
-    colors: ["#FFFFFF", "#e4e4e4", "#00bcd4", "#f0dd2f", "#00aabf", "#018376", "#e91e63", "#39e5d4", "#ff6d6d", "#00ff76", "#ff9800", "#969696", "#ff4200", "#e00000", "#95cbe5", "#5331ff", "#fff4a7", "#e7a800", "#0061e4", "#d5e7ff"],
-    tooltip: {
-      backgroundColor: "#47637c",
-      textColor: "#FFFFFF"
-    }
+    colors: [
+      "#FFFFFF",
+      "#e4e4e4",
+      "#00bcd4",
+      "#f0dd2f",
+      "#00aabf",
+      "#018376",
+      "#e91e63",
+      "#39e5d4",
+      "#ff6d6d",
+      "#00ff76",
+      "#ff9800",
+      "#969696",
+      "#ff4200",
+      "#e00000",
+      "#95cbe5",
+      "#5331ff",
+      "#fff4a7",
+      "#e7a800",
+      "#0061e4",
+      "#d5e7ff"
+    ],
+    tooltip: { backgroundColor: "#47637c", textColor: "#FFFFFF" }
   }
 };
-var basicProperties = exports.basicProperties = ["xaxislabel", "yaxislabel", "xunits", "yunits", "xnumberformat", "xdateformat", "ynumberformat", "showvalues", "showlabels", "viewtype", "areaviewtype", "staggerlabels", "reducexticks", "offsettop", "offsetbottom", "offsetright", "offsetleft", "barspacing", "xaxislabeldistance", "yaxislabeldistance", "theme", "labeltype", "donutratio", "showlabelsoutside", "showxdistance", "showydistance", "shape", "nodatamessage", "captions", "showxaxis", "showyaxis", "centerlabel", "customcolors", "showlegend", "legendtype", "xdomain", "ydomain", "tooltips", "linethickness", "highlightpoints", "interpolation", "labelthreshold"];
-var barSpacingMap = exports.barSpacingMap = {
-  small: 0.3,
-  medium: 0.5,
-  large: 0.8
+const basicProperties = [
+  "xaxislabel",
+  "yaxislabel",
+  "xunits",
+  "yunits",
+  "xnumberformat",
+  "xdateformat",
+  "ynumberformat",
+  "showvalues",
+  "showlabels",
+  "viewtype",
+  "areaviewtype",
+  "staggerlabels",
+  "reducexticks",
+  "offsettop",
+  "offsetbottom",
+  "offsetright",
+  "offsetleft",
+  "barspacing",
+  "xaxislabeldistance",
+  "yaxislabeldistance",
+  "theme",
+  "labeltype",
+  "donutratio",
+  "showlabelsoutside",
+  "showxdistance",
+  "showydistance",
+  "shape",
+  "nodatamessage",
+  "captions",
+  "showxaxis",
+  "showyaxis",
+  "centerlabel",
+  "customcolors",
+  "showlegend",
+  "legendtype",
+  "xdomain",
+  "ydomain",
+  "tooltips",
+  "linethickness",
+  "highlightpoints",
+  "interpolation",
+  "labelthreshold"
+];
+const AXIS_CHART_DEFAULT_OFFSETS = {
+  offsettop: 25,
+  offsetright: 25,
+  offsetbottom: 55,
+  offsetleft: 75
 };
-var donutRatioMap = exports.donutRatioMap = {
-  small: 0.3,
-  medium: 0.6,
-  large: 0.7
+const PIE_CHART_DEFAULT_OFFSETS = {
+  offsettop: 20,
+  offsetright: 0,
+  offsetbottom: 0,
+  offsetleft: 0
 };
-var barSpacingMapInvert = exports.barSpacingMapInvert = (0, _lodashEs.invert)(barSpacingMap);
-var donutRatioMapInvert = exports.donutRatioMapInvert = (0, _lodashEs.invert)(donutRatioMap);
-var tickformats = exports.tickformats = {
-  Thousand: {
-    prefix: "K",
-    divider: 1000
-  },
-  Million: {
-    prefix: "M",
-    divider: 1000000
-  },
-  Billion: {
-    prefix: "B",
-    divider: 1000000000
-  }
+const barSpacingMap = { small: 0.3, medium: 0.5, large: 0.8 };
+const donutRatioMap = { small: 0.3, medium: 0.6, large: 0.7 };
+const barSpacingMapInvert = invert(barSpacingMap);
+const donutRatioMapInvert = invert(donutRatioMap);
+const tickformats = {
+  Thousand: { prefix: "K", divider: 1e3 },
+  Million: { prefix: "M", divider: 1e6 },
+  Billion: { prefix: "B", divider: 1e9 }
 };
-var PREVIEW_CHART_ID = exports.PREVIEW_CHART_ID = "#preview-chart";
-var dataTypeJSON = exports.dataTypeJSON = ["Column", "Line", "Pie", "Bar", "Donut", "Bubble"];
-var lineTypeCharts = exports.lineTypeCharts = ["Line", "Area", "Cumulative Line"];
-var dataTypeArray = exports.dataTypeArray = ["Cumulative Line", "Area"];
-var SAMPLE_DATA = exports.SAMPLE_DATA = {
+const PREVIEW_CHART_ID = "#preview-chart";
+const dataTypeJSON = ["Column", "Line", "Pie", "Bar", "Donut", "Bubble"];
+const lineTypeCharts = ["Line", "Area", "Cumulative Line"];
+const dataTypeArray = ["Cumulative Line", "Area"];
+const SAMPLE_DATA = {
   group1: "Europe",
   group2: "Asia",
   group3: "America",
   group4: "Australia"
 };
-var NONE = exports.NONE = "none";
-var chartDataPointXpath = exports.chartDataPointXpath = {
+const NONE = "none";
+const chartDataPointXpath = {
   Column: "rect.nv-bar",
   Bar: "g.nv-bar",
   Area: ".nv-stackedarea .nv-point",
@@ -121,7 +324,7 @@ var chartDataPointXpath = exports.chartDataPointXpath = {
   Donut: ".nv-pieChart .nv-slice path",
   Bubble: ".nv-scatterChart .nv-point-paths path"
 };
-var styleProps = exports.styleProps = {
+const styleProps = {
   fontunit: "font-size",
   fontsize: "font-size",
   color: "fill",
@@ -130,10 +333,33 @@ var styleProps = exports.styleProps = {
   fontstyle: "font-style",
   textdecoration: "text-decoration"
 };
-var aggregationFnMap = exports.aggregationFnMap = {
+const aggregationFnMap = {
   average: "AVG",
   count: "COUNT",
   maximum: "MAX",
   minimum: "MIN",
   sum: "SUM"
-};
+};
+export {
+  AXIS_CHART_DEFAULT_OFFSETS,
+  NONE,
+  PIE_CHART_DEFAULT_OFFSETS,
+  PREVIEW_CHART_ID,
+  SAMPLE_DATA,
+  aggregationFnMap,
+  allShapes,
+  barSpacingMap,
+  barSpacingMapInvert,
+  basicProperties,
+  chartDataPointXpath,
+  chartTypes,
+  dataTypeArray,
+  dataTypeJSON,
+  dateList,
+  donutRatioMap,
+  donutRatioMapInvert,
+  lineTypeCharts,
+  styleProps,
+  themes,
+  tickformats
+};

package/components/chart/src/d3Setup.js

@@ -1,37 +1,18 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.nv = exports.d3 = void 0;
-var d3 = _interopRequireWildcard(require("d3"));
-exports.d3 = d3;
-var _nvd3Source = _interopRequireDefault(require("./nvd3Source.generated"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
-// Inlined NVD3 min bundle (scripts/generate-chart-assets.js; npm run build:charts).
-// Avoids bundler-specific raw imports so consumer Next/Turbopack apps work without extra config.
-
-var _nv = exports.nv = null;
+import * as d3 from "d3";
+import nvd3Source from "./nvd3Source.generated";
+let _nv = null;
 function ensureNvd3() {
   if (_nv) return;
   if (typeof window === "undefined") return;
-
-  // Attach D3 to window so NVD3 can find it
   window.d3 = d3;
-  if (typeof _nvd3Source["default"] !== "string" || _nvd3Source["default"].length < 500) {
+  if (typeof nvd3Source !== "string" || nvd3Source.length < 500) {
     throw new Error("NVD3 source is missing or invalid. Run: npm run build:charts");
   }
-
-  // Execute NVD3 source via Function constructor.
-  // new Function() runs in non-strict mode (per ECMAScript spec),
-  // which is required because NVD3's minified code uses implicit
-  // global variable assignments like `setCoordinates = function(){...}`.
-  // This mirrors how Angular loads NVD3 as a global <script> tag.
-  new Function(_nvd3Source["default"])();
-  exports.nv = _nv = window.nv;
+  new Function(nvd3Source)();
+  _nv = window.nv;
 }
-
-// Initialize immediately on first import
-ensureNvd3();
+ensureNvd3();
+export {
+  d3,
+  _nv as nv
+};