implement intl.numberFormat constructor UI

finos · Feb 28, 2024 · a8ba9b9 · a8ba9b9
1 parent bd844e8
commit a8ba9b9
Show file tree

Hide file tree

Showing 29 changed files with 1,268 additions and 270 deletions.
diff --git a/packages/perspective-viewer-datagrid/src/js/data_listener/formatter_cache.js b/packages/perspective-viewer-datagrid/src/js/data_listener/formatter_cache.js
@@ -130,8 +130,10 @@ export class FormatterCache {
     }
 
     create_number_formatter(type, plugin) {
-        const { format } = get_type_config(type);
-        if (plugin.fixed !== undefined) {
+        let { format } = get_type_config(type);
+        if (plugin.number_string_format !== undefined) {
+            format = plugin.number_string_format;
+        } else if (plugin.fixed !== undefined) {
             format.minimumFractionDigits = plugin.fixed;
             format.maximumFractionDigits = plugin.fixed;
         }
@@ -161,6 +163,7 @@ export class FormatterCache {
             plugin.minute,
             plugin.second,
             plugin.hour12,
+            ...Object.values(plugin.number_string_format ?? {}),
         ].join("-");
 
         if (!this._formatters.has(formatter_key)) {

diff --git a/packages/perspective-viewer-datagrid/src/js/plugin/column_style_controls.js b/packages/perspective-viewer-datagrid/src/js/plugin/column_style_controls.js
@@ -29,7 +29,7 @@ export default function column_style_opts(type, _group) {
                 number_bg_mode: "disabled",
                 fixed: type === "float" ? 2 : 0,
             },
-            number_string_format: {},
+            number_string_format: true,
         };
     else if (type === "date" || type === "datetime" || type === "string") {
         let control =

diff --git a/packages/perspective-viewer-datagrid/src/js/plugin/restore.js b/packages/perspective-viewer-datagrid/src/js/plugin/restore.js
@@ -72,6 +72,12 @@ export function restore(token, columns) {
                         : undefined,
                 };
             }
+            if (controls?.number_string_format) {
+                styles[col_name] = {
+                    ...styles[col_name],
+                    number_string_format: controls?.number_string_format,
+                };
+            }
         }
     }
 

diff --git a/rust/perspective-viewer/Cargo.lock b/rust/perspective-viewer/Cargo.lock
diff --git a/rust/perspective-viewer/Cargo.toml b/rust/perspective-viewer/Cargo.toml
@@ -181,4 +181,6 @@ web-sys.features = [
     "VisibilityState",
     "Window",
 ]
+
 serde_with = "3.6.1"
+strum = { version = "0.26.1", features = ["derive"] }
diff --git a/rust/perspective-viewer/src/less/column-selector.less b/rust/perspective-viewer/src/less/column-selector.less
@@ -10,6 +10,8 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+@import "dom/scrollbar.less";
+
 // TODO this could be a class
 @mixin icon {
     background-repeat: no-repeat;
@@ -309,21 +311,7 @@
         overflow-x: hidden !important;
         overflow-y: scroll;
         min-height: 20%;
-
-        &::-webkit-scrollbar-thumb {
-            border: 0 solid var(--icon--color);
-            border-left-width: 1px;
-        }
-
-        &::-webkit-scrollbar-thumb:hover {
-            background-color: rgba(0, 0, 0, 0.1);
-        }
-
-        &::-webkit-scrollbar,
-        &::-webkit-scrollbar-corner {
-            background-color: transparent;
-            width: 6px;
-        }
+        @include scrollbar;
     }
 
     #sub-columns:before {

diff --git a/rust/perspective-viewer/src/less/column-style.less b/rust/perspective-viewer/src/less/column-style.less
@@ -23,7 +23,6 @@
     #column-style-container {
         outline: none;
         font-size: 12px;
-        border: inherit;
         user-select: none;
 
         &.no-style {
@@ -117,6 +116,12 @@
             margin-bottom: 8px;
             flex: 1 1 100%;
         }
+        div.bool-field {
+            display: flex;
+            label {
+                padding: 0 8px;
+            }
+        }
 
         div.inner_section {
             margin-top: 4px;
@@ -131,6 +136,12 @@
             flex-wrap: wrap;
         }
 
+        fieldset.style-control {
+            border: none;
+            border-top: 1px solid;
+            padding: 8px 0;
+        }
+
         .color-gradient-container {
             display: flex;
             flex-wrap: nowrap;
@@ -141,6 +152,26 @@
             }
         }
 
+        .color-selector {
+            display: grid;
+
+            input {
+                grid-column: 1;
+                grid-row: 1;
+            }
+            .color-label {
+                font-size: 20px;
+                grid-column: 1;
+                grid-row: 1;
+                margin: 0;
+                font-family: var(--button--font-family, inherit);
+                color: var(--sign-color, white);
+                width: 36px;
+                height: 24px;
+                text-align: center;
+            }
+        }
+
         input[type="color"] {
             width: 36px;
             height: 24px;
@@ -154,16 +185,6 @@
                 opacity: 0.8;
             }
 
-            &:before {
-                position: absolute;
-                font-family: var(--button--font-family, inherit);
-                margin-top: -1px;
-                margin-left: 12px;
-                font-size: 20px;
-                content: var(--column-style-pos-color--content, "+");
-                color: var(--sign--color, white);
-            }
-
             &#pos-color-param {
                 border-radius: 6px 0 0 6px;
                 margin: 0 1px 0 0;
