lowcoder-map-component 0.1.1

package/src/comps/Tablecharts/comp.tsx

@@ -0,0 +1,429 @@
+import { ChartPropertyView } from "@/components/ChartPropertyView";
+import { EchartsAxisType } from "@/configs/cartesianAxisConfig";
+import { AxisFormatterComp } from "@/controls";
+import { trans } from "@/i18n/comps";
+import { formatAllStyles } from "@/utils/chartStyle.util";
+import { deepEqual } from "@/utils/deepEqual.util";
+import { echartProps } from "@/utils/echarts.util";
+import { Flex, Table, Typography } from "antd";
+import { ColumnsType } from "antd/es/table";
+import ReactECharts from "echarts-for-react";
+import EChartsReactCore from "echarts-for-react/lib/core";
+import {
+  changeChildAction,
+  childrenToProps,
+  CompAction,
+  depsConfig,
+  getPromiseAfterDispatch,
+  JSONObject,
+  NameConfig,
+  UICompBuilder,
+  valueComp,
+  withDefault,
+  withExposingConfigs,
+  withViewFn,
+  wrapChildAction,
+} from "lowcoder-sdk";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { chartUiProps } from "./constants";
+
+const { Text } = Typography;
+
+// ============================================================================
+// SPARKLINE CHART COMPONENT
+// ============================================================================
+
+const SparklineChart = React.memo(
+  ({ data, chartStyle }: { data: number[]; chartStyle: any }) => {
+    const { shadowColor, fontSize, fontWeight, color } = chartStyle;
+
+    const chartOption = useMemo(
+      () => ({
+        xAxis: { type: "category", show: false },
+        yAxis: {
+          type: "value",
+          position: "right",
+          interval: Number.MAX_SAFE_INTEGER,
+          splitLine: {
+            lineStyle: {
+              color: shadowColor || "#e0e0e0",
+              type: "dashed",
+            },
+          },
+          axisLine: { show: false },
+          axisTick: { show: false },
+          min: 0,
+          axisLabel: {
+            showMaxLabel: true,
+            fontSize: fontSize || 9,
+            formatter: (v: number) =>
+              (v >= 1000000 && `${(v / 1000000)?.toFixed(2)}M`) ||
+              (v >= 1000 && `${(v / 1000)?.toFixed(0)}k`) ||
+              v,
+          },
+        },
+        grid: { left: 0, right: 0, top: 0, bottom: 0 },
+        tooltip: { trigger: "axis" },
+        series: [
+          {
+            data,
+            type: "line",
+            smooth: true,
+            lineStyle: {
+              width: fontWeight || 2,
+              color,
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.1,
+              color,
+            },
+          },
+        ],
+      }),
+      [data, shadowColor, fontSize, fontWeight, color]
+    );
+
+    return (
+      <ReactECharts
+        option={chartOption}
+        style={{ height: 50, width: "100%" }}
+      />
+    );
+  }
+);
+
+SparklineChart.displayName = "SparklineChart";
+
+// ============================================================================
+// TABLE COLUMNS GENERATOR
+// ============================================================================
+
+const getColumns = (
+  data: any[],
+  columnConfigs: any[],
+  chartStyle: any
+): ColumnsType<any> => {
+  if (!data?.length || !columnConfigs?.length) return [];
+
+  return columnConfigs
+    .filter(({ visible }) => visible !== false)
+    .map((config) => {
+      const {
+        title,
+        dataIndex,
+        key,
+        width,
+        styles,
+        fixed,
+        align,
+        sortable,
+        defaultSortOrder,
+      } = config;
+
+      const sortComparator = sortable
+        ? (a: any, b: any) => {
+            const aVal = a[dataIndex];
+            const bVal = b[dataIndex];
+
+            if (typeof aVal === "number" && typeof bVal === "number") {
+              return aVal - bVal;
+            }
+            if (aVal == null) return -1;
+            if (bVal == null) return 1;
+
+            return String(aVal).localeCompare(String(bVal));
+          }
+        : false;
+
+      const renderCell = (val: any) => {
+        if (typeof val === "number") {
+          return <Text style={styles}>{val.toLocaleString()}</Text>;
+        }
+        if (Array.isArray(val) && dataIndex === "sparkline") {
+          return <SparklineChart data={val} chartStyle={chartStyle} />;
+        }
+        return <Text style={styles}>{val}</Text>;
+      };
+
+      const column: any = {
+        title: title || dataIndex,
+        dataIndex,
+        key,
+        width,
+        align,
+        fixed: fixed !== "none" ? fixed : false,
+        sorter: sortComparator,
+        defaultSortOrder:
+          defaultSortOrder !== "none" ? defaultSortOrder : undefined,
+        render: renderCell,
+      };
+
+      if (styles) {
+        column.onCell = () => ({ style: styles });
+      }
+
+      return column;
+    });
+};
+
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
+
+const getYAxisFormatContextValue = (
+  data: Array<JSONObject>,
+  yAxisType: EchartsAxisType,
+  yAxisName?: string
+): any => {
+  const dataSample = yAxisName && data.length > 0 && data[0][yAxisName];
+
+  if (yAxisType === "time") {
+    const time =
+      typeof dataSample === "number" || typeof dataSample === "string"
+        ? new Date(dataSample).getTime()
+        : null;
+    return time || dataSample;
+  }
+
+  return dataSample;
+};
+
+// ============================================================================
+// TABLE CHART COMPONENT BUILDER
+// ============================================================================
+
+let TablechartsTmpComp = new UICompBuilder(
+  {
+    ...echartProps,
+    ...chartUiProps,
+  },
+  () => null
+)
+  .setPropertyViewFn(ChartPropertyView)
+  .build();
+
+// ============================================================================
+// VIEW FUNCTION WITH EVENT HANDLERS
+// ============================================================================
+
+TablechartsTmpComp = withViewFn(TablechartsTmpComp, (comp) => {
+  const eChartCompRef = useRef<EChartsReactCore | null>();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Extract props
+  const {
+    columns: defaultColumns,
+    chartConfig,
+    onEvent,
+    data,
+  } = childrenToProps(comp.children);
+
+  // Format styles
+  const chartConfigView = formatAllStyles(chartConfig);
+  const { headerStyle, rowStyle, chartStyle } = chartConfigView;
+
+  // Get column config
+  const columnConfig = useMemo(
+    () => defaultColumns.map((col: any) => col.getView()),
+    [defaultColumns]
+  );
+
+  // Memoized columns
+  const columns = useMemo(
+    () => getColumns(data, columnConfig, chartStyle),
+    [data, columnConfig, chartStyle]
+  );
+
+  // ========================================================================
+  // EVENT HANDLERS
+  // ========================================================================
+
+  const triggerClickEvent = useCallback(
+    async (dispatch: any, action: CompAction) => {
+      await getPromiseAfterDispatch(dispatch, action, {
+        autoHandleAfterReduce: true,
+      });
+      onEvent("click");
+    },
+    [onEvent]
+  );
+
+  // Handle chart click events
+  useEffect(() => {
+    const eChartInstance = eChartCompRef.current?.getEchartsInstance();
+    if (!eChartInstance) return;
+
+    const handleClick = (param: any) => {
+      const clickData = param.data;
+
+      // Dispatch custom event
+      document.dispatchEvent(
+        new CustomEvent("clickEvent", {
+          bubbles: true,
+          detail: {
+            action: "click",
+            data: clickData,
+          },
+        })
+      );
+
+      // Trigger click event handler
+      triggerClickEvent(
+        comp.dispatch,
+        changeChildAction("lastInteractionData", clickData, false)
+      );
+    };
+
+    eChartInstance.on("click", handleClick);
+
+    return () => {
+      eChartInstance.off("click", handleClick);
+    };
+  }, [comp.dispatch, triggerClickEvent]);
+
+  // ========================================================================
+  // RENDER
+  // ========================================================================
+
+  if (!columnConfig.length) {
+    return (
+      <Flex vertical align="center" justify="center" style={{ height: "100%" }}>
+        <h3>{trans("chart.loadingTable")}</h3>
+      </Flex>
+    );
+  }
+
+  return (
+    <div ref={containerRef} style={{ height: "100%" }}>
+      <Table
+        size="small"
+        loading={!data}
+        columns={columns}
+        dataSource={data}
+        pagination={false}
+        rowKey="key"
+        bordered={false}
+        sticky={false}
+        scroll={{ x: "max-content" }}
+        style={{ background: "transparent" }}
+        components={{
+          header: {
+            cell: (props: any) => (
+              <th
+                {...props}
+                style={{
+                  ...props.style,
+                  ...headerStyle,
+                }}
+              />
+            ),
+          },
+        }}
+        onRow={() => ({
+          style: rowStyle,
+        })}
+      />
+    </div>
+  );
+});
+
+// ============================================================================
+// CONTEXT UPDATE LOGIC
+// ============================================================================
+
+TablechartsTmpComp = class extends TablechartsTmpComp {
+  private lastYAxisFormatContextVal: any = null;
+  private lastColorContext: any = null;
+
+  updateContext(comp: any): any {
+    let resultComp = comp;
+
+    // Get data and sample series
+    const data = comp.children.data.getView();
+    const sampleSeries = comp.children.series
+      .getView()
+      .find((s: any) => !s.getView().hide);
+
+    // Update Y-Axis context
+    const yAxisContextValue = getYAxisFormatContextValue(
+      data,
+      comp.children.yConfig.children.yAxisType.getView(),
+      sampleSeries?.children.columnName.getView()
+    );
+
+    if (yAxisContextValue !== this.lastYAxisFormatContextVal) {
+      this.lastYAxisFormatContextVal = yAxisContextValue;
+      resultComp = comp.setChild(
+        "yConfig",
+        comp.children.yConfig.reduce(
+          wrapChildAction(
+            "formatter",
+            AxisFormatterComp.changeContextDataAction({
+              value: yAxisContextValue,
+            })
+          )
+        )
+      );
+    }
+
+    // Update color context
+    const colorContextVal = {
+      seriesName: sampleSeries?.children.seriesName.getView(),
+      value: yAxisContextValue,
+    };
+
+    if (
+      comp.children.chartConfig.children.comp.children.hasOwnProperty(
+        "itemColor"
+      ) &&
+      !deepEqual(colorContextVal, this.lastColorContext)
+    ) {
+      this.lastColorContext = colorContextVal;
+    }
+
+    return resultComp;
+  }
+
+  reduce(action: CompAction): this {
+    return super.reduce(action);
+  }
+
+  autoHeight(): boolean {
+    return false;
+  }
+};
+
+// ============================================================================
+// EXPOSED CONFIGS
+// ============================================================================
+
+let TablechartComp = withExposingConfigs(TablechartsTmpComp, [
+  depsConfig({
+    name: "selectedPoints",
+    desc: trans("chart.selectedPointsDesc"),
+    depKeys: ["selectedPoints"],
+    func: (input) => input.selectedPoints,
+  }),
+  depsConfig({
+    name: "lastInteractionData",
+    desc: trans("chart.lastInteractionDataDesc"),
+    depKeys: ["lastInteractionData"],
+    func: (input) => input.lastInteractionData,
+  }),
+  depsConfig({
+    name: "data",
+    desc: trans("chart.dataDesc"),
+    depKeys: ["data", "mode"],
+    func: () => [],
+  }),
+  new NameConfig("title", trans("chart.titleDesc")),
+]);
+
+// ============================================================================
+// EXPORT WITH DEFAULT CONFIG
+// ============================================================================
+
+export const TablechartCompWithDefault = withDefault(TablechartComp, {
+  xAxisKey: valueComp<string>("value"),
+});

