buckaroo-js-core 0.8.0

package/examples/CodePenButton.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import exampleCss from '!!raw-loader!./example.css';
+
+const CodePenButton = React.memo(function CodePenButtonRaw(props: {
+    text: Promise<string>;
+    title: string;
+}) {
+    const [text, setText] = React.useState('loading()');
+    React.useEffect(() => {
+        props.text.then((r) => {
+            r = r.replace(
+                /import (.*) from '(.*)'/g,
+                (match, g1, g2) => `import ${g1} from "https://cdn.skypack.dev/${g2}"`
+            );
+            r = r.replace(/import '.*';\n/g, '');
+            r = r.replace(/export default function (.*)/, 'function Comp() {');
+            r = 'import * as ReactDOM from "https://cdn.skypack.dev/react-dom";\n' + r;
+            r += '\nReactDOM.render(<Comp />, document.getElementById("root"));\n';
+            setText(r);
+        });
+    }, [props.text]);
+
+    const ref = React.useRef<HTMLFormElement>();
+
+    return (
+        <form
+            className='position-absolute my-2 mx-4'
+            style={{top: '0px', right: '0px'}}
+            ref={ref}
+            action='https://codepen.io/pen/define'
+            method='POST'
+            target='_blank'
+        >
+            <input
+                type='hidden'
+                name='data'
+                value={JSON.stringify({
+                    title: 'react-edit-list ' + props.title,
+                    html: '<div id="root"></div>',
+                    js: text,
+                    js_pre_processor: 'typescript',
+                    css: exampleCss,
+                    js_external:
+                        'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js',
+                    css_external:
+                        'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css;' +
+                        'https://unpkg.com/react-day-picker/dist/style.css'
+                })}
+            />
+            <button
+                className='btn border mb-2 bg-light'
+                onClick={() => {
+                    ref.current.submit();
+                }}
+            >
+                <span className='me-2 align-middle'>Edit on</span>
+                <svg
+                    xmlns='http://www.w3.org/2000/svg'
+                    viewBox='0 0 138 26'
+                    height='24px'
+                    fill='none'
+                    stroke='#000'
+                    strokeWidth='2.3'
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                >
+                    <path d='M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z' />
+                </svg>
+            </button>
+        </form>
+    );
+});
+
+export default CodePenButton;

package/examples/ReadmeBlock.tsx

@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import React from 'react';
+// @ts-ignore
+import READMEmd from '../README.md';
+
+// This is expensive to render
+const ReadmeBlock = React.memo(function _README() {
+    return <div dangerouslySetInnerHTML={{__html: READMEmd}} />;
+});
+
+export default ReadmeBlock;

package/examples/app.css

@@ -0,0 +1,29 @@
+.left-menu button {
+    text-align: left;
+    font-weight: bold;
+    color: #333333;
+}
+
+.left-menu a:hover {
+    text-decoration: none;
+}
+
+.left-menu {
+    width: 10em;
+    min-width: 10em;
+    max-width: 10em;
+}
+
+.codeblock {
+    max-height: 90vh;
+    overflow-y: scroll;
+}
+
+.codeblock > pre {
+    margin-top: 0 !important;
+}
+
+.codeblock > pre > code {
+    font-size: 0.9rem !important;
+    line-height: 1.1 !important;
+}

package/examples/ex/ColumnsEditorEx.tsx

@@ -0,0 +1,5 @@
+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;

package/examples/ex/CommandViewerEx.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+//import {bakedOperations, bakedCommandConfig } from '../../../js/baked_data/staticData';
+import { bakedData } from 'buckaroo';
+import { extraComponents } from 'buckaroo';
+
+
+export default function Simple() {
+    return (
+        <extraComponents.OperationViewer
+            operations={bakedData.bakedOperations}
+            setOperations={(foo: unknown) => {
+                console.log('setCommands sent', foo);
+            }}
+            activeColumn={'foo-column'}
+            allColumns={['foo-col', 'bar-col', 'baz-col']}
+            commandConfig={bakedData.bakedCommandConfig}
+        />
+    );
+}

package/examples/ex/DFViewerEx.tsx

@@ -0,0 +1,3 @@
+import { extraComponents } from 'buckaroo';
+
+export default extraComponents.DFViewerEx;

package/examples/ex/DFViewerEx_large.tsx

@@ -0,0 +1,266 @@
+import React, { useState} from 'react';
+import _ from 'lodash';
+
+import { extraComponents } from 'buckaroo';
+//import { DFData, DFViewerConfig } from 'buckaroo';
+
+const data = [
+  {
+    "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
+      }
+    ]
+  }
+  ];
+
+  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[] {
+
+    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<string, any[]>) : Record<string, any>[] => {
+  const firstKey = _.keys(a)[0];
+  const data : Record<string, any>[]  = _.map(a[firstKey], (_val, idx):Record<string, any> => {
+    const pairs: [string, any][] =   _.map(a, (arr, key) => {
+      return [key, arr[idx]]
+    })
+    const row:Record<string, any> = _.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} =   {
+
+      "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},
+
+        "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
+    }
+    
+
+    return <extraComponents.DFViewer df_data={current.df}
+    df_viewer_config={current.df_viewer_config}
+    summary_stats_data={current.summary_stats_data}
+    activeCol={activeCol} setActiveCol={setActiveCol} />;
+  }
+  

package/examples/ex/DFViewerEx_real_summary.tsx

@@ -0,0 +1,20 @@
+import React, { useState} from 'react';
+import { extraComponents, bakedData } from 'buckaroo';
+
+//import { realSummaryConfig, realSummaryTableData } from '../../../js/baked_data/staticData';
+//import { realSummaryConfig, realSummaryTableData } from 'buckaroo';
+
+
+  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 <extraComponents.DFViewer df_data={current.df}
+    df_viewer_config={current.df_viewer_config}
+    summary_stats_data={current.summary_stats_data}
+    activeCol={activeCol} setActiveCol={setActiveCol} />;
+  }
+  

package/examples/ex/DFViewerEx_short_data.tsx

@@ -0,0 +1,22 @@
+import React, { useState} from 'react';
+import { bakedData, extraComponents } from 'buckaroo';
+
+
+
+  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: []}
+
+        const current = {
+          'df':bakedData.realSummaryTableData, 'df_viewer_config': bakedData.realSummaryConfig, 
+          'summary_stats_data': bakedData.realSummaryTableData };
+
+    return <extraComponents.DFViewer df_data={current.df.slice(0,3)}
+    df_viewer_config={dfv_config}
+    summary_stats_data={[]}
+    activeCol={activeCol} setActiveCol={setActiveCol} />;
+  }
+