[WIP] User friendly Charts Demo Data

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/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/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/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, []),

client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx

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

client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx

@@ -29,6 +29,10 @@ export function treeChartPropertyView(
         {children.lineWidth.propertyView({ label: trans("treeChart.lineWidth"), tooltip: trans("treeChart.lineWidthTooltip") })}
 
         {children.tooltip.propertyView({label: trans("treeChart.tooltip")})}
+        {children.labelVisibility.propertyView({
+          label: trans("treeChart.labelVisibility"), 
+          tooltip: trans("echarts.labelVisibilityTooltip")
+        })}
 
       </Section>
       <Section name={sectionNames.interaction}>

client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts

@@ -163,6 +163,7 @@ export function getEchartsConfig(
           symbolSize: props?.pointSize || 20, // Control the size of the nodes
           data: props?.echartsData.length !== 0 && props?.echartsData || props.echartsOption.data,
           label: {
+            show: props?.labelVisibility,
             position: "top",
             verticalAlign: "middle",
             align: "right",

client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts

@@ -171,6 +171,7 @@ export function getEchartsConfig(
             ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
           },
           label: {
+            show: props?.labelVisibility,
             ...styleWrapper(props?.detailStyle, theme?.detailStyle, 12),
           }
         }

client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts

@@ -63,9 +63,9 @@ export const en = {
     title: 'Title',
     defaultTitle: 'Tree Chart',
     tooltip: 'Tooltip',
-    defaultLeft: "10",
+    defaultLeft: "20",
     left: "Left",
-    defaultRight: "10",
+    defaultRight: "20",
     right: "Right",
     defaultTop: "20",
     top: "Top",
@@ -76,7 +76,9 @@ export const en = {
     pointSizeTooltip: "Set the Point Size of the Chart.",
     defaultlineWidth: '2',
     lineWidth: "Line Width",
-    lineWidthTooltip: "Set the Line Width of the Chart."
+    lineWidthTooltip: "Set the Line Width of the Chart.",
+    labelVisibility: "Label",
+    labelVisibilityTooltip: "Show or hide the Label of the Chart."
   },
   graphChart: {
     categories: 'Categories',
@@ -317,6 +319,8 @@ export const en = {
 
   },
   lineChart: {
+    title: 'Title',
+    defaultTitle: 'Line Chart',
     cellSize: "Cell Size",
     range: "Range",
     markLines: "Mark Lines",