D3FC Chart style and bug fixes

packages/perspective-viewer-d3fc/src/js/charts/area.js

@@ -12,6 +12,7 @@ import {chartSvgFactory} from "../axis/chartFactory";
 import {axisSplitter} from "../axis/axisSplitter";
 import {AXIS_TYPES} from "../axis/axisType";
 import {areaSeries} from "../series/areaSeries";
+import {lineSeries} from "../series/lineSeries";
 import {seriesColors} from "../series/seriesColors";
 import {splitAndBaseData} from "../data/splitAndBaseData";
 import {colorLegend} from "../legend/legend";
@@ -28,10 +29,17 @@ function areaChart(container, settings) {
     const color = seriesColors(settings);
     const legend = colorLegend().settings(settings).scale(color);
 
-    const series = fc
+    const area_series = fc
         .seriesSvgRepeat()
         .series(areaSeries(settings, color).orient("vertical"));
 
+    const line_series = fc
+        .seriesSvgRepeat()
+        .series(lineSeries(settings, color))
+        .orient("vertical");
+
+    const series = fc.seriesSvgMulti().series([area_series, line_series]);
+
     const xAxis = axisFactory(settings)
         .excludeType(AXIS_TYPES.linear)
         .settingName("crossValues")

packages/perspective-viewer-d3fc/src/js/legend/styling/draggableComponent.js

@@ -46,6 +46,7 @@ export function draggableComponent() {
         });
 
         drag.on("end", function (event) {
+            d3.select(window).on(resizeForDraggingEvent, null);
             viewer?.dispatchEvent(new Event("perspective-config-update"));
         });
 

packages/perspective-viewer-d3fc/src/js/series/areaSeries.js

