Skip to content

Commit

Permalink
Add starting support for Typescript in perspective-viewer-d3fc package
Browse files Browse the repository at this point in the history
  • Loading branch information
@brochington
brochington committed Nov 15, 2023
1 parent 4b1f190 commit 3f03d24
Show file tree
Hide file tree
Showing 112 changed files with 1,533 additions and 445 deletions.
24 changes: 12 additions & 12 deletions packages/perspective-viewer-d3fc/build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,16 @@ const { build } = require("@finos/perspective-esbuild-plugin/build");
const BUILD = [
{
entryPoints: [
"src/js/index/area.js",
"src/js/index/bar.js",
"src/js/index/candlestick.js",
"src/js/index/column.js",
"src/js/index/heatmap.js",
"src/js/index/line.js",
"src/js/index/ohlc.js",
"src/js/index/sunburst.js",
"src/js/index/xy-scatter.js",
"src/js/index/y-scatter.js",
"src/ts/index/area.ts",
"src/ts/index/bar.ts",
"src/ts/index/candlestick.ts",
"src/ts/index/column.ts",
"src/ts/index/heatmap.ts",
"src/ts/index/line.ts",
"src/ts/index/ohlc.ts",
"src/ts/index/sunburst.ts",
"src/ts/index/xy-scatter.ts",
"src/ts/index/y-scatter.ts",
],
define: {
global: "window",
Expand All @@ -42,7 +42,7 @@ const BUILD = [
outdir: "dist/esm",
},
{
entryPoints: ["src/js/index.js"],
entryPoints: ["src/ts/index.ts"],
define: {
global: "window",
},
Expand All @@ -55,7 +55,7 @@ const BUILD = [
outfile: "dist/esm/perspective-viewer-d3fc.js",
},
{
entryPoints: ["src/js/index.js"],
entryPoints: ["src/ts/index.ts"],
define: {
global: "window",
},
Expand Down
1 change: 1 addition & 0 deletions packages/perspective-viewer-d3fc/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
"gradient-parser": "1.0.2"
},
"devDependencies": {
"@types/d3": "^7.0.0",
"@finos/perspective-esbuild-plugin": "^2.6.1",
"@finos/perspective-test": "^2.6.1",
"@prospective.co/procss": "^0.1.13"
Expand Down
138 changes: 112 additions & 26 deletions ...ve-viewer-d3fc/src/js/axis/axisFactory.js → ...ve-viewer-d3fc/src/ts/axis/axisFactory.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,65 @@
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

import * as fc from "d3fc";
import { axisType } from "./axisType";
import { AxisTypeValues, axisType } from "./axisType";
import * as none from "./noAxis";
import * as linear from "./linearAxis";
import * as time from "./timeAxis";
import * as ordinal from "./ordinalAxis";
import valueFormatter from "./valueFormatter";

// TODO: Type this better
export interface AxisFactoryContent {
scale: D3Scale;
domain: any[];
domainFunction: any;
labelFunction: any;
component: {
bottom: any;
left: any;
top: any;
right: any;
};
size: any;
decorate: any;
label: string;
tickFormatFunction: any;
}

interface AxisFactory {
(data: any[]): any;
memoValue: <T extends Axis | undefined = undefined>(
...args: T[]
) => GetSetReturn<T, Axis, AxisFactory>;
excludeType: <T extends string | undefined = undefined>(
...args: T[]
) => GetSetReturn<T, string, AxisFactory>;
orient: <T extends Orientation | undefined = undefined>(
...args: T[]
) => GetSetReturn<T, Orientation, AxisFactory>;
settingName: <T extends SettingNameValues | undefined = undefined>(
...args: T[]
) => GetSetReturn<T, SettingNameValues, AxisFactory>;
settingValue: <T extends string | null | undefined = undefined>(
...args: T[]
) => GetSetReturn<T, string | null, AxisFactory>;
valueName: <T extends ValueName | undefined = undefined>(
...args: T[]
) => GetSetReturn<T, ValueName, AxisFactory>;
valueNames: <T extends ValueName[] | undefined = undefined>(
...args: T[]
) => GetSetReturn<T, ValueName[], AxisFactory>;
modifyDomain: <T extends ModifyDomainFunc | undefined = undefined>(
...args: T[]
) => GetSetReturn<T, ModifyDomainFunc, AxisFactory>;

// optional params, no idea yet if these are right or not.
include?: (nextInclude?: number[]) => any;
paddingStrategy?: (nextPaddingStrategy?: any) => any;
pad?: (nextPad?: [number, number]) => any;
}

export type ModifyDomainFunc = (domain: any[]) => any[];

const axisTypes = {
none,
Expand All @@ -24,26 +78,26 @@ const axisTypes = {
linear,
};

export const axisFactory = (settings) => {
let excludeType = null;
let orient = "horizontal";
let settingName = "crossValues";
let settingValue = null;
let valueNames = ["crossValue"];
export const axisFactory = (settings: Settings): AxisFactory => {
let excludeType: AxisTypeValues | null = null;
let orient: Orientation = "horizontal";
let settingName: SettingNameValues = "crossValues";
let settingValue: string | undefined = undefined;
let valueNames: ValueName[] = ["crossValue"];
let modifyDomain = null;
let memoValue = null;

const optionalParams = ["include", "paddingStrategy", "pad"];
const optional = {};

const _factory = (data) => {
const _factory: any = (data): AxisFactoryContent => {
const useType = axisType(settings)
.excludeType(excludeType)
.settingName(settingName)
.settingValue(settingValue)();

const axis = axisTypes[useType];
const domainFunction = axis.domain().valueNames(valueNames);
const domainFunction = (axis.domain() as Domain).valueNames(valueNames);

optionalParams.forEach((p) => {
if (optional[p] && domainFunction[p])
Expand All @@ -61,7 +115,7 @@ export const axisFactory = (settings) => {
memoValue[1] = domain[1] = Math.max(domain[1], memoValue[1]);
}

const component = axis.component
const component = axis.hasOwnProperty("component")
? createComponent(axis, domain, data)
: defaultComponent();

Expand All @@ -79,6 +133,9 @@ export const axisFactory = (settings) => {
size: component.size,
decorate: component.decorate,
label: settings[settingName].map((v) => v.name).join(", "),
// Not all Axis provide a tickFormatFunction, but currently it's expected to be
// undefined if not used. Ignoring this until we have a better solution.
// @ts-ignore
tickFormatFunction: axis.tickFormatFunction,
};
};
Expand All @@ -98,65 +155,94 @@ export const axisFactory = (settings) => {
decorate: () => {},
});

_factory.memoValue = (...args) => {
_factory.memoValue = <T extends Axis | undefined = undefined>(
...args: T[]
): GetSetReturn<T, Axis, AxisFactory> => {
if (!args.length) {
return memoValue;
return memoValue as GetSetReturn<T, Axis, AxisFactory>;
}
memoValue = args[0];
return _factory;
};

_factory.excludeType = (...args) => {
_factory.excludeType = <T extends AxisTypeValues | undefined = undefined>(
...args: T[]
): GetSetReturn<T, string, AxisFactory> => {
if (!args.length) {
return excludeType;
return excludeType as GetSetReturn<T, string, AxisFactory>;
}
excludeType = args[0];
return _factory;
};

_factory.orient = (...args) => {
_factory.orient = <T extends Orientation | undefined = undefined>(
...args: T[]
): GetSetReturn<T, Orientation, AxisFactory> => {
if (!args.length) {
return orient;
return orient as GetSetReturn<T, Orientation, AxisFactory>;
}
orient = args[0];
return _factory;
};

_factory.settingName = (...args) => {
_factory.settingName = <
T extends SettingNameValues | undefined = undefined
>(
...args: T[]
): GetSetReturn<T, SettingNameValues, AxisFactory> => {
if (!args.length) {
return settingName;
return settingName as GetSetReturn<
T,
SettingNameValues,
AxisFactory
>;
}
settingName = args[0];
return _factory;
};

_factory.settingValue = (...args) => {
_factory.settingValue = <T extends string | null | undefined = undefined>(
...args: T[]
): GetSetReturn<T, string | null, AxisFactory> => {
if (!args.length) {
return settingValue;
return settingValue as GetSetReturn<T, string | null, AxisFactory>;
}
settingValue = args[0];
return _factory;
};

_factory.valueName = (...args) => {
_factory.valueName = <T extends ValueName | undefined = undefined>(
...args: T[]
): GetSetReturn<T, ValueName, AxisFactory> => {
if (!args.length) {
return valueNames[0];
return valueNames[0] as GetSetReturn<T, ValueName, AxisFactory>;
}
valueNames = [args[0]];
return _factory;
};

_factory.valueNames = (...args) => {
_factory.valueNames = <T extends ValueName[] | undefined = undefined>(
...args: T[]
): GetSetReturn<T, ValueName[], AxisFactory> => {
if (!args.length) {
return valueNames;
return valueNames as GetSetReturn<T, ValueName[], AxisFactory>;
}
valueNames = args[0];
return _factory;
};

_factory.modifyDomain = (...args) => {
// Looks like this can be a function, or maybe something else? Not sure....
_factory.modifyDomain = <
T extends ModifyDomainFunc | undefined = undefined
>(
...args: T[]
): GetSetReturn<T, ModifyDomainFunc, AxisFactory> => {
if (!args.length) {
return modifyDomain;
return modifyDomain as GetSetReturn<
T,
ModifyDomainFunc,
AxisFactory
>;
}
modifyDomain = args[0];
return _factory;
Expand Down
19 changes: 14 additions & 5 deletions ...tive-viewer-d3fc/src/js/axis/axisLabel.js → ...tive-viewer-d3fc/src/ts/axis/axisLabel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,19 +24,28 @@ const labelFunctions = {
linear: linearLabel,
};

export const labelFunction = (settings) => {
export interface LabelFunction {
(d): string;
valueName: <T extends string | undefined = undefined>(
...args: T[]
) => GetSetReturn<T, string, LabelFunction>;
}

export const labelFunction = (settings: Settings): LabelFunction => {
const base = axisType(settings);
let valueName = "__ROW_PATH__";

const label = (d, i) => {
return labelFunctions[base()](valueName)(d, i);
const label: any = (d) => {
return labelFunctions[base()](valueName)(d);
};

rebindAll(label, base);

label.valueName = (...args) => {
label.valueName = <T extends string | undefined = undefined>(
...args: T[]
): GetSetReturn<T, string, LabelFunction> => {
if (!args.length) {
return valueName;
return valueName as GetSetReturn<T, string, LabelFunction>;
}
valueName = args[0];
return label;
Expand Down
Loading

0 comments on commit 3f03d24

Please sign in to comment.