Add settings for crosshair and the ability to highlight chart on the …

…panel (#30)
bhftbootcamp · Nov 15, 2024 · 51c6ae0 · 51c6ae0 · gryumov · Nov 15, 2024
1 parent f83cf23
commit 51c6ae0
Show file tree

Hide file tree

Showing 15 changed files with 463 additions and 95 deletions.
diff --git a/Project.toml b/Project.toml
@@ -1,6 +1,6 @@
 name = "LightweightCharts"
 uuid = "d6998af1-87ca-4e7f-83d4-864c79a249fa"
-version = "2.2.3"
+version = "2.3.0"
 
 [deps]
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

diff --git a/README.md b/README.md
@@ -93,6 +93,7 @@ panel = lwc_panel(
         precision = 4,
     );
     name = "LightweightCharts ❤️ TimeArrays",
+    default_legend_visible = false,
 )
 
 lwc_show(panel)
@@ -132,6 +133,9 @@ layout = lwc_layout(
             line_width = 3,
             price_scale_id = LWC_RIGHT,
         );
+        last_value_visible = true,
+        title_visible = true,
+        default_legend_visible = false,
         x = 1,
         y = 1,
     ),
@@ -188,6 +192,21 @@ chart = lwc_panel(
         point_markers_visible = true,
         line_visible = false,
     );
+    crosshair_settings = CrosshairOptions(;
+        mode = LWC_CROSSHAIR_NORMAL,
+        vert_line = CrosshairLineOptions(;
+            style = LWC_CROSSHAIR_SOLID,
+            color = "#C3BCDB44",
+            label_background_color = "#9B7DFF",
+            width = 8,
+        ),
+        horz_line = CrosshairLineOptions(;
+            color = "#9B7DFF",
+            label_background_color = "#9B7DFF",
+        )
+    ),
+    last_value_visible = true,
+    title_visible = true,
     max_y = 1.6
 )
 

diff --git a/docs/src/assets/chart.png b/docs/src/assets/chart.png
diff --git a/docs/src/assets/layout.png b/docs/src/assets/layout.png
diff --git a/docs/src/assets/smoothed_prices.png b/docs/src/assets/smoothed_prices.png
diff --git a/docs/src/pages/layout.md b/docs/src/pages/layout.md
@@ -36,6 +36,19 @@ panel = lwc_panel(
         price_scale_id = LWC_RIGHT,
     );
     name = "Panel example",
+    crosshair_settings = CrosshairOptions(;
+        mode = LWC_CROSSHAIR_NORMAL,
+        vert_line = CrosshairLineOptions(;
+            style = LWC_CROSSHAIR_SOLID,
+            color = "#C3BCDB44",
+            label_background_color = "#9B7DFF",
+            width = 8,
+        ),
+        horz_line = CrosshairLineOptions(;
+            color = "#9B7DFF",
+            label_background_color = "#9B7DFF",
+        )
+    ),
 )
 
 lwc_save("panel_example.html", panel)
@@ -77,6 +90,8 @@ layout = lwc_layout(
             price_scale_id = LWC_RIGHT,
         );
         tooltip = false,
+        last_value_visible = true,
+        title_visible = true,
         x = 1,
         y = 1,
     ),
@@ -105,6 +120,7 @@ layout = lwc_layout(
             price_scale_id = LWC_RIGHT,
         );
         tooltip_format = "\${label_name}: \${value}",
+        default_legend_visible = true,
         x = 1,
         y = 2,
     );

diff --git a/frontend/dist/index_boundle.js b/frontend/dist/index_boundle.js
diff --git a/frontend/package.json b/frontend/package.json
@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "color": "^4.2.3",
     "lightweight-charts": "^4.1.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/frontend/src/app.css b/frontend/src/app.css
@@ -87,12 +87,13 @@ body {
     max-width: 20px;
     min-height: 16px;
     min-width: 20px;
-    position: sticky
+    position: sticky;
+    background-color: #f8f8ff;
+    border-color: #d1d4dc
 }
 
 .tabs .btn:hover {
-    background-color: #f8f8ff;
-    border-color: #d1d4dc
+    background-color: #e0e3eb;
 }
 
 .tabs .searchs {