diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx index 6370df675..22375e860 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx @@ -11,14 +11,163 @@ export default function CalendarExample() { <> + + + + + + + + + + + + + + + + + + + + + ); diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx index 544055abe..943c651a7 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx @@ -6,54 +6,45 @@ import ExampleGroup from "../../common/ExampleGroup"; const ChartCompWithDefault = uiCompRegistry["candleStickChart"].comp; -const defaultEchartsJsonOption = { - "xAxis": { - "data": [ - "Day 1", - "Day 2", - "Day 3", - "Day 4", - "Day 5" - ] - }, - "data": [ - [ - 150, - 100, - 50, - 200 - ], - [ - 120, - 220, - 80, - 180 - ], - [ - 80, - 150, - 60, - 130 - ], - [ - 230, - 130, - 110, - 190 - ], - [ - 90, - 180, - 70, - 160 - ] - ] -}; +const chartStyle= { + background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)", + chartBorderColor: "#FDFAFA", + chartBorderStyle: "solid", + chartBorderWidth: "2", + chartBoxShadow: "200", + chartShadowColor: "#3377FF" +} -const echartsOption = JSON.stringify(defaultEchartsJsonOption); +const titleStyle = { + chartBoxShadow: "9", + chartFontStyle: "Italic", + chartShadowColor: "#FFBD01", + chartTextColor: "#36B389", + chartTextSize: "30", + chartTextWeight: "Bold" +} + +const xAxisStyle = { + chartBoxShadow: "5", + chartFontFamily: "serif", + chartFontStyle: "Italic", + chartShadowColor: "#020101", + chartTextColor: "#971827", + chartTextSize: "20", + chartTextWeight: "bold" +} + +const yAxisStyle = { + chartBoxShadow: "5", + chartFontFamily: "serif", + chartFontStyle: "Italic", + chartShadowColor: "#FFD701", + chartTextColor: "#7A7A7B", + chartTextSize: "20", + chartTextWeight: "bold" +} export default function CandleStickChartExample() { - const blackListConfig: string[] = ["echartsOption"]; return ( <> @@ -74,7 +64,6 @@ export default function CandleStickChartExample() { width={500} height={300} config={{ - echartsOption: echartsOption, tooltip: false, }} compFactory={ChartCompWithDefault} @@ -90,7 +79,6 @@ export default function CandleStickChartExample() { width={500} height={300} config={{ - echartsOption: echartsOption, top: 20, right: 20, bottom: 20, @@ -109,7 +97,6 @@ export default function CandleStickChartExample() { width={500} height={300} config={{ - echartsOption: echartsOption, echartsTitleConfig: { "position": "left", }, @@ -121,7 +108,6 @@ export default function CandleStickChartExample() { width={500} height={300} config={{ - echartsOption: echartsOption, echartsTitleConfig: { "position": "center", }, @@ -133,7 +119,6 @@ export default function CandleStickChartExample() { width={500} height={300} config={{ - echartsOption: echartsOption, echartsTitleConfig: { "position": "right", }, @@ -145,7 +130,6 @@ export default function CandleStickChartExample() { width={500} height={300} config={{ - echartsOption: echartsOption, echartsLegendConfig: { "position": "bottom", }, @@ -157,7 +141,6 @@ export default function CandleStickChartExample() { width={500} height={300} config={{ - echartsOption: echartsOption, echartsLegendConfig: { "position": "top", }, @@ -165,6 +148,52 @@ export default function CandleStickChartExample() { compFactory={ChartCompWithDefault} /> + + + + + + + ); } diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/FunnelChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/FunnelChart.tsx index 424b8a102..777f9dcfe 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/FunnelChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/FunnelChart.tsx @@ -5,6 +5,43 @@ import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; const ChartCompWithDefault = uiCompRegistry["funnelChart"].comp; +const chartStyle= { + background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)", + chartBorderColor: "#FDFAFA", + chartBorderStyle: "solid", + chartBorderWidth: "2", + chartBoxShadow: "200", + chartShadowColor: "#3377FF" +} + +const titleStyle = { + chartBoxShadow: "9", + chartFontStyle: "Italic", + chartShadowColor: "#FFBD01", + chartTextColor: "#36B389", + chartTextSize: "30", + chartTextWeight: "Bold" +} + +const labelStyle = { + chartBoxShadow: "5", + chartFontFamily: "serif", + chartFontStyle: "Italic", + chartShadowColor: "#020101", + chartTextColor: "#FFFFFF", + chartTextSize: "20", + chartTextWeight: "bold" +} + +const legendStyle = { + chartBoxShadow: "5", + chartFontFamily: "serif", + chartFontStyle: "Italic", + chartShadowColor: "#FFD701", + chartTextColor: "#7A7A7B", + chartTextSize: "20", + chartTextWeight: "bold" +} export default function FunnelChartExample() { return ( @@ -301,6 +338,52 @@ export default function FunnelChartExample() { compFactory={ChartCompWithDefault} /> + + + + + + + ); } diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx index 5107be785..eac134170 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx @@ -11,15 +11,138 @@ export default function GanttChartExample() { <> + + + + + + + + + + + + + + + + + + + ); } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx index 7a57ee549..43d87a45d 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx @@ -6,6 +6,170 @@ import ExampleGroup from "../../common/ExampleGroup"; const ChartCompWithDefault = uiCompRegistry["gaugeChart"].comp; +const barometerGuageOption = { + "data": [ + { + "formatter": "{value}%", + "value": 58.46, + "name": "PLP", + "outline": { + "color": "#c80707", + "period": [ + 0, + 100 + ], + "splitNumber": 10, + "progressBarWidth": 2, + "axisTickLength": 6, + "axisTickWidth": 2, + "radius": "70%" + }, + "inline": { + "color": "#000000", + "period": [ + 0, + 60 + ], + "progressBarWidth": 2, + "splitNumber": 6, + "axisTickLength": 6, + "axisTickWidth": 2, + "radius": "60%" + } + } + ] +}; + +const clockGuageOption = { + "data": [ + { + "outlineColor": "#aa2a2a", + "anchor": { + "color": "#cfae09", + "size": 10 + }, + "hour": { + "color": "#cfae09", + "width": 4, + "length": 50, + "value": 4 + }, + "minute": { + "color": "#cfae09", + "width": 2.5, + "length": 65, + "value": 30 + }, + "second": { + "color": "#cfae09", + "width": 1, + "length": 90, + "value": 45 + } + } + ] +}; + +const gradeGuageOption = { + "data": [ + { + "value": 80, + "name": "Grade Rating", + "formatter": "{value} %", + "color": [ + [ + 0.25, + "#FF6E76" + ], + [ + 0.5, + "#FDDD60" + ], + [ + 0.75, + "#58D9F9" + ], + [ + 1, + "#7CFFB2" + ] + ] + } + ] +}; + +const multiTitleGuageOption = { + "data": [ + { + "formatter": "{value}%", + "value": [ + { + "color": "#19b1e6", + "title": "Perfect", + "value": 20, + "titlePosition": [ + "-60%", + "60%" + ], + "valuePosition": [ + "-60%", + "80%" + ] + }, + { + "color": "#fac858", + "title": "Good", + "value": 40, + "titlePosition": [ + "0%", + "60%" + ], + "valuePosition": [ + "0%", + "80%" + ] + }, + { + "color": "#09f64d", + "title": "Commonly", + "value": 60, + "titlePosition": [ + "60%", + "60%" + ], + "valuePosition": [ + "60%", + "80%" + ] + } + ] + } + ] +}; + +const stageGuageOption = { + "data": [ + { + "value": 80, + "formatter": "{value} Km/h", + "color": [ + [ + 0.3, + "#67e0e3" + ], + [ + 0.7, + "#37a2da" + ], + [ + 1, + "#fd666d" + ] + ] + } + ] +}; + export default function GaugeChartExample() { return ( <> @@ -26,7 +190,8 @@ export default function GaugeChartExample() { width={500} height={300} config={{ - chartType: "stageGuage", + chartType: "stageGauge", + echartsTitle: "Stage Speed Gauge", }} compFactory={ChartCompWithDefault} /> @@ -35,7 +200,8 @@ export default function GaugeChartExample() { width={500} height={300} config={{ - chartType: "gradeGuage", + chartType: "gradeGauge", + echartsTitle: "Grade Gauge", }} compFactory={ChartCompWithDefault} /> @@ -44,25 +210,230 @@ export default function GaugeChartExample() { width={500} height={300} config={{ - chartType: "temperatureGuage", + chartType: "temperatureGauge", + echartsTitle: "Temperature Gauge Chart", }} compFactory={ChartCompWithDefault} /> + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx index dd6bf3fb5..7ce9f66db 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx @@ -6,27 +6,7 @@ import ExampleGroup from "../../common/ExampleGroup"; const ChartCompWithDefault = uiCompRegistry["chartsGeoMap"].comp; -const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; - -const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; - -const data = JSON.stringify(defaultDataSource); -const echartsOption = JSON.stringify(defaultEchartsJsonOption); - export default function GeoMapChartExample() { - const blackListConfig: string[] = ["data", "echartsOption", "series"]; - const series = [ - { - "columnName": "spending", - "seriesName": "Spending", - "dataIndex": "f011b34c" - }, - { - "columnName": "budget", - "seriesName": "Budget", - "dataIndex": "30e02269" - } -]; return ( <> + + + + + + + + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GraphChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GraphChart.tsx index 3024a613b..b19bf5f6e 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GraphChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GraphChart.tsx @@ -6,27 +6,25 @@ import ExampleGroup from "../../common/ExampleGroup"; const ChartCompWithDefault = uiCompRegistry["graphChart"].comp; -const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; - -const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; +const chartStyle= { + background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)", + chartBorderColor: "#FDFAFA", + chartBorderStyle: "solid", + chartBorderWidth: "2", + chartBoxShadow: "200", + chartShadowColor: "#3377FF" +} -const data = JSON.stringify(defaultDataSource); -const echartsOption = JSON.stringify(defaultEchartsJsonOption); +const titleStyle = { + chartBoxShadow: "9", + chartFontStyle: "Italic", + chartShadowColor: "#FFBD01", + chartTextColor: "#36B389", + chartTextSize: "30", + chartTextWeight: "Bold" +} export default function GraphChartExample() { - const blackListConfig: string[] = ["data", "echartsOption", "series"]; - const series = [ - { - "columnName": "spending", - "seriesName": "Spending", - "dataIndex": "f011b34c" - }, - { - "columnName": "budget", - "seriesName": "Budget", - "dataIndex": "30e02269" - } -]; return ( <> + + + + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HeatmapChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HeatmapChart.tsx index c2a60b7eb..0c82cdd08 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HeatmapChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HeatmapChart.tsx @@ -6,27 +6,45 @@ import ExampleGroup from "../../common/ExampleGroup"; const ChartCompWithDefault = uiCompRegistry["heatmapChart"].comp; -const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; +const chartStyle= { + background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)", + chartBorderColor: "#FDFAFA", + chartBorderStyle: "solid", + chartBorderWidth: "2", + chartBoxShadow: "200", + chartShadowColor: "#3377FF" +} -const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; +const titleStyle = { + chartBoxShadow: "9", + chartFontStyle: "Italic", + chartShadowColor: "#FFBD01", + chartTextColor: "#36B389", + chartTextSize: "30", + chartTextWeight: "Bold" +} -const data = JSON.stringify(defaultDataSource); -const echartsOption = JSON.stringify(defaultEchartsJsonOption); +const xAxisStyle = { + chartBoxShadow: "5", + chartFontFamily: "serif", + chartFontStyle: "Italic", + chartShadowColor: "#020101", + chartTextColor: "#971827", + chartTextSize: "20", + chartTextWeight: "bold" +} + +const yAxisStyle = { + chartBoxShadow: "5", + chartFontFamily: "serif", + chartFontStyle: "Italic", + chartShadowColor: "#FFD701", + chartTextColor: "#7A7A7B", + chartTextSize: "20", + chartTextWeight: "bold" +} export default function HeatmapChartExample() { - const blackListConfig: string[] = ["data", "echartsOption", "series"]; - const series = [ - { - "columnName": "spending", - "seriesName": "Spending", - "dataIndex": "f011b34c" - }, - { - "columnName": "budget", - "seriesName": "Budget", - "dataIndex": "30e02269" - } -]; return ( <> + + + + + + + + + + + + + + + + + + + + + ); diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx index 09d371666..f7fd46951 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx @@ -11,10 +11,12 @@ export default function HillChartExample() { <> + Defining --> Designing --> Building --> Testing --> Deployment --> Planning", }} compFactory={ChartCompWithDefault} /> diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx index 306871822..ac8287742 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx @@ -6,27 +6,7 @@ import ExampleGroup from "../../common/ExampleGroup"; const ChartCompWithDefault = uiCompRegistry["openLayersGeoMap"].comp; -const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; - -const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; - -const data = JSON.stringify(defaultDataSource); -const echartsOption = JSON.stringify(defaultEchartsJsonOption); - export default function OpenLayersGeoMapChartExample() { - const blackListConfig: string[] = ["data", "echartsOption", "series"]; - const series = [ - { - "columnName": "spending", - "seriesName": "Spending", - "dataIndex": "f011b34c" - }, - { - "columnName": "budget", - "seriesName": "Budget", - "dataIndex": "30e02269" - } -]; return ( <> + + + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/RadarChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/RadarChart.tsx index 662ece815..5a211eea9 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/RadarChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/RadarChart.tsx @@ -6,27 +6,45 @@ import ExampleGroup from "../../common/ExampleGroup"; const ChartCompWithDefault = uiCompRegistry["radarChart"].comp; -const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; +const chartStyle= { + background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)", + chartBorderColor: "#FDFAFA", + chartBorderStyle: "solid", + chartBorderWidth: "2", + chartBoxShadow: "200", + chartShadowColor: "#3377FF" +} + +const titleStyle = { + chartBoxShadow: "9", + chartFontStyle: "Italic", + chartShadowColor: "#FFBD01", + chartTextColor: "#36B389", + chartTextSize: "30", + chartTextWeight: "Bold" +} -const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; +const labelStyle = { + chartBoxShadow: "5", + chartFontFamily: "serif", + chartFontStyle: "Italic", + chartShadowColor: "#020101", + chartTextColor: "#FFFFFF", + chartTextSize: "20", + chartTextWeight: "bold" +} -const data = JSON.stringify(defaultDataSource); -const echartsOption = JSON.stringify(defaultEchartsJsonOption); +const legendStyle = { + chartBoxShadow: "5", + chartFontFamily: "serif", + chartFontStyle: "Italic", + chartShadowColor: "#FFD701", + chartTextColor: "#7A7A7B", + chartTextSize: "20", + chartTextWeight: "bold" +} export default function RadarChartExample() { - const blackListConfig: string[] = ["data", "echartsOption", "series"]; - const series = [ - { - "columnName": "spending", - "seriesName": "Spending", - "dataIndex": "f011b34c" - }, - { - "columnName": "budget", - "seriesName": "Budget", - "dataIndex": "30e02269" - } -]; return ( <> + + + + + + + + + + + + + + + + + + + + + + + ); } diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SankeyChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SankeyChart.tsx index c169e7b37..5a2981536 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SankeyChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SankeyChart.tsx @@ -6,27 +6,42 @@ import ExampleGroup from "../../common/ExampleGroup"; const ChartCompWithDefault = uiCompRegistry["sankeyChart"].comp; -const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; +const chartStyle= { + background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)", + chartBorderColor: "#FDFAFA", + chartBorderStyle: "solid", + chartBorderWidth: "2", + chartBoxShadow: "200", + chartShadowColor: "#3377FF" +} -const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; +const titleStyle = { + chartBoxShadow: "9", + chartFontStyle: "Italic", + chartShadowColor: "#FFBD01", + chartTextColor: "#36B389", + chartTextSize: "30", + chartTextWeight: "Bold" +} -const data = JSON.stringify(defaultDataSource); -const echartsOption = JSON.stringify(defaultEchartsJsonOption); +const lineStyle = { + chartBoxShadow: "5", + chartShadowColor: "#020101", + chartBorderColor: "#222222", + chartBorderWidth: "3", +} + +const detailStyle = { + chartBoxShadow: "5", + chartFontFamily: "serif", + chartFontStyle: "Italic", + chartShadowColor: "#FFD701", + chartTextColor: "#7A7A7B", + chartTextSize: "20", + chartTextWeight: "bold" +} export default function SankeyChartExample() { - const blackListConfig: string[] = ["data", "echartsOption", "series"]; - const series = [ - { - "columnName": "spending", - "seriesName": "Spending", - "dataIndex": "f011b34c" - }, - { - "columnName": "budget", - "seriesName": "Budget", - "dataIndex": "30e02269" - } -]; return ( <> + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SunburstChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SunburstChart.tsx index c04aec9d4..468d1ca02 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SunburstChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SunburstChart.tsx @@ -6,29 +6,36 @@ import ExampleGroup from "../../common/ExampleGroup"; const ChartCompWithDefault = uiCompRegistry["sunburstChart"].comp; -const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; +const chartStyle= { + background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)", + chartBorderColor: "#FDFAFA", + chartBorderStyle: "solid", + chartBorderWidth: "2", + chartBoxShadow: "200", + chartShadowColor: "#3377FF" +} -const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; +const titleStyle = { + chartBoxShadow: "9", + chartFontStyle: "Italic", + chartShadowColor: "#FFBD01", + chartTextColor: "#36B389", + chartTextSize: "30", + chartTextWeight: "Bold" +} -const data = JSON.stringify(defaultDataSource); -const echartsOption = JSON.stringify(defaultEchartsJsonOption); +const detailStyle = { + chartFontFamily: "serif", + chartFontStyle: "Italic", + chartTextColor: "#7A7A7B", + chartTextSize: "20", + chartTextWeight: "bold" +} export default function SunburstChartExample() { - const blackListConfig: string[] = ["data", "echartsOption", "series"]; - const series = [ - { - "columnName": "spending", - "seriesName": "Spending", - "dataIndex": "f011b34c" - }, - { - "columnName": "budget", - "seriesName": "Budget", - "dataIndex": "30e02269" - } -]; return ( <> + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ThemeRiverChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ThemeRiverChart.tsx index b8dbe29d8..a32d2f479 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ThemeRiverChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ThemeRiverChart.tsx @@ -6,27 +6,44 @@ import ExampleGroup from "../../common/ExampleGroup"; const ChartCompWithDefault = uiCompRegistry["themeriverChart"].comp; -const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; +const chartStyle= { + background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)", + chartBorderColor: "#FDFAFA", + chartBorderStyle: "solid", + chartBorderWidth: "2", + chartBoxShadow: "200", + chartShadowColor: "#3377FF" +} -const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; +const titleStyle = { + chartBoxShadow: "9", + chartFontStyle: "Italic", + chartShadowColor: "#FFBD01", + chartTextColor: "#36B389", + chartTextSize: "30", + chartTextWeight: "Bold" +} -const data = JSON.stringify(defaultDataSource); -const echartsOption = JSON.stringify(defaultEchartsJsonOption); +const xAxisStyle = { + chartBoxShadow: "5", + chartFontFamily: "serif", + chartFontStyle: "Italic", + chartShadowColor: "#020101", + chartTextColor: "#971827", + chartTextSize: "20", + chartTextWeight: "bold" +} + +const legendStyle = { + chartBoxShadow: "9", + chartFontStyle: "Italic", + chartShadowColor: "#FFBD01", + chartTextColor: "#36B389", + chartTextSize: "15", + chartTextWeight: "Bold" +} export default function ThemeRiverChartExample() { - const blackListConfig: string[] = ["data", "echartsOption", "series"]; - const series = [ - { - "columnName": "spending", - "seriesName": "Spending", - "dataIndex": "f011b34c" - }, - { - "columnName": "budget", - "seriesName": "Budget", - "dataIndex": "30e02269" - } -]; return ( <> + + + + + + + + + + + + + + + + + + + + + ); } diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreeChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreeChart.tsx index b0d10650f..602206f7c 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreeChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreeChart.tsx @@ -6,46 +6,199 @@ import ExampleGroup from "../../common/ExampleGroup"; const ChartCompWithDefault = uiCompRegistry["treeChart"].comp; -const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; +const chartStyle= { + background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)", + chartBorderColor: "#FDFAFA", + chartBorderStyle: "solid", + chartBorderWidth: "2", + chartBoxShadow: "200", + chartShadowColor: "#3377FF" +} -const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; +const titleStyle = { + chartBoxShadow: "9", + chartFontStyle: "Italic", + chartShadowColor: "#FFBD01", + chartTextColor: "#36B389", + chartTextSize: "30", + chartTextWeight: "Bold" +} -const data = JSON.stringify(defaultDataSource); -const echartsOption = JSON.stringify(defaultEchartsJsonOption); +const detailStyle = { + chartFontFamily: "serif", + chartFontStyle: "Italic", + chartTextColor: "#7A7A7B", + chartTextSize: "20", + chartTextWeight: "bold" +} export default function TreeChartExample() { - const blackListConfig: string[] = ["data", "echartsOption", "series"]; - const series = [ - { - "columnName": "spending", - "seriesName": "Spending", - "dataIndex": "f011b34c" - }, - { - "columnName": "budget", - "seriesName": "Budget", - "dataIndex": "30e02269" - } -]; return ( <> + + + + + + + + + + + + + + + + + + + + ); } diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreemapChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreemapChart.tsx index 35fdc1804..0971b5ef0 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreemapChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreemapChart.tsx @@ -6,46 +6,164 @@ import ExampleGroup from "../../common/ExampleGroup"; const ChartCompWithDefault = uiCompRegistry["treemapChart"].comp; -const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]"; +const chartStyle= { + background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)", + chartBorderColor: "#FDFAFA", + chartBorderStyle: "solid", + chartBorderWidth: "2", + chartBoxShadow: "200", + chartShadowColor: "#3377FF" +} -const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}"; +const titleStyle = { + chartBoxShadow: "9", + chartFontStyle: "Italic", + chartShadowColor: "#FFBD01", + chartTextColor: "#36B389", + chartTextSize: "30", + chartTextWeight: "Bold" +} -const data = JSON.stringify(defaultDataSource); -const echartsOption = JSON.stringify(defaultEchartsJsonOption); +const detailStyle = { + chartFontFamily: "serif", + chartFontStyle: "Italic", + chartTextColor: "#fff", + chartTextSize: "20", + chartTextWeight: "bold" +} export default function TreemapChartExample() { - const blackListConfig: string[] = ["data", "echartsOption", "series"]; - const series = [ - { - "columnName": "spending", - "seriesName": "Spending", - "dataIndex": "f011b34c" - }, - { - "columnName": "budget", - "seriesName": "Budget", - "dataIndex": "30e02269" - } -]; return ( <> + + + + + + + + + + + + + + + + ); } diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/CollapsibleContainer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/CollapsibleContainer.tsx new file mode 100644 index 000000000..f7fb4d23c --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/CollapsibleContainer.tsx @@ -0,0 +1,441 @@ +import { ContainerComp } from "comps/comps/containerComp/containerComp"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const container = { + "header": { + "layout": { + "fedaa62": { + "i": "fedaa62", + "h": 5, + "w": 6, + "x": 0, + "y": 0 + }, + "5661db3a": { + "i": "5661db3a", + "h": 5, + "w": 10, + "x": 14, + "y": 0 + } + }, + "items": { + "fedaa62": { + "compType": "text", + "comp": { + "text": "## Personal Details", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "style": { + "background": "#F5F5F6", + "margin": "3px", + "padding": "3px", + "text": "#222222", + "textSize": "14px", + "border": "#D7D9E0", + "borderStyle": "solid", + "radius": "4px", + "borderWidth": "0", + "lineHeight": "18px", + "links": "#3377FF" + }, + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "default-theme-id", + "version": "latest" + }, + "name": "text6" + }, + "5661db3a": { + "compType": "toggleButton", + "comp": { + "value": "true", + "showText": false, + "trueText": "Hide", + "falseText": "Show", + "trueIcon": "/icon:solid/AngleUp", + "falseIcon": "/icon:solid/AngleDown", + "iconPosition": "right", + "alignment": "right", + "style": { + "background": "#F5F5F6", + "margin": "3px", + "padding": "3px", + "text": "#222222", + "textSize": "14px", + "border": "#D7D9E0", + "borderStyle": "solid", + "radius": "4px", + "borderWidth": "1px", + "lineHeight": "18px" + }, + "showBorder": false, + "preventStyleOverwriting": false, + "appliedThemeId": "default-theme-id", + "version": "latest" + }, + "name": "toggleButton3" + } + } + }, + "body": { + "0": { + "view": { + "layout": { + "c93dc520": { + "i": "c93dc520", + "h": 7, + "w": 10, + "x": 0, + "y": 0, + "pos": 0 + }, + "54dd6cc": { + "i": "54dd6cc", + "h": 10, + "w": 10, + "x": 14, + "y": 0, + "pos": 5 + }, + "aa36926a": { + "i": "aa36926a", + "h": 7, + "w": 10, + "x": 0, + "y": 7, + "pos": 1 + }, + "fc179ca5": { + "i": "fc179ca5", + "h": 7, + "w": 10, + "x": 14, + "y": 14, + "pos": 4 + }, + "99d1503e": { + "i": "99d1503e", + "h": 7, + "w": 10, + "x": 0, + "y": 14, + "pos": 6 + } + }, + "items": { + "c93dc520": { + "compType": "input", + "comp": { + "defaultValue": "", + "value": "", + "label": { + "text": "Full Name", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "placeholder": "Full name", + "required": true, + "validationType": "Text", + "style": { + "background": "#00000000", + "border": "#D7D9E0", + "margin": "3px", + "padding": "3px", + "borderStyle": "solid", + "radius": "4px", + "borderWidth": "0px", + "opacity": "1" + }, + "labelStyle": { + "margin": "3px", + "padding": "3px", + "label": "#222222", + "textSize": "14px", + "border": "#D7D9E0", + "borderStyle": "solid", + "borderWidth": "0px", + "accent": "#3377FF" + }, + "prefixIcon": "/icon:solid/file-lines", + "inputFieldStyle": { + "margin": "3px", + "padding": "3px", + "text": "#222222", + "textSize": "14px", + "border": "#D7D9E0", + "borderStyle": "solid", + "radius": "4px", + "borderWidth": "1px", + "accent": "#3377FF" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "default-theme-id", + "version": "latest" + }, + "name": "input1" + }, + "aa36926a": { + "compType": "input", + "comp": { + "defaultValue": "", + "value": "", + "label": { + "text": "Email", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "placeholder": "Email Address", + "required": true, + "validationType": "Email", + "style": { + "background": "#00000000", + "border": "#D7D9E0", + "margin": "3px", + "padding": "3px", + "borderStyle": "solid", + "radius": "4px", + "borderWidth": "0px", + "opacity": "1" + }, + "labelStyle": { + "margin": "3px", + "padding": "3px", + "label": "#222222", + "textSize": "14px", + "border": "#D7D9E0", + "borderStyle": "solid", + "borderWidth": "0px", + "accent": "#3377FF" + }, + "prefixIcon": "/icon:solid/inbox", + "inputFieldStyle": { + "margin": "3px", + "padding": "3px", + "text": "#222222", + "textSize": "14px", + "border": "#D7D9E0", + "borderStyle": "solid", + "radius": "4px", + "borderWidth": "1px", + "accent": "#3377FF" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "default-theme-id", + "version": "latest" + }, + "name": "input2" + }, + "54dd6cc": { + "compType": "radio", + "comp": { + "defaultValue": "1", + "value": "", + "label": { + "text": "Gender", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "options": { + "optionType": "manual", + "manual": { + "manual": [ + { + "value": "1", + "label": "Male" + }, + { + "value": "2", + "label": "Female" + } + ] + }, + "mapData": { + "data": "[]" + } + }, + "style": { + "background": "#00000000", + "border": "#D7D9E0", + "margin": "3px", + "padding": "3px", + "borderStyle": "solid", + "radius": "4px", + "borderWidth": "0px", + "opacity": "1" + }, + "labelStyle": { + "margin": "3px", + "padding": "3px", + "label": "#222222", + "textSize": "14px", + "border": "#D7D9E0", + "borderStyle": "solid", + "borderWidth": "0px", + "accent": "#3377FF" + }, + "layout": "horizontal", + "inputFieldStyle": { + "margin": "3px", + "padding": "3px", + "staticText": "#222222", + "textSize": "14px", + "borderStyle": "solid", + "borderWidth": "1px", + "checkedBackground": "#3377FF", + "uncheckedBorder": "#D7D9E0", + "checkedBorder": "#3377FF" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "default-theme-id", + "version": "latest" + }, + "name": "radio1" + }, + "fc179ca5": { + "compType": "date", + "comp": { + "defaultValue": "", + "value": "", + "userTimeZone": "Europe/Madrid", + "label": { + "text": "DOB", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "placeholder": "Select Date", + "inputFormat": "YYYY-MM-DD", + "style": { + "background": "#00000000", + "border": "#D7D9E0", + "margin": "3px", + "padding": "3px", + "borderStyle": "solid", + "radius": "4px", + "borderWidth": "0px", + "opacity": "1" + }, + "labelStyle": { + "margin": "3px", + "padding": "3px", + "label": "#222222", + "textSize": "14px", + "border": "#D7D9E0", + "borderStyle": "solid", + "borderWidth": "0px" + }, + "suffixIcon": "/icon:regular/calendar", + "minDate": "1960-01-01", + "maxDate": "2010-12-31", + "inputFieldStyle": { + "border": "#D7D9E0", + "radius": "4px", + "text": "#222222", + "margin": "3px", + "padding": "3px", + "borderStyle": "solid", + "borderWidth": "1px", + "accent": "#3377FF" + }, + "timeZone": "Europe/Madrid", + "preventStyleOverwriting": false, + "appliedThemeId": "default-theme-id", + "version": "latest" + }, + "name": "date1" + }, + "99d1503e": { + "compType": "numberInput", + "comp": { + "defaultValue": "", + "value": "", + "placeholder": "+449827222541", + "label": { + "text": "Phone #", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "formatter": "standard", + "step": "", + "controls": false, + "thousandsSeparator": false, + "prefixText": "", + "preventStyleOverwriting": false, + "appliedThemeId": "default-theme-id", + "version": "latest" + }, + "name": "numberInput1" + } + } + } + } + }, + "footer": { + "layout": {} + }, + "showHeader": true, + "showBody": true, + "autoHeight": "auto", + "showVerticalScrollbar": false, + "horizontalGridCells": 24, + "scrollbars": false, + "style": { + "border": "#D7D9E0", + "background": "#FFFFFF", + "radius": "4px", + "borderWidth": "1px", + "borderStyle": "solid", + "margin": "3px", + "padding": "3px" + }, + "appliedThemeId": "default-theme-id" +}; + +export default function CollapsibleContainerExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx index e6a59383c..b86f4ce3b 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx @@ -3,268 +3,235 @@ import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; const columns={ - "manual": [ - { - "id": 0, - "label": "Column1", - "key": "Column1", - "minWidth": "", - "background": "", - "backgroundImage": "", - "border": "", - "radius": "", - "margin": "", - "padding": "" - }, - { - "id": 1, - "label": "Column2", - "key": "Column2", - "minWidth": "", - "background": "", - "backgroundImage": "", - "border": "", - "radius": "", - "margin": "", - "padding": "" - }, - { - "id": 2, - "label": "Add Column1", - "key": "Add Column1", - "minWidth": "", - "background": "", - "backgroundImage": "", - "border": "", - "radius": "", - "margin": "", - "padding": "" - }, - { - "id": 3, - "label": "Add Column2", - "key": "Add Column2", - "minWidth": "", - "background": "", - "backgroundImage": "", - "border": "", - "radius": "", - "margin": "", - "padding": "" - }, - { - "id": 4, - "label": "Add Column3", - "key": "Add Column3", - "minWidth": "", - "background": "", - "backgroundImage": "", - "border": "", - "radius": "", - "margin": "", - "padding": "" - }, - { - "id": 5, - "label": "Add Column4", - "key": "Add Column4", - "minWidth": "", - "background": "", - "backgroundImage": "", - "border": "", - "radius": "", - "margin": "", - "padding": "" - } - ] + "manual": [ + { + "id": 0, + "label": "Column1", + "key": "Column1", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + }, + { + "id": 1, + "label": "Column2", + "key": "Column2", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + }, + { + "id": 2, + "label": "Add Column1", + "key": "Add Column1", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + }, + { + "id": 3, + "label": "Add Column2", + "key": "Add Column2", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + } + ] }; const container={ "0": { "layout": { - "d131aa12": { - "i": "d131aa12", + "164dcb77": { + "i": "164dcb77", "h": 6, - "w": 17, - "x": 4, - "y": 5, - "pos": 1 + "w": 14, + "x": 5, + "y": 4, + "pos": 0 } }, "items": { - "d131aa12": { - "compType": "progress", + "164dcb77": { + "compType": "text", "comp": { - "value": "60", + "text": "### Row1, Column1", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "center", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, "preventStyleOverwriting": false, "appliedThemeId": "", "version": "latest" }, - "name": "progress1" + "name": "text1" } } }, "1": { "layout": { - "e193cd76": { - "i": "e193cd76", + "6e4f0687": { + "i": "6e4f0687", "h": 6, - "w": 24, - "x": 0, - "y": 5, + "w": 14, + "x": 5, + "y": 4, "pos": 0 } }, "items": { - "e193cd76": { - "compType": "button", + "6e4f0687": { + "compType": "text", "comp": { - "text": "Button", - "type": "", - "form": "", + "text": "### Row1, Column2", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "center", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, "preventStyleOverwriting": false, "appliedThemeId": "", "version": "latest" }, - "name": "button1" + "name": "text3" } } }, "2": { "layout": { - "1d3eac41": { - "i": "1d3eac41", - "h": 7, - "w": 21, - "x": 1, - "y": 5, + "b47baba7": { + "i": "b47baba7", + "h": 6, + "w": 14, + "x": 5, + "y": 4, "pos": 0 } }, "items": { - "1d3eac41": { - "compType": "switch", + "b47baba7": { + "compType": "text", "comp": { - "defaultValue": "", - "value": "", - "label": { - "text": "Switch", - "width": "33", - "widthUnit": "%", - "position": "row", - "align": "left" + "text": "### Row2, Column1", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "center", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" }, "preventStyleOverwriting": false, "appliedThemeId": "", "version": "latest" }, - "name": "switch1" + "name": "text2" } } }, "3": { "layout": { - "5853c1f5": { - "i": "5853c1f5", - "h": 20, - "w": 15, - "x": 5, - "y": 0, - "pos": 0 - } - }, - "items": { - "5853c1f5": { - "compType": "progressCircle", - "comp": { - "value": "60", - "preventStyleOverwriting": false, - "appliedThemeId": "", - "version": "latest" - }, - "name": "progressCircle1" - } - } - }, - "4": { - "layout": { - "68b3d00f": { - "i": "68b3d00f", + "ce02a8ee": { + "i": "ce02a8ee", "h": 6, - "w": 23, - "x": 1, - "y": 7, - "pos": 0 - } - }, - "items": { - "68b3d00f": { - "compType": "button", - "comp": { - "text": "Button", - "type": "", - "form": "", - "preventStyleOverwriting": false, - "appliedThemeId": "", - "version": "latest" - }, - "name": "button2" - } - } - }, - "5": { - "layout": { - "307f8e6b": { - "i": "307f8e6b", - "h": 10, - "w": 24, - "x": 0, - "y": 6, + "w": 14, + "x": 5, + "y": 3, "pos": 0 } }, "items": { - "307f8e6b": { - "compType": "checkbox", + "ce02a8ee": { + "compType": "text", "comp": { - "defaultValue": "", - "value": "", - "label": { - "text": "Check box", - "width": "33", - "widthUnit": "%", - "position": "row", - "align": "left" - }, - "options": { - "optionType": "manual", - "manual": { - "manual": [ - { - "value": "1", - "label": "Option 1" - }, - { - "value": "2", - "label": "Option 2" - } - ] - }, - "mapData": { - "data": "[]" - } + "text": "### Row2, Column2", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "center", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" }, - "layout": "horizontal", "preventStyleOverwriting": false, "appliedThemeId": "", "version": "latest" }, - "name": "checkbox1" + "name": "text4" } } } }; +const columnStyle = { + "background": "linear-gradient(45deg, #d53369 0%, #daae51 100%)", + "border": "#222222", + "padding": "0px" +}; + +const style= { + "background": "linear-gradient(135deg, #FFFFFF 0%, rgba(255, 255, 255, 1) 100%)" +}; + export default function ColumnLayoutExample() { return ( <> @@ -275,20 +242,31 @@ export default function ColumnLayoutExample() { @@ -299,48 +277,865 @@ export default function ColumnLayoutExample() { description="The Following Examples Show the Column Layout options on Column Layout Component." > diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/FloatTextContainer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/FloatTextContainer.tsx new file mode 100644 index 000000000..7a1578773 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/FloatTextContainer.tsx @@ -0,0 +1,120 @@ +import { ContainerComp } from "comps/comps/containerComp/containerComp"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const container = { + "header": { + "layout": { + "f1e0a72f": { + "i": "f1e0a72f", + "h": 5, + "w": 24, + "x": 0, + "y": 0 + } + }, + "items": { + "f1e0a72f": { + "compType": "text", + "comp": { + "text": "### Displayed Container Title", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "containerTitle1" + } + } + }, + "body": { + "0": { + "view": { + "layout": { + "e13e96e1": { + "i": "e13e96e1", + "h": 20, + "w": 17, + "x": 3, + "y": 1, + "pos": 0 + } + }, + "items": { + "e13e96e1": { + "compType": "image", + "comp": { + "src": "https://temp.im/350x400", + "autoHeight": "fixed", + "restrictPaddingOnRotation": "image", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "image1" + } + } + } + } + }, + "footer": { + "layout": {} + }, + "showHeader": true, + "showBody": true, + "showFooter": true, + "autoHeight": "auto", + "showVerticalScrollbar": false, + "horizontalGridCells": 24, + "scrollbars": false, + "style": { + "borderWidth": "1px" + }, + "appliedThemeId": "" +}; + +const text ="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat faucibus eleifend. Pellentesque eleifend, risus vel sagittis mattis, mauris ipsum tempor sapien, eu lobortis lacus libero a dui. Cras erat felis, rhoncus vestibulum consectetur et, ultrices ut purus. Sed a tortor orci. Vestibulum nec eleifend ante."; + +export default function FloatTextContainerExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ResponsiveLayout.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ResponsiveLayout.tsx index 926c916df..23152d129 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ResponsiveLayout.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ResponsiveLayout.tsx @@ -2,6 +2,341 @@ import { ResponsiveLayoutComp } from "comps/comps/responsiveLayout/responsiveLay import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const container= { + "0": { + "layout": { + "2c8159fd": { + "i": "2c8159fd", + "h": 23, + "w": 24, + "x": 0, + "y": 0, + "pos": 0 + } + }, + "items": { + "2c8159fd": { + "compType": "text", + "comp": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula quis justo et ornare.", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text1" + } + } + }, + "1": { + "layout": { + "6b3372d7": { + "i": "6b3372d7", + "h": 26, + "w": 24, + "x": 0, + "y": 0, + "pos": 0 + } + }, + "items": { + "6b3372d7": { + "compType": "text", + "comp": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula quis justo et ornare. Pellentesque aliquet libero id scelerisque dapibus. Integer tristique risus a nisl facilisis, vel tincidunt risus venenatis. Ut ut sapien velit. Nunc hendrerit nisi non magna consectetur ullamcorper. ", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text4" + } + } + }, + "2": { + "layout": { + "fb172507": { + "i": "fb172507", + "h": 30, + "w": 24, + "x": 0, + "y": 0, + "pos": 0 + } + }, + "items": { + "fb172507": { + "compType": "text", + "comp": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula quis justo et ornare.", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text2" + } + } + }, + "3": { + "layout": { + "b66b7903": { + "i": "b66b7903", + "h": 33, + "w": 24, + "x": 0, + "y": 0, + "pos": 0 + } + }, + "items": { + "b66b7903": { + "compType": "text", + "comp": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula quis justo et ornare. Pellentesque aliquet libero id scelerisque dapibus. Integer tristique risus a nisl facilisis, vel tincidunt risus venenatis. Ut ut sapien velit. Nunc hendrerit nisi non magna consectetur ullamcorper. ", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text5" + } + } + }, + "4": { + "layout": { + "43127fff": { + "i": "43127fff", + "h": 26, + "w": 24, + "x": 0, + "y": 2, + "pos": 0 + } + }, + "items": { + "43127fff": { + "compType": "text", + "comp": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula quis justo et ornare.", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text3" + } + } + }, + "5": { + "layout": { + "8274cd26": { + "i": "8274cd26", + "h": 33, + "w": 24, + "x": 0, + "y": 0, + "pos": 0 + } + }, + "items": { + "8274cd26": { + "compType": "text", + "comp": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula quis justo et ornare. Pellentesque aliquet libero id scelerisque dapibus. Integer tristique risus a nisl facilisis, vel tincidunt risus venenatis. Ut ut sapien velit. Nunc hendrerit nisi non magna consectetur ullamcorper. ", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "left", + "contentScrollBar": true, + "verticalAlignment": "center", + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text6" + } + } + } +}; + +const column= { + "manual": [ + { + "id": 0, + "label": "Column1", + "key": "Column1", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + }, + { + "id": 1, + "label": "Column2", + "key": "Column2", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + }, + { + "id": 2, + "label": "Column3", + "key": "Column3", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + }, + { + "id": 3, + "label": "Column4", + "key": "Column4", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + }, + { + "id": 4, + "label": "Column5", + "key": "Column5", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + }, + { + "id": 5, + "label": "Column6", + "key": "Column6", + "minWidth": "", + "background": "", + "backgroundImage": "", + "border": "", + "radius": "", + "margin": "", + "padding": "" + } + ] +}; + +const columnStyle= { + "background": "linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%)", + "border": "#222222" +}; + +const style= { + "background": "linear-gradient(45deg, #d53369 0%, #daae51 100%)" +}; + export default function ResponsiveLayoutExample() { return ( <> @@ -11,15 +346,29 @@ export default function ResponsiveLayoutExample() { > @@ -30,16 +379,43 @@ export default function ResponsiveLayoutExample() { description="The Following Examples Show the Layout options on Component." > + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/SplitLayout.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/SplitLayout.tsx new file mode 100644 index 000000000..84cade537 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/SplitLayout.tsx @@ -0,0 +1,214 @@ +import { SplitLayoutComp } from "comps/comps/splitLayout/splitLayout"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const columns= { + "manual": [ + { + "id": 0, + "label": "Area 1", + "key": "Area1", + "minWidth": "10%", + "maxWidth": "90%", + "width": "50%", + "collapsible": false, + "background": "", + "backgroundImage": "", + "padding": "" + }, + { + "id": 1, + "label": "Area 2", + "key": "Area2", + "minWidth": "10%", + "maxWidth": "90%", + "width": "50%", + "collapsible": true, + "background": "", + "backgroundImage": "", + "padding": "" + }, + { + "id": 2, + "label": "Option 1", + "key": "Option 1", + "minWidth": "10%", + "maxWidth": "90%", + "width": "50%", + "collapsible": false, + "background": "", + "backgroundImage": "", + "padding": "" + } + ] +}; + +const bodyStyle= { + background: "#FFFFFF", + border: "#222222", +}; + +const columnStyle= { + background: "#FFFFFF", + border: "#222222", + margin: "10px", +}; + +export default function SplitLayoutExample() { + return ( + <> + + + + + + + + + + + + + + + + + + ); + } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx index a32d10c91..e0725ab3c 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx @@ -10,15 +10,72 @@ export default function BPMNEditorExample() { return ( <> + + + + + + + ); diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx index 9edbeb2ab..f6a05c68b 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx @@ -8,14 +8,119 @@ export default function MentionCompExample() { <> + + + + + + + + + + + + + ); diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Signature.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Signature.tsx index f90c7ef5d..6b456c409 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Signature.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Signature.tsx @@ -11,6 +11,8 @@ export default function SignatureExample() { > + + + + + + + + + + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts b/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts index 007750d93..ca2388e95 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts @@ -94,6 +94,9 @@ import HillChartExample from "./ChartsComp/HillChart"; import BPMNEditorExample from "./MediaComp/BPMNEditor"; import ImageEditorExample from "./presentationComp/imageEditor"; import DrawerExample from "./ChartsComp/Drawer"; +import CollapsibleContainerExample from "./ContainersComp/CollapsibleContainer"; +import FloatTextContainerExample from "./ContainersComp/FloatTextContainer"; +import SplitLayoutExample from "./ContainersComp/SplitLayout"; const examples: { [key in UICompType]?: React.FunctionComponent } = { button: ButtonExample, @@ -191,6 +194,9 @@ const examples: { [key in UICompType]?: React.FunctionComponent } = { bpmnEditor: BPMNEditorExample, imageEditor: ImageEditorExample, drawer: DrawerExample, + collapsibleContainer: CollapsibleContainerExample, + floatTextContainer: FloatTextContainerExample, + splitLayout: SplitLayoutExample, }; export default examples; diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx index a811f8412..40e21298b 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx @@ -6,16 +6,154 @@ import ExampleGroup from "../../common/ExampleGroup"; const ChartCompWithDefault = uiCompRegistry["kanban"].comp; +const assigneeOptions = "[\n {\n \"id\": \"1\",\n \"name\": \"Nancy Davloio\"\n },\n {\n \"id\": \"2\",\n \"name\": \"Andrew Fuller\"\n },\n {\n \"id\": \"3\",\n \"name\": \"James Wilson\"\n },\n {\n \"id\": \"4\",\n \"name\": \"George Linde\"\n }\n]"; + +const data = { + "optionType": "manual", + "manual": { + "manual": [ + { + "label": "Task - 29001", + "status": "Open", + "summary": "Analyze customer requirements.", + "priority": "High", + "tags": "Bug, Release Bug", + "estimate": "0", + "assignee": "Nancy Davloio", + "rankId": "1", + "id": "0" + }, + { + "label": "Task - 29002", + "status": "InProgress", + "summary": "Add responsive support to applicaton", + "priority": "Low", + "tags": "Story, Kanban", + "estimate": "0", + "assignee": "Nancy Davloio", + "rankId": "1", + "id": "1" + }, + { + "label": "Task - 29003", + "status": "Open", + "summary": "Resolve Frontend issues", + "priority": "Medium", + "tags": "Frontend, UI/UX", + "estimate": "2", + "assignee": "Andrew Fuller", + "rankId": "1", + "id": "2" + }, + { + "label": "Task - 29004", + "status": "Open", + "summary": "Setup Docker", + "priority": "1", + "tags": "Docker, Setup", + "estimate": "2", + "assignee": "James Wilson", + "rankId": "0", + "id": "3" + }, + { + "label": "Task - 29005", + "status": "Open", + "summary": "Setup Staging Server", + "priority": "High", + "tags": "Testing, BE", + "estimate": "0", + "assignee": "George Linde", + "rankId": "0", + "id": "4" + }, + { + "label": "Task - 29006", + "status": "InProgress", + "summary": "Implment Payment module", + "priority": "High", + "tags": "Subscription, BE", + "estimate": "2", + "assignee": "James Wilson", + "rankId": "0", + "id": "5" + }, + { + "label": "Task - 29007", + "status": "InProgress", + "summary": "Setup Project Documentation", + "priority": "High", + "tags": "Docs, Requirements", + "estimate": "3", + "assignee": "George Linde", + "rankId": "0", + "id": "6" + }, + { + "label": "Task - 29008", + "status": "Review", + "summary": "Setup MySQL DB", + "priority": "High", + "tags": "DB Setup", + "estimate": "0", + "assignee": "Andrew Fuller", + "rankId": "0", + "id": "7" + }, + { + "label": "Task - 29009", + "status": "Review", + "summary": "Project Setup", + "priority": "High", + "tags": "Setup", + "estimate": "0", + "assignee": "James Wilson", + "rankId": "0", + "id": "8" + }, + { + "label": "Task - 29010", + "status": "Close", + "summary": "Finalize Project Timelines", + "priority": "High", + "tags": "Setup, Timeline", + "estimate": "0", + "assignee": "Nancy Davloio", + "rankId": "0", + "id": "9" + } + ] + }, + "mapData": { + "data": "[{\"label\":\"Task - 29001\",\"status\":\"Open\",\"summary\":\"Analyze customer requirements.\",\"type\":\"\",\"priority\":\"High\",\"tags\":\"Bug, Release Bug\",\"estimate\":0,\"assignee\":\"Nancy Davloio\",\"rankId\":1,\"id\":0},{\"label\":\"Task - 29002\",\"status\":\"InProgress\",\"summary\":\"Add responsive support to applicaton\",\"type\":\"\",\"priority\":\"Low\",\"tags\":\"Story, Kanban\",\"estimate\":0,\"assignee\":\"Nancy Davloio\",\"rankId\":1,\"id\":1},{\"label\":\"Option 1\",\"status\":\"Open\",\"summary\":\"\",\"type\":\"\",\"priority\":\"\",\"tags\":\"\",\"estimate\":0,\"assignee\":\"\",\"rankId\":0,\"id\":2},{\"label\":\"Option 2\",\"status\":\"Open\",\"summary\":\"\",\"type\":\"\",\"priority\":\"\",\"tags\":\"\",\"estimate\":0,\"assignee\":\"\",\"rankId\":0,\"id\":3},{\"label\":\"Option 3\",\"status\":\"Open\",\"summary\":\"\",\"type\":\"\",\"priority\":\"\",\"tags\":\"\",\"estimate\":0,\"assignee\":\"\",\"rankId\":0,\"id\":4},{\"label\":\"Option 4\",\"status\":\"InProgress\",\"summary\":\"\",\"type\":\"\",\"priority\":\"\",\"tags\":\"\",\"estimate\":0,\"assignee\":\"\",\"rankId\":0,\"id\":5},{\"label\":\"Option 5\",\"status\":\"InProgress\",\"summary\":\"\",\"type\":\"\",\"priority\":\"\",\"tags\":\"\",\"estimate\":0,\"assignee\":\"\",\"rankId\":0,\"id\":6},{\"label\":\"Option 6\",\"status\":\"Review\",\"summary\":\"\",\"type\":\"\",\"priority\":\"\",\"tags\":\"\",\"estimate\":0,\"assignee\":\"\",\"rankId\":0,\"id\":7},{\"label\":\"Option 7\",\"status\":\"Review\",\"summary\":\"\",\"type\":\"\",\"priority\":\"\",\"tags\":\"\",\"estimate\":0,\"assignee\":\"\",\"rankId\":0,\"id\":8},{\"label\":\"Option 8\",\"status\":\"Close\",\"summary\":\"\",\"type\":\"\",\"priority\":\"\",\"tags\":\"\",\"estimate\":0,\"assignee\":\"\",\"rankId\":0,\"id\":9}]", + "mapData": { + "status": "Open" + } + } +}; + export default function KanbanExample() { return ( <> + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/table.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/table.tsx index 4a050d0a7..2c1c8167f 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/table.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/table.tsx @@ -51,7 +51,7 @@ export default function TableExample() { /> - + + + + + + + @@ -154,6 +185,46 @@ export default function TableExample() { blackListConfig={blackListConfig} compFactory={TableComp} /> + + + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/File.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/File.tsx index b383bffea..be97c5bdb 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/File.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/File.tsx @@ -8,30 +8,35 @@ export default function FileExample() { <> + + + + + + + + + + + + ); }