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

package/components/chart/src/dataUtils.js

@@ -0,0 +1,528 @@
+import {
+  forEach,
+  get,
+  groupBy,
+  includes,
+  isArray,
+  isFinite,
+  map,
+  max,
+  maxBy,
+  minBy,
+  orderBy,
+  split,
+  fill,
+  forEachRight,
+  first,
+  concat,
+  intersection,
+  uniq,
+  replace
+} from "lodash-es";
+import {
+  chartTypes,
+  dataTypeJSON,
+  dataTypeArray,
+  lineTypeCharts,
+  allShapes,
+  SAMPLE_DATA,
+  NONE,
+  aggregationFnMap
+} from "./constants";
+import { prettifyLabels, isEmptyObject, isNumberType } from "./formatUtils";
+const isPieChart = (type) => type === "Pie";
+const isLineChart = (type) => type === "Line";
+const isBarChart = (type) => type === "Bar";
+const isDonutChart = (type) => type === "Donut";
+const isBubbleChart = (type) => type === "Bubble";
+const isColumnChart = (type) => type === "Column";
+const isAreaChart = (type) => type === "Area";
+const isPieType = (type) => isPieChart(type) || isDonutChart(type);
+const isChartDataJSON = (type) => includes(dataTypeJSON, type) || !includes(chartTypes, type);
+const isChartDataArray = (type) => includes(dataTypeArray, type);
+const isLineTypeChart = (type) => includes(lineTypeCharts, type);
+const isAxisDomainSupported = (type) => isColumnChart(type) || isAreaChart(type);
+const isAxisDomainValid = (widgetContext, axis) => {
+  return widgetContext[axis + "domain"] === "Min" && isAxisDomainSupported(widgetContext.type);
+};
+const areMinMaxValuesValid = (values) => {
+  return isFinite(values.min) && isFinite(values.max);
+};
+const getYScaleMinValue = (value) => {
+  const _min = Math.floor(value);
+  return Math.abs(value) - _min > 0 ? value - 0.1 : _min - 1;
+};
+const getBarSpacingValue = (value, prop) => {
+  const barSpacingMap = { small: 0.3, medium: 0.5, large: 0.8 };
+  const barSpacingMapInvert = {
+    "0.3": "small",
+    "0.5": "medium",
+    "0.8": "large"
+  };
+  if (prop === "value") return barSpacingMap[value];
+  if (prop === "key") return barSpacingMapInvert[value];
+};
+const getRadiusValue = (value, prop) => {
+  const donutRatioMap = { small: 0.3, medium: 0.6, large: 0.7 };
+  const donutRatioMapInvert = {
+    "0.3": "small",
+    "0.6": "medium",
+    "0.7": "large"
+  };
+  if (prop === "value") return donutRatioMap[value];
+  if (prop === "key") return donutRatioMapInvert[value];
+};
+const getLabelValues = (showlabels, _showlabelsoutside, _prop) => {
+  const labelsConfig = {};
+  switch (showlabels) {
+    case "hide":
+      labelsConfig.showlabels = false;
+      break;
+    case "inside":
+      labelsConfig.showlabels = true;
+      labelsConfig.showlabelsoutside = false;
+      break;
+    case "outside":
+      labelsConfig.showlabels = true;
+      labelsConfig.showlabelsoutside = true;
+      break;
+  }
+  return labelsConfig;
+};
+const getNumberValue = (value, callback) => {
+  return isNaN(parseInt(value, 10)) ? callback(value, "value") : value;
+};
+const getLodashOrderByFormat = (orderby) => {
+  const orderByColumns = [];
+  const orders = [];
+  forEach(split(orderby, ","), (col) => {
+    const columns = split(col, ":");
+    orderByColumns.push(columns == null ? void 0 : columns[0]);
+    orders.push(columns == null ? void 0 : columns[1]);
+  });
+  return { columns: orderByColumns, orders };
+};
+const getValidAliasName = (aliasName) => {
+  return (aliasName == null ? void 0 : aliasName.replace(/\./g, "$")) || null;
+};
+const constructSampleData = (dataType, yaxisLength, shape) => {
+  let data = [];
+  switch (dataType) {
+    case "jsonFormat": {
+      const first_series = [
+        { x: "01/01/2001", y: 4e6 },
+        { x: "01/01/2002", y: 1e6 },
+        { x: "01/01/2003", y: 5e6 }
+      ];
+      const second_series = [
+        { x: "01/01/2001", y: 3e6 },
+        { x: "01/01/2002", y: 4e6 },
+        { x: "01/01/2003", y: 7e6 }
+      ];
+      const third_series = [
+        { x: "01/01/2001", y: 2e6 },
+        { x: "01/01/2002", y: 8e6 },
+        { x: "01/01/2003", y: 6e6 }
+      ];
+      data[0] = { values: first_series, key: SAMPLE_DATA.group1 };
+      if (yaxisLength >= 2) data[1] = { values: second_series, key: SAMPLE_DATA.group2 };
+      if (yaxisLength >= 3) data[2] = { values: third_series, key: SAMPLE_DATA.group3 };
+      break;
+    }
+    case "lineChartFormat": {
+      const first_series = [
+        { x: 1, y: 4e6 },
+        { x: 2, y: 1e6 },
+        { x: 3, y: 5e6 }
+      ];
+      const second_series = [
+        { x: 1, y: 3e6 },
+        { x: 2, y: 4e6 },
+        { x: 3, y: 7e6 }
+      ];
+      const third_series = [
+        { x: 1, y: 2e6 },
+        { x: 2, y: 8e6 },
+        { x: 3, y: 6e6 }
+      ];
+      data[0] = { values: first_series, key: SAMPLE_DATA.group1 };
+      if (yaxisLength >= 2) data[1] = { values: second_series, key: SAMPLE_DATA.group2 };
+      if (yaxisLength >= 3) data[2] = { values: third_series, key: SAMPLE_DATA.group3 };
+      break;
+    }
+    case "arrayFormat": {
+      const first_array = [
+        [1, 4e6],
+        [2, 1e6],
+        [3, 5e6]
+      ];
+      const second_array = [
+        [1, 3e6],
+        [2, 4e6],
+        [3, 7e6]
+      ];
+      const third_array = [
+        [1, 2e6],
+        [2, 8e6],
+        [3, 6e6]
+      ];
+      data[0] = { values: first_array, key: SAMPLE_DATA.group1 };
+      if (yaxisLength >= 2) data[1] = { values: second_array, key: SAMPLE_DATA.group2 };
+      if (yaxisLength >= 3) data[2] = { values: third_array, key: SAMPLE_DATA.group3 };
+      break;
+    }
+    case "bubbleFormat": {
+      const resolvedShape = shape === "random" ? allShapes[Math.floor(Math.random() * allShapes.length)] : shape;
+      const first_bubble = [
+        { x: 80.66, y: 33739900, size: 78, shape: resolvedShape },
+        { x: 79.84, y: 81902300, size: 90, shape: resolvedShape },
+        { x: 78.6, y: 5523100, size: 45, shape: resolvedShape }
+      ];
+      const second_bubble = [
+        { x: 72.73, y: 79716200, size: 98, shape: resolvedShape },
+        { x: 80.05, y: 61801600, size: 20, shape: resolvedShape },
+        { x: 72.49, y: 73137200, size: 34, shape: resolvedShape }
+      ];
+      const third_bubble = [
+        { x: 68.09, y: 33739900, size: 45, shape: resolvedShape },
+        { x: 81.55, y: 7485600, size: 78, shape: resolvedShape },
+        { x: 68.6, y: 14185e4, size: 56, shape: resolvedShape }
+      ];
+      data[0] = { values: first_bubble, key: SAMPLE_DATA.group1 };
+      if (yaxisLength >= 2) data[1] = { values: second_bubble, key: SAMPLE_DATA.group2 };
+      if (yaxisLength >= 3) data[2] = { values: third_bubble, key: SAMPLE_DATA.group3 };
+      break;
+    }
+    case "pieChartFormat":
+      data = [
+        { x: SAMPLE_DATA.group1, y: 1e6 },
+        { x: SAMPLE_DATA.group2, y: 2e6 },
+        { x: SAMPLE_DATA.group3, y: 3e6 },
+        { x: SAMPLE_DATA.group4, y: 4e6 }
+      ];
+      break;
+  }
+  return data;
+};
+const getDataType = (widgetContext) => {
+  const type = widgetContext.type;
+  if (isLineChart(type)) return "lineChartFormat";
+  if (isPieType(type)) return "pieChartFormat";
+  if (isBubbleChart(type)) return "bubbleFormat";
+  return isChartDataJSON(type) ? "jsonFormat" : "arrayFormat";
+};
+const getSampleData = (widgetContext) => {
+  var _a;
+  return constructSampleData(
+    getDataType(widgetContext),
+    split((_a = widgetContext.yaxisdatakey) != null ? _a : "", ",").length,
+    widgetContext.shape
+  );
+};
+const isGroupByEnabled = (groupby) => {
+  return !!(groupby && groupby !== NONE);
+};
+const isAggregationEnabled = (groupby, aggregation, aggregationcolumn) => {
+  return !!(isGroupByEnabled(groupby) && aggregation !== NONE && aggregationcolumn);
+};
+const isDataFilteringEnabled = (isVisuallyGrouped, groupby, aggregation, aggregationcolumn, orderby) => {
+  return isAggregationEnabled(groupby, aggregation, aggregationcolumn) || !isVisuallyGrouped && !!orderby;
+};
+const getxAxisVal = (dataObj, xKey, index, type, xAxisDataType, xDataKeyArr) => {
+  const value = get(dataObj, xKey);
+  if (isLineTypeChart(type) && !isNumberType(xAxisDataType || "")) {
+    xDataKeyArr.push(value);
+    if (value instanceof Date) return value;
+    return index;
+  }
+  return value;
+};
+const valueFinder = (dataObj, xKey, yKey, type, index, xAxisDataType, xDataKeyArr, bubblesize, shape) => {
+  const xVal = getxAxisVal(dataObj, xKey, index, type, xAxisDataType, xDataKeyArr);
+  const rawValue = get(dataObj, yKey);
+  const yVal = parseFloat(rawValue) || rawValue;
+  const size = parseFloat(dataObj == null ? void 0 : dataObj[bubblesize || ""]) || 2;
+  let dataPoint = {};
+  if (isChartDataJSON(type)) {
+    dataPoint.x = xVal;
+    dataPoint.y = yVal;
+    if (isBubbleChart(type)) {
+      dataPoint.size = size;
+      dataPoint.shape = shape || "circle";
+    }
+  } else if (isChartDataArray(type)) {
+    dataPoint = [xVal, yVal];
+  }
+  dataPoint._dataObj = dataObj;
+  return dataPoint;
+};
+const getValidData = (values) => {
+  return values.length === 1 && values[0] === void 0 ? [] : values;
+};
+const processChartData = (chartData, type, xaxisdatakey, yaxisdatakey, xAxisDataType, xDataKeyArr, bubblesize, shape) => {
+  var _a;
+  if (!chartData || !chartData.length) return [];
+  let datum = [];
+  const yAxisKeys = (_a = yaxisdatakey == null ? void 0 : yaxisdatakey.split(",")) != null ? _a : [];
+  if (isArray(chartData)) {
+    if (isPieType(type)) {
+      const yAxisKey = yAxisKeys[0];
+      datum = map(chartData, (dataObj, index) => {
+        if (!isEmptyObject(chartData[index])) {
+          return valueFinder(
+            dataObj,
+            xaxisdatakey,
+            yAxisKey,
+            type,
+            index,
+            xAxisDataType,
+            xDataKeyArr,
+            bubblesize,
+            shape
+          );
+        }
+      });
+      datum = getValidData(datum);
+    } else {
+      let shapes = [];
+      if (isBubbleChart(type)) {
+        shapes = shape === "random" ? allShapes : shape;
+      }
+      yAxisKeys.forEach((yKey, series) => {
+        let values = map(chartData, (dataObj, index) => {
+          var _a2;
+          if (!isEmptyObject(chartData[index])) {
+            return valueFinder(
+              dataObj,
+              xaxisdatakey,
+              yKey,
+              type,
+              index,
+              xAxisDataType,
+              xDataKeyArr,
+              bubblesize,
+              (_a2 = isArray(shapes) ? shapes == null ? void 0 : shapes[series] : void 0) != null ? _a2 : shape
+            );
+          }
+        });
+        values = getValidData(values);
+        datum.push({
+          values,
+          key: prettifyLabels(yKey)
+        });
+      });
+    }
+  }
+  return datum;
+};
+const getVisuallyGroupedData = (queryResponse, groupingColumn, type, xaxisdatakey, yaxisdatakey, xAxisDataType, xDataKeyArr, groupby, orderby) => {
+  const chartData = [];
+  const _isAreaChart = isAreaChart(type);
+  const yAxisKey = first(split(yaxisdatakey != null ? yaxisdatakey : "", ","));
+  xDataKeyArr.length = 0;
+  let sorted = orderBy(queryResponse, split(groupby != null ? groupby : "", ","));
+  if (orderby) {
+    const orderByDetails = getLodashOrderByFormat(orderby);
+    sorted = orderBy(sorted, orderByDetails.columns, orderByDetails.orders);
+  }
+  const grouped = groupBy(sorted, groupingColumn);
+  let maxLength = 0;
+  if (_isAreaChart) {
+    maxLength = max(map(grouped, (obj) => obj.length)) || 0;
+  }
+  forEach(grouped, (values, groupKey) => {
+    let groupValues = _isAreaChart ? fill(new Array(maxLength), [0, 0]) : [];
+    forEachRight(values, (value, index) => {
+      groupValues[index] = valueFinder(
+        value,
+        xaxisdatakey,
+        yAxisKey,
+        type,
+        index,
+        xAxisDataType,
+        xDataKeyArr
+      );
+    });
+    chartData.push({ key: groupKey, values: groupValues });
+  });
+  return chartData;
+};
+const getGroupingDetails = (groupby, aggregation, aggregationcolumn, xaxisdatakey, yaxisdatakey) => {
+  var _a;
+  if (isGroupByEnabled(groupby) && !isAggregationEnabled(groupby, aggregation, aggregationcolumn)) {
+    let isVisuallyGrouped = false;
+    let visualGroupingColumn = "";
+    let groupingExpression = "";
+    let columns = [];
+    const groupbyColumns = groupby && groupby !== NONE ? groupby.split(",") : [];
+    const yAxisKeys = (_a = yaxisdatakey == null ? void 0 : yaxisdatakey.split(",")) != null ? _a : [];
+    if (groupbyColumns.length > 1) {
+      let groupingColumnIndex = -1;
+      groupbyColumns.every((column, index) => {
+        if (xaxisdatakey !== column && yAxisKeys.indexOf(column) === -1) {
+          isVisuallyGrouped = true;
+          visualGroupingColumn = column;
+          groupingColumnIndex = index;
+          groupbyColumns.splice(groupingColumnIndex, 1);
+          return false;
+        }
+        return true;
+      });
+      if (visualGroupingColumn) {
+        columns.push(visualGroupingColumn);
+      }
+      if (groupbyColumns.length) {
+        columns = concat(columns, groupbyColumns);
+      }
+    }
+    if (xaxisdatakey !== aggregationcolumn) {
+      columns.push(xaxisdatakey || "");
+    }
+    forEach(yAxisKeys, (key) => {
+      if (key !== aggregationcolumn) {
+        columns.push(key);
+      }
+    });
+    groupingExpression = columns.join(",");
+    return {
+      expression: groupingExpression,
+      isVisuallyGrouped,
+      visualGroupingColumn
+    };
+  }
+  return {
+    expression: "",
+    isVisuallyGrouped: false,
+    visualGroupingColumn: ""
+  };
+};
+const getAggregatedData = (datasource, groupby, aggregation, aggregationcolumn, xaxisdatakey, yaxisdatakey, orderby, callback, onError) => {
+  var _a;
+  if (!datasource) return;
+  const yAxisKeys = (_a = yaxisdatakey == null ? void 0 : yaxisdatakey.split(",")) != null ? _a : [];
+  const data = {};
+  let sortExpr;
+  let columns = [];
+  let groupByFields = [];
+  if (isGroupByEnabled(groupby)) {
+    groupByFields = split(groupby || "", ",");
+  }
+  if (orderby) {
+    sortExpr = replace(orderby, /:/g, " ");
+    columns = uniq(concat(columns, groupByFields, [aggregationcolumn || ""]));
+    const orderByColumns = getLodashOrderByFormat(orderby).columns;
+    forEach(intersection(columns, orderByColumns), (col) => {
+      const colAlias = getValidAliasName(col);
+      if (colAlias && sortExpr) {
+        sortExpr = replace(sortExpr, col, colAlias);
+      }
+    });
+  }
+  if (isAggregationEnabled(groupby, aggregation, aggregationcolumn)) {
+    data.groupByFields = groupByFields;
+    data.aggregations = [
+      {
+        field: aggregationcolumn,
+        type: aggregationFnMap[aggregation != null ? aggregation : ""],
+        alias: getValidAliasName(aggregationcolumn || "")
+      }
+    ];
+  }
+  datasource == null ? void 0 : datasource.execute("getAggregatedData", {
+    aggregations: data,
+    sort: sortExpr
+  }).then(
+    (response) => {
+      var _a2, _b;
+      const chartData = [];
+      const aggregationAlias = getValidAliasName(aggregationcolumn || "");
+      const xAxisAliasKey = getValidAliasName(xaxisdatakey || "");
+      const yAxisAliasKeys = [];
+      yAxisKeys.forEach((yAxisKey) => yAxisAliasKeys.push(getValidAliasName(yAxisKey)));
+      forEach((_b = (_a2 = response == null ? void 0 : response.body) == null ? void 0 : _a2.content) != null ? _b : [], (responseContent) => {
+        const obj = {};
+        if (isAggregationEnabled(groupby, aggregation, aggregationcolumn)) {
+          obj[aggregationcolumn || ""] = get(responseContent, aggregationAlias || "") || get(responseContent, aggregationcolumn || "");
+        }
+        obj[xaxisdatakey || ""] = get(responseContent, xAxisAliasKey || "") || get(responseContent, xaxisdatakey || "");
+        yAxisKeys.forEach((yAxisKey, index) => {
+          obj[yAxisKey] = get(responseContent, yAxisAliasKeys[index]) || get(responseContent, yAxisKey);
+        });
+        chartData.push(obj);
+      });
+      callback(chartData);
+    },
+    () => {
+      onError == null ? void 0 : onError();
+    }
+  );
+};
+const getXMinMaxValues = (datum) => {
+  if (!datum) return void 0;
+  const xValues = {};
+  xValues.min = minBy(datum.values, (dataObject) => (dataObject == null ? void 0 : dataObject.x) || (dataObject == null ? void 0 : dataObject[0]));
+  xValues.max = maxBy(datum.values, (dataObject) => (dataObject == null ? void 0 : dataObject.x) || (dataObject == null ? void 0 : dataObject[0]));
+  return xValues;
+};
+const isShowLegend = (value) => {
+  if (value === "false" || value === false) return false;
+  if (value === "true" || value === true) return true;
+  return value === "hide" ? false : true;
+};
+const getYMinMaxValues = (datum) => {
+  if (!datum) return void 0;
+  const minValues = [];
+  const maxValues = [];
+  forEach(datum, (data) => {
+    minValues.push(minBy(data.values, (dataObject) => (dataObject == null ? void 0 : dataObject.y) || (dataObject == null ? void 0 : dataObject[1])));
+    maxValues.push(maxBy(data.values, (dataObject) => (dataObject == null ? void 0 : dataObject.y) || (dataObject == null ? void 0 : dataObject[1])));
+  });
+  return {
+    min: minBy(minValues, (dataObject) => (dataObject == null ? void 0 : dataObject.y) || (dataObject == null ? void 0 : dataObject[1])),
+    max: maxBy(maxValues, (dataObject) => (dataObject == null ? void 0 : dataObject.y) || (dataObject == null ? void 0 : dataObject[1]))
+  };
+};
+const getBooleanValue = (val) => {
+  if (val === true || val === "true") return true;
+  if (val === false || val === "false") return false;
+  return val;
+};
+export {
+  areMinMaxValuesValid,
+  constructSampleData,
+  getAggregatedData,
+  getBarSpacingValue,
+  getBooleanValue,
+  getDataType,
+  getGroupingDetails,
+  getLabelValues,
+  getLodashOrderByFormat,
+  getNumberValue,
+  getRadiusValue,
+  getSampleData,
+  getValidAliasName,
+  getVisuallyGroupedData,
+  getXMinMaxValues,
+  getYMinMaxValues,
+  getYScaleMinValue,
+  getxAxisVal,
+  isAggregationEnabled,
+  isAreaChart,
+  isAxisDomainSupported,
+  isAxisDomainValid,
+  isBarChart,
+  isBubbleChart,
+  isChartDataArray,
+  isChartDataJSON,
+  isColumnChart,
+  isDataFilteringEnabled,
+  isDonutChart,
+  isGroupByEnabled,
+  isLineChart,
+  isLineTypeChart,
+  isPieChart,
+  isPieType,
+  isShowLegend,
+  processChartData,
+  valueFinder
+};

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

