just small utility functions to make working in vanilla js faster(if you like staying in JS);
Day 3️⃣ - 4️⃣ #100DaysOfCode #DataScience part 2
— _sk💻| looking for JavaScript developer role (@MhlunguSfundo) September 12, 2022
as for my #javascript dataframe software today I implemented another two simple functions, to replace a value in the entire df and rename a column pic.twitter.com/08IDkI8wWX
cmd
npm i atomicus
npm i material-icons
`
`html
Document
`
$3
expects an object of the following interface:
`ts
interface element {
tag: string;
attrs?: Record;
children?: Array; // can be an object or string, or both
}
`
an object of sort
`js
const el = {
tag: "div",
attrs: {
class: "my_div"
},
children:[
{
tag: "label",
attrs: {},
children: ["Hello"]
},
"world"
]
}
createElement(el) // will return an actual DOM node
`
$3
remove all children nodes in the element
`js
const app = document.getElementById("app")
clearEl(app) // will efficiently delete all children
`
$3
simply create's channels that can be subscribed too, and subscribers can be notified
`js
const Pub = new PubSub()
// args -> channel sub function -> returns an unsubcribe function
let unsub = Pub.subscribe("tools", (data)=> {
console.log("a tool has been clicked", data)
})
Pub.notify("tools", {type: "tool1", data: null})
`
$3
// read the following code from the bottom up to make sense
`js
// gui.js
// Pub - PubSub
const bottomC = (Pub) => ([
{
tag: "span",
attrs: {
title: "Histogram",
class: "material-icons-outlined",
onclick: () => Pub.notify('tools', "hist")
},
children: ['show_chart '] // material icon
},
])
const topC = (Pub) => ( [
{
tag: "input",
attrs: {
type: "file",
class: "inputCSV",
id: "f",
accept: ".csv"
}
},
{
tag: "div",
attrs: {
class: "selectDiv",
id: "sel"
},
},
{
tag:"span",
attrs: {
class: "material-icons-outlined",
title: "Data Shape",
onclick: () => Pub.notify("tools", "shape")
},
children: ['table_view']
},
{ tag: "span",
attrs: {
class: "material-icons-outlined",
title: "Column Names",
onclick: () => Pub.notify('tools', "cols")
},
children: ['view_column']
},
{ tag: "span",
attrs: {
class: "material-icons-outlined",
title: "drop all null rows",
onclick: () => Pub.notify('tools', 'dropna')
},
children: ['error']
},
{
tag: "span",
attrs:{
class: "material-icons-outlined",
title: "drop columns and rows",
onclick: () => Pub.notify("tools", "drop")
},
children: ["arrow_drop_down_circle"]
},
{
tag: "span",
attrs: {
class: "material-icons-outlined",
title: "Unique values",
onclick: () => Pub.notify('tools', 'unique')
},
children: ['dataset']
},
{
tag: "span",
attrs: {
class: "material-icons-outlined",
title: "Value Counter",
onclick: () => Pub.notify('tools', 'counter')
},
children: ['123']
},
{
tag: "span",
attrs: {
class: "material-icons-outlined",
title: "Replace value",
onclick: () => Pub.notify('tools', 'replace')
},
children: ['find_replace']
},
{
tag: "span",
attrs: {
class: "material-icons-outlined",
title: "Rename Column",
onclick: () => Pub.notify('tools', 'rename')
},
children: ['drive_file_rename_outline']
},
{tag: "span",
attrs: {
class: "material-icons-outlined",
title: "clear workspace",
onclick: () => Pub.notify('tools', 'reset')
},
children: ['restart_alt']
},
])
const topTools = (Pub) => ( {
tag: "div",
attrs: {
class: "Tools"
},
children: topC(Pub)
})
const bottomTools = (Pub) => ({
tag: "div",
attrs: {
class: "Tools"
},
children: bottomC(Pub)
})
export const tools = (Pub) =>{
return {
tag: "div",
attrs: {
class: "tools_container"
},
children: [
topTools(Pub),
bottomTools(Pub)
]
}
}
`
`js
// app.js
import {createElement, clearEl, PubSub} from "atomicus"
import { tools } from "./gui"
const cache = {} // cache created to reduce recreating on page change and back
const app = document.getElementById("app")
const Pub = new PubSub()
clearEl(app) // making sure the el is clean
cache['GUITools'] = createElement(tools(Pub))
app.appendChild(cache['GUITools'])
// the gui will notify this
Pub.subscribe("tools", (data)=> {
console.log("a tool has been clicked", data)
})
``