Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

User friendly Charts Demo Data and Chart Fixes#1656

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
FalkWolsky merged 23 commits intolowcoder-org:devfromiamfaran:charts
May 22, 2025
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
Show all changes
23 commits
Select commitHold shift + click to select a range
0fd92c4
Improve Bar Chart
iamfaranApr 24, 2025
ffcef3c
Improve Line Chart
iamfaranApr 24, 2025
6ee9d15
Improve Sankey Chart component data
iamfaranApr 24, 2025
d37822b
Improve Tree Chart
iamfaranApr 24, 2025
672d40d
Improve TreeMapChart Data
iamfaranApr 24, 2025
71a498e
Improve Sunburst Chart Data
iamfaranApr 24, 2025
55e43b2
Add label toggle in the TreeChart
iamfaranApr 25, 2025
6f26f02
Add label toggle functionality for TreeMap Chart
iamfaranApr 25, 2025
5a6a55f
Improve CandleChart Data
iamfaranApr 25, 2025
ce78c15
Improve Pie Chart Data
iamfaranApr 25, 2025
f81f755
Improve Mermaid Chart Data
iamfaranApr 25, 2025
88a3454
Improve ThemeRiver Component
iamfaranApr 25, 2025
6e62f3d
Improve Radar Chart Data
iamfaranApr 25, 2025
4e4280f
Improve ScatterChart Data
iamfaranApr 25, 2025
d071fc9
Improve GraphChart Data
iamfaranApr 25, 2025
1383bc5
Merge branch 'dev' of github.com:lowcoder-org/lowcoder into charts
iamfaranApr 25, 2025
81bd036
add sankey chart labels
iamfaranApr 28, 2025
4d378da
fix label issue for TreeChart
iamfaranApr 29, 2025
c6f8f1d
Fix labels issue with sunburst and Treemapchart
iamfaranApr 29, 2025
4305b76
Fix labels for Sankey and Radar chart
iamfaranApr 29, 2025
35234ec
Make TreeChart Leaf nodes center aligned
iamfaranApr 29, 2025
3533ef9
remove console logs
iamfaranApr 29, 2025
9a37358
Merge branch 'dev' into charts
raheeliftikhar5May 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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",
},
],
});
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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"),
Expand DownExpand Up@@ -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,
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -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'),
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -178,7 +178,6 @@ export function getEchartsConfig(
},
}
};
console.log(config);
return config;
}

Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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",
},
],
});
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand DownExpand Up@@ -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, []),
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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([
{
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
}

Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand DownExpand Up@@ -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,
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -280,7 +280,6 @@ export function getEchartsConfig(
]
}

console.log("Echarts transformedData and config", transformedData, config);
return config;
}

Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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: {
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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) {
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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}>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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, []),
Expand Down
Loading
Loading
[8]ページ先頭
©2009-2025 Movatter.jp