User friendly Charts Demo Data and Chart Fixes

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;
 }
 

client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts

@@ -177,7 +177,6 @@ export function getEchartsConfig(
           radius: `${props.radius}%`,
           shape: props?.areaFlag ? 'circle' : 'line',
           axisName: {
-            ...styleWrapper(props?.detailStyle, theme?.detailStyle, 13),
             show: props?.indicatorVisibility,
           },
           splitArea: {

client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx

@@ -277,6 +277,7 @@ let chartJsonModeChildren: any = {
   focus: withDefault(BoolControl, true),
   tooltip: withDefault(BoolControl, true),
   legendVisibility: withDefault(BoolControl, true),
+  labelVisibility: withDefault(BoolControl, true),
 }
 
 if (EchartDefaultChartStyle && EchartDefaultTextStyle && RadarLabelStyle && SankeyLineStyle) {

client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx

@@ -36,6 +36,10 @@ export function sankeyChartPropertyView(
         {children.draggable.propertyView({label: trans("sankeyChart.draggable"), tooltip: trans("sankeyChart.draggableTooltip")})}
         {children.focus.propertyView({label: trans("sankeyChart.focus"), tooltip: trans("sankeyChart.focusTooltip")})}
         {children.tooltip.propertyView({label: trans("sankeyChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
+        {children.labelVisibility.propertyView({
+          label: trans("treeChart.labelVisibility"), 
+          tooltip: trans("echarts.labelVisibilityTooltip")
+        })}
 
       </Section>
       <Section name={sectionNames.interaction}>

client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts

@@ -162,9 +162,8 @@ export function getEchartsConfig(
           bottom: `${props?.bottom}%`,
           top: `${props?.top}%`,
           label: {
-            show: true,
+            show: props.labelVisibility,
             position: props.echartsLabelConfig.top,
-            ...styleWrapper(props?.detailStyle, theme?.detailStyle,15)
           },
           data: props?.echartsData.length !== 0 && props?.echartsData?.map(item => ({
               name: item.name,

client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartConstants.tsx

@@ -217,9 +217,34 @@ const ChartOptionComp = withType(ChartOptionMap, "scatter");
 const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
 export type CharOptionCompType = keyof typeof ChartOptionMap;
 
+export const SCATTER_CHART_DEMO_DATA = [
+
+    { hours: 1.5, score: 62, student: "Alex M." },
+    { hours: 2.0, score: 65, student: "Sarah P." },
+    { hours: 2.5, score: 71, student: "James W." },
+    { hours: 2.8, score: 69, student: "Emma L." },
+    { hours: 3.0, score: 75, student: "Michael R." },
+    { hours: 3.2, score: 73, student: "Lisa K." },
+    { hours: 3.5, score: 78, student: "David H." },
+    { hours: 3.8, score: 77, student: "Sophie T." },
+    { hours: 4.0, score: 82, student: "Ryan B." },
+    { hours: 4.2, score: 84, student: "Nina C." },
+    { hours: 4.5, score: 86, student: "Thomas G." },
+    { hours: 4.8, score: 88, student: "Maria S." },
+    { hours: 5.0, score: 89, student: "Daniel F." },
+    { hours: 5.2, score: 91, student: "Anna D." },
+    { hours: 5.5, score: 90, student: "Kevin P." },
+    { hours: 5.8, score: 93, student: "Rachel M." },
+    { hours: 6.0, score: 95, student: "John L." },
+    { hours: 6.2, score: 94, student: "Emily W." },
+    { hours: 3.0, score: 68, student: "Chris B." },  // outlier - lower performance
+    { hours: 5.0, score: 96, student: "Jessica H." } // outlier - higher performance
+
+]
+
 export const chartUiModeChildren = {
   title: withDefault(StringControl, trans("echarts.defaultTitle")),
-  data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource),
+  data: jsonControl(toJSONObjectArray, SCATTER_CHART_DEMO_DATA),
   xAxisKey: valueComp<string>(""), // x-axis, key from data
   xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
   xAxisData: jsonControl(toArray, []),