Stock Watchlist

[zzeleznick]

Stock Watchlist

While it's no bloomberg terminal, I'd like to share my first kit script 🥳

Thanks @johnlindquist for building this!

Code

Click to expand

// Menu: Kit Stocks
// Description: Display Stocks
// Author: Zach Zeleznick
// Twitter: @zzxiv

const {focusTab} = await kit('chrome')

const defaultSymbols = ["GME", "AMC", "SNAP"];
const apiUrl = `https://query1.finance.yahoo.com/v7/finance/quote?lang=en-US&region=US&corsDomain=finance.yahoo.com&symbols=`

const populateFrom = (symbols) => symbols.map((v, i) => {return {symbol: v, id: `id-${i}` }})

const tickersDB = db("tickers", { tickers: populateFrom(defaultSymbols) });
const tickersRef = tickersDB.get("tickers");

// helper in the case all tickers are removed – we should reinit or return empty result
const initDB = () => {
  const tickers = populateFrom(defaultSymbols);
  tickersDB.set("tickers", tickers).write();
}

const urlToOpen = (ticker) => {
  return `https://finance.yahoo.com/quote/${ticker}?p=${ticker}`
}

const getTickers = () => tickersRef.value()

const tickersToSymbols = () => getTickers().map(({symbol}) => symbol)

const tickersToChoices = () => {
  return getTickers().map(({symbol, id}) => {
    return {
      name: symbol,
      value: id,
    }
  });
}

const getStocks = async (stocks) => {
  stocks = stocks ? stocks : defaultSymbols;
  stocks = Array.isArray(stocks) ? stocks.join(",") : stocks;
  const response = await get(`${apiUrl}${stocks}`);
  const { quoteResponse: { result, error } } = response.data;
  // TODO: handle errors 
  // console.log(JSON.stringify(result, null, 2));
  return result;
}

const buildHtml = ({price, percentChange}) => {
  let color = 'gray';
  const significance = Math.abs(percentChange) > 0.25; //  arbitray 0.25% cutoff
  // TODO: should filter on significance based on volatility
  const pct = percentChange.toFixed(2);
  color = significance ? (Math.sign(percentChange) === -1 ? "red" : "green") : color;
  return `<div class="h-full w-full p-1 text-xs flex flex-col justify-center items-center font-bold">
      <div>${price}</div>
      <div style="color:${color}">${pct}%</div>
</div>`
}

const quoteResponseToChoice = (quoteResponse) => {
  const { symbol, displayName, regularMarketPrice,
          regularMarketChange, regularMarketChangePercent,
  } = quoteResponse;
  try {
    return {
      name: symbol,
      value: symbol,
      description: displayName,
      html: buildHtml({price: regularMarketPrice, percentChange: regularMarketChangePercent}),
    }
  } catch(e) {
    console.error(e);
    return null
  }
}

const listTickers = async () => {
  let symbols = tickersToSymbols();
  if (!symbols || !symbols.length) {
    await arg("Search stocks:", [{
      name: "No Results",
      value: "__empty__",
      description: "Hit enter to reinit default stocks"
    }]);
    initDB();
    return await listTickers();
  }
  const stocks = await getStocks(symbols);
  const choices = stocks.map(quoteResponseToChoice).filter(x => x);
  const selectedTicker = await arg("Search stocks:", choices);
  focusTab(urlToOpen(selectedTicker)); // open tab for quote
}

const addTicker = async () => {
  const symbol = await arg("Select stock to add:");
  tickersRef.insert({ symbol }).write();
  return await addTicker();
};

const removeTicker = async () => {
  const choices = tickersToChoices();
  const id = await arg("Select stock to remove:", choices);
  tickersRef.remove({ id }).write();
  return await removeTicker();
};

onTab("List", listTickers)
onTab("Add", addTicker)
onTab("Remove", removeTicker)

[johnlindquist]

@zzeleznick Love this! I'm going to start adding "Featured Scripts" to the homepage of scriptkit.app. I'd like to feature this one if that's ok with you?

[zzeleznick]

Glad to hear it and that sounds great 🙌 !

[zzeleznick]

In the case you find you or others this helpful, I wrote some general feedback and a few notes about development. I can also split these into separate Feedback / Issues if that's preferable!

1. The project structure currently has a bit of a learning curve.

I would have appreciated more intro documentation on how kit and kenv work together. One example of uncertainty I struggled with was trying understand kit/cli/run.js vs kenv/tray/left-click.js. The scripts seemed to have the same intended behavior and the greppable string Which script do you want to run? and I wasn't sure at first which one was the primary entry point.

After some initial explorations (e.g. modifying remove.js in kit to show options, adding a back button in the older tab-less todo.js, installing some more sample), I found that given all the shared interactions between kitapp, kit, and kenv, I feel most of the complexity is abstracted away :)

2. There might be an issue where /app does not match/tray in kenv in order to run the tray actions for the beta version of the kitapp I installed.

Also, I'm not exactly sure how updates work and whether it's best to use version control with kit and kenv or install from scratch each time.

3. For creating workflow shortcuts, especially quick actions from dynamic lists, Kit is a breeze!

On my wish list would be planned support for script versioning and script-specific user configuration options (e.g. choose from 🚀 | ↑ | ) to customize scripts outside of the main script code. Thinking out loud, I considered supporting changing UI settings for kit-stocks, but I didn't want to bloat the UI in order to customize the UI if that makes sense. My mental model is a hot-key that opens all kit package settings similar to Sublime settings.

[johnlindquist]

Thanks for the feedback, I really appreciate it.

1. Yeah, that tray stuff in flux. I initially wanted to give the user full control over what clicking the icon does, but I think that gives too much opportunity to get into a broken state where they couldn't run scripts and/or quit the app. The plan is to allow users to override tray scripts with //Tray: metadata in their scripts dir.

Note: Deleting "tray" means I'll remove it from the "kenv" starter repo and unlink it from the app. I won't make any changes to your .kenv as I want the creator to feel complete ownership of that. So that means you'll have a "stray" tray dir since you were on the beta.

Once the beta completely settles, I'll start writing docs. All the folder structure is "done", it's mostly the UI features in the app that I want/need to add.

2. Versioning
   a. .kit: Don't touch .kit unless you want to help with app dev. Kit auto-updates on tags and auto-pulls on the .kit dir to stay in sync.
   b. .kenv: Respect the directory conventions, but feel free to version however you want. The app only checks if it exists and creates it if it doesn't. I'm going to "degit" the kenv directory so people feel more comfortable and git init themselves.

3. The current recommendation would be to use the db() util for user settings. They can manually go into update the .json file or you can provide a tab to set some options. "Versions" would be keeping an array of those you could swap between.