package/src/comps/Tablecharts/constants.tsx

@@ -0,0 +1,97 @@
+import { createSeriesListComp } from "@/components/SeriesComp";
+import { ChartOptionMap, ColumnConfigComp } from "@/controls";
+import { trans } from "@/i18n/comps";
+import {
+  jsonControl,
+  list,
+  RecordConstructorToView,
+  StringControl,
+  toJSONObjectArray,
+  uiChildren,
+  withDefault,
+  withType,
+} from "lowcoder-sdk";
+
+const defaultChartData = [
+  {
+    key: "fl",
+    metric: "Florida",
+    newCases: 12624,
+    wow: -18.04,
+    mom: 255.54,
+    contribution: 18.29,
+    sparkline: [
+      8500, 7900, 8200, 7600, 8100, 8800, 9200, 9700, 10300, 9500, 8700, 9100,
+      8900, 9400, 10000, 10500, 9800, 9200, 8600, 8300, 8800, 9100, 9400, 9900,
+      10200, 10800, 11300, 11800, 12300, 12900,
+    ],
+  },
+  {
+    key: "ca",
+    metric: "California",
+    newCases: 8814,
+    wow: 24.39,
+    mom: 251.99,
+    contribution: 19.38,
+    sparkline: [
+      6000, 6400, 6700, 7000, 7200, 7500, 7800, 8000, 8500, 8700, 8900, 9100,
+      9400, 9700, 10000, 10300, 10600, 10900, 11200, 11500, 11800, 12100, 12400,
+      12700, 13000, 13400, 13700, 14000, 14400, 14800,
+    ],
+  },
+  {
+    key: "tx",
+    metric: "Texas",
+    newCases: 7016,
+    wow: 21.52,
+    mom: 203.63,
+    contribution: 15.07,
+    sparkline: [
+      4900, 5200, 5400, 5700, 6000, 6300, 6600, 6900, 7100, 7400, 7700, 8000,
+      8200, 8500, 8700, 9000, 9300, 9600, 9900, 10200, 10500, 10900, 11200,
+      11500, 11800, 12200, 12600, 13000, 13400, 13800,
+    ],
+  },
+  {
+    key: "ga",
+    metric: "Georgia",
+    newCases: 3637,
+    wow: -32.55,
+    mom: 136.28,
+    contribution: 4.34,
+    sparkline: [
+      2800, 3000, 3100, 2900, 3200, 3300, 3400, 3500, 3400, 3600, 3700, 3800,
+      3900, 4000, 4100, 3900, 3700, 3600, 3500, 3400, 3300, 3200, 3100, 3000,
+      2900, 2800, 2700, 2600, 2500, 2400,
+    ],
+  },
+];
+
+export const chartUiProps = {
+  chartConfig: withType(ChartOptionMap, "table"),
+  chartType: withDefault(StringControl, "table"),
+  title: withDefault(StringControl, trans("tableChart.defaultTitle")),
+  defaultData: jsonControl(toJSONObjectArray, defaultChartData),
+  series: createSeriesListComp(),
+  columns: list(ColumnConfigComp),
+};
+
+const chartUiChildrenMap = uiChildren(chartUiProps);
+export type ChartUiPropsType = RecordConstructorToView<
+  typeof chartUiChildrenMap
+>;
+
+export type UIChartDataType = {
+  seriesName: string;
+  // coordinate chart
+  x?: any;
+  y?: any;
+  // pie or funnel
+  itemName?: any;
+  value?: any;
+};
+
+export type NonUIChartDataType = {
+  name: string;
+  value: any;
+};