@@ -174,9 +195,6 @@
                 margin: 0 0 0 1px;
             }
 
-            &#neg-color-param:before {
-                content: var(--column-style-neg-color--content, "-");
-            }
         }
 
         ::-webkit-color-swatch-wrapper {

diff --git a/rust/perspective-viewer/src/less/containers/tabs.less b/rust/perspective-viewer/src/less/containers/tabs.less
@@ -10,6 +10,8 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+@import "dom/scrollbar.less";
+
 :host {
     .tab-gutter {
         border-color: var(--inactive--color, #6e6e6e);
@@ -61,6 +63,10 @@
         }
     }
     .tab-content {
+        overflow: auto;
+        max-height: calc(100% - 90px);
+        @include scrollbar;
+
         .tab-section {
             padding: 8px;
             // border-bottom: 1px solid var(--inactive--border-color);

diff --git a/rust/perspective-viewer/src/less/dom/scrollbar.less b/rust/perspective-viewer/src/less/dom/scrollbar.less
@@ -0,0 +1,16 @@
+@mixin scrollbar {
+        &::-webkit-scrollbar-thumb {
+            border: 0 solid var(--icon--color);
+            border-left-width: 1px;
+        }
+
+        &::-webkit-scrollbar-thumb:hover {
+            background-color: rgba(0, 0, 0, 0.1);
+        }
+
+        &::-webkit-scrollbar,
+        &::-webkit-scrollbar-corner {
+            background-color: transparent;
+            width: 6px;
+        }
+}
diff --git a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab.rs b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab.rs
@@ -13,6 +13,7 @@
 pub mod stub;
 mod symbol;
 
+use itertools::Itertools;
 use yew::{function_component, html, Html, Properties};
 
 use crate::components::column_settings_sidebar::style_tab::stub::Stub;
@@ -78,38 +79,38 @@ pub fn StyleTab(props: &StyleTabProps) -> Html {
                 let config = config
                     .as_ref()
                     .and_then(|config| config.datagrid_number_style.clone());
-                components.push(html! {
+                components.push(("Number Styles", html! {
                     <NumberColumnStyle
                         session={props.session.clone()}
                         column_name={props.column_name.clone()}
                         {config}
                         {default_config}
                         on_change={on_change.clone()}
                     />
-                });
+                }));
             }
             if let Some(default_config) = opts.datagrid_string_style {
                 let config = config
                     .as_ref()
                     .and_then(|config| config.datagrid_string_style.clone());
-                components.push(html! {
+                components.push(("String Styles", html! {
                     <StringColumnStyle {config} {default_config} on_change={on_change.clone()} />
-                });
+                }));
             }
 
             if let Some(default_config) = opts.datagrid_datetime_style {
                 let config = config
                     .as_ref()
                     .and_then(|config| config.datagrid_datetime_style.clone());
                 let enable_time_config = props.ty.unwrap() == Type::Datetime;
-                components.push(html! {
+                components.push(("Datetime Styles", html! {
                     <DatetimeColumnStyle
                         {enable_time_config}
                         {config}
                         {default_config}
                         on_change={on_change.clone()}
                     />
-                })
+                }))
             }
 
             if let Some(default_config) = opts.symbols {
@@ -118,22 +119,45 @@ pub fn StyleTab(props: &StyleTabProps) -> Html {
                     .and_then(|config| config.symbols.clone())
                     .unwrap_or_default();
 
-                components.push(html! {
+                components.push(("Symbols", html! {
                     <SymbolStyle
                         {default_config}
                         {restored_config}
-                        {on_change}
+                        on_change={on_change.clone()}
                         column_name={props.column_name.clone()}
                         session={props.session.clone()}
                     />
-                })
+                }))
             }
 
-            if let Some(default_config) = opts.number_string_format {
-                components.push(html! { <CustomNumberFormat /> })
+            if opts.number_string_format.unwrap_or_default() {
+                let restored_config = config
+                    .as_ref()
+                    .and_then(|config| config.number_string_format.clone())
+                    .unwrap_or_default();
+                components.push(("Number Formatting", html! {
+                    <CustomNumberFormat
+                        {restored_config}
+                        {on_change}
+                        view_type={props.ty.unwrap()}
+                        column_name={props.column_name.clone()}
+                    />
+                }));
             }
 
             components
+                .into_iter()
+                .map(|(title, component)| {
+                    html! {
+                        <fieldset
+                            class="style-control"
+                        >
+                            <legend >{ title }</legend>
+                            { component }
+                        </fieldset>
+                    }
+                })
+                .collect_vec()
         })
         .unwrap_or_else(|error| {
             vec![html! {

diff --git a/rust/perspective-viewer/src/rust/components/containers/sidebar.rs b/rust/perspective-viewer/src/rust/components/containers/sidebar.rs
@@ -67,16 +67,8 @@ pub fn Sidebar(p: &SidebarProps) -> Html {
         >
             <SidebarCloseButton id={format!("{id}_close_button")} on_close_sidebar={&p.on_close} />
             <div class="sidebar_header"><EditableHeader ..p.header_props.clone() /></div>
-            <div
-                class="sidebar_border"
-                id={format!("{id}_border")}
-            />
-            <div
-                class="sidebar_content"
-                id={format!("{id}_content")}
-            >
-                { p.children.iter().collect::<Html>() }
-            </div>
+            <div class="sidebar_border" id={format!("{id}_border")} />
+            { p.children.iter().collect::<Html>() }
             <div class="sidebar-auto-width" style={width_style} />
         </div>
     }