Merge pull request #1656 from iamfaran/charts

User friendly Charts Demo Data and Chart Fixes

Author: FalkWolsky

client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx

@@ -304,17 +304,17 @@ let BarChartComp = withExposingConfigs(BarChartTmpComp, [
 
 
 export const BarChartCompWithDefault = withDefault(BarChartComp, {
-  xAxisKey: "date",
+  xAxisKey: "month",
   series: [
     {
       dataIndex: genRandomKey(),
-      seriesName: trans("chart.spending"),
-      columnName: "spending",
+      seriesName: "Sales",
+      columnName: "sales",
     },
     {
       dataIndex: genRandomKey(),
-      seriesName: trans("chart.budget"),
-      columnName: "budget",
+      seriesName: "Target",
+      columnName: "target",
     },
   ],
 });

client/packages/lowcoder-comps/src/comps/barChartComp/barChartConstants.tsx

@@ -37,6 +37,40 @@ import { FunnelChartConfig } from "../basicChartComp/chartConfigs/funnelChartCon
 import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
 import {EchartsTitleConfig} from "../basicChartComp/chartConfigs/echartsTitleConfig";
 
+// Enhanced default data for bar charts
+export const barChartDefaultData = [
+  {
+    month: "Jan",
+    sales: 1200,
+    target: 1000
+  },
+  {
+    month: "Feb",
+    sales: 1500,
+    target: 1200
+  },
+  {
+    month: "Mar",
+    sales: 1300,
+    target: 1400
+  },
+  {
+    month: "Apr",
+    sales: 1800,
+    target: 1500
+  },
+  {
+    month: "May",
+    sales: 1600,
+    target: 1700
+  },
+  {
+    month: "Jun",
+    sales: 2100,
+    target: 1900
+  }
+];
+
 export const ChartTypeOptions = [
   {
     label: trans("chart.bar"),
@@ -241,9 +275,9 @@ const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
 export type CharOptionCompType = keyof typeof ChartOptionMap;
 
 export const chartUiModeChildren = {
-  title: withDefault(StringControl, trans("echarts.defaultTitle")),
-  data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource),
-  xAxisKey: valueComp<string>(""), // x-axis, key from data
+  title: withDefault(StringControl, trans("barChart.defaultTitle")),
+  data: jsonControl(toJSONObjectArray, barChartDefaultData),
+  xAxisKey: valueComp<string>("month"), // x-axis, key from data
   xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
   xAxisData: jsonControl(toArray, []),
   series: SeriesListComp,

client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx

@@ -33,10 +33,10 @@ const BarTypeOptions = [
 export const BarChartConfig = (function () {
   return new MultiCompBuilder(
     {
-      showLabel: BoolControl,
+      showLabel: withDefault(BoolControl, true),
       type: dropdownControl(BarTypeOptions, "basicBar"),
-      barWidth: withDefault(NumberControl, i18nObjs.defaultBarChartOption.barWidth),
-      showBackground: BoolControl,
+      barWidth: withDefault(NumberControl, 40),
+      showBackground: withDefault(BoolControl, false),
       backgroundColor: withDefault(ColorControl, i18nObjs.defaultBarChartOption.barBg),
       radiusAxisMax: NumberControl,
       polarRadiusStart: withDefault(StringControl, '30'),

client/packages/lowcoder-comps/src/comps/line3dChartComp/line3dChartUtils.ts

@@ -178,7 +178,6 @@ export function getEchartsConfig(
       },
     }
   };
-  console.log(config);
   return config;
 }
 

client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx

@@ -302,13 +302,13 @@ export const LineChartCompWithDefault = withDefault(LineChartComp, {
   series: [
     {
       dataIndex: genRandomKey(),
-      seriesName: trans("chart.spending"),
-      columnName: "spending",
+      seriesName: "Sales",
+      columnName: "sales",
     },
     {
       dataIndex: genRandomKey(),
-      seriesName: trans("chart.budget"),
-      columnName: "budget",
+      seriesName: "Growth",
+      columnName: "growth",
     },
   ],
 });

client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartConstants.tsx

@@ -83,11 +83,19 @@ export const XAxisDirectionOptions = [
 
 export type XAxisDirectionType = ValueFromOption<typeof XAxisDirectionOptions>;
 
+export const defaultChartData = [
+  { date: "Jan", sales: 320, growth: 250 },
+  { date: "Feb", sales: 450, growth: 300 },
+  { date: "Mar", sales: 380, growth: 340 },
+  { date: "Apr", sales: 520, growth: 400 },
+  { date: "May", sales: 480, growth: 450 },
+  { date: "Jun", sales: 600, growth: 500 }
+];
 export const noDataAxisConfig = {
   animation: false,
   xAxis: {
     type: "category",
-    name: trans("chart.noData"),
+    name: "No Data Available",
     nameLocation: "middle",
     data: [],
     axisLine: {
@@ -243,8 +251,8 @@ const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
 export type CharOptionCompType = keyof typeof ChartOptionMap;
 
 export const chartUiModeChildren = {
-  title: withDefault(StringControl, trans("echarts.defaultTitle")),
-  data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource),
+  title: withDefault(StringControl, trans("lineChart.defaultTitle")),
+  data: jsonControl(toJSONObjectArray, defaultChartData),
   xAxisKey: valueComp<string>(""), // x-axis, key from data
   xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
   xAxisData: jsonControl(toArray, []),

client/packages/lowcoder-comps/src/comps/mermaidComp/index.tsx

@@ -10,11 +10,98 @@ import {
 
 import Mermaid from "./mermaid";
 
+// Collection of example mermaid diagrams that showcase different diagram types
+const mermaidExamples = {
+  flowchart: 
+`flowchart TD
+    A[Start] --> B{Is it working?}
+    B -->|Yes| C[Great!]
+    B -->|No| D[Debug]
+    D --> E[Check Documentation]
+    E --> B
+    C --> F[Deploy]`,
+
+  sequence: 
+`sequenceDiagram
+    participant User
+    participant App
+    participant API
+    participant DB
+    
+    User->>App: Submit Form
+    App->>API: Send Request
+    API->>DB: Query Data
+    DB->>API: Return Result
+    API->>App: Send Response
+    App->>User: Show Result`,
+
+  classDiagram: 
+`classDiagram
+    class User {
+      +String name
+      +String email
+      +authenticate()
+      +updateProfile()
+    }
+    class Product {
+      +String name
+      +Number price
+      +getDetails()
+    }
+    class Order {
+      +Date date
+      +Number total
+      +process()
+    }
+    User "1" --> "*" Order
+    Order "*" --> "*" Product`,
+
+  gantt: 
+`gantt
+    title Project Timeline
+    dateFormat  YYYY-MM-DD
+    
+    section Planning
+    Research           :done, a1, 2023-01-01, 10d
+    Requirements       :active, a2, after a1, 7d
+    
+    section Development
+    Design             :a3, after a2, 8d
+    Implementation     :a4, after a3, 14d
+    Testing            :a5, after a4, 7d
+    
+    section Deployment
+    Release            :milestone, after a5, 0d`,
+
+  entityRelationship: 
+`erDiagram
+    CUSTOMER }|--o{ ORDER : places
+    ORDER ||--|{ ORDER_ITEM : contains
+    CUSTOMER ||--o{ PAYMENT : makes
+    PRODUCT ||--|{ ORDER_ITEM : "ordered in"`,
+
+  journey: 
+`journey
+    title User Purchase Journey
+    section Visit Website
+      Homepage: 5: User
+      Product listing: 4: User
+      Product detail: 3: User
+    section Purchase
+      Add to cart: 4: User
+      Checkout: 3: User, Admin
+      Payment: 3: User, Admin
+    section Post-Purchase
+      Order confirmation: 5: User, Admin
+      Shipping: 4: Admin
+      Delivery: 5: User, Admin`
+};
+
+// Using the flowchart example as default
 const childrenMap = {
   code: stringExposingStateControl(
     "code",
-    `graph LR
-   Start --> Stop`
+    mermaidExamples.flowchart
   ),
   onEvent: eventHandlerControl([
     {

client/packages/lowcoder-comps/src/comps/parallelChartComp/parallelChartUtils.ts

@@ -180,7 +180,6 @@ export function getEchartsConfig(
     parallelAxis: props.data[0].map((c, i) => ({ dim: i, name: c, type: typeof props.data[1][i] === 'string'?'category':'value'}))
   };
 
-  console.log("Echarts transformedData and config", transformedData, config);
   return config;
 }
 

client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartConstants.tsx

@@ -82,6 +82,41 @@ export const XAxisDirectionOptions = [
 
 export type XAxisDirectionType = ValueFromOption<typeof XAxisDirectionOptions>;
 
+// Add this new code block:
+// Realistic pie chart demo data with proper categories and values
+export const defaultPieChartData = [
+  {
+    category: "Market Share",
+    name: "Samsung",
+    value: 21.8
+  },
+  {
+    category: "Market Share",
+    name: "Apple",
+    value: 20.5
+  },
+  {
+    category: "Market Share",
+    name: "Xiaomi",
+    value: 13.4
+  },
+  {
+    category: "Market Share",
+    name: "Oppo",
+    value: 8.8
+  },
+  {
+    category: "Market Share",
+    name: "Vivo",
+    value: 8.1
+  },
+  {
+    category: "Market Share",
+    name: "Others",
+    value: 27.4
+  }
+];
+
 export const noDataAxisConfig = {
   animation: false,
   xAxis: {
@@ -241,8 +276,8 @@ export type CharOptionCompType = keyof typeof ChartOptionMap;
 
 export const chartUiModeChildren = {
   title: withDefault(StringControl, trans("echarts.defaultTitle")),
-  data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource),
-  xAxisKey: valueComp<string>(""), // x-axis, key from data
+  data: jsonControl(toJSONObjectArray, defaultPieChartData),
+  xAxisKey: valueComp<string>("name"),
   xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
   xAxisData: jsonControl(toArray, []),
   series: SeriesListComp,

client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartUtils.ts

@@ -280,7 +280,6 @@ export function getEchartsConfig(
     ]
   }
 
-  console.log("Echarts transformedData and config", transformedData, config);
   return config;
 }