From f381f7988c907b05724eac86b36b5f82371577df Mon Sep 17 00:00:00 2001 From: "Adnan.qaops" Date: Wed, 1 Jan 2025 15:33:37 +0500 Subject: [PATCH 1/5] added examples for multiple components --- .../examples/ButtonComp/FloatButton.tsx | 60 +- .../examples/ButtonComp/IconButton.tsx | 5 - .../examples/ContainersComp/ColumnLayout.tsx | 336 +- .../examples/ContainersComp/Container.tsx | 633 ++- .../examples/ContainersComp/PageLayout.tsx | 5036 ++++++++++++++++- .../ContainersComp/TabbedContainer.tsx | 341 +- .../pages/ComponentDoc/examples/IFrame.tsx | 19 +- .../ComponentDoc/examples/MediaComp/Icons.tsx | 22 + .../examples/MediaComp/LottieAnimation.tsx | 88 + .../examples/MediaComp/QRCode.tsx | 35 + .../examples/MediaComp/Scanner.tsx | 52 + .../ComponentDoc/examples/MediaComp/Shape.tsx | 36 + .../ComponentDoc/examples/MediaComp/Tour.tsx | 20 + .../ComponentDoc/examples/formComp/Form.tsx | 664 +++ .../examples/formComp/JSONEditor.tsx | 132 + .../examples/formComp/JSONExplorer.tsx | 73 + .../examples/formComp/JSONSchemaform.tsx | 17 +- .../src/pages/ComponentDoc/examples/index.ts | 25 +- .../examples/presentationComp/chart.tsx | 2 +- .../presentationComp/customComponent.tsx | 24 + .../presentationComp/imageCarousel.tsx | 81 + .../examples/presentationComp/listView.tsx | 216 +- .../examples/selectInputComp/AutoComplete.tsx | 22 +- .../examples/selectInputComp/StepControl.tsx | 112 + 24 files changed, 7875 insertions(+), 176 deletions(-) create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Icons.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/LottieAnimation.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/QRCode.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Scanner.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Shape.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Tour.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/customComponent.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/imageCarousel.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/StepControl.tsx diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/FloatButton.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/FloatButton.tsx index 3e94f40db..f91649d12 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/FloatButton.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/FloatButton.tsx @@ -3,6 +3,25 @@ import { trans } from "i18n"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const buttons = { + "manual": [ + { + "id": 0, + "label": "Option 1", + "badge": "1", + "description": "", + "icon": "/icon:antd/filetextoutlined" + }, + { + "id": 1, + "label": "Option 2", + "badge": "0", + "description": "", + "icon": "/icon:antd/filetextoutlined" + } + ] +}; + export default function FloatButtonExample() { return ( <> @@ -13,44 +32,13 @@ export default function FloatButtonExample() { - - diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx index 666e1ab68..3740aa123 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx @@ -12,14 +12,9 @@ export default function IconButtonExample() { > 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 7aaec0c2e..e6a59383c 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx @@ -2,6 +2,269 @@ import { ColumnLayoutComp } from "comps/comps/columnLayout/columnLayout"; 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": "" + } + ] +}; + +const container={ + "0": { + "layout": { + "d131aa12": { + "i": "d131aa12", + "h": 6, + "w": 17, + "x": 4, + "y": 5, + "pos": 1 + } + }, + "items": { + "d131aa12": { + "compType": "progress", + "comp": { + "value": "60", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "progress1" + } + } + }, + "1": { + "layout": { + "e193cd76": { + "i": "e193cd76", + "h": 6, + "w": 24, + "x": 0, + "y": 5, + "pos": 0 + } + }, + "items": { + "e193cd76": { + "compType": "button", + "comp": { + "text": "Button", + "type": "", + "form": "", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "button1" + } + } + }, + "2": { + "layout": { + "1d3eac41": { + "i": "1d3eac41", + "h": 7, + "w": 21, + "x": 1, + "y": 5, + "pos": 0 + } + }, + "items": { + "1d3eac41": { + "compType": "switch", + "comp": { + "defaultValue": "", + "value": "", + "label": { + "text": "Switch", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "switch1" + } + } + }, + "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", + "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, + "pos": 0 + } + }, + "items": { + "307f8e6b": { + "compType": "checkbox", + "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": "[]" + } + }, + "layout": "horizontal", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "checkbox1" + } + } + } +}; + export default function ColumnLayoutExample() { return ( <> @@ -11,37 +274,21 @@ export default function ColumnLayoutExample() { > - @@ -53,22 +300,47 @@ export default function ColumnLayoutExample() { > + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx index 84e0dd6ab..cc90bdf6e 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx @@ -2,6 +2,150 @@ import { ContainerComp } from "comps/comps/containerComp/containerComp"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const container={ + "header": { + "layout": { + "a6083c0a": { + "i": "a6083c0a", + "h": 5, + "w": 24, + "x": 0, + "y": 0 + } + }, + "items": { + "a6083c0a": { + "compType": "text", + "comp": { + "text": "### Welcome Back!", + "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": "formTitle1" + } + } + }, + "body": { + "0": { + "view": { + "layout": { + "a6f7c0e4": { + "i": "a6f7c0e4", + "h": 7, + "w": 14, + "x": 0, + "y": 0, + "pos": 0 + }, + "c5b32ee6": { + "i": "c5b32ee6", + "h": 7, + "w": 14, + "x": 0, + "y": 7, + "pos": 1 + } + }, + "items": { + "a6f7c0e4": { + "compType": "input", + "comp": { + "defaultValue": "", + "value": "", + "label": { + "text": "Email", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "validationType": "Email", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "input1" + }, + "c5b32ee6": { + "compType": "password", + "comp": { + "defaultValue": "", + "value": "", + "label": { + "text": "Password", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "validationType": "Regex", + "visibilityToggle": true, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "password1" + } + } + } + } + }, + "footer": { + "layout": { + "95ccf34e": { + "i": "95ccf34e", + "h": 5, + "w": 10, + "x": 14, + "y": 0 + } + }, + "items": { + "95ccf34e": { + "compType": "button", + "comp": { + "text": "Login", + "type": "submit", + "form": "form1", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "formButton1" + } + } + }, + "showHeader": true, + "showBody": true, + "showFooter": true, + "autoHeight": "auto", + "showVerticalScrollbar": false, + "horizontalGridCells": 24, + "scrollbars": false, + "style": { + "borderWidth": "1px" + }, + "appliedThemeId": "" +}; + export default function ContainerExample() { return ( <> @@ -10,37 +154,490 @@ export default function ContainerExample() { description="The Following Examples Show the Basic Usage of the Container Component." > - - - + + + + + + + + ); } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx index 7cc6a9113..a80ce5f57 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx @@ -2,24 +2,656 @@ import { PageLayoutComp } from "comps/comps/containerComp/pageLayoutComp"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const container={ + "header": { + "layout": { + "f7820dbc": { + "i": "f7820dbc", + "h": 6, + "w": 24, + "x": 0, + "y": 0, + "pos": 0 + } + }, + "items": { + "f7820dbc": { + "compType": "text", + "comp": { + "text": "### Page Layout Header", + "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": "text1" + } + } + }, + "sider": { + "layout": { + "a9d16086": { + "i": "a9d16086", + "h": 6, + "w": 22, + "x": 0, + "y": 0, + "pos": 0 + } + }, + "items": { + "a9d16086": { + "compType": "dropdown", + "comp": { + "text": "Menu", + "options": { + "optionType": "manual", + "manual": { + "manual": [ + { + "label": "Option 1" + }, + { + "label": "Option 2" + } + ] + }, + "mapData": { + "data": "[]" + } + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "dropdown1" + } + } + }, + "body": { + "0": { + "view": { + "layout": { + "163bc2f3": { + "i": "163bc2f3", + "h": 45, + "w": 21, + "x": 3, + "y": 0, + "pos": 0 + } + }, + "items": { + "163bc2f3": { + "compType": "table", + "comp": { + "showRowGridBorder": true, + "showHRowGridBorder": true, + "autoHeight": "auto", + "data": "[\n {\n \"id\": 1,\n \"name\": \"Reagen Gilberthorpe\",\n \"date\": \"7/5/2022\",\n \"department\": \"Marketing\"\n },\n {\n \"id\": 2,\n \"name\": \"Haroun Lortzing\",\n \"date\": \"11/6/2022\",\n \"department\": \"Human Resources\"\n },\n {\n \"id\": 3,\n \"name\": \"Garret Kilmaster\",\n \"date\": \"11/14/2021\",\n \"department\": \"Research and Development\"\n },\n {\n \"id\": 4,\n \"name\": \"Israel Harrowsmith\",\n \"date\": \"4/3/2022\",\n \"department\": \"Training\"\n },\n {\n \"id\": 5,\n \"name\": \"Loren O'Lagen\",\n \"date\": \"9/10/2022\",\n \"department\": \"Services\"\n },\n {\n \"id\": 6,\n \"name\": \"Wallis Hothersall\",\n \"date\": \"4/18/2022\",\n \"department\": \"Accounting\"\n },\n {\n \"id\": 7,\n \"name\": \"Kaia Biskup\",\n \"date\": \"3/4/2022\",\n \"department\": \"Sales\"\n },\n {\n \"id\": 8,\n \"name\": \"Travers Saterweyte\",\n \"date\": \"1/9/2022\",\n \"department\": \"Human Resources\"\n },\n {\n \"id\": 9,\n \"name\": \"Mikey Niemetz\",\n \"date\": \"1/4/2022\",\n \"department\": \"Marketing\"\n },\n {\n \"id\": 10,\n \"name\": \"Mano Meckiff\",\n \"date\": \"2/19/2022\",\n \"department\": \"Research and Development\"\n }\n]", + "showDataLoadSpinner": true, + "columns": [ + { + "title": "ID", + "showTitle": true, + "isCustom": false, + "dataIndex": "id", + "width": "55", + "autoWidth": "fixed", + "render": { + "compType": "text", + "comp": { + "text": "{{currentCell}}" + } + }, + "align": "left", + "fixed": "close", + "background": "", + "margin": "", + "text": "", + "border": "", + "borderWidth": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "", + "summaryColumns": [ + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + } + ] + }, + { + "title": "Name", + "showTitle": true, + "isCustom": false, + "dataIndex": "name", + "width": "200", + "autoWidth": "fixed", + "render": { + "compType": "text", + "comp": { + "text": "{{currentCell}}" + } + }, + "align": "left", + "fixed": "close", + "background": "", + "margin": "", + "text": "", + "border": "", + "borderWidth": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "", + "summaryColumns": [ + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + } + ] + }, + { + "title": "Date", + "showTitle": true, + "isCustom": false, + "dataIndex": "date", + "width": "110", + "autoWidth": "fixed", + "render": { + "compType": "text", + "comp": { + "text": "{{currentCell}}" + } + }, + "align": "left", + "fixed": "close", + "background": "", + "margin": "", + "text": "", + "border": "", + "borderWidth": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "", + "summaryColumns": [ + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + } + ] + }, + { + "title": "Department", + "showTitle": true, + "isCustom": false, + "dataIndex": "department", + "width": "250", + "autoWidth": "fixed", + "render": { + "compType": "tag", + "comp": { + "text": "{{currentCell}}", + "tagColors": { + "optionType": "manual", + "manual": { + "manual": [ + { + "label": "Tag1", + "icon": "/icon:solid/tag", + "color": "#f50" + }, + { + "label": "Tag2", + "icon": "/icon:solid/tag", + "color": "#2db7f5" + } + ] + }, + "mapData": { + "data": "[]", + "mapData": { + "color": "" + } + } + } + } + }, + "align": "left", + "fixed": "close", + "background": "", + "margin": "", + "text": "", + "border": "", + "borderWidth": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "", + "summaryColumns": [ + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + }, + { + "isCustom": false, + "dataIndex": "", + "render": { + "compType": "text", + "comp": {} + }, + "align": "left", + "background": "", + "margin": "", + "text": "", + "border": "", + "radius": "", + "textSize": "", + "textWeight": "normal", + "fontFamily": "sans-serif", + "fontStyle": "normal", + "textOverflow": "ellipsis", + "linkColor": "#3377ff", + "linkHoverColor": "", + "linkActiveColor": "" + } + ] + } + ], + "size": "middle", + "selection": { + "mode": "single" + }, + "pagination": { + "changeablePageSize": null, + "pageSizeOptions": "[5, 10, 20, 50]" + }, + "sort": [], + "toolbar": { + "showRefresh": true, + "showDownload": true, + "showFilter": true, + "position": "below", + "columnSeparator": ",", + "showUpdateButtons": true + }, + "summaryRows": "1", + "rowAutoHeight": "auto", + "tableAutoHeight": "auto", + "expansion": { + "slot": { + "container": { + "layout": {} + } + } + }, + "editModeClicks": "single", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "table1" + } + } + } + } + }, + "footer": { + "layout": { + "3a74e36e": { + "i": "3a74e36e", + "h": 6, + "w": 24, + "x": 0, + "y": 2, + "pos": 0 + } + }, + "items": { + "3a74e36e": { + "compType": "text", + "comp": { + "text": "### Page Layout Footer", + "autoHeight": "auto", + "type": "markdown", + "horizontalAlignment": "center", + "contentScrollBar": true, + "verticalAlignment": "center", + "style": { + "background": "#fff" + }, + "margin": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "padding": { + "left": "", + "right": "", + "top": "", + "bottom": "" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "text2" + } + } + }, + "showHeader": true, + "showSider": true, + "innerSider": true, + "siderCollapsible": true, + "siderCollapsed": true, + "siderRight": false, + "siderWidth": "20%", + "siderCollapsedWidth": "0", + "showFooter": true, + "horizontalGridCells": 24, + "autoHeight": "auto", + "siderScrollbars": false, + "contentScrollbars": false, + "mainScrollbars": false, + "appliedThemeId": "" +}; + export default function PageLayoutExample() { return ( <> + @@ -30,29 +662,4389 @@ export default function PageLayoutExample() { description="The Following Examples Show the Layout options on Component." > + + + + + + + + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx index 4f51f953c..599157687 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx @@ -2,24 +2,273 @@ import { TabbedContainerComp } from "comps/comps/tabs/tabbedContainerComp"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const container={ + "0": { + "layout": { + "acf186c7": { + "i": "acf186c7", + "h": 24, + "w": 7, + "x": 6, + "y": 0, + "pos": 0 + } + }, + "items": { + "acf186c7": { + "compType": "text", + "comp": { + "text": "### This is Tab # 1", + "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": { + "e7160f3d": { + "i": "e7160f3d", + "h": 6, + "w": 7, + "x": 7, + "y": 2, + "pos": 0 + } + }, + "items": { + "e7160f3d": { + "compType": "text", + "comp": { + "text": "### This is Tab # 2", + "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" + } + } + }, + "2": { + "layout": { + "480e1038": { + "i": "480e1038", + "h": 6, + "w": 7, + "x": 7, + "y": 1, + "pos": 0 + } + }, + "items": { + "480e1038": { + "compType": "text", + "comp": { + "text": "### This is Tab # 3", + "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" + } + } + }, + "3": { + "layout": { + "69edd323": { + "i": "69edd323", + "h": 6, + "w": 7, + "x": 7, + "y": 1, + "pos": 0 + } + }, + "items": { + "69edd323": { + "compType": "text", + "comp": { + "text": "### This is Tab # 4", + "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" + } + } + }, + "4": { + "layout": { + "2038ea0e": { + "i": "2038ea0e", + "h": 6, + "w": 7, + "x": 8, + "y": 1, + "pos": 0 + } + }, + "items": { + "2038ea0e": { + "compType": "text", + "comp": { + "text": "### This is Tab # 5", + "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" + } + } + } +}; + +const tab={ + "manual": [ + { + "id": 0, + "label": "Tab1", + "key": "Tab1", + "iconPosition": "left" + }, + { + "id": 1, + "label": "Tab2", + "key": "Tab2", + "iconPosition": "left" + }, + { + "id": 2, + "label": "Tab3", + "key": "Tab3", + "iconPosition": "left" + }, + { + "id": 3, + "label": "Tab4", + "key": "Tab4", + "iconPosition": "left" + }, + { + "id": 4, + "label": "Tab5", + "key": "Tab5", + "iconPosition": "left" + } + ] +}; + export default function TabbedContainerExample() { return ( <> @@ -31,45 +280,21 @@ export default function TabbedContainerExample() { > @@ -81,43 +306,61 @@ export default function TabbedContainerExample() { > diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/IFrame.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/IFrame.tsx index ba562b36d..49b1fd0db 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/IFrame.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/IFrame.tsx @@ -7,15 +7,22 @@ export default function IFrameExample() { return ( <> + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Icons.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Icons.tsx new file mode 100644 index 000000000..02f204afe --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Icons.tsx @@ -0,0 +1,22 @@ +import { IconComp } from "comps/comps/iconComp"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function IconExample() { + return ( + <> + + + + + ); + } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/LottieAnimation.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/LottieAnimation.tsx new file mode 100644 index 000000000..1f0dfa614 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/LottieAnimation.tsx @@ -0,0 +1,88 @@ +import { JsonLottieComp } from "comps/comps/jsonComp/jsonLottieComp"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function JsonLottieAnimationExample() { + return ( + <> + + + + + + + + + + + + + + + + ); + } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/QRCode.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/QRCode.tsx new file mode 100644 index 000000000..e56cda509 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/QRCode.tsx @@ -0,0 +1,35 @@ +import { QRCodeComp } from "comps/comps/qrCodeComp"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function QRCodeExample() { + return ( + <> + + + + + + + ); + } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Scanner.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Scanner.tsx new file mode 100644 index 000000000..6cd6ef8ef --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Scanner.tsx @@ -0,0 +1,52 @@ +import { ScannerComp } from "comps/comps/buttonComp/scannerComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function ScannerExample() { + return ( + <> + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Shape.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Shape.tsx new file mode 100644 index 000000000..1b5259742 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Shape.tsx @@ -0,0 +1,36 @@ +import { ShapeComp } from "comps/comps/shapeComp/shapeComp"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function ShapeExample() { + return ( + <> + + + + + + + ); + } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Tour.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Tour.tsx new file mode 100644 index 000000000..bc4875426 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Tour.tsx @@ -0,0 +1,20 @@ +import { TourComp } from "comps/comps/tourComp/tourComp"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function TourExample() { + return ( + <> + + + + + ); + } \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx new file mode 100644 index 000000000..eaa8ddada --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx @@ -0,0 +1,664 @@ +import { FormComp } from "comps/comps/formComp/formComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const container={ + "header": { + "layout": { + "a6083c0a": { + "i": "a6083c0a", + "h": 5, + "w": 24, + "x": 0, + "y": 0 + } + }, + "items": { + "a6083c0a": { + "compType": "text", + "comp": { + "text": "### Welcome Back!", + "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": "formTitle1" + } + } + }, + "body": { + "0": { + "view": { + "layout": { + "a6f7c0e4": { + "i": "a6f7c0e4", + "h": 7, + "w": 14, + "x": 0, + "y": 0, + "pos": 0 + }, + "c5b32ee6": { + "i": "c5b32ee6", + "h": 7, + "w": 14, + "x": 0, + "y": 7, + "pos": 1 + } + }, + "items": { + "a6f7c0e4": { + "compType": "input", + "comp": { + "defaultValue": "", + "value": "", + "label": { + "text": "Email", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "validationType": "Email", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "input1" + }, + "c5b32ee6": { + "compType": "password", + "comp": { + "defaultValue": "", + "value": "", + "label": { + "text": "Password", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "left" + }, + "validationType": "Regex", + "visibilityToggle": true, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "password1" + } + } + } + } + }, + "footer": { + "layout": { + "95ccf34e": { + "i": "95ccf34e", + "h": 5, + "w": 10, + "x": 14, + "y": 0 + } + }, + "items": { + "95ccf34e": { + "compType": "button", + "comp": { + "text": "Login", + "type": "submit", + "form": "form1", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "formButton1" + } + } + }, + "showHeader": true, + "showBody": true, + "showFooter": true, + "autoHeight": "auto", + "showVerticalScrollbar": false, + "horizontalGridCells": 24, + "scrollbars": false, + "style": { + "borderWidth": "1px" + }, + "appliedThemeId": "" +}; + +export default function FormExample() { + return ( + <> + + + + + + + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx new file mode 100644 index 000000000..dc1b3db1f --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx @@ -0,0 +1,132 @@ +import { JsonEditorComp } from "comps/comps/jsonComp/jsonEditorComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const schema='{\n "title": "User profile",\n "description": "form example",\n "type": "object",\n "required": [\n "name",\n "phone"\n ],\n "properties": {\n "name": {\n "type": "string",\n "title": "Name"\n },\n "phone": {\n "type": "string",\n "title": "Phone",\n "minLength": 11\n },\n "birthday": {\n "type": "string",\n "title": "Birthday"\n }\n }\n}'; +const uiSchema='{\n "name": {\n "ui:autofocus": true,\n "ui:emptyValue": ""\n },\n "phone": {\n "ui:help": "Please input a 11 digits number"\n },\n "birthday": {\n "ui:widget": "date"\n }\n}'; +const data='{\n "name": "Tom",\n "phone": "13488886666",\n "birthday": "1980-03-16"\n}'; + +export default function JsonEditorExample() { + return ( + <> + + + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx new file mode 100644 index 000000000..022c55088 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx @@ -0,0 +1,73 @@ +import { JsonExplorerComp } from "comps/comps/jsonComp/jsonExplorerComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const schema='{\n "title": "User profile",\n "description": "form example",\n "type": "object",\n "required": [\n "name",\n "phone"\n ],\n "properties": {\n "name": {\n "type": "string",\n "title": "Name"\n },\n "phone": {\n "type": "string",\n "title": "Phone",\n "minLength": 11\n },\n "birthday": {\n "type": "string",\n "title": "Birthday"\n }\n }\n}'; +const uiSchema='{\n "name": {\n "ui:autofocus": true,\n "ui:emptyValue": ""\n },\n "phone": {\n "ui:help": "Please input a 11 digits number"\n },\n "birthday": {\n "ui:widget": "date"\n }\n}'; +const data='{\n "name": "Tom",\n "phone": "13488886666",\n "birthday": "1980-03-16"\n}'; +export default function JsonExplorerExample() { + return ( + <> + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx index 587ee3cf4..61b2fa22a 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx @@ -8,10 +8,10 @@ export default function jsonSchemaFormExample() { <> + ); diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts b/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts index 1a8e04233..a17809c02 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts @@ -56,7 +56,18 @@ import ColumnLayoutExample from "./ContainersComp/ColumnLayout"; import TabbedContainerExample from "./ContainersComp/TabbedContainer"; import ContainerExample from "./ContainersComp/Container"; import ContentCardExample from "./MediaComp/ContentCard"; - +import ImageCarouselExample from "./presentationComp/imageCarousel"; +import FormExample from "./formComp/Form"; +import JsonEditorExample from "./formComp/JSONEditor"; +import JsonExplorerExample from "./formComp/JSONExplorer"; +import ShapeExample from "./MediaComp/Shape"; +import JsonLottieAnimationExample from "./MediaComp/LottieAnimation"; +import IconExample from "./MediaComp/Icons"; +import TourExample from "./MediaComp/Tour"; +import QRCodeExample from "./MediaComp/QRCode"; +import StepControlExample from "./selectInputComp/StepControl"; +import CustomCompExample from "./presentationComp/customComponent"; +import ScannerExample from "./MediaComp/Scanner"; const examples: { [key in UICompType]?: React.FunctionComponent } = { button: ButtonExample, @@ -116,6 +127,18 @@ const examples: { [key in UICompType]?: React.FunctionComponent } = { tabbedContainer: TabbedContainerExample, container: ContainerExample, card: ContentCardExample, + carousel: ImageCarouselExample, + form: FormExample, + jsonEditor: JsonEditorExample, + jsonExplorer: JsonExplorerExample, + shape: ShapeExample, + jsonLottie: JsonLottieAnimationExample, + icon: IconExample, + tour: TourExample, + qrCode: QRCodeExample, + step: StepControlExample, + custom: CustomCompExample, + scanner: ScannerExample, }; export default examples; diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/chart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/chart.tsx index b7c85bfe1..fe540f332 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/chart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/chart.tsx @@ -4,7 +4,7 @@ import { chartColorPalette } from "lowcoder-design"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; -const ChartCompWithDefault = uiCompRegistry["chart"].comp; +const ChartCompWithDefault = uiCompRegistry["basicChart"].comp; const defaultDataSource = [ { diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/customComponent.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/customComponent.tsx new file mode 100644 index 000000000..c405d1128 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/customComponent.tsx @@ -0,0 +1,24 @@ +import { CustomComp } from "comps/comps/customComp/customComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function CustomCompExample() { + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/imageCarousel.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/imageCarousel.tsx new file mode 100644 index 000000000..a90e5e3f1 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/imageCarousel.tsx @@ -0,0 +1,81 @@ +import { CarouselComp } from "comps/comps/carouselComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function ImageCarouselExample() { + return ( + <> + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx index d11cd2d82..51d5704e5 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx @@ -3,17 +3,229 @@ import { trans } from "i18n"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const container={ + "layout": { + "9bb47110": { + "i": "9bb47110", + "w": 6, + "h": 14, + "x": 0, + "y": 0 + }, + "aad8227a": { + "i": "aad8227a", + "h": 5, + "w": 17, + "x": 7, + "y": 0 + }, + "68e1f6b2": { + "i": "68e1f6b2", + "h": 5, + "w": 17, + "x": 7, + "y": 9 + } + }, + "items": { + "9bb47110": { + "compType": "image", + "comp": { + "src": "{{currentItem.cover}}", + "autoHeight": "fixed", + "restrictPaddingOnRotation": "image", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "image1" + }, + "aad8227a": { + "compType": "link", + "comp": { + "text": "{{i+1}}. {{currentItem.title}}", + "onEvent": [ + { + "name": "click", + "handler": { + "compType": "goToURL", + "comp": { + "url": "{{currentItem.url}}", + "query": [ + {} + ], + "hash": [ + {} + ], + "inNewTab": true + }, + "condition": "", + "slowdown": "debounce", + "delay": "" + } + } + ], + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "link1" + }, + "68e1f6b2": { + "compType": "rating", + "comp": { + "defaultValue": "{{currentItem.rate / 2}}", + "value": "", + "max": "5", + "label": { + "text": "", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "right" + }, + "allowHalf": true, + "disabled": "true", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "rating1" + } + } +}; + export default function ListViewExample() { + + const blackListConfig: string[] = [ + "container" + ]; return ( <> + + + + + + + + + + + + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/AutoComplete.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/AutoComplete.tsx index 5e05cf20f..0b55898ac 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/AutoComplete.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/AutoComplete.tsx @@ -3,6 +3,25 @@ import { trans } from "i18n"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; +const items=[ + { + "value": "1-BeiJing", + "label": "北京" + }, + { + "value": "2-ShangHai", + "label": "上海" + }, + { + "value": "3-GuangDong", + "label": "广东" + }, + { + "value": "4-ShenZhen", + "label": "深圳" + } +]; + export default function AutoCompleteExample() { return ( <> @@ -13,8 +32,7 @@ export default function AutoCompleteExample() { diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/StepControl.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/StepControl.tsx new file mode 100644 index 000000000..d2e51248a --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/StepControl.tsx @@ -0,0 +1,112 @@ +import { StepComp } from "comps/comps/selectInputComp/stepControl"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function StepControlExample() { + return ( + <> + + + + + + + + + + + + + + + + + + + + + ); + } \ No newline at end of file From 405537d83e392866984a507cc25ffd71bbb40f9c Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Wed, 1 Jan 2025 18:04:30 +0500 Subject: [PATCH 2/5] fixed iconButton comp --- .../meetingComp/videobuttonCompConstants.tsx | 22 +++++++------------ .../examples/ButtonComp/IconButton.tsx | 14 ++++++------ 2 files changed, 15 insertions(+), 21 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx index 6bdf5c242..9a7a0d43b 100644 --- a/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx @@ -1,22 +1,16 @@ +import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; +import { ButtonStyle } from "@lowcoder-ee/comps/controls/styleControlConstants"; +import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators"; +import { refMethods } from "@lowcoder-ee/comps/generators/withMethodExposing"; +import { blurMethod, clickMethod, focusWithOptions } from "@lowcoder-ee/comps/utils/methodUtils"; import { default as Button } from "antd/es/button"; -import { - styleControl, - ButtonStyleType, - ButtonStyle, - migrateOldData, - refMethods, - blurMethod, - clickMethod, - focusWithOptions, - genActiveColor, - genHoverColor, -} from "lowcoder-sdk"; +import { genActiveColor, genHoverColor } from "components/colorSelect/colorUtils"; import styled, { css } from "styled-components"; // import { genActiveColor, genHoverColor } from "lowcoder-design"; export function getButtonStyle(buttonStyle: any) { - const hoverColor = genHoverColor(buttonStyle.background); - const activeColor = genActiveColor(buttonStyle.background); + const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background); + const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background); return css` &&& { border-radius: ${buttonStyle.radius}; diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx index 3740aa123..3e9bbdd0d 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx @@ -1,4 +1,4 @@ -import { IconComp } from "comps/comps/iconComp"; +import { ControlButton } from "comps/comps/meetingComp/controlButton"; import { trans } from "i18n"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; @@ -16,19 +16,19 @@ export default function IconButtonExample() { prefixIcon: "/icon:solid/align-justify", iconSize: "30px", }} - compFactory={IconComp} + compFactory={ControlButton} /> @@ -39,7 +39,7 @@ export default function IconButtonExample() { config={{ style: { backgroundColor: "#CD574C", borderColor: "#AC3A32", color: "#E0ECF6" }, }} - compFactory={IconComp} + compFactory={ControlButton} /> From 97268578d6ba25ed3e892c8256858fa377bc5c9d Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Wed, 1 Jan 2025 18:24:07 +0500 Subject: [PATCH 3/5] fixed component docs for iconComp --- client/packages/lowcoder/src/comps/comps/iconComp.tsx | 6 +++--- .../src/pages/ComponentDoc/examples/MediaComp/Icons.tsx | 3 +++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx index 990f8531c..35d638f32 100644 --- a/client/packages/lowcoder/src/comps/comps/iconComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/iconComp.tsx @@ -41,9 +41,9 @@ const Container = styled.div<{ ${(props) => props.$style && css` - height: calc(100% - ${props.$style.margin}); - width: calc(100% - ${props.$style.margin}); - padding: ${props.$style.padding}; + height: calc(100% - ${props.$style.margin ?? '0px'}); + width: calc(100% - ${props.$style.margin ?? '0px'}); + padding: ${props.$style.padding ?? '0px'}; margin: ${props.$style.margin}; border: ${props.$style.borderWidth} solid ${props.$style.border}; border-radius: ${props.$style.radius}; diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Icons.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Icons.tsx index 02f204afe..7e29d7cea 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Icons.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Icons.tsx @@ -10,9 +10,12 @@ export default function IconExample() { > From 47c101bf1f37ff67a10b7486c1e9e5286d3a8ec7 Mon Sep 17 00:00:00 2001 From: "Adnan.qaops" Date: Wed, 8 Jan 2025 11:20:03 +0500 Subject: [PATCH 4/5] added examples for different components --- .../examples/ButtonComp/FloatButton.tsx | 40 +- .../examples/ButtonComp/IconButton.tsx | 74 +++- .../examples/CalendarInputComp/Calendar.tsx | 25 ++ .../examples/ChartsComp/BasicChart.tsx | 391 ++++++++++++++++++ .../examples/ChartsComp/BasicChartLegacy.tsx | 391 ++++++++++++++++++ .../examples/ChartsComp/CandleStickChart.tsx | 62 +++ .../examples/ChartsComp/Drawer.tsx | 116 ++++++ .../examples/ChartsComp/FunnelChart.tsx | 62 +++ .../examples/ChartsComp/GanttChart.tsx | 25 ++ .../examples/ChartsComp/GaugeChart.tsx | 62 +++ .../examples/ChartsComp/GeoMapChart.tsx | 62 +++ .../examples/ChartsComp/GraphChart.tsx | 62 +++ .../examples/ChartsComp/HeatmapChart.tsx | 62 +++ .../examples/ChartsComp/HillChart.tsx | 25 ++ .../examples/ChartsComp/MermaidChart.tsx | 62 +++ .../examples/ChartsComp/Modal.tsx | 116 ++++++ .../examples/ChartsComp/OpenLayersGeoMap.tsx | 62 +++ .../examples/ChartsComp/RadarChart.tsx | 62 +++ .../examples/ChartsComp/SankeyChart.tsx | 62 +++ .../examples/ChartsComp/SunburstChart.tsx | 62 +++ .../examples/ChartsComp/ThemeRiverChart.tsx | 62 +++ .../examples/ChartsComp/TreeChart.tsx | 62 +++ .../examples/ChartsComp/TreemapChart.tsx | 62 +++ .../examples/MediaComp/BPMNEditor.tsx | 25 ++ .../ComponentDoc/examples/MediaComp/Icons.tsx | 52 ++- .../examples/MediaComp/Mention.tsx | 22 + .../examples/MediaComp/TurnstileCaptcha.tsx | 25 ++ .../src/pages/ComponentDoc/examples/index.ts | 52 +++ .../examples/presentationComp/Kanban.tsx | 25 ++ .../examples/presentationComp/gridView.tsx | 242 +++++++++++ .../examples/presentationComp/imageEditor.tsx | 25 ++ .../examples/presentationComp/pivotTable.tsx | 25 ++ .../examples/selectInputComp/AutoComplete.tsx | 97 ++++- .../examples/selectInputComp/Tree.tsx | 9 +- .../examples/selectInputComp/TreeSelect.tsx | 1 + 35 files changed, 2629 insertions(+), 42 deletions(-) create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChart.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChartLegacy.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/Drawer.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/FunnelChart.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GraphChart.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HeatmapChart.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/MermaidChart.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/Modal.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/RadarChart.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SankeyChart.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SunburstChart.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ThemeRiverChart.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreeChart.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreemapChart.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/TurnstileCaptcha.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/imageEditor.tsx create mode 100644 client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/pivotTable.tsx diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/FloatButton.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/FloatButton.tsx index f91649d12..252e3d782 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/FloatButton.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/FloatButton.tsx @@ -27,21 +27,51 @@ export default function FloatButtonExample() { <> + + + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx index 3e9bbdd0d..67a3fad0d 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx @@ -8,36 +8,58 @@ export default function IconButtonExample() { <> + - + @@ -45,7 +67,11 @@ export default function IconButtonExample() { title={trans("componentDoc.warning")} width={120} config={{ - style: { backgroundColor: "#F4A125", borderColor: "#DA7D16", color: "#000000" }, + prefixIcon: "/icon:solid/square-caret-right", + style: { + backgroundColor: "#F4A125", + borderColor: "#DA7D16", + color: "#000000" }, }} compFactory={ControlButton} /> @@ -53,7 +79,37 @@ export default function IconButtonExample() { title={trans("componentDoc.success")} width={120} config={{ - style: { backgroundColor: "#5E8D6E", borderColor: "#40694E", color: "#E0ECF6" }, + prefixIcon: "/icon:antd/audiofilled", + style: { + backgroundColor: "#5E8D6E", + borderColor: "#40694E", + color: "#E0ECF6" }, + }} + compFactory={ControlButton} + /> + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx new file mode 100644 index 000000000..6370df675 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["calendar"].comp; + +export default function CalendarExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChart.tsx new file mode 100644 index 000000000..fe540f332 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChart.tsx @@ -0,0 +1,391 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["basicChart"].comp; + +const defaultDataSource = [ + { + date: "2021-09", + department: "Administration", + spending: 9003, + budget: 8000, + }, + { + date: "2021-09", + department: "Finance", + spending: 3033, + budget: 4000, + }, + { + date: "2021-09", + department: "Sales", + spending: 9230, + budget: 8000, + }, + { + date: "2021-10", + department: "Administration", + spending: 13032, + budget: 15000, + }, + { + date: "2021-10", + department: "Finance", + spending: 2300, + budget: 5000, + }, + { + date: "2021-10", + department: "Sales", + spending: 7323.5, + budget: 8000, + }, + { + date: "2021-11", + department: "Administration", + spending: 13000, + budget: 16023, + }, + { + date: "2021-11", + department: "Finance", + spending: 3569.5, + budget: 3000, + }, + { + date: "2021-11", + department: "Sales", + spending: 10000, + budget: 9932, + }, + { + date: "2021-12", + department: "Administration", + spending: 18033, + budget: 20000, + }, + { + date: "2021-12", + department: "Finance", + spending: 4890, + budget: 4500, + }, + { + date: "2021-12", + department: "Sales", + spending: 9322, + budget: 8000, + }, +]; + +const defaultEchartsJsonOption = { + title: { + text: "Funnel Chart", + left: "center", + }, + backgroundColor: "#ffffff", + color: chartColorPalette, + tooltip: { + trigger: "item", + formatter: "{a}
{b} : {c}%", + }, + legend: { + data: ["Show", "Click", "Visit", "Query", "Buy"], + top: "bottom", + }, + series: [ + { + name: "Funnel", + type: "funnel", + left: "10%", + top: 60, + bottom: 60, + width: "80%", + min: 0, + max: 100, + gap: 2, + label: { + show: true, + position: "inside", + }, + data: [ + { value: 100, name: "Show" }, + { value: 80, name: "Click" }, + { value: 60, name: "Visit" }, + { value: 40, name: "Query" }, + { value: 20, name: "Buy" }, + ], + }, + ], +}; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function ChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + columnName: "spending", + seriesName: "Spending", + hide: false, + dataIndex: "b498129d", + }, + { + columnName: "budget", + seriesName: "Budget", + hide: false, + dataIndex: "663942bf", + }, + ]; + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChartLegacy.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChartLegacy.tsx new file mode 100644 index 000000000..fe540f332 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChartLegacy.tsx @@ -0,0 +1,391 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["basicChart"].comp; + +const defaultDataSource = [ + { + date: "2021-09", + department: "Administration", + spending: 9003, + budget: 8000, + }, + { + date: "2021-09", + department: "Finance", + spending: 3033, + budget: 4000, + }, + { + date: "2021-09", + department: "Sales", + spending: 9230, + budget: 8000, + }, + { + date: "2021-10", + department: "Administration", + spending: 13032, + budget: 15000, + }, + { + date: "2021-10", + department: "Finance", + spending: 2300, + budget: 5000, + }, + { + date: "2021-10", + department: "Sales", + spending: 7323.5, + budget: 8000, + }, + { + date: "2021-11", + department: "Administration", + spending: 13000, + budget: 16023, + }, + { + date: "2021-11", + department: "Finance", + spending: 3569.5, + budget: 3000, + }, + { + date: "2021-11", + department: "Sales", + spending: 10000, + budget: 9932, + }, + { + date: "2021-12", + department: "Administration", + spending: 18033, + budget: 20000, + }, + { + date: "2021-12", + department: "Finance", + spending: 4890, + budget: 4500, + }, + { + date: "2021-12", + department: "Sales", + spending: 9322, + budget: 8000, + }, +]; + +const defaultEchartsJsonOption = { + title: { + text: "Funnel Chart", + left: "center", + }, + backgroundColor: "#ffffff", + color: chartColorPalette, + tooltip: { + trigger: "item", + formatter: "{a}
{b} : {c}%", + }, + legend: { + data: ["Show", "Click", "Visit", "Query", "Buy"], + top: "bottom", + }, + series: [ + { + name: "Funnel", + type: "funnel", + left: "10%", + top: 60, + bottom: 60, + width: "80%", + min: 0, + max: 100, + gap: 2, + label: { + show: true, + position: "inside", + }, + data: [ + { value: 100, name: "Show" }, + { value: 80, name: "Click" }, + { value: 60, name: "Visit" }, + { value: 40, name: "Query" }, + { value: 20, name: "Buy" }, + ], + }, + ], +}; + +const data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +export default function ChartExample() { + const blackListConfig: string[] = ["data", "echartsOption", "series"]; + const series = [ + { + columnName: "spending", + seriesName: "Spending", + hide: false, + dataIndex: "b498129d", + }, + { + columnName: "budget", + seriesName: "Budget", + hide: false, + dataIndex: "663942bf", + }, + ]; + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx new file mode 100644 index 000000000..8a390545b --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx @@ -0,0 +1,62 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["candleStickChart"].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 CandleStickChartExample() { + 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/Drawer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/Drawer.tsx new file mode 100644 index 000000000..e6d9806ef --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/Drawer.tsx @@ -0,0 +1,116 @@ +import { DrawerComp } from "comps/hooks/drawerComp"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const container= { + "layout": { + "66becc94": { + "i": "66becc94", + "h": 6, + "w": 19, + "x": 2, + "y": 0, + "pos": 0 + }, + "735d7cd0": { + "i": "735d7cd0", + "h": 6, + "w": 4, + "x": 12, + "y": 6, + "pos": 1 + }, + "97e5bad5": { + "i": "97e5bad5", + "h": 6, + "w": 4, + "x": 16, + "y": 6, + "pos": 1 + } + }, + "items": { + "66becc94": { + "compType": "text", + "comp": { + "text": "### Would you like to save the changes?", + "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" + }, + "97e5bad5": { + "compType": "button", + "comp": { + "text": "No", + "type": "", + "form": "", + "style": { + "background": "#E60202" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "button1" + }, + "735d7cd0": { + "compType": "button", + "comp": { + "text": "Yes", + "type": "", + "form": "", + "style": { + "background": "#1C8701" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "button2" + } + } +}; + +export default function DrawerExample() { + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/FunnelChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/FunnelChart.tsx new file mode 100644 index 000000000..8fd87ac7d --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/FunnelChart.tsx @@ -0,0 +1,62 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["funnelChart"].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 FunnelChartExample() { + 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/GanttChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx new file mode 100644 index 000000000..5107be785 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["ganttChart"].comp; + +export default function GanttChartExample() { + return ( + <> + + + + + ); +} \ 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 new file mode 100644 index 000000000..073a431d0 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx @@ -0,0 +1,62 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["gaugeChart"].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 GaugeChartExample() { + 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/GeoMapChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx new file mode 100644 index 000000000..defcb7a19 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx @@ -0,0 +1,62 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +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 new file mode 100644 index 000000000..5f02e843e --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GraphChart.tsx @@ -0,0 +1,62 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +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 data = JSON.stringify(defaultDataSource); +const echartsOption = JSON.stringify(defaultEchartsJsonOption); + +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 new file mode 100644 index 000000000..1b0312bdd --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HeatmapChart.tsx @@ -0,0 +1,62 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +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 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 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 new file mode 100644 index 000000000..09d371666 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["hillchart"].comp; + +export default function HillChartExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/MermaidChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/MermaidChart.tsx new file mode 100644 index 000000000..a7b59cbf2 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/MermaidChart.tsx @@ -0,0 +1,62 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["mermaid"].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 MermaidChartExample() { + 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/Modal.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/Modal.tsx new file mode 100644 index 000000000..dfc05897e --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/Modal.tsx @@ -0,0 +1,116 @@ +import { ModalComp } from "comps/hooks/modalComp"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const container= { + "layout": { + "66becc94": { + "i": "66becc94", + "h": 6, + "w": 19, + "x": 2, + "y": 0, + "pos": 0 + }, + "735d7cd0": { + "i": "735d7cd0", + "h": 6, + "w": 4, + "x": 12, + "y": 6, + "pos": 1 + }, + "97e5bad5": { + "i": "97e5bad5", + "h": 6, + "w": 4, + "x": 16, + "y": 6, + "pos": 1 + } + }, + "items": { + "66becc94": { + "compType": "text", + "comp": { + "text": "### Would you like to save the changes?", + "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" + }, + "97e5bad5": { + "compType": "button", + "comp": { + "text": "No", + "type": "", + "form": "", + "style": { + "background": "#E60202" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "button1" + }, + "735d7cd0": { + "compType": "button", + "comp": { + "text": "Yes", + "type": "", + "form": "", + "style": { + "background": "#1C8701" + }, + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "button2" + } + } +}; + +export default function ModalExample() { + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx new file mode 100644 index 000000000..64ff31626 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx @@ -0,0 +1,62 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +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 new file mode 100644 index 000000000..143d28620 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/RadarChart.tsx @@ -0,0 +1,62 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +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 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 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 new file mode 100644 index 000000000..c1d496e6b --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SankeyChart.tsx @@ -0,0 +1,62 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +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 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 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 new file mode 100644 index 000000000..2fcf53779 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SunburstChart.tsx @@ -0,0 +1,62 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +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 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 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 new file mode 100644 index 000000000..c3d6da21c --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ThemeRiverChart.tsx @@ -0,0 +1,62 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +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 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 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 new file mode 100644 index 000000000..31037df07 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreeChart.tsx @@ -0,0 +1,62 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +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 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 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 new file mode 100644 index 000000000..6a6c37841 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreemapChart.tsx @@ -0,0 +1,62 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +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 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 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/MediaComp/BPMNEditor.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx new file mode 100644 index 000000000..a32d10c91 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["bpmnEditor"].comp; + +export default function BPMNEditorExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Icons.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Icons.tsx index 7e29d7cea..3e6190a15 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Icons.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Icons.tsx @@ -7,15 +7,55 @@ export default function IconExample() { <> + + + + diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx new file mode 100644 index 000000000..9edbeb2ab --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx @@ -0,0 +1,22 @@ +import { MentionComp } from "comps/comps/textInputComp/mentionComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +export default function MentionCompExample() { + return ( + <> + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/TurnstileCaptcha.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/TurnstileCaptcha.tsx new file mode 100644 index 000000000..fecbc3281 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/TurnstileCaptcha.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["turnstileCaptcha"].comp; + +export default function TurnstileCaptchaExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts b/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts index a17809c02..007750d93 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/index.ts @@ -68,6 +68,32 @@ import QRCodeExample from "./MediaComp/QRCode"; import StepControlExample from "./selectInputComp/StepControl"; import CustomCompExample from "./presentationComp/customComponent"; import ScannerExample from "./MediaComp/Scanner"; +import CandleStickChartExample from "./ChartsComp/CandleStickChart"; +import GridViewExample from "./presentationComp/gridView"; +import ModalExample from "./ChartsComp/Modal"; +import FunnelChartExample from "./ChartsComp/FunnelChart"; +import GaugeChartExample from "./ChartsComp/GaugeChart"; +import GraphChartExample from "./ChartsComp/GraphChart"; +import HeatmapChartExample from "./ChartsComp/HeatmapChart"; +import RadarChartExample from "./ChartsComp/RadarChart"; +import SankeyChartExample from "./ChartsComp/SankeyChart"; +import SunburstChartExample from "./ChartsComp/SunburstChart"; +import ThemeRiverChartExample from "./ChartsComp/ThemeRiverChart"; +import TreeChartExample from "./ChartsComp/TreeChart"; +import TreemapChartExample from "./ChartsComp/TreemapChart"; +import OpenLayersGeoMapChartExample from "./ChartsComp/OpenLayersGeoMap"; +import GeoMapChartExample from "./ChartsComp/GeoMapChart"; +import MermaidChartExample from "./ChartsComp/MermaidChart"; +import MentionCompExample from "./MediaComp/Mention"; +import CalendarExample from "./CalendarInputComp/Calendar"; +import PivotTableExample from "./presentationComp/pivotTable"; +import TurnstileCaptchaExample from "./MediaComp/TurnstileCaptcha"; +import GanttChartExample from "./ChartsComp/GanttChart"; +import KanbanExample from "./presentationComp/Kanban"; +import HillChartExample from "./ChartsComp/HillChart"; +import BPMNEditorExample from "./MediaComp/BPMNEditor"; +import ImageEditorExample from "./presentationComp/imageEditor"; +import DrawerExample from "./ChartsComp/Drawer"; const examples: { [key in UICompType]?: React.FunctionComponent } = { button: ButtonExample, @@ -139,6 +165,32 @@ const examples: { [key in UICompType]?: React.FunctionComponent } = { step: StepControlExample, custom: CustomCompExample, scanner: ScannerExample, + candleStickChart: CandleStickChartExample, + grid: GridViewExample, + modal: ModalExample, + funnelChart: FunnelChartExample, + gaugeChart: GaugeChartExample, + graphChart: GraphChartExample, + heatmapChart: HeatmapChartExample, + radarChart: RadarChartExample, + sankeyChart: SankeyChartExample, + sunburstChart: SunburstChartExample, + themeriverChart: ThemeRiverChartExample, + treeChart: TreeChartExample, + treemapChart: TreemapChartExample, + openLayersGeoMap: OpenLayersGeoMapChartExample, + chartsGeoMap: GeoMapChartExample, + mermaid: MermaidChartExample, + mention: MentionCompExample, + calendar: CalendarExample, + pivotTable: PivotTableExample, + turnstileCaptcha: TurnstileCaptchaExample, + ganttChart: GanttChartExample, + kanban: KanbanExample, + hillchart: HillChartExample, + bpmnEditor: BPMNEditorExample, + imageEditor: ImageEditorExample, + drawer: DrawerExample, }; 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 new file mode 100644 index 000000000..a811f8412 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["kanban"].comp; + +export default function KanbanExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx new file mode 100644 index 000000000..31eaea4cc --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx @@ -0,0 +1,242 @@ +import { GridComp } from "comps/comps/listViewComp/gridComp"; +import { trans } from "i18n"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const container={ + "layout": { + "9bb47110": { + "i": "9bb47110", + "w": 6, + "h": 14, + "x": 0, + "y": 0 + }, + "aad8227a": { + "i": "aad8227a", + "h": 5, + "w": 17, + "x": 7, + "y": 0 + }, + "68e1f6b2": { + "i": "68e1f6b2", + "h": 5, + "w": 17, + "x": 7, + "y": 9 + } + }, + "items": { + "9bb47110": { + "compType": "image", + "comp": { + "src": "{{currentItem.cover}}", + "autoHeight": "fixed", + "restrictPaddingOnRotation": "image", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "image1" + }, + "aad8227a": { + "compType": "link", + "comp": { + "text": "{{i+1}}. {{currentItem.title}}", + "onEvent": [ + { + "name": "click", + "handler": { + "compType": "goToURL", + "comp": { + "url": "{{currentItem.url}}", + "query": [ + {} + ], + "hash": [ + {} + ], + "inNewTab": true + }, + "condition": "", + "slowdown": "debounce", + "delay": "" + } + } + ], + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "link1" + }, + "68e1f6b2": { + "compType": "rating", + "comp": { + "defaultValue": "{{currentItem.rate / 2}}", + "value": "", + "max": "5", + "label": { + "text": "", + "width": "33", + "widthUnit": "%", + "position": "row", + "align": "right" + }, + "allowHalf": true, + "disabled": "true", + "preventStyleOverwriting": false, + "appliedThemeId": "", + "version": "latest" + }, + "name": "rating1" + } + } +}; + +export default function GridViewExample() { + + const blackListConfig: string[] = [ + "container" + ]; + return ( + <> + + + + + + + + + + + + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/imageEditor.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/imageEditor.tsx new file mode 100644 index 000000000..62981a0f4 --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/imageEditor.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["imageEditor"].comp; + +export default function ImageEditorExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/pivotTable.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/pivotTable.tsx new file mode 100644 index 000000000..c567b228d --- /dev/null +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/pivotTable.tsx @@ -0,0 +1,25 @@ +import { uiCompRegistry } from "comps/uiCompRegistry"; +import { trans } from "i18n"; +import { chartColorPalette } from "lowcoder-design"; +import Example from "../../common/Example"; +import ExampleGroup from "../../common/ExampleGroup"; + +const ChartCompWithDefault = uiCompRegistry["pivotTable"].comp; + +export default function PivotTableExample() { + return ( + <> + + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/AutoComplete.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/AutoComplete.tsx index 0b55898ac..65e3a7f72 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/AutoComplete.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/AutoComplete.tsx @@ -3,39 +3,96 @@ import { trans } from "i18n"; import Example from "../../common/Example"; import ExampleGroup from "../../common/ExampleGroup"; -const items=[ - { - "value": "1-BeiJing", - "label": "北京" - }, - { - "value": "2-ShangHai", - "label": "上海" - }, - { - "value": "3-GuangDong", - "label": "广东" - }, - { - "value": "4-ShenZhen", - "label": "深圳" - } -]; +const items= "[\n {\n \"value\": \"1-BeiJing\",\n \"label\": \"Beijing\"\n },\n {\n \"value\": \"2-ShangHai\",\n \"label\": \"Shanghai\"\n },\n {\n \"value\": \"3-GuangDong\",\n \"label\": \"Guandong\"\n },\n {\n \"value\": \"4-ShenZhen\",\n \"label\": \"Shenzhen\"\n }\n]"; export default function AutoCompleteExample() { return ( <> + + + + + + + + + + ); diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Tree.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Tree.tsx index b81253b57..556cb637d 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Tree.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Tree.tsx @@ -49,7 +49,7 @@ export default function TreeExample() { description={trans("componentDoc.basicDemoDescription")} > Date: Fri, 10 Jan 2025 11:08:46 +0500 Subject: [PATCH 5/5] added different examples for multiple components --- .../examples/ChartsComp/BasicChart.tsx | 31 -- .../examples/ChartsComp/BasicChartLegacy.tsx | 11 - .../examples/ChartsComp/CandleStickChart.tsx | 158 +++++++-- .../examples/ChartsComp/FunnelChart.tsx | 308 ++++++++++++++++-- .../examples/ChartsComp/GaugeChart.tsx | 70 ++-- .../examples/ChartsComp/GeoMapChart.tsx | 11 - .../examples/ChartsComp/GraphChart.tsx | 11 - .../examples/ChartsComp/HeatmapChart.tsx | 11 - .../examples/ChartsComp/MermaidChart.tsx | 11 - .../examples/ChartsComp/OpenLayersGeoMap.tsx | 11 - .../examples/ChartsComp/RadarChart.tsx | 11 - .../examples/ChartsComp/SankeyChart.tsx | 11 - .../examples/ChartsComp/SunburstChart.tsx | 11 - .../examples/ChartsComp/ThemeRiverChart.tsx | 11 - .../examples/ChartsComp/TreeChart.tsx | 11 - .../examples/ChartsComp/TreemapChart.tsx | 11 - 16 files changed, 449 insertions(+), 250 deletions(-) diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChart.tsx index fe540f332..75a9e7de9 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChart.tsx @@ -159,17 +159,6 @@ export default function ChartExample() { }} compFactory={ChartCompWithDefault} /> - @@ -366,26 +355,6 @@ export default function ChartExample() { compFactory={ChartCompWithDefault} /> - - - - ); } diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChartLegacy.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChartLegacy.tsx index fe540f332..1e771dc5e 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChartLegacy.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChartLegacy.tsx @@ -159,17 +159,6 @@ export default function ChartExample() { }} compFactory={ChartCompWithDefault} /> - 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 8a390545b..544055abe 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx @@ -6,53 +6,161 @@ import ExampleGroup from "../../common/ExampleGroup"; const ChartCompWithDefault = uiCompRegistry["candleStickChart"].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 = { + "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 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 CandleStickChartExample() { - const blackListConfig: string[] = ["data", "echartsOption", "series"]; - const series = [ - { - "columnName": "spending", - "seriesName": "Spending", - "dataIndex": "f011b34c" - }, - { - "columnName": "budget", - "seriesName": "Budget", - "dataIndex": "30e02269" - } -]; + const blackListConfig: string[] = ["echartsOption"]; return ( <> + + + + + + + + + + + + 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 8fd87ac7d..424b8a102 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/FunnelChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/FunnelChart.tsx @@ -6,53 +6,297 @@ import ExampleGroup from "../../common/ExampleGroup"; const ChartCompWithDefault = uiCompRegistry["funnelChart"].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 FunnelChartExample() { - 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/GaugeChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx index 073a431d0..7a57ee549 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx @@ -6,53 +6,63 @@ import ExampleGroup from "../../common/ExampleGroup"; const ChartCompWithDefault = uiCompRegistry["gaugeChart"].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 GaugeChartExample() { - 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/GeoMapChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx index defcb7a19..dd6bf3fb5 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx @@ -45,17 +45,6 @@ export default function GeoMapChartExample() { }} compFactory={ChartCompWithDefault} /> - ); 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 5f02e843e..3024a613b 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GraphChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GraphChart.tsx @@ -45,17 +45,6 @@ export default function GraphChartExample() { }} compFactory={ChartCompWithDefault} /> - ); 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 1b0312bdd..c2a60b7eb 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HeatmapChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HeatmapChart.tsx @@ -45,17 +45,6 @@ export default function HeatmapChartExample() { }} compFactory={ChartCompWithDefault} /> - ); diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/MermaidChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/MermaidChart.tsx index a7b59cbf2..e27c85d4d 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/MermaidChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/MermaidChart.tsx @@ -45,17 +45,6 @@ export default function MermaidChartExample() { }} 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 64ff31626..306871822 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx @@ -45,17 +45,6 @@ export default function OpenLayersGeoMapChartExample() { }} compFactory={ChartCompWithDefault} /> - ); 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 143d28620..662ece815 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/RadarChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/RadarChart.tsx @@ -45,17 +45,6 @@ export default function RadarChartExample() { }} compFactory={ChartCompWithDefault} /> - ); 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 c1d496e6b..c169e7b37 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SankeyChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SankeyChart.tsx @@ -45,17 +45,6 @@ export default function SankeyChartExample() { }} compFactory={ChartCompWithDefault} /> - ); 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 2fcf53779..c04aec9d4 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SunburstChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/SunburstChart.tsx @@ -45,17 +45,6 @@ export default function SunburstChartExample() { }} compFactory={ChartCompWithDefault} /> - ); 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 c3d6da21c..b8dbe29d8 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ThemeRiverChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/ThemeRiverChart.tsx @@ -45,17 +45,6 @@ export default function ThemeRiverChartExample() { }} compFactory={ChartCompWithDefault} /> - ); 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 31037df07..b0d10650f 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreeChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreeChart.tsx @@ -45,17 +45,6 @@ export default function TreeChartExample() { }} compFactory={ChartCompWithDefault} /> - ); 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 6a6c37841..35fdc1804 100644 --- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreemapChart.tsx +++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/TreemapChart.tsx @@ -45,17 +45,6 @@ export default function TreemapChartExample() { }} compFactory={ChartCompWithDefault} /> - );