@@ -12,7 +12,7 @@ export function areaSeries(settings, color) {
     let series = fc.seriesSvgArea();
 
     series = series.decorate((selection) => {
-        selection.style("fill", (d) => color(d[0].key));
+        selection.style("fill", (d) => color(d[0].key)).style("opacity", 0.5);
     });
 
     return series

packages/perspective-viewer-d3fc/src/js/series/lineSeries.js

@@ -12,10 +12,21 @@ import {withoutOpacity} from "./seriesColors.js";
 export function lineSeries(settings, color) {
     let series = fc.seriesSvgLine();
 
+    const estimated_size =
+        settings.data.length *
+        (settings.data?.length > 0
+            ? Object.keys(settings.data[0]).length -
+              (settings.crossValues?.length > 0 ? 1 : 0)
+            : 0);
+    const stroke_width = Math.max(
+        1,
+        Math.min(3, Math.floor(settings.size.width / estimated_size / 2))
+    );
+
     series = series.decorate((selection) => {
-        selection.style("stroke", (d) =>
-            withoutOpacity(color(d[0] && d[0].key))
-        );
+        selection
+            .style("stroke", (d) => withoutOpacity(color(d[0] && d[0].key)))
+            .style("stroke-width", stroke_width);
     });
 
     return series.crossValue((d) => d.crossValue).mainValue((d) => d.mainValue);

packages/perspective-viewer-d3fc/src/js/zoom/zoomableChart.js

@@ -115,11 +115,22 @@ export default () => {
                     bound = true;
                     // add the zoom interaction on the enter selection
                     const plotArea = sel.select(chartPlotArea);
+                    const device_pixel_factor = canvas
+                        ? window.devicePixelRatio
+                        : 1;
 
                     plotArea
                         .on("measure.zoom-range", (event) => {
-                            if (xCopy) xCopy.range([0, event.detail.width]);
-                            if (yCopy) yCopy.range([0, event.detail.height]);
+                            if (xCopy)
+                                xCopy.range([
+                                    0,
+                                    event.detail.width / device_pixel_factor,
+                                ]);
+                            if (yCopy)
+                                yCopy.range([
+                                    0,
+                                    event.detail.height / device_pixel_factor,
+                                ]);
 
                             if (settings.zoom) {
                                 const initialTransform = d3.zoomIdentity

packages/perspective-viewer-d3fc/src/less/chart.less

@@ -14,6 +14,7 @@
 @sans-serif-fonts: Arial, sans-serif;
 
 :host {
+    user-select: none;
     .chart {
         position: absolute;
         box-sizing: border-box;
@@ -407,14 +408,15 @@
 
         & button {
             -webkit-appearance: none;
-            background: rgb(247, 247, 247);
-            border: 1px solid rgb(204, 204, 204);
-            padding: 10px;
+            background: var(--plugin--background, rgb(247, 247, 247));
+            border: 1px solid var(--inactive--color, rgb(204, 204, 204));
+            color: var(--d3fc-label--color, inherit);
+            font-size: 12px;
+            padding: 8px;
             opacity: 0.5;
             cursor: pointer;
-
             &:hover {
-                background: rgb(230, 230, 230);
+                opacity: 1;
             }
         }
     }

packages/perspective-viewer-d3fc/test/results/results.json

@@ -1,18 +1,18 @@
 {
-    "__GIT_COMMIT__": "d776202ff728f808f1d07060e5ce73bb392402f1",
-    "area_shows_a_grid_without_any_settings_applied": "3852532b8ee6abba3373a10d41bb4df2",
-    "area_displays_visible_columns_": "919cc6f6c2a2f2ec13b90dfb60e1b7ef",
-    "area_pivot_by_a_row": "7495976cfed69cfe9db2b3fdc6ef4707",
-    "area_pivot_by_two_rows": "f6f853f3c8aa95b1f0e31900ca6927f8",
-    "area_pivot_by_a_column": "fdfcee89619d25e503d3efd4d42581c6",
-    "area_pivot_by_a_row_and_a_column": "804a5bc6a963a961a49ba17631810829",
-    "area_pivot_by_two_rows_and_two_columns": "7855afa72948ab119f0e5803f9dfb203",
-    "area_sort_by_a_hidden_column": "28fd50b76dec63cdcb752845e55c0daf",
-    "area_sort_by_a_numeric_column": "2fb124a9a32e73fda897a4abe65d2eb4",
-    "area_sort_by_an_alpha_column": "ba6b0e3c8cf2432419ace85031646c6e",
-    "area_filters_filters_by_a_numeric_column": "7dff92c06a31d11f8fc340bcfb5fffcd",
-    "area_filters_filters_by_an_alpha_column": "a45bdbf8ed5240a2e3aa8beb74c43be5",
-    "area_filters_filters_with__in__comparator": "f4531a4d7a9a981e55391c347bed3e6c",
+    "__GIT_COMMIT__": "d29a474913521f45b1d6b1a113923e515071c167",
+    "area_shows_a_grid_without_any_settings_applied": "157322633d18cc02c5129d3b33980be1",
+    "area_displays_visible_columns_": "8a6e52f885325ff67635aa0c8af1eb54",
+    "area_pivot_by_a_row": "370391c6897fc37aefa1a061331c82c3",
+    "area_pivot_by_two_rows": "c7347e73cdd90942986034418d7b28cd",
+    "area_pivot_by_a_column": "0adaed6af9243574de1e50932b35c16e",
+    "area_pivot_by_a_row_and_a_column": "755d33dfe4f7fe20b2c5ccebfbea2f93",
+    "area_pivot_by_two_rows_and_two_columns": "9581180f6e75d7ccd68fb8d621202681",
+    "area_sort_by_a_hidden_column": "483def70bca2f1c27e808b90da804a54",
+    "area_sort_by_a_numeric_column": "4cc9adfafc357b8287641f29bc46a9ad",
+    "area_sort_by_an_alpha_column": "b439be55dc887cfa8dd5b7b163a69189",
+    "area_filters_filters_by_a_numeric_column": "04fbf9f45ac3808b8ee377c0a82d7b16",
+    "area_filters_filters_by_an_alpha_column": "9d3ac988a435c17577a6d9dd55332a54",
+    "area_filters_filters_with__in__comparator": "efbb26036c1ce19eee3a0d5b3b651233",
     "bar_shows_a_grid_without_any_settings_applied": "67433692b144ca07b3171c0f74333afb",
     "bar_displays_visible_columns_": "eb3618e1cad5fa84e0edaebfbdc660de",
     "bar_pivot_by_a_row": "0b35d45ec490bcc56a519afc9ed87d67",

rust/perspective-viewer/src/less/config-selector.less

@@ -215,7 +215,7 @@
             user-select: none;
             padding: 12px 24px 0 0;
 
-            &:hover {
+            &:hover:before {
                 color: var(--active--color, inherit);
             }
 

rust/perspective-viewer/src/rust/components/containers/mod.rs

@@ -11,6 +11,7 @@
 
 pub mod dragdrop_list;
 pub mod dropdown_menu;
+pub mod modal_anchor;
 pub mod radio_list;
 pub mod scroll_panel;
 pub mod select;

rust/perspective-viewer/src/rust/components/containers/modal_anchor.rs

@@ -0,0 +1,24 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Copyright (c) 2018, the Perspective Authors.
+//
+// This file is part of the Perspective library, distributed under the terms
+// of the Apache License 2.0.  The full license can be found in the LICENSE
+// file.
+
+use yew::prelude::*;
+
+#[derive(Properties, Clone, PartialEq)]
+pub struct ModalAnchorProps {
+    pub top: i32,
+    pub left: i32,
+}
+
+#[function_component(ModalAnchor)]
+pub fn split_panel_child(props: &ModalAnchorProps) -> Html {
+    html! {
+        <style>
+            { format!(":host{{left:{}px;top:{}px;}}", props.left, props.top) }
+        </style>
+    }
+}

rust/perspective-viewer/src/rust/components/copy_dropdown.rs

@@ -7,9 +7,62 @@
 // file.
 
 use super::containers::dropdown_menu::*;
+use super::containers::modal_anchor::*;
 use crate::model::*;
+use crate::renderer::*;
+use crate::*;
 
-pub fn get_menu_items(has_render: bool) -> Vec<CopyDropDownMenuItem> {
+use js_intern::*;
+use std::rc::Rc;
+use yew::prelude::*;
+
+pub type CopyDropDownMenuMsg = DropDownMenuMsg;
+pub type CopyDropDownMenuItem = DropDownMenuItem<ExportMethod>;
+
+#[derive(Properties, Clone, PartialEq)]
+pub struct CopyDropDownMenuProps {
+    pub renderer: Renderer,
+    pub callback: Callback<ExportMethod>,
+}
+
+#[derive(Default)]
+pub struct CopyDropDownMenu {
+    top: i32,
+    left: i32,
+}
+
+impl Component for CopyDropDownMenu {
+    type Message = CopyDropDownMenuMsg;
+    type Properties = CopyDropDownMenuProps;
+
+    fn view(&self, ctx: &Context<Self>) -> yew::virtual_dom::VNode {
+        let plugin = ctx.props().renderer.get_active_plugin().unwrap();
+        let has_render = js_sys::Reflect::has(&plugin, js_intern!("render")).unwrap();
+        html_template! {
+            <ModalAnchor top={ self.top } left={ self.left } />
+            <DropDownMenu<ExportMethod>
+                values={ Rc::new(get_menu_items(has_render)) }
+                callback={ ctx.props().callback.clone() }>
+            </DropDownMenu<ExportMethod>>
+        }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            CopyDropDownMenuMsg::SetPos(top, left) => {
+                self.top = top;
+                self.left = left;
+                true
+            }
+        }
+    }
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        CopyDropDownMenu::default()
+    }
+}
+
+fn get_menu_items(has_render: bool) -> Vec<CopyDropDownMenuItem> {
     vec![
         CopyDropDownMenuItem::OptGroup(
             "Current View",
@@ -26,8 +79,3 @@ pub fn get_menu_items(has_render: bool) -> Vec<CopyDropDownMenuItem> {
         CopyDropDownMenuItem::OptGroup("Config", vec![ExportMethod::JsonConfig]),
     ]
 }
-
-pub type CopyDropDownMenu = DropDownMenu<ExportMethod>;
-pub type CopyDropDownMenuProps = DropDownMenuProps<ExportMethod>;
-pub type CopyDropDownMenuMsg = DropDownMenuMsg;
-pub type CopyDropDownMenuItem = DropDownMenuItem<ExportMethod>;

rust/perspective-viewer/src/rust/components/export_dropdown.rs

@@ -7,6 +7,7 @@
 // file.
 
 use super::containers::dropdown_menu::*;
+use super::containers::modal_anchor::*;
 use crate::model::*;
 use crate::renderer::*;
 
@@ -82,9 +83,7 @@ impl Component for ExportDropDownMenu {
         let plugin = ctx.props().renderer.get_active_plugin().unwrap();
         let has_render = js_sys::Reflect::has(&plugin, js_intern!("render")).unwrap();
         html_template! {
-            <style>
-                { format!(":host{{left:{}px;top:{}px;}}", self.left, self.top) }
-            </style>
+            <ModalAnchor top={ self.top } left={ self.left } />
             <span class="dropdown-group-label">{ "Save as" }</span>
             <input
                 class={ if self.invalid { "invalid" } else { "" }}

rust/perspective-viewer/src/rust/components/expression_editor.rs

@@ -6,7 +6,8 @@
 // of the Apache License 2.0.  The full license can be found in the LICENSE
 // file.
 
-use crate::components::containers::split_panel::*;
+use super::containers::modal_anchor::*;
+use super::containers::split_panel::*;
 use crate::exprtk::*;
 use crate::js::monaco::*;
 use crate::js::perspective::*;
@@ -186,8 +187,8 @@ impl Component for ExpressionEditor {
             <>
                 <style>
                     { &CSS }
-                    { format!(":host{{left:{}px;top:{}px;}}", self.left, self.top) }
                 </style>
+                <ModalAnchor top={ self.top } left={ self.left } />
                 <SplitPanel
                     id="expression-editor-split-panel"
                     on_resize={ resize_horiz }

rust/perspective-viewer/src/rust/components/filter_dropdown.rs

@@ -6,6 +6,7 @@
 // of the Apache License 2.0.  The full license can be found in the LICENSE
 // file.
 
+use super::containers::modal_anchor::*;
 use web_sys::*;
 use yew::prelude::*;
 
@@ -140,8 +141,8 @@ impl Component for FilterDropDown {
             <>
                 <style>
                     { &CSS }
-                    { format!(":host{{left:{}px;top:{}px;}}", self.left, self.top) }
                 </style>
+                <ModalAnchor top={ self.top } left={ self.left } />
                 { body }
             </>
         }

rust/perspective-viewer/src/rust/components/number_column_style.rs

@@ -7,6 +7,7 @@
 // file.
 
 use super::color_range_selector::*;
+use super::containers::modal_anchor::*;
 use super::containers::radio_list::RadioList;
 use crate::*;
 
@@ -389,8 +390,8 @@ impl Component for NumberColumnStyle {
             <>
                 <style>
                     { &CSS }
-                    { format!(":host{{left:{}px;top:{}px;}}", self.left, self.top) }
                 </style>
+                <ModalAnchor top={ self.top } left={ self.left } />
                 <div id="column-style-container">
                     <div>
                         <label id="fixed-examples" class="indent">{

rust/perspective-viewer/src/rust/components/string_column_style.rs

@@ -7,6 +7,7 @@
 // file.
 
 use super::color_selector::*;
+use super::containers::modal_anchor::*;
 use super::containers::radio_list::RadioList;
 use crate::*;
 
@@ -329,8 +330,8 @@ impl Component for StringColumnStyle {
         html_template! {
             <style>
                 { &CSS }
-                { format!(":host{{left:{}px;top:{}px;}}", self.left, self.top) }
             </style>
+            <ModalAnchor top={ self.top } left={ self.left } />
             <div id="column-style-container">
                 <div>
                     <label class="indent">{ "Format" }</label>

rust/perspective-viewer/src/rust/components/tests/column_style.rs

@@ -35,6 +35,10 @@ pub fn test_set_pos() {
     assert!(panel_div
         .cast::<HtmlElement>()
         .unwrap()
+        .next_sibling()
+        .as_ref()
+        .unwrap()
+        .unchecked_ref::<HtmlElement>()
         .inner_html()
         .contains("left:100px;top:90px;"));
 }
@@ -43,6 +47,9 @@ pub fn test_set_pos() {
 /// DocumentFragment.
 fn cs_query(node: &NodeRef, query: &str) -> HtmlElement {
     node.cast::<HtmlElement>()
+        .unwrap()
+        .next_sibling()
+        .as_ref()
         .unwrap()
         .next_sibling()
         .as_ref()