lowcoder-map-component 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (123) hide show
  1. package/README.md +37 -0
  2. package/icons/demo-icon.svg +10 -0
  3. package/icons/hills.svg +17 -0
  4. package/index.css +27 -0
  5. package/index.html +35 -0
  6. package/index.tsx +20 -0
  7. package/loader.mjs +11 -0
  8. package/package.json +175 -0
  9. package/src/README.md +35 -0
  10. package/src/components/ChartPropertyView.tsx +961 -0
  11. package/src/components/SeriesComp.tsx +368 -0
  12. package/src/components/TabPropertyView.tsx +127 -0
  13. package/src/comps/Barcharts/comp.tsx +338 -0
  14. package/src/comps/Barcharts/constants.tsx +77 -0
  15. package/src/comps/Linecharts/comp.tsx +350 -0
  16. package/src/comps/Linecharts/constants.tsx +53 -0
  17. package/src/comps/Linechartsv2/comp.tsx +350 -0
  18. package/src/comps/Linechartsv2/constants.tsx +68 -0
  19. package/src/comps/Mapcharts/comp.tsx +381 -0
  20. package/src/comps/Mapcharts/constants.tsx +312 -0
  21. package/src/comps/Mapchartsv2/comp.tsx +393 -0
  22. package/src/comps/Mapchartsv2/constants.tsx +340 -0
  23. package/src/comps/MixedLineBarCharts/comp.tsx +353 -0
  24. package/src/comps/MixedLineBarCharts/constants.tsx +60 -0
  25. package/src/comps/MultiLineCharts/comp.tsx +362 -0
  26. package/src/comps/MultiLineCharts/constants.tsx +96 -0
  27. package/src/comps/PercentageCharts/comp.tsx +359 -0
  28. package/src/comps/PercentageCharts/constants.tsx +98 -0
  29. package/src/comps/Piecharts/comp.tsx +334 -0
  30. package/src/comps/Piecharts/constants.tsx +48 -0
  31. package/src/comps/Tablecharts/comp.tsx +429 -0
  32. package/src/comps/Tablecharts/constants.tsx +97 -0
  33. package/src/comps/Totalcharts/comp.tsx +463 -0
  34. package/src/comps/Totalcharts/constants.tsx +66 -0
  35. package/src/comps/TwoLineCharts/comp.tsx +350 -0
  36. package/src/comps/TwoLineCharts/constants.tsx +82 -0
  37. package/src/comps/mapComponent/comp.tsx +338 -0
  38. package/src/comps/mapComponent/constants.tsx +2149 -0
  39. package/src/comps/tab/comp.tsx +283 -0
  40. package/src/comps/tab/constants.tsx +79 -0
  41. package/src/configs/barChartConfig.tsx +153 -0
  42. package/src/configs/baseConfig.tsx +66 -0
  43. package/src/configs/candleStickChartConfig.tsx +35 -0
  44. package/src/configs/cartesianAxisConfig.tsx +314 -0
  45. package/src/configs/chartUrls.tsx +9 -0
  46. package/src/configs/echartConfig.tsx +260 -0
  47. package/src/configs/echartsLabelConfig.tsx +47 -0
  48. package/src/configs/echartsLegendConfig.tsx +29 -0
  49. package/src/configs/echartsTitleConfig.tsx +49 -0
  50. package/src/configs/echartsTitleVerticalConfig.tsx +50 -0
  51. package/src/configs/funnelChartConfig.tsx +35 -0
  52. package/src/configs/gaugeChartConfig.tsx +31 -0
  53. package/src/configs/graphChartConfig.tsx +31 -0
  54. package/src/configs/heatmapChartConfig.tsx +31 -0
  55. package/src/configs/legendConfig.tsx +55 -0
  56. package/src/configs/lineChartConfig.tsx +246 -0
  57. package/src/configs/lineChartConfigv2.tsx +246 -0
  58. package/src/configs/mapChartConfig.tsx +106 -0
  59. package/src/configs/mapChartConfigv2.tsx +106 -0
  60. package/src/configs/mixedChartConfig.tsx +21 -0
  61. package/src/configs/pieChartConfig.tsx +156 -0
  62. package/src/configs/radarChartConfig.tsx +31 -0
  63. package/src/configs/sankeyChartConfig.tsx +35 -0
  64. package/src/configs/scatterChartConfig.tsx +152 -0
  65. package/src/configs/sunburstChartConfig.tsx +31 -0
  66. package/src/configs/tabConfig.tsx +0 -0
  67. package/src/configs/tableChartConfig.tsx +81 -0
  68. package/src/configs/themeriverChartConfig.tsx +31 -0
  69. package/src/configs/totalChartConfig.tsx +670 -0
  70. package/src/configs/treeChartConfig.tsx +31 -0
  71. package/src/configs/treemapChartConfig.tsx +31 -0
  72. package/src/controls/AnimationsControls.tsx +3 -0
  73. package/src/controls/AutoHeightControl.tsx +2 -0
  74. package/src/controls/AxisControls.tsx +146 -0
  75. package/src/controls/AxisVisibilityControl.tsx +14 -0
  76. package/src/controls/ChartTypeControl.tsx +15 -0
  77. package/src/controls/ColorScaleControl.tsx +221 -0
  78. package/src/controls/ColumnControl.tsx +204 -0
  79. package/src/controls/ConfigControl.tsx +37 -0
  80. package/src/controls/DirectionControls.tsx +20 -0
  81. package/src/controls/IconControl.tsx +88 -0
  82. package/src/controls/LegendControl.tsx +8 -0
  83. package/src/controls/RowLimitControl.tsx +91 -0
  84. package/src/controls/StyleControls.tsx +22 -0
  85. package/src/controls/TimeControls.tsx +41 -0
  86. package/src/controls/TrendlineControl.tsx +89 -0
  87. package/src/controls/UIEventControl.tsx +21 -0
  88. package/src/controls/index.ts +16 -0
  89. package/src/controls/radioControl.tsx +88 -0
  90. package/src/exposing/index.ts +3 -0
  91. package/src/exposing/setPoint.ts +19 -0
  92. package/src/geo/vn.geo.json +369897 -0
  93. package/src/geo/world.geo.json +32127 -0
  94. package/src/i18n/comps/index.tsx +39 -0
  95. package/src/i18n/comps/locales/en.ts +558 -0
  96. package/src/i18n/comps/locales/enObj.tsx +7186 -0
  97. package/src/i18n/comps/locales/index.ts +7 -0
  98. package/src/i18n/comps/locales/pt.ts +37 -0
  99. package/src/i18n/comps/locales/ptObj.tsx +40 -0
  100. package/src/i18n/comps/locales/types.tsx +622 -0
  101. package/src/i18n/comps/locales/zh.ts +3 -0
  102. package/src/i18n/comps/locales/zhObj.tsx +4 -0
  103. package/src/index.ts +31 -0
  104. package/src/types/global.d.ts +9 -0
  105. package/src/types/lowcoder-sdk.d.ts +578 -0
  106. package/src/utils/chartStyle.util.ts +121 -0
  107. package/src/utils/columnExtractor.util.ts +41 -0
  108. package/src/utils/dataTransform.util.ts +37 -0
  109. package/src/utils/deepEqual.util.ts +29 -0
  110. package/src/utils/echarts.util.tsx +822 -0
  111. package/src/utils/getDataKey.util.ts +115 -0
  112. package/src/utils/getLinearRegression.util.ts +46 -0
  113. package/src/utils/googleMaps.util.ts +28 -0
  114. package/src/utils/isEmpty.util.ts +10 -0
  115. package/src/utils/move.util.ts +6 -0
  116. package/src/utils/selection.util.ts +73 -0
  117. package/src/utils/style.util.ts +315 -0
  118. package/src/utils/time.util.ts +221 -0
  119. package/src/utils/timeFormatter.util.ts +104 -0
  120. package/src/utils/timeProcessing.util.ts +38 -0
  121. package/src/utils/trendline.util.ts +342 -0
  122. package/tsconfig.json +25 -0
  123. package/vite.config.js +19 -0
