From da1bf14d5b64660eb9a314aadefffd597c04b737 Mon Sep 17 00:00:00 2001 From: Paddy Mullen Date: Thu, 31 Oct 2024 17:21:02 -0400 Subject: [PATCH] Chore/fix histogram tooltips (#324) * fixes "Add tooltips to Histograms" #291 * fixes "Add theming support" #238 * built and released 0.7.10 --- .../Styling-Gallery-Pandas.ipynb | 50 +- docs/examples/ex/ColumnsEditorEx.tsx | 101 +- docs/examples/ex/CommandViewerEx.tsx | 35 +- docs/examples/ex/DFViewerEx.tsx | 231 ++- docs/examples/ex/DFViewerEx_large.tsx | 504 +++--- docs/examples/ex/DFViewerEx_real_summary.tsx | 106 +- docs/examples/ex/DFViewerEx_short_data.tsx | 107 +- docs/examples/ex/DFViewerEx_string_index.tsx | 1552 +++++++---------- docs/examples/ex/HistogramEx.tsx | 185 +- docs/examples/ex/StatusBarEx.tsx | 75 +- docs/examples/ex/WidgetDCFCellEx.tsx | 310 +++- js/baked_data/staticData.ts | 511 ------ js/components/ColumnsEditor.tsx | 28 +- js/components/DCFCell.tsx | 82 +- js/components/DFViewerParts/DFViewer.tsx | 48 +- js/components/DFViewerParts/DFWhole.ts | 2 + js/components/DFViewerParts/Displayer.ts | 4 +- js/components/DFViewerParts/HistogramCell.tsx | 155 +- .../DFViewerParts/OtherRenderers.tsx | 29 + .../DFViewerParts/SeriesSummaryTooltip.tsx | 13 + js/components/DFViewerParts/gridUtils.ts | 30 +- js/components/StatusBar.tsx | 2 +- js/components/bakedOperationDefaults.ts | 14 - js/index.ts | 26 +- js/vendor/RechartExtra.ts | 72 - js/vendor/RechartTooltip.tsx | 375 ---- package.json | 5 +- pyproject.toml | 2 +- yarn.lock | 44 +- 29 files changed, 2065 insertions(+), 2633 deletions(-) delete mode 100644 js/baked_data/staticData.ts create mode 100644 js/components/DFViewerParts/OtherRenderers.tsx delete mode 100644 js/components/bakedOperationDefaults.ts delete mode 100644 js/vendor/RechartExtra.ts delete mode 100644 js/vendor/RechartTooltip.tsx diff --git a/docs/example-notebooks/Styling-Gallery-Pandas.ipynb b/docs/example-notebooks/Styling-Gallery-Pandas.ipynb index ac323f52..4402c210 100644 --- a/docs/example-notebooks/Styling-Gallery-Pandas.ipynb +++ b/docs/example-notebooks/Styling-Gallery-Pandas.ipynb @@ -103,6 +103,18 @@ "cell_type": "code", "execution_count": null, "id": "4", + "metadata": {}, + "outputs": [], + "source": [ + "BuckarooWidget(obj_df, \n", + " component_config={'className':'asdf', \n", + " 'selectionBackground': 'red'})" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "5", "metadata": { "tags": [] }, @@ -122,7 +134,7 @@ { "cell_type": "code", "execution_count": null, - "id": "5", + "id": "6", "metadata": { "tags": [] }, @@ -144,7 +156,7 @@ { "cell_type": "code", "execution_count": null, - "id": "6", + "id": "7", "metadata": { "tags": [] }, @@ -167,7 +179,7 @@ { "cell_type": "code", "execution_count": null, - "id": "7", + "id": "8", "metadata": {}, "outputs": [], "source": [ @@ -195,7 +207,7 @@ { "cell_type": "code", "execution_count": null, - "id": "8", + "id": "9", "metadata": { "tags": [] }, @@ -225,7 +237,7 @@ { "cell_type": "code", "execution_count": null, - "id": "9", + "id": "10", "metadata": { "tags": [] }, @@ -241,7 +253,7 @@ { "cell_type": "code", "execution_count": null, - "id": "10", + "id": "11", "metadata": { "tags": [] }, @@ -282,7 +294,7 @@ { "cell_type": "code", "execution_count": null, - "id": "11", + "id": "12", "metadata": { "tags": [] }, @@ -294,7 +306,7 @@ { "cell_type": "code", "execution_count": null, - "id": "12", + "id": "13", "metadata": { "tags": [] }, @@ -310,7 +322,7 @@ }, { "cell_type": "markdown", - "id": "13", + "id": "14", "metadata": {}, "source": [ "# Tooltips" @@ -319,7 +331,7 @@ { "cell_type": "code", "execution_count": null, - "id": "14", + "id": "15", "metadata": { "tags": [] }, @@ -339,7 +351,7 @@ { "cell_type": "code", "execution_count": null, - "id": "15", + "id": "16", "metadata": {}, "outputs": [], "source": [ @@ -348,7 +360,7 @@ }, { "cell_type": "markdown", - "id": "16", + "id": "17", "metadata": {}, "source": [ "# Color_map_config\n", @@ -378,7 +390,7 @@ { "cell_type": "code", "execution_count": null, - "id": "17", + "id": "18", "metadata": { "tags": [] }, @@ -396,7 +408,7 @@ { "cell_type": "code", "execution_count": null, - "id": "18", + "id": "19", "metadata": { "tags": [] }, @@ -418,7 +430,7 @@ { "cell_type": "code", "execution_count": null, - "id": "19", + "id": "20", "metadata": { "tags": [] }, @@ -438,7 +450,7 @@ }, { "cell_type": "markdown", - "id": "20", + "id": "21", "metadata": {}, "source": [ "Extra col def type\n", @@ -450,7 +462,7 @@ }, { "cell_type": "markdown", - "id": "21", + "id": "22", "metadata": {}, "source": [ "# Utility Code" @@ -459,7 +471,7 @@ { "cell_type": "code", "execution_count": null, - "id": "22", + "id": "23", "metadata": { "tags": [] }, @@ -525,7 +537,7 @@ { "cell_type": "code", "execution_count": null, - "id": "23", + "id": "24", "metadata": {}, "outputs": [], "source": [] diff --git a/docs/examples/ex/ColumnsEditorEx.tsx b/docs/examples/ex/ColumnsEditorEx.tsx index b9a3c640..b1a85784 100644 --- a/docs/examples/ex/ColumnsEditorEx.tsx +++ b/docs/examples/ex/ColumnsEditorEx.tsx @@ -1,5 +1,102 @@ -import { extraComponents } from 'buckaroo'; +import React, {useState} from 'react'; +import {extraComponents} from 'buckaroo'; import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; -export default extraComponents.ColumnsEditorEx; +const sym = extraComponents.utils.sym; +const { + symDf, + CommandConfigT, + CommandArgSpec +} = extraComponents.CommandUtils; + +export const EmptyDf: DFWhole = { + dfviewer_config: { + pinned_rows: [], + column_config: [] + }, + data: [] +}; + +export const bakedArgSpecs: CommandArgSpec = { + dropcol: [null], + fillna: [[3, 'fillVal', 'type', 'integer']], + remove_outliers: [[3, 'tail', 'type', 'float']], + search: [[3, 'needle', 'type', 'string']], + resample: [ + [3, 'frequency', 'enum', ['daily', 'weekly', 'monthly']], + [4, 'colMap', 'colEnum', ['null', 'sum', 'mean', 'count']] + ] +}; + +export const bakedOperationDefaults: OperationDefaultArgs = { + dropcol: [sym('dropcol'), symDf, 'col'], + fillna: [sym('fillna'), symDf, 'col', 8], + remove_outliers: [sym('remove_outliers'), symDf, 'col', 0.02], + search: [sym('search'), symDf, 'col', 'term'], + resample: [sym('resample'), symDf, 'col', 'monthly', {}], +}; + +export const bakedCommandConfig: CommandConfigT = { + argspecs: bakedArgSpecs, + defaultArgs: bakedOperationDefaults, +}; + +export const bakedOperations: Operation[] = [ + [sym('dropcol'), symDf, 'col1'], + [sym('fillna'), symDf, 'col2', 5], + [sym('resample'), symDf, 'month', 'monthly', {}], +]; + +export const dfviewer_config = { + column_config: [ + { + col_name: 'index', + displayer_args: { displayer: 'integer', min_digits: 3, max_digits: 5 }, + }, + { + col_name: 'svg_column', + displayer_args: { displayer: 'SVGDisplayer' }, + }, + { + col_name: 'link_column', + displayer_args: { displayer: 'linkify' }, + }, + { + col_name: 'nanObject', + displayer_args: { displayer: 'integer', min_digits: 3, max_digits: 5 }, + color_map_config: { + color_rule: 'color_map', + //map_name: 'DIVERGING_RED_WHITE_BLUE', + map_name: 'BLUE_TO_YELLOW', + val_column: 'tripduration', + }, + }], + extra_grid_config: { rowHeight: 105 }, + component_config: { height_fraction: 1 }, + pinned_rows: [ + // { primary_key_val: 'dtype', displayer_args: { displayer: 'obj' } }, + // { primary_key_val: 'histogram', displayer_args: { displayer: 'histogram' }, }, + ] +}; + + +export default function ColumnsEditorEx() { + const [operations, setOperations] = useState(bakedOperations); + + const baseOperationResults: OperationResult = { + transformed_df: EmptyDf, + generated_py_code: 'default py code', + transform_error: undefined + }; + return ( + + ); +} diff --git a/docs/examples/ex/CommandViewerEx.tsx b/docs/examples/ex/CommandViewerEx.tsx index 4b1a62df..81592d0e 100644 --- a/docs/examples/ex/CommandViewerEx.tsx +++ b/docs/examples/ex/CommandViewerEx.tsx @@ -1,20 +1,45 @@ import * as React from 'react'; -//import {bakedOperations, bakedCommandConfig } from '../../../js/baked_data/staticData'; -import { bakedData } from 'buckaroo'; -import { extraComponents } from 'buckaroo'; +import {extraComponents} from 'buckaroo'; + +const sym = extraComponents.utils.sym; +const { + symDf, + CommandConfigT, + CommandArgSpec, + bakedArgSpecs, +} = extraComponents.CommandUtils; + +export const bakedOperations: Operation[] = [ + [sym('dropcol'), symDf, 'col1'], + [sym('fillna'), symDf, 'col2', 5], + [sym('resample'), symDf, 'month', 'monthly', {}], +]; + +export const bakedOperationDefaults: OperationDefaultArgs = { + dropcol: [sym('dropcol'), symDf, 'col'], + fillna: [sym('fillna'), symDf, 'col', 8], + remove_outliers: [sym('remove_outliers'), symDf, 'col', 0.02], + search: [sym('search'), symDf, 'col', 'term'], + resample: [sym('resample'), symDf, 'col', 'monthly', {}], +}; + +export const bakedCommandConfig: CommandConfigT = { + argspecs: bakedArgSpecs, + defaultArgs: bakedOperationDefaults, +}; export default function Simple() { return ( { console.log('setCommands sent', foo); }} activeColumn={'foo-column'} allColumns={['foo-col', 'bar-col', 'baz-col']} - commandConfig={bakedData.bakedCommandConfig} + commandConfig={bakedCommandConfig} /> ); } diff --git a/docs/examples/ex/DFViewerEx.tsx b/docs/examples/ex/DFViewerEx.tsx index 410ea241..c2a2eaef 100644 --- a/docs/examples/ex/DFViewerEx.tsx +++ b/docs/examples/ex/DFViewerEx.tsx @@ -1,3 +1,230 @@ -import { extraComponents } from 'buckaroo'; +import React, {useState} from 'react'; +import {extraComponents} from 'buckaroo'; +export const smileyPNGString = + 'iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII='; -export default extraComponents.DFViewerEx; +export const tableDf: DFWhole = { + dfviewer_config: { + column_config: [ + { + col_name: 'index', + displayer_args: { displayer: 'integer', min_digits: 3, max_digits: 5 }, + }, + { + col_name: 'svg_column', + displayer_args: { displayer: 'SVGDisplayer' }, + }, + { + col_name: 'link_column', + displayer_args: { displayer: 'linkify' }, + }, + { + col_name: 'nanObject', + displayer_args: { displayer: 'integer', min_digits: 3, max_digits: 5 }, + color_map_config: { + color_rule: 'color_map', + //map_name: 'DIVERGING_RED_WHITE_BLUE', + map_name: 'BLUE_TO_YELLOW', + val_column: 'tripduration', + }, + }, + { + col_name: 'nanFloat', + displayer_args: { + displayer: 'float', + min_fraction_digits: 2, + max_fraction_digits: 8, + }, + tooltip_config: { tooltip_type: 'summary_series' }, + }, + { col_name: 'end station name', displayer_args: { displayer: 'obj' } }, + { + col_name: 'tripduration', + displayer_args: { displayer: 'integer', min_digits: 1, max_digits: 5 }, + color_map_config: { + color_rule: 'color_map', + map_name: 'BLUE_TO_YELLOW', + }, + }, + { + col_name: 'start station name', + displayer_args: { displayer: 'obj' }, + color_map_config: { + color_rule: 'color_not_null', + conditional_color: 'red', + exist_column: 'nanFloat', + }, + }, + { + col_name: 'floatCol', + displayer_args: { + displayer: 'float', + min_fraction_digits: 1, + max_fraction_digits: 3, + }, + }, + { + col_name: 'nanNumeric', + displayer_args: { displayer: 'integer', min_digits: 3, max_digits: 5 }, + tooltip_config: { + tooltip_type: 'simple', + val_column: 'start station name', + }, + }, + { + col_name: 'img_', + displayer_args: { displayer: 'Base64PNGImageDisplayer' }, + ag_grid_specs: { width: 150 }, + }, + ], + extra_grid_config: { rowHeight: 105 }, + component_config: { height_fraction: 1 }, + pinned_rows: [ + // { primary_key_val: 'dtype', displayer_args: { displayer: 'obj' } }, + // { primary_key_val: 'histogram', displayer_args: { displayer: 'histogram' }, }, + ], + }, + data: [ + { + index: 0, + 'end station name': 'Elizabeth St & Hester St', + tripduration: 471, + 'start station name': 'Catherine St & Monroe St', + floatCol: '1.111', + nanNumeric: null, + nanObject: null, + nanFloat: null, + //svg_column: '

paddy

', + link_column: 'https://buckaroo.dev', + img_: smileyPNGString, + }, + { + index: 1, + 'end station name': 'South St & Whitehall St', + tripduration: 1494, + 'start station name': '1 Ave & E 30 St', + floatCol: '8.888', + nanNumeric: null, + nanObject: null, + nanFloat: null, + svg_column: + '', + link_column: 'https://pola.rs/', + }, + { + index: 2, + 'end station name': 'E 59 St & Sutton Pl', + tripduration: 464, + 'start station name': 'E 48 St & 3 Ave', + floatCol: '9.999', + nanNumeric: null, + nanObject: null, + svg_column: + '', + nanFloat: 10, + }, + { + index: 3, + 'end station name': 'E 33 St & 5 Ave', + tripduration: 373, + 'start station name': 'Pershing Square N', + floatCol: '-10.1', + nanCol: null, + nanNumeric: null, + nanObject: null, + svg_column: + '', + nanFloat: null, + }, + { + index: 4, + 'end station name': 'Hancock St & Bedford Ave', + tripduration: 660, + 'start station name': 'Atlantic Ave & Fort Greene Pl', + floatCol: '10.99', + nanNumeric: null, + nanObject: null, + nanFloat: 3, + }, + ], + }; +const histograms = { + CategoricalUniqueNA: [ + {name: 'KTM', cat_pop: 30}, + {name: 'Gas Gas', cat_pop: 15}, + {name: 'Yamaha', cat_pop: 10}, + {name: 'unique', unique: 25}, + {name: 'NA', NA: 20} + ], + Numeric: [ + {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} + ], + BoolWithNA: [ + {name: 'False', false: 50}, + {name: 'True', true: 30}, + {name: 'NA', NA: 20} + ] +} + +const tripDurationBins = [0, 300, 500, 1000, 1500]; +export const summaryDfForTableDf: DFData = [ + { + index: 'histogram', + 'end station name': histograms.CategoricalUniqueNA, + tripduration: histograms.Numeric, + 'start station name': histograms.BoolWithNA, + nanNumeric: histograms.Numeric, + nanFloat: histograms.Numeric, + nanObject: histograms.Numeric, + floatCol: [ + { name: 521, cat_pop: 0.0103 }, + { name: 358, cat_pop: 0.0096 }, + { name: 519, cat_pop: 0.009 }, + { name: 497, cat_pop: 0.0087 }, + { name: 293, cat_pop: 0.0082 }, + { name: 285, cat_pop: 0.0081 }, + { name: 435, cat_pop: 0.008 }, + { name: 'unique', cat_pop: 0.0001 }, + { name: 'long_tail', cat_pop: 0.938 }, + { name: 'NA', cat_pop: 0.0 }, + ], + }, + { + index: 'histogram_bins', + tripduration: tripDurationBins, + nanObject: tripDurationBins, + }, + { + index: 'dtype', + 'end station name': 'String6666', + tripduration: 'object', + 'start station name': 'object', + nanNumeric: 'float64', + nanFloat: 'flot64', + nanObject: 'object', + floatCol: 'float', + }, +]; + + +export default function DFViewerEx() { + const [activeCol, setActiveCol] = useState('tripduration'); + return ( + + ); +} diff --git a/docs/examples/ex/DFViewerEx_large.tsx b/docs/examples/ex/DFViewerEx_large.tsx index 3fde2d75..81710ac9 100644 --- a/docs/examples/ex/DFViewerEx_large.tsx +++ b/docs/examples/ex/DFViewerEx_large.tsx @@ -1,266 +1,270 @@ -import React, { useState} from 'react'; +import React, {useState} from 'react'; import _ from 'lodash'; -import { extraComponents } from 'buckaroo'; -//import { DFData, DFViewerConfig } from 'buckaroo'; +import {extraComponents} from 'buckaroo'; const data = [ - { - "index": 0, - "a": 5, - "b": 2.8571428571 - }, - { - "index": 1, - "a": 28, - "b": 12.8571428571 - }, - -] + { + index: 0, + a: 5, + b: 2.8571428571 + }, + { + index: 1, + a: 28, + b: 12.8571428571 + } +]; -const summary_stats_data =[ - { - "index": "dtype", - "a": "int64", - "b": "float64" - }, - { - "index": "is_numeric", - "a": true, - "b": true - }, - { - "index": "_type", - "a": "integer", - "b": "float" - }, - { - "index": "histogram", - "a": [ - { - "name": "1 - 1.0", - "tail": 1 - }, - { - "name": "2-7", - "population": 16 - }, - { - "name": "7-11", - "population": 11 - }, - { - "name": "11-16", - "population": 6 - }, - { - "name": "16-20", - "population": 11 - }, - { - "name": "20-25", - "population": 5 - }, - { - "name": "25-30", - "population": 14 - }, - { - "name": "30-34", - "population": 9 - }, - { - "name": "34-39", - "population": 9 - }, - { - "name": "39-43", - "population": 11 - }, - { - "name": "43-48", - "population": 10 - }, - { - "name": "49.0 - 49", - "tail": 1 - } - ], - "b": [ - { - "name": "1.4285714285714286 - 1.4285714285714286", - "tail": 1 - }, - { - "name": "3-7", - "population": 12 - }, - { - "name": "7-10", - "population": 16 - }, - { - "name": "10-14", - "population": 9 - }, - { - "name": "14-18", - "population": 9 - }, - { - "name": "18-21", - "population": 9 - }, - { - "name": "21-25", - "population": 12 - }, - { - "name": "25-29", - "population": 14 - }, - { - "name": "29-33", - "population": 6 - }, - { - "name": "33-36", - "population": 7 - }, - { - "name": "36-40", - "population": 6 - }, - { - "name": "41.42857142857143 - 41.42857142857143", - "tail": 1 - } - ] - } - ]; +const summary_stats_data = [ + { + index: 'dtype', + a: 'int64', + b: 'float64' + }, + { + index: 'is_numeric', + a: true, + b: true + }, + { + index: '_type', + a: 'integer', + b: 'float' + }, + { + index: 'histogram', + a: [ + { + name: '1 - 1.0', + tail: 1 + }, + { + name: '2-7', + population: 16 + }, + { + name: '7-11', + population: 11 + }, + { + name: '11-16', + population: 6 + }, + { + name: '16-20', + population: 11 + }, + { + name: '20-25', + population: 5 + }, + { + name: '25-30', + population: 14 + }, + { + name: '30-34', + population: 9 + }, + { + name: '34-39', + population: 9 + }, + { + name: '39-43', + population: 11 + }, + { + name: '43-48', + population: 10 + }, + { + name: '49.0 - 49', + tail: 1 + } + ], + b: [ + { + name: '1.4285714285714286 - 1.4285714285714286', + tail: 1 + }, + { + name: '3-7', + population: 12 + }, + { + name: '7-10', + population: 16 + }, + { + name: '10-14', + population: 9 + }, + { + name: '14-18', + population: 9 + }, + { + name: '18-21', + population: 9 + }, + { + name: '21-25', + population: 12 + }, + { + name: '25-29', + population: 14 + }, + { + name: '29-33', + population: 6 + }, + { + name: '33-36', + population: 7 + }, + { + name: '36-40', + population: 6 + }, + { + name: '41.42857142857143 - 41.42857142857143', + tail: 1 + } + ] + } +]; - function genInt(len, min, max) { +function genInt(len, min, max) { const a = new Array(len); - return _.map(a, a => _.random(min, max)) - } - - function genString(items:number, minLen:number, maxLen:number) : string[] { + return _.map(a, (a) => _.random(min, max)); +} +function genString(items: number, minLen: number, maxLen: number): string[] { const a = new Array(items); const randStrings = _.map(a, () => { - const strLen = _.random(minLen, maxLen); - const b = new Array(strLen) - const randLenStr = _.map(b, () => { return String.fromCharCode(_.random(65, 90)) }).join('') - return randLenStr - }) - return randStrings - } - -const dictOfListsToListOfDicts = (a: Record) : Record[] => { - const firstKey = _.keys(a)[0]; - const data : Record[] = _.map(a[firstKey], (_val, idx):Record => { - const pairs: [string, any][] = _.map(a, (arr, key) => { - return [key, arr[idx]] - }) - const row:Record = _.fromPairs(pairs); - return row; - }) - return data + const strLen = _.random(minLen, maxLen); + const b = new Array(strLen); + const randLenStr = _.map(b, () => { + return String.fromCharCode(_.random(65, 90)); + }).join(''); + return randLenStr; + }); + return randStrings; } - export default function DFViewerExString() { +const dictOfListsToListOfDicts = (a: Record): Record[] => { + const firstKey = _.keys(a)[0]; + const data: Record[] = _.map(a[firstKey], (_val, idx): Record => { + const pairs: [string, any][] = _.map(a, (arr, key) => { + return [key, arr[idx]]; + }); + const row: Record = _.fromPairs(pairs); + return row; + }); + return data; +}; + +export default function DFViewerExString() { const [activeCol, setActiveCol] = useState('tripduration'); - const samples= 1_000; - const data = dictOfListsToListOfDicts({ - 'a':genInt(samples, 2, 30), - 'b':genInt(samples, 10, 8), - 'c':genString(samples, 3, 10), - 'd':genInt(samples, 100, 999), - 'e':genInt(samples, -30_000, 55_123_123), - 'f':genString(samples, 3, 70), - 'g':genInt(samples, -3, 55), - }) - //const current: {'df':DFData, 'df_viewer_config':DFViewerConfig, 'summary_stats_data':DFData} = { - const current: {'df':any, 'df_viewer_config': any, 'summary_stats_data': any} = { + const samples = 1_000; + const data = dictOfListsToListOfDicts({ + a: genInt(samples, 2, 30), + b: genInt(samples, 10, 8), + c: genString(samples, 3, 10), + d: genInt(samples, 100, 999), + e: genInt(samples, -30_000, 55_123_123), + f: genString(samples, 3, 70), + g: genInt(samples, -3, 55) + }); + //const current: {'df':DFData, 'df_viewer_config':DFViewerConfig, 'summary_stats_data':DFData} = { + const current: {df: any; df_viewer_config: any; summary_stats_data: any} = { + df: data, + df_viewer_config: { + pinned_rows: [ + { + primary_key_val: 'dtype', + displayer_args: { + displayer: 'obj' + }, - "df": data, - "df_viewer_config": { - "pinned_rows": [ - { - "primary_key_val": "dtype", - "displayer_args": { - "displayer": "obj" - } - }, - { - "primary_key_val": "histogram", - "displayer_args": { - "displayer": "histogram" - } - } - ], - component_config: {height_fraction:1.15}, + + }, + { + primary_key_val: 'histogram', + displayer_args: { + displayer: 'histogram' + }, + } + ], + component_config: {height_fraction: 1.15}, - "column_config": [ - { - "col_name": "index", - "displayer_args": { - "displayer": "obj" - } - }, - { - "col_name": "a", - "displayer_args": { - "displayer": "obj" - } - }, - { - "col_name": "b", - "displayer_args": { - "displayer": "obj" - } - }, - { - "col_name": "c", - "displayer_args": { - "displayer": "obj" - } - }, - { - "col_name": "d", - "displayer_args": { - "displayer": "obj" - } - }, - { - "col_name": "e", - "displayer_args": { - "displayer": "obj" - } - }, - { - "col_name": "f", - "displayer_args": { - "displayer": "obj" - } - }, - { - "col_name": "g", - "displayer_args": { - "displayer": "obj" - } - }, - - - ] - }, - "summary_stats_data": summary_stats_data - } - + column_config: [ + { + col_name: 'index', + displayer_args: { + displayer: 'obj' + } + }, + { + col_name: 'a', + displayer_args: { + displayer: 'obj' + } + }, + { + col_name: 'b', + displayer_args: { + displayer: 'obj' + }, + "tooltip_config": { + "tooltip_type": "simple", + "val_column": "b"} + }, + { + col_name: 'c', + displayer_args: { + displayer: 'obj' + } + }, + { + col_name: 'd', + displayer_args: { + displayer: 'obj' + } + }, + { + col_name: 'e', + displayer_args: { + displayer: 'obj' + } + }, + { + col_name: 'f', + displayer_args: { + displayer: 'obj' + } + }, + { + col_name: 'g', + displayer_args: { + displayer: 'obj' + } + } + ] + }, + summary_stats_data: summary_stats_data + }; - return ; - } - + return ( + + ); +} diff --git a/docs/examples/ex/DFViewerEx_real_summary.tsx b/docs/examples/ex/DFViewerEx_real_summary.tsx index 4f2673b0..aa476a48 100644 --- a/docs/examples/ex/DFViewerEx_real_summary.tsx +++ b/docs/examples/ex/DFViewerEx_real_summary.tsx @@ -1,20 +1,96 @@ -import React, { useState} from 'react'; -import { extraComponents, bakedData } from 'buckaroo'; +import React, {useState} from 'react'; +import {extraComponents} from 'buckaroo'; +export const realSummaryConfig: DFViewerConfig = { + pinned_rows: [ + { primary_key_val: 'dtype', displayer_args: { displayer: 'obj' } }, + { + primary_key_val: 'min', + displayer_args: { + displayer: 'float', + min_fraction_digits: 3, + max_fraction_digits: 3, + }, + }, + { + primary_key_val: 'mean', + displayer_args: { + displayer: 'float', + min_fraction_digits: 3, + max_fraction_digits: 3, + }, + }, + { + primary_key_val: 'max', + displayer_args: { + displayer: 'float', + min_fraction_digits: 3, + max_fraction_digits: 3, + }, + }, + { + primary_key_val: 'unique_count', + displayer_args: { + displayer: 'float', + min_fraction_digits: 0, + max_fraction_digits: 0, + }, + }, + { + primary_key_val: 'distinct_count', + displayer_args: { + displayer: 'float', + min_fraction_digits: 0, + max_fraction_digits: 0, + }, + }, + { + primary_key_val: 'empty_count', + displayer_args: { + displayer: 'float', + min_fraction_digits: 0, + max_fraction_digits: 0, + }, + }, + ], + column_config: [ + { + col_name: 'index', + displayer_args: { displayer: 'string' }, + ag_grid_specs: { minWidth: 150, pinned: 'left' }, + }, + { col_name: 'int_col', displayer_args: { displayer: 'obj' } }, + { col_name: 'float_col', displayer_args: { displayer: 'obj' } }, + { col_name: 'str_col', displayer_args: { displayer: 'obj' } }, + ], + }; -//import { realSummaryConfig, realSummaryTableData } from '../../../js/baked_data/staticData'; -//import { realSummaryConfig, realSummaryTableData } from 'buckaroo'; +export const realSummaryTableData: DFData = [ + { index: 'dtype', int_col: 'int64', float_col: 'float64', str_col: 'object' }, + { index: 'min', int_col: 1, float_col: 1.4285714286 }, + { index: 'max', int_col: 49, float_col: 41.4285714286, str_col: null }, + { index: 'mean', int_col: 24.75, float_col: 22.4714285714 }, + { index: 'unique_count', int_col: 4, float_col: 0, str_col: 0 }, + { index: 'empty_count', int_col: 0, float_col: 0, str_col: 0 }, + { index: 'distinct_count', int_col: 49, float_col: 29, str_col: 1 }, + ]; - export default function DFViewerExString() { +export default function DFViewerExString() { const [activeCol, setActiveCol] = useState('tripduration'); - - const current = { - 'df': bakedData.realSummaryTableData, 'df_viewer_config': bakedData.realSummaryConfig, - 'summary_stats_data': bakedData.realSummaryTableData }; - return ; - } - + const current = { + df: realSummaryTableData, + df_viewer_config: realSummaryConfig, + summary_stats_data: realSummaryTableData + }; + + return ( + + ); +} diff --git a/docs/examples/ex/DFViewerEx_short_data.tsx b/docs/examples/ex/DFViewerEx_short_data.tsx index cc95a3ac..83479198 100644 --- a/docs/examples/ex/DFViewerEx_short_data.tsx +++ b/docs/examples/ex/DFViewerEx_short_data.tsx @@ -1,22 +1,95 @@ -import React, { useState} from 'react'; -import { bakedData, extraComponents } from 'buckaroo'; +import React, {useState} from 'react'; +import {extraComponents} from 'buckaroo'; +export const realSummaryConfig: DFViewerConfig = { + pinned_rows: [ + { primary_key_val: 'dtype', displayer_args: { displayer: 'obj' } }, + { + primary_key_val: 'min', + displayer_args: { + displayer: 'float', + min_fraction_digits: 3, + max_fraction_digits: 3, + }, + }, + { + primary_key_val: 'mean', + displayer_args: { + displayer: 'float', + min_fraction_digits: 3, + max_fraction_digits: 3, + }, + }, + { + primary_key_val: 'max', + displayer_args: { + displayer: 'float', + min_fraction_digits: 3, + max_fraction_digits: 3, + }, + }, + { + primary_key_val: 'unique_count', + displayer_args: { + displayer: 'float', + min_fraction_digits: 0, + max_fraction_digits: 0, + }, + }, + { + primary_key_val: 'distinct_count', + displayer_args: { + displayer: 'float', + min_fraction_digits: 0, + max_fraction_digits: 0, + }, + }, + { + primary_key_val: 'empty_count', + displayer_args: { + displayer: 'float', + min_fraction_digits: 0, + max_fraction_digits: 0, + }, + }, + ], + column_config: [ + { + col_name: 'index', + displayer_args: { displayer: 'string' }, + ag_grid_specs: { minWidth: 150, pinned: 'left' }, + }, + { col_name: 'int_col', displayer_args: { displayer: 'obj' } }, + { col_name: 'float_col', displayer_args: { displayer: 'obj' } }, + { col_name: 'str_col', displayer_args: { displayer: 'obj' } }, + ], + }; +export const realSummaryTableData: DFData = [ + { index: 'dtype', int_col: 'int64', float_col: 'float64', str_col: 'object' }, + { index: 'min', int_col: 1, float_col: 1.4285714286 }, + { index: 'max', int_col: 49, float_col: 41.4285714286, str_col: null }, + { index: 'mean', int_col: 24.75, float_col: 22.4714285714 }, + { index: 'unique_count', int_col: 4, float_col: 0, str_col: 0 }, + { index: 'empty_count', int_col: 0, float_col: 0, str_col: 0 }, + { index: 'distinct_count', int_col: 49, float_col: 29, str_col: 1 }, + ]; - export default function DFViewerExString() { - const [activeCol, setActiveCol] = useState('tripduration'); -// const dfv_config:DFViewerConfig = { - const dfv_config:any = { - column_config: bakedData.realSummaryConfig.column_config, - pinned_rows: []} +export default function DFViewerExString() { - const current = { - 'df':bakedData.realSummaryTableData, 'df_viewer_config': bakedData.realSummaryConfig, - 'summary_stats_data': bakedData.realSummaryTableData }; + const [activeCol, setActiveCol] = useState('tripduration'); + const dfv_config: any = { + column_config: realSummaryConfig.column_config, + pinned_rows: [] + }; - return ; - } - + return ( + + ); +} diff --git a/docs/examples/ex/DFViewerEx_string_index.tsx b/docs/examples/ex/DFViewerEx_string_index.tsx index c43207d3..bb76d0e6 100644 --- a/docs/examples/ex/DFViewerEx_string_index.tsx +++ b/docs/examples/ex/DFViewerEx_string_index.tsx @@ -1,522 +1,387 @@ -import React, { useState} from 'react'; -import { extraComponents } from 'buckaroo'; -//import { DFData, DFViewerConfig } from 'buckaroo'; - +import React, {useState} from 'react'; +import {extraComponents} from 'buckaroo'; const data = [ - { - "index": 0, - "a": 5, - "b": 2.8571428571 - }, - { - "index": 1, - "a": 28, - "b": 12.8571428571 - }, - { - "index": 2, - "a": 47, - "b": 2.8571428571 - }, - { - "index": 3, - "a": 4, - "b": 32.8571428571 - }, - { - "index": 4, - "a": 29, - "b": 30 - }, - { - "index": 5, - "a": 26, - "b": 38.5714285714 - }, - { - "index": 6, - "a": 29, - "b": 12.8571428571 - }, - { - "index": 7, - "a": 49, - "b": 18.5714285714 - }, - { - "index": 8, - "a": 22, - "b": 4.2857142857 - }, - { - "index": 9, - "a": 32, - "b": 35.7142857143 - }, - { - "index": 10, - "a": 19, - "b": 8.5714285714 - }, - { - "index": 11, - "a": 32, - "b": 27.1428571429 - }, - { - "index": 12, - "a": 44, - "b": 24.2857142857 - } -] + { + index: 0, + a: 5, + b: 2.8571428571 + }, + { + index: 1, + a: 28, + b: 12.8571428571 + }, + { + index: 2, + a: 47, + b: 2.8571428571 + }, + { + index: 3, + a: 4, + b: 32.8571428571 + }, + { + index: 4, + a: 29, + b: 30 + }, + { + index: 5, + a: 26, + b: 38.5714285714 + }, + { + index: 6, + a: 29, + b: 12.8571428571 + }, + { + index: 7, + a: 49, + b: 18.5714285714 + }, + { + index: 8, + a: 22, + b: 4.2857142857 + }, + { + index: 9, + a: 32, + b: 35.7142857143 + }, + { + index: 10, + a: 19, + b: 8.5714285714 + }, + { + index: 11, + a: 32, + b: 27.1428571429 + }, + { + index: 12, + a: 44, + b: 24.2857142857 + } +]; -const summary_stats_data =[ - { - "index": "dtype", - "a": "int64", - "b": "float64" - }, - { - "index": "is_numeric", - "a": true, - "b": true - }, - { - "index": "is_integer", - "a": true, - "b": false - }, - { - "index": "is_datetime", - "a": false, - "b": false - }, - { - "index": "is_bool", - "a": false, - "b": false - }, - { - "index": "is_float", - "a": false, - "b": true - }, - { - "index": "is_string", - "a": false, - "b": false - }, - { - "index": "memory_usage", - "a": 1732, - "b": 1732 - }, - { - "index": "length", - "a": 200, - "b": 200 - }, - { - "index": "nan_count", - "a": 0, - "b": 0 - }, - { - "index": "value_counts", - "a": [ - 7, - 7, - 7, - 7, - 7, - 6, - 6, - 6, - 6, - 6, - 6, - 6, - 5, - 5, - 5, - 5, - 5, - 5, - 5, - 5, - 4, - 4, - 4, - 4, - 4, - 4, - 4, - 4, - 4, - 4, - 3, - 3, - 3, - 3, - 3, - 3, - 3, - 3, - 2, - 2, - 2, - 2, - 2, - 2, - 2, - 2, - 1, - 1, - 1 - ], - "b": [ - 12, - 11, - 10, - 10, - 10, - 10, - 9, - 9, - 8, - 8, - 7, - 7, - 7, - 7, - 7, - 7, - 7, - 7, - 6, - 6, - 5, - 5, - 5, - 4, - 4, - 3, - 3, - 3, - 3 - ] - }, - { - "index": "mode", - "a": 2, - "b": 7.1428571429 - }, - { - "index": "min", - "a": 1, - "b": 1.4285714286 - }, - { - "index": "max", - "a": 49, - "b": 41.4285714286 - }, - { - "index": "mean", - "a": 24.275, - "b": 19.4571428571 - }, - { - "index": "histogram_args", - "a": { - "meat_histogram": [ - [ - 29, - 20, - 11, - 20, - 10, - 26, - 16, - 17, - 20, - 18 - ], - [ - 2, - 6.6, - 11.2, - 15.8, - 20.4, - 25, - 29.6, - 34.2, - 38.8, - 43.4, - 48 - ] - ], - "normalized_populations": [ - 0.1550802139, - 0.1069518717, - 0.0588235294, - 0.1069518717, - 0.0534759358, - 0.1390374332, - 0.0855614973, - 0.0909090909, - 0.1069518717, - 0.0962566845 - ], - "low_tail": 1, - "high_tail": 49 - }, - "b": { - "meat_histogram": [ - [ - 22, - 30, - 17, - 17, - 16, - 22, - 26, - 11, - 13, - 12 +const summary_stats_data = [ + { + index: 'dtype', + a: 'int64', + b: 'float64' + }, + { + index: 'is_numeric', + a: true, + b: true + }, + { + index: 'is_integer', + a: true, + b: false + }, + { + index: 'is_datetime', + a: false, + b: false + }, + { + index: 'is_bool', + a: false, + b: false + }, + { + index: 'is_float', + a: false, + b: true + }, + { + index: 'is_string', + a: false, + b: false + }, + { + index: 'memory_usage', + a: 1732, + b: 1732 + }, + { + index: 'length', + a: 200, + b: 200 + }, + { + index: 'nan_count', + a: 0, + b: 0 + }, + { + index: 'value_counts', + a: [ + 7, 7, 7, 7, 7, 6, 6, 6, 6, 6, 6, 6, 5, 5, 5, 5, 5, 5, 5, 5, 4, 4, 4, 4, 4, 4, 4, 4, 4, + 4, 3, 3, 3, 3, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1 ], - [ - 2.8571428571, - 6.5714285714, - 10.2857142857, - 14, - 17.7142857143, - 21.4285714286, - 25.1428571429, - 28.8571428571, - 32.5714285714, - 36.2857142857, - 40 + b: [ + 12, 11, 10, 10, 10, 10, 9, 9, 8, 8, 7, 7, 7, 7, 7, 7, 7, 7, 6, 6, 5, 5, 5, 4, 4, 3, 3, + 3, 3 ] - ], - "normalized_populations": [ - 0.1182795699, - 0.1612903226, - 0.0913978495, - 0.0913978495, - 0.0860215054, - 0.1182795699, - 0.1397849462, - 0.0591397849, - 0.0698924731, - 0.064516129 - ], - "low_tail": 1.4285714286, - "high_tail": 41.4285714286 - } - }, - { - "index": "_type", - "a": "integer", - "b": "float" - }, - { - "index": "type", - "a": "integer", - "b": "float" - }, - { - "index": "min_digits", - "a": 1, - "b": 1 - }, - { - "index": "max_digits", - "a": 2, - "b": 2 - }, - { - "index": "unique_count", - "a": 3, - "b": 0 - }, - { - "index": "empty_count", - "a": 0, - "b": 0 - }, - { - "index": "distinct_count", - "a": 49, - "b": 29 - }, - { - "index": "distinct_per", - "a": 0.245, - "b": 0.145 - }, - { - "index": "empty_per", - "a": 0, - "b": 0 - }, - { - "index": "unique_per", - "a": 0.015, - "b": 0 - }, - { - "index": "nan_per", - "a": 0, - "b": 0 - }, - { - "index": "histogram", - "a": [ - { - "name": "1 - 1.0", - "tail": 1 - }, - { - "name": "2-7", - "population": 16 - }, - { - "name": "7-11", - "population": 11 - }, - { - "name": "11-16", - "population": 6 - }, - { - "name": "16-20", - "population": 11 - }, - { - "name": "20-25", - "population": 5 - }, - { - "name": "25-30", - "population": 14 - }, - { - "name": "30-34", - "population": 9 - }, - { - "name": "34-39", - "population": 9 - }, - { - "name": "39-43", - "population": 11 - }, - { - "name": "43-48", - "population": 10 - }, - { - "name": "49.0 - 49", - "tail": 1 - } - ], - "b": [ - { - "name": "1.4285714285714286 - 1.4285714285714286", - "tail": 1 - }, - { - "name": "3-7", - "population": 12 - }, - { - "name": "7-10", - "population": 16 - }, - { - "name": "10-14", - "population": 9 - }, - { - "name": "14-18", - "population": 9 - }, - { - "name": "18-21", - "population": 9 - }, - { - "name": "21-25", - "population": 12 - }, - { - "name": "25-29", - "population": 14 - }, - { - "name": "29-33", - "population": 6 - }, - { - "name": "33-36", - "population": 7 - }, - { - "name": "36-40", - "population": 6 - }, - { - "name": "41.42857142857143 - 41.42857142857143", - "tail": 1 - } - ] - } - ]; - - export default function DFViewerExString() { - const [activeCol, setActiveCol] = useState('tripduration'); - - //const dfvConfig:DFViewerConfig = { - - const dfvConfig:any = { - "pinned_rows": [ + }, { - "primary_key_val": "dtype", - "displayer_args": { - "displayer": "obj" - } + index: 'mode', + a: 2, + b: 7.1428571429 }, { - "primary_key_val": "histogram", - "displayer_args": { - "displayer": "histogram" - } - } - ], - "column_config": [ + index: 'min', + a: 1, + b: 1.4285714286 + }, + { + index: 'max', + a: 49, + b: 41.4285714286 + }, + { + index: 'mean', + a: 24.275, + b: 19.4571428571 + }, + { + index: 'histogram_args', + a: { + meat_histogram: [ + [29, 20, 11, 20, 10, 26, 16, 17, 20, 18], + [2, 6.6, 11.2, 15.8, 20.4, 25, 29.6, 34.2, 38.8, 43.4, 48] + ], + normalized_populations: [ + 0.1550802139, 0.1069518717, 0.0588235294, 0.1069518717, 0.0534759358, 0.1390374332, + 0.0855614973, 0.0909090909, 0.1069518717, 0.0962566845 + ], + low_tail: 1, + high_tail: 49 + }, + b: { + meat_histogram: [ + [22, 30, 17, 17, 16, 22, 26, 11, 13, 12], + [ + 2.8571428571, 6.5714285714, 10.2857142857, 14, 17.7142857143, 21.4285714286, + 25.1428571429, 28.8571428571, 32.5714285714, 36.2857142857, 40 + ] + ], + normalized_populations: [ + 0.1182795699, 0.1612903226, 0.0913978495, 0.0913978495, 0.0860215054, 0.1182795699, + 0.1397849462, 0.0591397849, 0.0698924731, 0.064516129 + ], + low_tail: 1.4285714286, + high_tail: 41.4285714286 + } + }, { - "col_name": "index", - "displayer_args": { - "displayer": "obj" - } + index: '_type', + a: 'integer', + b: 'float' }, { - "col_name": "a", - "displayer_args": { - "displayer": "obj" - } + index: 'type', + a: 'integer', + b: 'float' }, { - "col_name": "b", - "displayer_args": { - "displayer": "obj" - } + index: 'min_digits', + a: 1, + b: 1 + }, + { + index: 'max_digits', + a: 2, + b: 2 + }, + { + index: 'unique_count', + a: 3, + b: 0 + }, + { + index: 'empty_count', + a: 0, + b: 0 + }, + { + index: 'distinct_count', + a: 49, + b: 29 + }, + { + index: 'distinct_per', + a: 0.245, + b: 0.145 + }, + { + index: 'empty_per', + a: 0, + b: 0 + }, + { + index: 'unique_per', + a: 0.015, + b: 0 + }, + { + index: 'nan_per', + a: 0, + b: 0 + }, + { + index: 'histogram', + a: [ + { + name: '1 - 1.0', + tail: 1 + }, + { + name: '2-7', + population: 16 + }, + { + name: '7-11', + population: 11 + }, + { + name: '11-16', + population: 6 + }, + { + name: '16-20', + population: 11 + }, + { + name: '20-25', + population: 5 + }, + { + name: '25-30', + population: 14 + }, + { + name: '30-34', + population: 9 + }, + { + name: '34-39', + population: 9 + }, + { + name: '39-43', + population: 11 + }, + { + name: '43-48', + population: 10 + }, + { + name: '49.0 - 49', + tail: 1 + } + ], + b: [ + { + name: '1.4285714285714286 - 1.4285714285714286', + tail: 1 + }, + { + name: '3-7', + population: 12 + }, + { + name: '7-10', + population: 16 + }, + { + name: '10-14', + population: 9 + }, + { + name: '14-18', + population: 9 + }, + { + name: '18-21', + population: 9 + }, + { + name: '21-25', + population: 12 + }, + { + name: '25-29', + population: 14 + }, + { + name: '29-33', + population: 6 + }, + { + name: '33-36', + population: 7 + }, + { + name: '36-40', + population: 6 + }, + { + name: '41.42857142857143 - 41.42857142857143', + tail: 1 + } + ] } - ] -} +]; + +export default function DFViewerExString() { + const [activeCol, setActiveCol] = useState('tripduration'); + + //const dfvConfig:DFViewerConfig = { + + const dfvConfig: any = { + pinned_rows: [ + { + primary_key_val: 'dtype', + displayer_args: { + displayer: 'obj' + } + }, + { + primary_key_val: 'histogram', + displayer_args: { + displayer: 'histogram' + } + } + ], + column_config: [ + { + col_name: 'index', + displayer_args: { + displayer: 'obj' + } + }, + { + col_name: 'a', + displayer_args: { + displayer: 'obj' + } + }, + { + col_name: 'b', + displayer_args: { + displayer: 'obj' + } + } + ] + }; // { // "pinned_rows": [ @@ -556,457 +421,328 @@ const summary_stats_data =[ // } //const current: {'df':DFData, 'df_viewer_config':DFViewerConfig, 'summary_stats_data':DFData} = { - const current: {'df':any, 'df_viewer_config':any, 'summary_stats_data':any} = { - "df": [], - "df_viewer_config": { - "pinned_rows": [ - { - "primary_key_val": "dtype", - "displayer_args": { - "displayer": "obj" - } - }, - { - "primary_key_val": "histogram", - "displayer_args": { - "displayer": "histogram" - } - } - ], - "column_config": [ - { - "col_name": "index", - "displayer_args": { - "displayer": "obj" - } - }, - { - "col_name": "a", - "displayer_args": { - "displayer": "obj" - } - }, - { - "col_name": "b", - "displayer_args": { - "displayer": "obj" - } - } - ] - }, - "summary_stats_data": [ - { - "index": "dtype", - "a": "int64", - "b": "float64" - }, - { - "index": "is_numeric", - "a": true, - "b": true - }, - { - "index": "is_integer", - "a": true, - "b": false - }, - { - "index": "is_datetime", - "a": false, - "b": false - }, - { - "index": "is_bool", - "a": false, - "b": false - }, - { - "index": "is_float", - "a": false, - "b": true - }, - { - "index": "is_string", - "a": false, - "b": false - }, - { - "index": "memory_usage", - "a": 1732, - "b": 1732 - }, - { - "index": "length", - "a": 200, - "b": 200 - }, - { - "index": "nan_count", - "a": 0, - "b": 0 - }, - { - "index": "value_counts", - "a": [ - 12, - 9, - 8, - 7, - 7, - 7, - 7, - 7, - 6, - 6, - 5, - 5, - 5, - 5, - 5, - 5, - 5, - 5, - 4, - 4, - 4, - 4, - 4, - 4, - 4, - 4, - 4, - 3, - 3, - 3, - 3, - 3, - 3, - 3, - 3, - 3, - 2, - 2, - 2, - 2, - 2, - 2, - 2, - 2, - 1, - 1, - 1, - 1, - 1 - ], - "b": [ - 11, - 11, - 11, - 9, - 9, - 9, - 9, - 8, - 8, - 8, - 8, - 7, - 7, - 7, - 7, - 7, - 7, - 7, - 6, - 6, - 5, - 5, - 5, - 5, - 4, - 4, - 4, - 4, - 2 - ] - }, - { - "index": "mode", - "a": 6, - "b": 1.4285714286 - }, - { - "index": "min", - "a": 1, - "b": 1.4285714286 - }, - { - "index": "max", - "a": 49, - "b": 41.4285714286 - }, - { - "index": "mean", - "a": 23.375, - "b": 21.5285714286 - }, - { - "index": "histogram_args", - "a": { - "meat_histogram": [ - [ - 33, - 18, - 13, - 22, - 11, - 18, - 20, - 15, - 17, - 23 - ], - [ - 2, - 6.6, - 11.2, - 15.8, - 20.4, - 25, - 29.6, - 34.2, - 38.8, - 43.4, - 48 - ] - ], - "normalized_populations": [ - 0.1736842105, - 0.0947368421, - 0.0684210526, - 0.1157894737, - 0.0578947368, - 0.0947368421, - 0.1052631579, - 0.0789473684, - 0.0894736842, - 0.1210526316 - ], - "low_tail": 1, - "high_tail": 48.01 - }, - "b": { - "meat_histogram": [ - [ - 13, - 23, - 12, - 23, - 15, - 22, - 23, - 10, - 21, - 16 - ], - [ - 2.8571428571, - 6.5714285714, - 10.2857142857, - 14, - 17.7142857143, - 21.4285714286, - 25.1428571429, - 28.8571428571, - 32.5714285714, - 36.2857142857, - 40 - ] + const current: {df: any; df_viewer_config: any; summary_stats_data: any} = { + df: [], + df_viewer_config: { + pinned_rows: [ + { + primary_key_val: 'dtype', + displayer_args: { + displayer: 'obj' + } + }, + { + primary_key_val: 'histogram', + displayer_args: { + displayer: 'histogram' + } + } ], - "normalized_populations": [ - 0.0730337079, - 0.1292134831, - 0.0674157303, - 0.1292134831, - 0.0842696629, - 0.1235955056, - 0.1292134831, - 0.0561797753, - 0.1179775281, - 0.0898876404 - ], - "low_tail": 1.4285714286, - "high_tail": 41.4285714286 - } - }, - { - "index": "_type", - "a": "integer", - "b": "float" - }, - { - "index": "type", - "a": "integer", - "b": "float" + column_config: [ + { + col_name: 'index', + displayer_args: { + displayer: 'obj' + } + }, + { + col_name: 'a', + displayer_args: { + displayer: 'obj' + } + }, + { + col_name: 'b', + displayer_args: { + displayer: 'obj' + } + } + ] }, - { - "index": "min_digits", - "a": 1, - "b": 1 - }, - { - "index": "max_digits", - "a": 2, - "b": 2 - }, - { - "index": "unique_count", - "a": 5, - "b": 0 - }, - { - "index": "empty_count", - "a": 0, - "b": 0 - }, - { - "index": "distinct_count", - "a": 49, - "b": 29 - }, - { - "index": "distinct_per", - "a": 0.245, - "b": 0.145 - }, - { - "index": "empty_per", - "a": 0, - "b": 0 - }, - { - "index": "unique_per", - "a": 0.025, - "b": 0 - }, - { - "index": "nan_per", - "a": 0, - "b": 0 - }, - { - "index": "histogram", - "a": [ + summary_stats_data: [ { - "name": "1 - 1.0", - "tail": 1 + index: 'dtype', + a: 'int64', + b: 'float64' }, { - "name": "2-7", - "population": 17 + index: 'is_numeric', + a: true, + b: true }, { - "name": "7-11", - "population": 9 + index: 'is_integer', + a: true, + b: false }, { - "name": "11-16", - "population": 7 + index: 'is_datetime', + a: false, + b: false }, { - "name": "16-20", - "population": 12 + index: 'is_bool', + a: false, + b: false }, { - "name": "20-25", - "population": 6 + index: 'is_float', + a: false, + b: true }, { - "name": "25-30", - "population": 9 + index: 'is_string', + a: false, + b: false }, { - "name": "30-34", - "population": 11 + index: 'memory_usage', + a: 1732, + b: 1732 }, { - "name": "34-39", - "population": 8 + index: 'length', + a: 200, + b: 200 }, { - "name": "39-43", - "population": 9 + index: 'nan_count', + a: 0, + b: 0 }, { - "name": "43-48", - "population": 12 + index: 'value_counts', + a: [ + 12, 12, 9, 8, 7, 7, 7, 7, 7, 6, 6, 5, 5, 5, 5, 5, 5, 5, 5, 4, 4, 4, 4, 4, 4, 4, + 4, 4, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1 + ], + b: [ + 11, 11, 11, 9, 9, 9, 9, 8, 8, 8, 8, 7, 7, 7, 7, 7, 7, 7, 6, 6, 5, 5, 5, 5, 4, 4, + 4, 4, 2 + ] }, { - "name": "48.00999999999999 - 49", - "tail": 1 - } - ], - "b": [ + index: 'mode', + a: 6, + b: 1.4285714286 + }, + { + index: 'min', + a: 1, + b: 1.4285714286 + }, { - "name": "1.4285714285714286 - 1.4285714285714286", - "tail": 1 + index: 'max', + a: 49, + b: 41.4285714286 }, { - "name": "3-7", - "population": 7 + index: 'mean', + a: 23.375, + b: 21.5285714286 }, { - "name": "7-10", - "population": 13 + index: 'histogram_args', + a: { + meat_histogram: [ + [33, 18, 13, 22, 11, 18, 20, 15, 17, 23], + [2, 6.6, 11.2, 15.8, 20.4, 25, 29.6, 34.2, 38.8, 43.4, 48] + ], + normalized_populations: [ + 0.1736842105, 0.0947368421, 0.0684210526, 0.1157894737, 0.0578947368, + 0.0947368421, 0.1052631579, 0.0789473684, 0.0894736842, 0.1210526316 + ], + low_tail: 1, + high_tail: 48.01 + }, + b: { + meat_histogram: [ + [13, 23, 12, 23, 15, 22, 23, 10, 21, 16], + [ + 2.8571428571, 6.5714285714, 10.2857142857, 14, 17.7142857143, + 21.4285714286, 25.1428571429, 28.8571428571, 32.5714285714, + 36.2857142857, 40 + ] + ], + normalized_populations: [ + 0.0730337079, 0.1292134831, 0.0674157303, 0.1292134831, 0.0842696629, + 0.1235955056, 0.1292134831, 0.0561797753, 0.1179775281, 0.0898876404 + ], + low_tail: 1.4285714286, + high_tail: 41.4285714286 + } }, { - "name": "10-14", - "population": 7 + index: '_type', + a: 'integer', + b: 'float' }, { - "name": "14-18", - "population": 13 + index: 'type', + a: 'integer', + b: 'float' }, { - "name": "18-21", - "population": 8 + index: 'min_digits', + a: 1, + b: 1 }, { - "name": "21-25", - "population": 12 + index: 'max_digits', + a: 2, + b: 2 }, { - "name": "25-29", - "population": 13 + index: 'unique_count', + a: 5, + b: 0 }, { - "name": "29-33", - "population": 6 + index: 'empty_count', + a: 0, + b: 0 }, { - "name": "33-36", - "population": 12 + index: 'distinct_count', + a: 49, + b: 29 }, { - "name": "36-40", - "population": 9 + index: 'distinct_per', + a: 0.245, + b: 0.145 }, { - "name": "41.42857142857143 - 41.42857142857143", - "tail": 1 + index: 'empty_per', + a: 0, + b: 0 + }, + { + index: 'unique_per', + a: 0.025, + b: 0 + }, + { + index: 'nan_per', + a: 0, + b: 0 + }, + { + index: 'histogram', + a: [ + { + name: '1 - 1.0', + tail: 1 + }, + { + name: '2-7', + population: 17 + }, + { + name: '7-11', + population: 9 + }, + { + name: '11-16', + population: 7 + }, + { + name: '16-20', + population: 12 + }, + { + name: '20-25', + population: 6 + }, + { + name: '25-30', + population: 9 + }, + { + name: '30-34', + population: 11 + }, + { + name: '34-39', + population: 8 + }, + { + name: '39-43', + population: 9 + }, + { + name: '43-48', + population: 12 + }, + { + name: '48.00999999999999 - 49', + tail: 1 + } + ], + b: [ + { + name: '1.4285714285714286 - 1.4285714285714286', + tail: 1 + }, + { + name: '3-7', + population: 7 + }, + { + name: '7-10', + population: 13 + }, + { + name: '10-14', + population: 7 + }, + { + name: '14-18', + population: 13 + }, + { + name: '18-21', + population: 8 + }, + { + name: '21-25', + population: 12 + }, + { + name: '25-29', + population: 13 + }, + { + name: '29-33', + population: 6 + }, + { + name: '33-36', + population: 12 + }, + { + name: '36-40', + population: 9 + }, + { + name: '41.42857142857143 - 41.42857142857143', + tail: 1 + } + ] } - ] - } - ] - } - - //const working = {'df':data, 'df_viewer_config': dfvConfig, 'summary_stats_data':summary_stats_data}; - const working = {'df':data, 'df_viewer_config': dfvConfig, 'summary_stats_data':summary_stats_data}; + ] + }; + //const working = {'df':data, 'df_viewer_config': dfvConfig, 'summary_stats_data':summary_stats_data}; + const working = {df: data, df_viewer_config: dfvConfig, summary_stats_data: summary_stats_data}; - return ; - } - + return ( + + ); +} diff --git a/docs/examples/ex/HistogramEx.tsx b/docs/examples/ex/HistogramEx.tsx index 6e131025..2a5887f2 100644 --- a/docs/examples/ex/HistogramEx.tsx +++ b/docs/examples/ex/HistogramEx.tsx @@ -1,67 +1,138 @@ import React from 'react'; -//import { histograms } from '../../js/baked_data/staticData'; -//import { HistogramCell } from '../../js/components/DFViewerParts/HistogramCell'; -import { extraComponents, bakedData } from 'buckaroo'; +import {extraComponents} from 'buckaroo'; +const Numeric = () => { + const 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} + ]; + return ( +
+ Numeric + +
+ ); +}; -export default function Simple() { - const { - num_histo, bool_histo, NA_Only, simple_catgeorical, categorical_histo, - categorical_histo_lt, all_unique, unique_na, unique_continuous, - unique_continuous_scaled, unique_continuous_scaled_50, - start_station_categorical} = bakedData.histograms; +const BooleanWithNA = () => { + const histo = [ + {name: 'False', false: 50}, + {name: 'True', true: 30}, + {name: 'NA', NA: 20} + ]; + return ( +
+ Boolean With NA + +
+ ); +}; + +const NAOnly = () => { + const histo = [{name: 'NA', NA: 100}]; + return ( +
+ NA Only + +
+ ); +}; + +const SimpleCategorical = () => { + const histo = [ + {name: 2, cat_pop: 87.0}, + {name: 1, cat_pop: 13.0} + ]; + + return ( +
+ SimpleCategorical + +
+ ); +}; - return
-
- Numeric - -
-
- Boolean with NA - -
-
- NA Only - -
-
- Simple Categorical - -
- -
- Categorical unique NA - -
-
- Categorical_longtail - -
+const CategoricalUniqueNA = () => { + const 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} + ]; -
- Categorical All unique - -
+ return ( +
+ Categorical Unique NA + +
+ ); +}; -
- Categorical Unique with NA - -
+const CategoricalLongtail = () => { + const histo = [ + {name: 'KTM', cat_pop: 25}, + {name: 'Gas Gas', cat_pop: 12}, + {name: 'Yamaha', cat_pop: 8}, + {name: 'NA', NA: 20}, + // notice that longtail has a unique and longtail value causing the bars to be stacked + {name: 'longtail', unique: 15, longtail: 20} + ]; -
- Numeric all Unique - -
-
- start station categorical - -
- + return ( +
+ Categorical Long Tail + +
+ ); +}; -
- Numeric 50% unique - -
-
+const NumericWithUnique = () => { + const histo = [ + {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}, + // Notice that there is a unqiue value, and its magnitude is + // the same as the heighest population + + // it is the responsibility of the histogram code to do relative scaling + {name: 'unique', unique: 29} + ]; + + return ( +
+ Numeric with unique bar + +
+ ); +}; + +export default function Simple() { + return ( +
+ + + + + + + +
+ ); } diff --git a/docs/examples/ex/StatusBarEx.tsx b/docs/examples/ex/StatusBarEx.tsx index 5084b347..ee36a024 100644 --- a/docs/examples/ex/StatusBarEx.tsx +++ b/docs/examples/ex/StatusBarEx.tsx @@ -1,46 +1,41 @@ -import React, { useState } from 'react'; -import { - BuckarooState, - extraComponents, - BuckarooOptions, - DFMeta, -} from 'buckaroo'; +import React, {useState} from 'react'; +import {BuckarooState, extraComponents, BuckarooOptions, DFMeta} from 'buckaroo'; export default function StatusBarEx() { - console.clear(); - const dfm: DFMeta = { - columns: 5, - rows_shown: 20, - filtered_rows: 300_000, - total_rows: 8_777_444, - }; + console.clear(); + const dfm: DFMeta = { + columns: 5, + rows_shown: 20, + filtered_rows: 300_000, + total_rows: 8_777_444 + }; - const [bState, setBState] = useState({ - auto_clean: 'conservative', - sampled: false, - df_display: 'main', - post_processing: 'asdf', - show_commands: false, - quick_command_args: {}, - }); + const [bState, setBState] = useState({ + auto_clean: 'conservative', + sampled: false, + df_display: 'main', + post_processing: 'asdf', + show_commands: false, + quick_command_args: {} + }); - const bOptions: BuckarooOptions = { - auto_clean: ['aggressive', 'conservative'], - post_processing: ['', 'asdf'], - sampled: ['random'], - show_commands: ['on'], - df_display: ['main'], - }; + const bOptions: BuckarooOptions = { + auto_clean: ['aggressive', 'conservative'], + post_processing: ['', 'asdf'], + sampled: ['random'], + show_commands: ['on'], + df_display: ['main'] + }; - return ( -
- - 
 {JSON.stringify(bState, null, 2)}
-
- ); + return ( +
+ + 
 {JSON.stringify(bState, null, 2)}
+
+ ); } diff --git a/docs/examples/ex/WidgetDCFCellEx.tsx b/docs/examples/ex/WidgetDCFCellEx.tsx index 05909a98..2756560e 100644 --- a/docs/examples/ex/WidgetDCFCellEx.tsx +++ b/docs/examples/ex/WidgetDCFCellEx.tsx @@ -1,6 +1,310 @@ -import * as React from 'react'; +import React, {useState} from 'react'; + import {extraComponents} from 'buckaroo'; +import {bakedCommandConfig, bakedOperations } from './CommandViewerEx' +import { IDisplayArgs } from '../../../js/components/DCFCell'; +import { baseOperationResults } from '../../../js/components/DependentTabs'; +import { Operation } from '../../../js/components/OperationUtils'; +import { DFMeta, BuckarooState, BuckarooOptions } from '../../../js/components/WidgetTypes'; +import { realSummaryConfig, realSummaryTableData } from './DFViewerEx_real_summary'; +import { DFWhole } from '../../../js/components/DFViewerParts/DFWhole'; + +export const smileyPNGString = + 'iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII='; + +export const tableDf: DFWhole = { + dfviewer_config: { + column_config: [ + { + col_name: 'index', + displayer_args: { displayer: 'integer', min_digits: 3, max_digits: 5 }, + }, + { + col_name: 'svg_column', + displayer_args: { displayer: 'SVGDisplayer' }, + }, + { + col_name: 'link_column', + displayer_args: { displayer: 'linkify' }, + }, + { + col_name: 'nanObject', + displayer_args: { displayer: 'integer', min_digits: 3, max_digits: 5 }, + color_map_config: { + color_rule: 'color_map', + //map_name: 'DIVERGING_RED_WHITE_BLUE', + map_name: 'BLUE_TO_YELLOW', + val_column: 'tripduration', + }, + }, + { + col_name: 'nanFloat', + displayer_args: { + displayer: 'float', + min_fraction_digits: 2, + max_fraction_digits: 8, + }, + tooltip_config: { tooltip_type: 'summary_series' }, + }, + { col_name: 'end station name', displayer_args: { displayer: 'obj' } }, + { + col_name: 'tripduration', + displayer_args: { displayer: 'integer', min_digits: 1, max_digits: 5 }, + color_map_config: { + color_rule: 'color_map', + map_name: 'BLUE_TO_YELLOW', + }, + }, + { + col_name: 'start station name', + displayer_args: { displayer: 'obj' }, + color_map_config: { + color_rule: 'color_not_null', + conditional_color: 'red', + exist_column: 'nanFloat', + }, + }, + { + col_name: 'floatCol', + displayer_args: { + displayer: 'float', + min_fraction_digits: 1, + max_fraction_digits: 3, + }, + }, + { + col_name: 'nanNumeric', + displayer_args: { displayer: 'integer', min_digits: 3, max_digits: 5 }, + tooltip_config: { + tooltip_type: 'simple', + val_column: 'start station name', + }, + }, + { + col_name: 'img_', + displayer_args: { displayer: 'Base64PNGImageDisplayer' }, + ag_grid_specs: { width: 150 }, + }, + ], + extra_grid_config: { rowHeight: 105 }, + component_config: { height_fraction: 1 }, + pinned_rows: [ + // { primary_key_val: 'dtype', displayer_args: { displayer: 'obj' } }, + // { primary_key_val: 'histogram', displayer_args: { displayer: 'histogram' }, }, + ], + }, + data: [ + { + index: 0, + 'end station name': 'Elizabeth St & Hester St', + tripduration: 471, + 'start station name': 'Catherine St & Monroe St', + floatCol: '1.111', + nanNumeric: null, + nanObject: null, + nanFloat: null, + //svg_column: '

paddy

', + link_column: 'https://buckaroo.dev', + img_: smileyPNGString, + }, + { + index: 1, + 'end station name': 'South St & Whitehall St', + tripduration: 1494, + 'start station name': '1 Ave & E 30 St', + floatCol: '8.888', + nanNumeric: null, + nanObject: null, + nanFloat: null, + svg_column: + '', + link_column: 'https://pola.rs/', + }, + { + index: 2, + 'end station name': 'E 59 St & Sutton Pl', + tripduration: 464, + 'start station name': 'E 48 St & 3 Ave', + floatCol: '9.999', + nanNumeric: null, + nanObject: null, + svg_column: + '', + nanFloat: 10, + }, + { + index: 3, + 'end station name': 'E 33 St & 5 Ave', + tripduration: 373, + 'start station name': 'Pershing Square N', + floatCol: '-10.1', + nanCol: null, + nanNumeric: null, + nanObject: null, + svg_column: + '', + nanFloat: null, + }, + { + index: 4, + 'end station name': 'Hancock St & Bedford Ave', + tripduration: 660, + 'start station name': 'Atlantic Ave & Fort Greene Pl', + floatCol: '10.99', + nanNumeric: null, + nanObject: null, + nanFloat: 3, + }, + ], + }; + +export const dfviewer_config_no_pinned: DFViewerConfig = { + column_config: tableDf.dfviewer_config.column_config, + pinned_rows: [ + { primary_key_val: 'dtype', displayer_args: { displayer: 'obj' } }, + { + primary_key_val: 'histogram', + displayer_args: { displayer: 'histogram' }, + }, + ], +}; + +const histograms = { + CategoricalUniqueNA: [ + {name: 'KTM', cat_pop: 30}, + {name: 'Gas Gas', cat_pop: 15}, + {name: 'Yamaha', cat_pop: 10}, + {name: 'unique', unique: 25}, + {name: 'NA', NA: 20} + ], + Numeric: [ + {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} + ], + BoolWithNA: [ + {name: 'False', false: 50}, + {name: 'True', true: 30}, + {name: 'NA', NA: 20} + ] +} + +const tripDurationBins = [0, 300, 500, 1000, 1500]; +export const summaryDfForTableDf: DFData = [ + { + index: 'histogram', + 'end station name': histograms.CategoricalUniqueNA, + tripduration: histograms.Numeric, + 'start station name': histograms.BoolWithNA, + nanNumeric: histograms.Numeric, + nanFloat: histograms.Numeric, + nanObject: histograms.Numeric, + floatCol: [ + { name: 521, cat_pop: 0.0103 }, + { name: 358, cat_pop: 0.0096 }, + { name: 519, cat_pop: 0.009 }, + { name: 497, cat_pop: 0.0087 }, + { name: 293, cat_pop: 0.0082 }, + { name: 285, cat_pop: 0.0081 }, + { name: 435, cat_pop: 0.008 }, + { name: 'unique', cat_pop: 0.0001 }, + { name: 'long_tail', cat_pop: 0.938 }, + { name: 'NA', cat_pop: 0.0 }, + ], + }, + { + index: 'histogram_bins', + tripduration: tripDurationBins, + nanObject: tripDurationBins, + }, + { + index: 'dtype', + 'end station name': 'String6666', + tripduration: 'object', + 'start station name': 'object', + nanNumeric: 'float64', + nanFloat: 'flot64', + nanObject: 'object', + floatCol: 'float', + }, +]; + + + +export default function WidgetDCFCellExample() { + + const dfm: DFMeta = { + columns: 5, + rows_shown: 20, + filtered_rows: 89, + total_rows: 877 + }; + + const [bState, setBState] = React.useState({ + auto_clean: '', + sampled: false, + show_commands: false, + df_display: 'main', + post_processing: '', + quick_command_args: {} + }); + + const bOptions: BuckarooOptions = { + auto_clean: ['', 'aggressive', 'conservative'], + df_display: ['main', 'realSummary', 'no_pinned'], + sampled: ['random'], + post_processing: ['', 'foo', 'bar'], + show_commands: ['on'] + // 'summary_stats' : ['full', 'all', 'typing_stats'] + }; + + const [operations, setOperations] = useState(bakedOperations); + const bakedDfDisplay: Record = { + main: { + data_key: 'main', + df_viewer_config: tableDf.dfviewer_config, + summary_stats_key: 'all' + }, + realSummary: { + data_key: 'empty', + df_viewer_config: realSummaryConfig, + summary_stats_key: 'real_summary' + }, + + no_pinned: { + data_key: 'main', + df_viewer_config: dfviewer_config_no_pinned, + summary_stats_key: 'all' + } + }; + + const df_data_dict = { + main: tableDf.data, + all: summaryDfForTableDf, + real_summary: realSummaryTableData, + empty: [{index: 'distinct_count'}] + }; + console.log("294 here"); -export default function Simple() { - return ; + return ( + + ); } diff --git a/js/baked_data/staticData.ts b/js/baked_data/staticData.ts deleted file mode 100644 index 0593c1e5..00000000 --- a/js/baked_data/staticData.ts +++ /dev/null @@ -1,511 +0,0 @@ -import { OperationDefaultArgs, Operation } from '../components/OperationUtils'; -import { sym } from '../components/utils'; -import { - symDf, - CommandConfigT, - bakedArgSpecs, -} from '../components/CommandUtils'; -import { - DFData, - DFViewerConfig, - DFWhole, -} from '../components/DFViewerParts/DFWhole'; - -export const bakedOperationDefaults: OperationDefaultArgs = { - dropcol: [sym('dropcol'), symDf, 'col'], - fillna: [sym('fillna'), symDf, 'col', 8], - remove_outliers: [sym('remove_outliers'), symDf, 'col', 0.02], - search: [sym('search'), symDf, 'col', 'term'], - resample: [sym('resample'), symDf, 'col', 'monthly', {}], -}; - -export const bakedCommandConfig: CommandConfigT = { - argspecs: bakedArgSpecs, - defaultArgs: bakedOperationDefaults, -}; - -export const bakedOperations: Operation[] = [ - [sym('dropcol'), symDf, 'col1'], - [sym('fillna'), symDf, 'col2', 5], - [sym('resample'), symDf, 'month', 'monthly', {}], -]; - -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 }, - ], - - bool_histo: [ - { name: 'False', false: 50 }, - { name: 'True', true: 30 }, - { name: 'NA', NA: 20 }, - ], - - 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 }, - ], - - 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 }, - ], - - all_unique: [{ name: 'unique', unique: 100 }], - - unique_na: [ - { name: 'unique', unique: 80 }, - { name: 'NA', NA: 20 }, - ], - - 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: [ - { 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_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 smileyPNGString = - 'iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII='; - -//export const tableDf2:DFWhole = { -export const foo: DFWhole = { - dfviewer_config: { - column_config: [ - { col_name: 'index', displayer_args: { displayer: 'obj' } }, - - { col_name: 'tripduration', displayer_args: { displayer: 'obj' } }, - { col_name: 'starttime', displayer_args: { displayer: 'obj' } }, - { col_name: 'stoptime', displayer_args: { displayer: 'obj' } }, - { col_name: 'start station id', displayer_args: { displayer: 'obj' } }, - { col_name: 'start station name', displayer_args: { displayer: 'obj' } }, - { - col_name: 'start station lattitude', - displayer_args: { displayer: 'obj' }, - }, - { col_name: 'bikeid', displayer_args: { displayer: 'obj' } }, - { col_name: 'birth year', displayer_args: { displayer: 'obj' } }, - { col_name: 'gender', displayer_args: { displayer: 'obj' } }, - ], - pinned_rows: [], - }, - - // index: { type: 'obj' }, - // tripduration: { histogram: histograms.num_histo, type: 'obj' }, - /* - starttime: { type: 'obj' }, - stoptime: { type: 'obj' }, - 'start station id': { type: 'obj' }, - 'start station name': { type: 'obj' }, - 'start station latitude': { type: 'obj' }, - bikeid: { type: 'obj' }, - 'birth year': { type: 'obj' }, - gender: { type: 'obj' }, - */ - data: [ - { - index: 0, - tripduration: 404, - starttime: '2014-07-01 00:00:04', - stoptime: '2014-07-01 00:06:48', - 'start station id': 545, - 'start station name': 'E 23 St & 1 Ave', - 'start station latitude': 40.736502, - bikeid: 19578, - 'birth year': '1987', - gender: 2, - img_: smileyPNGString, - }, - { - index: 1, - tripduration: 850, - starttime: '2014-07-01 00:00:06', - stoptime: '2014-07-01 00:14:16', - 'start station id': 238, - 'start station name': 'Bank St & Washington St', - 'start station latitude': 40.7361967, - bikeid: 19224, - 'birth year': '1987', - gender: 1, - }, - { - index: 2, - tripduration: 1550, - starttime: '2014-07-01 00:00:21', - stoptime: '2014-07-01 00:26:11', - 'start station id': 223, - 'start station name': 'W 13 St & 7 Ave', - 'start station latitude': 40.73781509, - bikeid: 17627, - 'birth year': '1973', - gender: 2, - }, - { - index: 3, - tripduration: 397, - starttime: '2014-07-01 00:00:29', - stoptime: '2014-07-01 00:07:06', - 'start station id': 224, - 'start station name': 'Spruce St & Nassau St', - 'start station latitude': 40.71146364, - bikeid: 15304, - 'birth year': '1982', - gender: 1, - }, - { - index: 4, - tripduration: 609, - starttime: '2014-07-01 00:00:37', - stoptime: '2014-07-01 00:10:46', - 'start station id': 346, - 'start station name': 'Bank St & Hudson St', - 'start station latitude': 40.73652889, - bikeid: 20062, - 'birth year': '1972', - gender: 2, - }, - ], -}; -export const stringIndexDf = foo; - -export const tableDf: DFWhole = { - dfviewer_config: { - column_config: [ - { - col_name: 'index', - displayer_args: { displayer: 'integer', min_digits: 3, max_digits: 5 }, - }, - { - col_name: 'svg_column', - displayer_args: { displayer: 'SVGDisplayer' }, - }, - { - col_name: 'link_column', - displayer_args: { displayer: 'linkify' }, - }, - { - col_name: 'nanObject', - displayer_args: { displayer: 'integer', min_digits: 3, max_digits: 5 }, - color_map_config: { - color_rule: 'color_map', - //map_name: 'DIVERGING_RED_WHITE_BLUE', - map_name: 'BLUE_TO_YELLOW', - val_column: 'tripduration', - }, - }, - { - col_name: 'nanFloat', - displayer_args: { - displayer: 'float', - min_fraction_digits: 2, - max_fraction_digits: 8, - }, - tooltip_config: { tooltip_type: 'summary_series' }, - }, - { col_name: 'end station name', displayer_args: { displayer: 'obj' } }, - { - col_name: 'tripduration', - displayer_args: { displayer: 'integer', min_digits: 1, max_digits: 5 }, - color_map_config: { - color_rule: 'color_map', - map_name: 'BLUE_TO_YELLOW', - }, - }, - { - col_name: 'start station name', - displayer_args: { displayer: 'obj' }, - color_map_config: { - color_rule: 'color_not_null', - conditional_color: 'red', - exist_column: 'nanFloat', - }, - }, - { - col_name: 'floatCol', - displayer_args: { - displayer: 'float', - min_fraction_digits: 1, - max_fraction_digits: 3, - }, - }, - { - col_name: 'nanNumeric', - displayer_args: { displayer: 'integer', min_digits: 3, max_digits: 5 }, - tooltip_config: { - tooltip_type: 'simple', - val_column: 'start station name', - }, - }, - { - col_name: 'img_', - displayer_args: { displayer: 'Base64PNGImageDisplayer' }, - ag_grid_specs: { width: 150 }, - }, - ], - extra_grid_config: { rowHeight: 105 }, - component_config: { height_fraction: 1 }, - pinned_rows: [ - // { primary_key_val: 'dtype', displayer_args: { displayer: 'obj' } }, - // { primary_key_val: 'histogram', displayer_args: { displayer: 'histogram' }, }, - ], - }, - data: [ - { - index: 0, - 'end station name': 'Elizabeth St & Hester St', - tripduration: 471, - 'start station name': 'Catherine St & Monroe St', - floatCol: '1.111', - nanNumeric: null, - nanObject: null, - nanFloat: null, - //svg_column: '

paddy

', - link_column: 'https://buckaroo.dev', - img_: smileyPNGString, - }, - { - index: 1, - 'end station name': 'South St & Whitehall St', - tripduration: 1494, - 'start station name': '1 Ave & E 30 St', - floatCol: '8.888', - nanNumeric: null, - nanObject: null, - nanFloat: null, - svg_column: - '', - link_column: 'https://pola.rs/', - }, - { - index: 2, - 'end station name': 'E 59 St & Sutton Pl', - tripduration: 464, - 'start station name': 'E 48 St & 3 Ave', - floatCol: '9.999', - nanNumeric: null, - nanObject: null, - svg_column: - '', - nanFloat: 10, - }, - { - index: 3, - 'end station name': 'E 33 St & 5 Ave', - tripduration: 373, - 'start station name': 'Pershing Square N', - floatCol: '-10.1', - nanCol: null, - nanNumeric: null, - nanObject: null, - svg_column: - '', - nanFloat: null, - }, - { - index: 4, - 'end station name': 'Hancock St & Bedford Ave', - tripduration: 660, - 'start station name': 'Atlantic Ave & Fort Greene Pl', - floatCol: '10.99', - nanNumeric: null, - nanObject: null, - nanFloat: 3, - }, - ], -}; - -export const dfviewer_config_no_pinned: DFViewerConfig = { - column_config: tableDf.dfviewer_config.column_config, - pinned_rows: [ - { primary_key_val: 'dtype', displayer_args: { displayer: 'obj' } }, - { - primary_key_val: 'histogram', - displayer_args: { displayer: 'histogram' }, - }, - ], -}; -const tripDurationBins = [0, 300, 500, 1000, 1500]; - -export const summaryDfForTableDf: DFData = [ - { - index: 'histogram', - 'end station name': histograms.categorical_histo_lt, - tripduration: histograms.num_histo, - 'start station name': histograms.bool_histo, - nanNumeric: histograms.num_histo, - nanFloat: histograms.num_histo, - nanObject: histograms.num_histo, - floatCol: [ - { name: 521, cat_pop: 0.0103 }, - { name: 358, cat_pop: 0.0096 }, - { name: 519, cat_pop: 0.009 }, - { name: 497, cat_pop: 0.0087 }, - { name: 293, cat_pop: 0.0082 }, - { name: 285, cat_pop: 0.0081 }, - { name: 435, cat_pop: 0.008 }, - { name: 'unique', cat_pop: 0.0001 }, - { name: 'long_tail', cat_pop: 0.938 }, - { name: 'NA', cat_pop: 0.0 }, - ], - }, - { - index: 'histogram_bins', - tripduration: tripDurationBins, - nanObject: tripDurationBins, - }, - { - index: 'dtype', - 'end station name': 'String6666', - tripduration: 'object', - 'start station name': 'object', - nanNumeric: 'float64', - nanFloat: 'flot64', - nanObject: 'object', - floatCol: 'float', - }, -]; - -export const realSummaryTableData: DFData = [ - { index: 'dtype', int_col: 'int64', float_col: 'float64', str_col: 'object' }, - { index: 'min', int_col: 1, float_col: 1.4285714286 }, - { index: 'max', int_col: 49, float_col: 41.4285714286, str_col: null }, - { index: 'mean', int_col: 24.75, float_col: 22.4714285714 }, - { index: 'unique_count', int_col: 4, float_col: 0, str_col: 0 }, - { index: 'empty_count', int_col: 0, float_col: 0, str_col: 0 }, - { index: 'distinct_count', int_col: 49, float_col: 29, str_col: 1 }, -]; - -export const realSummaryConfig: DFViewerConfig = { - pinned_rows: [ - { primary_key_val: 'dtype', displayer_args: { displayer: 'obj' } }, - { - primary_key_val: 'min', - displayer_args: { - displayer: 'float', - min_fraction_digits: 3, - max_fraction_digits: 3, - }, - }, - { - primary_key_val: 'mean', - displayer_args: { - displayer: 'float', - min_fraction_digits: 3, - max_fraction_digits: 3, - }, - }, - { - primary_key_val: 'max', - displayer_args: { - displayer: 'float', - min_fraction_digits: 3, - max_fraction_digits: 3, - }, - }, - { - primary_key_val: 'unique_count', - displayer_args: { - displayer: 'float', - min_fraction_digits: 0, - max_fraction_digits: 0, - }, - }, - { - primary_key_val: 'distinct_count', - displayer_args: { - displayer: 'float', - min_fraction_digits: 0, - max_fraction_digits: 0, - }, - }, - { - primary_key_val: 'empty_count', - displayer_args: { - displayer: 'float', - min_fraction_digits: 0, - max_fraction_digits: 0, - }, - }, - ], - column_config: [ - // {'col_name': 'index', 'displayer_args': {'displayer': 'string'}}, - { - col_name: 'index', - displayer_args: { displayer: 'string' }, - ag_grid_specs: { minWidth: 150, pinned: 'left' }, - }, - { col_name: 'int_col', displayer_args: { displayer: 'obj' } }, - { col_name: 'float_col', displayer_args: { displayer: 'obj' } }, - { col_name: 'str_col', displayer_args: { displayer: 'obj' } }, - ], -}; diff --git a/js/components/ColumnsEditor.tsx b/js/components/ColumnsEditor.tsx index 41224205..16f45493 100644 --- a/js/components/ColumnsEditor.tsx +++ b/js/components/ColumnsEditor.tsx @@ -1,12 +1,10 @@ -import React, { useState } from 'react'; -import { bakedOperations } from '../baked_data/staticData'; -import { DFViewerConfig, EmptyDf } from './DFViewerParts/DFWhole'; +import React from 'react'; + +import { DFViewerConfig } from './DFViewerParts/DFWhole'; import { OperationViewer } from './Operations'; import { Operation } from './OperationUtils'; import { CommandConfigT } from './CommandUtils'; -//import {bakedCommandConfig} from './bakedOperationDefaults'; import { DependentTabs, OperationResult } from './DependentTabs'; -import { tableDf, bakedCommandConfig } from '../baked_data/staticData'; export type OperationSetter = (ops: Operation[]) => void; export interface WidgetConfig { @@ -49,23 +47,3 @@ export function ColumnsEditor({ ); } - -export function ColumnsEditorEx() { - const [operations, setOperations] = useState(bakedOperations); - - const baseOperationResults: OperationResult = { - transformed_df: EmptyDf, - generated_py_code: 'default py code', - transform_error: undefined, - }; - return ( - - ); -} diff --git a/js/components/DCFCell.tsx b/js/components/DCFCell.tsx index 943ee4fd..af74ac98 100644 --- a/js/components/DCFCell.tsx +++ b/js/components/DCFCell.tsx @@ -1,14 +1,8 @@ import React, { useState, Dispatch, SetStateAction } from 'react'; import _ from 'lodash'; -import { OperationResult, baseOperationResults } from './DependentTabs'; +import { OperationResult } from './DependentTabs'; import { ColumnsEditor } from './ColumnsEditor'; -import { - dfviewer_config_no_pinned, - realSummaryConfig, - realSummaryTableData, - summaryDfForTableDf, - tableDf, -} from '../baked_data/staticData'; + import { DFData, DFViewerConfig } from './DFViewerParts/DFWhole'; import { DFViewer } from './DFViewerParts/DFViewer'; import { StatusBar } from './StatusBar'; @@ -16,8 +10,7 @@ import { BuckarooState } from './WidgetTypes'; import { BuckarooOptions } from './WidgetTypes'; import { DFMeta } from './WidgetTypes'; import { CommandConfigT } from './CommandUtils'; -import { bakedCommandConfig } from './bakedOperationDefaults'; -import { Operation, bakedOperations } from './OperationUtils'; +import { Operation } from './OperationUtils'; export type CommandConfigSetterT = ( setter: Dispatch> @@ -113,72 +106,3 @@ export function WidgetDCFCell({ ); } - -export function WidgetDCFCellExample() { - const dfm: DFMeta = { - columns: 5, - rows_shown: 20, - filtered_rows: 89, - total_rows: 877, - }; - - const [bState, setBState] = useState({ - auto_clean: '', - sampled: false, - show_commands: false, - df_display: 'main', - post_processing: '', - quick_command_args: {}, - }); - - const bOptions: BuckarooOptions = { - auto_clean: ['', 'aggressive', 'conservative'], - df_display: ['main', 'realSummary', 'no_pinned'], - sampled: ['random'], - post_processing: ['', 'foo', 'bar'], - show_commands: ['on'], - // 'summary_stats' : ['full', 'all', 'typing_stats'] - }; - - const [operations, setOperations] = useState(bakedOperations); - - const bakedDfDisplay: Record = { - main: { - data_key: 'main', - df_viewer_config: tableDf.dfviewer_config, - summary_stats_key: 'all', - }, - realSummary: { - data_key: 'empty', - df_viewer_config: realSummaryConfig, - summary_stats_key: 'real_summary', - }, - - no_pinned: { - data_key: 'main', - df_viewer_config: dfviewer_config_no_pinned, - summary_stats_key: 'all', - }, - }; - - const df_data_dict = { - main: tableDf.data, - all: summaryDfForTableDf, - real_summary: realSummaryTableData, - empty: [{ index: 'distinct_count' }], - }; - return ( - - ); -} diff --git a/js/components/DFViewerParts/DFViewer.tsx b/js/components/DFViewerParts/DFViewer.tsx index 95d0da8f..5ec54630 100644 --- a/js/components/DFViewerParts/DFViewer.tsx +++ b/js/components/DFViewerParts/DFViewer.tsx @@ -1,4 +1,4 @@ -import React, { useRef, CSSProperties, useState } from 'react'; +import React, { useRef, CSSProperties } from 'react'; import _ from 'lodash'; import { ComponentConfig, DFData, DFViewerConfig } from './DFWhole'; @@ -11,8 +11,6 @@ import { SizeColumnsToContentStrategy, SizeColumnsToFitProvidedWidthStrategy, } from 'ag-grid-community'; -import { summaryDfForTableDf, tableDf } from '../../baked_data/staticData'; - import { getCellRendererSelector } from './gridUtils'; export type setColumFunc = (newCol: string) => void; @@ -32,27 +30,19 @@ export function DFViewer({ activeCol?: string; setActiveCol?: setColumFunc; }) { - /* = { - df: EmptyDf.data, - df_viewer_config: EmptyDf.dfviewer_config, - summary_stats_data: [], - style: { height: '300px' }, - setActiveCol: () => null, - }*/ - //console.log("dfviewer df_viewer_config", df_viewer_config); - // console.log("summary_stats_data", summary_stats_data); - // console.log("full_object", {'df':df, 'df_viewer_config':df_viewer_config, 'summary_stats_data': summary_stats_data}) const [agColsPure, agData] = dfToAgrid( df, df_viewer_config, summary_stats_data || [] ); - + const selectBackground = + df_viewer_config?.component_config?.selectionBackground || + 'var(--ag-range-selection-background-color-3)'; const styledColumns = replaceAtMatch( _.clone(agColsPure), activeCol || '___never', { - cellStyle: { background: 'var(--ag-range-selection-background-color-3)' }, + cellStyle: { background: selectBackground }, } ); @@ -129,12 +119,12 @@ export function DFViewer({ rowHeight: df_viewer_config?.extra_grid_config?.rowHeight, }); + const divClass = + df_viewer_config?.component_config?.className || 'ag-theme-alpine-dark'; + return (
-
+
{ applicableStyle, inIframe: inIframeClass, }; - - /* - ab = window.location.host; - "cskfus796ts-496ff2e9c6d22116-0-colab.googleusercontent.com" - bc = window.location.pathname - "/outputframe.html" -*/ }; - -export function DFViewerEx() { - const [activeCol, setActiveCol] = useState('tripduration'); - return ( - - ); -} diff --git a/js/components/DFViewerParts/DFWhole.ts b/js/components/DFViewerParts/DFWhole.ts index 561d728f..3890da26 100644 --- a/js/components/DFViewerParts/DFWhole.ts +++ b/js/components/DFViewerParts/DFWhole.ts @@ -142,6 +142,8 @@ export type ComponentConfig = { dfvHeight?: number; layoutType?: 'autoHeight' | 'normal'; shortMode?: boolean; + selectionBackground?: string; + className?: string; }; export interface DFViewerConfig { diff --git a/js/components/DFViewerParts/Displayer.ts b/js/components/DFViewerParts/Displayer.ts index 46f33e80..c0dd6c67 100644 --- a/js/components/DFViewerParts/Displayer.ts +++ b/js/components/DFViewerParts/Displayer.ts @@ -9,12 +9,12 @@ import { ObjDisplayerA, } from './DFWhole'; import _ from 'lodash'; +import { HistogramCell } from './HistogramCell'; import { Base64PNGDisplayer, - HistogramCell, LinkCellRenderer, SVGDisplayer, -} from './HistogramCell'; +} from './OtherRenderers'; import { CellRendererArgs, FormatterArgs } from './DFWhole'; /* diff --git a/js/components/DFViewerParts/HistogramCell.tsx b/js/components/DFViewerParts/HistogramCell.tsx index 79d838fa..db355050 100644 --- a/js/components/DFViewerParts/HistogramCell.tsx +++ b/js/components/DFViewerParts/HistogramCell.tsx @@ -2,59 +2,15 @@ import _ from 'lodash'; import React from 'react'; import { createPortal } from 'react-dom'; -import { - BarChart, - Bar, - //Tooltip, - //Legend, - //Cell, XAxis, YAxis, CartesianGrid, , ResponsiveContainer, -} from 'recharts'; -import { Tooltip } from '../../vendor/RechartTooltip'; +import { Bar, BarChart, Tooltip } from 'recharts'; -import { isNumOrStr, ValueType } from '../../vendor/RechartExtra'; -import { ValueFormatterFunc } from 'ag-grid-community'; +import {} from 'recharts'; -function defaultFormatter(value: TValue) { - return _.isArray(value) && isNumOrStr(value[0]) && isNumOrStr(value[1]) - ? (value.join(' ~ ') as TValue) - : value; +export interface HistogramNode { + name: string; + population: number; } -export const bakedData = [ - { - name: 'Page A', - population: 4000, - }, - { - name: 'Page B', - population: 3000, - }, - { - name: 'Page C', - population: 2000, - }, - { - name: 'Page D', - population: 2780, - }, - { - name: 'Page E', - population: 1890, - }, -]; - -export const makeData = (histogram: number[]) => { - const accum = []; - for (let i = 0; i < histogram.length; i++) { - accum.push({ - name: `${i + 1}/${histogram.length}`, - population: histogram[i], - }); - } - //console.log('accum', accum) - return accum; -}; - export const formatter = (value: any, name: any, props: any) => { if (props.payload.name === 'longtail') { return [value, name]; @@ -88,75 +44,32 @@ export function FloatingTooltip({ items, x, y }: any) { ); } -export const ToolTipAdapter = (args: any) => { - const { active, formatter, payload } = args; - if (active && payload && payload.length) { - const renderContent2 = () => { - //const items = (itemSorter ? _.sortBy(payload, itemSorter) : payload).map((entry, i) => { - const items = payload.map((entry: any, i: number) => { - if (entry.type === 'none') { - return null; - } - - const finalFormatter = entry.formatter || formatter || defaultFormatter; - const { value, name } = entry; - let finalValue: React.ReactNode = value; - let finalName: React.ReactNode = name; - if (finalFormatter && finalValue !== null && finalName !== null) { - const formatted = finalFormatter(value, name, entry, i, payload); - if (Array.isArray(formatted)) { - [finalValue, finalName] = formatted; - } else { - finalValue = formatted; - } - } - - return [finalName, finalValue]; - }); - return items; - }; - return ( -
- -
+const CustomTooltip = ({ active, payload, label, screenCoords }: any) => { + if (active && payload && payload.length && screenCoords) { + // console.log("payload", payload, "label", label); + // console.log("payload[0].payload", payload[0].payload, payload[0].payload.name) + const name = payload[0].payload.name; + return createPortal( +
+

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

+
, + document.body ); } return null; }; -export const getTextCellRenderer = (formatter: ValueFormatterFunc) => { - const TextCellRenderer = (props: any) => { - return {formatter(props)}; - }; - return TextCellRenderer; -}; - -export const LinkCellRenderer = (props: any) => { - return {props.value}; -}; - -export const Base64PNGDisplayer = (props: any) => { - const imgString = 'data:image/png;base64,' + props.value; - return ; -}; - -export const SVGDisplayer = (props: any) => { - const markup = { __html: props.value }; - - return ( -
- ); -}; - export const HistogramCell = (props: any) => { - //debugger; if (props === undefined || props.value === undefined) { return ; } @@ -174,6 +87,10 @@ export const HistogramCell = (props: any) => { console.log('dumbClickHandler', rechartsArgs); }; + const [screenCoords, setScreenCoords] = React.useState<{ + x: number; + y: number; + } | null>(null); return (
{ barGap={1} data={histogram} onClick={dumbClickHandler} + onMouseMove={(_, e) => { + // console.log(e); + setScreenCoords({ x: e.clientX, y: e.clientY }); + }} > { stackId="stack" /> - } - offset={20} - allowEscapeViewBox={{ x: true }} + allowEscapeViewBox={{ x: true, y: true }} + wrapperStyle={{ zIndex: 99999999, color: '#111' }} + content={(props) => ( + + )} />
diff --git a/js/components/DFViewerParts/OtherRenderers.tsx b/js/components/DFViewerParts/OtherRenderers.tsx new file mode 100644 index 00000000..f9ed43bd --- /dev/null +++ b/js/components/DFViewerParts/OtherRenderers.tsx @@ -0,0 +1,29 @@ +import _ from 'lodash'; +import React from 'react'; +import { ValueFormatterFunc } from 'ag-grid-community'; + +export const getTextCellRenderer = (formatter: ValueFormatterFunc) => { + const TextCellRenderer = (props: any) => { + return {formatter(props)}; + }; + return TextCellRenderer; +}; + +export const LinkCellRenderer = (props: any) => { + return {props.value}; +}; + +export const Base64PNGDisplayer = (props: any) => { + const imgString = 'data:image/png;base64,' + props.value; + return ; +}; + +export const SVGDisplayer = (props: any) => { + const markup = { __html: props.value }; + + return ( +
+ ); +}; diff --git a/js/components/DFViewerParts/SeriesSummaryTooltip.tsx b/js/components/DFViewerParts/SeriesSummaryTooltip.tsx index 789ae805..b72b2a31 100644 --- a/js/components/DFViewerParts/SeriesSummaryTooltip.tsx +++ b/js/components/DFViewerParts/SeriesSummaryTooltip.tsx @@ -18,3 +18,16 @@ export function getBakedDFViewer(seriesDf: DFWhole) { }; return retFunc; } +export const simpleTooltip = (props: ITooltipParams) => { + // displaying the tooltip for histograms is distracting. + // This should be possible with the tooltipValueGetter, but that + // wasn't working for some reason + + // console.log("simpleTooltip props", props); + // console.log("props.colId", props.column.colId, "pinned", + // props.column.pinned, "node.id", props.node.id, "rowIndex", props.rowIndex) + if (props.data.index === 'histogram') { + return; + } + return
{props.valueFormatted}
; +}; diff --git a/js/components/DFViewerParts/gridUtils.ts b/js/components/DFViewerParts/gridUtils.ts index 6fb2083d..feee1cef 100644 --- a/js/components/DFViewerParts/gridUtils.ts +++ b/js/components/DFViewerParts/gridUtils.ts @@ -21,12 +21,12 @@ import { DFViewerConfig, } from './DFWhole'; import _, { zipObject } from 'lodash'; -import { getTextCellRenderer } from './HistogramCell'; +import { getTextCellRenderer } from './OtherRenderers'; import { DFData, SDFMeasure, SDFT } from './DFWhole'; import { CellRendererArgs, FormatterArgs, PinnedRowConfig } from './DFWhole'; -import { getBakedDFViewer } from './SeriesSummaryTooltip'; +import { getBakedDFViewer, simpleTooltip } from './SeriesSummaryTooltip'; import { getFormatterFromArgs, getCellRenderer, @@ -165,7 +165,7 @@ export function getTooltip( ): Partial { switch (ttc.tooltip_type) { case 'simple': - return { tooltipField: ttc.val_column }; + return { tooltipField: ttc.val_column, tooltipComponent: simpleTooltip }; case 'summary_series': return { @@ -230,6 +230,7 @@ export function dfToAgrid( return colDef; } ); + console.log('retColumns', retColumns); return [retColumns, tdf]; } @@ -253,7 +254,6 @@ export function getCellRendererSelector(pinned_rows: PinnedRowConfig[]) { return anyRenderer; } const prc: PinnedRowConfig = maybePrc; - console.log('params', params); const currentCol = params.column?.getColId(); if ( (prc.default_renderer_columns === undefined && @@ -298,25 +298,3 @@ export function extractSDFT(summaryStatsDf: DFData): SDFT { }); return zipObject(allColumns, vals) as SDFT; } - -/* -I would love for extractSDF to be more elegant like the following function. I just can't quite get it to work -time to move on - -export function extractSDFT2(summaryStatsDf:DFData) : SDFT { - const rows = ['histogram_bins', 'histogram_log_bins'] - - const extracted = _.map(rows, (pk) => { - return _.find(summaryStatsDf, {'index': pk}) || {} - }) - const dupKeys: string[][] = _.map(extracted, _.keys); - const allColumns: string[] = _.without(_.union(...dupKeys), 'index'); - const vals:SDFMeasure[] = _.map(allColumns, (colName) => { - const pairs = _.map(_.zip(rows, extracted), (rname, row) => { - return [rname, (_.get(row, colName, []) as number[])]; - }) - return _.fromPairs(pairs) as SDFMeasure; - }); - return zipObject(allColumns, vals) as SDFT; -} -*/ diff --git a/js/components/StatusBar.tsx b/js/components/StatusBar.tsx index bcb2d9e2..59710bb3 100644 --- a/js/components/StatusBar.tsx +++ b/js/components/StatusBar.tsx @@ -14,7 +14,7 @@ const helpCell = function (params: any) { ? diff --git a/js/components/bakedOperationDefaults.ts b/js/components/bakedOperationDefaults.ts deleted file mode 100644 index 5b922344..00000000 --- a/js/components/bakedOperationDefaults.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { OperationDefaultArgs } from './OperationUtils'; -import { sym } from './utils'; -import { symDf, CommandConfigT, bakedArgSpecs } from './CommandUtils'; - -export const bakedOperationDefaults: OperationDefaultArgs = { - dropcol: [sym('dropcol'), symDf, 'col'], - fillna: [sym('fillna'), symDf, 'col', 8], - resample: [sym('resample'), symDf, 'col', 'monthly', {}], -}; - -export const bakedCommandConfig: CommandConfigT = { - argspecs: bakedArgSpecs, - defaultArgs: bakedOperationDefaults, -}; diff --git a/js/index.ts b/js/index.ts index ecc0c68f..c388fb15 100644 --- a/js/index.ts +++ b/js/index.ts @@ -1,36 +1,28 @@ -// Copyright (c) Bloomberg +// Copyright (c) Paddy Mullen // Distributed under the terms of the Modified BSD License. -import { ColumnsEditor, ColumnsEditorEx } from './components/ColumnsEditor'; -import { WidgetDCFCellExample } from './components/DCFCell'; -import { DFViewer, DFViewerEx } from './components/DFViewerParts/DFViewer'; +import { ColumnsEditor } from './components/ColumnsEditor'; +import { DFViewer } from './components/DFViewerParts/DFViewer'; +import { WidgetDCFCell } from './components/DCFCell'; import { HistogramCell } from './components/DFViewerParts/HistogramCell'; import { DependentTabs } from './components/DependentTabs'; import { OperationViewer } from './components/Operations'; -//import { DFData, DFViewerConfig } from './components/DFViewerParts/DFWhole'; +import * as CommandUtils from './components/CommandUtils'; +import * as utils from './components/utils'; import { StatusBar } from './components/StatusBar'; // In case of classic Jupyter Notebook and embed, we provide the PhosphorJS CSS - export * from './version'; export * from './dcefwidget'; -export * as bakedData from './baked_data/staticData'; export const extraComponents = { ColumnsEditor, DependentTabs, OperationViewer, - WidgetDCFCellExample, - ColumnsEditorEx, + WidgetDCFCell, DFViewer, - DFViewerEx, StatusBar, HistogramCell, + CommandUtils, + utils, }; - -/* -export const typing = { - DFData, - DFViewerConfig - }; -*/ diff --git a/js/vendor/RechartExtra.ts b/js/vendor/RechartExtra.ts deleted file mode 100644 index df8d351a..00000000 --- a/js/vendor/RechartExtra.ts +++ /dev/null @@ -1,72 +0,0 @@ -/** - * This module contains the standard library from rechart so that base rechart code cna be imported with the minimum amount of rewriting - */ - -import _ from 'lodash'; -import { CSSProperties, ReactNode } from 'react'; -export { Global, DefaultTooltipContent } from 'recharts'; - -//export Global; - -//import { AnimationDuration, AnimationTiming } from '../util/types'; -/** The type of easing function to use for animations */ -export type AnimationTiming = - | 'ease' - | 'ease-in' - | 'ease-out' - | 'ease-in-out' - | 'linear'; -/** Specifies the duration of animation, the unit of this option is ms. */ -export type AnimationDuration = number; - -export type TooltipType = 'none'; -export type ValueType = number | string | Array; -export type NameType = number | string; - -export type Formatter = ( - value: TValue, - name: TName, - item: Payload, - index: number, - payload: Array> -) => [React.ReactNode, TName] | React.ReactNode; - -export interface Payload { - type?: TooltipType; - color?: string; - formatter?: Formatter; - name?: TName; - value?: TValue; - unit?: ReactNode; - dataKey?: string | number; - payload?: any; - chartType?: string; - stroke?: string; - strokeDasharray?: string | number; - strokeWidth?: number | string; -} - -export interface DefaultProps< - TValue extends ValueType, - TName extends NameType -> { - separator?: string; - wrapperClassName?: string; - labelClassName?: string; - formatter?: Formatter; - contentStyle?: CSSProperties; - itemStyle?: CSSProperties; - labelStyle?: CSSProperties; - labelFormatter?: ( - label: any, - payload: Array> - ) => ReactNode; - label?: any; - payload?: Array>; - itemSorter?: (item: Payload) => number | string; -} - -export const isNumber = (value: unknown): value is number => - _.isNumber(value) && !_.isNaN(value); -export const isNumOrStr = (value: unknown): value is number | string => - isNumber(value as number) || _.isString(value); diff --git a/js/vendor/RechartTooltip.tsx b/js/vendor/RechartTooltip.tsx deleted file mode 100644 index 27008715..00000000 --- a/js/vendor/RechartTooltip.tsx +++ /dev/null @@ -1,375 +0,0 @@ -//@ts-nocheck -/** - * Reimplementation of rechart tooltips. most of this is copied from ??? in the recharts source tree because the parts we are editting are deeply embedded into functions. - - Most of the point of this is to get tooltips to be absolutely positioned off of document.body, not the nearest parent element. AG-Grid hides those tooltips otherwise. - */ -import React, { - CSSProperties, - ReactNode, - ReactElement, - SVGProps, - useEffect, - useState, - useRef, - useCallback, -} from 'react'; -import { translateStyle } from 'react-smooth'; -import _ from 'lodash'; -//import classNames from 'classnames'; - -//import { DefaultTooltipContent, ValueType, NameType, Payload, Props as DefaultProps } from './DefaultTooltipContent'; - -import type { - ValueType, - NameType, - Payload, - DefaultProps, -} from './RechartExtra'; -//import { Global } from '../util/Global'; -//import { isNumber } from '../util/DataUtils'; -import { Global, isNumber } from './RechartExtra'; - -//import { AnimationDuration, AnimationTiming } from '../util/types'; -import { AnimationDuration, AnimationTiming } from './RechartExtra'; - -import { DefaultTooltipContent } from 'recharts'; - -const CLS_PREFIX = 'recharts-tooltip-wrapper'; - -const EPS = 1; - -export type ContentType = - | ReactElement - | ((props: TooltipProps) => ReactNode); - -type UniqueFunc = ( - entry: Payload -) => unknown; -type UniqueOption = - | boolean - | UniqueFunc; -function defaultUniqBy( - entry: Payload -) { - return entry.dataKey; -} -function getUniqPayload( - option: UniqueOption, - payload: Array> -) { - if (option === true) { - //@ts-ignore - return _.uniqBy(payload, defaultUniqBy); - } - - if (_.isFunction(option)) { - return _.uniqBy(payload, option); - } - - return payload; -} - -function renderContent( - content: ContentType, - props: TooltipProps -) { - if (React.isValidElement(content)) { - return React.cloneElement(content, props); - } - if (_.isFunction(content)) { - return React.createElement(content as any, props); - } - - return ; -} - -export type OptionalCoords = { - x?: number; - y?: number; -}; - -export type TooltipProps< - TValue extends ValueType, - TName extends NameType -> = DefaultProps & { - allowEscapeViewBox?: { - x?: boolean; - y?: boolean; - }; - reverseDirection?: { - x?: boolean; - y?: boolean; - }; - content?: ContentType; - viewBox?: { - x?: number; - y?: number; - width?: number; - height?: number; - }; - active?: boolean; - offset?: number; - wrapperStyle?: CSSProperties; - cursor?: boolean | ReactElement | SVGProps; - coordinate?: OptionalCoords; - position?: OptionalCoords; - trigger?: 'hover' | 'click'; - shared?: boolean; - payloadUniqBy?: UniqueOption; - isAnimationActive?: boolean; - animationDuration?: AnimationDuration; - animationEasing?: AnimationTiming; - filterNull?: boolean; - useTranslate3d?: boolean; - box?: OptionalCoords; -}; - -const tooltipDefaultProps: TooltipProps = { - active: false, - allowEscapeViewBox: { x: false, y: false }, - reverseDirection: { x: false, y: false }, - offset: 10, - viewBox: { x: 0, y: 0, height: 0, width: 0 }, - coordinate: { x: 0, y: 0 }, - // this doesn't exist on TooltipProps - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - cursorStyle: {}, - separator: ' : ', - wrapperStyle: {}, - contentStyle: {}, - itemStyle: {}, - labelStyle: {}, - cursor: true, - trigger: 'hover', - isAnimationActive: !Global.isSsr, - animationEasing: 'ease', - animationDuration: 400, - filterNull: true, - useTranslate3d: false, - box: { x: 0, y: 0 }, -}; - -export const Tooltip = ( - props: TooltipProps & { children?: React.ReactNode } -) => { - const [boxWidth, setBoxWidth] = useState(-1); - const [boxHeight, setBoxHeight] = useState(-1); - const [dismissed, setDismissed] = useState(false); - const [dismissedAtCoordinate, setDismissedAtCoordinate] = useState({ - x: 0, - y: 0, - }); - const [boxCoords, setBoxCoords] = useState({ x: 0, y: 0 }); - - const wrapperNode = useRef(); - const { - allowEscapeViewBox, - reverseDirection, - coordinate, - offset, - position, - viewBox, - } = props; - - const handleKeyDown = useCallback( - (event: KeyboardEvent) => { - if (event.key === 'Escape') { - setDismissed(true); - setDismissedAtCoordinate((prev) => ({ - ...prev, - x: coordinate?.x, - y: coordinate?.y, - })); - } - }, - [coordinate?.x, coordinate?.y] - ); - - useEffect(() => { - const updateBBox = () => { - if (dismissed) { - document.removeEventListener('keydown', handleKeyDown); - if ( - coordinate?.x !== dismissedAtCoordinate.x || - coordinate?.y !== dismissedAtCoordinate.y - ) { - setDismissed(false); - } - } else { - document.addEventListener('keydown', handleKeyDown); - } - - if (wrapperNode.current && wrapperNode.current.getBoundingClientRect) { - const box = wrapperNode.current.getBoundingClientRect(); - setBoxCoords({ x: box.x, y: box.y }); - if ( - Math.abs(box.width - boxWidth) > EPS || - Math.abs(box.height - boxHeight) > EPS - ) { - setBoxWidth(box.width); - setBoxHeight(box.height); - } - } else if (boxWidth !== -1 || boxHeight !== -1) { - setBoxWidth(-1); - setBoxHeight(-1); - } - }; - - updateBBox(); - - return () => { - document.removeEventListener('keydown', handleKeyDown); - }; - }, [ - boxHeight, - boxWidth, - coordinate, - dismissed, - dismissedAtCoordinate.x, - dismissedAtCoordinate.y, - handleKeyDown, - ]); - - const getTranslate = ({ - key, - tooltipDimension, - viewBoxDimension, - }: { - key: 'x' | 'y'; - tooltipDimension: number; - viewBoxDimension: number; - }) => { - if (position && isNumber(position[key])) { - return position[key]; - } - - const pCoordinate = coordinate || { x: 0, y: 0 }; - const negative = (pCoordinate[key] || 0) - tooltipDimension - (offset || 0); - const positive = (pCoordinate[key] || 0) + offset; - if (allowEscapeViewBox?.[key]) { - return reverseDirection[key] ? negative : positive; - } - - if (reverseDirection?.[key]) { - const tooltipBoundary = negative; - const viewBoxBoundary = viewBox[key]; - if (tooltipBoundary < viewBoxBoundary) { - return Math.max(positive, viewBox[key]); - } - return Math.max(negative, viewBox[key]); - } - const tooltipBoundary = positive + tooltipDimension; - const viewBoxBoundary = viewBox[key] + viewBoxDimension; - if (tooltipBoundary > viewBoxBoundary) { - return Math.max(negative, viewBox[key]); - } - return Math.max(positive, viewBox[key]); - }; - - const { - payload, - payloadUniqBy, - filterNull, - active, - wrapperStyle, - useTranslate3d, - isAnimationActive, - animationDuration, - animationEasing, - } = props; - const finalPayload = getUniqPayload( - payloadUniqBy, - filterNull && payload && payload.length - ? payload.filter((entry) => !_.isNil(entry.value)) - : payload - ); - const hasPayload = finalPayload && finalPayload.length; - const { content } = props; - let outerStyle: CSSProperties = { - pointerEvents: 'none', - visibility: !dismissed && active && hasPayload ? 'visible' : 'hidden', - position: 'absolute', - top: 0, - left: 0, - ...wrapperStyle, - }; - let translateX, translateY; - - if (position && isNumber(position.x) && isNumber(position.y)) { - translateX = position.x; - translateY = position.y; - } else if (boxWidth > 0 && boxHeight > 0 && coordinate) { - translateX = getTranslate({ - key: 'x', - tooltipDimension: boxWidth, - viewBoxDimension: viewBox.width, - }); - - translateY = getTranslate({ - key: 'y', - tooltipDimension: boxHeight, - viewBoxDimension: viewBox.height, - }); - } else { - outerStyle.visibility = 'hidden'; - } - - outerStyle = { - ...translateStyle({ - transform: useTranslate3d - ? `translate3d(${translateX}px, ${translateY}px, 0)` - : `translate(${translateX}px, ${translateY}px)`, - }), - ...outerStyle, - }; - - if (isAnimationActive && active) { - outerStyle = { - ...translateStyle({ - transition: `transform ${animationDuration}ms ${animationEasing}`, - }), - ...outerStyle, - }; - } - - // eslint-disable-next-line - // const cls = classNames(CLS_PREFIX, { - // [`${CLS_PREFIX}-right`]: isNumber(translateX) && coordinate && isNumber(coordinate.x) && translateX >= coordinate.x, - // [`${CLS_PREFIX}-left`]: isNumber(translateX) && coordinate && isNumber(coordinate.x) && translateX < coordinate.x, - // [`${CLS_PREFIX}-bottom`]: - // isNumber(translateY) && coordinate && isNumber(coordinate.y) && translateY >= coordinate.y, - // [`${CLS_PREFIX}-top`]: isNumber(translateY) && coordinate && isNumber(coordinate.y) && translateY < coordinate.y, - // }); - - const cls = `${CLS_PREFIX}-top`; - return ( - // ESLint is disabled to allow listening to the `Escape` key. Refer to - // https://github.com/recharts/recharts/pull/2925 - // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -
- {renderContent(content, { - ...props, - box: boxCoords, - payload: finalPayload, - })} -
- ); -}; - -// needs to be set so that renderByOrder can find the correct handler function -Tooltip.displayName = 'Tooltip'; - -/** - * needs to be set so that renderByOrder can access an have default values for - * children.props when there are no props set by the consumer - * doesn't work if using default parameters - */ -Tooltip.defaultProps = tooltipDefaultProps; diff --git a/package.json b/package.json index c85bfc62..cf8843ca 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "buckaroo", - "version": "0.7.9", + "version": "0.7.10", "description": "Fast Datagrid widget for the Jupyter Notebook and JupyterLab", "keywords": [ "jupyter", @@ -66,8 +66,7 @@ "lodash": "^4.17.21", "react": "^18.0.0", "react-dom": "^18.0.0", - "react-smooth": "^2.0.3", - "recharts": "^2.7.3" + "recharts": "^2.13.1" }, "devDependencies": { "@babel/cli": "^7.6.3", diff --git a/pyproject.toml b/pyproject.toml index 6c1c80d7..88d6dbe1 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -35,7 +35,7 @@ dependencies = [ "graphlib_backport>=1.0.0", "packaging>=18" ] -version = "0.7.9" +version = "0.7.10" [project.license] file = "LICENSE.txt" diff --git a/yarn.lock b/yarn.lock index ba2ce42f..ab6ca96e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3975,13 +3975,6 @@ dom-converter@^0.2.0: dependencies: utila "~0.4" -dom-helpers@^3.4.0: - version "3.4.0" - resolved "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz" - integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA== - dependencies: - "@babel/runtime" "^7.1.2" - dom-helpers@^5.0.1, dom-helpers@^5.2.0, dom-helpers@^5.2.1: version "5.2.1" resolved "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz" @@ -4532,7 +4525,7 @@ fast-diff@^1.1.2: resolved "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz" integrity sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw== -fast-equals@^5.0.0, fast-equals@^5.0.1: +fast-equals@^5.0.1: version "5.0.1" resolved "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz" integrity sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ== @@ -7401,7 +7394,7 @@ react-dom@^18.0.0, react-dom@^18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" -react-is@^16.10.2, react-is@^16.13.1, react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0: +react-is@^16.13.1, react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0: version "16.13.1" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -7411,6 +7404,11 @@ react-is@^18.0.0, react-is@^18.2.0: resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== +react-is@^18.3.1: + version "18.3.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e" + integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg== + react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz" @@ -7451,14 +7449,6 @@ react-router@^6.3.0: dependencies: "@remix-run/router" "1.15.3" -react-smooth@^2.0.3: - version "2.0.5" - resolved "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.5.tgz" - integrity sha512-BMP2Ad42tD60h0JW6BFaib+RJuV5dsXJK9Baxiv/HlNFjvRLqA9xrNKxVWnUIZPQfzUwGXIlU/dSYLU+54YGQA== - dependencies: - fast-equals "^5.0.0" - react-transition-group "2.9.0" - react-smooth@^4.0.0: version "4.0.1" resolved "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.1.tgz" @@ -7468,16 +7458,6 @@ react-smooth@^4.0.0: prop-types "^15.8.1" react-transition-group "^4.4.5" -react-transition-group@2.9.0: - version "2.9.0" - resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz" - integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg== - dependencies: - dom-helpers "^3.4.0" - loose-envify "^1.4.0" - prop-types "^15.6.2" - react-lifecycles-compat "^3.0.4" - react-transition-group@^4.4.5: version "4.4.5" resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz" @@ -7540,15 +7520,15 @@ recharts-scale@^0.4.4: dependencies: decimal.js-light "^2.4.1" -recharts@^2.7.3: - version "2.12.5" - resolved "https://registry.npmjs.org/recharts/-/recharts-2.12.5.tgz" - integrity sha512-Cy+BkqrFIYTHJCyKHJEPvbHE2kVQEP6PKbOHJ8ztRGTAhvHuUnCwDaKVb13OwRFZ0QNUk1QvGTDdgWSMbuMtKw== +recharts@^2.13.1: + version "2.13.2" + resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.13.2.tgz#4450e5644da54680aa6924e5bc5bd06407fae5d2" + integrity sha512-UDLGFmnsBluDIPpQb9uty0ejb+jiVI71vkki8vVsR6ZCJdgjBfKQoQfft4re99CKlTy9qjQApxCLG6TrxJkeAg== dependencies: clsx "^2.0.0" eventemitter3 "^4.0.1" lodash "^4.17.21" - react-is "^16.10.2" + react-is "^18.3.1" react-smooth "^4.0.0" recharts-scale "^0.4.4" tiny-invariant "^1.3.1"