@@ -0,0 +1,5 @@
+export declare const getDateFormatedData: (dateFormat: string, d: any) => string;
+export declare const getNumberFormatedData: (numberFormat: string | undefined, d: number) => any;
+export declare const prettifyLabels: (label: string) => string;
+export declare const isEmptyObject: (obj: any) => boolean;
+export declare const isNumberType: (type: string) => boolean;

package/components/chart/src/formatUtils.js

@@ -0,0 +1,72 @@
+import { d3 } from "./d3Setup";
+import { tickformats } from "./constants";
+import moment from "moment";
+const removeTrailingZeros = (value) => {
+  if (!value) return value;
+  const stringValue = typeof value === "number" ? String(value) : value;
+  return stringValue.replace(/\.0+([A-Za-z]*)$/, "$1").replace(/\.([1-9]+)0+([A-Za-z]*)$/, ".$1$2");
+};
+const getDateFormatedData = (dateFormat, d) => {
+  dateFormat = dateFormat || "%x";
+  if (dateFormat === "%c") {
+    dateFormat = "%a %b %e %X %Y";
+  }
+  return d3.timeFormat(dateFormat)(new Date(moment(moment(d).format()).valueOf()));
+};
+const getNumberFormatedData = (numberFormat, d) => {
+  let formattedData;
+  let divider;
+  let prefix;
+  if (numberFormat) {
+    let numberFormatter;
+    if (numberFormat === "Thousand" || numberFormat === "Million" || numberFormat === "Billion") {
+      numberFormatter = d3.format(",.2s");
+    } else if (numberFormat === "%") {
+      numberFormatter = d3.format(".2%");
+    } else if (numberFormat === ".f") {
+      numberFormatter = d3.format(".2f");
+    } else {
+      numberFormatter = d3.format(numberFormat);
+    }
+    formattedData = numberFormatter(d);
+    divider = tickformats[numberFormat] && tickformats[numberFormat].divider || 0;
+    prefix = tickformats[numberFormat] && tickformats[numberFormat].prefix;
+    if (prefix && divider !== 0) {
+      formattedData = d3.format(".2f")(d / divider) + prefix;
+    }
+  } else {
+    formattedData = d >= 1e3 ? d3.format(".1s")(d) : d;
+  }
+  formattedData = removeTrailingZeros(formattedData);
+  return formattedData;
+};
+const prettifyLabels = (label) => {
+  if (!label) return "";
+  return label.replace(/^./, (str) => str.toUpperCase()).trim();
+};
+const isEmptyObject = (obj) => {
+  return obj && typeof obj === "object" && Object.keys(obj).length === 0;
+};
+const isNumberType = (type) => {
+  const numberTypes = [
+    "number",
+    "integer",
+    "float",
+    "double",
+    "long",
+    "short",
+    "byte",
+    "decimal",
+    "bigdecimal",
+    "biginteger",
+    "int"
+  ];
+  return numberTypes.includes(type == null ? void 0 : type.toLowerCase());
+};
+export {
+  getDateFormatedData,
+  getNumberFormatedData,
+  isEmptyObject,
+  isNumberType,
+  prettifyLabels
+};

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

@@ -0,0 +1,3 @@
+import "./d3Setup";
+export { default as WmChart } from "./chart";
+export type { WmChartProps, TChartType, TChartLegendPosition, TChartLegendType, TBubbleChartShape, TChartInterpolation, TChartViewType, TChartShowValues, TChartValuesDisplay, SelectedChartItem, WidgetContext, } from "./types";

package/components/chart/src/index.js

@@ -0,0 +1,17 @@
+import "./d3Setup";
+import { nvd3Css, wmChartCss } from "./chartStyles.generated";
+const STYLE_ID = "__wm-react-charts-styles__";
+function injectStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `${nvd3Css}
+${wmChartCss}`;
+  document.head.appendChild(style);
+}
+injectStyles();
+import { default as default2 } from "./chart";
+export {
+  default2 as WmChart
+};

package/components/chart/src/nvd3Source.generated.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Auto-generated by scripts/generate-chart-assets.js — do not edit.
+ * Source: @wavemaker/nvd3/build/nv.d3.min.js
+ */
+declare const nvd3Source: string;
+export default nvd3Source;