Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/volatile-static/Chartero
Chart in Zotero
https://github.com/volatile-static/Chartero
highcharts t-design vue3 zotero zotero-addon zotero-plugin
Last synced: 6 days ago
JSON representation
Chart in Zotero
- Host: GitHub
- URL: https://github.com/volatile-static/Chartero
- Owner: volatile-static
- License: apache-2.0
- Created: 2022-09-01T08:17:39.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-18T11:13:11.000Z (2 months ago)
- Last Synced: 2024-09-19T11:33:16.108Z (2 months ago)
- Topics: highcharts, t-design, vue3, zotero, zotero-addon, zotero-plugin
- Language: TypeScript
- Homepage: https://gitee.com/const_volatile/chartero
- Size: 3.68 MB
- Stars: 371
- Watchers: 2
- Forks: 8
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-zotero - Chartero - Zotero plugin to provide charts in Zotero. (Extensions / Productivity)
- awesome-zotero - Chartero - Zotero plugin to provide charts in Zotero. (Extensions / Productivity)
README
Chartero
English | ็ฎไฝไธญๆ
## Abstract
The name _Chartero_ is a combination of **Char**t and Zo**tero**. As a [Zotero](https://www.zotero.org/) plugin, it can make your library livelier.
## User Guide
๐ Introduction ๐
| Screenshots | Features |
| :---------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------- |
|  | The kernel of `Chartero`. It records page numbers and timestamps when you read. |
|  | In the main menu `File`, you can open the recently read documents. |
|  | In `items tree` of the library view, you can add a column to show reading progress. |
|  | Illustrates all information about a `top-level item`. Updating as soon as record changes when in a `Reader`. |
|  | Summary of two or more `items`. _Will not_ be loaded if the number of selected items is larger than you set in preferences. |
|  | Click `Main menu -> View -> Overview` and jump to a new tab. |
|  | Besides the scrollbar of `Reader`(PDF and ePub), grayscale blocks for read pages and color strips for annotations. |
|   | At the left sidebar of `Reader`, you can see all images in the current document. Click to navigate and double-click to copy. |
### Troubleshooting
Please disable all other plugins when necessary, then file an issue with the exported debug output. Feel free to ask anything in issue๐
> [Known Issues](https://github.com/volatile-static/Chartero/issues?q=is%3Aissue+is%3Aopen+label%3Abug)
## Developer Guide
- [](https://github.com/windingwind/zotero-plugin-template)
- Using [](https://www.npmjs.com/package/highcharts) to generate charts
- [Minimap](src/bootstrap/modules/minimap/) and [All Images](src/bootstrap/modules/images/) are rendered by **built-in** [](https://17.reactjs.org/)
- [All Images](src/bootstrap/modules/images/) uses **built-in** [PDF.js](https://github.com/zotero/pdf.js) in [ChromeWorker](https://devdoc.net/web/developer.mozilla.org/en-US/docs/Web/API/ChromeWorker.html) to extract images from PDFs.
- UI components are from [](https://tdesign.tencent.com/vue-next)
- For the legacy Zotero `6` version, please check out [this branch](https://github.com/volatile-static/Chartero/tree/js_overlay).
### Directory Structure
- [addon](addon): The assets of the plugin, see [template](https://github.com/windingwind/zotero-plugin-template) for details.
- [tools](tools): Scripts for development.
- src
- [src/bootstrap](src/bootstrap): The entry point of the plugin.
- [src/bootstrap/modules](src/bootstrap/modules): Implementation of modules.
- [src/vue](src/vue): The `iframe` windows using [Vue](https://v3.vuejs.org/)
- [src/vue/summary](src/vue/summary): At sidebar.
- [src/vue/dashboard](src/vue/dashboard): At sidebar tab-panel.
- [src/vue/overview](src/vue/overview): At new tab.
- [src/vue/utility](src/vue/utility): The utility functions.
- [src/vue/test](src/vue/test): The unit test for Vue components.
- [src/modules](src/modules): Git-submodules for VS Code debugging.
- use the following command to initialize the submodules:
```bash
git submodule init
git submodule update
```
- [src/worker](src/worker): The worker for data processing.
### URL
These URLs are registered in [bootstrap.ts](addon/content/bootstrap.ts), and you can access them via `fetch` in Zotero.
- `chrome://chartero/`: Access to folder [addon](addon).
- `resource://chartero/`: Access to folder [addon/content](addon/content).
### Preferences
The `config.defaultSettings` field of [package.json](package.json) defines the default values of preferences. The keys will be automatically replaced when compiling [addon](addon).
### Locales
| Locales | [zh-CN](addon/locale/zh-CN/) | [en-US](addon/locale/en-US/) | [ja-JP](addon/locale/ja-JP/) | [it-IT](addon/locale/it-IT/) |
| :-----: | :--------------------------: | :--------------------------: | :--------------------------: | :--------------------------: |
All locale strings are defined in [locale](addon/locale), which will be loaded dynamically when the plugin starts.
### Development Environment
- [.env](./.env):
```bash
ZOTERO_PLUGIN_ZOTERO_BIN_PATH = */Zotero.app/Contents/MacOS/zotero
ZOTERO_PLUGIN_PROFILE_PATH = /path/to/profile
ZOTERO_PLUGIN_DATA_DIR =
```
- Here are some useful scripts:
- `reload-all`: Build and reload the Zotero in **production** environment.
- `reload-dev`: Build in **development** environment without Vue pages and reload Zotero.
- `build`: Build in **development** environment and reload Zotero.
- `watch`: Watch changes of files in `src/vue` and reload Zotero.
- `dev`: Open a hot-reload server for `src/vue/test/`.
### โกHot-reload and Breakpoints in Source
With the Chartero running, you can run debug config `Vue` in the sidebar of the VS Code. This will launch the Vue unit test in Firefox with hot-reload. You can then utilize [vue devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/) in Firefox as well as set breakpoints in VS Code for single-step debugging.
When running in development environment, Chartero will register a `/test/chartero` route in [HTTP server](https://www.zotero.org/support/dev/client_coding/connector_http_server), accepting any command from a POST request and returning its `eval` results in JSON format. By accessing this `Endpoint`, the [Vue test module](src/vue/test/) provides a series of "dummy" classes to simulate the Zotero environment. This method is of great reference value for other Zotero client applications.
### Record Structure
The data structure of history records is defined in [history/data.ts](src/bootstrap/modules/history/data.ts), and the JSON string is like this:
```json
{
"pages": {
"0": {
"p": {
"1693200000": 6
}
}
},
"numPages": 27
}
```
### Inter-plugin Compatibility
> This section is for developers who have suspected compatibility issues with `Chartero`.
- Patched the `search` method of object `Zotero.Search` to hide the note items that record the reading history.
- Add click events to tabs in the left side-bar of `Reader`.
- When adding "Overview" tab, `contextPane.js` throws `extraData[ids[0]] is undefined` error, caused by the `type` of this tab being `library`.
## See Also
- [๐คฉ Awesome Zotero Plugins](https://plugins.zotero-chinese.com/charts.html)
---
