@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/chart/src/constants.js

@@ -0,0 +1,365 @@
+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" }
+  },
+  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" }
+  },
+  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" }
+  },
+  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" }
+  },
+  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" }
+  },
+  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" }
+  },
+  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" }
+  },
+  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" }
+  },
+  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" }
+  }
+};
+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
+};
+const PIE_CHART_DEFAULT_OFFSETS = {
+  offsettop: 20,
+  offsetright: 0,
+  offsetbottom: 0,
+  offsetleft: 0
+};
+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 }
+};
+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"
+};
+const NONE = "none";
+const chartDataPointXpath = {
+  Column: "rect.nv-bar",
+  Bar: "g.nv-bar",
+  Area: ".nv-stackedarea .nv-point",
+  "Cumulative Line": ".nv-cumulativeLine .nv-scatterWrap path.nv-point",
+  Line: ".nv-lineChart .nv-scatterWrap path.nv-point",
+  Pie: ".nv-pieChart .nv-slice path",
+  Donut: ".nv-pieChart .nv-slice path",
+  Bubble: ".nv-scatterChart .nv-point-paths path"
+};
+const styleProps = {
+  fontunit: "font-size",
+  fontsize: "font-size",
+  color: "fill",
+  fontfamily: "font-family",
+  fontweight: "font-weight",
+  fontstyle: "font-style",
+  textdecoration: "text-decoration"
+};
+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.d.ts

@@ -0,0 +1,11 @@
+import * as d3 from "d3";
+declare let _nv: any;
+declare global {
+    interface Window {
+        d3: typeof d3;
+        nv: any;
+    }
+    var nv: any;
+}
+export { d3 };
+export { _nv as nv };

package/components/chart/src/d3Setup.js

@@ -0,0 +1,18 @@
+import * as d3 from "d3";
+import nvd3Source from "./nvd3Source.generated";
+let _nv = null;
+function ensureNvd3() {
+  if (_nv) return;
+  if (typeof window === "undefined") return;
+  window.d3 = d3;
+  if (typeof nvd3Source !== "string" || nvd3Source.length < 500) {
+    throw new Error("NVD3 source is missing or invalid. Run: npm run build:charts");
+  }
+  new Function(nvd3Source)();
+  _nv = window.nv;
+}
+ensureNvd3();
+export {
+  d3,
+  _nv as nv
+};

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

@@ -0,0 +1,79 @@
+import type { WidgetContext } from "./types";
+export declare const isPieChart: (type: string) => type is "Pie";
+export declare const isLineChart: (type: string) => type is "Line";
+export declare const isBarChart: (type: string) => type is "Bar";
+export declare const isDonutChart: (type: string) => type is "Donut";
+export declare const isBubbleChart: (type: string) => type is "Bubble";
+export declare const isColumnChart: (type: string) => type is "Column";
+export declare const isAreaChart: (type: string) => type is "Area";
+export declare const isPieType: (type: string) => type is "Pie" | "Donut";
+export declare const isChartDataJSON: (type: string) => boolean;
+export declare const isChartDataArray: (type: string) => boolean;
+export declare const isLineTypeChart: (type: string) => boolean;
+export declare const isAxisDomainSupported: (type: string) => type is "Column" | "Area";
+export declare const isAxisDomainValid: (widgetContext: WidgetContext, axis: string) => boolean;
+export declare const areMinMaxValuesValid: (values: {
+    min: number;
+    max: number;
+}) => boolean;
+export declare const getYScaleMinValue: (value: number) => number;
+export declare const getBarSpacingValue: (value: string, prop: string) => string | number;
+export declare const getRadiusValue: (value: string, prop: string) => string | number;
+export declare const getLabelValues: (showlabels: string, _showlabelsoutside: boolean, _prop: string) => {
+    showlabels?: boolean;
+    showlabelsoutside?: boolean;
+};
+export declare const getNumberValue: (value: any, callback: (v: any, p: string) => any) => any;
+export declare const getLodashOrderByFormat: (orderby: string) => {
+    columns: string[];
+    orders: string[];
+};
+export declare const getValidAliasName: (aliasName: string) => string;
+export declare const constructSampleData: (dataType: string, yaxisLength: number, shape?: string) => any[];
+export declare const getDataType: (widgetContext: WidgetContext) => "jsonFormat" | "lineChartFormat" | "arrayFormat" | "bubbleFormat" | "pieChartFormat";
+export declare const getSampleData: (widgetContext: WidgetContext) => any[];
+export declare const isGroupByEnabled: (groupby?: string) => boolean;
+export declare const isAggregationEnabled: (groupby?: string, aggregation?: string, aggregationcolumn?: string) => boolean;
+export declare const isDataFilteringEnabled: (isVisuallyGrouped: boolean, groupby?: string, aggregation?: string, aggregationcolumn?: string, orderby?: string) => boolean;
+/**
+ * Get x-axis value, handling line-type chart quirk where
+ * non-numeric x-axis values need to be replaced with indices
+ */
+export declare const getxAxisVal: (dataObj: any, xKey: string, index: number, type: string, xAxisDataType: string | undefined, xDataKeyArr: any[]) => any;
+/**
+ * Creates individual data points based on chart type.
+ * Returns NVD3-compatible datum.
+ */
+export declare const valueFinder: (dataObj: any, xKey: string, yKey: string, type: string, index: number, xAxisDataType: string | undefined, xDataKeyArr: any[], bubblesize?: string, shape?: string) => any;
+/**
+ * Processes bound chart rows into NVD3-compatible chart data.
+ * When there is no dataset, callers should use getSampleData() instead.
+ * Ported from Angular chart.component.ts processChartData().
+ */
+export declare const processChartData: (chartData: any[], type: string, xaxisdatakey: string, yaxisdatakey: string, xAxisDataType: string | undefined, xDataKeyArr: any[], bubblesize?: string, shape?: string) => any[];
+/**
+ * Constructs grouped data based on orderby, x & y axis selection.
+ * Ported from Angular chart.component.ts getVisuallyGroupedData().
+ */
+export declare const getVisuallyGroupedData: (queryResponse: any[], groupingColumn: string, type: string, xaxisdatakey: string, yaxisdatakey: string, xAxisDataType: string | undefined, xDataKeyArr: any[], groupby?: string, orderby?: string) => any[];
+/**
+ * Determines grouping strategy.
+ * Ported from Angular chart.component.ts getGroupingDetails().
+ */
+export declare const getGroupingDetails: (groupby: string | undefined, aggregation: string | undefined, aggregationcolumn: string | undefined, xaxisdatakey: string | undefined, yaxisdatakey: string | undefined) => {
+    expression: string;
+    isVisuallyGrouped: boolean;
+    visualGroupingColumn: string;
+};
+/**
+ * Fetches aggregated data from a live datasource.
+ * Ported from Angular chart.component.ts getAggregatedData().
+ */
+export declare const getAggregatedData: (datasource: any, groupby: string | undefined, aggregation: string | undefined, aggregationcolumn: string | undefined, xaxisdatakey: string | undefined, yaxisdatakey: string | undefined, orderby: string | undefined, callback: (chartData: any[]) => void, onError?: () => void) => void;
+export declare const getXMinMaxValues: (datum: any) => any;
+export declare const isShowLegend: (value: any) => boolean;
+export declare const getYMinMaxValues: (datum: any[]) => {
+    min: any;
+    max: any;
+};
+export declare const getBooleanValue: (val: any) => any;