From 9a6c18f00168fe34b83272643a8d21ead0828194 Mon Sep 17 00:00:00 2001 From: Paddy Mullen Date: Fri, 13 Oct 2023 12:23:08 -0400 Subject: [PATCH] Chore/cleanup js (#39) Tidy up some of the TS, remove a bunch of unneeded comments. --- js/components/BaseHeader.tsx | 465 ------------------------------- js/components/ColumnsEditor.tsx | 3 - js/components/CustomHeader.tsx | 65 ++--- js/components/DCFCell.tsx | 2 + js/components/DFViewer.tsx | 36 +-- js/components/OperationUtils.ts | 3 + js/components/Operations.tsx | 5 - js/components/RechartExtra.ts | 4 + js/components/RechartTooltip.tsx | 4 +- js/components/StatusBar.tsx | 5 +- js/components/gridUtils.ts | 53 +--- js/components/staticData.ts | 202 +++++++------- 12 files changed, 161 insertions(+), 686 deletions(-) delete mode 100644 js/components/BaseHeader.tsx diff --git a/js/components/BaseHeader.tsx b/js/components/BaseHeader.tsx deleted file mode 100644 index ece765f9..00000000 --- a/js/components/BaseHeader.tsx +++ /dev/null @@ -1,465 +0,0 @@ -/* -import { Autowired } from "../../../context/context"; -import { Column } from "../../../entities/column"; -import { IComponent } from "../../../interfaces/iComponent"; -import { IMenuFactory } from "../../../interfaces/iMenuFactory"; -import { AgGridCommon } from "../../../interfaces/iCommon"; -import { SortController } from "../../../sortController"; -import { firstExistingValue } from "../../../utils/array"; -import { isIOSUserAgent } from "../../../utils/browser"; -import { removeFromParent, setDisplayed } from "../../../utils/dom"; -import { exists } from "../../../utils/generic"; -import { createIconNoSpan } from "../../../utils/icon"; -import { escapeString } from "../../../utils/string"; -import { Component } from "../../../widgets/component"; -import { RefSelector } from "../../../widgets/componentAnnotations"; -import { LongTapEvent, TapEvent, TouchListener } from "../../../widgets/touchListener"; -import { SortIndicatorComp } from "./sortIndicatorComp"; -import { ColumnModel } from "../../../columns/columnModel"; -import { Events } from "../../../eventKeys"; -import { SortDirection } from "../../../entities/colDef"; - - -import { firstExistingValue } from "../../../utils/array"; -*/ - -import { - Autowired, - Column, - IComponent, - IMenuFactory, - SortController, - _, // contains all of the utils stuff - Component, - RefSelector, - LongTapEvent, - TapEvent, - TouchListener, - SortIndicatorComp, - ColumnModel, - Events, - SortDirection, - GridApi, - ColumnApi, -} from 'ag-grid-community'; - -const escapeString = _.escapeString; -const removeFromParent = _.removeFromParent; -const setDisplayed = _.setDisplayed; -const firstExistingValue = _.firstExistingValue; -const isIOSUserAgent = _.isIOSUserAgent; - -const exists = _.exists; -const createIconNoSpan = _.createIconNoSpan; - -export interface AgGridCommon { - /** The grid api. */ - api: GridApi; - /** The column api. */ - columnApi: ColumnApi; - /** Application context as set on `gridOptions.context`. */ - context: TContext; -} - -export interface IHeaderParams - extends AgGridCommon { - /** The column the header is for. */ - column: Column; - /** - * The name to display for the column. - * If the column is using a headerValueGetter, the displayName will take this into account. - */ - displayName: string; - /** - * Whether sorting is enabled for the column. - * Only put sort logic into your header if this is true. - */ - enableSorting: boolean | undefined; - /** - * Whether menu is enabled for the column. - * Only display a menu button in your header if this is true. - */ - enableMenu: boolean; - /** - * Callback to request the grid to show the column menu. - * Pass in the html element of the column menu to have the - * grid position the menu over the button. - */ - showColumnMenu: (source: HTMLElement) => void; - /** - * Callback to progress the sort for this column. - * The grid will decide the next sort direction eg ascending, descending or 'no sort'. - * Pass `multiSort=true` if you want to do a multi sort (eg user has Shift held down when they click). - */ - progressSort: (multiSort?: boolean) => void; - /** - * Callback to set the sort for this column. - * Pass the sort direction to use ignoring the current sort eg one of 'asc', 'desc' or null (for no sort). - * Pass `multiSort=true` if you want to do a multi sort (eg user has Shift held down when they click) - */ - setSort: (sort: SortDirection, multiSort?: boolean) => void; - - /** Custom header template if provided to `headerComponentParams`, otherwise will be `undefined`. See [Header Templates](https://ag-grid.com/javascript-data-grid/column-headers/#header-templates) */ - template?: string; - /** - * The header the grid provides. - * The custom header component is a child of the grid provided header. - * The grid's header component is what contains the grid managed functionality such as resizing, keyboard navigation etc. - * This is provided should you want to make changes to this cell, - * eg add ARIA tags, or add keyboard event listener (as focus goes here when navigating to the header). - */ - eGridHeader: HTMLElement; -} - -export interface IHeader { - /** Get the header to refresh. Gets called whenever Column Defs are updated. */ - refresh(params: IHeaderParams): boolean; -} - -export interface IHeaderComp extends IHeader, IComponent {} - -export class HeaderComp extends Component implements IHeaderComp { - private static TEMPLATE /* html */ = ``; - - @Autowired('sortController') private sortController: SortController; - @Autowired('menuFactory') private menuFactory: IMenuFactory; - @Autowired('columnModel') private readonly columnModel: ColumnModel; - - @RefSelector('eFilter') private eFilter: HTMLElement; - @RefSelector('eSortIndicator') private eSortIndicator: SortIndicatorComp; - @RefSelector('eMenu') private eMenu: HTMLElement; - @RefSelector('eLabel') private eLabel: HTMLElement; - @RefSelector('eText') private eText: HTMLElement; - - /** - * Selectors for custom headers templates - */ - @RefSelector('eSortOrder') private eSortOrder: HTMLElement; - @RefSelector('eSortAsc') private eSortAsc: HTMLElement; - @RefSelector('eSortDesc') private eSortDesc: HTMLElement; - @RefSelector('eSortMixed') private eSortMixed: HTMLElement; - @RefSelector('eSortNone') private eSortNone: HTMLElement; - - private params: IHeaderParams; - - private lastMovingChanged = 0; - - private currentDisplayName: string; - private currentTemplate: string | null | undefined; - private currentShowMenu: boolean; - private currentSort: boolean | undefined; - - // this is a user component, and IComponent has "public destroy()" as part of the interface. - // so we need to override destroy() just to make the method public. - public destroy(): void { - super.destroy(); - } - - public refresh(params: IHeaderParams): boolean { - this.params = params; - - // if template changed, then recreate the whole comp, the code required to manage - // a changing template is to difficult for what it's worth. - if (this.workOutTemplate() != this.currentTemplate) { - return false; - } - if (this.workOutShowMenu() != this.currentShowMenu) { - return false; - } - if (this.workOutSort() != this.currentSort) { - return false; - } - - this.setDisplayName(params); - - return true; - } - - private workOutTemplate(): string | null | undefined { - let template: string | null | undefined = firstExistingValue( - this.params.template, - HeaderComp.TEMPLATE - ); - - // take account of any newlines & whitespace before/after the actual template - template = template && template.trim ? template.trim() : template; - return template; - } - - public init(params: IHeaderParams): void { - this.params = params; - - this.currentTemplate = this.workOutTemplate(); - this.setTemplate(this.currentTemplate); - this.setupTap(); - this.setupIcons(params.column); - this.setMenu(); - this.setupSort(); - this.setupFilterIcon(); - this.setDisplayName(params); - } - - private setDisplayName(params: IHeaderParams): void { - if (this.currentDisplayName != params.displayName) { - this.currentDisplayName = params.displayName; - const displayNameSanitised = escapeString(this.currentDisplayName); - if (this.eText) { - this.eText.innerHTML = displayNameSanitised!; - } - } - } - - private setupIcons(column: Column): void { - this.addInIcon('menu', this.eMenu, column); - this.addInIcon('filter', this.eFilter, column); - } - - private addInIcon( - iconName: string, - eParent: HTMLElement, - column: Column - ): void { - if (eParent == null) { - return; - } - - const eIcon = createIconNoSpan(iconName, this.gridOptionsService, column); - if (eIcon) { - eParent.appendChild(eIcon); - } - } - - private setupTap(): void { - const { gridOptionsService } = this; - - if (gridOptionsService.is('suppressTouch')) { - return; - } - - const touchListener = new TouchListener(this.getGui(), true); - const suppressMenuHide = gridOptionsService.is('suppressMenuHide'); - const tapMenuButton = suppressMenuHide && exists(this.eMenu); - const menuTouchListener = tapMenuButton - ? new TouchListener(this.eMenu, true) - : touchListener; - - if (this.params.enableMenu) { - const eventType = tapMenuButton ? 'EVENT_TAP' : 'EVENT_LONG_TAP'; - const showMenuFn = (event: TapEvent | LongTapEvent) => { - gridOptionsService.api.showColumnMenuAfterMouseClick( - this.params.column, - event.touchStart - ); - }; - this.addManagedListener( - menuTouchListener, - TouchListener[eventType], - showMenuFn - ); - } - - if (this.params.enableSorting) { - const tapListener = (event: TapEvent) => { - const target = event.touchStart.target as HTMLElement; - // When suppressMenuHide is true, a tap on the menu icon will bubble up - // to the header container, in that case we should not sort - if (suppressMenuHide && this.eMenu.contains(target)) { - return; - } - - this.sortController.progressSort( - this.params.column, - false, - 'uiColumnSorted' - ); - }; - - this.addManagedListener( - touchListener, - TouchListener.EVENT_TAP, - tapListener - ); - } - - // if tapMenuButton is true `touchListener` and `menuTouchListener` are different - // so we need to make sure to destroy both listeners here - this.addDestroyFunc(() => touchListener.destroy()); - - if (tapMenuButton) { - this.addDestroyFunc(() => menuTouchListener.destroy()); - } - } - - private workOutShowMenu(): boolean { - // we don't show the menu if on an iPad/iPhone, as the user cannot have a pointer device/ - // However if suppressMenuHide is set to true the menu will be displayed alwasys, so it's ok - // to show it on iPad in this case (as hover isn't needed). If suppressMenuHide - // is false (default) user will need to use longpress to display the menu. - const menuHides = !this.gridOptionsService.is('suppressMenuHide'); - - const onIpadAndMenuHides = isIOSUserAgent() && menuHides; - const showMenu = this.params.enableMenu && !onIpadAndMenuHides; - - return showMenu; - } - - private setMenu(): void { - // if no menu provided in template, do nothing - if (!this.eMenu) { - return; - } - - this.currentShowMenu = this.workOutShowMenu(); - if (!this.currentShowMenu) { - removeFromParent(this.eMenu); - return; - } - - const suppressMenuHide = this.gridOptionsService.is('suppressMenuHide'); - this.addManagedListener(this.eMenu, 'click', () => - this.showMenu(this.eMenu) - ); - this.eMenu.classList.toggle('ag-header-menu-always-show', suppressMenuHide); - } - - public showMenu(eventSource?: HTMLElement) { - if (!eventSource) { - eventSource = this.eMenu; - } - - this.menuFactory.showMenuAfterButtonClick( - this.params.column, - eventSource, - 'columnMenu' - ); - } - - private workOutSort(): boolean | undefined { - return this.params.enableSorting; - } - - public setupSort(): void { - this.currentSort = this.params.enableSorting; - - // eSortIndicator will not be present when customers provided custom header - // templates, in that case, we need to look for provided sort elements and - // manually create eSortIndicator. - if (!this.eSortIndicator) { - this.eSortIndicator = this.context.createBean( - new SortIndicatorComp(true) - ); - this.eSortIndicator.attachCustomElements( - this.eSortOrder, - this.eSortAsc, - this.eSortDesc, - this.eSortMixed, - this.eSortNone - ); - } - this.eSortIndicator.setupSort(this.params.column); - - // we set up the indicator prior to the check for whether this column is sortable, as it allows the indicator to - // set up the multi sort indicator which can appear irrelevant of whether this column can itself be sorted. - // this can occur in the case of a non-sortable group display column. - if (!this.currentSort) { - return; - } - - const sortUsingCtrl = - this.gridOptionsService.get('multiSortKey') === 'ctrl'; - - // keep track of last time the moving changed flag was set - this.addManagedListener( - this.params.column, - Column.EVENT_MOVING_CHANGED, - () => { - this.lastMovingChanged = new Date().getTime(); - } - ); - - // add the event on the header, so when clicked, we do sorting - if (this.eLabel) { - this.addManagedListener(this.eLabel, 'click', (event: MouseEvent) => { - // sometimes when moving a column via dragging, this was also firing a clicked event. - // here is issue raised by user: https://ag-grid.zendesk.com/agent/tickets/1076 - // this check stops sort if a) column is moving or b) column moved less than 200ms ago (so caters for race condition) - const moving = this.params.column.isMoving(); - const nowTime = new Date().getTime(); - // typically there is <2ms if moving flag was set recently, as it would be done in same VM turn - const movedRecently = nowTime - this.lastMovingChanged < 50; - const columnMoving = moving || movedRecently; - - if (!columnMoving) { - const multiSort = sortUsingCtrl - ? event.ctrlKey || event.metaKey - : event.shiftKey; - this.params.progressSort(multiSort); - } - }); - } - - const onSortingChanged = () => { - this.addOrRemoveCssClass( - 'ag-header-cell-sorted-asc', - this.params.column.isSortAscending() - ); - this.addOrRemoveCssClass( - 'ag-header-cell-sorted-desc', - this.params.column.isSortDescending() - ); - this.addOrRemoveCssClass( - 'ag-header-cell-sorted-none', - this.params.column.isSortNone() - ); - - if (this.params.column.getColDef().showRowGroup) { - const sourceColumns = this.columnModel.getSourceColumnsForGroupColumn( - this.params.column - ); - // this == is intentional, as it allows null and undefined to match, which are both unsorted states - const sortDirectionsMatch = sourceColumns?.every( - (sourceCol) => this.params.column.getSort() == sourceCol.getSort() - ); - const isMultiSorting = !sortDirectionsMatch; - - this.addOrRemoveCssClass('ag-header-cell-sorted-mixed', isMultiSorting); - } - }; - this.addManagedListener( - this.eventService, - Events.EVENT_SORT_CHANGED, - onSortingChanged - ); - this.addManagedListener( - this.eventService, - Events.EVENT_COLUMN_ROW_GROUP_CHANGED, - onSortingChanged - ); - } - - private setupFilterIcon(): void { - if (!this.eFilter) { - return; - } - - this.addManagedListener( - this.params.column, - Column.EVENT_FILTER_CHANGED, - this.onFilterChanged.bind(this) - ); - this.onFilterChanged(); - } - - private onFilterChanged(): void { - const filterPresent = this.params.column.isFilterActive(); - setDisplayed(this.eFilter, filterPresent, { skipAriaHidden: true }); - } -} diff --git a/js/components/ColumnsEditor.tsx b/js/components/ColumnsEditor.tsx index 461dc22c..0b77e659 100644 --- a/js/components/ColumnsEditor.tsx +++ b/js/components/ColumnsEditor.tsx @@ -10,7 +10,6 @@ import { tableDf, bakedCommandConfig } from './staticData'; export type OperationSetter = (ops: Operation[]) => void; export interface WidgetConfig { showCommands: boolean; - // showTransformed:boolean; } export function ColumnsEditor({ @@ -31,7 +30,6 @@ export function ColumnsEditor({ widgetConfig: WidgetConfig; }) { const allColumns = df.schema.fields.map((field) => field.name); - //console.log('Columns Editor, commandConfig', commandConfig); return (
{widgetConfig.showCommands ? ( @@ -62,7 +60,6 @@ export function ColumnsEditorEx() { transformed_df: EmptyDf, generated_py_code: 'default py code', transform_error: undefined, - // transform_error:"asdfasf" }; return ( (value: TValue) { return _.isArray(value) && isNumOrStr(value[0]) && isNumOrStr(value[1]) @@ -63,30 +55,30 @@ export const makeData = (histogram: number[]) => { const formatter = (value: any, name: any, props: any) => { if (props.payload.name === 'longtail') { return [value, name]; - } - else { + } else { return [value, props.payload.name]; } }; - export function FloatingTooltip({ items, x, y }: any) { const offset = 30; - const renderedItems = items.map((name: [string, number], value: number | string) => { - - const [realName, realValue] = name; - const formattedVal = realValue == 0 ? "<1" : realValue; - return ( - -
{realName}
-
{formattedVal}%
- - ); - }); + const renderedItems = items.map( + (name: [string, number], value: number | string) => { + const [realName, realValue] = name; + const formattedVal = realValue === 0 ? '<1' : realValue; + return ( + +
{realName}
+
{formattedVal}%
+ + ); + } + ); return createPortal(
+ style={{ position: 'absolute', top: y + offset, left: x + offset }} + >
{renderedItems}
, document.body @@ -94,13 +86,7 @@ export function FloatingTooltip({ items, x, y }: any) { } export const ToolTipAdapter = (args: any) => { - const { active, formatter, payload, label } = args; - console.log('label', label); - //console.log("args", args, formatter); - //console.log("coordinate, box", args.coordinate, args.box); - //console.log("payload", payload) - //const anchor = useRef(null); - + const { active, formatter, payload } = args; if (active && payload && payload.length) { const renderContent2 = () => { //const items = (itemSorter ? _.sortBy(payload, itemSorter) : payload).map((entry, i) => { @@ -113,7 +99,7 @@ export const ToolTipAdapter = (args: any) => { const { value, name } = entry; let finalValue: React.ReactNode = value; let finalName: React.ReactNode = name; - if (finalFormatter && finalValue != null && finalName != null) { + if (finalFormatter && finalValue !== null && finalName !== null) { const formatted = finalFormatter(value, name, entry, i, payload); if (Array.isArray(formatted)) { [finalValue, finalName] = formatted; @@ -126,13 +112,6 @@ export const ToolTipAdapter = (args: any) => { }); return items; }; - /* -

{`${label} : ${payload[0].value}`}

-

{label}

-

Anything you want can be displayed here.

- - - */ return (
{ //export const HistogramCell = ({histogram}: {histogram:any}) => { export const HistogramCell = (props: any) => { - if (props == undefined || props.value == undefined) { + if (props === undefined || props.value === undefined) { return ; } const histogram = props.value.histogram; @@ -163,8 +142,10 @@ export const HistogramCell = (props: any) => { height="10" patternUnits="userSpaceOnUse" > - + { formatter={formatter} labelStyle={{ display: 'None' }} wrapperStyle={{ zIndex: 999991 }} - contentStyle={{'color':'black'}} + contentStyle={{ color: 'black' }} content={} offset={20} allowEscapeViewBox={{ x: true }} diff --git a/js/components/DCFCell.tsx b/js/components/DCFCell.tsx index b12d3d40..90809a58 100644 --- a/js/components/DCFCell.tsx +++ b/js/components/DCFCell.tsx @@ -15,6 +15,8 @@ export type CommandConfigSetterT = ( /* Widget DCFCell is meant to be used with callback functions and passed values, not explicit http calls + + TODO:add height settings to dfConfig rather than hardcoded. */ export function WidgetDCFCell({ origDf, diff --git a/js/components/DFViewer.tsx b/js/components/DFViewer.tsx index 1880a2b6..9f688f39 100644 --- a/js/components/DFViewer.tsx +++ b/js/components/DFViewer.tsx @@ -1,8 +1,4 @@ -import React, { - useRef, - CSSProperties, - // useMemo, -} from 'react'; +import React, { useRef, CSSProperties } from 'react'; import _ from 'lodash'; import { DFWhole, EmptyDf } from './staticData'; @@ -31,11 +27,9 @@ export function DFViewer( setActiveCol: () => null, } ) { - const [agColsPure, agData] = dfToAgrid(df); - console.log("dfviewer df", df); - console.log("dfviewer agData", agData); - + // console.log('dfviewer agData', agData); + const styledColumns = updateAtMatch( _.clone(agColsPure), activeCol || '___never', @@ -45,7 +39,6 @@ export function DFViewer( { cellStyle: {} } ); - //console.log("styledColumns after updateAtMatch", activeCol, styledColumns) const gridOptions: GridOptions = { rowSelection: 'single', onRowClicked: (event) => console.log('A row was clicked'), @@ -79,6 +72,12 @@ export function DFViewer( const gridRef = useRef>(null); const makeCondtionalAutosize = (count: number, delay: number) => { + /* + this code is buggy and I'm not confident in it. I'm very + surprised that automatically autosizing AG-grid requires custom + functions to be written vs just a flag. + */ + let counter = count; let timer: NodeJS.Timeout; let colWidthHasBeenSet = false; @@ -99,16 +98,10 @@ export function DFViewer( } } - // console.log('first pass currentColWidth'); - const conditionallyAutosize = () => { - // console.log("conditionallyAutosize", count, delay) if (gridRef !== undefined) { - // console.log("gridref defined") if (gridRef.current !== undefined && gridRef.current !== null) { - // console.log("gridref.current defined") if (gridRef.current.columnApi !== undefined) { - // console.log("calling autosizeAllColumns", count, delay); gridRef.current.columnApi.autoSizeAllColumns(); const dc = gridRef.current.columnApi.getAllDisplayedColumns(); // console.log("bodyWidth", cm.bodyWidth) @@ -152,18 +145,7 @@ export function DFViewer( }; makeCondtionalAutosize(50, 350); - //const histograms = _.fromPairs( _.map({'a':10, 'b':20}, function(val,key) {return [y, x] })) - // const histograms = _.fromPairs( _.map(df.table_hints, - // function(val,key) { - // return [key, val.histogram || []] })) const pinnedTopRowData = [df.table_hints]; - //const pinnedTopRowData = [histograms]; - // const pinnedTopRowData = [{'index': 'foo', - // 'end station name': 'bar', - // 'tripduration': 471, - // 'start station name': 'Catherine St & Monroe St', - // 'floatCol': '1.111', - // }]; return (
diff --git a/js/components/OperationUtils.ts b/js/components/OperationUtils.ts index 4a2969f1..57b503a6 100644 --- a/js/components/OperationUtils.ts +++ b/js/components/OperationUtils.ts @@ -1,3 +1,6 @@ +/* + used for manipulating the JSON Flavored lisp of operations and commands + */ import _ from 'lodash'; import { SymbolT, ColEnumArgs, SymbolDf, symDf } from './CommandUtils'; diff --git a/js/components/Operations.tsx b/js/components/Operations.tsx index 7be4e3a0..245a1fba 100644 --- a/js/components/Operations.tsx +++ b/js/components/Operations.tsx @@ -56,15 +56,11 @@ export const OperationsList = ({ { cellStyle: {} } ); - //console.log('OperationsList columns', columns); - const gridOptions: GridOptions = { rowSelection: 'single', headerHeight: 30, - //onRowClicked: (event) => console.log('A row was clicked'), onCellClicked: (event) => { const colName = event.column.getColId(); - //console.log('operationsList onCellClicked'); setActiveKey(colName); }, }; @@ -191,7 +187,6 @@ export const OperationViewer = ({ } }; const { argspecs, defaultArgs } = commandConfig; - //console.log('OperationsViewer operationDict', operationDict, 'activeKey', activeKey); return (
{ return val; }; -const getNumericFormatter = (totalWidth:number) => { +const getNumericFormatter = (totalWidth: number) => { const formatter = new Intl.NumberFormat('en-US'); const numericFormatter = (params: ValueFormatterParams): string => { const val = params.value; - if(val === null) { - return '' + if (val === null) { + return ''; } return formatter.format(params.value).padStart(totalWidth, ' '); - } - return numericFormatter -} -/* - console.log((new Intl.NumberFormat('en-US')).format(amount)) - console.log((new Intl.NumberFormat('en-US', { maximumFractionDigits: 1})).format(number)) + }; + return numericFormatter; +}; - console.log(`|${last4Digits.padStart(7, ' ')}|`) - - valueFormatter: currencyFormatter} - ]; - - function currencyFormatter(params) { - return '£' + formatNumber(params.value); - } -*/ function getFormatter(hint: ColumnHint): ValueFormatterFunc { if (hint === undefined || hint.is_numeric === false) { return anyFormatter; @@ -87,27 +81,10 @@ function getFormatter(hint: ColumnHint): ValueFormatterFunc { const totalWidth = commas + hint.max_digits; return getNumericFormatter(totalWidth); } else { - /* - - const intWidth = commas + hint.max_digits; - const fracWidth = 4; - return (params: ValueFormatterParams):string => { - console.log("params", params) - const formatter = new Intl.NumberFormat('en-US', { maximumFractionDigits: 3 }); - //console.log(`|${last4Digits.padStart(7, ' ')}|`) - const numFormatted = formatter.format(params.value); - if(numFormatted.includes(".")){ - const [intPart, fracPart] = numFormatted.split(".") - return [intPart.padStart(intWidth, " "), fracPart.padEnd(3, " ")].join(".") } - else { - return numFormatted.padStart(intWidth, " ").padEnd(intWidth + fracWidth, " ") - } - };*/ return (params: ValueFormatterParams): string => { - //console.log("params", params) - if(params.value === null) { - return ''; - } + if (params.value === null) { + return ''; + } return floatFormatter.format(params.value); }; } diff --git a/js/components/staticData.ts b/js/components/staticData.ts index bcd31a13..98220b90 100644 --- a/js/components/staticData.ts +++ b/js/components/staticData.ts @@ -18,17 +18,7 @@ export const bakedOperations: Operation[] = [ [sym('fillna'), symDf, 'col2', 5], [sym('resample'), symDf, 'month', 'monthly', {}], ]; -/* -const origColumns = [ - { key: 'id', name: 'ID' }, - { key: 'title', name: 'Title' }, -]; -const origRows = [ - { id: 0, title: 'Example' }, - { id: 1, title: 'Demo' }, -]; -*/ export interface DFColumn { name: string; type: string; @@ -70,107 +60,108 @@ export const EmptyDf: DFWhole = { //print(sdf.to_json(orient='table', indent=2)) export const histograms = { - num_histo : [ - {'name': '-406 - -332', 'population': 1}, - {'name': '-332 - -258', 'population': 0}, - {'name': '-258 - -184', 'population': 2}, - {'name': '-184 - -111', 'population': 10}, - {'name': '-111 - -37', 'population': 22}, - {'name': '-37 - 36', 'population': 30}, - {'name': '36 - 109', 'population': 22}, - {'name': '109 - 183', 'population': 10}, - {'name': '183 - 257', 'population': 3}, - {'name': '257 - 331', 'population': 0}], + num_histo: [ + { name: '-406 - -332', population: 1 }, + { name: '-332 - -258', population: 0 }, + { name: '-258 - -184', population: 2 }, + { name: '-184 - -111', population: 10 }, + { name: '-111 - -37', population: 22 }, + { name: '-37 - 36', population: 30 }, + { name: '36 - 109', population: 22 }, + { name: '109 - 183', population: 10 }, + { name: '183 - 257', population: 3 }, + { name: '257 - 331', population: 0 }, + ], - bool_histo : [ - {'name': 'False', 'false': 50}, - {'name': 'True', 'true': 30}, - {'name': 'NA', 'NA': 20}], + bool_histo: [ + { name: 'False', false: 50 }, + { name: 'True', true: 30 }, + { name: 'NA', NA: 20 }, + ], - NA_Only : [ - {'name': 'NA', 'NA': 100}], + NA_Only: [{ name: 'NA', NA: 100 }], - simple_catgeorical : [ - {'name': 2, 'cat_pop': 87.0}, - {'name': 1, 'cat_pop': 13.0}], - - categorical_histo : [ - {'name': 'KTM', 'cat_pop': 30}, - {'name': 'Gas Gas', 'cat_pop': 15}, - {'name': 'Yamaha', 'cat_pop': 10}, - {'name': 'unique', 'unique': 25}, - {'name': 'NA', 'NA': 20} + simple_catgeorical: [ + { name: 2, cat_pop: 87.0 }, + { name: 1, cat_pop: 13.0 }, ], - categorical_histo_lt : [ - {'name': 'KTM', 'cat_pop': 25}, - {'name': 'Gas Gas', 'cat_pop': 12}, - {'name': 'Yamaha', 'cat_pop': 8}, - {'name': 'NA', 'NA': 20}, - {'name': 'longtail', 'unique': 15, 'longtail':20}, + categorical_histo: [ + { name: 'KTM', cat_pop: 30 }, + { name: 'Gas Gas', cat_pop: 15 }, + { name: 'Yamaha', cat_pop: 10 }, + { name: 'unique', unique: 25 }, + { name: 'NA', NA: 20 }, ], - all_unique : [ - {'name': 'unique', 'unique': 100}, + categorical_histo_lt: [ + { name: 'KTM', cat_pop: 25 }, + { name: 'Gas Gas', cat_pop: 12 }, + { name: 'Yamaha', cat_pop: 8 }, + { name: 'NA', NA: 20 }, + { name: 'longtail', unique: 15, longtail: 20 }, ], - unique_na : [ - {'name': 'unique', 'unique': 80}, - {'name': 'NA', 'NA': 20} - ], + all_unique: [{ name: 'unique', unique: 100 }], - unique_continuous : [ - {'name': '-406 -332', 'population': 1}, - {'name': '-332 -258', 'population': 0}, - {'name': '-258 -184', 'population': 0}, - {'name': '-184 -111', 'population': 10}, - {'name': '-111 -37', 'population': 21}, - {'name': '-37 36', 'population': 29}, - {'name': '36 109', 'population': 22}, - {'name': '109 183', 'population': 9}, - {'name': '183 257', 'population': 3}, - {'name': '257 331', 'population': 0}, - {'name': 'unique', 'unique': 100}, + unique_na: [ + { name: 'unique', unique: 80 }, + { name: 'NA', NA: 20 }, ], - unique_continuous_scaled : [ - {'name': '-406 -332', 'population': 0}, - {'name': '-332 -258', 'population': 0}, - {'name': '-258 -184', 'population': 0}, - {'name': '-184 -111', 'population': 10}, - {'name': '-111 -37', 'population': 21}, - {'name': '-37 36', 'population': 29}, - {'name': '36 109', 'population': 22}, - {'name': '109 183', 'population': 9}, - {'name': '183 257', 'population': 3}, - {'name': '257 331', 'population': 0}, - {'name': 'unique', 'unique': 29}, + unique_continuous: [ + { name: '-406 -332', population: 1 }, + { name: '-332 -258', population: 0 }, + { name: '-258 -184', population: 0 }, + { name: '-184 -111', population: 10 }, + { name: '-111 -37', population: 21 }, + { name: '-37 36', population: 29 }, + { name: '36 109', population: 22 }, + { name: '109 183', population: 9 }, + { name: '183 257', population: 3 }, + { name: '257 331', population: 0 }, + { name: 'unique', unique: 100 }, ], - unique_continuous_scaled_50 : [ - {'name': '-406 -332', 'population': 0}, - {'name': '-332 -258', 'population': 0}, - {'name': '-258 -184', 'population': 0}, - {'name': '-184 -111', 'population': 10}, - {'name': '-111 -37', 'population': 21}, - {'name': '-37 36', 'population': 29}, - {'name': '36 109', 'population': 22}, - {'name': '109 183', 'population': 9}, - {'name': '183 257', 'population': 3}, - {'name': '257 331', 'population': 0}, - {'name': 'longtail', 'unique': 15}, + unique_continuous_scaled: [ + { name: '-406 -332', population: 0 }, + { name: '-332 -258', population: 0 }, + { name: '-258 -184', population: 0 }, + { name: '-184 -111', population: 10 }, + { name: '-111 -37', population: 21 }, + { name: '-37 36', population: 29 }, + { name: '36 109', population: 22 }, + { name: '109 183', population: 9 }, + { name: '183 257', population: 3 }, + { name: '257 331', population: 0 }, + { name: 'unique', unique: 29 }, ], - start_station_categorical : [{'name': 'Pershing Square N', 'cat_pop': 1}, - {'name': '8 Ave & W 31 St', 'cat_pop': 1}, - {'name': 'Lafayette St & E 8 St', 'cat_pop': 1}, - {'name': 'W 21 St & 6 Ave', 'cat_pop': 1}, - {'name': 'E 17 St & Broadway', 'cat_pop': 1}, - {'name': '8 Ave & W 33 St', 'cat_pop': 1}, - {'name': 'E 43 St & Vanderbilt Ave', 'cat_pop': 1}, - {'name': 'unique', 'cat_pop': 0}, - {'name': 'long_tail', 'cat_pop': 92}, - {'name': 'NA', 'cat_pop': 0}] + unique_continuous_scaled_50: [ + { name: '-406 -332', population: 0 }, + { name: '-332 -258', population: 0 }, + { name: '-258 -184', population: 0 }, + { name: '-184 -111', population: 10 }, + { name: '-111 -37', population: 21 }, + { name: '-37 36', population: 29 }, + { name: '36 109', population: 22 }, + { name: '109 183', population: 9 }, + { name: '183 257', population: 3 }, + { name: '257 331', population: 0 }, + { name: 'longtail', unique: 15 }, + ], + start_station_categorical: [ + { name: 'Pershing Square N', cat_pop: 1 }, + { name: '8 Ave & W 31 St', cat_pop: 1 }, + { name: 'Lafayette St & E 8 St', cat_pop: 1 }, + { name: 'W 21 St & 6 Ave', cat_pop: 1 }, + { name: 'E 17 St & Broadway', cat_pop: 1 }, + { name: '8 Ave & W 33 St', cat_pop: 1 }, + { name: 'E 43 St & Vanderbilt Ave', cat_pop: 1 }, + { name: 'unique', cat_pop: 0 }, + { name: 'long_tail', cat_pop: 92 }, + { name: 'NA', cat_pop: 0 }, + ], }; //export const tableDf2:DFWhole = { @@ -194,7 +185,7 @@ export const foo: DFWhole = { }, table_hints: { index: { is_numeric: false }, - tripduration: { is_numeric: false, histogram:histograms.num_histo}, + tripduration: { is_numeric: false, histogram: histograms.num_histo }, starttime: { is_numeric: false }, stoptime: { is_numeric: false }, 'start station id': { is_numeric: false }, @@ -337,15 +328,21 @@ export const tableDf: DFWhole = { }, ], table_hints: { - 'end station name': { is_numeric: false, histogram: histograms.categorical_histo_lt }, + 'end station name': { + is_numeric: false, + histogram: histograms.categorical_histo_lt, + }, tripduration: { is_numeric: true, is_integer: true, min_digits: 3, max_digits: 4, - histogram:histograms.num_histo + histogram: histograms.num_histo, + }, + 'start station name': { + is_numeric: false, + histogram: histograms.bool_histo, }, - 'start station name': { is_numeric: false, histogram: histograms.bool_histo }, floatCol: { is_numeric: true, is_integer: false, @@ -369,18 +366,17 @@ export const tableDf: DFWhole = { is_integer: true, min_digits: 1, max_digits: 3, - histogram:histograms.num_histo + histogram: histograms.num_histo, }, nanFloat: { is_numeric: true, is_integer: false, min_digits: 1, max_digits: 3, - histogram:histograms.num_histo + histogram: histograms.num_histo, }, nanObject: { is_numeric: false, - } - + }, }, };