package/README.md ADDED
@@ -0,0 +1,37 @@
1
+ # lowcoder comp lib
2
+
3
+ ## Start
4
+
5
+ Start dev server to develop your comp lib.
6
+
7
+ ```bash
8
+ yarn start
9
+
10
+ # or
11
+
12
+ npm start
13
+ ```
14
+
15
+ ## Build
16
+
17
+ Build current comp lib into a .tgz file that you can upload it to the Lowcoder Comp Market.
18
+
19
+ Before build you should change the version in package.json file.
20
+
21
+ ```bash
22
+ yarn build
23
+
24
+ # or
25
+
26
+ npm run build
27
+ ```
28
+
29
+ ## Publish
30
+ To publish your plugin on NPM, use following command.
31
+ ```bash
32
+ yarn build_publish
33
+
34
+ # or
35
+
36
+ npm run build_publish
37
+ ```
package/icons/demo-icon.svg ADDED
@@ -0,0 +1,10 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
4
+ <g transform="translate(8.000000, 10.000000)">
5
+ <rect fill="#D7D9E0" x="0" y="0" width="32" height="28" rx="3"/>
6
+ <path d="M8,4 C9.65686841,4 11,5.34313159 11,7 C11,8.65686841 9.65686841,10 8,10 C6.34313159,10 5,8.65686841 5,7 C5,5.34313159 6.34313155,4 8,4 Z" fill="#FFFFFF" fill-rule="nonzero"/>
7
+ <path d="M10.8216102,16.7159324 L13.4766616,20.0440299 C13.8210834,20.4757614 14.4502799,20.5465399 14.8820114,20.2021181 C14.9491721,20.1485394 15.0091482,20.0865292 15.0604578,20.0176194 L19.4593737,14.1097995 C19.7892094,13.6668245 20.4156962,13.575107 20.8586713,13.9049427 C20.9441855,13.9686159 21.018967,14.0455546 21.0801833,14.1328445 L26.8960339,22.4258246 C27.2131422,22.877998 27.1036503,23.501624 26.6514769,23.8187323 C26.4832527,23.9367077 26.2827708,24 26.0773016,24 L5.95488979,24 C5.40260504,24 4.95488979,23.5522847 4.95488979,23 C4.95488979,22.7899115 5.0210567,22.5851591 5.14400038,22.4148006 L9.22900176,16.7543638 C9.55219848,16.3065219 10.1772487,16.2054771 10.6250906,16.5286738 C10.6988039,16.5818709 10.7649195,16.6448707 10.8216102,16.7159324 Z" fill="#FFFFFF" fill-rule="nonzero"/>
8
+ </g>
9
+ </g>
10
+ </svg>
package/icons/hills.svg ADDED
@@ -0,0 +1,17 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
+ viewBox="0 0 1200 1200" style="enable-background:new 0 0 1200 1200;" xml:space="preserve">
5
+ <style type="text/css">
6
+ .st0{fill:#9B9B9B;}
7
+ </style>
8
+ <g>
9
+ <path d="M443.7,797.6L624,531.3c86.3-127.4,213.3-129.7,300.8-5.2l191.3,271.5L443.7,797.6z"/>
10
+ <path d="M652.9,447.4C551,331,415.2,343,320.8,482.7L107.4,797.6h292l192.3-283.8C609.5,487.3,630.2,464.9,652.9,447.4L652.9,447.4
11
+ z"/>
12
+ </g>
13
+ <circle class="st0" cx="334.8" cy="476.1" r="54"/>
14
+ <circle class="st0" cx="976.8" cy="600" r="68.1"/>
15
+ <circle class="st0" cx="238.9" cy="600" r="54"/>
16
+ <circle class="st0" cx="779.9" cy="434.2" r="54"/>
17
+ </svg>
package/index.css ADDED
@@ -0,0 +1,27 @@
1
+ .property-panel {
2
+ width: 330px !important;
3
+ }
4
+
5
+ .ant-select-selector {
6
+ margin-right: 0 !important;
7
+ }
8
+
9
+ .sub-title {
10
+ font-size: 13px;
11
+ font-weight: 600;
12
+ line-height: 46px;
13
+ user-select: none;
14
+ }
15
+
16
+ .statistic .unit {
17
+ font-size: 14px;
18
+ font-weight: normal;
19
+ color: black;
20
+ }
21
+ .chart-series-option-wrapper svg:last-child{
22
+ display: none !important;
23
+ }
24
+ .vtmapgl-popup{
25
+ min-width:250px !important;
26
+ max-width: 400px !important;
27
+ }
package/index.html ADDED
@@ -0,0 +1,35 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
+ <title>Lowcoder Component Plugin Preview</title>
9
+ <script src="https://files-maps.viettel.vn/sdk/vtmap-gl-js/v4.0.0/vtmap-gl.js"></script>
10
+ <!-- <script>-->
11
+ <!-- window.vtmapgl.accessToken = "acfda3fa21ccc80fc6946681c4d6729f";-->
12
+ <!-- </script>-->
13
+ <link href="https://files-maps.viettel.vn/sdk/vtmap-gl-js/v4.0.0/vtmap-gl.css" rel="stylesheet" />
14
+ <style>
15
+ #root {
16
+ height: 100vh;
17
+ }
18
+
19
+ #root-loader {
20
+ height: 100vh;
21
+ display: flex;
22
+ justify-content: center;
23
+ align-items: center;
24
+ }
25
+ </style>
26
+ </head>
27
+
28
+ <body>
29
+ <div id="root">
30
+ <div id="root-loader">Loading...</div>
31
+ </div>
32
+ <script src="index.tsx" type="module"></script>
33
+ </body>
34
+
35
+ </html>
package/index.tsx ADDED
@@ -0,0 +1,20 @@
1
+ import { CompIDE } from "lowcoder-sdk";
2
+ import "lowcoder-sdk/dist/style.css";
3
+ import { createRoot } from "react-dom/client";
4
+ import "./index.css";
5
+ import { lowcoder, name, version } from "./package.json";
6
+ import compMap from "./src/index";
7
+
8
+ function CompDevApp() {
9
+ return (
10
+ <CompIDE
11
+ compMap={compMap}
12
+ packageName={name}
13
+ packageVersion={version}
14
+ compMeta={lowcoder.comps}
15
+ />
16
+ );
17
+ }
18
+ const container = document.querySelector("#root") as Element | DocumentFragment;
19
+ const root = createRoot(container);
20
+ root.render(<CompDevApp />);
package/loader.mjs ADDED
@@ -0,0 +1,11 @@
1
+ import { pathToFileURL } from "url";
2
+
3
+ export async function resolve(specifier, context, defaultResolve) {
4
+ if (/^[a-zA-Z]:\\/.test(specifier)) {
5
+ return {
6
+ url: pathToFileURL(specifier).href,
7
+ shortCircuit: true,
8
+ };
9
+ }
10
+ return defaultResolve(specifier, context, defaultResolve);
11
+ }
package/package.json ADDED
@@ -0,0 +1,175 @@
1
+ {
2
+ "name": "lowcoder-map-component",
3
+ "version": "0.1.1",
4
+ "type": "module",
5
+ "license": "MIT",
6
+ "dependencies": {
7
+ "@ant-design/icons": "^6.0.0",
8
+ "@observablehq/inspector": "^5.0.1",
9
+ "@observablehq/runtime": "^6.0.0",
10
+ "@observablehq/stdlib": "^5.8.8",
11
+ "@types/react": "18",
12
+ "@types/react-dom": "18",
13
+ "antd": "^5.27.1",
14
+ "big.js": "^7.0.1",
15
+ "dayjs": "^1.11.13",
16
+ "echarts": "^6.0.0",
17
+ "echarts-for-react": "^3.0.2",
18
+ "lowcoder-cli": "^0.0.30",
19
+ "lowcoder-sdk": "^2.7.3",
20
+ "prop-types": "^15.8.1",
21
+ "react": "18",
22
+ "react-dom": "18",
23
+ "react-resize-detector": "^12.1.0",
24
+ "typescript": "^5.9.2",
25
+ "vite": "^7.1.3"
26
+ },
27
+ "lowcoder": {
28
+ "description": "Component Plugin",
29
+ "comps": {
30
+ "mapComponent": {
31
+ "name": "Map component",
32
+ "icon": "./icons/demo-icon.svg",
33
+ "description": "Map component",
34
+ "layoutInfo": {
35
+ "w": 12,
36
+ "h": 40
37
+ }
38
+ },
39
+ "mixedLineBarChart": {
40
+ "name": "Mixed Line Bar Chart",
41
+ "icon": "./icons/demo-icon.svg",
42
+ "description": "Mixed Line Bar Chart Component",
43
+ "layoutInfo": {
44
+ "w": 12,
45
+ "h": 40
46
+ }
47
+ },
48
+ "pieChart": {
49
+ "name": "Pie Chart",
50
+ "icon": "./icons/demo-icon.svg",
51
+ "description": "Pie Chart Component",
52
+ "layoutInfo": {
53
+ "w": 12,
54
+ "h": 40
55
+ }
56
+ },
57
+ "lineChart": {
58
+ "name": "Linecharts",
59
+ "icon": "./icons/demo-icon.svg",
60
+ "description": "Line Chart Component",
61
+ "layoutInfo": {
62
+ "w": 12,
63
+ "h": 40
64
+ }
65
+ },
66
+ "barChart": {
67
+ "name": "Bar Chart",
68
+ "icon": "./icons/demo-icon.svg",
69
+ "description": "Bar Chart Component",
70
+ "layoutInfo": {
71
+ "w": 12,
72
+ "h": 40
73
+ }
74
+ },
75
+ "mapChart": {
76
+ "name": "Map Chart",
77
+ "icon": "./icons/demo-icon.svg",
78
+ "description": "Map Chart Component",
79
+ "layoutInfo": {
80
+ "w": 12,
81
+ "h": 40
82
+ }
83
+ },
84
+ "tableChart": {
85
+ "name": "Table Chart",
86
+ "icon": "./icons/demo-icon.svg",
87
+ "description": "Table Chart Component",
88
+ "layoutInfo": {
89
+ "w": 12,
90
+ "h": 40
91
+ }
92
+ },
93
+ "totalChart": {
94
+ "name": "Total Chart",
95
+ "icon": "./icons/demo-icon.svg",
96
+ "description": "Total Chart Component",
97
+ "layoutInfo": {
98
+ "w": 12,
99
+ "h": 40
100
+ }
101
+ },
102
+ "twoLineChart": {
103
+ "name": "TwoLineChart",
104
+ "icon": "./icons/demo-icon.svg",
105
+ "description": "Two Line Chart Component",
106
+ "layoutInfo": {
107
+ "w": 12,
108
+ "h": 40
109
+ }
110
+ },
111
+ "multiLineChart": {
112
+ "name": "MultiLineChart",
113
+ "icon": "./icons/demo-icon.svg",
114
+ "description": "Multi Line Chart Component",
115
+ "layoutInfo": {
116
+ "w": 12,
117
+ "h": 40
118
+ }
119
+ },
120
+ "percentageChart": {
121
+ "name": "Percentage Chart",
122
+ "icon": "./icons/demo-icon.svg",
123
+ "description": "Percentage Chart Component",
124
+ "layoutInfo": {
125
+ "w": 12,
126
+ "h": 40
127
+ }
128
+ },
129
+ "mapChartv2": {
130
+ "name": "Map Chart v2",
131
+ "icon": "./icons/demo-icon.svg",
132
+ "description": "Map Chart v2 Component",
133
+ "layoutInfo": {
134
+ "w": 12,
135
+ "h": 40
136
+ }
137
+ },
138
+ "lineChartv2": {
139
+ "name": "Line Chart v2",
140
+ "icon": "./icons/demo-icon.svg",
141
+ "description": "Line Chart v2 Component",
142
+ "layoutInfo": {
143
+ "w": 12,
144
+ "h": 40
145
+ }
146
+ },
147
+ "tab": {
148
+ "name": "Tab",
149
+ "icon": "./icons/demo-icon.svg",
150
+ "description": "Tab Component",
151
+ "layoutInfo": {
152
+ "w": 12,
153
+ "h": 40
154
+ }
155
+ }
156
+ },
157
+ "entry": "index.js"
158
+ },
159
+ "scripts": {
160
+ "start": "vite",
161
+ "build": "node --experimental-loader ./loader.mjs ./node_modules/lowcoder-cli/index.js build",
162
+ "build_publish": "node --experimental-loader ./loader.mjs ./node_modules/lowcoder-cli/index.js build --publish"
163
+ },
164
+ "devDependencies": {
165
+ "@types/big.js": "^6.2.2",
166
+ "cross-env": "^10.0.0"
167
+ },
168
+ "description": "Start dev server to develop your comp lib.",
169
+ "main": "vite.config.js",
170
+ "repository": {
171
+ "type": "git",
172
+ "url": "http://gitlab.os.gpdn.net/ioc-v2/spnt_cqdt_bgtvt_ioc_250502/source_code/1.frontend/lowcode-chart-extension.git"
173
+ },
174
+ "author": ""
175
+ }
package/src/README.md ADDED
@@ -0,0 +1,35 @@
1
+ # Using Lowcoder Component Plugin
2
+
3
+ ## Prerequisites
4
+ Before you start, ensure you have a running Lowcoder installation. Alternatively, you can use it online at [https://app.lowcoder.cloud](https://app.lowcoder.cloud).
5
+
6
+ ## Steps to Use the Plugin
7
+ 1. **Open the App Editor**: Navigate to the App Editor within your Lowcoder application.
8
+
9
+ <p align="center">
10
+ <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Main%20Screeen%20clean.png" alt="Lowcoder App Editor">
11
+ </p>
12
+
13
+ 1. **Access Components Panel**: In the App Editor, locate the right panel where components are listed.
14
+
15
+ 2. **Switch to Extensions**: Find and switch on the "Extensions" toggle. This option allows you to add additional components to your project.
16
+
17
+ <p align="center">
18
+ <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Import%20Component%20Plugin%201.png" alt="Lowcoder App Editor">
19
+ </p>
20
+
21
+ 3. **Load the Plugin**: Here you have the option to load a Lowcoder Component Plugin from NPM. For example, to load the "hill charts" plugin, type `lowcoder-comp-hillcharts` in the provided field.
22
+
23
+ <p align="center">
24
+ <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Import%20Component%20Plugin%202.png" alt="Lowcoder App Editor">
25
+ </p>
26
+
27
+ 4. **Start Using the Plugin**: After loading the plugin, it will be available for use within your Lowcoder project. You can now integrate and customize the component as per your application's needs.
28
+
29
+ <p align="center">
30
+ <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Import%20Component%20Plugin%203.png" alt="Lowcoder App Editor">
31
+ </p>
32
+
33
+ <p align="center">
34
+ <img src="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Import%20Component%20Plugin%204.png" alt="Lowcoder App Editor">
35
+ </p>