From adf70d81967e94cd6464eed324bbe17bdd9824c0 Mon Sep 17 00:00:00 2001 From: Andrew Stein Date: Mon, 7 Sep 2020 20:13:21 -0400 Subject: [PATCH 1/4] Fix d3fc treemap legend padding detection --- packages/perspective-viewer-d3fc/src/js/charts/treemap.js | 6 +++++- packages/perspective-viewer-d3fc/src/less/chart.less | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/perspective-viewer-d3fc/src/js/charts/treemap.js b/packages/perspective-viewer-d3fc/src/js/charts/treemap.js index 97e4a376a5..50c85e7644 100644 --- a/packages/perspective-viewer-d3fc/src/js/charts/treemap.js +++ b/packages/perspective-viewer-d3fc/src/js/charts/treemap.js @@ -27,8 +27,12 @@ function treemap(container, settings) { settings, data.map(d => d.data) ); - const treemapGrid = gridLayoutMultiChart().elementsPrefix("treemap"); + if (color) { + this._container.classList.add("has-legend"); + } + + const treemapGrid = gridLayoutMultiChart().elementsPrefix("treemap"); container.datum(data).call(treemapGrid); if (color) { diff --git a/packages/perspective-viewer-d3fc/src/less/chart.less b/packages/perspective-viewer-d3fc/src/less/chart.less index d1811a98fb..66fa376860 100644 --- a/packages/perspective-viewer-d3fc/src/less/chart.less +++ b/packages/perspective-viewer-d3fc/src/less/chart.less @@ -81,8 +81,12 @@ } } - &.d3_treemap { + &.has-legend { padding-right: 120px; + } + + &.d3_treemap { + & .treemap-container { position: relative; From 2d840125d21b72d41d0d154f05a3ca46121dcd3f Mon Sep 17 00:00:00 2001 From: Andrew Stein Date: Mon, 7 Sep 2020 20:14:20 -0400 Subject: [PATCH 2/4] Fix sunburst origin translation beneath `minWidth` bug --- .../src/js/layout/gridLayoutMultiChart.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/perspective-viewer-d3fc/src/js/layout/gridLayoutMultiChart.js b/packages/perspective-viewer-d3fc/src/js/layout/gridLayoutMultiChart.js index 4c9b09d046..df85604093 100644 --- a/packages/perspective-viewer-d3fc/src/js/layout/gridLayoutMultiChart.js +++ b/packages/perspective-viewer-d3fc/src/js/layout/gridLayoutMultiChart.js @@ -31,8 +31,8 @@ export function gridLayoutMultiChart() { const cols = Math.min(data.length, Math.floor(containerWidth / minSize)); const rows = Math.ceil(data.length / cols); containerSize = { - width: containerWidth / cols, - height: Math.min(containerHeight, Math.max(containerHeight / rows, containerWidth / cols)) + width: containerWidth / Math.max(cols, 1), + height: Math.min(containerHeight, Math.max(containerHeight / rows, containerWidth / Math.max(cols, 1))) }; if (containerHeight / rows > containerSize.height * 0.75) { containerSize.height = containerHeight / rows; From 95f50fba2371698020ff47fb3e3f258f477de331 Mon Sep 17 00:00:00 2001 From: Andrew Stein Date: Mon, 7 Sep 2020 20:15:12 -0400 Subject: [PATCH 3/4] Fix colorLegend overlay due to missing path --- .../perspective-viewer-d3fc/src/js/legend/colorRangeLegend.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/perspective-viewer-d3fc/src/js/legend/colorRangeLegend.js b/packages/perspective-viewer-d3fc/src/js/legend/colorRangeLegend.js index 35ef5ddcc6..5ab61533ae 100644 --- a/packages/perspective-viewer-d3fc/src/js/legend/colorRangeLegend.js +++ b/packages/perspective-viewer-d3fc/src/js/legend/colorRangeLegend.js @@ -49,7 +49,7 @@ export function colorRangeLegend() { .xScale(xScale) .yScale(yScale) .crossValue(0) - .baseValue((_, i) => (i > 0 ? expandedDomain[i - 1] : 0)) + .baseValue((_, i) => expandedDomain[Math.max(0, i - 1)]) .mainValue(d => d) .decorate(selection => { selection.selectAll("path").style("fill", d => scale(d)); From 5e78389d6edaac543974a3cc1c42f53aa6f1a842 Mon Sep 17 00:00:00 2001 From: Andrew Stein Date: Mon, 7 Sep 2020 21:05:16 -0400 Subject: [PATCH 4/4] Fix tests --- .../test/js/integration/treemap.spec.js | 14 +----- .../test/results/linux.docker.json | 44 +++++++++---------- 2 files changed, 24 insertions(+), 34 deletions(-) diff --git a/packages/perspective-viewer-d3fc/test/js/integration/treemap.spec.js b/packages/perspective-viewer-d3fc/test/js/integration/treemap.spec.js index 5ef47c8ee8..0d8f953d02 100644 --- a/packages/perspective-viewer-d3fc/test/js/integration/treemap.spec.js +++ b/packages/perspective-viewer-d3fc/test/js/integration/treemap.spec.js @@ -69,16 +69,6 @@ utils.with_server({}, () => { await page.evaluate(element => element.setAttribute("row-pivots", '["Ship Date"]'), viewer); await page.evaluate(element => element.setAttribute("columns", '["Sales", "Profit"]'), viewer); await page.waitForSelector("perspective-viewer:not([updating])"); - await page.waitFor( - element => { - let elem = element.shadowRoot.querySelector("perspective-d3fc-chart").shadowRoot.querySelector(".top"); - if (elem) { - return elem.textContent === "6/14/2011, 12:00:00 AM"; - } - }, - {}, - viewer - ); }, {preserve_hover: true} ); @@ -86,7 +76,7 @@ utils.with_server({}, () => { test.run("treemap parent button shows formatted date", async page => { const viewer = await page.$("perspective-viewer"); await page.shadow_click("perspective-viewer", "#config_button"); - await page.evaluate(element => element.setAttribute("row-pivots", '["Ship Date", "City"]'), viewer); + await page.evaluate(element => element.setAttribute("row-pivots", '["Ship Mode", "Segment"]'), viewer); await page.evaluate(element => element.setAttribute("columns", '["Sales", "Profit"]'), viewer); await page.waitForSelector("perspective-viewer:not([updating])"); await page.mouse.click(500, 200); @@ -94,7 +84,7 @@ utils.with_server({}, () => { element => { let elem = element.shadowRoot.querySelector("perspective-d3fc-chart").shadowRoot.querySelector("#goto-parent"); if (elem) { - return elem.textContent.includes("9/21/2012, 12:00:00 AM"); + return elem.textContent.includes("Second Class"); } }, {}, diff --git a/packages/perspective-viewer-d3fc/test/results/linux.docker.json b/packages/perspective-viewer-d3fc/test/results/linux.docker.json index 3ae36e7b0e..0cae398fbd 100644 --- a/packages/perspective-viewer-d3fc/test/results/linux.docker.json +++ b/packages/perspective-viewer-d3fc/test/results/linux.docker.json @@ -1,7 +1,7 @@ { "candlestick_filter_by_a_single_instrument_": "f988ca6494d7a36bada09928cd1a544e", "candlestick_filter_to_date_range_": "8ca4da0a6229d4f9db4a845d5d415c20", - "__GIT_COMMIT__": "715e26e221a61db4053e9e10b3aa6804182a91d6", + "__GIT_COMMIT__": "47a2e5afad7e33e7fff76fd872999b5cf48d2c1c", "ohlc_filter_by_a_single_instrument_": "0110fac1f2befac1b97a9d33f0022acf", "ohlc_filter_to_date_range_": "3ec466996be47e2c8df135a4303bf383", "scatter_shows_a_grid_without_any_settings_applied_": "8677946ab48f16a376c421500d59e6c0", @@ -16,7 +16,7 @@ "scatter_filters_by_a_datetime_column_": "180db4cdbff2d68bdd9027937c7b7c0d", "scatter_highlights_invalid_filter_": "b0cc39b363d35c2271bb27f96fbcebaa", "scatter_sorts_by_an_alpha_column_": "e69fca4d7f53c86d49e96b060dd726d6", - "scatter_displays_visible_columns_": "ab24959a69fd5ed910315456efda21c4", + "scatter_displays_visible_columns_": "fd50cc20ca70e0a4dd8f2012d9b6737a", "yscatter_shows_a_grid_without_any_settings_applied_": "a7d598f0b351ec2aa44c30773ab2646a", "yscatter_pivots_by_a_row_": "35e5de5b94de6566b8b52fdc5bf9ff46", "yscatter_pivots_by_two_rows_": "6ac7168cf400b96582db9ecef67469b7", @@ -30,19 +30,19 @@ "yscatter_highlights_invalid_filter_": "922c2a4448fbed3a5ce12e5d3b35a6a6", "yscatter_sorts_by_an_alpha_column_": "35df9e17f92161800ea2c06d27197ea1", "yscatter_displays_visible_columns_": "71133a51f69c896c65f615b1f8e212c3", - "heatmap_shows_a_grid_without_any_settings_applied_": "203e201629926edadc38f06f9a1f2c84", - "heatmap_pivots_by_a_row_": "3514dd79b9fa3d27288dfa7de8fd5483", - "heatmap_pivots_by_two_rows_": "66fca4b18ce455fd9ce7eaacb61c6578", - "heatmap_pivots_by_a_column_": "cf9079a3af083a29091db8c9f2cc19ef", - "heatmap_pivots_by_a_row_and_a_column_": "cced6eca022955693feb4401ab14a361", - "heatmap_pivots_by_two_rows_and_two_columns_": "2a6e819629a9699e3251b821c3fcdbf6", - "heatmap_sorts_by_a_hidden_column_": "d2a5179001f02a2130bb5c8aaff70a75", - "heatmap_sorts_by_a_numeric_column_": "ae0cddac6faab4a9c29d7d50002ef432", + "heatmap_shows_a_grid_without_any_settings_applied_": "69789d9f32a5de2e5735e163fd9039e0", + "heatmap_pivots_by_a_row_": "435628da62b71b29241fe0568c15e9cf", + "heatmap_pivots_by_two_rows_": "a65b4d3755bdfcf2877a9f34a8bec88d", + "heatmap_pivots_by_a_column_": "33170a814e3a6e6681c822dbcdfd4b9a", + "heatmap_pivots_by_a_row_and_a_column_": "c8f48db37893f6154f2ca57e893bf4ad", + "heatmap_pivots_by_two_rows_and_two_columns_": "3f96a6cd4d3e9d5287af50c244c45924", + "heatmap_sorts_by_a_hidden_column_": "0afd7be4decd0bf5ecb7affd647ba4c0", + "heatmap_sorts_by_a_numeric_column_": "f10ee7c8e2c3107773b5d2794087355a", "heatmap_filters_by_a_numeric_column_": "fc671e14ec4857bd0c352b4b36b3be0e", - "heatmap_filters_by_a_datetime_column_": "df2fc0496a3eb45353d520bfbfecf0f7", - "heatmap_highlights_invalid_filter_": "47c29960bb6f2fb3e7428c8fb0bbf554", - "heatmap_sorts_by_an_alpha_column_": "f2d77b288eb778c89048dfb902ddc1a1", - "heatmap_displays_visible_columns_": "22be642e6ecce67cd0d12da30feca3d1", + "heatmap_filters_by_a_datetime_column_": "55aa976d76f0a16de9e98c16e02d7996", + "heatmap_highlights_invalid_filter_": "d8005b25ae066a57d5734e889d2c5d1c", + "heatmap_sorts_by_an_alpha_column_": "250283f61cf38d83a294259932c29deb", + "heatmap_displays_visible_columns_": "f2e2ebf9f315da1a2184b41993627af5", "bar_shows_a_grid_without_any_settings_applied_": "5498ffae2e1fd52f8efb46684109de4b", "bar_pivots_by_a_row_": "d345ed4d9cbfd6233f67f1b4989a7c2d", "bar_pivots_by_two_rows_": "e8fac03ea69acab22f329e4c1d2e2f2a", @@ -109,14 +109,14 @@ "area_sorts_by_an_alpha_column_": "5e037514b5f188588949e746613f2c01", "area_displays_visible_columns_": "1121a9c51f6667d92d753780549dc970", "scatter_tooltips_with_no_color_and_size_": "9a9667ba1c2e22f17611e3aefd8f6d78", - "scatter_tooltip_columns_works": "206f3f5c7196052dee86232492d9ec12", + "scatter_tooltip_columns_works": "b59a3ea8b011760748e9b6733c52e8d3", "scatter_tooltip_columns_works_when_color_column_is_null": "ccc4c40761f7f991ff86fd2c2a5389d4", "treemap_shows_a_grid_without_any_settings_applied_": "e61a53b560304cfbe3a6464218910cb0", - "treemap_pivots_by_a_row_": "5c178a1af2053249574d4986858fd7e9", - "treemap_pivots_by_two_rows_": "997cf11f6e9ec2ce60cfa9bb98f2094a", + "treemap_pivots_by_a_row_": "43ae270c3a6e7ed5c19bf71aa3a35e9c", + "treemap_pivots_by_two_rows_": "1e1679e4b43672360c903055f5694b23", "treemap_pivots_by_a_column_": "31229e560fb4a9ddba475d8da60fcef4", - "treemap_pivots_by_a_row_and_a_column_": "3ffbd2bdd14e8771ec9e5388e0fdbbe2", - "treemap_pivots_by_two_rows_and_two_columns_": "f2e9047eea4545901dd97e018c2d3208", + "treemap_pivots_by_a_row_and_a_column_": "83151e882eaf24bb53ae7836f7b127aa", + "treemap_pivots_by_two_rows_and_two_columns_": "617ba2b4c3feb1e3d43f3cbedd149a2c", "treemap_sorts_by_a_hidden_column_": "3c1cbbe9d52aaf10c29234f62fbbae09", "treemap_sorts_by_a_numeric_column_": "320b033284dbb109f1c6cc63bab03f05", "treemap_filters_by_a_numeric_column_": "3a847b92ff685756d93c9f073e58f331", @@ -124,11 +124,11 @@ "treemap_highlights_invalid_filter_": "a397780b30b0e7bf990232472ebe9176", "treemap_sorts_by_an_alpha_column_": "046d040908811f04c15f7646d9d70733", "treemap_displays_visible_columns_": "62996aa87b1237b0be568a339a700bdf", - "treemap_with_column_position_1_set_to_null_": "a2f594ff864fb673cde708e4533d8edc", - "treemap_tooltip_columns_works": "9b3a44cc1b4b1d11cb8b635c850a0612", + "treemap_with_column_position_1_set_to_null_": "c23aeb23156dc3cbe5df1a30729b7a3d", + "treemap_tooltip_columns_works": "6db99d38579a74ff0a1a2b7625866cab", "line_Sets_a_category_axis_when_pivoted_by_a_computed_datetime": "eb1c86dc44988ad9a65fdd5a335850b8", "sunburst_sunburst_label_shows_formatted_date": "590f474e076fd49ce10eb5e97bfc66d3", - "treemap_treemap_label_shows_formatted_date": "6c39c766e14c64c28316137f5f1ff85b", + "treemap_treemap_label_shows_formatted_date": "5286b0c316c4b4b4d8f95edc41166578", "xyline_shows_a_grid_without_any_settings_applied_": "6d4bdd941a04d6e39fe14c2ea001886e", "xyline_pivots_by_a_row_": "14c3bc345abb892ccab5ac2dad1f777a", "xyline_pivots_by_two_rows_": "5ea6481c8e465b87a1fcaca2e8b2a759",