Skip to content

Commit

Permalink
Add column style specification API
Browse files Browse the repository at this point in the history 
initial datagrid integration

shim datagrid into new format

fix datagrid tests

symbols integration

refactor api

update migrations

Co-authored-by: Davis Silverman <sinistersnare@users.noreply.github.com>
Co-authored-by: Broch Stilley <brochington@gmail.com>

tests, lint

better column_config update repr

update tests
  • Loading branch information
@ada-x64 @texodus
ada-x64 authored and texodus committed Mar 10, 2024
1 parent d113742 commit d533c1c
Show file tree
Hide file tree
Showing 58 changed files with 1,301 additions and 732 deletions.
73 changes: 28 additions & 45 deletions packages/perspective-jupyterlab/test/jupyter/widget.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,24 +39,18 @@ describe_jupyter(
"w",
],
async ({ page }) => {
const viewer = await default_body(page);
const num_columns = await viewer.evaluate(async (viewer) => {
const tbl = viewer
.querySelector("perspective-viewer-datagrid")
.shadowRoot.querySelector("regular-table");
return tbl.querySelector("thead tr").childElementCount;
});
await default_body(page);

expect(num_columns).toEqual(3);
const num_columns = await page
.locator("regular-table thead tr")
.first()
.evaluate((tr) => tr.childElementCount);

const num_rows = await viewer.evaluate(async (viewer) => {
const tbl = viewer
.querySelector("perspective-viewer-datagrid")
.shadowRoot.querySelector("regular-table");
return tbl.querySelectorAll("tbody tr").length;
});
expect(num_columns).toEqual(3);

expect(num_rows).toEqual(5);
await expect(
page.locator("regular-table tbody tr")
).toHaveCount(5);
}
);

Expand All @@ -71,24 +65,17 @@ describe_jupyter(
"table.update(arrow_data)",
],
async ({ page }) => {
const viewer = await default_body(page);
const num_columns = await viewer.evaluate(async (viewer) => {
const tbl = viewer
.querySelector("perspective-viewer-datagrid")
.shadowRoot.querySelector("regular-table");
return tbl.querySelector("thead tr").childElementCount;
});
await default_body(page);
const num_columns = await page
.locator("regular-table thead tr")
.first()
.evaluate((tr) => tr.childElementCount);

expect(num_columns).toEqual(3);

const num_rows = await viewer.evaluate(async (viewer) => {
const tbl = viewer
.querySelector("perspective-viewer-datagrid")
.shadowRoot.querySelector("regular-table");
return tbl.querySelectorAll("tbody tr").length;
});

expect(num_rows).toEqual(10);
await expect(
page.locator("regular-table tbody tr")
).toHaveCount(10);
}
);
test_jupyter(
Expand All @@ -101,25 +88,18 @@ describe_jupyter(
"w",
],
async ({ page }) => {
const viewer = await default_body(page);
const num_columns = await viewer.evaluate(async (viewer) => {
const tbl = viewer
.querySelector("perspective-viewer-datagrid")
.shadowRoot.querySelector("regular-table");
await default_body(page);

return tbl.querySelector("thead tr").childElementCount;
});
const num_columns = await page
.locator("regular-table thead tr")
.first()
.evaluate((tr) => tr.childElementCount);

expect(num_columns).toEqual(3);

const num_rows = await viewer.evaluate(async (viewer) => {
const tbl = viewer
.querySelector("perspective-viewer-datagrid")
.shadowRoot.querySelector("regular-table");
return tbl.querySelectorAll("tbody tr").length;
});

expect(num_rows).toEqual(5);
await expect(
page.locator("regular-table tbody tr")
).toHaveCount(5);
}
);

