{"id":25269882,"url":"https://github.com/javascript-pro/typescripttickergrid","last_synced_at":"2025-04-06T06:15:07.215Z","repository":{"id":89534428,"uuid":"45058900","full_name":"javascript-pro/TypeScriptTickerGrid","owner":"javascript-pro","description":"Implements a financials ticker grid in TypeScript. Badly.","archived":false,"fork":false,"pushed_at":"2015-11-05T14:55:49.000Z","size":560,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-12T11:37:21.367Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/javascript-pro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-27T17:44:36.000Z","updated_at":"2020-07-24T01:22:41.000Z","dependencies_parsed_at":"2023-03-13T18:09:05.021Z","dependency_job_id":null,"html_url":"https://github.com/javascript-pro/TypeScriptTickerGrid","commit_stats":null,"previous_names":["javascript-pro/typescripttickergrid"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javascript-pro%2FTypeScriptTickerGrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javascript-pro%2FTypeScriptTickerGrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javascript-pro%2FTypeScriptTickerGrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javascript-pro%2FTypeScriptTickerGrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javascript-pro","download_url":"https://codeload.github.com/javascript-pro/TypeScriptTickerGrid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247441060,"owners_count":20939239,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-12T11:27:54.580Z","updated_at":"2025-04-06T06:15:07.113Z","avatar_url":"https://github.com/javascript-pro.png","language":"TypeScript","readme":"# TypeScript TickerGrid\n\n## 1. TypeScript Module\nThe internal module encapsulates the functionality, and prevents pollution of the global namespace.\n\nAside from the Main class, which is entry point to the application, TickerGrid comprises a View class, a Model Class and an interface called iCompany.\n\nThese are all compiled into a single JavaScript file called \u003ca href=\"http://jqueryresume.com/js/tickergrid.js\" target=\"_blank\"\u003etickergrid.js\u003c/a\u003e\n\n## 2. Model Class\n\nThe Model handles the loading, storage and parsing of the data. It's first job is to load the snapshot file, parse it into an array of Company objects and then send a message to the View to render the grid to the DOM.\n\nThe second part of the model's job is to provide an engine to process the deltas, update the Company objects with new data and then communicate those changes to the View to be shown in the UI.\n\n## 3. Grid Class\nThe view's job is to interact with the DOM as efficiently as possible using the Model's data. The approach I've taken is to create and render a table to an existing div on the page.\n\nWhen the Model emits a message to update a row, the view class creates a new 'tr' element and replaces the old row with the new element.\n\nNotification that an item has been updated via a visual flare in the UI is handled by \u003ca href=\"css/style.css\" target=\"_blank\"\u003eCSS\u003c/a\u003e, thus offloading animation logic to the browser itself, which it is efficient at.\n\nI wanted to try out the CSS3 @keyframes technique because I used to be a Flash Developer and was interested to discover more options for making a UI look and feel great.\n\n## 4. Chart Class\nThis is a little experimental. The idea is that on every tick each company Object updates it's tick history. The chart then gets re-rendered on each tick.\n\n\n\n### Developed in TypeScript using Sublime.\n\n### Clone the repository\ncd to the folder you want to contain your new project and run \n```\ngit clone git@github.com:listingslab/TypeScriptTickerGrid.git\n```\n\n### TypeScript Compiler\nThe Typescript compiler wrapper. Exposes the [TypeScript command line compiler](https://www.npmjs.com/package/typescript-compiler) to your code.\n```\nnpm install typescript-compiler\n```\nallows us to run commands like the following to compile and concatonate our JavaScript into the public folder\n```\ntsc -out public/js/tickergrid.js src/Main.ts\n```\n## Grunt \u0026 LiveReload workflow\nWe use Grunt to facilitate workflow. The Gruntfile.js is very simple, it's default task is to watch for changes in the /src directory and then compile the TypeScript code into a single file: /public/js/tickergrid.js. There are a few dependencies to install to enable this. cd to the project directory and run\n```\nnpm install\n```\nOnce these components are installed we can simply run the command ```grunt``` in our project directory. Any changes made to .ts files in the /src directory will immediately be compiled into the file /public/js/tickergrid.js.\n\n### Http Server\nBecause of browser secrurity restrictions we need a local webserver to run the TickerGrid app. We use a NodeJS static http server called live-server because it automatically reloads the page when the code changes.\n```\nnpm install -g live-server\n```\ncd to the public folder and run ```live-server``` and hey presto.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavascript-pro%2Ftypescripttickergrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavascript-pro%2Ftypescripttickergrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavascript-pro%2Ftypescripttickergrid/lists"}