Expand Down Expand Up @@ -228,6 +208,7 @@ describe_jupyter(
// Check default config
expect(config).toEqual({
version: utils.API_VERSION,
column_config: {},
aggregates: {},
columns: [
"ui8",
Expand Down Expand Up @@ -281,6 +262,7 @@ w.theme = "Pro Dark"`
// and check it
expect(config).toEqual({
version: utils.API_VERSION,
column_config: {},
aggregates: {},
columns: ["ui8"],
expressions: {},
Expand Down Expand Up @@ -315,6 +297,7 @@ w.theme = "Pro Dark"`
// Check default config
expect(config).toEqual({
version: utils.API_VERSION,
column_config: {},
aggregates: {},
columns: [
"ui8",
Expand Down
21 changes: 19 additions & 2 deletions packages/perspective-viewer-d3fc/src/ts/charts/xy-scatter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { symbolsObj } from "../series/seriesSymbols";
import { gridLayoutMultiChart } from "../layout/gridLayoutMultiChart";
import xyScatterSeries from "../series/xy-scatter/xyScatterSeries";
import { D3Scale, HTMLSelection, Settings } from "../types";
import { Type } from "@finos/perspective";

/**
* Overrides specific symbols based on plugin settings. This modifies in-place _and_ returns the value.
Expand All @@ -46,8 +47,8 @@ function overrideSymbols(settings: Settings, symbols): D3Scale {
for (let [i, _] of domain.entries()) {
range[i] = range[(i as number) % len];
}
let maybeSymbols: Record<string, string> =
settings.columns?.[symbolCol]?.symbols ?? {};
let maybeSymbols = (settings.column_config?.[symbolCol]?.["symbols"] ??
{}) as Record<string, string>;
Object.entries(maybeSymbols).forEach(([key, value]) => {
// TODO: Define custom symbol types based on the values passed in here.
// https://d3js.org/d3-shape/symbol#custom-symbols
Expand Down Expand Up @@ -182,4 +183,20 @@ xyScatter.plugin = {
selectMode: "toggle",
};

xyScatter.can_render_column_styles = (type: Type, group?: string) => {
return type === "string" && group === "Symbol";
};
xyScatter.column_style_controls = (type: Type, group?: string) => {
if (type === "string" && group === "Symbol") {
return {
symbols: {
keys: "row",
values: Object.keys(symbolsObj),
},
};
} else {
return null;
}
};

export default xyScatter;
57 changes: 25 additions & 32 deletions packages/perspective-viewer-d3fc/src/ts/plugin/plugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,10 @@ import "./polyfills/index";
import charts from "../charts/charts";
import { initialiseStyles } from "../series/colorStyles";
import style from "../../../dist/css/perspective-viewer-d3fc.css";
import { HTMLPerspectiveViewerElement } from "@finos/perspective-viewer";
import {
PerspectiveColumnConfig,
HTMLPerspectiveViewerElement,
} from "@finos/perspective-viewer";

import * as d3 from "d3";
import { symbolsObj } from "../series/seriesSymbols";
Expand Down Expand Up @@ -44,6 +47,7 @@ const EXCLUDED_SETTINGS = [
"agg_paths",
"treemaps",
"axisMemo",
"column_config",
];

function getD3FCStyles(): string {
Expand Down Expand Up @@ -153,37 +157,19 @@ export function register(...plugin_names: string[]) {
chart.plugin.max_columns = x;
}

get plugin_attributes() {
let symbols = Object.entries(symbolsObj).map(
([name, ty]) => {
let container = document.createElement("div");
d3.select(container)
.append("svg")
.attr("viewbox", "0, 0, 15, 15") //eyeballed this, it's probably wrong
.append("path")
.attr("transform", "translate(7.5, 7.5)")
.attr("d", d3.symbol(ty)());
let html = d3.select(container).html();
container.remove();

return {
name,
html,
};
}
can_render_column_styles(type: Type, group: string) {
return chart.can_render_column_styles?.call(
this,
type,
group
);
return {
symbol: {
symbols,
},
};
}

can_render_column_styles(type: Type, group: string) {
return (
chart.plugin.name === "X/Y Scatter" &&
type === "string" &&
group === "Symbol"
column_style_controls(type: Type, group: string) {
return chart.column_style_controls?.call(
this,
type,
group
);
}

Expand Down Expand Up @@ -588,14 +574,21 @@ export function register(...plugin_names: string[]) {
return settings;
}

restore(settings: Settings) {
const new_settings = {};
restore(
settings: Settings,
column_config: PerspectiveColumnConfig
) {
const new_settings: Partial<Settings> = {};
for (const name of EXCLUDED_SETTINGS) {
if (this._settings?.[name] !== undefined) {
new_settings[name] = this._settings?.[name];
}
}
this._settings = { ...new_settings, ...settings };
this._settings = {
...new_settings,
...settings,
column_config,
};
}
}
);
Expand Down
26 changes: 8 additions & 18 deletions packages/perspective-viewer-d3fc/src/ts/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@
// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

import { IPerspectiveViewerPlugin } from "@finos/perspective-viewer";
import {
IPerspectiveViewerPlugin,
PerspectiveColumnConfig,
} from "@finos/perspective-viewer";
import { DataRow, Type } from "@finos/perspective";

export interface Element {
Expand All @@ -32,6 +35,9 @@ export interface Chart {
};
selectMode?: string;
};
can_render_column_styles?: (type: Type, group?: string) => boolean;
// TODO: Generate the type for the column style schema.
column_style_controls?: (type: Type, group?: string) => unknown;
}

export type PadUnit = "percent" | "domain";
Expand Down Expand Up @@ -80,13 +86,6 @@ export type TreemapValue = {
treemapRoute?: any[]; // string[]?
};

export type ColumnSettingsConfig = {
symbols: Record<string, string>;
};
export type ColumnSettings<
T extends Record<string, any> = ColumnSettingsConfig
> = Record<string, T>;

export type Settings = {
hideKeys?: any[];
agg_paths?: any; // any[]?
Expand All @@ -102,7 +101,7 @@ export type Settings = {
splitValues: any[];
textStyles: TextStyles;
sunburstLevel?: any;
columns?: ColumnSettings;
column_config?: PerspectiveColumnConfig;
treemaps?: Record<string, TreemapValue>;
};

Expand Down Expand Up @@ -195,15 +194,6 @@ export interface ChartElement extends IPerspectiveViewerPlugin {
get max_columns(): number;
set max_columns(value: number);

get plugin_attributes(): {
symbol: {
symbols: {
name: string;
html: string;
}[];
};
};

_draw(): void;

getContainer(): HTMLElement;
Expand Down
11 changes: 2 additions & 9 deletions packages/perspective-viewer-d3fc/test/js/barWidth.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

import { test, expect } from "@finos/perspective-test";
import { test, expect, DEFAULT_CONFIG } from "@finos/perspective-test";
import {
API_VERSION,
compareSVGContentsToSnapshot,
Expand Down Expand Up @@ -41,19 +41,12 @@ test.describe("Bar Width", () => {
);

expect(config).toEqual({
version: API_VERSION,
...DEFAULT_CONFIG,
plugin: "Y Bar",
columns: ["Profit"],
group_by: ["Order Date"],
split_by: ["Profit"],
aggregates: {},
filter: [],
sort: [],
plugin_config: {},
settings: false,
expressions: {},
theme: "Pro Light",
title: null,
});

await compareSVGContentsToSnapshot(
Expand Down
17 changes: 7 additions & 10 deletions packages/perspective-viewer-datagrid/src/js/custom_elements/datagrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { activate } from "../plugin/activate.js";
import { restore } from "../plugin/restore.js";
import { save } from "../plugin/save";
import { draw } from "../plugin/draw";
import getDefaultConfig from "../default_config.js";
import column_style_controls from "../plugin/column_style_controls.js";
import datagridStyles from "../../../dist/css/perspective-viewer-datagrid.css";

/**
Expand Down Expand Up @@ -87,17 +87,14 @@ export class HTMLPerspectiveViewerDatagridPluginElement extends HTMLElement {
return 1;
}

/** opt-in to column styling */
get plugin_attributes() {
return {
style: getDefaultConfig.call(this),
};
}

can_render_column_styles(type, _group) {
return type !== "boolean";
}

column_style_controls(type, group) {
return column_style_controls.call(this, type, group);
}

async draw(view) {
return await draw.call(this, view);
}
Expand Down Expand Up @@ -126,8 +123,8 @@ export class HTMLPerspectiveViewerDatagridPluginElement extends HTMLElement {
return save.call(this);
}

restore(token) {
return restore.call(this, token);
restore(token, column_config) {
return restore.call(this, token, column_config);
}

async restyle(view) {
Expand Down
Loading

0 comments on commit d533c1c

Please sign in to comment.